/* ==========================================================================
   BESTFOLLOWS LANDING SECTIONS V2
   Everything below the hero. Loaded at the end of <body> so it wins over the
   per-section <style> blocks; selectors are prefixed with `html body` for the
   same reason.
   ========================================================================== */

html {
  --bfs-base: #060114;
  --bfs-ink: #f6f2ff;
  --bfs-muted: #b9afd8;
  --bfs-surface: rgba(255, 255, 255, 0.045);
  --bfs-surface-2: rgba(255, 255, 255, 0.075);
  --bfs-line: rgba(168, 130, 255, 0.2);
  --bfs-line-strong: rgba(190, 160, 255, 0.5);
  --bfs-accent: #a98bff;
  --bfs-shadow: 0 24px 60px rgba(4, 0, 20, 0.5);
  --bfs-glow-a: rgba(98, 22, 251, 0.34);
  --bfs-glow-b: rgba(76, 18, 204, 0.3);
}

html:not(.dark) {
  --bfs-base: #f7f3ff;
  --bfs-ink: #1c0e45;
  --bfs-muted: #5b4f82;
  --bfs-surface: rgba(255, 255, 255, 0.78);
  --bfs-surface-2: rgba(255, 255, 255, 0.95);
  --bfs-line: rgba(128, 74, 255, 0.2);
  --bfs-line-strong: rgba(128, 74, 255, 0.5);
  --bfs-accent: #6216fb;
  --bfs-shadow: 0 22px 50px rgba(98, 22, 251, 0.13);
  --bfs-glow-a: rgba(167, 139, 250, 0.4);
  --bfs-glow-b: rgba(196, 166, 255, 0.35);
}

/* ---------- page canvas ---------- */
html body main {
  background: var(--bfs-base);
}

html body main > div.perf-content-visibility,
html body main > div.min-h-180 {
  position: relative;
  isolation: isolate;
}

html body main > div.perf-content-visibility::before,
html body main > div.min-h-180::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 8% 12%, var(--bfs-glow-a), transparent 70%),
    radial-gradient(42% 40% at 94% 92%, var(--bfs-glow-b), transparent 70%);
}

html body main > div.perf-content-visibility:nth-of-type(even)::before,
html body main > div.min-h-180:nth-of-type(even)::before {
  background:
    radial-gradient(46% 42% at 92% 10%, var(--bfs-glow-a), transparent 70%),
    radial-gradient(42% 40% at 6% 94%, var(--bfs-glow-b), transparent 70%);
}

/* glowing hairline between sections */
html body main > div.perf-content-visibility::after,
html body main > div.min-h-180::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bfs-line-strong), transparent);
}

html body main section.bg-background,
html body main section[data-slot="features-section"] {
  background-color: transparent !important;
}

/* ---------- section headings ---------- */
html body main section h2 {
  font-family: Outfit, Inter, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 3.5vw, 52px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
  color: var(--bfs-ink) !important;
}

html body main section h2 span.text-black {
  color: var(--bfs-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body main section h2 span.text-transparent,
html body main section h2 .bf-heading-gradient,
html body main section h2 .bf-brand-highlight,
html body main section h2 .bf-panel-title-gradient,
html body main section h2 .text-brand {
  background: linear-gradient(95deg, #a67bff 0%, #dcc1ff 50%, #8f5cff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html:not(.dark) body main section h2 span.text-transparent,
html:not(.dark) body main section h2 .bf-heading-gradient,
html:not(.dark) body main section h2 .bf-brand-highlight,
html:not(.dark) body main section h2 .bf-panel-title-gradient,
html:not(.dark) body main section h2 .text-brand {
  background-image: linear-gradient(95deg, #6216fb 0%, #a259ff 55%, #5b1fe0 100%) !important;
}

html body main section [data-slot="section-heading"] p,
html body main section h2 + p {
  color: var(--bfs-muted) !important;
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* eyebrow pills */
html body main section [class*="rounded-[33px]"][class*="border"]:not([data-slot]) {
  padding: 7px 16px !important;
  border: 1px solid var(--bfs-line-strong) !important;
  border-radius: 999px !important;
  background: rgba(128, 74, 255, 0.14) !important;
  box-shadow: 0 0 28px rgba(128, 74, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html body main section [class*="rounded-[33px]"][class*="border"]:not([data-slot]) * {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bfs-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---------- cards: shared look ---------- */
html body main [data-slot="why-choose-us-card"],
html body main [data-slot="text-content-slider-card"],
html body main [data-slot="image-text-slide-panel"],
html body main .smmiu-feature-item,
html body main .bf-testimonial-card,
html body main .faq-accordion-item,
html body main .bf-model-container,
html body main .bf-panel-desktop-container,
html body main .bf-stat-card {
  position: relative;
  border: 1px solid var(--bfs-line) !important;
  border-radius: 26px !important;
  background-color: var(--bfs-surface) !important;
  background-image: radial-gradient(380px circle at var(--sx, 50%) var(--sy, -30%), rgba(128, 74, 255, 0.2), transparent 62%) !important;
  box-shadow: var(--bfs-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--bfs-ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.35s ease !important;
}

html body main [data-slot="why-choose-us-card"]:hover,
html body main [data-slot="text-content-slider-card"]:hover,
html body main .smmiu-feature-item:hover,
html body main .bf-testimonial-card:hover,
html body main .faq-accordion-item:hover,
html body main .bf-stat-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--bfs-line-strong) !important;
  box-shadow: 0 30px 70px rgba(60, 10, 170, 0.4), 0 0 0 1px rgba(128, 74, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body main .faq-accordion-item:hover { transform: none !important; }

html body main [data-slot="why-choose-us-card"] h3,
html body main [data-slot="text-content-slider-card"] h3,
html body main .smmiu-feature-item h3,
html body main .smmiu-feature-item h4 {
  font-family: Outfit, Inter, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--bfs-ink) !important;
}

html body main [data-slot="why-choose-us-card"] p,
html body main [data-slot="text-content-slider-card"] p,
html body main .smmiu-feature-item p {
  color: var(--bfs-muted) !important;
  line-height: 1.7 !important;
}

/* ---------- stats band ---------- */
html body main .bf-stats-card-container {
  border: 1px solid var(--bfs-line-strong) !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, rgba(128, 74, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(98, 22, 251, 0.14)) !important;
  box-shadow: 0 30px 80px rgba(60, 10, 170, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}

html:not(.dark) body main .bf-stats-card-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 229, 255, 0.85)) !important;
  box-shadow: 0 26px 60px rgba(98, 22, 251, 0.18) !important;
}

html body main .bf-platform-stats-section article p[aria-label] {
  font-family: Outfit, Inter, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, #ffffff, #c9b0ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html:not(.dark) body main .bf-platform-stats-section article p[aria-label] {
  background-image: linear-gradient(180deg, #4c12cc, #8f5cff) !important;
}

/* ---------- partner logos ---------- */
html body main [data-slot="trusted-partner-card"] {
  border: 1px solid var(--bfs-line) !important;
  border-radius: 16px !important;
  background: var(--bfs-surface) !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease, transform 0.25s ease !important;
}

html body main [data-slot="trusted-partner-card"]:hover {
  border-color: var(--bfs-line-strong) !important;
  transform: translateY(-3px);
}

/* ---------- video tutorials ---------- */
html body main [data-slot="video-tutorial-card"] {
  border: 1px solid var(--bfs-line-strong) !important;
  border-radius: 28px !important;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(30, 6, 100, 0.5), 0 0 0 1px rgba(128, 74, 255, 0.1) !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease !important;
}

html body main [data-slot="video-tutorial-card"]:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 40px 90px rgba(98, 22, 251, 0.45), 0 0 0 1px rgba(169, 139, 255, 0.4) !important;
}

/* ---------- platform tabs ---------- */
html body main #bf-platform-showcase button,
html body main .bf-panel-tab-btn {
  border-radius: 14px !important;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body main #bf-platform-showcase button:hover,
html body main .bf-panel-tab-btn:hover {
  transform: translateY(-2px);
  border-color: var(--bfs-line-strong) !important;
}

html body main .bf-panel-tab-btn.bf-panel-tab--active {
  background: linear-gradient(135deg, #8f5cff, #6216fb) !important;
  color: #fff !important;
  border-color: rgba(200, 175, 255, 0.6) !important;
  box-shadow: 0 12px 30px rgba(98, 22, 251, 0.5) !important;
}

/* ---------- FAQ ---------- */
html body main .faq-accordion-item {
  border-radius: 20px !important;
}

html body main .faq-accordion-item[data-state="open"],
html body main .faq-accordion-item.is-open {
  border-color: var(--bfs-line-strong) !important;
  box-shadow: 0 24px 60px rgba(98, 22, 251, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ---------- testimonials ---------- */
html body main .bf-testimonial-card {
  border-radius: 24px !important;
}

/* ---------- buttons ---------- */
html body main section a[data-slot="primary-button"],
html body main section button[data-slot="primary-button"] {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(190, 160, 255, 0.55) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #8f5cff 0%, #6216fb 100%) !important;
  box-shadow: 0 14px 34px rgba(98, 22, 251, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body main section a[data-slot="primary-button"]::after,
html body main section button[data-slot="primary-button"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: bfs-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bfs-sheen {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

html body main section a[data-slot="primary-button"]:hover,
html body main section button[data-slot="primary-button"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(98, 22, 251, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

html body main section a[data-slot="secondary-button"] {
  border-radius: 14px !important;
  border: 1px solid var(--bfs-line-strong) !important;
  background: var(--bfs-surface) !important;
  color: var(--bfs-ink) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}

html body main section a[data-slot="secondary-button"]:hover { transform: translateY(-3px); }

/* ---------- closing CTA ---------- */
html body main .brand-cta-banner {
  border: 1px solid var(--bfs-line-strong) !important;
  border-radius: 40px !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(167, 120, 255, 0.55), transparent 70%),
    radial-gradient(60% 90% at 90% 100%, rgba(98, 22, 251, 0.7), transparent 70%),
    linear-gradient(135deg, #2a0f6b 0%, #14073a 100%) !important;
  box-shadow: 0 40px 100px rgba(98, 22, 251, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  overflow: hidden;
}

html body main .brand-cta-banner h2,
html body main .brand-cta-banner h2 * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

html body main .brand-cta-banner p { color: #d8caff !important; }
html body main .brand-cta-banner h2 { text-wrap: balance; }

/* ---------- scroll reveal (needs bf-sections.js; no-JS shows everything) ---------- */
html.bf-js .bf-reveal {
  opacity: 0;
  translate: 0 34px;
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

html.bf-js .bf-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.bf-js .bf-reveal { opacity: 1; translate: none; transition: none; }
  html body main section a[data-slot="primary-button"]::after,
  html body main section button[data-slot="primary-button"]::after { animation: none; }
}

@media (max-width: 767px) {
  html body main section h2 { font-size: clamp(27px, 8vw, 36px) !important; }
  html body main .brand-cta-banner { border-radius: 28px !important; padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* ==========================================================================
   ANIMATED ICONS - every icon family gets its own motion
   ========================================================================== */
@keyframes bfa-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bfa-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.11); } 70% { transform: scale(1); } }
@keyframes bfa-spin      { to { transform: rotate(360deg); } }
@keyframes bfa-swing     { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }
@keyframes bfa-flip      { 0%, 55%, 100% { transform: perspective(420px) rotateY(0); } 80% { transform: perspective(420px) rotateY(360deg); } }
@keyframes bfa-bounce    { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(-16px) scale(0.96, 1.06); } 30% { transform: translateY(0) scale(1.1, 0.9); } 42% { transform: translateY(-6px) scale(1); } 52% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes bfa-tada      { 0%, 60%, 100% { transform: scale(1) rotate(0); } 8%, 16% { transform: scale(0.92) rotate(-7deg); } 24%, 40% { transform: scale(1.14) rotate(7deg); } 32%, 48% { transform: scale(1.14) rotate(-7deg); } 56% { transform: scale(1) rotate(0); } }
@keyframes bfa-wiggle    { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(-13deg); } 22% { transform: rotate(11deg); } 34% { transform: rotate(-7deg); } 46% { transform: rotate(4deg); } }
@keyframes bfa-breathe   { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(169, 139, 255, 0)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(169, 139, 255, 0.8)); } }
@keyframes bfa-sway      { 0%, 100% { transform: translateX(-5px) rotate(-5deg); } 50% { transform: translateX(5px) rotate(5deg); } }
@keyframes bfa-ring      { 0% { box-shadow: 0 0 0 0 rgba(128, 74, 255, 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(128, 74, 255, 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* stats band: float / heartbeat / slow spin / swing */
  html body main .bf-platform-stats-section article > div.relative.mb-4 { transform-origin: 50% 50%; }
  html body main .bf-platform-stats-section article:nth-child(1) > div.relative.mb-4 { animation: bfa-float 4.2s ease-in-out infinite; }
  html body main .bf-platform-stats-section article:nth-child(2) > div.relative.mb-4 { animation: bfa-heartbeat 2.8s ease-in-out infinite; }
  html body main .bf-platform-stats-section article:nth-child(3) > div.relative.mb-4 .bf-polygon-frame { animation: bfa-spin 16s linear infinite; }
  html body main .bf-platform-stats-section article:nth-child(4) > div.relative.mb-4 { animation: bfa-swing 3.8s ease-in-out infinite; transform-origin: 50% 0; }

  /* feature cards: flip / bounce / tada / breathe */
  html body main .feature-icon-wrapper { animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  html body main .smmiu-feature-item:nth-child(1) .feature-icon-wrapper { animation: bfa-flip 5.5s ease-in-out infinite, bfa-ring 2.8s ease-out infinite; }
  html body main .smmiu-feature-item:nth-child(2) .feature-icon-wrapper { animation: bfa-bounce 3.4s ease-in-out infinite, bfa-ring 3.2s ease-out 0.4s infinite; }
  html body main .smmiu-feature-item:nth-child(3) .feature-icon-wrapper { animation: bfa-tada 4.4s ease-in-out infinite, bfa-ring 3s ease-out 0.8s infinite; }
  html body main .smmiu-feature-item:nth-child(4) .feature-icon-wrapper { animation: bfa-breathe 3.2s ease-in-out infinite, bfa-ring 3.4s ease-out 1.2s infinite; }

  /* how-it-works steps: wiggle / float / swing / sway */
  html body main [data-slot="how-it-works-step"]:nth-of-type(1) .size-20 { animation: bfa-wiggle 4.6s ease-in-out infinite; }
  html body main [data-slot="how-it-works-step"]:nth-of-type(2) .size-20 { animation: bfa-float 3.6s ease-in-out 0.3s infinite; }
  html body main [data-slot="how-it-works-step"]:nth-of-type(3) .size-20 { animation: bfa-swing 4.2s ease-in-out infinite; transform-origin: 50% 0; }
  html body main [data-slot="how-it-works-step"]:nth-of-type(4) .size-20 { animation: bfa-sway 4s ease-in-out infinite; }

  /* about list bullets */
  html body main .bf-feature-item:nth-child(1) .bf-feature-icon { animation: bfa-heartbeat 3s ease-in-out infinite; }
  html body main .bf-feature-item:nth-child(2) .bf-feature-icon { animation: bfa-spin 10s linear infinite; }
  html body main .bf-feature-item:nth-child(3) .bf-feature-icon { animation: bfa-breathe 3.4s ease-in-out infinite; }

  /* footer social icons: each a different motion */
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(1) { animation: bfa-float 3.6s ease-in-out infinite; }
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(2) { animation: bfa-bounce 4s ease-in-out 0.3s infinite; }
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(3) { animation: bfa-wiggle 4.4s ease-in-out 0.6s infinite; }
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(4) { animation: bfa-tada 5s ease-in-out 0.9s infinite; }
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(5) { animation: bfa-breathe 3.2s ease-in-out 1.2s infinite; }
  html body footer[data-slot="footer"] a[aria-label][target="_blank"]:nth-child(n + 6) { animation: bfa-sway 3.8s ease-in-out 1.5s infinite; }
}

/* icon wrappers: glow on card hover */
html body main .feature-icon-wrapper,
html body main [data-slot="how-it-works-step"] .size-20 {
  border-radius: 18px !important;
  border: 1px solid var(--bfs-line-strong) !important;
  background: linear-gradient(145deg, rgba(128, 74, 255, 0.3), rgba(98, 22, 251, 0.1)) !important;
  box-shadow: 0 10px 28px rgba(98, 22, 251, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   WHY CHOOSE US: the four text columns become cards
   ========================================================================== */
html body main .why-choose-section .grid.lg\:grid-cols-4 > div {
  margin: 0 6px;
  padding: 22px 20px !important;
  border: 1px solid var(--bfs-line) !important;
  border-radius: 22px;
  background: var(--bfs-surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--bfs-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

html body main .why-choose-section .grid.lg\:grid-cols-4 > div:hover {
  transform: translateY(-6px);
  border-color: var(--bfs-line-strong);
}

html body main .why-choose-section .section-card-subtitle {
  font-family: Outfit, Inter, sans-serif !important;
  font-weight: 800 !important;
  color: var(--bfs-ink) !important;
}

html body main .why-choose-section .grid.lg\:grid-cols-4 p {
  color: var(--bfs-muted) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
html body footer[data-slot="footer"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(50% 55% at 12% 0%, rgba(98, 22, 251, 0.38), transparent 70%),
    radial-gradient(45% 50% at 92% 8%, rgba(128, 74, 255, 0.26), transparent 70%),
    linear-gradient(180deg, #0b0320 0%, #050110 100%) !important;
  border-top: 1px solid rgba(168, 130, 255, 0.28);
}

html body footer[data-slot="footer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a98bff, transparent);
  box-shadow: 0 0 24px 2px rgba(128, 74, 255, 0.7);
}

html body footer[data-slot="footer"] h2 {
  font-family: Outfit, Inter, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  background: linear-gradient(95deg, #ffffff 0%, #d9c3ff 55%, #a67bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html body footer[data-slot="footer"] a {
  transition: color 0.2s ease, transform 0.2s ease;
}

html body footer[data-slot="footer"] li a:hover,
html body footer[data-slot="footer"] nav a:hover {
  color: #c9b0ff;
  transform: translateX(4px);
}

html body footer[data-slot="footer"] a[aria-label][target="_blank"] {
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(98, 22, 251, 0.35);
}

html body footer[data-slot="footer"] a[aria-label][target="_blank"]:hover {
  transform: translateY(-4px) scale(1.12) !important;
  box-shadow: 0 14px 28px rgba(128, 74, 255, 0.6);
}

html body footer[data-slot="footer"] p.font-heading-display {
  color: #d9c3ff;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   API / RESELLER CAROUSEL: soft edge fade so the cut-off card reads as "more"
   ========================================================================== */
html body main [data-slot="carousel-content"]:has([data-slot="text-content-slider-card"]) {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}

/* card text: use the shared heading/body look instead of the bold-everywhere default */
html body main [data-slot="text-content-slider-card"] p {
  font-weight: 500 !important;
}

html body main [data-slot="text-content-slider-card"] {
  background-color: var(--bfs-surface) !important;
}

/* Scroll performance: sections below the fold are laid out and painted only when they approach the viewport. */
main > section:not(#bf-hero-v2),
.bfx {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}