/* ============================================================
   BOLDFLO DESIGN SYSTEM — 03 · BRANDING LIBRARY
   Primitives spelled entirely in tokens. Every one works on
   both surfaces: put [data-surface="paper"] on an ancestor and
   they flip. No component asks which ground it is standing on.
   ============================================================ */

/* Buttons carry a UA background and border. Every control in this system is
   styled from scratch, so clear them once here rather than remembering to do
   it in each component — forgetting once renders a light grey box on black. */
:where(.bf-btn, .bf-icon-btn, .bf-chrome, .bf-faq__q, .bf-faq__cat, .bf-stack__seg){
  background:transparent;border:0;color:inherit;font:inherit;
}

.bf-section{
  position:relative;
  padding-block:var(--bf-section);
  background:var(--bf-ground);
  color:var(--bf-ink);
  overflow:clip;
}
.bf-wrap{
  position:relative;z-index:2;
  width:min(var(--bf-measure), 100% - var(--bf-gutter) * 2);
  margin-inline:auto;
}

/* ---------- EYEBROW ---------- */
.bf-eyebrow{
  display:inline-flex;align-items:center;gap:var(--bf-s2);
  padding:5px 11px;border-radius:var(--bf-r-pill);
  background:var(--bf-glass);border:1px solid var(--bf-glass-line);
  font-family:var(--bf-sans);font-size:var(--bf-t-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bf-ink-soft);
}
.bf-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--bf-purple);color:var(--bf-purple);flex:0 0 auto;
}

/* ---------- DISPLAY HEADING ---------- */
.bf-display{
  font-family:var(--bf-display);font-weight:700;
  font-size:var(--bf-t-xl);line-height:var(--bf-display-lh);
  letter-spacing:var(--bf-display-track);
  text-transform:uppercase;color:var(--bf-purple);
  margin:var(--bf-s4) 0 0;text-wrap:balance;
}
.bf-display--lg{font-size:var(--bf-t-hero)}
.bf-display--sm{font-size:var(--bf-t-lg)}
.bf-display--ink{color:var(--bf-ink)}

.bf-lede{
  margin:var(--bf-s4) 0 0;max-width:62ch;
  font-family:var(--bf-sans);font-size:var(--bf-t-body);
  line-height:1.65;color:var(--bf-ink-dim);
}

/* ---------- GHOST TYPE ----------
   Enormous display type at barely-there contrast, cropped by the
   section edge. Costs nothing and carries the art direction. */
.bf-ghost-type{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--bf-display);font-weight:700;
  font-size:clamp(5rem, 14vw, 13rem);line-height:.78;
  letter-spacing:var(--bf-display-track);text-transform:uppercase;
  color:var(--bf-raised);
}
.bf-ghost-type[data-corner="tl"]{top:-.14em;left:-.06em}
.bf-ghost-type[data-corner="tr"]{top:-.14em;right:-.06em;text-align:right}
.bf-ghost-type[data-corner="bl"]{bottom:-.18em;left:-.06em}
.bf-ghost-type[data-corner="br"]{bottom:-.18em;right:-.06em;text-align:right}
[data-surface="paper"] .bf-ghost-type{color:rgba(127,82,239,.06)}

/* ---------- GLASS CARD ---------- */
.bf-card{
  position:relative;
  padding:var(--bf-s5) var(--bf-s5) var(--bf-s6);
  border-radius:var(--bf-r-card);
  background:var(--bf-glass);
  border:1px solid var(--bf-glass-line);
  backdrop-filter:blur(var(--bf-glass-blur)) saturate(120%);
  color:var(--bf-ink);
}
.bf-card__label{
  font-family:var(--bf-mono);font-size:var(--bf-t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--bf-purple-lift);
}
.bf-card__title{
  margin:var(--bf-s3) 0 0;font-family:var(--bf-sans);
  font-size:var(--bf-t-md);font-weight:600;line-height:1.25;
  letter-spacing:-.02em;color:var(--bf-ink);
}
.bf-card__body{
  margin:var(--bf-s3) 0 0;font-size:var(--bf-t-sm);
  line-height:1.7;color:var(--bf-ink-dim);
}
.bf-card__figure{
  margin:var(--bf-s4) 0 0;font-family:var(--bf-mono);
  font-size:var(--bf-t-xs);color:var(--bf-alarm);
  font-variant-numeric:tabular-nums;
}
.bf-card__figure--settled{color:var(--bf-settle)}

/* ---------- NEBULA + GLOW ---------- */
.bf-nebula-field{
  position:absolute;inset:-18%;z-index:0;pointer-events:none;
  opacity:.55;filter:blur(18px);
  -webkit-mask-image:radial-gradient(62% 54% at 50% 50%, #000 28%, transparent 76%);
          mask-image:radial-gradient(62% 54% at 50% 50%, #000 28%, transparent 76%);
}
.bf-nebula-field svg{width:100%;height:100%;display:block}

.bf-core-glow{
  position:absolute;z-index:0;pointer-events:none;
  width:min(620px,70%);aspect-ratio:1.2/1;
  left:50%;top:50%;translate:-50% -50%;
  border-radius:50%;filter:blur(34px);
  background:radial-gradient(circle, var(--bf-purple-haze) 0%, transparent 68%);
}

/* ---------- BUTTONS ---------- */
.bf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bf-s2);
  min-height:44px;padding:0 var(--bf-s5);border:0;cursor:pointer;
  border-radius:var(--bf-r-pill);font-family:var(--bf-sans);
  font-size:var(--bf-t-sm);font-weight:600;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
}
.bf-btn--primary{
  background:var(--bf-purple);color:#fff;
  box-shadow:0 10px 30px -12px var(--bf-purple);
}
.bf-btn--primary:hover{background:var(--bf-purple-deep)}
.bf-btn--ghost{
  background:transparent;color:var(--bf-ink);
  border:1px solid var(--bf-line);
}
.bf-btn--ghost:hover{border-color:var(--bf-purple)}

.bf-icon-btn{
  width:58px;height:58px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--bf-void);color:var(--bf-purple);
}
.bf-icon-btn:hover{background:var(--bf-raised)}
[data-surface="paper"] .bf-icon-btn{background:var(--bf-paper-line);color:var(--bf-purple)}

.bf-icon{display:block;flex:0 0 auto;width:1em;height:1em}

/* ---------- FOCUS ---------- */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--bf-purple-lift);outline-offset:3px;border-radius:var(--bf-r-pill);
}


/* Anything that must sit above the ghost type needs its own stacking
   context — a static element paints below a positioned one, even at z-index 0. */
.bf-above{position:relative;z-index:2}

/* ============================================================
   PROMPT 01 — NOVAPAY BASELINE
   Patterns in the reference that the first pass did not carry.
   Each is translated for desktop rather than transplanted: the
   original positions things with fixed pixel offsets inside a
   300px phone, which does not survive a 1280px section.
   ============================================================ */

/* ---------- STACK — the countdown bar, generalised ----------
   The reference overlaps four pills at fixed left offsets with
   rising opacity and z-index. Rebuilt as a flex row with
   negative margins so it scales to any width or count. Use it
   for any ordered sequence that reads as one object: a
   countdown, a day-by-day timeline, a progress chain. */
.bf-stack{display:flex;align-items:stretch;isolation:isolate}
.bf-stack__seg{
  --seg:0;
  display:inline-flex;align-items:center;gap:var(--bf-s2);
  /* Right padding has to clear the overlap zone, or the next pill
     crops this one's label — "days" renders as "day". */
  padding:0 calc(var(--bf-s4) + var(--bf-s5)) 0 calc(var(--bf-s4) + var(--bf-s5));
  min-height:40px;border-radius:var(--bf-r-pill);
  margin-left:calc(var(--bf-s5) * -1);
  background:color-mix(in oklab, var(--bf-purple) calc(8% + var(--seg) * 3%), var(--bf-void));
  z-index:calc(var(--seg) + 1);
  font-family:var(--bf-sans);font-size:var(--bf-t-xs);font-weight:600;
  color:var(--bf-ink);white-space:nowrap;
}
.bf-stack__seg:first-child{margin-left:0;padding-left:var(--bf-s4)}
.bf-stack__seg:last-child{padding-right:var(--bf-s4)}
.bf-stack__seg b{font-variant-numeric:tabular-nums}
.bf-stack__seg span{font-weight:400;color:var(--bf-ink-soft)}

/* ---------- DOME — planetary horizon ----------
   A circle far larger than its container, so only its upper arc
   shows. Gives a section a curved floor without an image. */
.bf-dome{
  position:absolute;z-index:0;pointer-events:none;
  left:50%;translate:-50% 0;
  width:min(240%, 2200px);aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%,
    var(--bf-ground-alt) 0%, #080613 40%, #090715 62%,
    #0b0918 82%, #0c091a 93%, var(--bf-raised) 100%);
}

/* ---------- GLOBE — the signature asset ----------
   A dot-matrix Earth in violet with a rim-glow atmosphere, rotating
   slowly right-to-left, with two white arrow bands orbiting THROUGH
   the sphere — passing behind it and back in front. The arcs are the
   point: they are value crossing borders, not decoration.

   The motion is BAKED INTO THE ASSET. Do not try to rotate it in CSS:
   a 2D rotate on a sphere image reads as a spinning sticker, and no
   CSS transform can send an arc behind a sphere and back out.

   Stage geometry, from the reference: the media is deliberately WIDER
   than its container and anchored to the bottom, pushed partly below
   it, so the viewer sees the planet's upper curve rising into the
   section rather than a complete ball sitting in a box. */
.bf-globe{
  /* Geometry, derived from the reference rather than guessed:
     the sphere is 405px wide inside a 540px-tall stage and sits 100px
     below its floor. So the sphere is ~0.75 of the STAGE HEIGHT, not a
     fraction of the container width — sizing it off width is what put a
     1671px sphere in a 300px stage and left only the rim arc visible.
     --globe-size : sphere height as a share of stage height
     --globe-drop : how far the sphere's base sits below the stage floor */
  --globe-size:75%;
  --globe-drop:18.5%;
  position:absolute;left:0;right:0;bottom:0;
  height:min(540px,64vh);z-index:1;overflow:hidden;pointer-events:none;
}
.bf-globe__media{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--globe-drop) * -1);
  height:var(--globe-size);width:auto;max-width:none;display:block;
  /* The asset is additive light on black. Screen blending drops the black
     to nothing, so the video's bounding box stops showing as a rectangle
     and the rim glow bleeds into the section ground instead of sitting on
     a patch of a slightly different black. Dark surfaces only. */
  mix-blend-mode:screen;
}
/* On a narrow stage the sphere grows wider than the frame and is cropped
   left and right — the same over-wide read the reference gets from 135%. */
.bf-globe::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(to bottom,transparent,var(--bf-ground));
  z-index:2;pointer-events:none;
}
.bf-globe--contained{position:relative;bottom:0;height:auto;overflow:visible}
.bf-globe--contained::after{display:none}
.bf-globe--contained .bf-globe__media{position:relative;left:auto;translate:none;bottom:auto;height:auto;width:100%}

/* ---------- ORB LETTER — the globe inside a glyph ----------
   The letter stays in the flow for metrics and screen readers but is
   painted transparent; the globe sits centred on top, oversized so its
   rings break the letterform. */
.bf-orb-letter{position:relative;display:inline-block;color:transparent}
.bf-orb{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:1.42em;height:1.42em;object-fit:contain;
  z-index:2;pointer-events:none;
}

/* ---------- NOTCH — icon badge straddling a card edge ---------- */
.bf-notch{
  position:absolute;top:0;left:50%;
  translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bf-void);color:var(--bf-purple);z-index:6;
}
.bf-notch--left{left:var(--bf-s6);translate:0 -50%}

/* ---------- GLOW, corner-anchored ---------- */
.bf-core-glow--bl{left:0;top:auto;bottom:0;translate:-30% 30%}
.bf-core-glow--br{left:auto;right:0;top:auto;bottom:0;translate:30% 30%}
.bf-core-glow--tr{left:auto;right:0;top:0;bottom:auto;translate:30% -30%}

/* ---------- BUTTON, purple outline ---------- */
.bf-btn--outline{
  background:transparent;color:var(--bf-purple-lift);
  border:1.5px solid color-mix(in oklab, var(--bf-purple) 46%, transparent);
}
.bf-btn--outline:hover{border-color:var(--bf-purple);color:var(--bf-ink)}

/* ============================================================
   PROMPT 02 — ANCHORED STAGE
   A fixed composition scaled as one object, over a media layer whose
   SUBJECT is pinned a set distance below the content. Square corners
   throughout; the rail is the only rounded thing.
   ============================================================ */

/* ---------- STAGE — one composition, scaled whole ----------
   Above the breakpoint nothing reflows: the 1280x800 layout is scaled
   by --bf-u as a single object, so every gap stays in proportion.
   Below it the stage becomes an ordinary centred column. */
.bf-stage{
  position:absolute;left:50%;top:0;z-index:2;
  width:calc(var(--bf-stage-w) * 1px);
  height:calc(var(--bf-stage-h) * 1px);
  transform-origin:50% 0;
  transform:translateX(-50%) scale(var(--bf-u));
}
.bf-stage__item{position:absolute;margin:0}

/* ---------- SUBJECT LAYER ----------
   Sized and offset by the anchor engine, which writes --s/--x0/--y0.
   Without JS it falls back to a plain cover fill, which is correct if
   unremarkable. */
.bf-subject{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;
  overflow:hidden;transform-origin:0 0;will-change:transform;
}
.js .bf-subject{
  width:calc(var(--sw, 1586) * 1px * var(--s, 1));
  height:calc(var(--sh, 992) * 1px * var(--s, 1));
  transform:translate3d(var(--x0,0px), var(--y0,0px), 0);
}
.bf-subject > :is(video,img){
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 100%;display:block;user-select:none;
}
/* Feathers the media's top edge into the section so there is no seam
   where it starts. */
.bf-subject::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    var(--bf-void) 0%,
    color-mix(in srgb, var(--bf-void) 55%, transparent) 6%,
    color-mix(in srgb, var(--bf-void) 15%, transparent) 14%,
    transparent 22%, transparent 100%);
}

/* ---------- CHROME — glass control, square ---------- */
.bf-chrome{
  display:inline-flex;align-items:center;white-space:nowrap;border:0;cursor:pointer;
  background:var(--bf-glass);
  backdrop-filter:blur(var(--bf-glass-blur));
  color:var(--bf-ink);font-family:var(--bf-mono);
  font-size:12px;font-weight:700;letter-spacing:.2px;line-height:1;
  transition:background-color .2s var(--bf-e-soft);
}
@media (hover:hover){ .bf-chrome:hover{background:rgba(66,66,96,.66)} }
/* A 35px control is under the 44px touch minimum, so the hit area is
   grown without changing the visual box. */
.bf-chrome::after{content:"";position:absolute;inset:-6px -2px}
@media (max-width:510.98px){ .bf-chrome::after{inset:-8px -4px} }

.bf-dots{display:grid;grid-template-columns:repeat(2,2.4px);gap:3.6px;flex:0 0 auto}
.bf-dots i{width:2.4px;height:2.4px;background:currentColor;display:block}

/* ============================================================
   PROMPT 03 — 3D CARD CAROUSEL
   Ported from React to vanilla, because the library has no build
   step. The maths is unchanged: smoothstep between three ranges,
   a magnetic dwell at centre, perspective-aware edge alignment.
   ============================================================ */
.bf-cards{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;user-select:none;background:#000;
  perspective:1350px;
}
.bf-cards__viewport{position:absolute;transform-style:preserve-3d}

.bf-card3d{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform;
}

/* Volumetric thickness: five parallel slices 0.73px apart. Real depth,
   not a drop shadow — the card has an edge you can see when it rotates. */
.bf-card3d__slice{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  pointer-events:none;background:#808080;border:1px solid #808080;
}
.bf-card3d__face{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  pointer-events:none;background:#0f0f0f;
  border:1px solid rgba(255,255,255,.15);
  backface-visibility:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15);
}
.bf-card3d__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:16px;display:block;
}

/* ---------- gooey gradient field ----------
   Ported from the reference as plain CSS. Changes for this site: the
   palette is the brand's purples and indigo rather than the original's
   magenta/cyan/red/yellow; the blobs blend with `screen` over the
   section's own dark ground instead of `hard-light` over a bright base,
   which would have blown out under body copy; the field sits at low
   opacity behind a scrim so the two text columns stay the brightest thing
   in the section; and the reference's cursor-following blob is dropped —
   this is ambient light, not an interaction. */
.bf-goo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint}
.bf-goo__defs{position:absolute;width:0;height:0}
.bf-goo__field{position:absolute;inset:0;z-index:0;filter:url(#bfGoo) blur(42px);opacity:.58}
.bf-goo i{position:absolute;display:block;mix-blend-mode:screen;
  width:70%;height:70%;top:15%;left:15%;transform-origin:center center}
.bf-goo__b1{background:radial-gradient(circle at center,
  rgb(127 82 239 / .75) 0,rgb(127 82 239 / 0) 50%) no-repeat;
  animation:bf-gooV 32s ease-in-out infinite}
.bf-goo__b2{background:radial-gradient(circle at center,
  rgb(164 131 245 / .62) 0,rgb(164 131 245 / 0) 50%) no-repeat;
  transform-origin:calc(50% - 360px);animation:bf-gooSpin 24s linear reverse infinite}
.bf-goo__b3{background:radial-gradient(circle at center,
  rgb(56 92 232 / .58) 0,rgb(56 92 232 / 0) 50%) no-repeat;
  top:calc(15% + 160px);left:calc(15% - 360px);
  transform-origin:calc(50% + 380px);animation:bf-gooSpin 44s linear infinite}
.bf-goo__b4{background:radial-gradient(circle at center,
  rgb(67 56 202 / .55) 0,rgb(67 56 202 / 0) 50%) no-repeat;
  transform-origin:calc(50% - 200px);animation:bf-gooH 38s ease-in-out infinite;opacity:.8}
.bf-goo__b5{background:radial-gradient(circle at center,
  rgb(99 72 220 / .45) 0,rgb(99 72 220 / 0) 50%) no-repeat;
  width:120%;height:120%;top:-10%;left:-10%;
  transform-origin:calc(50% - 640px) calc(50% + 180px);
  animation:bf-gooSpin 28s ease-in-out infinite}
@keyframes bf-gooSpin{to{transform:rotate(1turn)}}
@keyframes bf-gooV{0%,100%{transform:translateY(-38%)}50%{transform:translateY(38%)}}
@keyframes bf-gooH{0%,100%{transform:translateX(-42%) translateY(-8%)}
                   50%{transform:translateX(42%) translateY(8%)}}
/* The copy has to stay the brightest thing in the section, so a scrim sits
   over the field. */
.bf-goo::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(130% 95% at 30% 42%,
    color-mix(in srgb,var(--bf-void) 78%,transparent) 0%,
    color-mix(in srgb,var(--bf-void) 48%,transparent) 50%,
    transparent 80%)}
/* the visible half of the pointer interaction */
.bf-goo.is-live @media (prefers-reduced-motion:reduce){ .bf-goo i{animation:none} }

/* ---------- generated card faces ----------
   Partners without footage of their own get a CSS motion instead of a
   repeated video: same register as the loops — slow, luminous, dark — but
   a different movement on each card so no two faces read as duplicates. */
.bf-card3d__anim{background:#07070c}
.bf-card3d__anim::before,.bf-card3d__anim::after{content:"";position:absolute;inset:-25%}

/* aurora — a wide band of light leaning across the face */
.bf-card3d__anim--aurora{background:linear-gradient(160deg,#04060f,#0a1030 55%,#05070f)}
.bf-card3d__anim--aurora::before{
  background:conic-gradient(from 200deg at 50% 60%,
    transparent 0deg,#2f6bff55 60deg,#8b5cf688 120deg,#22d3ee55 180deg,transparent 260deg);
  filter:blur(18px);animation:bf-cardAurora 14s linear infinite}
.bf-card3d__anim--aurora::after{
  background:radial-gradient(60% 45% at 30% 75%,#60a5fa44,transparent 70%);
  animation:bf-cardDrift 11s ease-in-out infinite alternate}
@keyframes bf-cardAurora{to{transform:rotate(1turn)}}
@keyframes bf-cardDrift{from{transform:translate3d(-6%,3%,0)}to{transform:translate3d(8%,-5%,0)}}

/* mesh — three blobs drifting out of phase */
.bf-card3d__anim--mesh{background:#0b0718}
.bf-card3d__anim--mesh::before{
  background:
    radial-gradient(38% 46% at 25% 30%,#7c3aedaa,transparent 68%),
    radial-gradient(34% 40% at 76% 38%,#2563ebaa,transparent 70%);
  filter:blur(14px);animation:bf-cardMeshA 13s ease-in-out infinite alternate}
.bf-card3d__anim--mesh::after{
  background:radial-gradient(42% 50% at 55% 82%,#db277799,transparent 72%);
  filter:blur(16px);animation:bf-cardMeshB 17s ease-in-out infinite alternate}
@keyframes bf-cardMeshA{from{transform:translate3d(-7%,-4%,0) scale(1)}
                        to{transform:translate3d(9%,6%,0) scale(1.12)}}
@keyframes bf-cardMeshB{from{transform:translate3d(6%,5%,0) scale(1.08)}
                        to{transform:translate3d(-8%,-6%,0) scale(.95)}}

/* scan — a bright bar travelling over a ruled ground. The base carries its
   own glow so the face never falls to near-black between passes, and the
   sweep runs continuously rather than parking off-frame for part of it. */
.bf-card3d__anim--scan{background:
  radial-gradient(70% 90% at 30% 20%,#0e3b4d,transparent 70%),
  radial-gradient(60% 80% at 80% 85%,#13304d,transparent 72%),
  linear-gradient(180deg,#071820,#0b2531 55%,#06121a)}
.bf-card3d__anim--scan::before{
  inset:0;background:repeating-linear-gradient(180deg,
    #ffffff12 0 1px,transparent 1px 7px);opacity:.6}
.bf-card3d__anim--scan::after{
  inset:-55% -10%;
  background:linear-gradient(180deg,transparent 30%,#67e8f9e6 50%,transparent 70%);
  filter:blur(7px);animation:bf-cardScan 5s linear infinite}
@keyframes bf-cardScan{from{transform:translateY(-55%)}to{transform:translateY(55%)}}

@media (prefers-reduced-motion:reduce){
  .bf-card3d__anim::before,.bf-card3d__anim::after{animation:none}
}

.bf-card3d__wash{position:absolute;inset:0;background:rgba(0,0,0,.15)}

/* front furniture */
.bf-card3d__chip{position:absolute;left:22px;top:50%;translate:0 -50%;width:29px;height:29px}
/* Partner mark, top-right — the slot the reference gives its brand logo.
   The plaque is a fixed box with the logo letterboxed inside, so brands of
   very different proportions (a square Payoneer glyph next to a 7:1
   WorldFirst wordmark) read as one consistent badge across the five cards.
   A light ground keeps the dark-on-light brand files legible on the card
   art without recolouring anyone's trademark. */
.bf-card3d__partner{position:absolute;right:20px;top:17px;z-index:6;
  box-sizing:border-box;width:100px;height:29px;border-radius:8px;
  background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* An SVG with only a viewBox has no intrinsic size, and for an absolutely
   positioned REPLACED element `width:auto` takes the intrinsic ratio and
   ignores the opposite inset — so neither max-width/height nor left+right
   constrains it, and a square glyph bursts the plaque. The inner box is
   therefore stated outright; object-fit letterboxes any ratio inside it. */
.bf-card3d__partner img{position:absolute;left:10px;top:6px;
  width:80px;height:17px;display:block;object-fit:contain}
/* an already-white logo needs no plaque behind it */
.bf-card3d__partner.is-bare{background:none;box-shadow:none;width:104px;height:21px}
.bf-card3d__partner.is-bare img{left:0;top:0;width:104px;height:21px;object-position:right center}

.bf-card3d__rings{position:absolute;right:22px;bottom:22px;display:flex;align-items:center}
.bf-card3d__rings i{
  width:24px;height:24px;border-radius:50%;display:block;
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(1px);
}
.bf-card3d__rings i:first-child{background:rgba(255,255,255,.2)}
.bf-card3d__rings i:last-child{background:rgba(255,255,255,.35);margin-left:-12px}

/* back furniture */
.bf-card3d__blur{position:absolute;inset:0;filter:blur(16px);transform:scale(1.15)}
.bf-card3d__stripe{
  position:absolute;left:0;right:0;top:20px;height:36px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(12px);z-index:10;
}
.bf-card3d__meta{
  position:absolute;left:24px;bottom:20px;z-index:20;
  display:flex;flex-direction:column;gap:4px;text-align:left;
  font-family:var(--bf-mono);
}
.bf-card3d__num{font-size:12px;font-weight:700;letter-spacing:.14em;color:#fff}
.bf-card3d__sub{
  font-size:9px;font-weight:700;color:rgba(255,255,255,.7);
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
}
.bf-card3d__sub b{color:var(--bf-purple-lift);font-weight:700}
.bf-card3d__sub span{color:rgba(255,255,255,.4)}

/* ============================================================
   PROMPT 04 — FAQ
   The reusable piece here is the SPOTLIGHT RING: a 1px gradient
   border that follows the cursor. Same mask-composite trick as a
   gradient hairline — paint a padded box, then subtract its own
   content area so only the 1px rim survives. Because the gradient
   is a radial centred on a CSS variable, moving that variable
   moves the lit part of the border.
   ============================================================ */
.bf-spot{position:relative}
.bf-spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:1;
  background:radial-gradient(
    var(--spot-size, 280px) circle at var(--spot-x, -200px) var(--spot-y, -200px),
    color-mix(in oklab, var(--bf-purple-lift) 40%, #fff) 0,
    transparent 60%);
  opacity:var(--spot-intensity, .55);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

.bf-faq{display:grid;grid-template-columns:1fr;gap:var(--bf-s6)}
@media (min-width:1024px){
  .bf-faq{grid-template-columns:280px 1fr;gap:var(--bf-s7);align-items:stretch}
}

/* ---------- left rail ---------- */
.bf-faq__rail{display:flex;flex-direction:column;gap:var(--bf-s4)}
.bf-faq__cats{
  display:flex;flex-direction:column;gap:4px;
  padding:10px;border-radius:var(--bf-r-lg);
}
/* Sticky needs a bounded container. Without one the list sticks past its own
   area and overlaps the card beneath it; flex:1 ends the sticky region where
   that card begins. */
.bf-faq__railtop{display:contents}
@media (min-width:1024px){
  .bf-faq__railtop{display:block;flex:1 1 auto;min-height:0}
  .bf-faq__cats{position:sticky;top:96px}
}
.bf-faq__cat{
  width:100%;text-align:center;padding:12px 20px;border-radius:var(--bf-r-pill);
  font-family:var(--bf-sans);font-size:var(--bf-t-sm);cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--bf-ink-dim);
  transition:color .2s var(--bf-e-soft), background .2s var(--bf-e-soft);
}
.bf-faq__cat:hover{color:var(--bf-ink)}
.bf-faq__cat[aria-selected="true"]{
  background:var(--bf-glass);border-color:var(--bf-glass-line);color:var(--bf-ink);
}

.bf-faq__ask{padding:10px;border-radius:var(--bf-r-lg)}
.bf-faq__ask-in{
  border:1px solid var(--bf-glass-line);background:var(--bf-glass);
  border-radius:var(--bf-r-lg);padding:24px;
}
.bf-faq__ask h3{margin:0;font-family:var(--bf-sans);font-size:1.0625rem;font-weight:600;color:var(--bf-ink)}
.bf-faq__ask p{margin:8px 0 0;font-size:var(--bf-t-sm);line-height:1.65;color:var(--bf-ink-dim)}
.bf-faq__ask a{
  margin-top:24px;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--bf-t-sm);color:var(--bf-ink);transition:color .2s;
}
.bf-faq__ask a:hover{color:var(--bf-purple-lift)}

/* ---------- accordion ---------- */
.bf-faq__list{padding:10px;border-radius:var(--bf-r-lg)}
.bf-faq__items{display:flex;flex-direction:column;gap:12px}
.bf-faq__item{
  position:relative;border-radius:var(--bf-r-lg);
  border:1px solid var(--bf-glass-line);background:var(--bf-glass-soft);
  padding:0 24px;transition:background .25s var(--bf-e-soft);
}
.bf-faq__item[data-open="true"]{background:var(--bf-glass)}
.bf-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 0;cursor:pointer;text-align:left;
  background:transparent;border:0;
  font-family:var(--bf-sans);font-size:var(--bf-t-body);font-weight:500;color:var(--bf-ink);
}
.bf-faq__chev{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);
  color:var(--bf-ink-dim);transition:transform .25s var(--bf-e-soft), color .2s;
}
.bf-faq__item[data-open="true"] .bf-faq__chev{transform:rotate(180deg);color:var(--bf-purple-lift)}

/* 0fr -> 1fr animates to the content's natural height without measuring it,
   which is what Radix needs --radix-accordion-content-height for. */
.bf-faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--bf-e-arrive);
}
.bf-faq__item[data-open="true"] .bf-faq__a{grid-template-rows:1fr}
.bf-faq__a > div{overflow:hidden}
.bf-faq__a p{
  margin:0;padding-bottom:26px;
  font-size:var(--bf-t-sm);line-height:1.7;color:var(--bf-ink-dim);
}

@media (prefers-reduced-motion:reduce){
  .bf-faq__a{transition:none}
  .bf-spot::before{display:none}
}

/* ============================================================
   PROMPT 05 — FOOTER
   The Earth limb is the footer. A planet's curve across the lower
   edge gives the page a floor without a rule or a slab, and it is
   the one place in the system where a full-bleed plate carries a
   whole section on its own.
   ============================================================ */
.bf-footer{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(560px,76vh);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--bf-void);
  padding:clamp(72px,10vw,120px) var(--bf-gutter) clamp(28px,4vw,40px);
}
.bf-footer__sky{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 100%;
  display:block;z-index:0;pointer-events:none;
}
/* The plate is additive light on black, so the top edge is feathered
   into the section rather than cut with a hard horizon. */
.bf-footer::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    var(--bf-void) 0%,
    color-mix(in srgb, var(--bf-void) 62%, transparent) 16%,
    color-mix(in srgb, var(--bf-void) 10%, transparent) 38%,
    transparent 62%);
}

.bf-footer__in{
  position:relative;z-index:2;
  width:min(var(--bf-measure), 100%);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,56px);
}

.bf-footer__mark{display:flex;flex-direction:column;gap:18px;max-width:34ch}
/* A <use> of a symbol already carries the symbol's own viewBox, so the outer
   svg must NOT repeat it — a second viewBox pans the window off the artwork.
   It has no intrinsic size either, so give it the ratio explicitly rather than
   letting width:auto stretch it to the flex column. */
.bf-footer__mark svg{height:26px;width:auto;aspect-ratio:970/343;align-self:flex-start}
.bf-footer__tag{
  margin:0;font-family:var(--bf-display);font-weight:700;
  font-size:clamp(1.25rem,1rem + 1.2vw,1.9rem);line-height:1.04;
  letter-spacing:var(--bf-display-track);text-transform:uppercase;
  color:var(--bf-ink);
}

/* The one glass panel in the footer: contact, where the eye lands last. */
.bf-footer__card{
  padding:20px 24px;border-radius:var(--bf-r-lg);
  background:var(--bf-glass);border:1px solid var(--bf-glass-line);
  backdrop-filter:blur(var(--bf-glass-blur)) saturate(120%);
  display:flex;flex-direction:column;gap:10px;
}
.bf-footer__card a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--bf-t-sm);color:var(--bf-ink);transition:color .2s var(--bf-e-soft);
}
.bf-footer__card a:hover{color:var(--bf-purple-lift)}
.bf-footer__card svg{width:16px;height:16px;flex:0 0 auto;color:var(--bf-purple-lift)}

.bf-footer__base{
  position:relative;z-index:2;
  width:min(var(--bf-measure), 100%);margin-inline:auto;
  margin-top:clamp(40px,6vw,72px);padding-top:20px;
  border-top:1px solid rgb(255 255 255 / .08);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-size:11.5px;line-height:1.6;color:var(--bf-ink-mute);
}
.bf-footer__base a{color:var(--bf-ink-dim)}
.bf-footer__base a:hover{color:var(--bf-ink)}