/* ==========================================================================
   ООО «Энергосбережение» — обновлённое оформление (шаблон energy2)

   Цвета из логотипа: тёмно-синий #24136D и красный #D72117. Синий держит
   строение страницы (шапка, подвал, первый экран), красный — только на
   действии: кнопки заявки и наведение. Файл подключается последним и
   перекрывает layout.css и style.css, местами через !important.
   ========================================================================== */
:root{
  --blue:#24136D;
  --blue-soft:#31207f;
  --blue-pale:#eef0f8;
  --red:#D72117;
  --red-dark:#b71a11;
  --ink:#22242a;
  --ink-strong:#14161b;
  --muted:#6c7078;
  --line:#e3e5eb;
  --paper:#ffffff;
  --paper-alt:#f5f6f9;
  --wrap:1220px;
}

body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--blue)}
a:hover{color:var(--red)}
h1,h2,h3,h4{color:var(--ink-strong);letter-spacing:-.01em;font-weight:700}
.en-wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
/* Текст в содержимом больше не растягиваем по ширине — рваные пробелы
   были главной причиной «тяжёлого» вида страниц. */
.page_content,.align_justify{text-align:left !important}
.page_content{font-size:17px;line-height:1.75}
.page_content p{margin:0 0 16px}
.page_content ul,.page_content ol{margin:0 0 18px;padding-left:22px}
.page_content li{margin-bottom:8px}
.page_content img{border-radius:3px;margin:10px 0}

/* ---------- верхняя строка ---------- */
.en-top{background:var(--blue);color:#fff;font-size:14px}
.en-top__row{display:flex;align-items:center;gap:18px 26px;min-height:46px;flex-wrap:wrap}
.en-top a{color:#fff;text-decoration:none;opacity:.9}
.en-top a:hover{opacity:1;color:#fff}
.en-top__right{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.en-top__phone{font-size:18px;font-weight:700;white-space:nowrap}

/* ---------- шапка ---------- */
header.en-head{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);padding:0;
}
.en-head__row{display:flex;align-items:center;gap:24px;min-height:82px}
.en-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex:0 0 auto}
.en-brand img{height:56px;width:auto;display:block}
.en-brand b{display:block;font-size:16px;color:var(--blue);line-height:1.25;text-transform:uppercase;letter-spacing:.02em}
.en-brand span{font-size:13px;color:var(--muted)}
.en-head__menu{margin-left:auto;min-width:0}
.en-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border:1px solid var(--red);border-radius:3px;
  background:var(--red);color:#fff !important;
  font-size:15px;font-weight:600;text-decoration:none !important;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.en-btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.en-btn--ghost{background:transparent;color:var(--blue) !important;border-color:var(--blue)}
.en-btn--ghost:hover{background:var(--blue);color:#fff !important;border-color:var(--blue)}

/* меню поверх бутстраповской разметки */
.en-head .navbar{padding:0;background:none !important}
.en-head .navbar-nav{gap:22px;flex-wrap:wrap}
.en-head .navbar-nav > li > a,
.en-head .navbar-nav .nav-link{
  color:var(--ink) !important;font-size:15px;padding:8px 0 !important;
  white-space:nowrap;border-bottom:2px solid transparent;
}
.en-head .navbar-nav > li > a:hover,
.en-head .navbar-nav .nav-link:hover{color:var(--blue) !important;border-color:var(--red)}
.en-head .dropdown-menu{border:1px solid var(--line);border-radius:3px;box-shadow:0 12px 30px rgba(36,19,109,.12);padding:8px 0}
.en-head .dropdown-item{padding:9px 18px;font-size:15px}
.en-head .dropdown-item:hover{background:var(--blue-pale);color:var(--blue)}

/* ---------- первый экран ---------- */
.en-hero{position:relative;background:var(--blue);color:#fff;overflow:hidden}
.en-hero__media{position:absolute;inset:0}
.en-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.28}
.en-hero__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(36,19,109,.95) 0%,rgba(36,19,109,.78) 55%,rgba(36,19,109,.45) 100%);
}
.en-hero__inner{position:relative;padding:76px 0 64px}
.en-kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ff8f88;font-weight:600;
}
.en-kicker::before{content:'';width:26px;height:2px;background:var(--red)}
.en-hero h1{margin:0 0 18px;color:#fff;max-width:18ch;font-size:clamp(28px,3.6vw,44px);line-height:1.15}
.en-hero p{margin:0 0 28px;max-width:56ch;color:#dfe0ee;font-size:17px}
.en-hero__buttons{display:flex;gap:12px;flex-wrap:wrap}
.en-hero .en-btn--ghost{color:#fff !important;border-color:rgba(255,255,255,.6)}
.en-hero .en-btn--ghost:hover{background:#fff;color:var(--blue) !important;border-color:#fff}

/* цифры/направления под первым экраном */
.en-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.en-fact{padding:26px 28px}
.en-fact + .en-fact{border-left:1px solid var(--line)}
.en-fact b{display:block;font-size:17px;color:var(--ink-strong)}
.en-fact span{font-size:15px;color:var(--muted)}

/* ---------- секции ---------- */
.en-sec{padding:78px 0}
.en-sec--alt{background:var(--paper-alt)}
.en-sec--blue{background:var(--blue);color:#fff}
.en-sec--blue h2,.en-sec--blue h3{color:#fff}
.en-sec__head{max-width:60ch;margin-bottom:38px}
.en-sec__head h2{margin:0;font-size:clamp(25px,2.7vw,34px);line-height:1.2}
.en-sec__head p{margin:12px 0 0;color:var(--muted)}
.en-sec--blue .en-sec__head p{color:#c9c8e0}
.en-sec__link{float:right;font-size:15px;text-decoration:none}

/* услуги */
.en-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.en-card{
  background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:30px 28px 32px;display:flex;flex-direction:column;
  text-decoration:none !important;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.en-card:hover{border-color:var(--blue);box-shadow:0 14px 34px rgba(36,19,109,.10);transform:translateY(-2px)}
.en-card__num{
  font-size:13px;color:var(--red);font-weight:700;letter-spacing:.1em;margin-bottom:14px;
}
.en-card h3{margin:0 0 10px;font-size:20px;font-weight:600}
.en-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.en-card__more{margin-top:18px;font-size:14px;font-weight:600;color:var(--blue)}
.en-card:hover .en-card__more{color:var(--red)}

/* текст главной в две колонки с боковой карточкой */
.en-about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:start}
.en-aside{
  background:var(--blue-pale);border:1px solid #dcdff0;border-radius:3px;padding:26px;
}
.en-aside h3{margin:0 0 12px;font-size:18px}
.en-aside p{margin:0 0 16px;color:var(--muted);font-size:15.5px}
.en-aside .en-btn{width:100%}
.en-aside__phone{margin-top:16px !important;font-size:19px;font-weight:700;color:var(--blue) !important}

/* новости */
.en-news{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.en-newsitem{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;text-decoration:none !important;color:inherit;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.en-newsitem:hover{border-color:var(--blue);box-shadow:0 12px 30px rgba(36,19,109,.10);transform:translateY(-2px)}
.en-newsitem__media{aspect-ratio:16/9;background:var(--paper-alt);overflow:hidden}
.en-newsitem__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.en-newsitem:hover .en-newsitem__media img{transform:scale(1.04)}
.en-newsitem__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1 1 auto}
.en-newsitem__date{font-size:13px;color:var(--red);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.en-newsitem h3{margin:0;font-size:17px;font-weight:600;line-height:1.4}

/* контакты */
.en-contacts{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.en-contacts dl{margin:0;display:grid;grid-template-columns:130px 1fr;gap:12px 18px}
.en-contacts dt{color:var(--muted);font-size:14px;padding-top:3px}
.en-contacts dd{margin:0;font-weight:600;color:var(--ink-strong)}
.en-formbox{background:#fff;border:1px solid var(--line);border-radius:3px;padding:26px}
.en-formbox h3{margin:0 0 16px;font-size:19px}
.en-formbox input[type="text"],.en-formbox input[type="tel"],
.en-formbox input[type="email"],.en-formbox textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;margin-bottom:12px;
}
.en-formbox input:focus,.en-formbox textarea:focus{outline:2px solid var(--blue);outline-offset:-2px}
.en-formbox button,.en-formbox input[type="submit"]{
  background:var(--red);border:1px solid var(--red);color:#fff;border-radius:3px;
  padding:12px 22px;font-size:15px;font-weight:600;cursor:pointer;
}
.en-formbox button:hover,.en-formbox input[type="submit"]:hover{background:var(--red-dark)}

/* ---------- внутренние страницы ---------- */
.en-page{padding:40px 0 76px}
.en-page__title{margin:0 0 22px;font-size:clamp(25px,2.7vw,34px);line-height:1.2}
.en-crumbs{margin:0 0 18px;font-size:14px;color:var(--muted)}
.en-crumbs a{color:var(--muted);text-decoration:none}
.en-crumbs a:hover{color:var(--blue)}
.en-crumbs .breadcrumb{background:none;padding:0;margin:0}
.en-page__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}

/* ---------- подвал ---------- */
footer.en-foot{background:var(--blue);color:#c9c8e0;padding:56px 0 24px;font-size:15px}
.en-foot__cols{display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:44px;padding-bottom:34px}
.en-foot h4{margin:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.en-foot a{color:#c9c8e0;text-decoration:none}
.en-foot a:hover{color:#fff}
.en-foot__list{display:grid;gap:9px}
.en-foot__logo{background:#fff;border-radius:3px;padding:10px;display:inline-block;margin-bottom:14px}
.en-foot__logo img{height:56px;display:block}
.en-foot__bottom{
  border-top:1px solid rgba(255,255,255,.18);padding-top:20px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;color:#a9a7c8;
}

@media (max-width:1000px){
  .en-cards,.en-news{grid-template-columns:repeat(2,1fr)}
  .en-about,.en-page__grid{grid-template-columns:1fr;gap:32px}
  .en-contacts{grid-template-columns:1fr;gap:28px}
  .en-foot__cols{grid-template-columns:1fr 1fr}
  .en-facts{grid-template-columns:1fr}
  .en-fact + .en-fact{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:820px){
  .en-head__row{min-height:68px;gap:14px}
  .en-brand img{height:46px}
  .en-hero__inner{padding:52px 0 46px}
  .en-hero h1{font-size:27px;max-width:none}
}
@media (max-width:620px){
  .en-wrap{padding:0 18px}
  .en-sec{padding:54px 0}
  .en-cards,.en-news{grid-template-columns:1fr}
  .en-foot__cols{grid-template-columns:1fr;gap:28px}
  .en-head .en-btn{display:none}
  .en-top__row{font-size:13px;gap:8px 16px;padding:8px 0}
  .en-contacts dl{grid-template-columns:1fr;gap:2px 0}
  .en-contacts dd{margin-bottom:12px}
  .en-hero__buttons .en-btn{flex:1 1 100%}
}

/* Шапка в одну строку: меню не переносим по словам, а на узких экранах
   убираем слоган у названия — иначе шесть пунктов уходят на вторую строку. */
.en-head .navbar-nav{gap:18px;flex-wrap:nowrap}
.en-head .navbar-nav > li > a,
.en-head .navbar-nav .nav-link{font-size:14.5px}
.en-brand span span{color:var(--muted)}
@media (max-width:1360px){
  .en-brand span span{display:none}
  .en-head__row{gap:18px}
}
@media (max-width:1120px){
  .en-head .navbar-nav{gap:14px}
  .en-head .navbar-nav > li > a,
  .en-head .navbar-nav .nav-link{font-size:14px}
  .en-brand b{font-size:14px}
}

/* Верхняя строка на телефоне: боковые поля не терять (в правиле ниже я
   задал padding целиком и обнулил их), а длинную подпись убрать —
   на узком экране важны почта и телефон. */
@media (max-width:620px){
  .en-top__row{padding:8px 18px}
  .en-top__row > span:first-child{display:none}
  .en-top__right{margin-left:0}
}

/* ---------- новости ---------- */
.en-newsitem__media.is-empty{
  display:grid;place-items:center;background:var(--blue-pale);
}
.en-newsitem__stub{width:auto !important;height:56px !important;object-fit:contain !important;opacity:.75}
.en-newsitem__text{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.55}
.en-post__date{margin:-10px 0 22px;font-size:14px;color:var(--red);letter-spacing:.06em;text-transform:uppercase}
.en-post__photo{display:block;border-radius:3px;overflow:hidden}
.en-post__photo img{width:100%;height:auto;display:block}

/* Лента новостей: три в ряд, как на главной */
.en-page .en-news{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .en-page .en-news{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .en-page .en-news{grid-template-columns:1fr} }

/* ==========================================================================
   Цвет ссылок

   В прежнем style.css стоит «a, a:hover, .btn { color: #291670 !important }» —
   одним правилом на весь сайт. Из-за него ссылки в подвале и на синих
   плашках сливались с фоном. Перебиваем адресно, тоже через !important.
   ========================================================================== */
a{color:var(--blue) !important}
a:hover{color:var(--red) !important}
.en-top a,.en-hero a,.en-sec--blue a{color:#fff !important}
.en-top a:hover,.en-hero a:hover,.en-sec--blue a:hover{color:#fff !important;opacity:1}
footer.en-foot a{color:#c9c8e0 !important}
footer.en-foot a:hover{color:#fff !important}
.en-btn,.en-hero .en-btn--ghost,.en-hero .en-btn--ghost:hover{color:#fff !important}
.en-btn--ghost{color:var(--blue) !important}
.en-btn--ghost:hover{color:#fff !important}
.en-card,.en-newsitem,.en-card *,.en-newsitem *{color:inherit !important}
.en-card__more{color:var(--blue) !important}
.en-card:hover .en-card__more{color:var(--red) !important}
.en-newsitem__date{color:var(--red) !important}
.en-newsitem__text{color:var(--muted) !important}
.en-sec__link{color:var(--blue) !important}
.en-sec__link:hover{color:var(--red) !important}

/* ---------- лента новостей: без снимков ---------- */
.en-feed{border-top:1px solid var(--line)}
.en-feeditem{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 28px;
  padding:22px 0;border-bottom:1px solid var(--line);
  text-decoration:none !important;transition:background .18s;
}
.en-feeditem:hover{background:var(--paper-alt)}
.en-feeditem__date{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red) !important;padding-top:4px;white-space:nowrap;
}
.en-feeditem__title{
  display:block;font-size:19px;line-height:1.35;font-weight:600;
  color:var(--ink-strong) !important;transition:color .18s;
}
.en-feeditem:hover .en-feeditem__title{color:var(--blue) !important}
.en-feeditem__text{
  display:block;margin-top:6px;font-size:15.5px;line-height:1.6;
  color:var(--muted) !important;
}
@media (max-width:620px){
  .en-feeditem{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .en-feeditem__date{padding-top:0}
  .en-feeditem__title{font-size:17px}
}

/* ==========================================================================
   Единая типографика

   В прежнем style.css стоит «h2, h3 { font-size:1.3rem !important }», а в
   layout.css свои размеры и насыщенность для всех заголовков. Из-за них
   заголовки на сайте разного калибра, поэтому шкала ниже задана с
   !important. Иконочные шрифты из правила исключены — иначе значки
   превращаются в квадраты.
   ========================================================================== */
body,p,li,td,th,div,span,label,input,textarea,select,button,
h1,h2,h3,h4,h5,h6,.page_content,.en-wrap{
  font-family:"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
}
[class*="glyphicons"],[class*="fa-"],.fas,.far,.fal,.fab,.material-icons,
[class*="glyphicons"]::before,[class*="fa-"]::before{font-family:inherit}
.glyphicons,.glyphicon{font-family:"Glyphicons Halflings","Glyphicons" !important}
.fas,.far,.fal,.fab{font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands",sans-serif !important}
.material-icons{font-family:"Material Icons" !important}

h1,.en-page__title{
  font-size:clamp(27px,2.9vw,36px) !important;line-height:1.2 !important;
  font-weight:700 !important;margin:0 0 20px !important;color:var(--ink-strong);
}
h2{
  font-size:clamp(23px,2.4vw,30px) !important;line-height:1.25 !important;
  font-weight:700 !important;margin:0 0 16px !important;color:var(--ink-strong);
}
h3{
  font-size:20px !important;line-height:1.35 !important;
  font-weight:600 !important;margin:0 0 12px !important;color:var(--ink-strong);
}
h4{font-size:17px !important;line-height:1.4 !important;font-weight:600 !important;margin:0 0 10px !important}
h5,h6{font-size:16px !important;font-weight:600 !important;margin:0 0 8px !important}

/* заголовки внутри собственных блоков — свои размеры */
.en-hero h1{font-size:clamp(28px,3.6vw,44px) !important;color:#fff}
.en-sec__head h2{margin:0 !important}
.en-card h3,.en-aside h3,.en-formbox h3{font-size:19px !important;margin:0 0 10px !important}
.en-foot h4{font-size:13px !important;margin:0 0 14px !important}
.page_content h2{margin:30px 0 14px !important}
.page_content h3{margin:24px 0 12px !important}

/* ---------- хлебные крошки ---------- */
.en-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 20px;font-size:14px;color:var(--muted);
}
.en-crumbs a{color:var(--muted) !important;text-decoration:none}
.en-crumbs a:hover{color:var(--blue) !important}
.en-crumbs__sep{color:#c4c7d0}
.en-crumbs__here{color:var(--ink-strong)}

/* ==========================================================================
   Верхнее меню

   В bootstrap-menu.css пункты покрашены белым правилом с идентификатором
   (.bootstrap-menu #navbarTopMenu ul.navbar-nav li a) и получают красную
   плашку при наведении. Идентификатор сильнее моих классов, поэтому здесь
   тот же селектор: пункты всегда тёмные, при наведении краснеют, никаких
   плашек и подчёркиваний.
   ========================================================================== */
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li a,
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li a:link,
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li a:visited{
  color:var(--ink-strong) !important;
  background:transparent !important;
  padding:8px 0 !important;
  border:0 !important;border-radius:0 !important;
  font-size:14.5px;font-weight:500;
}
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li:hover > a,
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li a:hover,
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li a:focus,
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li.active > a{
  color:var(--red) !important;
  background:transparent !important;
  text-decoration:none !important;
}
/* Выпадающие пункты — тем же порядком: белая плашка, тёмный текст */
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav ul{
  background:#fff !important;border:1px solid var(--line) !important;
  box-shadow:0 12px 30px rgba(36,19,109,.12);padding:6px 0 !important;
}
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav ul li a{padding:9px 18px !important}

/* ==========================================================================
   Поля колонки

   Ниже по файлу у первого экрана и внутренних страниц задан padding
   целиком (76px 0) — он снимал боковые поля, приходящие от .en-wrap,
   и текст оказывался левее логотипа и остальных секций. Задаём только
   вертикальные отступы, горизонтальные остаются от .en-wrap.
   ========================================================================== */
.en-hero__inner{padding:76px 32px 64px}
.en-page{padding:40px 32px 76px}
@media (max-width:820px){
  .en-hero__inner{padding:52px 32px 46px}
}
@media (max-width:620px){
  .en-hero__inner{padding:44px 18px 38px}
  .en-page{padding:28px 18px 56px}
}

/* Текущий пункт меню — тоже тёмный: красный оставлен только наведению */
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li.active > a{
  color:var(--ink-strong) !important;font-weight:600;
}
.en-head .bootstrap-menu #navbarTopMenu ul.navbar-nav li.active > a:hover{
  color:var(--red) !important;
}

/* ---------- контакты на главной (без формы) ---------- */
.en-contacts__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;border-top:1px solid var(--line);padding-top:26px;
}
.en-contact{display:flex;flex-direction:column;gap:6px;min-width:0}
.en-contact__label{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.en-contact__value{
  font-size:18px;font-weight:600;color:var(--ink-strong) !important;
  text-decoration:none;overflow-wrap:anywhere;
}
a.en-contact__value:hover{color:var(--red) !important}
.en-contact__value--plain{font-size:16px;font-weight:400;line-height:1.55}
.en-contacts__action{margin-top:28px}

@media (max-width:1000px){ .en-contacts__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }
@media (max-width:620px){ .en-contacts__grid{grid-template-columns:1fr} }

/* телефон в боковой карточке — теперь он же и ссылка */
a.en-aside__phone{display:inline-block;text-decoration:none !important}
a.en-aside__phone:hover{color:var(--red) !important}

/* Кнопки стали ссылками, и по ним ударили два правила наведения:
   глобальное «a:hover { color:красный !important }» из style.css перекрашивало
   текст в цвет фона, а старое правило светлой кнопки первого экрана делало
   белый текст на белом. Разбираем поимённо — селекторы с тегом a сильнее. */
a.en-btn:hover{color:#fff !important;background:var(--red-dark);border-color:var(--red-dark)}
a.en-btn--ghost:hover{color:#fff !important;background:var(--blue);border-color:var(--blue)}
.en-hero a.en-btn--ghost:hover{color:var(--blue) !important;background:#fff;border-color:#fff}