:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0b1220;
  --muted: rgba(11, 18, 32, .62);
  --border: rgba(11, 18, 32, .10);
  --border-strong: rgba(11, 18, 32, .14);
  --shadow: 0 30px 80px rgba(11, 18, 32, .18);
  --shadow-soft: 0 18px 45px rgba(11, 18, 32, .12);
  --accent: #FFDB3D;
  --accent-ink: #3b3200;
  --card: var(--surface);
  --alt: rgba(255,255,255,.55);
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --container: 1120px;

  /* theme helpers */
  --header-bg: rgba(255,255,255,.68);
  --header-border: rgba(11,18,32,.08);
  --header-shadow: 0 10px 30px rgba(11,18,32,.06);
  --code-bg: rgba(15, 23, 42, .05);

  /* Scrollbar */
  --scrollbar-track: rgba(15, 23, 42, .08);
  --scrollbar-thumb: rgba(15, 23, 42, .26);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; position: relative;}

/* Dark theme overrides */
html[data-theme="dark"]{
  --bg: #070B14;
  --surface: rgba(18, 24, 38, .92);
  --text: rgba(245, 247, 255, .92);
  --muted: rgba(245, 247, 255, .60);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.14);
  --shadow: 0 34px 90px rgba(0,0,0,.60);
  --shadow-soft: 0 18px 50px rgba(0,0,0,.45);
  --alt: rgba(18, 24, 38, .55);
  --header-bg: rgba(10, 14, 26, .72);
  --header-border: rgba(255,255,255,.08);
  --header-shadow: 0 10px 30px rgba(0,0,0,.35);
  --code-bg: rgba(255,255,255,.08);

  /* Scrollbar (dark) */
  --scrollbar-track: rgba(255,255,255,.06);
  --scrollbar-thumb: rgba(255,255,255,.18);
}

/* Scrollbars (Firefox) */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Scrollbars (Chromium/WebKit) */
body::-webkit-scrollbar,
.modal__body::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
body::-webkit-scrollbar-track,
.modal__body::-webkit-scrollbar-track{
  background: var(--scrollbar-track);
}
body::-webkit-scrollbar-thumb,
.modal__body::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--scrollbar-track);
}
body::-webkit-scrollbar-thumb:hover,
.modal__body::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--scrollbar-thumb) 70%, var(--text));
}

body{
  margin:0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Один общий фон на весь сайт */
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

html[data-theme="dark"] body{
  /* Один общий фон на весь сайт */
  background: var(--bg);
}

/* Dark theme: лёгкий шум (dithering), чтобы градиенты не "полосили" */
html[data-theme="dark"]::before{
  content:none;
}
body{position: relative;}
.brand__name,
.section__title,
.footer__name,
.modal__title{
  font-family: "Unbounded", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -.02em;
}

a, button, input, textarea { font: inherit; }

/* Motion */
:root{
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;}
}

a{color:inherit; text-decoration:none}
img{
  max-width:100%;
  display:block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Best-effort: "не вытаскивать" картинки кликом */
.hero__banner,
.card__media img,
.card__media--case img,
.socialBig__img{
  pointer-events: none;
}
/* Иконки (SVG) внутри кнопок тоже пусть не перехватывают клики */
button svg{pointer-events:none}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: 8px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* Базовые мобильные: безопасные зоны (вырезы), без горизонтального скролла */
@media (max-width: 768px){
  body{
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .container{padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right))}
}

/* Better anchor offsets for sticky header */
section[id]{scroll-margin-top: 92px}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:18px;
  top:18px;
  width:auto;
  height:auto;
  background:#fff;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  box-shadow: var(--shadow-soft);
  z-index: 1000;
}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}
.header__inner{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  gap: 12px 16px;
  padding: 12px 0;
}

/* Theme toggle */
.themeToggle{
  width: 46px;
  height: 46px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.themeToggle__icon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.themeToggle__icon svg{
  width: 22px;
  height: 22px;
  display:block;
}
/* В светлой теме показываем только СОЛНЦЕ */
/* Светлая тема: показываем луну (переключить на тёмную) */
.themeToggle__icon .themeToggle__sun{display:none}
.themeToggle__icon .themeToggle__moon{display:block}
/* В тёмной теме показываем только ЛУНУ */
/* Тёмная тема: показываем солнце (переключить на светлую) */
html[data-theme="dark"] .themeToggle__icon .themeToggle__sun{display:block}
html[data-theme="dark"] .themeToggle__icon .themeToggle__moon{display:none}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}
.brand__logo{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.brand__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  background: transparent !important;
}
.brand__name{font-weight: 800}
.brand__tag{font-size: 12px; color: var(--muted)}

.nav{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
  justify-self: center;
  min-width: 0;
  max-width: 100%;
}
.nav__link{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(11,18,32,.78);
  position: relative;
  white-space: nowrap;
}
html[data-theme="dark"] .nav{
  background: rgba(18,24,38,.62);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
html[data-theme="dark"] .nav__link{color: rgba(245,247,255,.78)}
html[data-theme="dark"] .nav__link:hover{background: rgba(18,24,38,.92)}
.nav__link:hover{background: rgba(255,255,255,.85)}
.nav__link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,219,61,0), rgba(255,219,61,1), rgba(255,219,61,0));
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.nav__link:hover::after{opacity: 1; transform: translateY(0)}
.header__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

/* Узкое окно на ПК: логотип + кнопки в первом ряду, меню — ниже без наложений */
@media (min-width: 981px) and (max-width: 1280px){
  .header__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 10px;
    column-gap: 14px;
  }
  .brand{
    grid-column: 1;
    grid-row: 1;
  }
  .header__actions{
    grid-column: 2;
    grid-row: 1;
  }
  .nav{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }
}

/* Cart button */
.cartBtn{
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cartBtn__icon{
  width: 22px;
  height: 22px;
  display:inline-flex;
}
.cartBtn__icon svg{width:22px; height:22px; display:block}
.cartBtn__badge{
  position:absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,219,61,1);
  color: rgba(31,26,0,.95);
  font-weight: 900;
  font-size: 11px;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
}
html[data-theme="dark"] .cartBtn__badge{
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

/* Buttons */
.btn{
  appearance:none;
  border: none;
  background: transparent;
  color: inherit;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
  user-select:none;
}
a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn::before{
  content:"";
  position:absolute;
  inset: -2px;
  background: radial-gradient(120px 60px at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity: 0;
  transform: translate3d(-20px,-10px,0);
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
  pointer-events:none;
}
.btn:hover::before{opacity: .9; transform: translate3d(0,0,0)}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,219,61,.26);
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(180deg, rgba(255,219,61,1), rgba(255,219,61,.86));
  color: #1f1a00;
  box-shadow:
    0 18px 44px rgba(255, 219, 61, .30),
    0 14px 28px rgba(11,18,32,.10);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 54px rgba(255, 219, 61, .38),
    0 18px 34px rgba(11,18,32,.12);
}
.btn--secondary{
  background: rgba(255,255,255,.72);
  box-shadow:
    0 14px 30px rgba(11,18,32,.10),
    inset 0 0 0 1px rgba(255,255,255,.70);
}
.btn--ghost{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
html[data-theme="dark"] .btn--secondary{
  background: rgba(255,255,255,.06);
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
html[data-theme="dark"] .btn--secondary:hover{
  background: rgba(255,255,255,.10);
}
html[data-theme="dark"] .btn--ghost{
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
html[data-theme="dark"] .btn--ghost:hover{
  background: rgba(255,255,255,.10);
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    0 0 0 4px rgba(255,219,61,.10);
}
.btn--secondary:hover{
  background: rgba(255,255,255,.92);
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(11,18,32,.12),
    0 0 0 4px rgba(255,219,61,.14);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.55);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(11,18,32,.10),
    0 0 0 4px rgba(255,219,61,.12);
}
.btn--full{width:100%}

/* Hero */
.hero{
  border-bottom: 1px solid rgba(11,18,32,.08);
  background: transparent;
  padding: 22px 0 18px;
}
@media (max-width: 768px){
  .hero{padding: 16px 0 14px}
}
@media (max-width: 560px){
  .hero{padding: 12px 0 12px}
  .copyOnBanner{width: 19px; height: 19px; border-radius: 6px}
  .copyOnBanner__icon{width: 9px; height: 9px}
}
.heroFrame{
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  /* Важно: не режем тень drop-shadow */
  overflow: visible;
  background: transparent;
}
.hero__banner{
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Тень по форме PNG (включая нижнюю панель внутри баннера) */
  filter:
    drop-shadow(0 24px 60px rgba(11,18,32,.18))
    drop-shadow(0 10px 24px rgba(11,18,32,.12));
  background: transparent;
  display:block;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

/* Copy button placed near the server IP text on the banner image */
.copyOnBanner{
  --x: 40%;
  --y: 90%;
  position:absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 5;

  display:grid;
  place-items:center;

  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  user-select:none;

  font-weight: 900;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;

  /* "как PVP/PVE", но голубой */
  color: #6fe1ff;
  background: rgba(8, 20, 30, .70);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .35),
    0 0 0 2px rgba(17, 203, 255, .22),
    inset 0 0 0 1px rgba(255,255,255,.08);

  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
}
.copyOnBanner:hover{
  transform: translate(-50%, -50%) translateY(-1px);
  background: rgba(8, 20, 30, .82);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, .38),
    0 0 0 2px rgba(17, 203, 255, .32),
    0 0 22px rgba(17, 203, 255, .22),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.copyOnBanner:active{transform: translate(-50%, -50%)}
.copyOnBanner:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(17, 203, 255, .22),
    0 18px 46px rgba(0, 0, 0, .35),
    0 0 0 2px rgba(17, 203, 255, .32),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.copyOnBanner__icon{
  width: 24px;
  height: 24px;
  color: #6fe1ff;
  filter: drop-shadow(0 0 10px rgba(17, 203, 255, .25));
}

/* Sections */
.section{
  padding: 60px 0;
  position: relative;
}
.section--alt{
  background: transparent;
}
.section > .container{position: relative;}
.section--thin{padding: 28px 0}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.section__title{
  margin:0;
  font-size: 30px;
  letter-spacing: -.02em;
}
.section__desc{
  margin: 8px 0 0 0;
  color: var(--muted);
  max-width: 720px;
}
.section__head .section__desc + .section__desc{
  margin-top: 12px;
}
.pill{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 14px 30px rgba(11,18,32,.10);
  font-weight: 700;
  color: rgba(11,18,32,.72);
  white-space: nowrap;
}
html[data-theme="dark"] .pill{
  border-color: rgba(255,255,255,.10);
  background: rgba(18,24,38,.72);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  color: rgba(245,247,255,.72);
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,219,61,.22);
}

/* Cards grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr))}

.card{
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 160px;

  padding: 18px 18px 14px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  backdrop-filter: blur(12px);

  box-shadow:
    0 28px 70px rgba(11,18,32,.12),
    0 10px 26px rgba(11,18,32,.08);
  transition: transform .22s var(--ease-out), box-shadow .28s var(--ease-out);
}
html[data-theme="dark"] .card{
  background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(18,24,38,.72));
  box-shadow:
    0 34px 90px rgba(0,0,0,.50),
    0 12px 30px rgba(0,0,0,.35);
}
html[data-theme="dark"] .card::before{
  opacity: .55;
}
html[data-theme="dark"] .card::after{
  opacity: .65;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(255,219,61,.55),
    rgba(124,92,255,.30),
    rgba(0,163,255,.22),
    rgba(255,255,255,.30)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .65;
}
.card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(520px 220px at 12% 6%, rgba(255,219,61,.16), rgba(255,255,255,0) 62%),
    radial-gradient(480px 210px at 90% 10%, rgba(124,92,255,.14), rgba(255,255,255,0) 62%);
  opacity: .55;
  pointer-events:none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
  transform: translateY(6px);
}
.card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 38px 96px rgba(11,18,32,.16),
    0 14px 34px rgba(11,18,32,.10);
}
/* В светлой теме уменьшаем "ореол", чтобы не выглядело как белое пятно сзади */
.card:hover::after{opacity: .68; transform: translateY(0)}

/* В тёмной теме делаем hover заметнее (подъём + более читаемая тень) */
html[data-theme="dark"] .card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 52px 130px rgba(0,0,0,.72),
    0 18px 46px rgba(0,0,0,.46);
}
html[data-theme="dark"] .card:hover::after{opacity: .78; transform: translateY(0)}
.card--highlight{
  box-shadow:
    0 42px 110px rgba(255,219,61,.14),
    0 38px 96px rgba(11,18,32,.16);
}
.card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.card__title{
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 15px;
  color: rgba(11,18,32,.92);
  line-height: 1.1;
}
html[data-theme="dark"] .card__title{color: rgba(245,247,255,.92)}
.card__title .mc{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 18px;
}
.card__desc{
  margin-top: 10px;
  color: rgba(11,18,32,.72);
  font-weight: 500;
  flex: 1;
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.45;
}
html[data-theme="dark"] .card__desc{color: rgba(245,247,255,.72)}
.card__desc{display:none}
.tagRow{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.tagRow{display:none}

/* В "Разное" нужно показывать текст услуг */
#misc .card__desc{display:block}

.card__media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow:hidden;
  margin-bottom: 12px;
  background: transparent;
  box-shadow: none;
  position: relative;
}
.card__media img{
  width: 100%;
  height: 100%;
  /* убираем белые поля — картинка заполняет блок */
  object-fit: cover;
  object-position: center;
  display:block;
  position: relative;
  z-index: 0;
}

/* Case images: чуть меньше, с отступом и более мягкими углами */
.card__media--case{
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  margin-bottom: 10px;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.card__media--case img{
  width: 100%;
  height: 100%;
  /* “во всю” — заполняет блок, углы реально округляются */
  object-fit: cover;
  object-position: center;
  transform: none;
}

/* WYVERN hero-card: чуть уменьшить картинку, чтобы была как BARON по масштабу */
.card--wyvern.card--hero .card__media img{
  transform: scale(.90);
}

/* WYVERN: смягчить углы как у BARON */
.card--wyvern.card--hero .card__media{
  border-radius: 30px;
}
.card--wyvern.card--hero .card__media img{
  border-radius: inherit;
}
.card--wyvern.card--hero .card__media::after{
  /* чуть мягче нижний фейд по краям */
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* HERO (BARON/WYVERN) special layout */
.card--hero .card__top{
  display:none;
}
.card--hero .card__media{
  /* "край картинки уходит под сайт" — мягкие белые фейды сверху/снизу */
  border-radius: 26px;
  margin-bottom: 6px;
}
.card--hero .card__actions{
  margin-top: 6px;
}
.card--hero .card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* слабее сверху, чтобы картинка не выглядела слишком прозрачной */
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.45) 14%, rgba(255,255,255,0) 36%);
  pointer-events:none;
  z-index: 1;
}
.card--hero .card__media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 38%;
  background: linear-gradient(0deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
  z-index: 1;
}

/* Dark theme: вместо белого фейда — тёмный */
html[data-theme="dark"] .card--hero .card__media::before{
  background: linear-gradient(
    180deg,
    rgba(7,11,20,.78) 0%,
    rgba(7,11,20,.45) 14%,
    rgba(7,11,20,0) 36%
  );
}
html[data-theme="dark"] .card--hero .card__media::after{
  background: linear-gradient(
    0deg,
    rgba(7,11,20,.92) 0%,
    rgba(7,11,20,0) 70%
  );
}
/* BARON: убираем ощущение “тёмного” снизу — делаем нижний фейд слабее */
.card--baron .card__media::after{
  height: 26%;
  background: linear-gradient(0deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 78%);
}
html[data-theme="dark"] .card--baron .card__media::after{
  height: 26%;
  background: linear-gradient(0deg, rgba(7,11,20,.86) 0%, rgba(7,11,20,0) 78%);
}
.card--baron .card__mediaPrice{
  box-shadow: 0 6px 14px rgba(11,18,32,.08);
}
.card__mediaTitle{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(11,18,32,.12);
  font-family: "Unbounded", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(11,18,32,.92);
  z-index: 2; /* поверх фейдов */
}
html[data-theme="dark"] .card__mediaTitle{
  background: rgba(18,24,38,.78);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  color: rgba(245,247,255,.92);
}
.card--wyvern .card__mediaTitle{
  top: 9px;  /* чуть выше */
  left: 9px; /* чуть левее */
}
.card__mediaTitle .mc{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
}

.card__mediaPrice{
  position:absolute;
  right: 14px;
  bottom: 14px;
  font-weight: 1000;
  letter-spacing: -.01em;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px; /* менее круглая */
  color: rgba(11,18,32,.95);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  box-shadow:
    0 10px 24px rgba(11,18,32,.10);
  white-space: nowrap;
  z-index: 2; /* чтобы фейды не “прозрачили” цену */
}
html[data-theme="dark"] .card__mediaPrice{
  background: rgba(18,24,38,.82);
  color: rgba(245,247,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.card--wyvern .card__mediaPrice{
  right: 9px;  /* чуть правее (ближе к краю) */
  bottom: 9px; /* чуть ниже (ближе к низу) */
  box-shadow: 0 6px 14px rgba(11,18,32,.06);
}

/* Чуть ниже цену на LORD/WARLOCK/BLAZE */
.card--lord .card__mediaPrice,
.card--warlock .card__mediaPrice,
.card--blaze .card__mediaPrice{
  bottom: 11px;
}
.card__mediaPrice .small{font-size: 12px; font-weight: 800; color: rgba(11,18,32,.58)}
html[data-theme="dark"] .card__mediaPrice .small{color: rgba(245,247,255,.62)}

/* Ribbon для LORD: диагональная ленточка на угол */
.card__ribbon{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 96px;
  height: 96px;
  overflow: hidden; /* лента обрезается в пределах карточки */
  z-index: 10;
  pointer-events: none;
}
.card__ribbon::before{
  content: "";
  position: absolute;
  top: 22px;
  left: -34px;
  width: 170px;
  height: 18px; /* тоньше */
  background: linear-gradient(135deg, #ff8c42 0%, #ff6b1a 50%, #ff8c42 100%);
  transform: rotate(45deg);
  transform-origin: center center;
  box-shadow: 
    0 2px 10px rgba(255, 140, 66, 0.35),
    0 1px 4px rgba(255, 107, 26, 0.22);
  z-index: 0;
}
.card__ribbon::after{
  content: "Рекомендуем";
  position: absolute;
  top: 30px;
  left: -24px;
  width: 170px;
  height: 18px;
  font-family: "Unbounded", "Manrope", system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  transform: rotate(45deg);
  transform-origin: center center;
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  z-index: 1;
}

.tag{
  font-size: 11px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.70);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
  color: rgba(11,18,32,.78);
}
.tag--accent{
  background: linear-gradient(180deg, rgba(255,219,61,.55), rgba(255,219,61,.25));
  color: rgba(31,26,0,.88);
}
.card__actions{
  margin-top: 8px;
  display:flex;
  gap: 10px;
}
.card__buy{flex: 1}
.btnIcon{
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.btnIcon svg{width: 20px; height: 20px; display:block}
.btnIcon--cart{
  background: rgba(255,255,255,.72);
  box-shadow:
    0 14px 30px rgba(11,18,32,.10),
    inset 0 0 0 1px rgba(255,255,255,.70);
}
html[data-theme="dark"] .btnIcon--cart{
  background: rgba(255,255,255,.06);
  box-shadow:
    0 14px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.btnIcon--cart:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(11,18,32,.12),
    0 0 0 4px rgba(255,219,61,.12);
}
html[data-theme="dark"] .btnIcon--cart:hover{
  box-shadow:
    0 18px 45px rgba(0,0,0,.40),
    0 0 0 4px rgba(255,219,61,.10);
}

/* Cart modal list */
.cartEmpty{
  padding: 12px;
  border: 1px dashed rgba(15,23,42,.16);
  border-radius: 16px;
  color: rgba(15,23,42,.62);
  font-weight: 700;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .cartEmpty{
  border-color: rgba(255,255,255,.14);
  color: rgba(245,247,255,.60);
  background: rgba(255,255,255,.04);
}
.cartList{display:flex; flex-direction:column; gap: 10px; margin-bottom: 12px}
.cartItem{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 10px 10px;
  background: rgba(255,255,255,.70);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
html[data-theme="dark"] .cartItem{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.cartItem__left{min-width: 0}
.cartItem__name{font-weight: 900}
.cartItem__meta{margin-top: 3px; font-weight: 700; color: rgba(15,23,42,.62); font-size: 12px}
html[data-theme="dark"] .cartItem__meta{color: rgba(245,247,255,.60)}
.cartItem__right{display:flex; align-items:center; gap: 10px}
.cartItem__price{font-weight: 1000; white-space: nowrap}
.cartItem__remove{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  cursor: pointer;
  font-weight: 900;
}
html[data-theme="dark"] .cartItem__remove{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(245,247,255,.92);
}
.cartItem__remove:hover{background: rgba(255,255,255,.92)}
html[data-theme="dark"] .cartItem__remove:hover{background: rgba(255,255,255,.10)}

/* Soldons range card */
.rangeCard{
  padding: 18px;
}
.rangeCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.rangeCard__title{font-weight: 1000; letter-spacing: -.02em}
.rangeCard__sub{margin-top: 6px; color: rgba(15,23,42,.62); font-weight: 700; font-size: 12px}
html[data-theme="dark"] .rangeCard__sub{color: rgba(245,247,255,.60)}
.rangeCard__price{
  text-align:right;
  white-space: nowrap;
}
.rangeCard__k{color: rgba(15,23,42,.62); font-weight: 800; font-size: 12px}
html[data-theme="dark"] .rangeCard__k{color: rgba(245,247,255,.60)}
.rangeCard__v{font-weight: 1000; font-size: 18px}

.range{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  /* чтобы бегунок не выходил за рамки, но был ближе к краям */
  --thumb: 92px;
  padding: 14px calc(14px + (var(--thumb) / 2) - 18px) 12px;
  background: rgba(255,255,255,.55);
  margin-bottom: 12px;
  position: relative;
}
html[data-theme="dark"] .range{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.range__trackWrap{
  position: relative;
  height: 0;
}
.range__orn{
  position: absolute;
  top: 62px; /* центр дорожки с учётом высоты input */
  width: 44px;
  height: 22px;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255,219,61,1) 0%,
    rgba(255,219,61,.78) 55%,
    rgba(255,219,61,1) 100%
  );
  box-shadow:
    0 0 0 2px rgba(255,219,61,.35),
    0 0 18px rgba(255,219,61,.20),
    0 12px 26px rgba(11,18,32,.10);
  opacity: .95;
}
html[data-theme="dark"] .range__orn{
  box-shadow:
    0 0 0 2px rgba(255,219,61,.28),
    0 0 18px rgba(255,219,61,.16),
    0 16px 34px rgba(0,0,0,.35);
}
.range__orn--start{left: -18px}
.range__orn--end{right: -18px}

/* Сделаем “палочку” жирнее визуально */
.range__orn::before{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,26,0,.10), rgba(31,26,0,0) 55%, rgba(255,255,255,.20));
  mix-blend-mode: soft-light;
  opacity: .85;
}
.range__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.range__label{font-weight: 900; color: rgba(11,18,32,.78)}
html[data-theme="dark"] .range__label{color: rgba(245,247,255,.78)}
.range__value{font-weight: 1000}
.range__input{
  width: 100%;
  /* кастомный трек с текстурой */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  /* место под очень большой бегунок + scale-анимацию */
  height: 120px;
  cursor: pointer;
  overflow: visible;
  --thumb-rot: 0deg;
}

/* Chromium/WebKit range */
.range__input::-webkit-slider-runnable-track{
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  /* Трек обычный серый */
  background: linear-gradient(180deg, rgba(15,23,42,.12), rgba(15,23,42,.06));
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
}
html[data-theme="dark"] .range__input::-webkit-slider-runnable-track{
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.range__input::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 92px;
  height: 92px;
  border-radius: 0; /* форма задаётся самой картинкой (прозрачность) */
  border: none; /* без рамок */
  background: url("Материалы/gold.webp") center / contain no-repeat;
  /* Свечение по форме картинки (по альфа-каналу) */
  filter:
    drop-shadow(0 0 10px rgba(255,219,61,.30))
    drop-shadow(0 0 22px rgba(255,219,61,.20))
    drop-shadow(0 16px 34px rgba(11,18,32,.14));
  margin-top: -37px; /* центрируем по треку 18px: -(92-18)/2 */
  transition: transform .18s var(--ease-out), filter .18s var(--ease-out);
  transform: translateZ(0) scale(1) rotate(var(--thumb-rot));
}
html[data-theme="dark"] .range__input::-webkit-slider-thumb{
  filter:
    drop-shadow(0 0 12px rgba(255,219,61,.26))
    drop-shadow(0 0 26px rgba(255,219,61,.16))
    drop-shadow(0 18px 45px rgba(0,0,0,.45));
}
/* при перетягивании: чуть больше + поворот (задаём через --thumb-rot) */
.range__input.is-dragging::-webkit-slider-thumb{
  transform: translateZ(0) scale(1.14) rotate(var(--thumb-rot));
  filter:
    drop-shadow(0 0 14px rgba(255,219,61,.34))
    drop-shadow(0 0 30px rgba(255,219,61,.22))
    drop-shadow(0 18px 45px rgba(11,18,32,.16));
}
html[data-theme="dark"] .range__input.is-dragging::-webkit-slider-thumb{
  filter:
    drop-shadow(0 0 16px rgba(255,219,61,.26))
    drop-shadow(0 0 34px rgba(255,219,61,.18))
    drop-shadow(0 22px 60px rgba(0,0,0,.50));
}

/* Firefox range */
.range__input::-moz-range-track{
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  /* Трек обычный серый */
  background: linear-gradient(180deg, rgba(15,23,42,.12), rgba(15,23,42,.06));
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
}
.range__input::-moz-range-progress{
  height: 18px;
  border-radius: 999px;
  /* Прогресс тоже серый (чтобы не было “золотой полосы”) */
  background: linear-gradient(180deg, rgba(15,23,42,.12), rgba(15,23,42,.06));
}
html[data-theme="dark"] .range__input::-moz-range-track{
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
html[data-theme="dark"] .range__input::-moz-range-progress{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.range__input::-moz-range-thumb{
  width: 92px;
  height: 92px;
  border-radius: 0;
  border: none; /* без рамок */
  background: url("Материалы/gold.webp") center / contain no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(255,219,61,.30))
    drop-shadow(0 0 22px rgba(255,219,61,.20))
    drop-shadow(0 16px 34px rgba(11,18,32,.14));
  transition: transform .18s var(--ease-out), filter .18s var(--ease-out);
  transform: translateZ(0) scale(1) rotate(var(--thumb-rot));
}
html[data-theme="dark"] .range__input::-moz-range-thumb{
  filter:
    drop-shadow(0 0 12px rgba(255,219,61,.26))
    drop-shadow(0 0 26px rgba(255,219,61,.16))
    drop-shadow(0 18px 45px rgba(0,0,0,.45));
}
/* Firefox: drag animation */
.range__input.is-dragging::-moz-range-thumb{
  transform: translateZ(0) scale(1.14) rotate(var(--thumb-rot));
  filter:
    drop-shadow(0 0 14px rgba(255,219,61,.34))
    drop-shadow(0 0 30px rgba(255,219,61,.22))
    drop-shadow(0 18px 45px rgba(11,18,32,.16));
}
html[data-theme="dark"] .range__input.is-dragging::-moz-range-thumb{
  filter:
    drop-shadow(0 0 16px rgba(255,219,61,.26))
    drop-shadow(0 0 34px rgba(255,219,61,.18))
    drop-shadow(0 22px 60px rgba(0,0,0,.50));
}
.range__ends{
  margin-top: 8px;
  display:flex;
  justify-content:space-between;
  color: rgba(15,23,42,.55);
  font-weight: 800;
  font-size: 12px;
}
html[data-theme="dark"] .range__ends{color: rgba(245,247,255,.55)}

.price{
  font-weight: 900;
  letter-spacing: -.01em;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: none;
  box-shadow:
    0 16px 34px rgba(11,18,32,.10),
    inset 0 0 0 1px rgba(255,255,255,.80);
  white-space: nowrap;
}
html[data-theme="dark"] .price{
  background: rgba(18,24,38,.80);
  color: rgba(245,247,255,.92);
  box-shadow:
    0 16px 34px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.price .small{font-size: 12px; font-weight: 800; color: rgba(11,18,32,.58)}
html[data-theme="dark"] .price .small{color: rgba(245,247,255,.62)}

/* Segmented */
.segmented{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 14px 30px rgba(11,18,32,.10);
}
html[data-theme="dark"] .segmented{
  background: rgba(18,24,38,.72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
}
html[data-theme="dark"] .segmented__btn{
  color: rgba(245,247,255,.70);
}
html[data-theme="dark"] .segmented__btn:hover{background: rgba(18,24,38,.92)}
html[data-theme="dark"] .segmented__btn.is-active{
  background: rgba(18,24,38,.95);
  border-color: rgba(255,219,61,.40);
  color: rgba(245,247,255,.92);
  box-shadow: 0 16px 34px rgba(255,219,61,.10), 0 18px 45px rgba(0,0,0,.40);
}
.segmented__btn{
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor:pointer;
  color: rgba(11,18,32,.70);
  transition: background .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.segmented__btn:hover{background: rgba(255,255,255,.92); transform: translateY(-1px)}
.segmented__btn.is-active{
  background: #fff;
  border-color: rgba(255,219,61,.55);
  color: rgba(11,18,32,.92);
  box-shadow: 0 16px 34px rgba(255,219,61,.16), 0 14px 26px rgba(11,18,32,.10);
}

/* Info cards */
.info{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.info__card{
  position: relative;
  overflow:hidden;
  border: none;
  border-radius: 26px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 70px rgba(11,18,32,.12),
    0 10px 26px rgba(11,18,32,.08);
}
html[data-theme="dark"] .info__card{
  background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(18,24,38,.72));
  box-shadow:
    0 34px 90px rgba(0,0,0,.50),
    0 12px 30px rgba(0,0,0,.35);
}
.info__card::before{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(255,219,61,.45),
    rgba(124,92,255,.26),
    rgba(0,163,255,.18),
    rgba(255,255,255,.28)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .55;
}
.info__card > *{position: relative}
.info__title{font-weight: 900; margin-bottom: 8px}
.info__text{color: rgba(11,18,32,.72); font-weight: 500}
html[data-theme="dark"] .info__text{color: rgba(245,247,255,.70)}

/* Правила проекта */
.rules{
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
}
.rulesBlock{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border: 1px solid rgba(11,18,32,.08);
  box-shadow:
    0 22px 56px rgba(11,18,32,.10),
    0 8px 22px rgba(11,18,32,.06);
}
html[data-theme="dark"] .rulesBlock{
  background: linear-gradient(180deg, rgba(18,24,38,.95), rgba(18,24,38,.78));
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 28px 70px rgba(0,0,0,.45),
    0 10px 26px rgba(0,0,0,.30);
}
.rulesBlock__title{
  margin: 0 0 16px 0;
  font-family: "Unbounded", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
  color: rgba(11,18,32,.95);
}
.rulesBlock__title--section{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(11,18,32,.10);
}
html[data-theme="dark"] .rulesBlock__title{color: rgba(245,247,255,.95)}
html[data-theme="dark"] .rulesBlock__title--section{border-top-color: rgba(255,255,255,.12)}
.rulesList{
  margin: 0;
  padding-left: 1.35em;
  color: rgba(11,18,32,.88);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
}
html[data-theme="dark"] .rulesList{color: rgba(245,247,255,.85)}
.rulesList li{
  margin: 0 0 12px 0;
  padding-left: 0.25em;
}
.rulesList li:last-child{margin-bottom: 0}

.rulesLead{
  margin: 0 0 18px 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(11,18,32,.85);
  font-weight: 500;
}
html[data-theme="dark"] .rulesLead{color: rgba(245,247,255,.82)}
.rulesCatalog{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rulesCatalog__entry{
  padding: 14px 0;
  border-bottom: 1px solid rgba(11,18,32,.08);
}
html[data-theme="dark"] .rulesCatalog__entry{border-bottom-color: rgba(255,255,255,.08)}
.rulesCatalog__entry:last-child{border-bottom: none; padding-bottom: 0}
.rulesCatalog__rule{
  margin: 0 0 8px 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(11,18,32,.92);
}
html[data-theme="dark"] .rulesCatalog__rule{color: rgba(245,247,255,.9)}
.rulesCatalog__rule .rulesPunish__code{margin-right: 6px}
.rulesCatalog__sanction{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(11,18,32,.72);
}
html[data-theme="dark"] .rulesCatalog__sanction{color: rgba(245,247,255,.68)}

.rulesIntro{
  margin: 0 0 18px 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(11,18,32,.82);
  font-weight: 500;
}
html[data-theme="dark"] .rulesIntro{color: rgba(245,247,255,.78)}
.rulesBlock__subtitle{
  margin: 22px 0 8px 0;
  font-family: "Unbounded", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  color: rgba(11,18,32,.92);
}
.rulesBlock__subtitle:first-of-type{margin-top: 0}
html[data-theme="dark"] .rulesBlock__subtitle{color: rgba(245,247,255,.92)}
.rulesHint{
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(11,18,32,.62);
  font-weight: 600;
}
html[data-theme="dark"] .rulesHint{color: rgba(245,247,255,.58)}
.rulesPunish{
  margin: 0 0 18px 0;
}
.rulesPunish:last-child{margin-bottom: 0}
.rulesPunish__item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11,18,32,.08);
}
html[data-theme="dark"] .rulesPunish__item{border-bottom-color: rgba(255,255,255,.08)}
.rulesPunish__item:last-child{border-bottom: none; padding-bottom: 0}
.rulesPunish__code{
  margin: 0;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: rgba(255,180,0,.95);
  white-space: nowrap;
  font-family: "Manrope", ui-monospace, monospace;
}
html[data-theme="dark"] .rulesPunish__code{color: rgba(255,219,61,.95)}
.rulesPunish__item dd{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(11,18,32,.88);
}
html[data-theme="dark"] .rulesPunish__item dd{color: rgba(245,247,255,.85)}
@media (max-width: 560px){
  .rulesPunish__item{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rulesPunish__code{font-size: 15px}
  .rulesBlock__subtitle{font-size: 16px}
  .rulesIntro{font-size: 14px}
}

/* Баннер «Правила» на главной + страница rules.html */
.rulesCtaBanner{
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,219,61,.10), transparent);
}
html[data-theme="dark"] .rulesCtaBanner{
  background: linear-gradient(180deg, rgba(255,219,61,.06), transparent);
}
.rulesCtaBanner__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rulesCtaBanner__text{
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: rgba(11,18,32,.88);
  max-width: 62ch;
}
html[data-theme="dark"] .rulesCtaBanner__text{color: rgba(245,247,255,.9)}
.rulesCtaBanner__btn{flex-shrink: 0}
@media (max-width: 560px){
  .rulesCtaBanner__inner{flex-direction: column; align-items: stretch}
  .rulesCtaBanner__btn{width: 100%; text-align: center}
}

.brand__link{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.brand__link:hover .brand__name{text-decoration: underline; text-underline-offset: 3px}

.nav__link--current{
  font-weight: 900;
  color: rgba(255,180,0,.95);
}
html[data-theme="dark"] .nav__link--current{color: rgba(255,219,61,.95)}

.rulesFootnote{
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(11,18,32,.03);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11,18,32,.72);
}
html[data-theme="dark"] .rulesFootnote{
  background: rgba(255,255,255,.04);
  color: rgba(245,247,255,.72);
}
.rulesFootnote p{margin: 0}

.rulesPage__section{padding-top: 10px}
.rulesPageBody{background: var(--bg)}

.footer__back{
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}
.footer__back:hover{text-decoration: underline}

/* Footer */
.footer{
  border-top: 1px solid var(--border);
  padding: 26px 0;
  background: transparent;
}
html[data-theme="dark"] .footer{
  /* не рисуем отдельный прямоугольник на фоне */
  background: transparent;
}

html[data-theme="dark"] .summary__k{color: rgba(245,247,255,.62)}
html[data-theme="dark"] .summary__v{color: rgba(245,247,255,.92)}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 22px 28px;
  flex-wrap:wrap;
}
.footer__legal{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: min(520px, 100%);
}
.footer__legalTitle{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
html[data-theme="dark"] .footer__legalTitle{color: rgba(245,247,255,.55)}
.footer__legalLinks{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 14px;
}
.footer__legalLinks a{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(15,23,42,.18);
}
.footer__legalLinks a:hover{
  color: var(--text);
  border-bottom-color: rgba(255,219,61,.75);
}
html[data-theme="dark"] .footer__legalLinks a{color: rgba(245,247,255,.72)}
html[data-theme="dark"] .footer__legalLinks a:hover{color: rgba(245,247,255,.92)}
.footer__brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brandMark{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  object-fit: cover;
  background: transparent;
}
.footer__name{font-weight: 900}
.footer__small{color: rgba(15,23,42,.62); font-weight: 600; font-size: 12px; margin-top: 4px}
html[data-theme="dark"] .footer__name{color: rgba(245,247,255,.92)}
html[data-theme="dark"] .footer__small{color: rgba(245,247,255,.62)}

/* Big social section */
.socialGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 10px; /* как и между кнопками в ряду */
  justify-items: center;
}
.socialBig{
  display:grid;
  place-items:center;
  /* Кликабельная область = компактная кнопка */
  width: min(280px, 100%);
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  transition: transform .22s var(--ease-out), filter .25s var(--ease-out), opacity .25s var(--ease-out);
}
.socialBig:hover{
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 18px 34px rgba(11,18,32,.16));
}
.socialBig:active{transform: translateY(-1px) scale(1.005)}
.socialBig__img{
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index: 100}
.modal.is-open{display:block}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(10px);
}
.modal__panel{
  position:absolute;
  width: min(560px, calc(100% - 28px));
  left: 50%;
  top: 70px;
  margin: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.12);
  box-shadow: 0 40px 120px rgba(11,18,32,.28);
  overflow:hidden;
  /* Чтобы корзина/модалка не "вылезала" за экран — скролл будет внутри body */
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  display: flex;
  flex-direction: column;
  transform: translateX(-50%) translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.modal.is-open .modal__panel{
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  flex: 0 0 auto;
}

html[data-theme="dark"] .modal__backdrop{
  background: rgba(0,0,0,.60);
}
html[data-theme="dark"] .modal__panel{
  background: rgba(18,24,38,.92);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 40px 120px rgba(0,0,0,.70);
}
html[data-theme="dark"] .modal__head{
  border-bottom-color: rgba(255,255,255,.10);
}
html[data-theme="dark"] .summary{
  border-color: rgba(255,255,255,.10);
  /* В тёмной теме без “жёлтой заливки” */
  background: linear-gradient(180deg, rgba(18,24,38,.92), rgba(18,24,38,.72));
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
html[data-theme="dark"] .summary__k{color: rgba(245,247,255,.62)}
html[data-theme="dark"] .field__label{color: rgba(245,247,255,.75)}
html[data-theme="dark"] .input{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(245,247,255,.92);
}
html[data-theme="dark"] .input::placeholder{color: rgba(245,247,255,.50)}
html[data-theme="dark"] .iconBtn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(245,247,255,.92);
}
html[data-theme="dark"] .iconBtn:hover{background: rgba(255,255,255,.10)}
.modal__title{font-weight: 900; font-size: 16px}
.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.70);
  cursor:pointer;
  font-weight: 900;
}
.iconBtn:hover{background: rgba(255,255,255,.92)}
.modal__body{
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.modal-lore{
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(11,18,32,.04);
  border: 1px solid rgba(11,18,32,.08);
}
html[data-theme="dark"] .modal-lore{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.modal-lore__title{
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(11,18,32,.10);
}
html[data-theme="dark"] .modal-lore__title{ border-bottom-color: rgba(255,255,255,.12) }
.modal-lore__line{
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 2px;
}
.modal-lore__line--gap{
  height: 6px;
  margin-bottom: 4px;
}
.modal-lore__line--gap:last-child{ height: 0; margin-bottom: 0 }
.modal-lore__default{
  color: var(--text);
  opacity: .92;
}
html[data-theme="dark"] .modal-lore__default{ opacity: 1 }
.summary{
  border: 1px solid rgba(11,18,32,.10);
  border-radius: 18px;
  padding: 12px;
  /* Полностью нейтральный фон (без жёлтого оттенка) */
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 30px rgba(11,18,32,.06);
}
.summary__row--total{margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(11,18,32,.10)}
.summary__v--good{color: rgba(20, 140, 60, .92)}
.summary__v--total{font-size: 16px}
html[data-theme="dark"] .summary__row--total{border-top-color: rgba(255,255,255,.12)}
html[data-theme="dark"] .summary__v--good{color: rgba(120, 255, 170, .92)}

.linkBtn{
  appearance:none;
  border:none;
  background: transparent;
  padding: 0;
  font-weight: 800;
  color: rgba(11,18,32,.82);
  cursor:pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,219,61,.85);
  text-underline-offset: 3px;
}
.linkBtn:hover{color: rgba(11,18,32,.95)}
html[data-theme="dark"] .linkBtn{color: rgba(245,247,255,.82)}
html[data-theme="dark"] .linkBtn:hover{color: rgba(245,247,255,.92)}
/* Dark theme: summary ("Выбор/Ник/Покупка") must not stay white */
/* (дубликат удалён — настройки см. выше рядом с блоком модалки) */
.summary__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.summary__row + .summary__row{margin-top: 8px}
.summary__k{color: rgba(15,23,42,.68); font-weight: 800}
.summary__v{font-weight: 900}
html[data-theme="dark"] .summary__k{color: rgba(245,247,255,.62)}
html[data-theme="dark"] .summary__v{color: rgba(245,247,255,.92)}
.form{margin-top: 14px; display:flex; flex-direction:column; gap: 12px}
.field{display:flex; flex-direction:column; gap: 8px}
.field__label{font-weight: 800; color: rgba(11,18,32,.78); font-size: 13px}
.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  outline:none;
  font-weight: 600;
}
html[data-theme="dark"] .input{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(245,247,255,.92);
}
html[data-theme="dark"] .check{color: rgba(245,247,255,.70)}
.input:focus{
  border-color: rgba(255,219,61,.90);
  box-shadow: 0 0 0 4px rgba(255,219,61,.22);
}
.check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(15,23,42,.70);
  font-weight: 600;
  font-size: 13px;
}
.check{
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
html[data-theme="dark"] .check{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.check:hover{
  border-color: rgba(255,219,61,.40);
  box-shadow: 0 0 0 4px rgba(255,219,61,.10);
}
.check input{
  position:absolute;
  opacity: 0;
  pointer-events:none;
}
.check__box{
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  margin-top: 2px;
  transition: transform .15s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
html[data-theme="dark"] .check__box{
  border-color: rgba(255,255,255,.16);
  background: rgba(18,24,38,.85);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.check__box::after{
  content:"";
  width: 9px;
  height: 5px;
  border-left: 3px solid rgba(31,26,0,.92);
  border-bottom: 3px solid rgba(31,26,0,.92);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .14s var(--ease-out);
}
html[data-theme="dark"] .check__box::after{
  border-left-color: rgba(245,247,255,.92);
  border-bottom-color: rgba(245,247,255,.92);
}
.check__text{line-height: 1.35}
.check input:checked + .check__box{
  border-color: rgba(255,219,61,.80);
  background: rgba(255,219,61,.45);
  box-shadow: 0 16px 34px rgba(255,219,61,.18), 0 12px 26px rgba(11,18,32,.10);
}
html[data-theme="dark"] .check input:checked + .check__box{
  background: rgba(255,219,61,.18);
  box-shadow: 0 16px 34px rgba(255,219,61,.12), 0 18px 45px rgba(0,0,0,.40);
}
.check input:checked + .check__box::after{
  transform: rotate(-45deg) scale(1);
}
.check:has(input:focus-visible){
  box-shadow: 0 0 0 4px rgba(255,219,61,.18);
  border-color: rgba(255,219,61,.55);
}
.check.is-error{
  border-color: rgba(255, 74, 74, .55);
  box-shadow: 0 0 0 4px rgba(255, 74, 74, .14);
}
.check.is-error .check__box{
  border-color: rgba(255, 74, 74, .70);
}
.modal__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.hint{
  font-size: 12px;
  color: rgba(15,23,42,.62);
  font-weight: 600;
}

/* Nick transfer (Смена ника) — чуть больше воздуха перед 2-м и 3-м полем */
.transfer__field--lower{
  margin-top: 14px;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1000; /* поверх модалки */
  background: rgba(15,23,42,.92);
  color:#fff;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events:none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
  max-width: min(520px, calc(100% - 28px));
  font-weight: 700;
}

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}
/* hover должен быть сильнее scroll-reveal (иначе transform перетирается в светлой теме) */
.card:hover{
  transform: translateY(-4px);
}
.toast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .grid--3{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .nav{display:none}
  .header__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
  }
  .brand{min-width: auto}
  .section__head{flex-direction:column; align-items:flex-start}
  .section{padding: 48px 0}
  .section__title{font-size: 26px}
}
/* Мобильные: центрирование контента и шапки, кнопка «Копировать» компактнее */
@media (max-width: 768px){
  .header__inner{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }
  .header__inner::after{display: none}
  .header__inner > .brand,
  .header__inner > .header__actions{
    flex-shrink: 0;
  }
  .header__actions{
    gap: 8px;
    justify-content: center;
  }
  .header__actions .btn{
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 14px;
  }
  .header__actions .cartBtn,
  .header__actions .themeToggle{
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
  .header__actions .cartBtn__icon svg,
  .header__actions .themeToggle__icon svg{
    width: 20px;
    height: 20px;
  }
  .header__actions .cartBtn__icon,
  .header__actions .themeToggle__icon{
    width: 20px;
    height: 20px;
  }
  .section__head{
    align-items: center;
    text-align: center;
  }
  .section__title,
  .section__desc{
    text-align: center;
  }
  .section__desc{margin-left: auto; margin-right: auto}
  .grid,
  .grid--3{
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
  }
  .segmented{justify-content: center}
  .info{justify-items: center}
  .footer__inner{justify-content: center; text-align: center}
  .footer__brand{flex-direction: column; align-items: center}
  .copyOnBanner{width: 21px; height: 21px; border-radius: 8px}
  .copyOnBanner__icon{width: 10px; height: 10px}
}
@media (max-width: 560px){
  .grid, .grid--3{grid-template-columns: 1fr; max-width: 420px}
  .modal__actions{grid-template-columns: 1fr}
  .section{padding: 40px 0}
  .section__title{font-size: 24px}
  .section__desc{font-size: 14px}
  .card{padding: 14px 14px 12px; min-height: 140px}
  .card__mediaTitle{top: 10px; left: 10px; padding: 8px 10px; font-size: 13px}
  .card__mediaPrice{right: 10px; bottom: 10px; padding: 8px 10px; font-size: 13px}
  .card__title{font-size: 14px}
  .card__actions .btn,
  .card__actions .btnIcon{min-height: 44px}
  .pill{flex-wrap: wrap; padding: 8px 10px; font-size: 12px}
  .section__head .pill{display: none}
  .segmented{flex-wrap: wrap; justify-content: center}
  .segmented__btn{padding: 8px 10px; font-size: 13px; min-height: 44px}
  .rangeCard{padding: 14px; max-width: 420px; margin-left: auto; margin-right: auto}
  .rangeCard__v{font-size: 16px}
  .range__input{height: 100px}
  .range__input::-webkit-slider-thumb{width: 72px; height: 72px; margin-top: -27px}
  .range__input::-moz-range-thumb{width: 72px; height: 72px}
  .range__orn{width: 36px; height: 18px}
  .info{grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto}
  .rulesBlock{padding: 18px 16px}
  .rulesBlock__title{font-size: 18px}
  .rulesList{font-size: 14px}
  .rulesList li{margin-bottom: 10px}
  .socialGrid{grid-template-columns: 1fr; row-gap: 14px; max-width: 280px; margin-left: auto; margin-right: auto}
  .socialBig{width: 100%; max-width: 260px; justify-self: center}
  .footer__inner{flex-direction: column; align-items: center; text-align: center; padding-bottom: env(safe-area-inset-bottom)}
  .footer__brand{flex-direction: column; align-items: center}
  .footer{padding: 20px 0; padding-bottom: max(20px, env(safe-area-inset-bottom))}
  .modal__panel{top: 12px; max-height: calc(100dvh - 24px); border-radius: 18px; width: calc(100% - 20px)}
  .modal__head, .modal__body{padding: 12px 14px}
  .modal__title{font-size: 15px}
  .input, .btn{padding: 12px 14px; font-size: 16px}
  .input{min-height: 48px}
  .iconBtn, .cartItem__remove{min-width: 44px; min-height: 44px}
  .toast{bottom: max(18px, env(safe-area-inset-bottom)); left: 14px; right: 14px; max-width: none; transform: translateX(0)}
  .toast.is-show{transform: translateY(-2px)}
}

/* Очень маленькие экраны (< 380px) */
@media (max-width: 379px){
  .container{padding-left: 14px; padding-right: 14px}
  .brand__logo{width: 48px; height: 48px}
  .brand__name{font-size: 15px}
  .brand__tag{font-size: 11px}
  .section__title{font-size: 22px}
  .card{padding: 12px 12px 10px}
  .copyOnBanner{width: 17px; height: 17px; border-radius: 6px}
  .copyOnBanner__icon{width: 8px; height: 8px}
}