/* ============================================================
   HELLSING — макет «Hellsing — Landing 1537»
   Отличия от первой версии:
     • акцент красный → ЗОЛОТО (#ffb560 / #ab7a0e)
     • скругления убраны (острые углы), кроме соцсетей
     • в hero эмблема + вордмарк вместо тэглайна
     • вторая кнопка — синяя сталь
   ============================================================ */
:root{
  --bg:#070506;
  --bg-deep:#060405;

  --panel:rgba(10,11,12,.55);
  --panel-stats:rgba(16,12,11,.5);
  --panel-card:#0a0b0c;
  --panel-social:rgba(23,17,15,.7);

  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.08);
  --line-card:rgba(255,255,255,.05);
  --line-btn:rgba(136,124,114,.45);

  /* Акцент — золото */
  --gold:#ffb560;
  --gold-deep:#ab7a0e;

  /* Синяя сталь */
  --steel-1:rgba(32,45,62,.65);
  --steel-2:rgba(44,59,79,.86);
  --steel-line:#53565c;

  --tx-bright:#f2ede8;
  --tx:#dad6d0;
  --tx-news:#d7d3cd;
  --tx-2:#b7b2aa;
  --tx-3:#9a938b;
  --tx-4:#8c857c;
  --tx-5:#7c766e;

  --green:#63b85a;

  --container:1236px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-deep);color:var(--tx);
  font-family:'PT Serif',Georgia,serif;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.forum{font-family:'Forum',Georgia,serif;font-weight:400}
.container{width:min(var(--container),calc(100% - 64px));margin-inline:auto}

/* ---------- ФОН ---------- */
.page-bg{position:absolute;inset:0 0 auto 0;height:1024px;z-index:0;pointer-events:none;overflow:hidden}
.page-bg__art,.page-bg__dragon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Видео-фон лежит поверх резервных изображений (позже в DOM), но под
   затемнениями .ov. Не перехватывает клики — .page-bg и так pointer-events:none. */
.page-bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* «Меньше движения»: видео убираем, остаётся статичный фон-изображение */
@media (prefers-reduced-motion: reduce){.page-bg__video{display:none}}
.ov{position:absolute}
/* Боковые затемнения тянутся на ВСЮ высоту фона и заданы в процентах.
   В макете (1536×1024) они были в пикселях: left 1000px = 65.1%,
   right 387px = 25.2%, причём правое высотой всего 572px — половина.
   На широком/высоком мониторе это оставляло правый край незатемнённым,
   а доля затемнения падала (25% → 15% на 2560). Проценты держат пропорцию
   макета на любой ширине, height:100% закрывает край до низа. */
.ov--left  {inset:0 auto 0 0;width:65.1%;height:100%;
  background:linear-gradient(90deg,rgba(8,6,8,.92) 0%,rgba(8,6,8,.55) 45%,rgba(8,6,8,0) 100%)}
.ov--right {top:0;right:0;width:25.2%;height:100%;
  background:linear-gradient(90deg,rgba(7,5,6,0) 0%,rgba(7,5,6,.6) 100%)}
.ov--bottom{top:404px;left:0;right:0;height:620px;
  background:linear-gradient(180deg,rgba(7,5,6,0) 0%,rgba(7,5,6,.72) 55%,rgba(6,4,5,.95) 100%)}
/* Затемнение под шапкой: плотнее и выше, чтобы меню читалось
   на любом участке арта, а не только на тёмном */
.ov--top   {top:0;left:0;right:0;height:230px;
  background:linear-gradient(180deg,
    rgba(5,4,4,.92) 0%,
    rgba(5,4,4,.72) 38%,
    rgba(6,4,5,.34) 68%,
    rgba(6,4,5,0) 100%)}

/* Прижатый подвал на ВСЕХ ширинах, включая мобайл.
   .page — колонка высотой не меньше экрана; область контента растёт и
   выталкивает подвал вниз. Контента мало — подвал у нижнего края экрана;
   много — уезжает в конец, прокручивается вместе со страницей (не плавает).
   На десктопе поверх этого работает раскладка «страница в экран» ниже:
   там .page получает фиксированную высоту и внутреннюю прокрутку. */
.page{position:relative;z-index:2;display:flex;flex-direction:column;
      min-height:100vh;min-height:100dvh}
/* Растёт и толкает подвал; flex-shrink:0 — не ужимается под контент */
.page__scroll{flex:1 0 auto}
.footer{flex:0 0 auto}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================
   Шапка + hero + статистика занимают ровно высоту окна, чтобы линия
   сгиба проходила под статистикой, а не резала следующий блок пополам.

   Шапка лежит ВНУТРИ обёртки — поэтому её высота вычитается сама.
   Считать её в CSS нельзя (нет способа сослаться на высоту соседа),
   а замер в JS разъезжался бы на длинных языках, где меню переносится
   на вторую строку, и на мобильном.

   min-height, а не height: на низких экранах и при крупном системном
   шрифте контент просто выйдет за окно и появится прокрутка. Жёсткая
   высота обрезала бы кнопки — прокрутка честнее обрезки. */
.screen--full{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.screen--full > .hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-top:0}
.screen--full > .container:last-child{padding-bottom:34px}

/* ============================================================
   ДЕСКТОП: СТРАНИЦА РОВНО В ЭКРАН, БЕЗ ПРОКРУТКИ
   ============================================================
   Окно фиксируем по высоте экрана, а всё, что не поместилось,
   прокручивается ВНУТРИ .page__scroll. Иначе длинные правила и
   политику пришлось бы либо резать, либо возвращать прокрутку окна.

   Условие по min-height намеренное: на низком окне (меньше 640px —
   например, половина экрана или ноутбук с открытой консолью) запрет
   прокрутки сделал бы сайт неработоспособным, там оставляем обычное
   поведение. По ширине граница 1025px — ниже начинается планшет
   и мобильная раскладка, которой это правило не касается. */
@media (min-width:1025px) and (min-height:640px){
  html,body{height:100%;overflow:hidden}

  /* Фон-арт задан жёсткими 1024px и на экране ниже этого растягивал
     область прокрутки на пустоту. Прижимаем к высоте окна. */
  .page-bg{height:100%}

  .page{
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;
  }
  /* min-height:0 обязателен: без него flex-элемент не даёт себя сжать
     меньше содержимого, и внутренняя прокрутка не включается. */
  .page > *{min-height:0}

  /* Первый экран больше не растягивается на всю высоту — иначе он
     вытеснил бы остальное за границу окна, где до него не добраться.
     flex:0 0 auto — сжиматься НИЖЕ содержимого нельзя: при 0 1 auto
     блок ужимался до 488px при содержимом 580px, и статистика
     наезжала на «Особенности». Вместо сжатия контейнера уменьшаем
     сам hero (ниже), это управляемо.

     flex-grow:1 — свободное место окна забирает первый экран, а не
     пустота над подвалом. На высоком мониторе излишек уходил вниз, и
     между «Особенностями» и подвалом зияла дыра, пока логотип упирался
     в шапку. Теперь наоборот: воздух сверху, подвал прижат к контенту. */
  .screen--full{min-height:0;flex:1 0 auto}

  /* Логотип не должен упираться в меню даже когда свободного места нет */
  .screen--full > .hero{
    padding-top:min(38px,4vh);
    /* flex-end вместо center: при центрировании свободное место окна
       делилось поровну — и над логотипом, и под кнопками, из-за чего
       на высоком мониторе между кнопками и статусом зияло 88px.
       Теперь весь запас уходит наверх, а кнопки прижаты к статистике. */
    justify-content:flex-end;
  }

  /* Логотип и кнопки масштабируются по высоте окна: на большом мониторе
     остаются как в макете, на невысоком ноутбуке ужимаются ровно
     настолько, чтобы «Особенности» и подвал влезли без обреза.
     min() держит верхнюю границу — крупнее макета не станет. */
  .screen--full .hero__emblem{height:min(211px,21vh);width:auto}
  .screen--full .hero__wordmark{height:min(90px,9vh);width:auto}
  .screen--full .hero__orn{width:min(191px,19vh)}
  .screen--full .hero__sub{font-size:min(33.6px,3.4vh)}
  .screen--full .hero__cta{margin-top:min(53.2px,5vh)}
  /* Просвет между статистикой и «Особенностями» набирался из двух мест:
     нижнего отступа блока статистики и margin-top у .bottom. Сжимаем оба,
     иначе правка одного давала бы половину эффекта. */
  .screen--full > .container:last-child{padding-bottom:min(10px,1.1vh)}
  /* Просвет между кнопками и полосой статуса — целиком margin блока статистики */
  .screen--full .stats{margin-top:min(12px,1.4vh)}
  .page__scroll .bottom{margin-top:8px}

  .page__scroll{
    /* По умолчанию (статические страницы) область РАСТЁТ и толкает подвал
       к нижнему краю. Без этого на короткой странице подвал всплывал под
       текстом, оставляя пустоту снизу, и его положение «прыгало» от объёма
       контента к объёму — это и была жалоба. flex-shrink:1 сохранён, чтобы
       длинный контент сжался и прокрутился внутри. */
    flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:min(26px,3vh);
    /* Полоса прокрутки в тёмной гамме — светлая системная режет глаз */
    scrollbar-width:thin;scrollbar-color:rgba(255,181,96,.35) transparent;
  }
  /* Лендинг (есть первый экран): свободное место должно уходить в hero,
     а не в область контента — иначе между «Особенностями» и подвалом
     возникала дыра. Поэтому там область НЕ растягивается. */
  .page:has(.screen--full) .page__scroll{flex:0 1 auto}
  .page__scroll::-webkit-scrollbar{width:8px}
  .page__scroll::-webkit-scrollbar-thumb{background:rgba(255,181,96,.32)}
  .page__scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,181,96,.5)}

  .footer{flex:0 0 auto;margin-top:0}
}

/* ---------- HEADER ---------- */
/* z-index должен быть ВЫШЕ секций контента: у них тоже 2, а при
   равенстве выигрывает то, что ниже в разметке — выпадающий список
   языков уходил под карточки. */
.header{padding-top:42px;position:relative;z-index:40}
.header__inner{display:flex;align-items:center;gap:24px;position:relative;min-height:52px}
/* Меню центрируется ПО СТРАНИЦЕ, а не по остатку строки —
   иначе кнопка кабинета утягивает его влево (было −114px) */
.nav{
  display:flex;gap:36px;align-items:center;font-size:17.5px;letter-spacing:1.05px;
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
}
.nav a{color:rgba(203,199,192,.92);transition:color .18s,text-shadow .18s;white-space:nowrap}
.nav a:hover,.nav a:focus-visible{color:var(--tx-bright);text-shadow:0 0 12px rgba(255,181,96,.5)}
.nav a.is-active{color:var(--gold)}

/* Кнопка кабинета — в том же стиле, что «Начать игру»: тот же градиент,
   бордер и ромб над верхней границей (ромб живёт на обёртке .cta-item) */
.cta-login{margin-left:auto}
.btn-login{
  display:inline-flex;align-items:center;gap:11px;position:relative;overflow:hidden;
  padding:14px 24px 14px 22px;
  border:.5px solid var(--gold-deep);
  background:linear-gradient(180deg,rgba(115,71,11,.72) 27%,rgba(0,0,0,.56) 125%);
  box-shadow:0 4px 22px rgba(0,140,255,.09);
  color:var(--tx-bright);font-size:16px;letter-spacing:.8px;white-space:nowrap;
  transition:box-shadow .25s,transform .18s,border-color .25s,filter .25s;
}
.btn-login::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,222,170,.22),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.25,.8,.3,1);pointer-events:none;
}
.btn-login:hover::after{left:120%}
.btn-login:hover{
  border-color:var(--gold);
  box-shadow:0 8px 30px rgba(255,181,96,.34),inset 0 0 24px rgba(255,181,96,.12);
  filter:brightness(1.12);transform:translateY(-2px);
}
.btn-login:active{transform:translateY(0)}
.btn-login img{width:17px;height:17px;transition:transform .28s}
.btn-login:hover img{transform:translateY(-2px)}

/* ---------- HERO ----------
   Геометрия выверена по макету 48:38: эмблема начинается на y=54,
   т.е. на уровне шапки — поэтому блок поднят отрицательным отступом.
   Блок бренда центрируется НАД рядом кнопок (512px), а не по краю. */
/* ---------- HERO по фрейму «Hellsing — Landing 1538» ----------
   Отличие от 1537: герб и надпись стоят В РЯД, а не столбиком,
   и блок прижат влево, по одной вертикали с кнопками.
   Числа сняты с макета: герб 177.23×210.83 начинается на x=131,
   надпись 390.74×89.54 — на x=308.25. Правый край герба ровно
   совпадает с левым краем надписи, зазора между ними нет. */
.hero{padding-top:99px;margin-top:0}
/* Выравнивание по ВЕРХУ, а не по центру: подпись задаётся в админке,
   и при двух строках центрирование поднимало бы весь логотип вверх.
   Так верх надписи стоит на месте, а длинный текст растёт вниз. */
.hero__brand{
  display:flex;align-items:flex-start;gap:0;
  /* Герб выходит на 19px левее контейнера — так в макете: у арта
     прозрачные поля, и по оптике он садится на общую левую линию. */
  margin-left:-19px;max-width:100%;
}
.hero__emblem{
  width:177.23px;height:210.83px;object-fit:contain;opacity:.9;flex:0 0 auto;
  filter:drop-shadow(0 -12.3px 34px rgba(0,154,255,.14)) drop-shadow(0 23.5px 55px rgba(255,181,96,.12));
}
/* Ширина колонки = ширине надписи. Иначе длинная подпись расширяет
   колонку, надпись центрируется внутри неё и отрывается от герба. */
.hero__lockup{display:flex;flex-direction:column;align-items:center;
  width:390.74px;max-width:100%;min-width:0;
  /* 245.2 − 193.2 = 52px: верх надписи ниже верха герба, как в макете */
  margin-top:52px}
.hero__wordmark{width:390.74px;height:89.54px;max-width:100%;margin-top:0}
/* Орнамент заходит на нижнюю прозрачную часть вордмарка — как в макете.
   Размер — РОДНЫЕ пропорции SVG (142.5×15.907): у файла
   preserveAspectRatio="none", и растягивание в 170×14 плющило ромб. */
/* height:auto — пропорции держит сам SVG (192:16). Прежний файл имел
   preserveAspectRatio="none", и заданная вручную высота плющила ромб. */
.hero__orn{width:191.48px;height:auto;margin-top:-7.9px;opacity:.9}
/* В макете подпись крупная (33.6px) и короткая — «INTERLUDE SERVER – x20».
   nowrap убран: текст задаётся в админке и может быть длиннее макетного,
   тогда он переносится, а не уезжает за экран. */
.hero__sub{font-size:33.6px;letter-spacing:.67px;color:var(--tx);
  margin:7px 0 0;text-align:center;line-height:1.1;width:100%}

/* Блок логотипа кончается не подписью, а ГЕРБОМ: он ниже (низ 403.8
   против 386.4 у текста). Отступ до кнопок считаем от него: 457 − 403.8.
   При длинной подписи в две строки кнопки уедут ниже — это ожидаемо,
   в макете подпись однострочная. */
.hero__cta{display:flex;gap:12px;margin-top:53.2px}

/* Обёртка нужна, чтобы ромб жил ВНЕ кнопки: у кнопки overflow:hidden
   ради блика при наведении, и ромб (top:-6px) им обрезался. */
.cta-item{position:relative;display:inline-flex}
/* top = −половина высоты: центр ромба ложится ровно на линию границы
   кнопки (в макете центр бокса 11.003px приходится на y=457 = верх кнопки) */
.cta-item::before{
  content:'';position:absolute;top:-3.9px;left:50%;z-index:2;
  width:7.8px;height:7.8px;transform:translateX(-50%) rotate(45deg);
  transition:transform .28s cubic-bezier(.3,1.4,.5,1),box-shadow .28s;
  pointer-events:none;
}
.cta-item--play::before{background:#212e3f;border:1px solid var(--gold-deep)}
.cta-item--dl::before{background:var(--gold-deep);border:1px solid var(--steel-line)}
.cta-item:hover::before{transform:translateX(-50%) rotate(135deg) scale(1.25)}
.cta-item--play:hover::before{box-shadow:0 0 12px rgba(255,181,96,.7)}
.cta-item--dl:hover::before{box-shadow:0 0 12px rgba(171,122,14,.8)}
.btn{
  display:inline-flex;align-items:center;gap:14px;
  /* min-width, а не width: 250px — это размер под русский текст из макета.
     Украинское «ЗАВАНТАЖИТИ КЛІЄНТ» длиннее и обрезалось об overflow:hidden
     (он нужен для блика). Теперь кнопка растёт под перевод, а на языках
     покороче остаётся макетной ширины. */
  min-width:250px;height:73px;padding-inline:26px;position:relative;overflow:hidden;
  transition:box-shadow .25s,transform .18s,border-color .25s,filter .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Блик, пробегающий по кнопке при наведении */
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,222,170,.22),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.25,.8,.3,1);
  pointer-events:none;
}
.btn:hover::after{left:120%}
/* line-height задан явно: иначе на страницах с .page-body (1.7)
   он протекает внутрь кнопки и раздувает зазор между строками */
.btn__label{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0;line-height:normal}
.btn__label b{font-family:'Forum',Georgia,serif;font-weight:400;font-size:19px;letter-spacing:.57px;white-space:nowrap;line-height:1.1}
.btn__label span{font-size:11.5px;letter-spacing:.92px;color:var(--tx-4);white-space:nowrap;line-height:1.1}
/* Подпись второй кнопки длиннее — поджимаем трекинг, чтобы влезла в строку */
.btn--dl .btn__label span{letter-spacing:.35px;font-size:11px}


.btn--play{
  /* justify-content — как у .btn--dl: содержимое по центру.
     Без него «Начать игру» прижималось влево, и кнопки выглядели разными. */
  justify-content:center;gap:28px;border:.5px solid var(--gold-deep);
  background:linear-gradient(180deg,rgba(115,71,11,.72) 27%,rgba(0,0,0,.56) 125%);
  box-shadow:0 4px 22px rgba(0,140,255,.09);
}
.btn--play:hover{
  border-color:var(--gold);
  box-shadow:0 8px 30px rgba(255,181,96,.34),inset 0 0 24px rgba(255,181,96,.12);
  filter:brightness(1.12);
}
.btn--play img{width:21px;height:26px;transition:transform .28s}
.btn--play:hover img{transform:translateY(-2px)}
.btn--play b{color:var(--tx-bright)}

.btn--dl{
  justify-content:center;border:.5px solid var(--line-btn);
  background:linear-gradient(90deg,var(--steel-1),var(--steel-2));
}
.btn--dl:hover{
  border-color:rgba(180,196,220,.65);
  box-shadow:0 8px 30px rgba(90,140,200,.22),inset 0 0 24px rgba(150,190,240,.08);
  filter:brightness(1.15);
}
.btn--dl img{width:22px;height:22px;transition:transform .28s}
.btn--dl:hover img{transform:translateY(2px)}
.btn--dl b{color:var(--tx)}

/* ============================================================
   КАРТОЧКА ДЕЙСТВИЯ (регистрация / вход) — боковая колонка
   Рамка с угловыми засечками, эмблема, текст, кнопка.
   ============================================================ */
.act-card{
  position:relative;padding:34px 26px 32px;text-align:center;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,181,96,.07),transparent 60%),
    linear-gradient(180deg,rgba(20,16,12,.9),rgba(9,9,10,.94));
  border:1px solid rgba(255,181,96,.22);
  box-shadow:inset 0 0 40px rgba(255,181,96,.05);
}
/* Угловые засечки: по паре на псевдоэлемент родителя и внутреннего span */
.act-card::before,.act-card::after,
.act-card__c::before,.act-card__c::after{
  content:'';position:absolute;width:20px;height:20px;pointer-events:none;
  border:1px solid var(--gold);opacity:.6;
}
.act-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.act-card::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.act-card__c::before{bottom:-1px;left:-1px;border-right:0;border-top:0}
.act-card__c::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* Эмблема выходит за верхнюю границу карточки — рамка проходит за ней */
.act-card__emblem{
  width:200px;margin:-96px auto 14px;
  position:relative;z-index:2;
  filter:drop-shadow(0 8px 26px rgba(255,181,96,.26)) drop-shadow(0 0 34px rgba(0,0,0,.55));
}
.act-card__t{
  font-family:'Forum',Georgia,serif;font-weight:400;
  font-size:23px;letter-spacing:.6px;color:var(--gold);
  margin:0 0 12px;line-height:1.2;
}
.act-card__d{
  font-size:13px;line-height:1.6;color:var(--tx-3);
  margin:0 0 24px;
}
.act-card .cta-item{margin-top:4px}
.act-card .btn{width:100%;max-width:260px;justify-content:center}
.act-card__note{font-size:11.5px;color:var(--tx-4);margin:18px 0 0;line-height:1.5}
.act-card__note a{color:var(--gold)}

/* ---------- СТАТИСТИКА ---------- */
.stats{
  margin-top:26px;display:flex;padding:16px 0;
  background:var(--panel-stats);border:.5px solid var(--line-2);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.stats__cell{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:4px;position:relative;min-width:0;
}
.stats__cell+.stats__cell::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:42px;
  background:linear-gradient(180deg,rgba(0,0,0,.09),rgba(255,255,255,.09) 50%,rgba(0,0,0,.09));
}
.stats__k{font-size:12px;letter-spacing:.84px;color:var(--tx-4);white-space:nowrap}
.stats__v{font-size:23px;letter-spacing:.23px;color:var(--tx);display:flex;align-items:center;gap:9px}
.stats__v--online{color:var(--green)}
.stats__v--date{color:var(--gold)}
.stats__dot{width:9px;height:9px}

/* ---------- НИЖНЯЯ ПАНЕЛЬ ---------- */
.bottom{
  margin-top:16px;display:grid;grid-template-columns:748px 1fr;min-height:282px;
  background:var(--panel);border:.5px solid var(--line);
  box-shadow:0 10px 15px rgba(0,0,0,.4);
}
/* Правый отступ 40px: в макете ряд карточек 686px внутри колонки 748px,
   т.е. поля асимметричны. Заголовок и ссылка выравниваются по КАРТОЧКАМ. */
.bottom__left{padding:15px 40px 12px 21px}
.bottom__right{padding:15px 34px 12px 28px;border-left:1px solid rgba(255,255,255,.07)}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sec-title{font-size:25px;letter-spacing:.75px;color:var(--tx);margin:0}

/* Заголовок «Особенности сервера» центрируется по ряду карточек,
   ссылка при этом прижата к их правому краю */
/* Заголовок слева, ссылка справа — одинаково с блоком «Последние новости».
   Раньше заголовок центрировался, а ссылка лежала поверх него absolute:
   боксы пересекались всегда, и на узком экране «Подробнее о сервере»
   наезжало на «Особенности сервера». */
.sec-head--center{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sec-head--center .sec-title{text-align:left}
.sec-head--center .sec-link{position:static}
.sec-link{font-family:'Forum',Georgia,serif;font-size:12px;letter-spacing:.72px;color:var(--gold);transition:color .18s;white-space:nowrap}
.sec-link:hover{color:#ffd0a0}
/* Орнамент центрируется по блоку — так в макете. Заголовок при этом
   стоит слева: выравнивание заголовка и орнамента независимы. */
.sec-orn{margin:8px auto 14px;width:170px;height:auto;opacity:.9}

.features{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
.feat{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 8px 16px;height:178px;text-align:center;
  background:var(--panel-card);border:1px solid var(--line-card);
  transition:border-color .2s,transform .18s,box-shadow .2s;
}
.feat:hover{border-color:rgba(255,181,96,.35);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.feat__icon{width:58px;height:60px;flex:0 0 60px;object-fit:contain}
.feat__name{font-family:'Forum',Georgia,serif;font-size:15.5px;letter-spacing:.62px;color:var(--tx);margin:0}
.feat__val{font-size:11px;color:#c9c4bd;margin:0;line-height:1.3}
.feat__note{font-size:11px;color:var(--tx-4);margin:0;line-height:1.3}

.news__list{display:flex;flex-direction:column;gap:18px;margin-top:14px}
.news-item{display:flex;gap:15px;align-items:flex-start;transition:opacity .18s}
.news-item:hover{opacity:.82}
.news-item__thumb{width:68px;height:52px;flex:0 0 68px;border:1px solid var(--line-2);overflow:hidden;position:relative}
.news-item__thumb img{width:100%;height:100%;object-fit:cover}
.news-item__thumb::after{content:'';position:absolute;inset:0;background:rgba(26,13,13,.25)}
.news-item__date{font-family:'Forum',Georgia,serif;font-size:10.5px;letter-spacing:.42px;color:var(--gold);margin:0 0 5px}
.news-item__title{font-family:'Forum',Georgia,serif;font-size:14px;letter-spacing:.28px;color:var(--tx-news);margin:0 0 5px;font-weight:400}
.news-item__text{font-size:11.5px;line-height:1.35;color:var(--tx-4);margin:0}

/* ---------- FOOTER ---------- */
.footer{margin-top:8px;padding-bottom:20px}
.footer__line{height:1px;background:rgba(255,255,255,.05)}
.footer__inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding-top:20px}
.footer__copy{font-size:12.5px;color:var(--tx-5);margin:0}
.footer__socials{display:flex;gap:12px;margin-left:auto}
.social{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--panel-social);border:1px solid var(--line);border-radius:6px;
  transition:border-color .2s,transform .15s;
}
.social:hover{border-color:rgba(255,181,96,.5);transform:translateY(-2px)}
.social img{width:18px;height:18px}
.footer__links{display:flex;gap:28px;font-family:'Forum',Georgia,serif;font-size:12px;letter-spacing:.48px;color:var(--tx-4);margin-left:auto;flex-wrap:wrap}
.footer__links a{transition:color .18s}
.footer__links a:hover{color:var(--tx-2)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- АДАПТИВ (мобильного макета нет) ---------- */
@media (max-width:1400px){ .bottom{grid-template-columns:1fr 420px} }
@media (max-width:1180px){
  .nav{gap:22px;font-size:14px}
  .bottom{grid-template-columns:1fr}
  .bottom__right{border-left:0;border-top:1px solid rgba(255,255,255,.07)}
  .features{grid-template-columns:repeat(3,1fr)}
  .stats{flex-wrap:wrap}
  .stats__cell{flex:1 0 33%;padding-block:12px}
  .stats__cell+.stats__cell::before{display:none}
}
@media (max-width:820px){
  .container{width:calc(100% - 32px)}
  .header__inner{flex-wrap:wrap;justify-content:space-between}
  .nav{order:3;flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start;gap:16px;font-size:13px}
  .btn-login{margin-left:auto}
  .hero__brand{margin-inline:auto}
  .hero__sub{font-size:24px;white-space:normal}
  .hero__cta{flex-direction:column;align-items:center}
  .features{grid-template-columns:repeat(2,1fr)}
  .footer__inner{gap:18px}
  .footer__socials,.footer__links{margin-left:0}
}
@media (max-width:520px){
  .stats__cell{flex:1 0 50%}
  .features{grid-template-columns:1fr 1fr}
  .btn{width:100%;max-width:320px}
  .hero__emblem{width:180px;height:214px}
  .footer__links{gap:14px;font-size:11px}
}



/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */
@media (max-width:640px){
  /* Логотип в ряд не помещается: герб 177px + надпись 391px при
     доступных ~343px. Ставим столбиком, как было в 1537. */
  .hero__brand{flex-direction:column;align-items:center;margin-left:0}
  .hero__emblem{width:132px;height:157px}
  .hero__lockup{margin-top:6px;width:100%}
  .hero__wordmark{width:min(300px,100%);aspect-ratio:900/175;height:auto}
  .hero__orn{width:min(150px,60%)}
  .hero__sub{font-size:22px}
  .hero{padding-top:34px}

  /* Кнопки были разной ширины (250 и 293) — у них min-width, а подписи
     разной длины. На узком экране тянем обе на всю ширину. */
  .hero__cta{flex-direction:column;gap:14px;margin-top:30px}
  .hero__cta .cta-item{width:100%}
  .hero__cta .btn{min-width:0;width:100%;height:66px}

  /* Колонки нижнего блока не сжимались ниже содержимого и вылезали
     за экран на 14px */
  .bottom__left,.bottom__right{min-width:0;padding-inline:16px}
  .bottom__right{border-left:0}
  .footer__inner{flex-direction:column;gap:16px;text-align:center}
  .footer__links{flex-wrap:wrap;justify-content:center;gap:12px}
}

@media (max-width:480px){
  .features{grid-template-columns:1fr}
  .stats{flex-wrap:wrap}
  .stats__cell{flex:1 1 50%}
}



/* ============================================================
   ТЕСТ: ГЛАВНАЯ БЕЗ ГЕРБА, НАДПИСЬ ПО ШИРИНЕ КНОПОК
   ============================================================
   Временная проба композиции. Чтобы откатить — удалить этот блок и
   обёртку .hero__stack в landing.blade.php. */

/* Обёртка нейтральна везде, кроме десктопного первого экрана */
.hero__stack{display:contents}

@media (min-width:1025px) and (min-height:640px){
  /* Герб скрыт, а не удалён из разметки: возврат — одна строка */
  .screen--full .hero__emblem{display:none}

  /* Колонка шириной по содержимому. Ширину задаёт ряд кнопок —
     он единственный, кто участвует в расчёте (см. трюк с надписью ниже). */
  .screen--full .hero__stack{
    display:flex;flex-direction:column;align-items:flex-start;
    width:fit-content;
    /* Подъём на 20px именно смещением, а не отступом: margin-bottom
       увеличивал высоту блока и утягивал за собой статистику вниз —
       связка визуально опускалась вместо того, чтобы подниматься.
       relative/top сдвигает картинку, не трогая раскладку соседей. */
    position:relative;top:-40px;
  }

  /* Компенсация −19px гасила прозрачные поля герба, которого больше нет */
  .screen--full .hero__brand{margin-left:0;width:100%}
  .screen--full .hero__lockup{width:100%;max-width:none;align-items:flex-start;margin-top:0}

  /* width:0 + min-width:100% — надпись НЕ участвует в расчёте ширины
     колонки (иначе тянула бы её до своих родных 900px), но растягивается
     ровно на ширину, которую задали кнопки. Так связка совпадает по краям
     на любом языке: украинское «ЗАВАНТАЖИТИ КЛІЄНТ» шире русского, и
     жёстко заданная ширина разъехалась бы. */
  .screen--full .hero__wordmark{width:0;min-width:100%;height:auto;max-width:none}
  /* Колонка выровнена по левому краю, поэтому ромб уехал бы туда же.
     align-self возвращает ему центр относительно надписи. */
  .screen--full .hero__orn{width:min(298px,30vh);margin-top:-18px;align-self:center}
  /* Просвет надпись → подпись складывается из захода ромба на прозрачный
     низ вордмарка (отрицательный margin выше) и отступа самой подписи. */
  .screen--full .hero__sub{font-size:min(44px,4.4vh);margin-top:3px}

  /* Ряд кнопок задаёт ширину — значит, сам не растягивается.
     margin-top перебивает исходные 53.2px из макета: там связка была
     с гербом и требовала больше воздуха, теперь она компактнее. */
  .screen--full .hero__cta{width:auto;margin-top:min(20px,2vh)}
}

/* Подъём на 40px рассчитан на окно, где над связкой есть запас.
   На невысоком экране свободного места нет, и тот же сдвиг заводил
   надпись под шапку (верх надписи оказывался на 10px ВЫШЕ низа меню).
   Там ограничиваем сдвиг тем, что реально доступно. */
@media (min-width:1025px) and (min-height:640px) and (max-height:899px){
  .screen--full .hero__stack{top:-10px}
}