@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.marker-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.big-text {
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 800;
  color: #000;
  width: 100%;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.second-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 800;
  color: #000;
  width: 100%;
  justify-content: space-between;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

[data-theme="dark"] .big-text,
[data-theme="dark"] .second-line > span:not(.marker-text) {
  color: #fff;
}

.second-line > span:not(.marker-text) {
  color: #000;
}

.marker-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #fff;
  font-weight: 900;
}

.marker-text::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  height: 100%;
  background: #2563EB;
  z-index: -1;
  transform: skew(-12deg) rotate(-2deg);
}

[data-theme="dark"] .marker-text::before {
  background: #2563EB;
}

/* Смещение EHODI влево для английского языка */
html[lang="en"] .marker-text {
  position: relative;
  left: -25px;
}

/* Альтернативный селектор на случай если lang меняется по-другому */
[data-lang="en"] .marker-text,
.lang-en .marker-text {
  position: relative;
  left: -25px;
}