/* =============================================================================
   COMPONENTS — buttons, header/nav, drawer, cards, hero, sections, FAQ, footer.
   Scoped under .bfr. Reads ONLY tokens (zero raw hex/rgb).
   ========================================================================== */

/* ----------------------------- BUTTONS ----------------------------------- */
.bfr .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius); border:1px solid transparent;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), background var(--dur) var(--ease),
             border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .btn .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .btn:hover .arrow{ transform:translateX(4px) }
.bfr .btn--primary{ background:var(--btn-primary-bg); color:var(--btn-primary-fg) }
.bfr .btn--primary:hover{ background:var(--btn-primary-bg-hover); transform:translateY(-2px); box-shadow:0 12px 30px var(--accent-border) }
.bfr .btn--ghost{ background:var(--btn-ghost-bg); color:var(--btn-ghost-fg); border-color:var(--btn-ghost-border) }
.bfr .btn--ghost:hover{ background:var(--btn-ghost-bg-hover); transform:translateY(-2px) }
.bfr .btn--lg{ font-size:var(--fs-lg); padding:16px 34px }
/* Text link with an arrow — light, boxless secondary action (no heavy outline). */
.bfr .btn--link{
  background:transparent; border-color:transparent; color:var(--text);
  padding:16px 10px; box-shadow:none;
}
.bfr .btn--link .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .btn--link:hover{ background:transparent; transform:none; color:var(--accent) }
.bfr .btn--link .u{ box-shadow:inset 0 -1px 0 currentColor; padding-bottom:1px; transition:box-shadow var(--dur-fast) var(--ease) }
.bfr .btn--link:hover .u{ box-shadow:inset 0 -2px 0 currentColor }

/* ------------------------------ HEADER / NAV ----------------------------- */
/* CRITICAL: nav uses backdrop-filter (becomes containing block for the fixed
   drawer). It MUST stay overflow:visible or the mobile drawer gets clipped
   invisible ("burger does nothing"). Do not set overflow:hidden here. */
.bfr .site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  overflow:visible;
  background:var(--nav-bg);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.bfr .site-header.scrolled{
  background:var(--nav-bg-scrolled);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom-color:var(--nav-border);
}
.bfr .nav-inner{
  max-width:var(--container); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  min-height:var(--nav-h);
}
.bfr .nav-logo{ display:flex; align-items:center; flex-shrink:0; z-index:2 }
.bfr .nav-logo img{ height:32px; width:auto }
/* theme-swapped logo: white wordmark on dark, navy wordmark on light */
.bfr .logo-dark{ display:block }
.bfr .logo-light{ display:none }
:root[data-theme="light"] .bfr .logo-dark{ display:none }
:root[data-theme="light"] .bfr .logo-light{ display:block }

/* Header chrome over the hero, before scroll. The hero is now theme-aware:
   DARK theme → dark hero → needs LIGHT chrome (white logo/nav). LIGHT theme →
   airy light hero → needs the normal DARK theme chrome (navy logo/nav), so we
   scope these hero-chrome overrides to the DARK theme only. Once scrolled, the
   nav gets its theme veil and reverts to theme colours in both. */
:root[data-theme="dark"] .bfr .site-header:not(.scrolled) .logo-dark{ display:block }
:root[data-theme="dark"] .bfr .site-header:not(.scrolled) .logo-light{ display:none }
:root[data-theme="dark"] .bfr .site-header:not(.scrolled) .nav-burger[aria-expanded="false"]{ color:var(--hero-fg); background:var(--hero-surface); border-color:var(--hero-surface-border) }
@media (min-width:1024px){
  :root[data-theme="dark"] .bfr .site-header:not(.scrolled) .nav-link{ color:var(--hero-fg-muted) }
  :root[data-theme="dark"] .bfr .site-header:not(.scrolled) .nav-item:hover .nav-link,
  :root[data-theme="dark"] .bfr .site-header:not(.scrolled) .nav-item:focus-within .nav-link,
  :root[data-theme="dark"] .bfr .site-header:not(.scrolled) .nav-link:hover{ color:var(--hero-fg) }
  :root[data-theme="dark"] .bfr .site-header:not(.scrolled) .theme-toggle{ color:var(--hero-fg); background:var(--hero-surface); border-color:var(--hero-surface-border) }
}

.bfr .nav-links{ display:flex; align-items:center; gap:var(--space-1) }
.bfr .nav-item{ position:relative }
.bfr .nav-link{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:600;
  color:var(--nav-fg); padding:10px 12px; border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Keep the whole primary nav on ONE row down to 1280: labels never wrap
   (white-space:nowrap above), and between the desktop breakpoint and ~1400px the
   inter-item gap, link padding and CTA are tightened so the six labels + toggle +
   CTA fit beside the logo without stacking. Below 1024 the mobile drawer takes over. */
@media (min-width:1024px) and (max-width:1400px){
  .bfr .nav-links{ gap:0 }
  .bfr .nav-link{ padding:10px 9px; gap:5px; font-size:.82rem }
  .bfr .nav-actions{ gap:var(--space-2); margin-left:var(--space-1) }
  .bfr .nav-cta{ padding:9px 15px; font-size:.82rem }
  .bfr .nav-inner{ gap:var(--space-2) }
}
.bfr .nav-link:hover,.bfr .nav-item:hover .nav-link,.bfr .nav-item:focus-within .nav-link{ color:var(--nav-fg-hover) }
.bfr .nav-link.has-caret::after{
  content:""; width:7px; height:7px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--dur-fast) var(--ease);
}
.bfr .nav-item:hover .nav-link.has-caret::after,
.bfr .nav-item:focus-within .nav-link.has-caret::after{ transform:translateY(0) rotate(225deg) }

/* Dropdown panel.
   Each panel carries the `hidden` HTML attribute as a pre-CSS / no-JS guard: the
   UA rule [hidden]{display:none} keeps it closed even before this stylesheet loads
   (prevents the flash of open menus). This author rule sets display:block to take
   over once loaded, then manages the closed/open state via opacity+visibility. */
.bfr .nav-panel{
  display:block;
  position:absolute; top:calc(100% + 2px); left:0;
  min-width:260px; padding:10px;
  background:var(--nav-panel-bg); border:1px solid var(--nav-panel-border);
  border-radius:var(--radius-lg); box-shadow:var(--nav-panel-shadow);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:20;
}
.bfr .nav-panel--right{ left:auto; right:0 }
/* Hover-gap bridge so the panel keeps :hover when the cursor crosses the gap */
.bfr .nav-item > .nav-panel::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.bfr .nav-item:hover > .nav-panel,
.bfr .nav-item:focus-within > .nav-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }
.bfr .nav-mega-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 12px; border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease);
}
.bfr .nav-mega-item:hover{ background:var(--surface-hover) }
.bfr .nav-mega-item .mi{
  flex-shrink:0; width:34px; height:34px; border-radius:var(--radius-sm);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
}
.bfr .nav-mega-item .mi svg{ width:18px; height:18px }
.bfr .nav-mega-item h4{ font-size:var(--fs-sm); font-weight:700 }
.bfr .nav-mega-item p{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px }

.bfr .nav-actions{ display:flex; align-items:center; gap:var(--space-3); flex-shrink:0 }
.bfr .nav-cta{ padding:10px 20px; font-size:var(--fs-sm) }

/* Theme toggle */
.bfr .theme-toggle{
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); color:var(--text); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bfr .theme-toggle:hover{ background:var(--surface-hover); transform:translateY(-1px) }
.bfr .theme-toggle svg{ width:18px; height:18px }
.bfr .theme-toggle .icon-moon{ display:none }
:root[data-theme="light"] .bfr .theme-toggle .icon-sun{ display:none }
:root[data-theme="light"] .bfr .theme-toggle .icon-moon{ display:block }

/* Burger */
.bfr .nav-burger{
  display:none; width:44px; height:44px; place-items:center;
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); color:var(--text); cursor:pointer;
  /* Sit ABOVE the open drawer (z-index:1100) so the close control stays visible
     and tappable while the drawer is open. Both live in the .site-header stacking
     context, so 1200 > 1100 keeps the burger/X on top. */
  position:relative; z-index:1200;
}
.bfr .nav-burger svg{ width:22px; height:22px }
/* Icon swap: hamburger when closed, X when the drawer is open. */
.bfr .nav-burger .icon-close{ display:none }
.bfr .nav-burger[aria-expanded="true"] .icon-burger{ display:none }
.bfr .nav-burger[aria-expanded="true"] .icon-close{ display:block }
.bfr .drawer-backdrop{ display:none }

/* ---- Mobile drawer (< 1024px) ---- */
@media (max-width:1023.98px){
  .bfr .nav-links{
    position:fixed; top:0; right:0;
    width:min(88vw, 380px); height:100dvh;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:calc(var(--nav-h) + 16px) 18px 32px;
    background:var(--nav-panel-bg); border-left:1px solid var(--nav-panel-border);
    box-shadow:var(--shadow-lg);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform var(--dur) var(--ease);
    z-index:1100;
  }
  .bfr .nav-links.open{ transform:translateX(0) }

  .bfr .nav-item{ border-bottom:1px solid var(--border) }
  .bfr .nav-link{ width:100%; justify-content:space-between; padding:16px 8px; font-size:var(--fs-base) }
  .bfr .nav-link.has-caret::after{ margin-left:auto }

  /* accordion panels: collapsed by default, expand on .nav-item.open */
  .bfr .nav-panel{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; box-shadow:none; border:0; background:transparent;
    padding:0 0 8px; border-radius:0;
    max-height:0; overflow:hidden;
    transition:max-height var(--dur) var(--ease);
  }
  .bfr .nav-panel::before{ display:none }
  .bfr .nav-item.open > .nav-panel{ max-height:1400px; opacity:1; visibility:visible; pointer-events:auto }
  .bfr .nav-item.open > .nav-link.has-caret::after{ transform:rotate(225deg) }
  /* do not let desktop :hover expand accordions on touch */
  .bfr .nav-item:hover > .nav-panel{ max-height:0 }
  .bfr .nav-item.open:hover > .nav-panel{ max-height:1400px }

  .bfr .nav-actions{ margin-top:18px; flex-direction:row; justify-content:space-between }
  .bfr .nav-cta{ flex:1 }
  .bfr .nav-burger{ display:grid }

  /* Backdrop must sit BELOW the header (z-index:1000) so the drawer, which lives
     inside the header's stacking context, stays above it and clickable. It still
     covers all page content (which is below the header). */
  .bfr .drawer-backdrop{
    display:block; position:fixed; inset:0; z-index:990;
    background:var(--backdrop);
    opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .bfr .drawer-backdrop.open{ opacity:1; visibility:visible }
}

/* body scroll-lock (class applied to html AND body by JS) */
.bfr-lock{ overflow:hidden!important; touch-action:none }

/* ------------------------------ HERO ------------------------------------- */
/* The hero is theme-aware and VIDEO-FREE: the animated mesh + grid + aurora +
   bokeh layers ARE the background — airy/light in the light theme, themed dark
   in the dark theme. It layers, back-to-front: mesh -> grid -> aurora -> bokeh ->
   scrim -> particles -> content. isolation:isolate keeps the z-index stack local. */
.bfr .hero{
  position:relative; overflow:hidden; overflow-x:clip; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(44px,8vw,80px)) 0 clamp(56px,8vw,88px);
  background:var(--hero-base); color:var(--hero-fg);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bfr .hero > .container{ position:relative; z-index:3 }

/* ---- Hero background layers ---- */
/* mesh + grid are OVERSCANNED (inset:-8%) so gentle parallax translation never
   reveals an edge; both are clipped by the hero's overflow so they add no page width. */
.bfr .hero-mesh{ position:absolute; inset:-8%; z-index:0; background:var(--hero-mesh); background-size:400% 400%; animation:meshShift 25s ease infinite; will-change:background-position,transform }
@keyframes meshShift{0%{background-position:0% 0%}25%{background-position:100% 50%}50%{background-position:50% 100%}75%{background-position:0% 50%}100%{background-position:0% 0%}}
.bfr .hero-grid{ position:absolute; inset:-8%; z-index:0; pointer-events:none; will-change:transform;
  background-image:linear-gradient(var(--hero-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid-line) 1px,transparent 1px);
  background-size:60px 60px }
.bfr .aurora{ position:absolute; top:-30%; left:-20%; width:140%; height:80%; z-index:0; pointer-events:none; opacity:var(--aurora-opacity) }
.bfr .aurora-band{ position:absolute; width:100%; border-radius:50%; filter:blur(80px); will-change:transform,opacity }
.bfr .aurora-band:nth-child(1){ top:10%; height:200px; background:var(--aurora-band-1); animation:auroraWave 18s ease-in-out infinite }
.bfr .aurora-band:nth-child(2){ top:35%; height:160px; background:var(--aurora-band-2); animation:auroraWave 22s ease-in-out infinite reverse }
.bfr .aurora-band:nth-child(3){ top:55%; height:120px; background:var(--aurora-band-3); animation:auroraWave 26s ease-in-out infinite 3s }
@keyframes auroraWave{0%,100%{transform:translateX(-8%) scaleY(1);opacity:.3}25%{transform:translateX(5%) scaleY(1.3);opacity:.6}50%{transform:translateX(8%) scaleY(.8);opacity:.4}75%{transform:translateX(-3%) scaleY(1.1);opacity:.55}}
.bfr .bokeh{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; will-change:transform }
.bfr .bokeh-1{ width:400px; height:400px; top:5%; right:-5%; background:var(--bokeh-1); filter:blur(60px); animation:bokeh1 28s ease-in-out infinite }
.bfr .bokeh-2{ width:500px; height:500px; bottom:-10%; left:-8%; background:var(--bokeh-2); filter:blur(80px); animation:bokeh2 34s ease-in-out infinite }
.bfr .bokeh-3{ width:300px; height:300px; top:30%; left:20%; background:var(--bokeh-3); filter:blur(70px); animation:bokeh3 22s ease-in-out infinite }
.bfr .bokeh-4{ width:250px; height:250px; top:60%; right:15%; background:var(--bokeh-4); filter:blur(60px); animation:bokeh1 30s ease-in-out infinite 5s }
.bfr .bokeh-5{ width:350px; height:350px; top:10%; left:50%; background:var(--bokeh-5); filter:blur(75px); animation:bokeh3 26s ease-in-out infinite 8s }
@keyframes bokeh1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.15)}66%{transform:translate(-20px,40px) scale(.9)}}
@keyframes bokeh2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-30px,-40px) scale(1.1)}66%{transform:translate(50px,20px) scale(.85)}}
@keyframes bokeh3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,35px) scale(1.2)}66%{transform:translate(-35px,-15px) scale(.95)}}

/* Rising particles (JS-created dots) + CSS box-shadow starfield */
.bfr .particles-layer{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.bfr .particles-layer::before,.bfr .particles-layer::after{ content:''; position:absolute; width:2px; height:2px; border-radius:50%; top:0; left:0; will-change:transform }
.bfr .particles-layer::before{
  box-shadow:120px 80px 0 var(--particle-a),280px 150px 0 var(--particle-a),450px 60px 0 var(--particle-b),600px 200px 0 var(--particle-c),750px 100px 0 var(--particle-a),900px 180px 0 var(--particle-b),1050px 50px 0 var(--particle-a),1200px 160px 0 var(--particle-c),150px 300px 0 var(--particle-b),350px 350px 0 var(--particle-a),550px 400px 0 var(--particle-c),700px 320px 0 var(--particle-a),850px 380px 0 var(--particle-b),1000px 300px 0 var(--particle-a),1150px 360px 0 var(--particle-c);
  animation:particleDrift 40s linear infinite }
.bfr .particles-layer::after{
  box-shadow:200px 500px 0 var(--particle-a),380px 550px 0 var(--particle-b),520px 480px 0 var(--particle-c),680px 560px 0 var(--particle-a),830px 510px 0 var(--particle-b),980px 580px 0 var(--particle-a),1100px 500px 0 var(--particle-c),100px 650px 0 var(--particle-b),300px 700px 0 var(--particle-a),500px 680px 0 var(--particle-c),700px 720px 0 var(--particle-a),900px 660px 0 var(--particle-b),1080px 700px 0 var(--particle-a),250px 800px 0 var(--particle-c),650px 850px 0 var(--particle-a);
  animation:particleDrift 50s linear infinite reverse }
@keyframes particleDrift{0%{transform:translate(0,0)}25%{transform:translate(-20px,-30px)}50%{transform:translate(15px,-10px)}75%{transform:translate(-10px,20px)}100%{transform:translate(0,0)}}
.bfr #particles{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.bfr .particle{ position:absolute; width:2px; height:2px; border-radius:50%; background:var(--particle-a); animation:particleRise linear infinite; pointer-events:none }
.bfr .particle.p-b{ background:var(--particle-b) }
.bfr .particle.p-c{ background:var(--particle-c) }
@keyframes particleRise{0%{transform:translateY(100vh) translateX(0) scale(1);opacity:0}10%{opacity:1}50%{transform:translateY(50vh) translateX(30px) scale(1.2)}90%{opacity:.6}100%{transform:translateY(-10vh) translateX(-20px) scale(.8);opacity:0}}

/* Soft theme-aware scrim keeps the headline copy AA over the mesh (light veil in
   the airy light hero, dark veil in the dark hero). No video layer. */
.bfr .hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--hero-scrim) }

/* ---- Hero content: two-column (copy + chart) on desktop ---- */
.bfr .hero-inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,56px); align-items:center;
}
.bfr .hero-copy{ text-align:left; min-width:0 }
.bfr .hero .badge{ margin-inline:0; color:var(--hero-accent); background:rgb(var(--ch-emerald) / .12); border-color:rgb(var(--ch-emerald) / .3) }
.bfr .hero h1{
  font-family:var(--font-display); font-weight:800; color:var(--hero-fg);
  font-size:clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing:-.03em; line-height:1.06;
  margin-top:var(--space-5);
}
.bfr .hero .grad-text{ background:var(--hero-grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gradText 6s ease infinite }
.bfr .hero .lede{ margin:var(--space-5) 0 0; max-width:560px; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--hero-fg-muted) }
.bfr .hero .lede strong{ color:var(--hero-fg); font-weight:600 }
.bfr .hero-cta{ display:flex; gap:10px 18px; align-items:center; justify-content:flex-start; flex-wrap:wrap; margin-top:var(--space-8) }
/* secondary hero action = boxless text link + arrow, pinned to the hero fg so it
   reads on the dark hero (white) AND the airy light hero (navy). */
.bfr .hero .btn--link{ color:var(--hero-fg) }
.bfr .hero .btn--link:hover{ color:var(--hero-accent) }
/* legacy: any ghost that still lands on the hero stays legible in both themes */
.bfr .hero .btn--ghost{ color:var(--hero-fg); border-color:var(--hero-surface-border); background:var(--hero-surface) }
.bfr .hero .btn--ghost:hover{ background:rgb(var(--ch-white) / .12); border-color:rgb(var(--ch-white) / .28) }
.bfr .hero-visual{ width:100%; min-width:0 }

/* Badge / pill */
.bfr .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:var(--radius-pill);
  background:var(--badge-bg); border:1px solid var(--badge-border); color:var(--badge-fg);
  font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
}
.bfr .badge svg{ width:14px; height:14px }

/* ----------------------- PILLAR GRID (3 up, inside the dark hero) --------- */
.bfr .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin-top:clamp(44px,6vw,64px) }
.bfr .pillar{
  position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  text-align:left; padding:var(--space-8);
  background:var(--hero-surface); border:1px solid var(--hero-surface-border); border-radius:var(--card-radius);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr a.pillar:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--hero-surface) }
.bfr .pillar .p-icon{ width:48px; height:48px; border-radius:var(--radius-sm); display:grid; place-items:center; background:rgb(var(--ch-emerald) / .14); color:var(--hero-accent) }
.bfr .pillar .p-icon svg{ width:24px; height:24px }
.bfr .pillar h3{ font-size:var(--fs-xl); font-weight:800; color:var(--hero-fg) }
.bfr .pillar p{ color:var(--hero-fg-muted); font-size:var(--fs-sm) }
.bfr .pillar .p-stat{ margin-top:auto; padding-top:var(--space-4); border-top:1px solid var(--hero-surface-border); color:var(--hero-fg-subtle); font-size:var(--fs-xs); font-weight:600 }
.bfr .pillar .p-link{ color:var(--hero-accent); font-weight:700; font-size:var(--fs-sm); display:inline-flex; gap:6px; align-items:center }

@keyframes gradText{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* Subtle pulse on the primary highlight CTAs */
.bfr .btn--glow{ animation:ctaPulse 3.4s ease-in-out infinite }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 8px 24px rgb(var(--ch-emerald) / .18) } 50%{ box-shadow:0 10px 34px var(--cta-glow) } }

/* ----------------------- HERO METRICS CHART PANEL ------------------------ */
.bfr .hd{
  position:relative; background:var(--hd-panel-bg); border:1px solid var(--hd-panel-border);
  border-radius:var(--radius-lg); padding:20px 20px 16px; overflow:hidden; color:var(--hd-panel-fg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:var(--shadow-lg);
}
.bfr .hd::before{ content:''; position:absolute; top:-30%; right:-15%; width:55%; height:140%; background:var(--hd-panel-glow); pointer-events:none }
.bfr .hd-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; position:relative; z-index:1; font-family:var(--font-heading) }
.bfr .hd-title{ font-size:var(--fs-xs); font-weight:700; color:var(--hd-panel-fg); letter-spacing:.02em; display:inline-flex; align-items:center }
.bfr .hd-dot{ width:6px; height:6px; border-radius:50%; background:var(--hd-livedot); margin-right:7px; animation:hd-livedot 1.6s ease-in-out infinite; box-shadow:0 0 6px var(--hd-livedot) }
@keyframes hd-livedot{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
.bfr .hd-period{ font-size:10px; font-weight:600; color:var(--hd-panel-fg-muted); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap }
.bfr .hd-row{ display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; padding:11px 0; border-top:1px solid var(--hd-panel-border); position:relative; z-index:1 }
.bfr .hd-row:first-of-type{ border-top:none; padding-top:6px }
.bfr .hd-meta{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.bfr .hd-meta .label{ font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--hd-panel-fg-muted) }
.bfr .hd-meta .value{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.bfr .hd-num{ font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--hd-panel-fg); font-variant-numeric:tabular-nums; min-width:88px }
.bfr .hd-chip{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:3px; white-space:nowrap }
.bfr .hd-chip svg{ width:8px; height:8px; flex-shrink:0 }
.bfr .hd-graph{ position:relative; height:46px }
.bfr .hd-graph svg{ width:100%; height:100%; display:block; overflow:visible }
/* faint horizontal gridlines (token stroke, non-scaling so they stay hairline) */
.bfr .hd-graph .hd-grid{ stroke:var(--hd-gridline); stroke-width:1; vector-effect:non-scaling-stroke }
.bfr .hd-graph .line{ fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; will-change:stroke-dashoffset }
/* soft gradient area fill follows the curve, fades to transparent at the bottom
   (gradient defined per-row in the SVG using currentColor => token-driven). */
.bfr .hd-graph .area{ stroke:none }
.bfr .hd-graph .a-top{ stop-opacity:var(--chart-area-opacity) }
/* static node dot at each month point */
.bfr .hd-graph .hd-pt{ fill:currentColor; r:2.4; opacity:.9 }
/* animated LEADING dot that traces the line (JS-driven; hidden until it runs) */
.bfr .hd-graph .dot{ r:3.6; fill:currentColor; filter:drop-shadow(0 0 5px currentColor); opacity:0; will-change:transform }
.bfr .hd-cash{ color:var(--chart-cash) }
.bfr .hd-cash .hd-chip{ color:var(--chip-good-fg); background:var(--chip-good-bg); border:1px solid var(--chip-good-border) }
.bfr .hd-turnover{ color:var(--chart-turnover) }
.bfr .hd-turnover .hd-chip{ color:var(--chip-good-fg); background:var(--chip-good-bg); border:1px solid var(--chip-good-border) }
.bfr .hd-clients{ color:var(--chart-clients) }
.bfr .hd-clients .hd-chip{ color:var(--chip-info-fg); background:var(--chip-info-bg); border:1px solid var(--chip-info-border) }
/* Axis ticks positioned to sit DIRECTLY under the plotted month points. The plot
   maps month m -> x = (m-1)/11 (0..1). Ticks carry that same fraction as inline
   left:%, so M1/M3/M6/M9/M12 align exactly with the series points above. The
   left offset (166px) equals the meta column (150px) + row gap (16px). */
.bfr .hd-axis{ position:relative; height:12px; margin:9px 0 2px 166px; font-size:9px; font-weight:600; color:var(--hd-panel-fg-muted); letter-spacing:.06em; z-index:1 }
/* every tick CENTERED on its month point; edge labels stay inside the panel's
   20px padding gutter so nothing clips, while their centres align with the points. */
.bfr .hd-axis span{ position:absolute; top:0; white-space:nowrap; transform:translateX(-50%) }

/* The line-draw, leading-dot trace and count-up are all driven together in JS
   (index.html) so the numbers LAND exactly as each line completes. No CSS
   keyframes here — the base render shows the full static line/area/points, and
   JS enhances with the reveal-triggered draw. */

/* ----------------------- TRUST / STATS BAR ------------------------------- */
.bfr .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center }
.bfr .stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,2.75rem); background:var(--grad-brand-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.bfr .stat .lbl{ margin-top:6px; color:var(--text-muted); font-size:var(--fs-sm) }

.bfr .trust-logos{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; align-items:center; margin-top:var(--space-6) }
.bfr .trust-logos .chip{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:600;
  padding:8px 14px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface);
}
.bfr .trust-logos .chip svg{ width:16px; height:16px; color:var(--accent) }

/* ----------------------- VALUE / WHY CARDS ------------------------------- */
.bfr .cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .cards-grid--3{ grid-template-columns:repeat(3,1fr) }
.bfr .vcard{
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .vcard{ position:relative }
.bfr .vcard:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .vcard .v-icon{ width:46px; height:46px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:var(--space-4) }
.bfr .vcard .v-icon svg{ width:22px; height:22px }
.bfr .vcard h3{ font-size:var(--fs-lg); font-weight:700; margin-bottom:6px }
.bfr .vcard p{ color:var(--text-muted); font-size:var(--fs-sm) }

/* ---- Card TREATMENT variants (Task 3: adjacent bands must not look identical) --
   OUTLINE = airy, transparent, clear border (Why band).
   FEATURE = elevated solid surface + resting shadow + filled gradient icon tile
             (Solutions band). The two treatments sit on alternating tones so no
             two neighbouring sections read the same. */
.bfr .cards-grid--outline .vcard{ background:transparent; border-color:var(--border-strong) }

.bfr .cards-grid--feature .vcard{
  background:var(--card-feature-bg); border-color:var(--card-feature-border);
  box-shadow:var(--card-feature-shadow); padding:var(--space-8); overflow:hidden;
}
.bfr .cards-grid--feature .vcard::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--card-feature-sheen); pointer-events:none;
}
.bfr .cards-grid--feature .vcard > *{ position:relative; z-index:1 }
.bfr .cards-grid--feature .v-icon{
  width:52px; height:52px; background:var(--icon-tile-grad); color:var(--icon-tile-grad-fg);
  box-shadow:0 8px 20px rgb(var(--ch-emerald) / .28);
}
.bfr .cards-grid--feature .v-icon svg{ width:24px; height:24px }
.bfr .cards-grid--feature .vcard h3{ font-size:var(--fs-xl) }
.bfr .cards-grid--feature .vcard p{ font-size:var(--fs-base) }

/* ----------------------- SEVEN FUNDING PATHS ----------------------------- */
.bfr .funding-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .funding-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .funding-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .funding-card .f-tag{
  display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:var(--space-2);
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); letter-spacing:0;
}
.bfr .funding-card .f-icon{ width:34px; height:34px; margin-bottom:var(--space-2); display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent) }
.bfr .funding-card .f-icon svg{ width:20px; height:20px }
.bfr .funding-card h3{ font-size:var(--fs-lg); font-weight:700; display:flex; align-items:center; gap:8px }
.bfr .funding-card p{ color:var(--text-muted); font-size:var(--fs-sm) }
.bfr .funding-card .f-fit{
  margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--border);
  color:var(--text-subtle); font-size:var(--fs-xs); font-weight:600;
}
/* the "compare all seven" card reads as the primary next action */
.bfr .funding-card--compare{ background:var(--grad-cta); border-color:var(--accent-border) }
.bfr .funding-card--compare:hover{ background:var(--grad-cta) }
.bfr .funding-card--compare h3{ color:var(--accent) }

/* ----------------------------- FREE TOOLS -------------------------------- */
.bfr .tools-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5) }
.bfr .tool-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .tool-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .tool-card .tool-icon{ width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:var(--space-2) }
.bfr .tool-card .tool-icon svg{ width:22px; height:22px }
.bfr .tool-card .tool-meta{ display:flex; flex-wrap:wrap; gap:6px }
.bfr .tool-card .tool-tag{
  font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-subtle); background:var(--surface-2); border:1px solid var(--border);
  padding:3px 9px; border-radius:var(--radius-pill);
}
.bfr .tool-card h3{ font-size:var(--fs-lg); font-weight:700; margin-top:2px }
.bfr .tool-card p{ color:var(--text-muted); font-size:var(--fs-sm) }
.bfr .tools-cta{ text-align:center; margin-top:clamp(28px,4vw,40px) }

/* ----------------------- HOW IT WORKS (steps) ---------------------------- */
/* Reads as a numbered PATH: a connecting line threads the three numbered nodes.
   The number rings punch through the line with a matching-bg ring so the line
   appears to connect node-to-node. */
.bfr .steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8) var(--space-6); counter-reset:step }
.bfr .steps::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:22px; left:16.66%; right:16.66%; height:2px; background:var(--step-line);
}
.bfr .step{ position:relative; z-index:1; text-align:center; padding:0 var(--space-4) }
.bfr .step .s-num{
  width:46px; height:46px; border-radius:var(--radius-pill); display:grid; place-items:center;
  background:var(--primary); color:var(--primary-fg); font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg);
  margin:0 auto var(--space-5); box-shadow:0 0 0 8px var(--step-num-ring), var(--shadow-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bfr .step:hover .s-num{ transform:translateY(-3px) scale(1.05); box-shadow:0 0 0 8px var(--step-num-ring), 0 10px 24px rgb(var(--ch-emerald) / .3) }
.bfr .step h3{ font-size:var(--fs-lg); font-weight:700; margin-bottom:6px }
.bfr .step p{ color:var(--text-muted); font-size:var(--fs-sm); max-width:34ch; margin-inline:auto }

/* ------------------------------ FAQ -------------------------------------- */
.bfr .faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-3) }
.bfr .faq details{
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius);
  overflow:hidden; transition:border-color var(--dur) var(--ease);
}
.bfr .faq details[open]{ border-color:var(--accent-border) }
.bfr .faq summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base); color:var(--text);
}
.bfr .faq summary::-webkit-details-marker{ display:none }
.bfr .faq summary .chev{ flex-shrink:0; width:12px; height:12px; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(45deg); transition:transform var(--dur-fast) var(--ease) }
.bfr .faq details[open] summary .chev{ transform:rotate(-135deg) }
.bfr .faq .faq-body{ padding:0 22px 20px; color:var(--text-muted); font-size:var(--fs-sm) }

/* ------------------------------ GOOGLE REVIEWS --------------------------- */
/* Aggregate header (big 5.0 + gold stars + "from 47 Google reviews") on the left,
   a "See all on Google" pill on the right. Sits inside the shared 1360 .container
   like every other band, so its edges line up with the sibling sections. */
.bfr .reviews-agg{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 28px; margin-bottom:clamp(32px,5vw,44px);
}
.bfr .rev-agg-l{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.bfr .rev-score{
  font-family:var(--font-display); font-size:clamp(2.6rem,5vw,3.4rem); line-height:1;
  font-weight:800; letter-spacing:-.02em; color:var(--rev-score-fg);
}
.bfr .rev-stars{ display:inline-flex; gap:3px }
.bfr .rev-stars .rev-star{ width:24px; height:24px }
.bfr .rev-count{ color:var(--text-muted); font-size:var(--fs-base) }
.bfr .rev-count strong{ color:var(--text); font-weight:700 }
.bfr .rev-seeall{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-heading); font-size:var(--fs-sm); font-weight:700;
  color:var(--rev-seeall-fg); background:var(--rev-seeall-bg);
  border:1px solid var(--rev-seeall-border); padding:11px 18px; border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bfr .rev-seeall:hover{ background:var(--rev-seeall-bg-hover); transform:translateY(-1px) }
.bfr .rev-seeall .rev-g{ width:18px; height:18px; flex:0 0 auto }
.bfr .rev-seeall .arrow{ transition:transform var(--dur-fast) var(--ease) }
.bfr .rev-seeall:hover .arrow{ transform:translateX(3px) }

.bfr .rev-star-fill{ fill:var(--star-fill) }
.bfr .rev-star-empty{ fill:var(--star-empty) }

.bfr .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5) }
.bfr .review-card{
  display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6); background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.bfr .review-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--card-glow-hover); background:var(--card-bg-hover) }
.bfr .rev-top{ display:flex; align-items:center; gap:13px }
.bfr .rev-avatar{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:var(--rev-avatar-fg);
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base);
  background:var(--rev-avatar-1);
}
.bfr .review-card:nth-child(3n+2) .rev-avatar{ background:var(--rev-avatar-2) }
.bfr .review-card:nth-child(3n+3) .rev-avatar{ background:var(--rev-avatar-3) }
.bfr .rev-meta{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.bfr .rev-name{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-base); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bfr .rev-sub{ display:flex; align-items:center; gap:8px }
.bfr .rev-cardstars{ display:inline-flex; gap:2px }
.bfr .rev-cardstars .rev-star{ width:14px; height:14px }
.bfr .rev-time{ color:var(--text-subtle); font-size:var(--fs-xs) }
.bfr .rev-body{ color:var(--text-muted); font-size:var(--fs-sm); line-height:1.62 }
.bfr .rev-gmark{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; color:var(--text-subtle); font-size:var(--fs-xs); font-weight:600 }
.bfr .rev-gmark .rev-g{ width:15px; height:15px; flex:0 0 auto }

/* ------------------------------ CTA BAND --------------------------------- */
.bfr .cta-band{ position:relative; text-align:center; border-radius:var(--radius-xl); padding:clamp(48px,7vw,72px) var(--gutter); background:var(--grad-cta); border:1px solid var(--accent-border); overflow:hidden }
.bfr .cta-band h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.75rem,4vw,2.5rem); letter-spacing:-.02em }
.bfr .cta-band p{ margin:var(--space-4) auto 0; max-width:560px; color:var(--text-muted); font-size:var(--fs-lg) }
.bfr .cta-band .hero-cta{ margin-top:var(--space-8) }

/* ------------------------------ FOOTER ----------------------------------- */
.bfr .site-footer{ border-top:1px solid var(--border); background:var(--bg-2); padding:clamp(48px,7vw,72px) 0 32px }
.bfr .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8) }
.bfr .footer-brand img{ height:30px; width:auto; margin-bottom:var(--space-4) }
.bfr .footer-brand p{ color:var(--text-muted); font-size:var(--fs-sm); max-width:300px }
.bfr .footer-social{ display:flex; gap:10px; margin-top:var(--space-5) }
.bfr .footer-social a{ width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.bfr .footer-social a:hover{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); transform:translateY(-1px) }
.bfr .footer-social svg{ width:18px; height:18px }
.bfr .footer-col h4{ font-family:var(--font-heading); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-subtle); margin-bottom:var(--space-4) }
.bfr .footer-col a{ display:block; padding:5px 0; color:var(--text-muted); font-size:var(--fs-sm); transition:color var(--dur-fast) var(--ease) }
.bfr .footer-col a:hover{ color:var(--accent) }
.bfr .footer-trust{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid var(--border); color:var(--text-muted); font-size:var(--fs-xs) }
.bfr .footer-trust .ti{ display:inline-flex; align-items:center; gap:7px }
.bfr .footer-trust .ti svg{ width:15px; height:15px; color:var(--accent) }
.bfr .footer-trust .ti a{ color:inherit }
.bfr .footer-bottom{ max-width:var(--container); margin:var(--space-6) auto 0; padding:var(--space-5) var(--gutter) 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--text-subtle); font-size:var(--fs-xs) }

/* ------------------------- SCROLL REVEAL --------------------------------- */
/* Progressive enhancement: only HIDE for reveal when JS is active (html.js).
   With JS off, content stays fully visible — never a blank page. */
:root.js .bfr .reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease) }
:root.js .bfr .reveal.in{ opacity:1; transform:none }

/* STAGGERED reveal: the container stays visible and its children rise in
   SEQUENCE with incremental easing delays (still IO-triggered via .reveal). */
:root.js .bfr .reveal--stagger{ opacity:1; transform:none }
:root.js .bfr .reveal--stagger > *{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease) }
:root.js .bfr .reveal--stagger.in > *{ opacity:1; transform:none }
:root.js .bfr .reveal--stagger.in > *:nth-child(1){ transition-delay:.04s }
:root.js .bfr .reveal--stagger.in > *:nth-child(2){ transition-delay:.12s }
:root.js .bfr .reveal--stagger.in > *:nth-child(3){ transition-delay:.20s }
:root.js .bfr .reveal--stagger.in > *:nth-child(4){ transition-delay:.28s }
:root.js .bfr .reveal--stagger.in > *:nth-child(5){ transition-delay:.36s }
:root.js .bfr .reveal--stagger.in > *:nth-child(6){ transition-delay:.44s }
:root.js .bfr .reveal--stagger.in > *:nth-child(7){ transition-delay:.52s }
/* The stagger end-state pins children to transform:none (0,4,0) which would
   otherwise out-specify the card hover LIFT (.vcard:hover = 0,3,0) and kill it —
   the shadow/border still change but the card wouldn't rise. Restore the lift for
   interactive cards that live inside a staggered grid, with higher specificity. */
:root.js .bfr .reveal--stagger.in > .vcard:hover,
:root.js .bfr .reveal--stagger.in > a.pillar:hover{ transform:translateY(-6px) }

/* ------------------- REDUCED MOTION — freeze to FINAL state --------------- */
/* base.css already kills all animation/transition under reduce; here we pin
   every animated element to its END state so nothing moves AND nothing is left
   mid-flight: reveals shown, chart line fully drawn, dots at the axis end. */
@media (prefers-reduced-motion:reduce){
  :root.js .bfr .reveal{ opacity:1; transform:none }
  :root.js .bfr .reveal--stagger > *{ opacity:1!important; transform:none!important; transition:none!important }
  /* chart frozen to FINAL state: line fully drawn, no dash offset, node points
     shown; the JS also pins the leading dot to the last point under reduce. */
  .bfr .hd-graph .line{ stroke-dasharray:none!important; stroke-dashoffset:0!important }
  .bfr .hero .grad-text,.bfr .grad-text{ background-position:0% 50% }
}

/* ------------------------- RESPONSIVE ------------------------------------ */
@media (max-width:1279.98px){
  .bfr .funding-grid,.bfr .tools-grid{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:1023.98px){
  .bfr .cards-grid{ grid-template-columns:repeat(2,1fr) }
  .bfr .funding-grid,.bfr .tools-grid,.bfr .reviews-grid{ grid-template-columns:repeat(2,1fr) }
  /* hero collapses to one centered column; chart stacks below the copy */
  .bfr .hero-inner{ grid-template-columns:1fr; gap:36px; text-align:center }
  .bfr .hero-copy{ text-align:center }
  .bfr .hero .badge{ margin-inline:auto }
  .bfr .hero .lede{ margin-inline:auto }
  .bfr .hero-cta{ justify-content:center }
  .bfr .hero-visual{ max-width:560px; margin-inline:auto }
}
@media (max-width:767.98px){
  .bfr .pillars{ grid-template-columns:1fr }
  .bfr .stats{ grid-template-columns:repeat(2,1fr); gap:var(--space-8) }
  .bfr .cards-grid,.bfr .cards-grid--3,.bfr .steps{ grid-template-columns:1fr }
  .bfr .funding-grid,.bfr .tools-grid,.bfr .reviews-grid{ grid-template-columns:1fr }
  .bfr .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-6) }
  .bfr .footer-brand{ grid-column:1 / -1 }
  .bfr .footer-bottom{ justify-content:center; text-align:center }
  /* steps become a VERTICAL stepper: number on the left, connector down the left */
  .bfr .steps{ gap:var(--space-6) }
  .bfr .steps::before{ top:23px; bottom:23px; left:23px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, transparent, var(--accent-border) 8%, var(--accent-border) 92%, transparent) }
  .bfr .step{ text-align:left; padding:0 0 0 66px; min-height:46px }
  .bfr .step .s-num{ position:absolute; left:0; top:0; margin:0 }
  .bfr .step h3{ margin-top:4px }
  .bfr .step p{ margin-inline:0; max-width:none }
}
@media (max-width:600px){
  /* long CTA labels can't fit as nowrap buttons at phone widths — stack them
     full-width and let the text wrap, so nothing forces the hero past the gutter */
  .bfr .hero-cta{ flex-direction:column; align-items:stretch }
  .bfr .hero-cta .btn{ width:100%; white-space:normal }
  .bfr .hd{ padding:16px 16px 12px }
  .bfr .hd-row{ grid-template-columns:118px 1fr; gap:10px; padding:9px 0 }
  .bfr .hd-num{ font-size:20px; min-width:72px }
  .bfr .hd-graph{ height:40px }
  .bfr .hd-axis{ margin-left:128px; font-size:8px }
  .bfr .hd-title{ font-size:11px }
}
@media (max-width:479.98px){
  .bfr .stats{ grid-template-columns:1fr }
  .bfr .footer-grid{ grid-template-columns:1fr }
}