/* Balance MediBall — Modern Eastern Plus v0.3.1
 * Stronger contemporary layer: cooler palette, editorial lines, kinetic geometry.
 */

:root {
  --bm-ink: #102a3a;
  --bm-paper: #f5f2eb;
  --bm-red: #d45b50;
  --bm-red-soft: #f0d9d4;
  --bm-mist: #d9e8e5;
  --bm-sand: #d7c8ad;
  --bm-muted: #647784;
  --bm-jade: #6f9e98;
  --bm-jade-soft: #dbeae7;
  --bm-line-blue: rgba(16,42,58,.18);
  --bm-line-jade: rgba(111,158,152,.35);
  --bm-line-red: rgba(212,91,80,.34);
  --bm-glow-blue: rgba(95,145,163,.16);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(111,158,152,.11), transparent 26rem),
    radial-gradient(circle at 88% 38%, rgba(212,91,80,.055), transparent 28rem),
    linear-gradient(180deg,#f8f6f1 0%,#f4f1ea 100%);
}

/* subtle scroll progress: modern and useful without becoming app-like */
.bm-scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(var(--bm-scroll-progress,0));
  background: linear-gradient(90deg,var(--bm-jade),var(--bm-red));
  box-shadow: 0 0 18px rgba(111,158,152,.35);
}

/* Header gets sharper modern proportions. */
.bm-site-header {
  background: rgba(248,246,241,.72) !important;
  border-bottom-color: rgba(16,42,58,.065) !important;
}
.bm-site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,transparent 0%,rgba(111,158,152,.28) 24%,rgba(212,91,80,.2) 72%,transparent 100%);
  pointer-events: none;
}
.bm-brand span { letter-spacing: -.035em; }

/* Editorial modern lines injected by JS. */
.bm-modern-line,
.bm-modern-ring {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.bm-modern-line {
  height: 1px;
  width: min(42vw,620px);
  background: linear-gradient(90deg,transparent,var(--bm-line-blue),var(--bm-line-jade),transparent);
  transform: translate3d(var(--bm-line-x,0),var(--bm-line-y,0),0) rotate(var(--bm-line-rot,0deg));
  opacity: var(--bm-line-opacity,.62);
}
.bm-modern-line::after {
  content: '';
  position: absolute;
  right: 18%;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bm-line-dot,var(--bm-red));
  box-shadow: 0 0 0 8px color-mix(in srgb,var(--bm-line-dot,var(--bm-red)) 10%,transparent);
}
.bm-modern-line--vertical {
  width: 1px;
  height: clamp(180px,28vw,420px);
  background: linear-gradient(180deg,transparent,var(--bm-line-jade),transparent);
}
.bm-modern-line--red {
  background: linear-gradient(90deg,transparent,var(--bm-line-red),transparent);
  --bm-line-dot: var(--bm-red);
}
.bm-modern-line--jade { --bm-line-dot: var(--bm-jade); }
.bm-modern-ring {
  width: var(--bm-ring-size,140px);
  aspect-ratio: 1;
  border: 1px solid rgba(111,158,152,.24);
  border-radius: 50%;
  transform: translate3d(var(--bm-ring-x,0),var(--bm-ring-y,0),0) rotate(var(--bm-ring-rot,0deg));
}
.bm-modern-ring::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  right: 8%;
  top: 22%;
  border-radius: 50%;
  background: var(--bm-red);
  box-shadow: 0 6px 20px rgba(212,91,80,.24);
}
.bm-modern-ring--broken {
  border-color: transparent;
  background: conic-gradient(from 18deg,rgba(111,158,152,.34) 0 18%,transparent 18% 52%,rgba(16,42,58,.14) 52% 68%,transparent 68% 100%);
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
}

/* Hero: stronger contemporary composition. */
.bm-hero-section {
  background:
    radial-gradient(circle at 78% 25%,rgba(111,158,152,.23),transparent 23rem),
    radial-gradient(circle at 64% 76%,rgba(212,91,80,.055),transparent 17rem),
    linear-gradient(180deg,#fbfaf7 0%,#f4f1ea 100%) !important;
}
.bm-hero-section::before {
  content: '';
  position: absolute;
  left: max(1.5rem,calc((100vw - 1180px)/2));
  top: 14%;
  width: 1px;
  height: 48%;
  background: linear-gradient(180deg,transparent,rgba(111,158,152,.28),rgba(16,42,58,.12),transparent);
  opacity: .75;
}
.bm-hero-copy::after {
  content: '';
  display: block;
  width: clamp(90px,13vw,180px);
  height: 1px;
  margin-top: 2.3rem;
  background: linear-gradient(90deg,var(--bm-jade),rgba(111,158,152,0));
}
.bm-hero-title {
  font-size: clamp(3.8rem,7.8vw,7.7rem);
  letter-spacing: -.07em;
}
.bm-hero-lead { max-width: 590px; }
.bm-hero-photo img {
  box-shadow: 0 38px 110px rgba(16,42,58,.17),0 0 0 1px rgba(255,255,255,.55);
}
.bm-orbit-ball {
  background: linear-gradient(145deg,#e77568,#bd443d);
  box-shadow: 0 14px 35px rgba(212,91,80,.30),0 0 0 10px rgba(255,255,255,.20);
}

/* Modern section separators - lines instead of boxes everywhere. */
.bm-home-section:not(.bm-hero-section):not(.bm-competition-section)::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  width: min(72vw,900px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,transparent,rgba(16,42,58,.055),transparent);
  pointer-events: none;
}

/* Cards become cleaner and less "soft box" heavy. */
.bm-flow-card,
.bm-start-card,
.bm-session-card,
.bm-equipment-card,
.bm-instructor-card {
  border-color: rgba(16,42,58,.075) !important;
  box-shadow: 0 28px 85px rgba(16,42,58,.075) !important;
}
.bm-flow-card,
.bm-session-card,
.bm-equipment-card {
  position: relative;
}
.bm-flow-card::before,
.bm-session-card::before,
.bm-equipment-card::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 1px;
  background: var(--bm-jade);
  opacity: .6;
}
.bm-flow-card::before { top: 28px; right: 34px; }
.bm-session-card::before { top: 30px; left: 34px; }
.bm-equipment-card::after { right: 34px; bottom: 30px; }

/* Modern asymmetry through offset edges. */
.bm-flow-card { border-radius: 28px 28px 68px 28px !important; }
.bm-start-card { border-radius: 30px 76px 30px 30px !important; }
.bm-session-card { border-radius: 30px 30px 30px 74px !important; }
.bm-equipment-card { border-radius: 74px 30px 30px 30px !important; }
.bm-instructor-card:nth-child(odd) { border-radius: 26px 56px 26px 26px !important; }
.bm-instructor-card:nth-child(even) { border-radius: 56px 26px 26px 26px !important; }

/* Kicker / heading hierarchy becomes more editorial. */
.bm-kicker { color: #b94e47; }
.bm-kicker::before { width: 36px; background: linear-gradient(90deg,var(--bm-jade),currentColor); }
.bm-section-title { letter-spacing: -.058em; }
.bm-section-lead { color: #486271; }

/* First-session modularity strengthened with a graphic top rule. */
.bm-step {
  overflow: hidden;
  border-color: rgba(16,42,58,.07) !important;
}
.bm-step::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(.22);
  transform-origin: left;
  background: linear-gradient(90deg,var(--bm-jade),var(--bm-red));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.bm-step:hover::after { transform: scaleX(1); }
.bm-step-number { color: #b94e47; }

/* Benefit chips get alternating micro-accent lines. */
.bm-benefit-chip { position: relative; overflow: hidden; }
.bm-benefit-chip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bm-jade);
  opacity: .45;
}
.bm-benefit-chip:nth-child(3n+2)::before { background: var(--bm-red); }
.bm-benefit-chip:nth-child(3n)::before { background: #c4a56f; }

/* Competition: sharper, more digital/editorial without losing atmosphere. */
.bm-competition-section {
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/84px 84px,
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/84px 84px,
    radial-gradient(circle at 84% 22%,rgba(212,91,80,.22),transparent 22rem),
    radial-gradient(circle at 14% 82%,rgba(111,158,152,.13),transparent 28rem),
    linear-gradient(145deg,#0d2636,#163c52 58%,#0d2332) !important;
}
.bm-competition-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -4%;
  top: 14%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(219,234,231,.4),transparent);
  transform: rotate(-7deg);
}

/* FAQ feels more app-modern while remaining editorial. */
.bm-faq-section details {
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(111,158,152,.2);
}
.bm-faq-section details::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 0;
  background: linear-gradient(var(--bm-jade),var(--bm-red));
  transition: height .4s ease;
}
.bm-faq-section details[open]::before { height: 100%; }

/* Final CTA: cleaner contemporary halo and cross-lines. */
.bm-final-cta {
  background:
    radial-gradient(circle at center,rgba(111,158,152,.17),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.32)) !important;
}
.bm-final-cta .bm-section-inner::before,
.bm-final-cta .bm-section-inner::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(111,158,152,.26),transparent);
}
.bm-final-cta .bm-section-inner::before {
  width: 58%; height: 1px; left: 21%; top: -3rem;
}
.bm-final-cta .bm-section-inner::after {
  width: 1px; height: 115px; left: 50%; top: -6rem;
  background: linear-gradient(180deg,transparent,rgba(212,91,80,.22),transparent);
}

/* Kinetic classes driven by modern-lines.js. */
.bm-kinetic-float { animation: bm-plus-float var(--bm-float-duration,8s) ease-in-out infinite alternate; }
.bm-kinetic-drift { animation: bm-plus-drift var(--bm-drift-duration,15s) ease-in-out infinite alternate; }
.bm-kinetic-pulse { animation: bm-plus-pulse 6s ease-in-out infinite; }

@keyframes bm-plus-float {
  0% { translate: 0 0; rotate: 0deg; }
  100% { translate: var(--bm-float-x,12px) var(--bm-float-y,-15px); rotate: var(--bm-float-r,2deg); }
}
@keyframes bm-plus-drift {
  0% { transform: translate3d(var(--bm-line-x,0),var(--bm-line-y,0),0) rotate(var(--bm-line-rot,0deg)); }
  100% { transform: translate3d(calc(var(--bm-line-x,0) + 28px),calc(var(--bm-line-y,0) - 12px),0) rotate(calc(var(--bm-line-rot,0deg) + 2deg)); }
}
@keyframes bm-plus-pulse {
  0%,100% { opacity: .35; scale: 1; }
  50% { opacity: .72; scale: 1.035; }
}

@media (max-width: 900px) {
  .bm-modern-line { width: min(58vw,480px); opacity: .45; }
  .bm-modern-ring { --bm-ring-size: 110px; opacity: .65; }
  .bm-hero-section::before { display: none; }
  .bm-hero-title { font-size: clamp(3.4rem,11vw,6.2rem); }
}

@media (max-width: 600px) {
  .bm-modern-line { width: 72vw; opacity: .30; }
  .bm-modern-line--vertical { height: 170px; }
  .bm-modern-ring { --bm-ring-size: 86px; opacity: .45; }
  .bm-hero-copy::after { width: 110px; margin-top: 1.6rem; }
  .bm-flow-card,
  .bm-start-card,
  .bm-session-card,
  .bm-equipment-card { border-radius: 24px 24px 42px 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-kinetic-float,.bm-kinetic-drift,.bm-kinetic-pulse { animation: none !important; }
}