/* =========================================================
   CRDGAME HOME 2
   Файл: /file/home/home2_0/home2.css
   Версия: 20260702_clean_final_4
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

:root {
 --crd-bg: #050403;
 --crd-bg-2: #0c0907;

 --crd-line: rgba(190, 154, 92, .28);
 --crd-line-2: rgba(190, 154, 92, .44);

 --crd-gold: #b89a63;
 --crd-gold-2: #d4bc84;

 --crd-title: #f1eadc;
 --crd-text: #d8ccba;
 --crd-muted: #aa9d8b;
 --crd-white: #fff7ea;

 --crd-wrap: min(1480px, calc(100vw - 120px));
 --crd-wrap-wide: min(1680px, calc(100vw - 90px));

 --crd-font-head: Arial, Helvetica, sans-serif;
 --crd-font-heavy: "Arial Black", Arial, Helvetica, sans-serif;
 --crd-font-serif: Georgia, "Times New Roman", serif;
 --crd-font-body: Arial, Helvetica, sans-serif;

 --crd-main-bg: url("/file/home/home2_0/cd_main_bg.jpg");
 --crd-news-bg: url("/file/home/home2_0/cd_news_bg.png");
 --crd-base-bg: url("/file/home/home2_0/bazafon.jpg");
 --crd-spr: url("/file/home/home2_0/cd_main_spr.png");


 /* =======================================================
    HERO LOGO — регулировка десктопа / 1980px
    top — положение всего блока лого
    ring-w / ring-h — размер синей обводки
    img-w — размер самого логотипа
    img-top — сдвиг картинки логотипа внутри обводки
    content-top — отступ hero-текста от верха
    ======================================================= */

 --crd-hero-logo-top: 76px;
 --crd-hero-logo-area-w: 900px;
 --crd-hero-logo-area-h: 300px;
 --crd-hero-ring-w: 900px;
 --crd-hero-ring-h: 390px;
 --crd-hero-img-w: 560px;
 --crd-hero-img-top: 12px;
 --crd-hero-content-top: 320px;

 /* =======================================================
    SECTION TITLE LINES — регулировка линий у заголовков
    line-max — максимальная длина линии
    line-min — минимальная ширина колонки линии
    ======================================================= */

 --crd-title-line-max: 360px;
 --crd-title-line-min: 60px;
 --crd-title-line-gap: clamp(18px, 2.2vw, 34px);
}

@media (min-width: 2400px) {
 :root {
  --crd-wrap: min(2200px, calc(100vw - 180px));
  --crd-wrap-wide: min(2200px, calc(100vw - 160px));

  --crd-hero-logo-top: 118px;
  --crd-hero-logo-area-w: 1000px;
  --crd-hero-logo-area-h: 330px;
  --crd-hero-ring-w: 1000px;
  --crd-hero-ring-h: 460px;
  --crd-hero-img-w: 660px;
  --crd-hero-img-top: 15px;
  --crd-hero-content-top: 370px;
 }
}

/* =========================================================
   PAGE BASE
   ========================================================= */

html,
body {
 min-height: 100% !important;
 background-color: #050403 !important;
 background-image:
  radial-gradient(circle at 50% 0%, rgba(184,154,99,.12), transparent 34%),
  var(--crd-main-bg) !important;
 background-position: center top !important;
 background-size: cover !important;
 background-repeat: no-repeat !important;
 background-attachment: fixed !important;
 overflow-x: hidden !important;
}

body {
 color: var(--crd-text) !important;
 text-rendering: geometricPrecision;
 -webkit-font-smoothing: antialiased;
}

#casing,
#content,
.wrapper,
.wrapper.main_wrapper,
.page-content-wrapper {
 background: transparent !important;
}

.crd-home2,
.crd-home2 * {
 box-sizing: border-box;
}

.crd-home2 {
 position: relative;
 width: 100vw;
 max-width: 100vw;
 min-height: 100vh;
 margin-left: calc(50% - 50vw);
 margin-right: calc(50% - 50vw);
 margin-bottom: -1px;
 padding-bottom: 0;
 overflow: hidden;
 color: var(--crd-text);
 background:
  linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.46) 42%, rgba(0,0,0,.78) 100%),
  var(--crd-main-bg);
 background-size: cover;
 background-position: center top;
 background-repeat: no-repeat;
 font-family: var(--crd-font-body);
}

.crd-home2::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 background:
  radial-gradient(circle at 50% 4%, rgba(184,154,99,.07), transparent 26%),
  linear-gradient(90deg, rgba(0,0,0,.56), rgba(0,0,0,.08) 50%, rgba(0,0,0,.58));
}

.crd-home2 > * {
 position: relative;
 z-index: 1;
}

.crd-home2 a {
 color: inherit;
 text-decoration: none;
}

.crd-home2 h1,
.crd-home2 h2,
.crd-home2 h3,
.crd-home2 p {
 margin: 0;
 padding: 0;
}

.crd-home-wrap {
 width: var(--crd-wrap);
 max-width: var(--crd-wrap);
 margin: 0 auto;
}

.crd-home2 + .cd-footer,
footer.cd-footer {
 margin-top: 0 !important;
}

/* =========================================================
   COMMON
   ========================================================= */

.crd-kicker {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 margin: 0 0 16px;
 color: var(--crd-gold);
 font-family: var(--crd-font-head);
 font-weight: 900;
 font-size: 11px;
 line-height: 1;
 letter-spacing: 3px;
 text-transform: uppercase;
 text-shadow: 0 2px 12px rgba(0,0,0,.74);
}

.crd-kicker::before {
 content: "";
 display: block;
 width: 46px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--crd-gold));
 opacity: .88;
}

.crd-more-line {
 display: flex;
 justify-content: center;
 margin-top: 42px;
}

.crd-more-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 168px;
 height: 44px;
 padding: 0 22px;
 border: 1px solid rgba(184,154,99,.48);
 background: rgba(0,0,0,.18);
 color: #d7c8b2;
 font-family: var(--crd-font-serif);
 font-size: 15px;
 line-height: 1;
 transition: border-color .25s ease, color .25s ease, background .25s ease, filter .25s ease;
}

.crd-more-btn i {
 display: inline-block;
 width: 14px;
 height: 14px;
 margin: 1px 10px 0 0;
 background-image: var(--crd-spr);
 background-size: 466px 466px;
 background-position: -138.6px -205.2px;
 background-repeat: no-repeat;
}

.crd-more-btn:hover {
 color: var(--crd-title);
 border-color: rgba(210,183,127,.78);
 background: rgba(184,154,99,.08);
 filter: brightness(1.08);
}

/* =========================================================
   REVEAL
   ========================================================= */

.crd-reveal {
 opacity: 0;
 transform: translateY(42px);
 transition:
  opacity .82s ease,
  transform .82s cubic-bezier(.19, 1, .22, 1);
}

.crd-reveal.is-visible,
.crd-home2.is-loaded .crd-reveal {
 opacity: 1;
 transform: translateY(0);
}

/* =========================================================
   HERO
   ========================================================= */

.header-logo-center {
 display: none !important;
}

.crd-home-hero {
 position: relative;
 min-height: calc(100svh - 52px);
 display: flex;
 align-items: stretch;
 overflow: hidden;
 margin-top: 0;
 padding-top: 0;
 background:
  linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.30) 48%, rgba(0,0,0,.70)),
  var(--crd-main-bg);
 background-size: cover;
 background-position: center;
 border-bottom: 1px solid rgba(184,154,99,.16);
}

.crd-home-hero__shade {
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  radial-gradient(circle at 50% 16%, rgba(0,0,0,.02), rgba(0,0,0,.34) 46%, rgba(0,0,0,.62) 100%),
  linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.14) 48%, rgba(0,0,0,.62)),
  linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.38) 74%, rgba(0,0,0,.62));
}

/* =========================================================
   HERO LOGO FRAME
   ========================================================= */

.crd-hero-logo-frame {
 position: absolute;
 left: 50%;
 top: var(--crd-hero-logo-top);
 z-index: 6;
 width: var(--crd-hero-logo-area-w);
 height: var(--crd-hero-logo-area-h);
 transform: translateX(-50%);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: visible;
 pointer-events: none;
}

.crd-hero-logo-frame::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 1;
 width: var(--crd-hero-ring-w);
 height: var(--crd-hero-ring-h);
 transform: translate(-50%, -50%);
 background-image:
  radial-gradient(circle at 50% 50%, rgba(90,125,190,.18), transparent 54%),
  var(--crd-logo-frame);
 background-repeat: no-repeat;
 background-position: center center;
 background-size: 100% 100%;
 opacity: .92;
 filter:
  brightness(1.08)
  contrast(1.04)
  drop-shadow(0 20px 50px rgba(0,0,0,.75));
}

.crd-hero-logo-frame img,
.crd-hero-logo-frame .site-logo-img,
.crd-hero-logo-img {
 position: relative;
 z-index: 2;
 top: var(--crd-hero-img-top);
 display: block;
 width: var(--crd-hero-img-w);
 max-width: 82%;
 height: auto;
 margin: 0 auto;
 object-fit: contain;
 transform: none;
 filter:
  brightness(1.03)
  contrast(1.06)
  drop-shadow(0 12px 28px rgba(0,0,0,.95))
  drop-shadow(0 0 18px rgba(100,145,210,.24));
}

.crd-home-hero__inner {
 position: relative;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 430px;
 gap: 90px;
 align-items: center;
 min-height: calc(100svh - 52px);
 padding: var(--crd-hero-content-top) 0 95px;
}

.crd-home-hero__content {
 max-width: 760px;
}

.crd-home-hero__content h1 {
 color: var(--crd-white);
 font-family: var(--crd-font-heavy);
 font-size: clamp(56px, 5.7vw, 106px);
 font-weight: 900;
 line-height: 1.03;
 letter-spacing: -2px;
 text-transform: uppercase;
 text-shadow:
  0 4px 16px rgba(0,0,0,.92),
  0 16px 44px rgba(0,0,0,.78);
}

.crd-home-hero__content p {
 max-width: 650px;
 margin-top: 28px;
 color: rgba(246,238,224,.94);
 font-size: 17px;
 line-height: 1.8;
 text-shadow: 0 3px 14px rgba(0,0,0,.92);
}

.crd-home-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 34px;
}

.crd-home-actions a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 132px;
 height: 42px;
 padding: 0 18px;
 border: 1px solid rgba(184,154,99,.46);
 background: rgba(0,0,0,.24);
 color: #d7c8ae;
 font-family: var(--crd-font-head);
 font-weight: 900;
 font-size: 10px;
 line-height: 1;
 letter-spacing: 1px;
 text-transform: uppercase;
 transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.crd-home-actions a:hover {
 color: var(--crd-title);
 border-color: rgba(210,183,127,.82);
 background: rgba(184,154,99,.10);
}

.crd-home-hero__panel {
 align-self: center;
 padding: 30px 34px;
 border: 1px solid rgba(184,154,99,.34);
 background:
  linear-gradient(135deg, rgba(27,20,13,.82), rgba(7,6,5,.70)),
  radial-gradient(circle at 100% 0%, rgba(184,154,99,.14), transparent 44%);
 box-shadow: 0 24px 70px rgba(0,0,0,.48);
}

.crd-panel-label {
 display: block;
 margin-bottom: 18px;
 color: var(--crd-gold);
 font-family: var(--crd-font-head);
 font-weight: 900;
 font-size: 10px;
 letter-spacing: 2px;
 text-transform: uppercase;
}

.crd-hero-row {
 display: block;
 position: relative;
 padding: 0 0 18px 24px;
 margin-bottom: 18px;
 border-bottom: 1px solid rgba(184,154,99,.16);
}

.crd-hero-row:last-child {
 margin-bottom: 0;
 padding-bottom: 0;
 border-bottom: 0;
}

.crd-hero-row::before {
 content: "";
 position: absolute;
 left: 0;
 top: 5px;
 width: 9px;
 height: 9px;
 border: 1px solid var(--crd-gold);
 transform: rotate(45deg);
 opacity: .85;
}

.crd-hero-row strong {
 display: block;
 color: var(--crd-title);
 font-family: var(--crd-font-head);
 font-weight: 900;
 font-size: 15px;
 line-height: 1.15;
 text-transform: uppercase;
 text-shadow: none;
}

.crd-hero-row span {
 display: block;
 margin-top: 7px;
 color: #c2b4a0;
 font-size: 13px;
 line-height: 1.45;
}

/* =========================================================
   WORLD
   ========================================================= */

.crd-world {
 padding: 110px 0;
 background:
  linear-gradient(180deg, rgba(7,5,3,.74), rgba(12,9,6,.76)),
  var(--crd-main-bg);
 background-size: cover;
 background-position: center top;
}

.crd-world__inner {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
 gap: 70px;
 align-items: center;
}

.crd-world__media {
 position: relative;
 aspect-ratio: 16 / 9;
 border: 1px solid rgba(184,154,99,.30);
 overflow: hidden;
 background: #050403;
 box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.crd-world__media::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.12)),
  radial-gradient(circle at 50% 50%, transparent, rgba(0,0,0,.10));
}

.crd-world__media video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(.96) saturate(.90) contrast(1.04);
}

.crd-world__text h2 {
 color: var(--crd-title);
 font-family: var(--crd-font-serif);
 font-size: clamp(44px, 4.4vw, 76px);
 font-weight: 400;
 line-height: 1.08;
 text-shadow: 0 4px 22px rgba(0,0,0,.55);
}

.crd-world__text p {
 max-width: 760px;
 margin-top: 22px;
 color: rgba(238,229,214,.95);
 font-size: 16px;
 line-height: 1.85;
 text-shadow: 0 2px 12px rgba(0,0,0,.54);
}

.crd-world__facts {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 margin-top: 36px;
 border: 1px solid rgba(184,154,99,.24);
 background: rgba(0,0,0,.16);
}

.crd-world__facts div {
 min-height: 72px;
 padding: 18px 20px;
 border-right: 1px solid rgba(184,154,99,.16);
}

.crd-world__facts div:last-child {
 border-right: 0;
}

.crd-world__facts b {
 display: block;
 margin-bottom: 8px;
 color: var(--crd-gold);
 font-family: var(--crd-font-head);
 font-weight: 900;
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.crd-world__facts span {
 color: var(--crd-title);
 font-size: 14px;
}

/* =========================================================
   OFFICIAL INFORMER SECTIONS
   ========================================================= */

.crd-official-section {
 position: relative;
 padding: 105px 0 96px;
 overflow: hidden;
 background-color: #080706;
 background-image:
  linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28)),
  var(--crd-news-bg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 border-top: 1px solid rgba(184,154,99,.18);
 border-bottom: 1px solid rgba(184,154,99,.13);
}

.crd-official-section::before {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  radial-gradient(circle at 50% 18%, rgba(184,154,99,.10), transparent 34%),
  linear-gradient(90deg, rgba(0,0,0,.34), transparent 50%, rgba(0,0,0,.34));
}

.crd-official-section > .crd-home-wrap {
 position: relative;
 z-index: 1;
}

/* фон Базы CRDGAME */
#crdHome2 .crd-official-section.crd-official-section--base {
 background-color: #080706 !important;
 background-image:
  radial-gradient(circle at 50% 8%, rgba(184,154,99,.16), transparent 32%),
  linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.24) 45%, rgba(0,0,0,.42)),
  var(--crd-base-bg) !important;
 background-repeat: no-repeat !important;
 background-size: cover !important;
 background-position: center center !important;
}

#crdHome2 .crd-official-section.crd-official-section--base::before,
#crdHome2 .crd-official-section.crd-official-section--base::after {
 background-image: none !important;
}

/* =========================================================
   OFFICIAL HEADINGS — стабильные линии из HTML
   ========================================================= */

.crd-official-head,
.crd-official-head--stable {
 position: relative;
 display: grid;
 grid-template-columns:
  minmax(var(--crd-title-line-min), 1fr)
  auto
  minmax(var(--crd-title-line-min), 1fr);
 column-gap: var(--crd-title-line-gap);
 align-items: center;
 justify-items: center;
 width: 100%;
 min-height: 150px;
 margin: 0 0 48px;
 padding: 0;
 overflow: visible;
 text-align: center;
 isolation: isolate;
}

/* полностью отключаем псевдо-линии, чтобы они больше не конфликтовали */
.crd-official-head::before,
.crd-official-head::after,
.crd-official-head h2::before,
.crd-official-head h2::after {
 content: none !important;
 display: none !important;
}

/* реальные линии */
.crd-title-line {
 position: relative;
 z-index: 4;
 display: block;
 width: 100%;
 max-width: var(--crd-title-line-max);
 height: 1px;
 opacity: .72;
 pointer-events: none;
}

.crd-title-line--left {
 grid-column: 1;
 grid-row: 1;
 justify-self: end;
 background: linear-gradient(90deg, transparent, rgba(184,154,99,.50));
}

.crd-title-line--right {
 grid-column: 3;
 grid-row: 1;
 justify-self: start;
 background: linear-gradient(90deg, rgba(184,154,99,.50), transparent);
}

/* символ за текстом */
.crd-official-mark {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 1;
 display: block;
 width: 162px;
 height: 140px;
 margin: 0;
 transform: translate(-50%, -52%);
 opacity: .34;
 background-image: var(--crd-spr);
 background-repeat: no-repeat;
 background-size: 800px 800px;
 background-position: 0 -133px;
 filter: sepia(.16) saturate(.72) brightness(1.10);
 pointer-events: none;
}

/* текст заголовка */
.crd-official-head h2,
.crd-official-head--stable h2 {
 grid-column: 2;
 grid-row: 1;
 position: relative;
 z-index: 5;
 display: block;
 width: auto;
 max-width: min(760px, 72vw);
 margin: 0 auto;
 padding: 0;
 color: #f3eadb;
 font-family: var(--crd-font-serif);
 font-size: clamp(44px, 3.4vw, 72px);
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0;
 text-align: center;
 text-transform: none;
 white-space: nowrap;
 text-shadow: 0 4px 22px rgba(0,0,0,.72);
}

/* =========================================================
   OFFICIAL CARDS
   ========================================================= */

.crd-official-grid {
 position: relative;
 z-index: 2;
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 34px;
 align-items: start;
}

.crd-official-card,
.crd-base-card {
 display: block;
 min-width: 0;
 color: var(--crd-text);
 text-decoration: none;
}

.crd-official-card__media,
.crd-base-card__media {
 position: relative;
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 border: 1px solid rgba(184,154,99,.34);
 background: rgba(0,0,0,.28);
 box-shadow: 0 16px 44px rgba(0,0,0,.24);
}

.crd-official-card__media::after,
.crd-base-card__media::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background:
  linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.14)),
  radial-gradient(circle at 50% 50%, transparent, rgba(0,0,0,.08));
 opacity: .42;
 transition: opacity .3s ease;
}

.crd-official-card__media img,
.crd-base-card__media img {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 max-width: none !important;
 min-width: 100% !important;
 min-height: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 object-fit: cover !important;
 object-position: center center !important;
 vertical-align: top !important;
 border: 0 !important;
 filter: brightness(.96) saturate(.94) contrast(1.04) !important;
 transform: scale(1.001);
 transition:
  transform .55s cubic-bezier(.19, 1, .22, 1),
  filter .35s ease;
}

.crd-official-card:hover .crd-official-card__media img,
.crd-base-card:hover .crd-base-card__media img {
 transform: scale(1.035);
 filter: brightness(1.04) saturate(.98) contrast(1.05) !important;
}

.crd-official-card:hover .crd-official-card__media::after,
.crd-base-card:hover .crd-base-card__media::after {
 opacity: .24;
}

.crd-official-card__title,
.crd-base-card__title {
 display: block;
 margin: 18px 0 0;
 padding: 0;
 color: rgba(246,238,222,.96);
 font-family: var(--crd-font-serif);
 font-size: 20px;
 font-weight: 700;
 line-height: 1.28;
 text-shadow: 0 2px 14px rgba(0,0,0,.42);
 transition: color .25s ease;
}

.crd-official-card:hover .crd-official-card__title,
.crd-base-card:hover .crd-base-card__title {
 color: #fff7e9;
}

.crd-base-card__body {
 display: block;
 padding: 0;
}

.crd-base-card__label {
 display: none !important;
}

.crd-base-card__placeholder,
.crd-official-card__placeholder {
 display: block;
 width: 100%;
 height: 100%;
 background:
  radial-gradient(circle at 50% 50%, rgba(184,154,99,.16), transparent 42%),
  linear-gradient(135deg, rgba(184,154,99,.12), rgba(0,0,0,.18));
}

/* база на широком экране: ровный первый ряд */
.crd-base-main .crd-base-card:nth-child(n+6) {
 display: none !important;
}

/* uCoz image wrappers */
.crd-base-card__media .news-image-wrap,
.crd-base-card__media .news-image-wrap.center,
.crd-official-card__media .news-image-wrap,
.crd-official-card__media .news-image-wrap.center {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 padding: 0 !important;
 text-align: left !important;
 overflow: hidden !important;
 line-height: 0 !important;
}

.crd-base-card__media .news-image-wrap a,
.crd-base-card__media .ulightbox,
.crd-official-card__media .news-image-wrap a,
.crd-official-card__media .ulightbox {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 max-width: none !important;
 margin: 0 !important;
 padding: 0 !important;
 pointer-events: none !important;
 cursor: inherit !important;
}

.crd-base-card__media .news-image-caption,
.crd-official-card__media .news-image-caption {
 display: none !important;
}

.crd-base-card__media .news-image-wrap img,
.crd-official-card__media .news-image-wrap img {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 max-width: none !important;
 min-width: 100% !important;
 min-height: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 object-fit: cover !important;
 object-position: center center !important;
 vertical-align: top !important;
 border: 0 !important;
}

/* =========================================================
   STORY VIDEO
   ========================================================= */

.crd-story {
 position: relative;
 min-height: 760px;
 display: flex;
 align-items: center;
 overflow: hidden;
 background: #060504;
}

.crd-story__video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 opacity: .62;
 filter: brightness(.98) saturate(.88) contrast(1.02);
}

.crd-story__shade {
 position: absolute;
 inset: 0;
 background:
  linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.26) 45%, rgba(0,0,0,.56)),
  linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.42));
}

.crd-story__inner {
 position: relative;
 max-width: var(--crd-wrap);
 padding: 100px 0;
}

.crd-story h2 {
 max-width: 660px;
 color: var(--crd-title);
 font-family: var(--crd-font-serif);
 font-size: clamp(46px, 4.6vw, 82px);
 font-weight: 400;
 line-height: 1.05;
 text-shadow: 0 4px 22px rgba(0,0,0,.82);
}

.crd-story p {
 max-width: 690px;
 margin-top: 22px;
 color: rgba(245,236,222,.96);
 font-size: 16px;
 line-height: 1.88;
 text-shadow: 0 2px 10px rgba(0,0,0,.78);
}

/* =========================================================
   COMBAT VIDEO
   ========================================================= */

.crd-combat {
 position: relative;
 min-height: 660px;
 display: flex;
 align-items: center;
 overflow: hidden;
 background: #050403;
}

.crd-combat__video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 opacity: .62;
 filter: brightness(.98) saturate(.90) contrast(1.02);
}

.crd-combat__shade {
 position: absolute;
 inset: 0;
 background:
  linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.25) 45%, rgba(0,0,0,.62)),
  linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.44));
}

.crd-combat__inner {
 position: relative;
 padding: 110px 0;
}

.crd-combat h2 {
 max-width: 780px;
 color: #e5c979;
 font-family: var(--crd-font-serif);
 font-size: clamp(48px, 5vw, 88px);
 font-weight: 400;
 line-height: 1.06;
 text-shadow: 0 4px 28px rgba(0,0,0,.82);
}

.crd-combat p {
 max-width: 620px;
 margin-top: 24px;
 color: rgba(245,236,222,.96);
 font-size: 16px;
 line-height: 1.75;
 text-shadow: 0 2px 10px rgba(0,0,0,.78);
}

/* =========================================================
   RESPONSIVE: до 1980px
   ========================================================= */

@media (max-width: 1980px) {
 :root {
  --crd-hero-logo-top: 72px;
  --crd-hero-logo-area-w: 900px;
  --crd-hero-logo-area-h: 300px;
  --crd-hero-ring-w: 900px;
  --crd-hero-ring-h: 390px;
  --crd-hero-img-w: 560px;
  --crd-hero-img-top: 12px;
  --crd-hero-content-top: 320px;
 }
}

/* =========================================================
   RESPONSIVE: до 1600px
   ========================================================= */

@media (max-width: 1600px) {
 :root {
  --crd-wrap: min(1360px, calc(100vw - 90px));

  --crd-hero-logo-top: 66px;
  --crd-hero-logo-area-w: 760px;
  --crd-hero-logo-area-h: 255px;
  --crd-hero-ring-w: 760px;
  --crd-hero-ring-h: 330px;
  --crd-hero-img-w: 470px;
  --crd-hero-img-top: 10px;
  --crd-hero-content-top: 285px;
 }

 .crd-home-hero__inner {
  gap: 70px;
 }

 .crd-home-hero__content h1 {
  font-size: clamp(52px, 5.4vw, 92px);
 }

 .crd-home-hero__panel {
  width: 390px;
 }
}

/* =========================================================
   RESPONSIVE: до 1280px
   ========================================================= */

@media (max-width: 1280px) {
 :root {
  --crd-wrap: min(1180px, calc(100vw - 64px));

  --crd-hero-logo-top: 62px;
  --crd-hero-logo-area-w: 680px;
  --crd-hero-logo-area-h: 220px;
  --crd-hero-ring-w: 680px;
  --crd-hero-ring-h: 295px;
  --crd-hero-img-w: 410px;
  --crd-hero-img-top: 8px;
  --crd-hero-content-top: 250px;
 }

 .crd-home-hero {
  min-height: 820px;
 }

 .crd-home-hero__inner {
  grid-template-columns: 1fr;
  gap: 44px;
  min-height: 820px;
  padding-bottom: 74px;
 }

 .crd-home-hero__panel {
  max-width: 620px;
  width: auto;
 }

 .crd-world__inner {
  grid-template-columns: 1fr;
 }

 .crd-official-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .crd-base-main .crd-base-card:nth-child(n+6) {
  display: block !important;
 }
}

/* =========================================================
   RESPONSIVE: до 980px
   ========================================================= */

@media (max-width: 980px) {
 :root {
  --crd-wrap: min(100%, calc(100vw - 40px));

  --crd-hero-logo-top: 58px;
  --crd-hero-logo-area-w: 590px;
  --crd-hero-logo-area-h: 190px;
  --crd-hero-ring-w: 590px;
  --crd-hero-ring-h: 255px;
  --crd-hero-img-w: 355px;
  --crd-hero-img-top: 7px;
  --crd-hero-content-top: 220px;

  --crd-title-line-max: 130px;
  --crd-title-line-min: 46px;
  --crd-title-line-gap: 18px;
 }

 html,
 body {
  background-attachment: scroll !important;
 }

 .crd-home-hero {
  min-height: 800px;
 }

 .crd-home-hero__inner {
  min-height: 800px;
  padding-bottom: 70px;
 }

 .crd-home-hero__content h1 {
  font-size: clamp(44px, 11vw, 78px);
  line-height: 1.04;
 }

 .crd-story__video,
 .crd-combat__video {
  opacity: .66;
 }

 .crd-world__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .crd-official-section {
  padding: 78px 0 72px;
  background-position: center top;
 }

 .crd-official-head,
 .crd-official-head--stable {
  min-height: 124px;
  margin-bottom: 32px;
 }

 .crd-official-mark {
  width: 124px;
  height: 108px;
  background-size: 612px 612px;
  background-position: 0 -102px;
  opacity: .32;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  max-width: 68vw;
  font-size: clamp(36px, 9vw, 52px);
 }

 .crd-official-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: 18px;
 }

 .crd-story,
 .crd-combat {
  min-height: 680px;
 }
}

/* =========================================================
   RESPONSIVE: mobile cards vertical
   ========================================================= */

@media (max-width: 760px) {
 html,
 body,
 .crd-home2 {
  overflow-x: hidden !important;
 }

 .crd-home-wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 22px;
  padding-right: 22px;
 }

 .crd-official-section {
  overflow: hidden;
 }

 .crd-official-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: initial;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  gap: 34px;
  overflow: visible;
  scroll-snap-type: none;
 }

 .crd-official-card,
 .crd-base-card {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-snap-align: unset;
 }

 .crd-official-card__media,
 .crd-base-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
  color: #f3eadb;
  font-size: 21px;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
 }

 .crd-more-line {
  margin-top: 36px;
 }

 .crd-more-btn {
  min-width: 162px;
  height: 44px;
 }
}

/* =========================================================
   RESPONSIVE: до 720px
   ========================================================= */

@media (max-width: 720px) {
 :root {
  --crd-wrap: min(100%, calc(100vw - 28px));

  /* =====================================================
     МОБИЛЬНОЕ HERO-ЛОГО — регулировать здесь
     logo-top — положение всего блока
     ring-w / ring-h — размер синей обводки
     img-w — размер логотипа
     img-top — сдвиг логотипа внутри обводки
     content-top — отступ текста hero
     ===================================================== */

  --crd-hero-logo-top: 24px;
  --crd-hero-logo-area-w: 100vw;
  --crd-hero-logo-area-h: 174px;
  --crd-hero-ring-w: min(490px, 132vw);
  --crd-hero-ring-h: 218px;
  --crd-hero-img-w: min(265px, 70vw);
  --crd-hero-img-top: 10px;
  --crd-hero-content-top: 206px;

  --crd-title-line-max: 78px;
  --crd-title-line-min: 34px;
  --crd-title-line-gap: 12px;
 }

 .crd-kicker {
  font-size: 9px;
  letter-spacing: 2px;
 }

 .crd-kicker::before {
  width: 32px;
 }

 .crd-home-hero {
  min-height: 810px;
 }

 .crd-hero-logo-frame::before {
  opacity: .98;
  filter:
   brightness(1.18)
   contrast(1.12)
   drop-shadow(0 14px 32px rgba(0,0,0,.86));
 }

 .crd-hero-logo-frame img,
 .crd-hero-logo-frame .site-logo-img,
 .crd-hero-logo-img {
  max-width: 270px;
  opacity: 1;
  filter:
   brightness(1.10)
   contrast(1.12)
   drop-shadow(0 9px 20px rgba(0,0,0,.96))
   drop-shadow(0 0 14px rgba(100,155,235,.34));
 }

 .crd-home-hero__inner {
  min-height: 810px;
  padding-bottom: 58px;
 }

 .crd-home-hero__content {
  position: relative;
  z-index: 4;
 }

 .crd-home-hero__content p,
 .crd-world__text p,
 .crd-story p,
 .crd-combat p {
  font-size: 14px;
  line-height: 1.7;
 }

 .crd-home-actions a {
  min-width: 0;
  flex: 1 1 auto;
 }

 .crd-home-hero__panel {
  padding: 24px;
 }

 .crd-world {
  padding: 74px 0;
 }

 .crd-world__facts {
  grid-template-columns: 1fr;
 }

 .crd-world__facts div {
  border-right: 0;
  border-bottom: 1px solid rgba(184,154,99,.16);
 }

 .crd-world__facts div:last-child {
  border-bottom: 0;
 }

 .crd-world__text h2,
 .crd-story h2,
 .crd-combat h2 {
  font-size: clamp(36px, 11vw, 54px);
 }

 .crd-official-head,
 .crd-official-head--stable {
  min-height: 112px;
  margin-bottom: 30px;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  max-width: 62vw;
  white-space: normal;
  font-size: 38px;
 }

 .crd-story__inner,
 .crd-combat__inner {
  padding: 78px 0;
 }

 .crd-story,
 .crd-combat {
  min-height: 620px;
 }

 #crdHome2 .crd-official-section.crd-official-section--base {
  background-position: center top !important;
  background-image:
   radial-gradient(circle at 50% 5%, rgba(184,154,99,.14), transparent 36%),
   linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.30) 48%, rgba(0,0,0,.50)),
   var(--crd-base-bg) !important;
 }
}

/* =========================================================
   RESPONSIVE: до 520px
   ========================================================= */

@media (max-width: 520px) {
 .crd-official-section {
  padding: 66px 0 64px;
 }

 .crd-official-head,
 .crd-official-head--stable {
  min-height: 106px;
  margin-bottom: 26px;
 }

 .crd-official-mark {
  width: 104px;
  height: 90px;
  background-size: 514px 514px;
  background-position: 0 -85px;
  opacity: .30;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: 34px;
 }

 .crd-title-line {
  max-width: 64px;
 }
}

/* =========================================================
   RESPONSIVE: до 430px
   ========================================================= */

@media (max-width: 430px) {
 :root {
  /* =====================================================
     УЗКАЯ МОБИЛКА — регулировать здесь
     ===================================================== */

  --crd-hero-logo-top: 20px;
  --crd-hero-logo-area-w: 100vw;
  --crd-hero-logo-area-h: 160px;
  --crd-hero-ring-w: min(440px, 136vw);
  --crd-hero-ring-h: 198px;
  --crd-hero-img-w: min(240px, 68vw);
  --crd-hero-img-top: 8px;
  --crd-hero-content-top: 190px;

  --crd-title-line-max: 56px;
  --crd-title-line-min: 28px;
  --crd-title-line-gap: 10px;
 }

 .crd-home-wrap {
  padding-left: 18px;
  padding-right: 18px;
 }

 .crd-home-hero {
  min-height: 805px;
 }

 .crd-home-hero__inner {
  min-height: 805px;
 }

 .crd-official-grid {
  gap: 32px;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: 20px;
  line-height: 1.22;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  max-width: 64vw;
  font-size: 34px;
 }
}
/* =========================================================
   CRDGAME HOME 2 — RESPONSIVE TYPOGRAPHY
   Версия: 20260703_typo_1

   Логика:
   - 2500px+ почти не трогаем;
   - ниже 2500px текст становится спокойнее;
   - 1600–1920px уменьшаем карточки и секционные заголовки;
   - ниже 1366px дополнительно уплотняем;
   - мобильные размеры страхуем от слишком крупных 20–21px.
========================================================= */

/* =========================================================
   1921–2499px
========================================================= */

@media (min-width: 1921px) and (max-width: 2499px) {

 .crd-home-hero__content h1 {
  font-size: clamp(54px, 4.4vw, 94px) !important;
  line-height: 1.03 !important;
 }

 .crd-home-hero__content p {
  font-size: 16.5px !important;
  line-height: 1.78 !important;
 }

 .crd-world__text h2 {
  font-size: clamp(42px, 3.35vw, 68px) !important;
 }

 .crd-story h2 {
  font-size: clamp(44px, 3.65vw, 74px) !important;
 }

 .crd-combat h2 {
  font-size: clamp(46px, 3.85vw, 78px) !important;
 }

 .crd-world__text p,
 .crd-story p,
 .crd-combat p {
  font-size: 15.8px !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(42px, 2.75vw, 66px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: 19px !important;
  line-height: 1.28 !important;
 }

 .crd-kicker {
  font-size: 10.5px !important;
 }

 .crd-more-btn {
  font-size: 14.5px !important;
 }
}

/* =========================================================
   1601–1920px
========================================================= */

@media (min-width: 1601px) and (max-width: 1920px) {

 .crd-home-hero__content h1 {
  font-size: clamp(50px, 4.25vw, 84px) !important;
  line-height: 1.03 !important;
  letter-spacing: -1.6px !important;
 }

 .crd-home-hero__content p {
  max-width: 610px !important;
  margin-top: 24px !important;
  font-size: 15.8px !important;
  line-height: 1.74 !important;
 }

 .crd-home-actions {
  margin-top: 30px !important;
 }

 .crd-home-actions a {
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 9.5px !important;
 }

 .crd-home-hero__panel {
  padding: 27px 30px !important;
 }

 .crd-panel-label {
  margin-bottom: 16px !important;
  font-size: 9.5px !important;
 }

 .crd-hero-row strong {
  font-size: 14px !important;
 }

 .crd-hero-row span {
  font-size: 12.5px !important;
  line-height: 1.43 !important;
 }

 .crd-world__text h2 {
  font-size: clamp(40px, 3.15vw, 62px) !important;
 }

 .crd-world__text p {
  font-size: 15.3px !important;
  line-height: 1.78 !important;
 }

 .crd-world__facts b {
  font-size: 9.5px !important;
 }

 .crd-world__facts span {
  font-size: 13.3px !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(40px, 2.55vw, 60px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  margin-top: 16px !important;
  font-size: 18px !important;
  line-height: 1.27 !important;
 }

 .crd-story h2 {
  font-size: clamp(42px, 3.35vw, 66px) !important;
 }

 .crd-combat h2 {
  font-size: clamp(44px, 3.55vw, 70px) !important;
 }

 .crd-story p,
 .crd-combat p {
  font-size: 15.3px !important;
  line-height: 1.76 !important;
 }

 .crd-kicker {
  font-size: 10px !important;
  letter-spacing: 2.6px !important;
 }

 .crd-more-btn {
  height: 42px !important;
  font-size: 14px !important;
 }
}

/* =========================================================
   1367–1600px
========================================================= */

@media (min-width: 1367px) and (max-width: 1600px) {

 .crd-home-hero__content h1 {
  font-size: clamp(46px, 4.1vw, 74px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1.3px !important;
 }

 .crd-home-hero__content p {
  max-width: 580px !important;
  margin-top: 22px !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
 }

 .crd-home-actions a {
  height: 39px !important;
  min-width: 124px !important;
  padding: 0 15px !important;
  font-size: 9px !important;
 }

 .crd-home-hero__panel {
  padding: 25px 28px !important;
 }

 .crd-panel-label {
  font-size: 9px !important;
 }

 .crd-hero-row {
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
 }

 .crd-hero-row strong {
  font-size: 13.5px !important;
 }

 .crd-hero-row span {
  font-size: 12px !important;
 }

 .crd-world__text h2 {
  font-size: clamp(38px, 3vw, 56px) !important;
 }

 .crd-world__text p {
  font-size: 14.8px !important;
  line-height: 1.74 !important;
 }

 .crd-world__facts div {
  padding: 16px 18px !important;
 }

 .crd-world__facts b {
  font-size: 9px !important;
 }

 .crd-world__facts span {
  font-size: 13px !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(38px, 2.45vw, 54px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  margin-top: 15px !important;
  font-size: 17px !important;
  line-height: 1.27 !important;
 }

 .crd-story h2 {
  font-size: clamp(40px, 3.1vw, 60px) !important;
 }

 .crd-combat h2 {
  font-size: clamp(42px, 3.25vw, 64px) !important;
 }

 .crd-story p,
 .crd-combat p {
  font-size: 14.8px !important;
  line-height: 1.72 !important;
 }

 .crd-kicker {
  font-size: 9.5px !important;
  letter-spacing: 2.4px !important;
 }

 .crd-more-btn {
  min-width: 158px !important;
  height: 41px !important;
  font-size: 13.5px !important;
 }
}

/* =========================================================
   до 1366px
========================================================= */

@media (max-width: 1366px) {

 .crd-home-hero__content h1 {
  font-size: clamp(42px, 4.25vw, 66px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1px !important;
 }

 .crd-home-hero__content p {
  max-width: 560px !important;
  margin-top: 20px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
 }

 .crd-home-actions {
  margin-top: 27px !important;
 }

 .crd-home-actions a {
  height: 38px !important;
  min-width: 118px !important;
  padding: 0 14px !important;
  font-size: 8.8px !important;
  letter-spacing: .9px !important;
 }

 .crd-home-hero__panel {
  padding: 23px 25px !important;
 }

 .crd-panel-label {
  margin-bottom: 14px !important;
  font-size: 8.8px !important;
 }

 .crd-hero-row strong {
  font-size: 13px !important;
 }

 .crd-hero-row span {
  font-size: 11.8px !important;
  line-height: 1.42 !important;
 }

 .crd-world__text h2 {
  font-size: clamp(36px, 3.1vw, 50px) !important;
 }

 .crd-world__text p {
  font-size: 14.4px !important;
  line-height: 1.7 !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(36px, 2.65vw, 48px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  margin-top: 14px !important;
  font-size: 16px !important;
  line-height: 1.26 !important;
 }

 .crd-story h2 {
  font-size: clamp(38px, 3.3vw, 54px) !important;
 }

 .crd-combat h2 {
  font-size: clamp(40px, 3.45vw, 58px) !important;
 }

 .crd-story p,
 .crd-combat p {
  font-size: 14.4px !important;
  line-height: 1.7 !important;
 }

 .crd-more-btn {
  min-width: 154px !important;
  height: 40px !important;
  font-size: 13px !important;
 }
}

/* =========================================================
   Планшеты / малые экраны
========================================================= */

@media (max-width: 980px) {

 .crd-home-hero__content h1 {
  font-size: clamp(38px, 8.8vw, 68px) !important;
  line-height: 1.04 !important;
  letter-spacing: -1px !important;
 }

 .crd-home-hero__content p,
 .crd-world__text p,
 .crd-story p,
 .crd-combat p {
  font-size: 14px !important;
  line-height: 1.68 !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(32px, 7vw, 46px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: 17px !important;
  line-height: 1.24 !important;
 }

 .crd-story h2,
 .crd-combat h2,
 .crd-world__text h2 {
  font-size: clamp(34px, 8vw, 48px) !important;
 }

 .crd-kicker {
  font-size: 9px !important;
  letter-spacing: 2px !important;
 }
}

/* =========================================================
   Мобилка
========================================================= */

@media (max-width: 760px) {

 .crd-home-hero__content h1 {
  font-size: clamp(34px, 10vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.8px !important;
 }

 .crd-home-hero__content p,
 .crd-world__text p,
 .crd-story p,
 .crd-combat p {
  font-size: 13.5px !important;
  line-height: 1.66 !important;
 }

 .crd-home-actions a {
  height: 40px !important;
  font-size: 8.8px !important;
  letter-spacing: .85px !important;
 }

 .crd-panel-label {
  font-size: 8.8px !important;
 }

 .crd-hero-row strong {
  font-size: 12.8px !important;
 }

 .crd-hero-row span {
  font-size: 11.8px !important;
  line-height: 1.42 !important;
 }

 .crd-world__text h2,
 .crd-story h2,
 .crd-combat h2 {
  font-size: clamp(31px, 9.2vw, 44px) !important;
  line-height: 1.08 !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(28px, 8.6vw, 36px) !important;
  line-height: 1.04 !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: clamp(17px, 4.6vw, 19px) !important;
  line-height: 1.23 !important;
 }

 .crd-world__facts b {
  font-size: 9px !important;
 }

 .crd-world__facts span {
  font-size: 12.8px !important;
 }

 .crd-more-btn {
  height: 42px !important;
  font-size: 13px !important;
 }
}

/* =========================================================
   Узкая мобилка
========================================================= */

@media (max-width: 430px) {

 .crd-home-hero__content h1 {
  font-size: clamp(31px, 9.5vw, 42px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.6px !important;
 }

 .crd-home-hero__content p,
 .crd-world__text p,
 .crd-story p,
 .crd-combat p {
  font-size: 13px !important;
  line-height: 1.64 !important;
 }

 .crd-world__text h2,
 .crd-story h2,
 .crd-combat h2 {
  font-size: clamp(29px, 8.7vw, 38px) !important;
 }

 .crd-official-head h2,
 .crd-official-head--stable h2 {
  font-size: clamp(26px, 8.4vw, 34px) !important;
 }

 .crd-official-card__title,
 .crd-base-card__title {
  font-size: clamp(16px, 4.7vw, 18px) !important;
  line-height: 1.24 !important;
 }

 .crd-kicker {
  font-size: 8.5px !important;
  letter-spacing: 1.8px !important;
 }

 .crd-more-btn {
  min-width: 152px !important;
  height: 41px !important;
  font-size: 12.5px !important;
 }
}
/* =========================================================
   CRDGAME HOME — CENTER HERO LOGO main_bi_en.png
   Лого 444×138, без старой синей обводки.
   До 1980px уменьшается плавно.
   Версия: 20260714_center_hero_logo_main_bi_1
========================================================= */

/* =========================================================
   DESKTOP BASE / 1981px+
   Держим оригинальный размер 444×138
========================================================= */

:root {
 --crd-hero-logo-top: 76px;
 --crd-hero-logo-area-w: 520px;
 --crd-hero-logo-area-h: 170px;
 --crd-hero-ring-w: 0px;
 --crd-hero-ring-h: 0px;
 --crd-hero-img-w: 444px;
 --crd-hero-img-top: 0px;
 --crd-hero-content-top: 310px;
}

/* На ультрашироких не увеличиваем логотип, только чуть ниже ставим */
@media (min-width: 2400px) {
 :root {
  --crd-hero-logo-top: 82px;
  --crd-hero-logo-area-w: 520px;
  --crd-hero-logo-area-h: 170px;
  --crd-hero-ring-w: 0px;
  --crd-hero-ring-h: 0px;
  --crd-hero-img-w: 444px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 320px;
 }
}

/* =========================================================
   LOGO FRAME CLEANUP
========================================================= */

/* Старая декоративная обводка больше не нужна */
#crdHome2 .crd-home-hero .crd-hero-logo-frame::before {
 display: none !important;
 content: none !important;
}

/* Сам контейнер центрального лого */
#crdHome2 .crd-home-hero .crd-hero-logo-frame {
 position: absolute !important;

 left: 50% !important;
 top: var(--crd-hero-logo-top) !important;
 z-index: 6 !important;

 display: flex !important;
 align-items: center !important;
 justify-content: center !important;

 width: var(--crd-hero-logo-area-w) !important;
 height: var(--crd-hero-logo-area-h) !important;

 margin: 0 !important;
 padding: 0 !important;

 overflow: visible !important;
 pointer-events: none !important;

 transform: translateX(-50%) !important;
}

/* Новый PNG main_bi_en.png */
#crdHome2 .crd-home-hero .crd-hero-logo-frame .crd-hero-logo-img--new {
 position: relative !important;
 z-index: 2 !important;

 top: var(--crd-hero-img-top) !important;

 display: block !important;

 width: var(--crd-hero-img-w) !important;
 max-width: 92vw !important;
 height: auto !important;

 margin: 0 auto !important;
 padding: 0 !important;

 object-fit: contain !important;

 transform: none !important;

 filter:
  brightness(1.04)
  contrast(1.06)
  drop-shadow(0 10px 24px rgba(0,0,0,.88))
  drop-shadow(0 0 10px rgba(210,190,150,.10)) !important;
}

/* =========================================================
   1601–1980px
   Ниже 1980 начинаем уменьшать
========================================================= */

@media (min-width: 1601px) and (max-width: 1980px) {
 :root {
  --crd-hero-logo-top: 72px;
  --crd-hero-logo-area-w: 490px;
  --crd-hero-logo-area-h: 155px;
  --crd-hero-img-w: 410px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 300px;
 }
}

/* =========================================================
   1281–1600px
========================================================= */

@media (min-width: 1281px) and (max-width: 1600px) {
 :root {
  --crd-hero-logo-top: 66px;
  --crd-hero-logo-area-w: 440px;
  --crd-hero-logo-area-h: 140px;
  --crd-hero-img-w: 360px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 270px;
 }
}

/* =========================================================
   981–1280px
========================================================= */

@media (min-width: 981px) and (max-width: 1280px) {
 :root {
  --crd-hero-logo-top: 62px;
  --crd-hero-logo-area-w: 390px;
  --crd-hero-logo-area-h: 125px;
  --crd-hero-img-w: 320px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 245px;
 }
}

/* =========================================================
   721–980px
========================================================= */

@media (min-width: 721px) and (max-width: 980px) {
 :root {
  --crd-hero-logo-top: 58px;
  --crd-hero-logo-area-w: 340px;
  --crd-hero-logo-area-h: 110px;
  --crd-hero-img-w: 285px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 220px;
 }
}

/* =========================================================
   до 720px
========================================================= */

@media (max-width: 720px) {
 :root {
  --crd-hero-logo-top: 26px;
  --crd-hero-logo-area-w: 280px;
  --crd-hero-logo-area-h: 92px;
  --crd-hero-img-w: 235px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 190px;
 }

 #crdHome2 .crd-home-hero .crd-hero-logo-frame .crd-hero-logo-img--new {
  max-width: 74vw !important;

  filter:
   brightness(1.08)
   contrast(1.08)
   drop-shadow(0 8px 18px rgba(0,0,0,.90))
   drop-shadow(0 0 10px rgba(210,190,150,.12)) !important;
 }
}

/* =========================================================
   до 430px
========================================================= */

@media (max-width: 430px) {
 :root {
  --crd-hero-logo-top: 22px;
  --crd-hero-logo-area-w: 250px;
  --crd-hero-logo-area-h: 82px;
  --crd-hero-img-w: 210px;
  --crd-hero-img-top: 0px;
  --crd-hero-content-top: 178px;
 }

 #crdHome2 .crd-home-hero .crd-hero-logo-frame .crd-hero-logo-img--new {
  max-width: 72vw !important;
 }
}

/* =========================================================
   CRDGAME HOME — BODY + HERO OFFICIAL LOGO + ULTRAWIDE SIDES
   Лого Crimson Desert видно на ПК всегда.
   Центр 2560px + боковой pattern_b3.png только на 2600px+
   Без правок #top_network
   Версия: 20260714_home_ultrawide_sides_no_seams_8
========================================================= */

/* По умолчанию скрываем лого: мобилка/узкие экраны */
.crd-home-official-logo {
 display: none;
}

/* =========================================================
   OFFICIAL LOGO — NORMAL DESKTOP
   Работает на экранах меньше 2600px тоже
========================================================= */

@media (min-width: 769px) {

 html body.page-home .crd-home2 {
  position: relative !important;
 }

 html body.page-home .crd-home-official-logo,
 html body.page-home .crd-home-official-logo:link,
 html body.page-home .crd-home-official-logo:visited {
  position: absolute !important;

  top: clamp(48px, 3.1vw, 72px) !important;
  left: clamp(22px, 2.2vw, 42px) !important;
  z-index: 12 !important;

  display: block !important;

  width: clamp(210px, 13vw, 285px) !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  text-decoration: none !important;
  pointer-events: auto !important;

  opacity: .92 !important;

  transition:
   opacity .22s ease,
   filter .22s ease !important;
 }

 html body.page-home .crd-home-official-logo:hover {
  opacity: 1 !important;
  filter: brightness(1.12) !important;
 }

 html body.page-home .crd-home-official-logo img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  box-shadow: none !important;
 }
}

/* =========================================================
   OFFICIAL LOGO — SMALL DESKTOP / TABLET SAFETY
========================================================= */

@media (min-width: 769px) and (max-width: 1200px) {

 html body.page-home .crd-home-official-logo,
 html body.page-home .crd-home-official-logo:link,
 html body.page-home .crd-home-official-logo:visited {
  top: 52px !important;
  left: 20px !important;

  width: clamp(170px, 18vw, 220px) !important;
 }
}

/* =========================================================
   ULTRAWIDE BODY ONLY
   Только 2600px+
   Центр 2560px + боковой pattern_b3.png
   Без repeat-y, чтобы не было горизонтальных стыков
   #top_network здесь НЕ трогаем
========================================================= */

@media (min-width: 2600px) {

 html {
  background:
   url("https://crdgame.ru/fon/pattern_b2.png") left top / calc((100vw - 2560px) / 2) 100vh no-repeat fixed,
   url("https://crdgame.ru/fon/pattern_b2.png") right top / calc((100vw - 2560px) / 2) 100vh no-repeat fixed,
   #101115 !important;

  overflow-x: hidden !important;
 }

 html body.page-home {
  position: relative !important;

  width: 100% !important;
  max-width: 2560px !important;
  min-width: 0 !important;

  margin-left: auto !important;
  margin-right: auto !important;

  overflow-x: hidden !important;

  background: transparent !important;
 }

 html body.page-home .crd-home2 {
  position: relative !important;

  width: 100% !important;
  max-width: 2560px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  overflow: hidden !important;
 }

 html body.page-home .crd-home2::before {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;

  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;

  transform: none !important;
 }

 html body.page-home .crd-home2 > * {
  position: relative !important;
  z-index: 1 !important;
 }

 /* =========================================================
    Мягкие затемнения на стыке центра и боковых полос
    Не скрывают pattern_b3.png, только делают переход аккуратнее
 ========================================================= */

 html body.page-home::before,
 html body.page-home::after {
  content: "" !important;

  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;

  display: block !important;

  width: 110px !important;

  pointer-events: none !important;
 }

 html body.page-home::before {
  left: calc((100vw - 2560px) / 2 - 110px) !important;

  background:
   linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, .52)
   ) !important;
 }

 html body.page-home::after {
  right: calc((100vw - 2560px) / 2 - 110px) !important;

  background:
   linear-gradient(
    270deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, .52)
   ) !important;
 }

 /* =========================================================
    Лого на ультрашироких экранах
    Ближе к размеру официального сайта
 ========================================================= */

 html body.page-home .crd-home-official-logo,
 html body.page-home .crd-home-official-logo:link,
 html body.page-home .crd-home-official-logo:visited {
  top: clamp(48px, 1.6vw, 58px) !important;
  left: 34px !important;

  width: clamp(230px, 7.5vw, 285px) !important;
  height: auto !important;

  z-index: 12 !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;

  opacity: .92 !important;
 }
}
/* =========================================================
   CRDGAME HOME — OFFICIAL LOGO POSITION FIX
   Левое лого Crimson Desert ниже, без зависимости от админ-панели
   Версия: 20260714_official_logo_position_fix_3
========================================================= */

@media (min-width: 769px) {

 html body.page-home .crd-home-official-logo,
 html body.page-home .crd-home-official-logo:link,
 html body.page-home .crd-home-official-logo:visited {
  top: clamp(82px, 4.2vw, 108px) !important;
  left: clamp(28px, 2.2vw, 42px) !important;

  width: clamp(210px, 13vw, 285px) !important;
  height: auto !important;

  z-index: 12 !important;
 }
}

/* 2600px+ — на ультрашироких чуть спокойнее, чтобы не уезжало слишком низко */
@media (min-width: 2600px) {

 html body.page-home .crd-home-official-logo,
 html body.page-home .crd-home-official-logo:link,
 html body.page-home .crd-home-official-logo:visited {
  top: 86px !important;
  left: 34px !important;

  width: clamp(230px, 7.5vw, 285px) !important;
 }
}

/* маленькие ПК
/* =========================================================
   CRDGAME HOME2 — USE GLOBAL ULTRAWIDE ONLY
   Главная больше не рисует свои боковые полосы и затемнения.
   Этим занимается общий my.css.
========================================================= */

@media (min-width: 2600px) {

  html body.page-home {
    width: 100% !important;
    max-width: 2560px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    overflow-x: hidden !important;
    background: transparent !important;
  }

  html body.page-home::before,
  html body.page-home::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body.page-home .crd-home2 {
    position: relative !important;

    width: 100% !important;
    max-width: 2560px !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body.page-home .crd-home2::before {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    left: 0 !important;
    right: auto !important;

    transform: none !important;
  }
}

/* ============================================================================
   CRDGAME HOME 2 — REPEAT REVEAL FIX
   v20260721_home2_repeat_reveal_fix_1

   Внешнее движение: 30px.
   Внутреннее движение: 16px.
   Повторное появление при прокрутке вниз.
   ============================================================================ */

/* ---------------------------------------------------------
   ВНЕШНИЙ REVEAL — 30px
--------------------------------------------------------- */

html body.page-home #crdHome2 .crd-reveal,
html body.page-home #crdHome2.is-loaded .crd-reveal {
  opacity: 0 !important;

  transform: translate3d(0, 30px, 0) !important;

  transition:
    opacity .72s ease,
    transform .86s cubic-bezier(.19, 1, .22, 1) !important;

  will-change: opacity, transform;
}

/* Показываем только элементы с реальным is-visible */
html body.page-home #crdHome2 .crd-reveal.is-visible,
html body.page-home #crdHome2.is-loaded .crd-reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}


/* ---------------------------------------------------------
   ВНУТРЕННИЙ REVEAL — 16px
--------------------------------------------------------- */

html body.page-home #crdHome2 .crd-reveal > .crd-home-wrap,
html body.page-home #crdHome2 .crd-reveal > .crd-home-hero__inner,
html body.page-home #crdHome2 .crd-reveal > .crd-world__inner,
html body.page-home #crdHome2 .crd-reveal > .crd-story__inner,
html body.page-home #crdHome2 .crd-reveal > .crd-combat__inner,
html body.page-home #crdHome2 .crd-reveal > .crd-official-head,
html body.page-home #crdHome2 .crd-reveal > .crd-official-grid,

html body.page-home #crdHome2 .crd-official-card.crd-reveal
  > .crd-official-card__media,

html body.page-home #crdHome2 .crd-official-card.crd-reveal
  > .crd-official-card__title,

html body.page-home #crdHome2 .crd-base-card.crd-reveal
  > .crd-base-card__media,

html body.page-home #crdHome2 .crd-base-card.crd-reveal
  > .crd-base-card__body {
  opacity: 0;

  transform: translate3d(0, 16px, 0);

  transition:
    opacity .62s ease .08s,
    transform .78s cubic-bezier(.19, 1, .22, 1) .08s;

  will-change: opacity, transform;
}


/* Внутренние элементы после появления родителя */
html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-home-wrap,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-home-hero__inner,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-world__inner,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-story__inner,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-combat__inner,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-official-head,

html body.page-home #crdHome2 .crd-reveal.is-visible
  > .crd-official-grid,

html body.page-home #crdHome2 .crd-official-card.crd-reveal.is-visible
  > .crd-official-card__media,

html body.page-home #crdHome2 .crd-official-card.crd-reveal.is-visible
  > .crd-official-card__title,

html body.page-home #crdHome2 .crd-base-card.crd-reveal.is-visible
  > .crd-base-card__media,

html body.page-home #crdHome2 .crd-base-card.crd-reveal.is-visible
  > .crd-base-card__body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   НЕБОЛЬШАЯ ОЧЕРЁДНОСТЬ КАРТОЧЕК
--------------------------------------------------------- */

html body.page-home #crdHome2
.crd-official-grid > .crd-reveal:nth-child(2) {
  transition-delay: .035s !important;
}

html body.page-home #crdHome2
.crd-official-grid > .crd-reveal:nth-child(3) {
  transition-delay: .07s !important;
}

html body.page-home #crdHome2
.crd-official-grid > .crd-reveal:nth-child(4) {
  transition-delay: .105s !important;
}

html body.page-home #crdHome2
.crd-official-grid > .crd-reveal:nth-child(5) {
  transition-delay: .14s !important;
}


/* ---------------------------------------------------------
   ОТКЛЮЧЕНИЕ АНИМАЦИИ ПО НАСТРОЙКЕ СИСТЕМЫ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html body.page-home #crdHome2 .crd-reveal,
  html body.page-home #crdHome2.is-loaded .crd-reveal,
  html body.page-home #crdHome2 .crd-reveal > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}