/* ===== HERO (hrx) — независимые классы, Inter/800, контейнер 1200 ===== */
.hrx{
  /* локальные переменные, без :root */
  --hrx-container:1200px;
  --hrx-switch:6s;                         /* время показа одного слайда */
  --hrx-dur:calc(var(--hrx-switch) * 4);   /* общий цикл */
  --hrx-overlay:linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.35) 100%);
  --hrx-btn:var(--rg-accent); --hrx-btn-hover:var(--rg-accent-hover);

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff; position:relative; min-height:80vh; overflow:hidden; isolation:isolate;

  /* full‑bleed без влияния на глобальные стили */
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.hrx *,.hrx *::before,.hrx *::after{box-sizing:border-box}

.hrx__inner{
  max-width:var(--hrx-container);
  margin:0 auto;
  min-height:80vh;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 430px);
  align-items:center;
  gap:clamp(24px, 4.2vw, 72px);
  padding:0 var(--page-gutter,16px);
  position:relative;
  z-index:2;
}
.hrx__content{max-width:760px}

.hrx__title{margin:0 0 18px;line-height:1.08;letter-spacing:.2px;
  font-size:clamp(2rem,5.1vw,3.6rem);font-weight:800}
.hrx__title-line{display:block}
.hrx__title-outline{
  display:block;color:transparent;font-weight:800;
  -webkit-text-stroke:2px rgba(255,255,255,.85); text-stroke:2px rgba(255,255,255,.85);
}

@media (min-width: 1440px){
  .hrx__content{
    max-width: 760px;
  }

  .hrx__title-outline{
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
  }

  .hrx__title-outline br{
    display: none;
  }
}
.hrx__sub{max-width:540px;margin:14px 0 28px;line-height:1.6;color:#e6e6e6;font-size:1.125rem}
.hrx__btn{
  display:inline-block;background:var(--hrx-btn);color:#fff;font-weight:800;
  padding:14px 20px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px;
  box-shadow:0 12px 28px rgba(0,0,0,.28);text-decoration:none;transition:.2s}
.hrx__btn:hover{background:var(--hrx-btn-hover)}

.hrx__title.hrx__title--single{
  max-width: 840px;
  line-height: 1.15;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
}

.hrx__benefits{
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 680px;
}

.hrx__benefit{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #f4f7fa;
  font-size: 1.03rem;
  line-height: 1.45;
}

.hrx__benefit i{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,97,59,.95), rgba(255,146,47,.95));
  box-shadow: 0 10px 24px rgba(255,125,72,.35);
}

.hrx__actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hrx__actions .hrx__btn{
  text-transform: none;
  letter-spacing: .1px;
  border-radius: 12px;
  padding: 14px 22px;
  font-size: 0.98rem;
  line-height: 1.2;
  border: 1px solid transparent;
}

.hrx__btn--primary{
  background: linear-gradient(135deg, #ff6f3d 0%, #ff9a2f 100%);
  box-shadow: 0 14px 32px rgba(255,117,54,.34);
}

.hrx__btn--primary:hover{
  background: linear-gradient(135deg, #ff6330 0%, #ff8e23 100%);
  transform: translateY(-1px);
}

.hrx__btn--secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.hrx__btn--secondary:hover{
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.75);
  transform: translateY(-1px);
}

.hrx__metric-stack{
  width:min(430px, 100%);
  justify-self:end;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-template-rows:auto auto;
  gap:16px;
  align-items:start;
}

.hrx__metric-card{
  background:rgba(255,255,255,.96);
  color:#171827;
  border-radius:26px;
  padding:18px 16px;
  box-shadow:0 24px 52px rgba(8,12,38,.36);
  border:1px solid rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}

.hrx__metric-card--leads{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  min-height:292px;
  justify-content:space-between;
}

.hrx__metric-card--cpl{
  grid-column:2;
  grid-row:1;
  min-height:190px;
}

.hrx__metric-card--romi{
  grid-column:2;
  grid-row:2;
  min-height:190px;
}

.hrx__metric-title{
  margin:0;
  font-size:1rem;
  line-height:1.2;
  font-weight:700;
  color:#1d1f33;
}

.hrx__metric-value{
  margin:0;
  font-size:2rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
  color:#4235c9;
}

.hrx__metric-value--small{
  font-size:1.55rem;
}

.hrx__metric-desc{
  margin:0;
  font-size:.86rem;
  line-height:1.35;
  color:#6a6e83;
}

.hrx__metric-foot{
  margin:0;
  font-size:.82rem;
  line-height:1.3;
  color:#70758d;
}

.hrx__metric-viz{
  margin-top:2px;
}

.hrx__metric-viz--line svg{
  width:100%;
  height:72px;
  display:block;
}

.hrx__metric-viz--line path:first-child{
  stroke:rgba(68,72,95,.18);
  stroke-width:1.6;
}

.hrx__metric-viz--line path:last-child{
  stroke:#5c4ae0;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 6px 8px rgba(92,74,224,.24));
}

.hrx__metric-ring{
  --p:78%;
  width:112px;
  height:112px;
  margin:2px auto 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 59%),
    conic-gradient(#5c4ae0 var(--p), #e9eaf4 0);
  box-shadow:inset 0 0 0 1px rgba(85,90,119,.12);
}

.hrx__metric-ring span{
  font-size:1.32rem;
  font-weight:800;
  color:#2c2f45;
}

.hrx__metric-bars{
  margin-top:6px;
  min-height:68px;
  padding:0 2px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  align-items:end;
  gap:7px;
}

.hrx__metric-bars span{
  display:block;
  height:var(--h);
  border-radius:999px;
  background:linear-gradient(180deg, #6f61f0 0%, #5240d1 100%);
  box-shadow:0 6px 10px rgba(82,64,209,.22);
}

@media (max-width:1200px){
  .hrx__inner{
    grid-template-columns:minmax(0, 1fr) minmax(292px, 372px);
    gap:20px;
  }
  .hrx__metric-stack{
    width:100%;
    gap:12px;
  }
  .hrx__metric-card{
    border-radius:22px;
    padding:14px 13px;
  }
  .hrx__metric-card--leads{
    min-height:258px;
  }
  .hrx__metric-card--cpl,
  .hrx__metric-card--romi{
    min-height:170px;
  }
}

@media (max-width:1024px){
  .hrx__inner{
    grid-template-columns:1fr;
  }
  .hrx__content{
    max-width:700px;
  }
  .hrx__metric-stack{
    display:none;
  }
}

/* Фон и анимация */
.hrx__bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hrx__bg::after{content:"";position:absolute;inset:0;background:var(--hrx-overlay)}
.hrx__slide{
  position:absolute;inset:0;opacity:0;
  background-image:var(--hrx-img);background-size:cover;background-position:center;
  transform:scale(1.06);
  animation:hrx-fadeZoom var(--hrx-dur) linear infinite;
  animation-delay:calc(var(--hrx-i) * var(--hrx-switch));
  will-change:opacity,transform;
}
@keyframes hrx-fadeZoom{
  0%{opacity:0;transform:scale(1.08)}
  4%{opacity:1}
  21%{opacity:1;transform:scale(1.00)}
  25%{opacity:0}
  100%{opacity:0;transform:scale(1.00)}
}

/* Опциональная компенсация WP admin-bar только для этого блока */
body.admin-bar .hrx{margin-top:-32px}
@media (max-width:782px){ body.admin-bar .hrx{margin-top:-46px} }

/* Адаптив */
@media (max-width:780px){
  .hrx{min-height:72vh}
  .hrx__inner{min-height:72vh}
  .hrx__title{font-size:clamp(1.9rem,8vw,3.4rem)}
  .hrx__sub{margin:10px 0 22px}
}
/* HERO (hrx): ужимаем мобильную высоту, усиливаем читабельность */
@media (max-width: 780px){
  /* ниже блок + удобочитаемость текста */
  .hrx, .hrx__inner { min-height: 64vh; }                 /* было 72vh */
  .hrx__bg::after{                                        /* сильнее оверлей */
    background: linear-gradient(90deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.25) 100%);
  }
  .hrx__slide{ background-position: 50% 32%; transform: scale(1.04); }

  /* типографика компактнее */
  .hrx__title{ font-size: clamp(1.8rem, 7.4vw, 3.0rem); margin: 0 0 12px; }
  .hrx__title.hrx__title--single{ font-size: clamp(1.8rem, 7.4vw, 3.0rem); }
  .hrx__title-outline{ -webkit-text-stroke: 1.5px rgba(255,255,255,.9); }
  .hrx__sub{ font-size: 1rem; line-height: 1.45; margin: 8px 0 18px; }
  .hrx__btn{ padding: 12px 18px; }
  .hrx__benefits{
    gap: 10px;
    margin-bottom: 22px;
  }
  .hrx__benefit{
    font-size: 0.96rem;
    line-height: 1.4;
  }
  .hrx__benefit i{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
    font-size: 0.86rem;
  }
  .hrx__actions{
    gap: 10px;
  }
  .hrx__actions .hrx__btn{
    padding: 12px 18px;
    font-size: 0.92rem;
  }
}

/* очень узкие экраны — ещё короче */
@media (max-width: 480px){
  .hrx, .hrx__inner { min-height: 58vh; }                 /* можно 56–60vh по вкусу */
  .hrx__slide{ background-position: 50% 28%; }            /* ещё выше фокус */
}

@media (max-width: 425px){
  .hrx__actions .hrx__btn{
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}
/* ===== WAVE (низ hero) ===== */
.hrx{
  --hrx-wave-h: 140px;          /* высота волны */
  --hrx-wave-color: #ffffff;    /* цвет должен совпасть с фоном следующего блока/страницы */
}

/* чтобы контент всегда был поверх волны */
.hrx__inner{ position: relative; z-index: 3; }

.hrx__wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;   /* -1px убирает тонкий зазор */
  height: var(--hrx-wave-h);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  color: var(--hrx-wave-color);      /* path возьмёт этот цвет */
}

.hrx__wave svg{ display: block; width: 100%; height: 100%; }
.hrx__wave path{ fill: currentColor; }

@media (max-width: 780px){ .hrx{ --hrx-wave-h: 100px; } }
@media (max-width: 480px){ .hrx{ --hrx-wave-h: 80px; } }

@media (max-width: 320px){
  .hrx{
    --hrx-wave-h: 64px;
  }

  .hrx,
  .hrx__inner{
    min-height: auto;
  }

  .hrx__inner{
    padding-top: calc(env(safe-area-inset-top, 0px) + 92px);
    padding-bottom: calc(var(--hrx-wave-h) + 20px);
  }

  .hrx__content{
    max-width: none;
  }

  .hrx__title{
    font-size: clamp(1.7rem, 10.2vw, 2.2rem);
    margin: 0 0 10px;
    line-height: 1.08;
  }
  .hrx__title.hrx__title--single{
    font-size: clamp(1.7rem, 10.2vw, 2.2rem);
  }

  .hrx__benefits{
    gap: 8px;
    margin-bottom: 14px;
  }

  .hrx__benefit{
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .hrx__benefit i{
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
    font-size: 0.76rem;
  }

  .hrx__actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hrx__actions .hrx__btn{
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
  }

  .hrx__slide{
    background-position: 50% 24%;
  }
}

/* Homepage hero: fix cramped tablet/mobile states and rotated low-height viewports. */
@media (max-width: 1024px){
  body.home #rg-hero.hrx{
    min-height: auto;
    --hrx-wave-h: 112px;
  }

  body.home #rg-hero .hrx__inner{
    min-height: auto;
    align-items: start;
    gap: 18px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 104px);
    padding-bottom: calc(var(--hrx-wave-h) + 36px);
  }

  body.home #rg-hero .hrx__content{
    max-width: 720px;
  }

  body.home #rg-hero .hrx__title.hrx__title--single{
    max-width: 680px;
    font-size: clamp(2rem, 5.2vw, 3.25rem);
    line-height: 1.08;
  }

  body.home #rg-hero .hrx__benefits{
    max-width: 640px;
    gap: 10px;
    margin-bottom: 22px;
  }

  body.home #rg-hero .hrx__benefit{
    gap: 11px;
    font-size: 0.98rem;
    line-height: 1.4;
  }

  body.home #rg-hero .hrx__benefit i{
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
    font-size: 0.88rem;
  }

  body.home #rg-hero .hrx__actions{
    gap: 10px 12px;
  }

  body.home #rg-hero .hrx__actions .hrx__btn{
    padding: 13px 18px;
    font-size: 0.94rem;
  }
}

@media (max-width: 780px){
  body.home #rg-hero.hrx{
    --hrx-wave-h: 96px;
  }

  body.home #rg-hero .hrx__inner{
    gap: 16px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 92px);
    padding-bottom: calc(var(--hrx-wave-h) + 24px);
  }

  body.home #rg-hero .hrx__title.hrx__title--single{
    max-width: 560px;
    font-size: clamp(1.95rem, 6.8vw, 2.85rem);
  }

  body.home #rg-hero .hrx__benefits{
    gap: 9px;
    margin-bottom: 18px;
  }

  body.home #rg-hero .hrx__benefit{
    font-size: 0.95rem;
    line-height: 1.36;
  }

  body.home #rg-hero .hrx__benefit i{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 0.82rem;
  }

  body.home #rg-hero .hrx__actions .hrx__btn{
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px){
  body.home #rg-hero.hrx{
    --hrx-wave-h: 80px;
  }

  body.home #rg-hero .hrx__inner{
    padding-top: calc(env(safe-area-inset-top, 0px) + 82px);
    padding-bottom: calc(var(--hrx-wave-h) + 18px);
  }

  body.home #rg-hero .hrx__title.hrx__title--single{
    max-width: 360px;
    font-size: clamp(1.8rem, 7.8vw, 2.3rem);
  }

  body.home #rg-hero .hrx__benefits{
    margin-bottom: 16px;
  }

  body.home #rg-hero .hrx__benefit{
    font-size: 0.92rem;
    line-height: 1.34;
  }

  body.home #rg-hero .hrx__actions{
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }

  body.home #rg-hero .hrx__actions .hrx__btn{
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 14px;
    font-size: 0.88rem;
    border-radius: 10px;
  }
}

@media (orientation: landscape) and (max-height: 820px){
  body.home #rg-hero.hrx{
    min-height: auto;
    --hrx-wave-h: 88px;
  }

  body.home #rg-hero .hrx__inner{
    min-height: auto;
    align-items: start;
    gap: 16px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 86px);
    padding-bottom: calc(var(--hrx-wave-h) + 20px);
  }

  body.home #rg-hero .hrx__title.hrx__title--single{
    max-width: 640px;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
  }

  body.home #rg-hero .hrx__benefits{
    gap: 8px;
    margin-bottom: 16px;
  }

  body.home #rg-hero .hrx__benefit{
    font-size: 0.94rem;
  }

  body.home #rg-hero .hrx__benefit i{
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 0.8rem;
  }

  body.home #rg-hero .hrx__actions .hrx__btn{
    padding: 11px 16px;
    font-size: 0.9rem;
  }

  body.home #rg-hero .hrx__metric-stack{
    width: min(388px, 100%);
    gap: 12px;
  }

  body.home #rg-hero .hrx__metric-card{
    border-radius: 22px;
    padding: 15px 14px;
  }

  body.home #rg-hero .hrx__metric-card--leads{
    min-height: 248px;
  }

  body.home #rg-hero .hrx__metric-card--cpl,
  body.home #rg-hero .hrx__metric-card--romi{
    min-height: 164px;
  }
}