/* Balance MediBall – Eastern Elegance brush system v0.2.6
 * The extracted dry-brush stroke is the site's primary decorative language.
 * One authentic texture, varied through size, rotation and brand-tinted CSS masks.
 */

:root {
  --bm-brush-blue: #537085;
  --bm-brush-blue-soft: #89a0ae;
  --bm-brush-red: #c74745;
  --bm-brush-red-soft: #be7069;
  --bm-brush-sand: #c2a479;
}

/* Hero: dominant real brush + a much smaller red counter-stroke. */
.bm-hero-art::before {
  width: 690px;
  height: 588px;
  top: -10px;
  left: 50%;
  transform: translateX(-51%) rotate(-2deg);
  background-image: url('hero-brush-blue-v2.png?v=0.2.6');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .88;
  mix-blend-mode: normal;
}

.bm-hero-art::after {
  display: block;
  width: 315px;
  height: 270px;
  right: -22px;
  bottom: 58px;
  left: auto;
  top: auto;
  transform: rotate(23deg) scaleX(-1);
  background: var(--bm-brush-red-soft);
  background-image: none;
  -webkit-mask: url('hero-brush-blue-v2.png?v=0.2.6') center / contain no-repeat;
  mask: url('hero-brush-blue-v2.png?v=0.2.6') center / contain no-repeat;
  opacity: .20;
  mix-blend-mode: multiply;
}

/* All secondary brush decorations use the exact same authentic texture as a mask. */
.bm-flow-section::before,
.bm-video-frame::before,
.bm-first-section::after,
.bm-start-card::after,
.bm-benefits-section::after,
.bm-competition-section::before,
.bm-instructors-section::before,
.bm-session-section::after,
.bm-equipment-section::before,
.bm-faq-section::after,
.bm-final-cta::before {
  content: '';
  position: absolute;
  pointer-events: none;
  background-image: none;
  -webkit-mask: url('hero-brush-blue-v2.png?v=0.2.6') center / contain no-repeat;
  mask: url('hero-brush-blue-v2.png?v=0.2.6') center / contain no-repeat;
  mix-blend-mode: multiply;
}

/* Keep decorated sections safely layered above their paint gestures. */
.bm-flow-section,
.bm-first-section,
.bm-benefits-section,
.bm-instructors-section,
.bm-session-section,
.bm-equipment-section,
.bm-faq-section,
.bm-final-cta {
  position: relative;
  overflow: hidden;
}

.bm-flow-section .bm-section-inner,
.bm-first-section .bm-section-inner,
.bm-benefits-section .bm-section-inner,
.bm-instructors-section .bm-section-inner,
.bm-session-section .bm-section-inner,
.bm-equipment-section .bm-section-inner,
.bm-faq-section .bm-section-inner,
.bm-final-cta .bm-section-inner {
  position: relative;
  z-index: 1;
}

/* Mi az a MediBall? – medium, airy powder-blue sweep. */
.bm-flow-section::before {
  z-index: 0;
  width: 560px;
  height: 478px;
  right: -145px;
  top: 18px;
  background: var(--bm-brush-blue-soft);
  transform: rotate(18deg) scaleX(-1);
  opacity: .24;
}

/* Video – small warm red gesture tucked into the frame. */
.bm-video-frame::before {
  z-index: 0;
  width: 390px;
  height: 332px;
  right: -105px;
  bottom: -120px;
  top: auto;
  background: var(--bm-brush-red-soft);
  transform: rotate(-24deg);
  opacity: .18;
}
.bm-video-placeholder { position: relative; z-index: 2; }

/* First session – visible but calm red brush entering from the left. */
.bm-first-section::after {
  z-index: 0;
  width: 485px;
  height: 414px;
  left: -105px;
  bottom: -92px;
  background: var(--bm-brush-red-soft);
  transform: rotate(154deg);
  opacity: .20;
}

/* Confidence card – a small warm sand gesture, deliberately different in scale. */
.bm-start-card::after {
  z-index: 0;
  width: 285px;
  height: 244px;
  right: -48px;
  bottom: -72px;
  background: var(--bm-brush-sand);
  transform: rotate(-18deg) scaleX(-1);
  opacity: .26;
}
.bm-start-card > * { position: relative; z-index: 1; }

/* Benefits – compact blue accent on the opposite side. */
.bm-benefits-section::after {
  z-index: 0;
  width: 365px;
  height: 312px;
  right: -92px;
  left: auto;
  top: 70px;
  bottom: auto;
  background: var(--bm-brush-blue-soft);
  transform: rotate(102deg);
  opacity: .18;
}

/* Competition – stronger red brush works on the dark field. */
.bm-competition-section::before {
  z-index: 0;
  width: 590px;
  height: 503px;
  right: -112px;
  top: -105px;
  background: var(--bm-brush-red);
  transform: rotate(18deg) scaleX(-1);
  opacity: .28;
  mix-blend-mode: screen;
}
.bm-competition-card { position: relative; z-index: 1; }

/* Instructors – soft sand brush creates a human, editorial pause. */
.bm-instructors-section::before {
  z-index: 0;
  width: 390px;
  height: 333px;
  left: -104px;
  bottom: -82px;
  background: var(--bm-brush-sand);
  transform: rotate(168deg) scaleX(-1);
  opacity: .17;
}

/* Session info – small red mark near the practical conversion block. */
.bm-session-section::after {
  z-index: 0;
  width: 310px;
  height: 264px;
  right: 2%;
  bottom: -90px;
  background: var(--bm-brush-red-soft);
  transform: rotate(34deg);
  opacity: .15;
}

/* Equipment – larger but very pale blue stroke. */
.bm-equipment-section::before {
  z-index: 0;
  width: 500px;
  height: 426px;
  left: -150px;
  bottom: -125px;
  background: var(--bm-brush-blue-soft);
  transform: rotate(145deg);
  opacity: .14;
}

/* FAQ – small sand touch, mostly whitespace remains. */
.bm-faq-section::after {
  z-index: 0;
  width: 255px;
  height: 218px;
  right: -46px;
  top: 17%;
  background: var(--bm-brush-sand);
  transform: rotate(74deg) scaleX(-1);
  opacity: .16;
}

/* Final CTA – medium blue sweep visually closes the page. */
.bm-final-cta::before {
  display: block;
  z-index: 0;
  width: 510px;
  height: 435px;
  left: 50%;
  top: 50%;
  background: var(--bm-brush-blue-soft);
  transform: translate(-50%, -45%) rotate(-12deg);
  opacity: .16;
}

@media (max-width: 900px) {
  .bm-hero-art::before { width: 590px; height: 502px; top: 8px; opacity: .84; }
  .bm-hero-art::after { width: 255px; height: 218px; right: -22px; bottom: 70px; opacity: .16; }
  .bm-flow-section::before { width: 465px; height: 397px; right: -185px; opacity: .18; }
  .bm-first-section::after { width: 410px; height: 350px; left: -155px; opacity: .15; }
  .bm-benefits-section::after { width: 310px; height: 265px; right: -125px; opacity: .13; }
  .bm-competition-section::before { width: 500px; height: 426px; right: -170px; opacity: .22; }
  .bm-instructors-section::before { width: 330px; height: 281px; left: -145px; opacity: .12; }
  .bm-equipment-section::before { width: 410px; height: 350px; left: -200px; opacity: .10; }
}

@media (max-width: 600px) {
  .bm-hero-art::before { width: 420px; height: 358px; top: 22px; opacity: .80; }
  .bm-hero-art::after { width: 205px; height: 175px; right: -40px; bottom: 54px; opacity: .14; }
  .bm-flow-section::before { width: 340px; height: 290px; right: -190px; top: 35px; opacity: .13; }
  .bm-video-frame::before { width: 275px; height: 235px; right: -105px; bottom: -95px; opacity: .14; }
  .bm-first-section::after { width: 320px; height: 273px; left: -180px; bottom: -68px; opacity: .12; }
  .bm-start-card::after { width: 220px; height: 188px; right: -75px; bottom: -58px; opacity: .19; }
  .bm-benefits-section::after { width: 250px; height: 213px; right: -155px; top: 85px; opacity: .10; }
  .bm-competition-section::before { width: 390px; height: 333px; right: -210px; top: -70px; opacity: .18; }
  .bm-instructors-section::before { width: 260px; height: 222px; left: -155px; bottom: -35px; opacity: .10; }
  .bm-session-section::after { width: 220px; height: 188px; right: -80px; bottom: -55px; opacity: .10; }
  .bm-equipment-section::before { width: 315px; height: 269px; left: -190px; bottom: -70px; opacity: .08; }
  .bm-faq-section::after { width: 205px; height: 175px; right: -115px; opacity: .11; }
  .bm-final-cta::before { width: 360px; height: 307px; opacity: .11; }
}