/* =========================================================
   BuyFollowers Home Background — Final Premium Aurora V4
   Seamless full-page canvas, no section bands
========================================================= */

/* ---------------------------------------------------------
   1. Global canvas
--------------------------------------------------------- */

html {
  background: #ffffff;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 3%, rgba(79, 70, 229, 0.115), transparent 27%),
    radial-gradient(circle at 92% 5%, rgba(236, 72, 153, 0.105), transparent 29%),
    radial-gradient(circle at 16% 30%, rgba(56, 189, 248, 0.052), transparent 30%),
    radial-gradient(circle at 88% 42%, rgba(168, 85, 247, 0.058), transparent 33%),
    radial-gradient(circle at 12% 68%, rgba(99, 102, 241, 0.054), transparent 35%),
    radial-gradient(circle at 90% 84%, rgba(244, 114, 182, 0.052), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 38%, #ffffff 72%, #fafbff 100%);
  background-attachment: fixed;
}

/* Main aurora layer — one layer for whole page */
body::before {
  content: "";
  position: fixed;
  inset: -18vh -14vw;
  z-index: -8;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 5% 10%, rgba(79, 70, 229, 0.17), transparent 34%),
    radial-gradient(ellipse at 95% 12%, rgba(236, 72, 153, 0.145), transparent 36%),
    radial-gradient(ellipse at 18% 42%, rgba(56, 189, 248, 0.070), transparent 38%),
    radial-gradient(ellipse at 88% 52%, rgba(168, 85, 247, 0.084), transparent 40%),
    radial-gradient(ellipse at 12% 76%, rgba(34, 197, 94, 0.038), transparent 38%),
    radial-gradient(ellipse at 92% 86%, rgba(244, 114, 182, 0.074), transparent 42%),
    radial-gradient(ellipse at 50% 104%, rgba(99, 102, 241, 0.074), transparent 46%);
  filter: blur(18px);
  opacity: 0.92;
  transform: translate3d(0, 0, 0);
  animation: bfAuroraDrift 34s ease-in-out infinite alternate;
}

/* Single subtle grid for the entire page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -7;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.014) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.24) 42%,
    rgba(0, 0, 0, 0.18) 78%,
    transparent 100%
  );
  opacity: 0.48;
}

/* ---------------------------------------------------------
   2. Home sections become transparent layers
--------------------------------------------------------- */

.bf-service-hero,
.bf-brand-marquee-section,
.bf-popular-packages,
.bf-clean-mobile-section,
.bf-home-features-grid,
.bf-home-order-flow,
.bf-reviews-carousel-section,
.bf-home-faq,
.bf-home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Disable old section bg divs */
.bf-service-hero__bg,
.bf-brand-marquee-section__bg,
.bf-popular-packages__bg,
.bf-clean-mobile-section__bg,
.bf-home-features-grid__bg,
.bf-home-order-flow__bg,
.bf-reviews-carousel-section__bg,
.bf-home-faq__bg,
.bf-home-cta__bg {
  display: none !important;
}

/* Keep content above decoration */
.bf-service-hero > .container,
.bf-brand-marquee-section > .container,
.bf-popular-packages > .container,
.bf-clean-mobile-section > .container,
.bf-home-features-grid > .container,
.bf-home-order-flow > .container,
.bf-reviews-carousel-section > .container,
.bf-home-faq > .container,
.bf-home-cta > .container {
  position: relative;
  z-index: 4;
}

/* External wrappers must not create white bands */
.content-section-layout,
.content-section-layout > section {
  background: transparent !important;
}

/* ---------------------------------------------------------
   3. Diagonal seamless depth
   Not horizontal, not section-like
--------------------------------------------------------- */

/* Soft diagonal wash */
.bf-service-hero::before,
.bf-brand-marquee-section::before,
.bf-popular-packages::before,
.bf-clean-mobile-section::before,
.bf-home-features-grid::before,
.bf-home-order-flow::before,
.bf-reviews-carousel-section::before,
.bf-home-faq::before,
.bf-home-cta::before {
  content: "";
  position: absolute;
  inset: -220px -140px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      128deg,
      transparent 0%,
      rgba(79, 70, 229, 0.018) 26%,
      transparent 44%,
      rgba(236, 72, 153, 0.016) 66%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at var(--bf-v4-x1, 12%) var(--bf-v4-y1, 18%),
      rgba(99, 102, 241, var(--bf-v4-a1, 0.040)),
      transparent 42%
    ),
    radial-gradient(
      ellipse at var(--bf-v4-x2, 88%) var(--bf-v4-y2, 26%),
      rgba(236, 72, 153, var(--bf-v4-a2, 0.038)),
      transparent 44%
    ),
    radial-gradient(
      ellipse at var(--bf-v4-x3, 50%) var(--bf-v4-y3, 92%),
      rgba(56, 189, 248, var(--bf-v4-a3, 0.022)),
      transparent 48%
    );
  filter: blur(22px);
  opacity: 0.58;
  animation: bfSectionAtmosphere 30s ease-in-out infinite alternate;
}

/* Ultra-soft top/bottom veil, almost invisible */
.bf-service-hero::after,
.bf-brand-marquee-section::after,
.bf-popular-packages::after,
.bf-clean-mobile-section::after,
.bf-home-features-grid::after,
.bf-home-order-flow::after,
.bf-reviews-carousel-section::after,
.bf-home-faq::after,
.bf-home-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.00) 26%,
      rgba(255, 255, 255, 0.00) 74%,
      rgba(255, 255, 255, 0.07) 100%
    );
  opacity: 0.26;
}

/* ---------------------------------------------------------
   4. Section atmosphere coordinates
--------------------------------------------------------- */

.bf-service-hero {
  --bf-v4-x1: 8%;
  --bf-v4-y1: 8%;
  --bf-v4-x2: 92%;
  --bf-v4-y2: 9%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 98%;
  --bf-v4-a1: 0.062;
  --bf-v4-a2: 0.058;
  --bf-v4-a3: 0.025;
}

.bf-brand-marquee-section {
  --bf-v4-x1: 20%;
  --bf-v4-y1: 20%;
  --bf-v4-x2: 84%;
  --bf-v4-y2: 24%;
  --bf-v4-x3: 52%;
  --bf-v4-y3: 90%;
  --bf-v4-a1: 0.022;
  --bf-v4-a2: 0.020;
  --bf-v4-a3: 0.012;
}

.bf-popular-packages {
  --bf-v4-x1: 12%;
  --bf-v4-y1: 12%;
  --bf-v4-x2: 90%;
  --bf-v4-y2: 18%;
  --bf-v4-x3: 48%;
  --bf-v4-y3: 94%;
  --bf-v4-a1: 0.044;
  --bf-v4-a2: 0.042;
  --bf-v4-a3: 0.018;
}

.bf-clean-mobile-section {
  --bf-v4-x1: 88%;
  --bf-v4-y1: 14%;
  --bf-v4-x2: 10%;
  --bf-v4-y2: 58%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 94%;
  --bf-v4-a1: 0.038;
  --bf-v4-a2: 0.034;
  --bf-v4-a3: 0.016;
}

.bf-home-features-grid {
  --bf-v4-x1: 12%;
  --bf-v4-y1: 18%;
  --bf-v4-x2: 88%;
  --bf-v4-y2: 18%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 88%;
  --bf-v4-a1: 0.034;
  --bf-v4-a2: 0.032;
  --bf-v4-a3: 0.015;
}

.bf-home-order-flow {
  --bf-v4-x1: 16%;
  --bf-v4-y1: 12%;
  --bf-v4-x2: 86%;
  --bf-v4-y2: 52%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 92%;
  --bf-v4-a1: 0.032;
  --bf-v4-a2: 0.036;
  --bf-v4-a3: 0.014;
}

.bf-reviews-carousel-section {
  --bf-v4-x1: 10%;
  --bf-v4-y1: 16%;
  --bf-v4-x2: 90%;
  --bf-v4-y2: 18%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 90%;
  --bf-v4-a1: 0.034;
  --bf-v4-a2: 0.032;
  --bf-v4-a3: 0.014;
}

.bf-home-faq {
  --bf-v4-x1: 88%;
  --bf-v4-y1: 14%;
  --bf-v4-x2: 12%;
  --bf-v4-y2: 46%;
  --bf-v4-x3: 50%;
  --bf-v4-y3: 92%;
  --bf-v4-a1: 0.036;
  --bf-v4-a2: 0.030;
  --bf-v4-a3: 0.014;
}

.bf-home-cta {
  --bf-v4-x1: 12%;
  --bf-v4-y1: 22%;
  --bf-v4-x2: 90%;
  --bf-v4-y2: 18%;
  --bf-v4-x3: 48%;
  --bf-v4-y3: 86%;
  --bf-v4-a1: 0.044;
  --bf-v4-a2: 0.040;
  --bf-v4-a3: 0.016;
}

/* ---------------------------------------------------------
   5. Abstract accents — premium, subtle, not section bands
--------------------------------------------------------- */

.bf-service-hero > .container::before,
.bf-popular-packages > .container::before,
.bf-clean-mobile-section > .container::before,
.bf-home-features-grid > .container::before,
.bf-home-order-flow > .container::before,
.bf-reviews-carousel-section > .container::before,
.bf-home-faq > .container::before,
.bf-home-cta > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--bf-v4-shape-size, 82px);
  height: var(--bf-v4-shape-size, 82px);
  border-radius: var(--bf-v4-shape-radius, 28px);
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.095), rgba(236, 72, 153, 0.078));
  box-shadow:
    0 28px 88px rgba(99, 102, 241, 0.080),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  opacity: var(--bf-v4-shape-opacity, 0.20);
  transform: rotate(var(--bf-v4-shape-rotate, 18deg));
  animation: bfShapeFloat 18s ease-in-out infinite alternate;
}

.bf-service-hero > .container::after,
.bf-popular-packages > .container::after,
.bf-clean-mobile-section > .container::after,
.bf-home-features-grid > .container::after,
.bf-home-order-flow > .container::after,
.bf-reviews-carousel-section > .container::after,
.bf-home-faq > .container::after,
.bf-home-cta > .container::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--bf-v4-ring-size, 148px);
  height: var(--bf-v4-ring-size, 148px);
  border: 1px solid rgba(99, 102, 241, 0.065);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(236, 72, 153, 0.020) 49%, transparent 72%);
  opacity: var(--bf-v4-ring-opacity, 0.18);
  animation: bfRingFloat 22s ease-in-out infinite alternate;
}

/* Hero */
.bf-service-hero > .container::before {
  top: 44px;
  left: -64px;
  --bf-v4-shape-size: 104px;
  --bf-v4-shape-radius: 32px;
  --bf-v4-shape-opacity: 0.28;
  --bf-v4-shape-rotate: 18deg;
}

.bf-service-hero > .container::after {
  top: 96px;
  right: -90px;
  --bf-v4-ring-size: 176px;
  --bf-v4-ring-opacity: 0.22;
}

/* Packages */
.bf-popular-packages > .container::before {
  left: -58px;
  top: 18%;
  --bf-v4-shape-size: 76px;
  --bf-v4-shape-radius: 999px;
  --bf-v4-shape-opacity: 0.14;
}

.bf-popular-packages > .container::after {
  right: -84px;
  bottom: 16%;
  --bf-v4-ring-size: 148px;
  --bf-v4-ring-opacity: 0.15;
}

/* Clean growth */
.bf-clean-mobile-section > .container::before {
  right: -58px;
  top: 22%;
  --bf-v4-shape-size: 92px;
  --bf-v4-shape-radius: 999px 30px 999px 30px;
  --bf-v4-shape-opacity: 0.18;
  --bf-v4-shape-rotate: -18deg;
}

.bf-clean-mobile-section > .container::after {
  left: -86px;
  bottom: 12%;
  --bf-v4-ring-size: 156px;
  --bf-v4-ring-opacity: 0.16;
}

/* Features */
.bf-home-features-grid > .container::before {
  left: -50px;
  top: 15%;
  --bf-v4-shape-size: 74px;
  --bf-v4-shape-radius: 24px;
  --bf-v4-shape-opacity: 0.14;
  --bf-v4-shape-rotate: 24deg;
}

.bf-home-features-grid > .container::after {
  right: -72px;
  bottom: 8%;
  --bf-v4-ring-size: 148px;
  --bf-v4-ring-opacity: 0.15;
}

/* Order flow */
.bf-home-order-flow > .container::before {
  right: -44px;
  top: 16%;
  --bf-v4-shape-size: 72px;
  --bf-v4-shape-radius: 24px;
  --bf-v4-shape-opacity: 0.12;
  --bf-v4-shape-rotate: 30deg;
}

.bf-home-order-flow > .container::after {
  left: -80px;
  bottom: 10%;
  --bf-v4-ring-size: 144px;
  --bf-v4-ring-opacity: 0.14;
}

/* Reviews */
.bf-reviews-carousel-section > .container::before {
  left: -56px;
  top: 22%;
  --bf-v4-shape-size: 72px;
  --bf-v4-shape-radius: 999px;
  --bf-v4-shape-opacity: 0.13;
}

.bf-reviews-carousel-section > .container::after {
  right: -76px;
  bottom: 14%;
  --bf-v4-ring-size: 146px;
  --bf-v4-ring-opacity: 0.15;
}

/* FAQ */
.bf-home-faq > .container::before {
  left: -48px;
  top: 24%;
  --bf-v4-shape-size: 78px;
  --bf-v4-shape-radius: 999px 28px 999px 28px;
  --bf-v4-shape-opacity: 0.14;
}

.bf-home-faq > .container::after {
  right: -72px;
  bottom: 18%;
  --bf-v4-ring-size: 148px;
  --bf-v4-ring-opacity: 0.15;
}

/* CTA */
.bf-home-cta > .container::before {
  left: -54px;
  top: 18%;
  --bf-v4-shape-size: 88px;
  --bf-v4-shape-radius: 30px;
  --bf-v4-shape-opacity: 0.18;
}

.bf-home-cta > .container::after {
  right: -74px;
  top: 12%;
  --bf-v4-ring-size: 154px;
  --bf-v4-ring-opacity: 0.16;
}

/* ---------------------------------------------------------
   6. Card polish without breaking layouts
--------------------------------------------------------- */

/* Important: .bf-order-flow-step is NOT here */
.bf-service-order-card,
.bf-popular-package-card__link,
.bf-feature-card,
.bf-review-card,
.bf-faq-item,
.bf-home-cta-service,
.bf-clean-phone {
  box-shadow:
    0 22px 70px rgba(15, 23, 42, 0.070),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* Glass cards only, no order-flow */
.bf-feature-card,
.bf-faq-item,
.bf-review-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.945), rgba(255, 255, 255, 0.84)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Keep featured pricing card strong */
.bf-popular-package-card.is-featured .bf-popular-package-card__link {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.20), transparent 34%),
    linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #ec4899 100%) !important;
}

/* ---------------------------------------------------------
   7. Footer integration
--------------------------------------------------------- */

.bf-brand-marquee-section {
  box-shadow: none !important;
}

.bf-footer {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.045), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(236, 72, 153, 0.042), transparent 30%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.48) 0%, #ffffff 100%) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.030) !important;
}

/* ---------------------------------------------------------
   8. Animations
--------------------------------------------------------- */

@keyframes bfAuroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  40% {
    transform: translate3d(-1.1%, 0.7%, 0) scale(1.018);
  }

  100% {
    transform: translate3d(1.0%, -0.8%, 0) scale(1.038);
  }
}

@keyframes bfSectionAtmosphere {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.50;
  }

  100% {
    transform: translate3d(1.2%, -1%, 0) scale(1.030);
    opacity: 0.62;
  }
}

@keyframes bfShapeFloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--bf-v4-shape-rotate, 18deg));
  }

  100% {
    transform: translate3d(8px, -10px, 0) rotate(calc(var(--bf-v4-shape-rotate, 18deg) + 6deg));
  }
}

@keyframes bfRingFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-8px, 10px, 0) scale(1.04);
  }
}

/* ---------------------------------------------------------
   9. Mobile tuning
--------------------------------------------------------- */

@media (max-width: 767.98px) {
  body {
    background:
      radial-gradient(circle at 8% 4%, rgba(99, 102, 241, 0.088), transparent 32%),
      radial-gradient(circle at 94% 8%, rgba(236, 72, 153, 0.080), transparent 34%),
      radial-gradient(circle at 16% 44%, rgba(56, 189, 248, 0.032), transparent 34%),
      radial-gradient(circle at 88% 72%, rgba(236, 72, 153, 0.042), transparent 36%),
      linear-gradient(180deg, #ffffff 0%, #fbfbff 52%, #ffffff 100%);
    background-attachment: scroll;
  }

  body::before {
    inset: -8vh -12vw;
    background:
      radial-gradient(circle at 8% 10%, rgba(99, 102, 241, 0.088), transparent 31%),
      radial-gradient(circle at 92% 12%, rgba(236, 72, 153, 0.080), transparent 33%),
      radial-gradient(circle at 18% 50%, rgba(56, 189, 248, 0.032), transparent 34%),
      radial-gradient(circle at 86% 78%, rgba(244, 114, 182, 0.046), transparent 36%);
    filter: blur(11px);
    opacity: 0.74;
    animation-duration: 36s;
  }

  body::after {
    background-size: 40px 40px;
    opacity: 0.18;
    mask-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.16) 58%,
      transparent 100%
    );
  }

  .bf-service-hero::before,
  .bf-brand-marquee-section::before,
  .bf-popular-packages::before,
  .bf-clean-mobile-section::before,
  .bf-home-features-grid::before,
  .bf-home-order-flow::before,
  .bf-reviews-carousel-section::before,
  .bf-home-faq::before,
  .bf-home-cta::before {
    inset: -96px -48px;
    filter: blur(20px);
    opacity: 0.34;
    animation-duration: 34s;
  }

  .bf-service-hero::after,
  .bf-brand-marquee-section::after,
  .bf-popular-packages::after,
  .bf-clean-mobile-section::after,
  .bf-home-features-grid::after,
  .bf-home-order-flow::after,
  .bf-reviews-carousel-section::after,
  .bf-home-faq::after,
  .bf-home-cta::after {
    opacity: 0.14;
  }

  .bf-service-hero > .container::before,
  .bf-popular-packages > .container::before,
  .bf-clean-mobile-section > .container::before,
  .bf-home-features-grid > .container::before,
  .bf-home-order-flow > .container::before,
  .bf-reviews-carousel-section > .container::before,
  .bf-home-faq > .container::before,
  .bf-home-cta > .container::before {
    width: 54px;
    height: 54px;
    opacity: 0.09;
    border-radius: 20px;
    animation-duration: 22s;
  }

  .bf-service-hero > .container::after,
  .bf-popular-packages > .container::after,
  .bf-clean-mobile-section > .container::after,
  .bf-home-features-grid > .container::after,
  .bf-home-order-flow > .container::after,
  .bf-reviews-carousel-section > .container::after,
  .bf-home-faq > .container::after,
  .bf-home-cta > .container::after {
    width: 102px;
    height: 102px;
    opacity: 0.09;
    animation-duration: 26s;
  }
}

@media (max-width: 575.98px) {
  body::after {
    background-size: 34px 34px;
    opacity: 0.13;
  }

  .bf-service-hero::before,
  .bf-brand-marquee-section::before,
  .bf-popular-packages::before,
  .bf-clean-mobile-section::before,
  .bf-home-features-grid::before,
  .bf-home-order-flow::before,
  .bf-reviews-carousel-section::before,
  .bf-home-faq::before,
  .bf-home-cta::before {
    opacity: 0.28;
  }

  .bf-service-hero > .container::before,
  .bf-popular-packages > .container::before,
  .bf-clean-mobile-section > .container::before,
  .bf-home-features-grid > .container::before,
  .bf-home-order-flow > .container::before,
  .bf-reviews-carousel-section > .container::before,
  .bf-home-faq > .container::before,
  .bf-home-cta > .container::before,
  .bf-service-hero > .container::after,
  .bf-popular-packages > .container::after,
  .bf-clean-mobile-section > .container::after,
  .bf-home-features-grid > .container::after,
  .bf-home-order-flow > .container::after,
  .bf-reviews-carousel-section > .container::after,
  .bf-home-faq > .container::after,
  .bf-home-cta > .container::after {
    opacity: 0.06;
  }
}

/* ---------------------------------------------------------
   10. Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body::before,
  .bf-service-hero::before,
  .bf-brand-marquee-section::before,
  .bf-popular-packages::before,
  .bf-clean-mobile-section::before,
  .bf-home-features-grid::before,
  .bf-home-order-flow::before,
  .bf-reviews-carousel-section::before,
  .bf-home-faq::before,
  .bf-home-cta::before,
  .bf-service-hero > .container::before,
  .bf-popular-packages > .container::before,
  .bf-clean-mobile-section > .container::before,
  .bf-home-features-grid > .container::before,
  .bf-home-order-flow > .container::before,
  .bf-reviews-carousel-section > .container::before,
  .bf-home-faq > .container::before,
  .bf-home-cta > .container::before,
  .bf-service-hero > .container::after,
  .bf-popular-packages > .container::after,
  .bf-clean-mobile-section > .container::after,
  .bf-home-features-grid > .container::after,
  .bf-home-order-flow > .container::after,
  .bf-reviews-carousel-section > .container::after,
  .bf-home-faq > .container::after,
  .bf-home-cta > .container::after {
    animation: none !important;
  }
}