/* HERO - THEME 6: BRUTALIST IMPACT */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap');

.ebhro5-hero {
  /* ===============================
     COLORS
  =============================== */
  --ebhro5-bg-color: #f0ece4;

  --ebhro5-atmos-line-bg: #0a0a0a;
  --ebhro5-atmos-blob-bg: #ff4400;
  --ebhro5-atmos-stripe-color: rgba(0, 0, 0, 0.008);

  --ebhro5-layout-border-color: #0a0a0a;
  --ebhro5-layout-bg: #ffffff;
  --ebhro5-layout-shadow-color: #0a0a0a;

  --ebhro5-title-color: #0a0a0a;
  --ebhro5-desc-color: rgba(10, 10, 10, .25);
  --ebhro5-badge-bg: #ff4400;
  --ebhro5-badge-color: #ffffff;
  --ebhro5-badge-border-color: #0a0a0a;
  --ebhro5-hl-color: #ff4400;
  --ebhro5-count-color: rgba(10, 10, 10, 0.02);

  --ebhro5-stats-bg: #f0ece4;
  --ebhro5-stats-border-color: #0a0a0a;
  --ebhro5-stat-border-left-color: #0a0a0a;
  --ebhro5-num-color: #0a0a0a;
  --ebhro5-sp-color: #ff4400;
  --ebhro5-sl-color: rgba(10, 10, 10, .25);

  --ebhro5-btn-border-color: #0a0a0a;
  --ebhro5-btn-hover-shadow-color: #0a0a0a;
  --ebhro5-btn-primary-bg: #ff4400;
  --ebhro5-btn-primary-color: #ffffff;
  --ebhro5-btn-primary-border-color: #ff4400;
  --ebhro5-btn-secondary-bg: transparent;
  --ebhro5-btn-secondary-color: #0a0a0a;
  --ebhro5-btn-secondary-hover-bg: #0a0a0a;
  --ebhro5-btn-secondary-hover-color: #ffffff;

  --ebhro5-arrow-bg: #ffffff;
  --ebhro5-arrow-border-color: #0a0a0a;
  --ebhro5-arrow-color: #0a0a0a;
  --ebhro5-arrow-hover-shadow-color: #0a0a0a;

  --ebhro5-dot-bg: transparent;
  --ebhro5-dot-border-color: #0a0a0a;
  --ebhro5-dot-active-bg: #ff4400;
  --ebhro5-dot-active-border-color: #ff4400;

  --ebhro5-progress-bg: rgba(10, 10, 10, 0.02);
  --ebhro5-progress-bar-bg: #ff4400;

  /* ===============================
     ATMOSPHERE
  =============================== */
  --ebhro5-atmos-line-height: 40px;
  --ebhro5-atmos-line-opacity: .015;
  --ebhro5-atmos-line-skew: -3deg;
  --ebhro5-atmos-line-top: 45%;
  --ebhro5-atmos-line-animation-duration: 6s;

  --ebhro5-atmos-blob-size: 50px;
  --ebhro5-atmos-blob-opacity: .04;
  --ebhro5-atmos-blob-bottom: 25%;
  --ebhro5-atmos-blob-right: 15%;
  --ebhro5-atmos-blob-animation-duration: 4s;

  --ebhro5-atmos-stripe-angle: 90deg;
  --ebhro5-atmos-stripe-width: 3px;
  --ebhro5-atmos-stripe-gap: 100px;
  --ebhro5-atmos-stripe-animation-duration: 8s;

  /* ===============================
     TYPOGRAPHY
  =============================== */
  --ebhro5-font-family: 'El Messiri', sans-serif;

  --ebhro5-title-font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  --ebhro5-title-font-weight: 700;
  --ebhro5-title-line-height: 1;
  --ebhro5-title-letter-spacing: -.02em;
  --ebhro5-title-text-transform: uppercase;

  --ebhro5-desc-font-size: .85rem;
  --ebhro5-desc-line-height: 1.6;
  --ebhro5-desc-max-width: 450px;

  --ebhro5-badge-gap: .4rem;
  --ebhro5-badge-padding: .1rem .7rem;
  --ebhro5-badge-font-size: .65rem;
  --ebhro5-badge-font-weight: 700;
  --ebhro5-badge-border-width: 3px;

  --ebhro5-count-font-size: clamp(4rem, 10vw, 6rem);
  --ebhro5-count-font-weight: 700;
  --ebhro5-count-line-height: 1;
  --ebhro5-count-letter-spacing: -2px;
  --ebhro5-count-bottom: -5px;
  --ebhro5-count-right: 10px;

  --ebhro5-num-font-size: 1.4rem;
  --ebhro5-num-font-weight: 700;

  --ebhro5-sp-font-size: .8rem;
  --ebhro5-sp-font-weight: 700;

  --ebhro5-sl-font-size: .5rem;
  --ebhro5-sl-font-weight: 700;
  --ebhro5-sl-letter-spacing: .5px;

  /* ===============================
     LAYOUT
  =============================== */
  --ebhro5-stage-max-width: 1200px;
  --ebhro5-stage-padding: 4rem 2rem;
  --ebhro5-stage-padding-mobile: 5rem 1rem 2rem;
  --ebhro5-hero-min-height: 100vh;
  --ebhro5-inset-zero: 0;
  --ebhro5-pos-zero: 0;
  --ebhro5-opacity-zero: 0;
  --ebhro5-opacity-one: 1;
  --ebhro5-width-full: 100%;
  --ebhro5-height-full: 100%;
  --ebhro5-margin-auto: 0 auto;
  --ebhro5-z-atmos: 0;
  --ebhro5-z-grid: 0;
  --ebhro5-z-stage: 3;
  --ebhro5-z-layout: 2;
  --ebhro5-z-content: 2;
  --ebhro5-z-nav: 10;
  --ebhro5-z-progress: 10;

  --ebhro5-layout-padding: 2rem;
  --ebhro5-layout-gap: 1.5rem;
  --ebhro5-layout-grid-template-columns: 1fr;
  --ebhro5-layout-border-width: 5px;
  --ebhro5-layout-shadow-offset: 10px;
  --ebhro5-layout-shadow-offset-mobile: 6px;
  --ebhro5-layout-shadow-blur: 0;

  --ebhro5-content-gap: 1.2rem;
  --ebhro5-content-translate-y: 10px;
  --ebhro5-content-translate-zero: 0;

  /* ===============================
     STATS
  =============================== */
  --ebhro5-stats-gap: 0;
  --ebhro5-stats-border-width: 4px;

  --ebhro5-stat-gap: 0;
  --ebhro5-stat-padding: .5rem .8rem;
  --ebhro5-stat-border-left-width: 3px;

  /* ===============================
     BUTTONS
  =============================== */
  --ebhro5-btns-gap: .5rem;

  --ebhro5-btn-padding: .5rem 1.4rem;
  --ebhro5-btn-font-size: .75rem;
  --ebhro5-btn-font-weight: 700;
  --ebhro5-btn-gap: .4rem;
  --ebhro5-btn-border-width: 4px;
  --ebhro5-btn-hover-translate-x: 3px;
  --ebhro5-btn-hover-translate-y: -3px;
  --ebhro5-btn-hover-shadow-offset: -4px;
  --ebhro5-btn-hover-shadow-blur: 0;
  --ebhro5-btn-transition-duration: .1s;
  --ebhro5-btn-transition-easing: ease;
  --ebhro5-btn-text-transform: uppercase;

  /* ===============================
     NAVIGATION
  =============================== */
  --ebhro5-nav-gap: 1rem;
  --ebhro5-nav-padding: 1.5rem 2rem 2rem;

  --ebhro5-arrow-size: 38px;
  --ebhro5-arrow-border-width: 4px;
  --ebhro5-arrow-font-size: .8rem;
  --ebhro5-arrow-hover-translate-x: 3px;
  --ebhro5-arrow-hover-translate-y: -3px;
  --ebhro5-arrow-hover-shadow-offset: -4px;
  --ebhro5-arrow-hover-shadow-blur: 0;
  --ebhro5-arrow-transition-duration: .1s;
  --ebhro5-arrow-transition-easing: ease;

  --ebhro5-indicators-gap: .2rem;

  --ebhro5-dot-size: 15px;
  --ebhro5-dot-border-width: 4px;
  --ebhro5-dot-transition-duration: .1s;
  --ebhro5-dot-transition-easing: ease;

  /* ===============================
     PROGRESS
  =============================== */
  --ebhro5-progress-height: 5px;
  --ebhro5-progress-bar-width: 0%;

  /* ===============================
     ANIMATIONS & TRANSITIONS
  =============================== */
  --ebhro5-ease: cubic-bezier(.4, 0, .2, 1);
  --ebhro5-transition-duration: .4s;
  --ebhro5-transition-delay: .05s;
  --ebhro5-slide-in-duration: .5s;
  --ebhro5-slide-out-duration: .3s;
  --ebhro5-animation-timing: ease-in-out;
  --ebhro5-animation-timing-linear: linear;
  --ebhro5-animation-iteration: infinite;

  /* ===============================
     KEYFRAME VALUES
  =============================== */
  --ebhro5-struct-line-translate-rest: 0;
  --ebhro5-struct-line-translate-mid: -8px;
  --ebhro5-struct-line-opacity-rest: .015;
  --ebhro5-struct-line-opacity-mid: .025;

  --ebhro5-struct-blob-scale-rest: 1;
  --ebhro5-struct-blob-scale-mid: 1.3;
  --ebhro5-struct-blob-opacity-rest: .04;
  --ebhro5-struct-blob-opacity-mid: .06;

  --ebhro5-struct-stripe-bg-pos-rest: 0 0;
  --ebhro5-struct-stripe-bg-pos-mid: 20px 0;
  --ebhro5-struct-stripe-opacity-rest: .4;
  --ebhro5-struct-stripe-opacity-mid: .7;

  --ebhro5-s6in-transform-rest: translateX(-30px) scale(.98);
  --ebhro5-s6in-transform-end: translateX(0) scale(1);
  --ebhro5-s6out-transform-end: translateX(30px);

  /* ===============================
     PREFERS-REDUCED-MOTION
  =============================== */
  --ebhro5-atmos-reduced-opacity: .02;
  --ebhro5-grid-reduced-opacity: .3;

  /* ===============================
     EBAR (theme switcher variables)
  =============================== */
  --ebar-c1: #ff4400;
  --ebar-c2: #0a0a0a;
  --ebar-c3: #ffffff;

  /* ===============================
     COMPONENT STYLES
  =============================== */
  position: relative;
  min-height: var(--ebhro5-hero-min-height);
  background: var(--ebhro5-bg-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  font-family: var(--ebhro5-font-family);
  direction: rtl;
}

/* ===============================
   ATMOSPHERE
=============================== */
.ebhro5-atmos {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  pointer-events: none;
  z-index: var(--ebhro5-z-atmos);
  overflow: hidden;
}

.ebhro5-atmos::before {
  content: '';
  position: absolute;
  width: var(--ebhro5-width-full);
  height: var(--ebhro5-atmos-line-height);
  background: var(--ebhro5-atmos-line-bg);
  top: var(--ebhro5-atmos-line-top);
  transform: skewY(var(--ebhro5-atmos-line-skew));
  opacity: var(--ebhro5-atmos-line-opacity);
  animation: eb5-struct-line var(--ebhro5-atmos-line-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-atmos::after {
  content: '';
  position: absolute;
  width: var(--ebhro5-atmos-blob-size);
  height: var(--ebhro5-atmos-blob-size);
  background: var(--ebhro5-atmos-blob-bg);
  opacity: var(--ebhro5-atmos-blob-opacity);
  bottom: var(--ebhro5-atmos-blob-bottom);
  right: var(--ebhro5-atmos-blob-right);
  animation: eb5-struct-blob var(--ebhro5-atmos-blob-animation-duration) var(--ebhro5-animation-timing) var(--ebhro5-animation-iteration);
}

.ebhro5-atmos-orb {
  display: none;
}

.ebhro5-particles {
  display: none;
}

@keyframes eb5-struct-line {
  0%, 100% { transform: skewY(var(--ebhro5-atmos-line-skew)) translateY(var(--ebhro5-struct-line-translate-rest)); opacity: var(--ebhro5-struct-line-opacity-rest) }
  50% { transform: skewY(var(--ebhro5-atmos-line-skew)) translateY(var(--ebhro5-struct-line-translate-mid)); opacity: var(--ebhro5-struct-line-opacity-mid) }
}

@keyframes eb5-struct-blob {
  0%, 100% { transform: scale(var(--ebhro5-struct-blob-scale-rest)); opacity: var(--ebhro5-struct-blob-opacity-rest) }
  50% { transform: scale(var(--ebhro5-struct-blob-scale-mid)); opacity: var(--ebhro5-struct-blob-opacity-mid) }
}

/* Structural grid */
.ebhro5-atmos-grid {
  position: absolute;
  inset: var(--ebhro5-inset-zero);
  pointer-events: none;
  z-index: var(--ebhro5-z-grid);
  background-image:
    repeating-linear-gradient(var(--ebhro5-atmos-stripe-angle), transparent, transparent var(--ebhro5-atmos-stripe-gap),
      var(--ebhro5-atmos-stripe-color) var(--ebhro5-atmos-stripe-gap),
      var(--ebhro5-atmos-stripe-color) calc(var(--ebhro5-atmos-stripe-gap) + var(--ebhro5-atmos-stripe-width)));
  animation: eb5-struct-stripe var(--ebhro5-atmos-stripe-animation-duration) var(--ebhro5-animation-timing-linear) var(--ebhro5-animation-iteration);
}

@keyframes eb5-struct-stripe {
  0%, 100% { background-position: var(--ebhro5-struct-stripe-bg-pos-rest); opacity: var(--ebhro5-struct-stripe-opacity-rest) }
  50% { background-position: var(--ebhro5-struct-stripe-bg-pos-mid); opacity: var(--ebhro5-struct-stripe-opacity-mid) }
}

/* ===============================
   STAGE
=============================== */
.ebhro5-stage {
  position: relative;
  z-index: var(--ebhro5-z-stage);
  width: var(--ebhro5-width-full);
  max-width: var(--ebhro5-stage-max-width);
  margin: var(--ebhro5-margin-auto);
  padding: var(--ebhro5-stage-padding);
}

/* ===============================
   SLIDE
=============================== */
.ebhro5-slide {
  display: none;
}

.ebhro5-slide.ebhro5-active {
  display: block;
  animation: eb5-s6in var(--ebhro5-slide-in-duration) var(--ebhro5-ease) both;
}

.ebhro5-slide.ebhro5-prev {
  display: block;
  position: absolute;
  top: var(--ebhro5-pos-zero);
  left: var(--ebhro5-pos-zero);
  right: var(--ebhro5-pos-zero);
  animation: eb5-s6out var(--ebhro5-slide-out-duration) var(--ebhro5-ease) both;
}

@keyframes eb5-s6in {
  0% { opacity: var(--ebhro5-opacity-zero); transform: var(--ebhro5-s6in-transform-rest) }
  100% { opacity: var(--ebhro5-opacity-one); transform: var(--ebhro5-s6in-transform-end) }
}

@keyframes eb5-s6out {
  0% { opacity: var(--ebhro5-opacity-one) }
  100% { opacity: var(--ebhro5-opacity-zero); transform: var(--ebhro5-s6out-transform-end) }
}

.ebhro5-slide-bg {
  display: none;
}

/* ===============================
   LAYOUT
=============================== */
.ebhro5-layout {
  display: grid;
  grid-template-columns: var(--ebhro5-layout-grid-template-columns);
  gap: var(--ebhro5-layout-gap);
  position: relative;
  z-index: var(--ebhro5-z-layout);
  padding: var(--ebhro5-layout-padding);
  border: var(--ebhro5-layout-border-width) solid var(--ebhro5-layout-border-color);
  background: var(--ebhro5-layout-bg);
  box-shadow: var(--ebhro5-layout-shadow-offset) var(--ebhro5-layout-shadow-offset) var(--ebhro5-layout-shadow-blur) var(--ebhro5-layout-shadow-color);
}

@media (max-width: 900px) {
  .ebhro5-layout { text-align: center; }
}

/* ===============================
   COUNT
=============================== */
.ebhro5-count {
  position: absolute;
  bottom: var(--ebhro5-count-bottom);
  right: var(--ebhro5-count-right);
  font-size: var(--ebhro5-count-font-size);
  font-weight: var(--ebhro5-count-font-weight);
  color: var(--ebhro5-count-color);
  line-height: var(--ebhro5-count-line-height);
  pointer-events: none;
  letter-spacing: var(--ebhro5-count-letter-spacing);
}

/* ===============================
   CONTENT
=============================== */
.ebhro5-content {
  display: flex;
  flex-direction: column;
  gap: var(--ebhro5-content-gap);
  position: relative;
  z-index: var(--ebhro5-z-content);
  opacity: var(--ebhro5-opacity-zero);
  transform: translateY(var(--ebhro5-content-translate-y));
  transition: opacity var(--ebhro5-transition-duration) var(--ebhro5-ease), transform var(--ebhro5-transition-duration) var(--ebhro5-ease);
  transition-delay: var(--ebhro5-transition-delay);
}

.ebhro5-in {
  opacity: var(--ebhro5-opacity-one) !important;
  transform: translateY(var(--ebhro5-content-translate-zero)) !important;
}

/* ===============================
   BADGE
=============================== */
.ebhro5-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ebhro5-badge-gap);
  padding: var(--ebhro5-badge-padding);
  background: var(--ebhro5-badge-bg);
  color: var(--ebhro5-badge-color);
  font-size: var(--ebhro5-badge-font-size);
  font-weight: var(--ebhro5-badge-font-weight);
  width: fit-content;
  border: var(--ebhro5-badge-border-width) solid var(--ebhro5-badge-border-color);
}

.ebhro5-badge i {
  display: none;
}

@media (max-width: 900px) {
  .ebhro5-badge { margin: var(--ebhro5-margin-auto); }
}

/* ===============================
   TITLE
=============================== */
.ebhro5-title {
  font-size: var(--ebhro5-title-font-size);
  font-weight: var(--ebhro5-title-font-weight);
  color: var(--ebhro5-title-color);
  line-height: var(--ebhro5-title-line-height);
  letter-spacing: var(--ebhro5-title-letter-spacing);
  text-transform: var(--ebhro5-title-text-transform);
}

.ebhro5-hl {
  color: var(--ebhro5-hl-color);
  -webkit-text-fill-color: var(--ebhro5-hl-color);
  display: inline;
}

/* ===============================
   DESCRIPTION
=============================== */
.ebhro5-desc {
  font-size: var(--ebhro5-desc-font-size);
  line-height: var(--ebhro5-desc-line-height);
  color: var(--ebhro5-desc-color);
  max-width: var(--ebhro5-desc-max-width);
}

@media (max-width: 900px) {
  .ebhro5-desc { margin: var(--ebhro5-margin-auto); }
}

/* ===============================
   STATS
=============================== */
.ebhro5-stats {
  display: flex;
  gap: var(--ebhro5-stats-gap);
  border: var(--ebhro5-stats-border-width) solid var(--ebhro5-stats-border-color);
  width: fit-content;
  background: var(--ebhro5-stats-bg);
}

@media (max-width: 900px) {
  .ebhro5-stats { margin: var(--ebhro5-margin-auto); }
}

@media (max-width: 480px) {
  .ebhro5-stats { flex-wrap: wrap; }
}

.ebhro5-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ebhro5-stat-gap);
  padding: var(--ebhro5-stat-padding);
  border-left: var(--ebhro5-stat-border-left-width) solid var(--ebhro5-stat-border-left-color);
}

.ebhro5-stat:last-child {
  border-left: none;
}

.ebhro5-num {
  font-size: var(--ebhro5-num-font-size);
  font-weight: var(--ebhro5-num-font-weight);
  color: var(--ebhro5-num-color);
}

.ebhro5-sp {
  font-size: var(--ebhro5-sp-font-size);
  font-weight: var(--ebhro5-sp-font-weight);
  color: var(--ebhro5-sp-color);
}

.ebhro5-sl {
  font-size: var(--ebhro5-sl-font-size);
  color: var(--ebhro5-sl-color);
  font-weight: var(--ebhro5-sl-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--ebhro5-sl-letter-spacing);
}

.ebhro5-stat-sep {
  display: none;
}

/* ===============================
   BUTTONS
=============================== */
.ebhro5-btns {
  display: flex;
  gap: var(--ebhro5-btns-gap);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .ebhro5-btns { justify-content: center; }
}

.ebhro5-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ebhro5-btn-gap);
  padding: var(--ebhro5-btn-padding);
  font-family: var(--ebhro5-font-family);
  font-size: var(--ebhro5-btn-font-size);
  font-weight: var(--ebhro5-btn-font-weight);
  text-decoration: none;
  cursor: pointer;
  border: var(--ebhro5-btn-border-width) solid var(--ebhro5-btn-border-color);
  transition: all var(--ebhro5-btn-transition-duration) var(--ebhro5-btn-transition-easing);
  text-transform: var(--ebhro5-btn-text-transform);
}

.ebhro5-btn:hover {
  transform: translate(var(--ebhro5-btn-hover-translate-x), var(--ebhro5-btn-hover-translate-y));
  box-shadow: var(--ebhro5-btn-hover-shadow-offset) var(--ebhro5-btn-hover-translate-y) var(--ebhro5-btn-hover-shadow-blur) var(--ebhro5-btn-hover-shadow-color);
}

.ebhro5-btn-pri {
  background: var(--ebhro5-btn-primary-bg);
  color: var(--ebhro5-btn-primary-color);
  border-color: var(--ebhro5-btn-primary-border-color);
}

.ebhro5-btn-sec {
  background: var(--ebhro5-btn-secondary-bg);
  color: var(--ebhro5-btn-secondary-color);
}

.ebhro5-btn-sec:hover {
  background: var(--ebhro5-btn-secondary-hover-bg);
  color: var(--ebhro5-btn-secondary-hover-color);
}

/* ===============================
   NAVIGATION
=============================== */
.ebhro5-nav {
  position: relative;
  z-index: var(--ebhro5-z-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ebhro5-nav-gap);
  padding: var(--ebhro5-nav-padding);
}

.ebhro5-arrow {
  width: var(--ebhro5-arrow-size);
  height: var(--ebhro5-arrow-size);
  background: var(--ebhro5-arrow-bg);
  border: var(--ebhro5-arrow-border-width) solid var(--ebhro5-arrow-border-color);
  color: var(--ebhro5-arrow-color);
  font-size: var(--ebhro5-arrow-font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ebhro5-arrow-transition-duration) var(--ebhro5-arrow-transition-easing);
}

.ebhro5-arrow:hover {
  transform: translate(var(--ebhro5-arrow-hover-translate-x), var(--ebhro5-arrow-hover-translate-y));
  box-shadow: var(--ebhro5-arrow-hover-shadow-offset) var(--ebhro5-arrow-hover-translate-y) var(--ebhro5-arrow-hover-shadow-blur) var(--ebhro5-arrow-hover-shadow-color);
}

.ebhro5-indicators {
  display: flex;
  gap: var(--ebhro5-indicators-gap);
}

.ebhro5-dot {
  width: var(--ebhro5-dot-size);
  height: var(--ebhro5-dot-size);
  background: var(--ebhro5-dot-bg);
  border: var(--ebhro5-dot-border-width) solid var(--ebhro5-dot-border-color);
  cursor: pointer;
  transition: all var(--ebhro5-dot-transition-duration) var(--ebhro5-dot-transition-easing);
}

.ebhro5-dot.ebhro5-active {
  background: var(--ebhro5-dot-active-bg);
  border-color: var(--ebhro5-dot-active-border-color);
}

/* ===============================
   PROGRESS
=============================== */
.ebhro5-progress {
  position: absolute;
  bottom: var(--ebhro5-pos-zero);
  left: var(--ebhro5-pos-zero);
  right: var(--ebhro5-pos-zero);
  height: var(--ebhro5-progress-height);
  z-index: var(--ebhro5-z-progress);
  background: var(--ebhro5-progress-bg);
}

.ebhro5-progress-bar {
  height: var(--ebhro5-height-full);
  width: var(--ebhro5-progress-bar-width);
  background: var(--ebhro5-progress-bar-bg);
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 768px) {
  .ebhro5-stage { padding: var(--ebhro5-stage-padding-mobile); }
  .ebhro5-layout { box-shadow: var(--ebhro5-layout-shadow-offset-mobile) var(--ebhro5-layout-shadow-offset-mobile) var(--ebhro5-layout-shadow-blur) var(--ebhro5-layout-shadow-color); }
}

@media (prefers-reduced-motion: reduce) {
  .ebhro5-atmos::before,
  .ebhro5-atmos::after {
    animation: none;
    opacity: var(--ebhro5-atmos-reduced-opacity);
  }
  .ebhro5-atmos-grid {
    animation: none;
    opacity: var(--ebhro5-grid-reduced-opacity);
  }
}