/* Design tokens */
:root {
  --color-accent: #ffb436;
  --color-bg: #050706;
  --color-surface: #111411;
  --color-light: #050706;
  --color-text: #e8e9e2;
  --color-muted: #9b9e95;
  --color-line: rgba(255, 255, 255, .14);
  --font-display: Oswald, sans-serif;
  --font-body: Manrope, Arial, sans-serif;
  --text-body: 1rem;
  --text-section-copy: 1.05rem;
  --line-body: 1.6;
  --container: 1240px;
  --section-space: 120px;
  --heading-top-gap: 18px;
  --heading-bottom-gap: 28px;
  --content-gap: 48px;
  --item-gap: 24px;
  --control-size: 46px;
  --slider-arrow-width: 30px;
  --slider-arrow-height: 50px;
  --motion: .6s cubic-bezier(.22, .75, .2, 1);
  --acid: var(--color-accent);
  --ink: var(--color-bg);
  --paper: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --max: var(--container);
  --border-radius: 5px;
  --bg-fon: #ffb43614;
}

/* Base and layout */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body)/var(--line-body) var(--font-body);
  overflow-x: hidden;
}

.ambient-particles {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.wrap {
  width: min(calc(100% - 40px), var(--container));
  margin: auto;
}

.section-copy {
  max-width: 680px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-section-copy);
  line-height: 1.7;
}

/* Hero and navigation */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #090b0a;
}

.hero:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -3%;
  background: url('../zona-hero.jpg') center/cover no-repeat;
  transform: scale(1);
  transform-origin: center;
  animation: hero-breathe 18s ease-in-out infinite alternate;
  will-change: transform;
}

.hero:after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 6, 5, .96) 0%, rgba(4, 6, 5, .75) 37%, rgba(4, 6, 5, .2) 70%), linear-gradient(0deg, #080a09 0%, transparent 38%);
}

@keyframes hero-breathe {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.055);
  }
}

.hero-body {
  position: relative;
  z-index: 3;
}

.hero-character {
  --character-x: 0px;
  --character-y: 0px;
  position: absolute;
  z-index: 2;
  right: clamp(-70px, 3vw, 56px);
  bottom: -34vh;
  height: min(140vh, 1450px);
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--character-x), var(--character-y), 0);
  transform-origin: center bottom;
  will-change: transform;
  margin-right: 5rem;
}

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    width: 100%;
    height: 60px;
    background: rgb(0 0 0 / 47%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
    display: inline-flex;
    flex: 0 0 auto;
    width: 100px;
    height: 50px;
    overflow: hidden;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 39% center;
}

.menu {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.menu a {
  opacity: .72;
  transition: .2s;
}

.menu a:hover {
  opacity: 1;
}

.menu .discord {
  opacity: 1;
  padding: 3px 10px;
  border-radius: var(--border-radius);
  background: #ba8dff38;
  color: #ba8dff;
}

.discord::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23ba8dff' d='M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91A483.689 483.689 0 0 0 116.085 69.137a1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375A487.666 487.666 0 0 0 176.02 479.981a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.85-21.848 1.885 1.885 0 0 1-.185-3.126 246.984 246.984 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 242.605 242.605 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.825 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541zM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: top;
  margin-right: 6px;
}

.menu .vk {
  opacity: 1;
  padding: 3px 10px;
  border-radius: var(--border-radius);
  background: #004cff36;
  color: #5eacff;
}

.vk::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.5 0 32 32'%3E%3Cpath fill='%235eacff' d='M16.563 15.75c-0.5-0.188-0.5-0.906-0.531-1.406-0.125-1.781 0.5-4.5-0.25-5.656-0.531-0.688-3.094-0.625-4.656-0.531-0.438 0.063-0.969 0.156-1.344 0.344s-0.75 0.5-0.75 0.781c0 0.406 0.938 0.344 1.281 0.875 0.375 0.563 0.375 1.781 0.375 2.781 0 1.156-0.188 2.688-0.656 2.75-0.719 0.031-1.125-0.688-1.5-1.219-0.75-1.031-1.5-2.313-2.063-3.563-0.281-0.656-0.438-1.375-0.844-1.656-0.625-0.438-1.75-0.469-2.844-0.438-1 0.031-2.438-0.094-2.719 0.5-0.219 0.656 0.25 1.281 0.5 1.813 1.281 2.781 2.656 5.219 4.344 7.531 1.563 2.156 3.031 3.875 5.906 4.781 0.813 0.25 4.375 0.969 5.094 0 0.25-0.375 0.188-1.219 0.313-1.844s0.281-1.25 0.875-1.281c0.5-0.031 0.781 0.406 1.094 0.719 0.344 0.344 0.625 0.625 0.875 0.938 0.594 0.594 1.219 1.406 1.969 1.719 1.031 0.438 2.625 0.313 4.125 0.25 1.219-0.031 2.094-0.281 2.188-1 0.063-0.563-0.563-1.375-0.938-1.844-0.938-1.156-1.375-1.5-2.438-2.563-0.469-0.469-1.063-0.969-1.063-1.531-0.031-0.344 0.25-0.656 0.5-1 1.094-1.625 2.188-2.781 3.188-4.469 0.281-0.5 0.938-1.656 0.688-2.219-0.281-0.625-1.844-0.438-2.813-0.438-1.25 0-2.875-0.094-3.188 0.156-0.594 0.406-0.844 1.063-1.125 1.688-0.625 1.438-1.469 2.906-2.344 4-0.313 0.375-0.906 1.156-1.25 1.031z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 6px;
  vertical-align: top;
}

.promo::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/assets/promo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: top;
  margin-right: 6px;
}

.player::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("/assets/pvp.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.ping::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("/assets/anticheat.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.map::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffb436' d='M12 2C7.86 2 4.5 5.36 4.5 9.5c0 5.25 6.19 11.71 6.45 11.98a1.5 1.5 0 0 0 2.1 0c.26-.27 6.45-6.73 6.45-11.98C19.5 5.36 16.14 2 12 2zm0 10.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.loot::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffb436' d='M12 1.5a1.5 1.5 0 0 1 1.35.84l2.85 5.77 6.37.93a1.5 1.5 0 0 1 .83 2.56l-4.61 4.49 1.09 6.34a1.5 1.5 0 0 1-2.18 1.58L12 21.02l-5.7 2.99a1.5 1.5 0 0 1-2.18-1.58l1.09-6.34-4.61-4.49a1.5 1.5 0 0 1 .83-2.56l6.37-.93 2.85-5.77A1.5 1.5 0 0 1 12 1.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-top;
    margin-right: 6px;
}

.vipe::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffb436' d='M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.raid::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffb436' d='M246.9 82.3L271 67.8C292.6 54.8 317.3 48 342.5 48C379.3 48 414.7 62.6 440.7 88.7L504.6 152.6C519.6 167.6 528 188 528 209.2L528 240.1L547.7 259.8L547.7 259.8C563.3 244.2 588.6 244.2 604.3 259.8C620 275.4 619.9 300.7 604.3 316.4L540.3 380.4C524.7 396 499.4 396 483.7 380.4C468 364.8 468.1 339.5 483.7 323.8L464 304L433.1 304C411.9 304 391.5 295.6 376.5 280.6L327.4 231.5C312.4 216.5 304 196.1 304 174.9L304 162.2C304 151 298.1 140.5 288.5 134.8L246.9 109.8C236.5 103.6 236.5 88.6 246.9 82.4zM50.7 466.7L272.8 244.6L363.3 335.1L141.2 557.2C116.2 582.2 75.7 582.2 50.7 557.2C25.7 532.2 25.7 491.7 50.7 466.7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 6px;
}

.hamb {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.hero-body {
  flex: 1;
  display: grid;
  align-content: center;
  padding: 80px 0 110px;
}

.hero-copy {
  max-width: 1050px;
}

.hero h1 {
  font: 700 clamp(4rem, 11vw, 9.6rem)/.82 Oswald, sans-serif;
  letter-spacing: -.055em;
  margin: 28px 0 34px;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero h1 span {
  display: inline;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232, 233, 226, .45);
  margin-left: .08em;
}

.lead {
  max-width: 590px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #c0c3bb;
}

.actions {
  display: flex;
  gap: 14px;
  margin-top: 42px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 26px;
  border: 1px solid var(--line);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: .25s;
  border-radius: var(--border-radius);
}

.btn.primary {
    background: var(--bg-fon);
    border-color: var(--acid);
    color: var(--color-accent);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(213, 255, 54, .14);
}

.status {
  position: absolute;
  z-index: 2;
  right: 4vw;
  bottom: 54px;
  text-align: right;
}

.online {
  font: 600 2.4rem Oswald, sans-serif;
}

.online i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 14px var(--acid);
  margin-right: 12px;
}

.status small {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* Shared sections and typography */
section {
  padding: var(--section-space) 0;
}

.intro {
  display: block;
}

h2 {
  font: 600 clamp(2rem, 5.2vw, 5rem)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.035em;
  margin: var(--heading-top-gap) 0 var(--heading-bottom-gap);
}

.eyebrow {
    display: inline-flex;
    width: max-content;
    border: 1px solid rgb(133 99 43);
    background: repeating-linear-gradient(135deg, rgb(213 255 54 / 7%) 0 5px, transparent 5px 10px);
    padding: 8px 16px;
    color: var(--color-accent);
    letter-spacing: .22em;
    text-transform: uppercase;
    box-shadow: inset 0 0 16px rgb(0 0 0 / 84%);
	font-size: 12px;
	border-radius: var(--border-radius);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--content-gap);
  margin-top: var(--content-gap);
}

.stat {
  padding: var(--item-gap) 20px 0 0;
}

.stat strong {
  display: block;
  color: var(--color-accent);
}

.server-stats .stat strong {
  min-height: 1.2em;
  font-size: clamp(2rem, 4vw, 2.7rem);
  white-space: nowrap;
}

.stat span {
  color: var(--color-muted);
  font-size: .84rem;
  letter-spacing: .08em;
}

.online-chart {
  position: relative;
  margin-top: var(--content-gap);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--color-line);
  background: linear-gradient(180deg, rgba(255, 180, 54, .045), rgba(5, 7, 6, .2));
}

.online-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--item-gap);
  margin-bottom: 18px;
}

.online-chart-kicker {
  display: block;
  color: var(--color-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.online-chart h3 {
  margin: 6px 0 0;
  text-transform: uppercase;
}

.online-chart-meta {
  color: var(--color-muted);
  font-size: .78rem;
  text-align: right;
}

.online-chart-stage {
  position: relative;
  min-height: 260px;
}

.online-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.online-chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--color-muted);
  font-size: .9rem;
  text-align: center;
}

.online-chart-empty[hidden] {
  display: none;
}

.online-chart-grid {
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 1;
}

.online-chart-area {
  fill: url(#online-chart-gradient);
}

.online-chart-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255, 180, 54, .3));
}

.online-chart-point {
  fill: var(--color-bg);
  stroke: var(--color-accent);
  stroke-width: 4;
}

.online-chart-axis-label {
  fill: var(--color-muted);
  font: 500 20px var(--font-body);
}

.online-chart-time {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Feature slider */
.features {
  background: var(--color-light);
  overflow: hidden;
}

.features-head,
.showcase-head {
  display: block;
  margin-bottom: var(--content-gap);
}

.showcase {
  overflow: hidden;
  background: var(--color-bg);
}

.showcase-alt {
  background: var(--color-light);
}

.slider {
  position: relative;
}

.slider-viewport {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform var(--motion);
  will-change: transform;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16/9;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface) center/cover no-repeat;
  color: #fff;
}

.slide:nth-child(1) {
  background-image: url('../../slider/1.jpg');
}

.slide:nth-child(2) {
  background-image: url('../../slider/2.jpg');
}

.slide:nth-child(3) {
  background-image: url('../../slider/3.jpg');
}

.slide:nth-child(4) {
  background-image: url('../../slider/4.jpg');
}

.slide:nth-child(5) {
  background-image: url('../../slider/5.jpg');
}

.slide:nth-child(6) {
  background-image: url('../../slider/6.jpg');
}

.slide:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 6, .98), rgba(5, 7, 6, .04) 62%), linear-gradient(90deg, rgba(5, 7, 6, .38), transparent 55%);
}

.slide-copy {
  position: absolute;
  z-index: 1;
  left: 72px;
  right: 72px;
  bottom: var(--content-gap);
}

.num {
  display: block;
  margin-bottom: 12px;
  color: var(--color-accent);
  letter-spacing: .18em;
}

.slide h3 {
  font: 600 clamp(2.2rem, 5vw, 4.5rem)/1 var(--font-display);
  text-transform: uppercase;
  margin: 0 0 var(--heading-bottom-gap);
  white-space: nowrap;
}

.slide p {
  max-width: 650px;
  margin: 0;
  color: #c4c8bf;
  font-size: var(--text-section-copy);
}

.slider-btn {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--slider-arrow-width) + 22px);
  height: calc(var(--slider-arrow-height) + 22px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0;
  cursor: pointer;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .72));
  transition: color .2s, transform .2s;
}

.slider-btn:before {
  content: "";
  display: block;
  width: var(--slider-arrow-width);
  height: var(--slider-arrow-height);
  background: currentColor;
  clip-path: polygon(64% 0, 100% 0, 36% 50%, 100% 100%, 64% 100%, 0 50%);
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}

.slider-btn.next:before {
  transform: scaleX(-1);
}

.slider-btn:hover {
  color: var(--color-accent);
  transform: translateY(-50%) scale(1.08);
}

.slider-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.slider-dots {
  position: absolute;
  z-index: 3;
  top: var(--item-gap);
  left: 50%;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}

.slider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.slider-dot.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Bonuses and join section */
.bonuses {
  background: var(--color-bg);
}

.bonuses-head {
  display: block;
  margin-bottom: var(--content-gap);
}

.bonus-frame {
  position: relative;
  border: 1px solid rgba(213, 255, 54, .2);
  background: #050605;
  overflow: hidden;
}

.bonus-frame:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-top: 4px solid var(--acid);
    border-left: 4px solid var(--acid);
    box-sizing: border-box;
    pointer-events: none;
	z-index: 999;
}

.bonus-frame:after {
	content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-bottom: 4px solid var(--acid);
    border-right: 4px solid var(--acid);
    box-sizing: border-box;
    pointer-events: none;
}

.bonus-frame:before {
  left: 0;
  top: 0;
}

.bonus-frame:after {
  right: 0;
  bottom: 0;
}

.bonus-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.join {
  position: relative;
  overflow: hidden;
}

.join-inner {
  position: relative;
  display: grid;
  gap: 8vw;
  align-items: center;
}

.steps {
  border-top: 1px solid var(--color-line);
}

.step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--heading-top-gap);
  padding: var(--item-gap) 0;
  border-bottom: 1px solid var(--color-line);
}

.step1 {
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	background: var(--bg-fon);
	border: 1px solid var(--line);
	border-radius: var(--border-radius);
	border-color: var(--acid);
}

.step b {
  color: var(--color-accent);
}

.step h3 {
  margin: 0 0 6px;
  text-transform: uppercase;
}

.step p {
  margin: 0;
  color: var(--color-muted);
  font-size: .92rem;
}

.server-box {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  padding: var(--content-gap);
  display: none;
}

.server-box .label {
  color: var(--color-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .17em;
}

.ip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--item-gap);
  margin: 13px 0 30px;
  padding-bottom: var(--item-gap);
  border-bottom: 1px solid var(--color-line);
}

.ip strong {
  font: 600 clamp(1.2rem, 3vw, 2rem) var(--font-display);
}

.copy {
  border: 0;
  background: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.notice {
  min-height: 24px;
  color: var(--color-accent);
  font-size: .78rem;
  margin-top: 12px;
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
}

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .78rem;
}

.foot .logo {
  width: 46px;
  height: 46px;
}

/* Responsive */
@media (max-width: 850px) {
  .hero-character {
    display: none;
  }

  .hero:before {
    animation: none;
    transform: scale(1);
    will-change: auto;
  }

  .ambient-particles {
    display: none;
  }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100svh - 60px);
    padding: 20px max(20px, calc((100vw - var(--container)) / 2));
    overflow-y: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    background: rgba(4, 6, 5, .96);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .menu.is-open {
    display: flex;
  }

  .menu a,
  .menu .vk,
  .menu .discord {
    width: 100%;
    padding: 14px 12px;
  }

  body.menu-open {
    overflow: hidden;
  }

  .hamb {
    display: block;
    position: relative;
    z-index: 1;
  }

  .hero h1 span {
    margin-left: 0;
  }

  .status {
    display: none;
  }

  .join-inner {
    grid-template-columns: 1fr;
    gap: var(--content-gap);
  }

  .slide {
    min-height: 470px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-character {
    transform: none;
    will-change: auto;
  }

  .hero:before {
    animation: none;
    transform: scale(1);
    will-change: auto;
  }

  .ambient-particles {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --section-space: 82px;
    --heading-top-gap: 14px;
    --heading-bottom-gap: 22px;
    --content-gap: 36px;
    --item-gap: 20px;
    --text-section-copy: .96rem;
    --control-size: 38px;
    --slider-arrow-width: 22px;
    --slider-arrow-height: 38px;
  }

  .wrap {
    width: min(calc(100% - 28px), var(--container));
  }

  .nav {
    height: 76px;
  }

  .menu {
    max-height: calc(100svh - 76px);
  }

  .hero-body {
    padding: 70px 0;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.5rem);
  }

  h2 {
    font-size: clamp(1.7rem, 8.5vw, 2.6rem);
  }

  .eyebrow {
    font-size: .62rem;
    letter-spacing: .14em;
  }

  .actions .btn {
    width: 100%;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stat {
    border-bottom: 1px solid var(--color-line);
    padding: var(--item-gap) 0;
  }

  .online-chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .online-chart-meta {
    text-align: left;
  }

  .online-chart-stage {
    min-height: 190px;
  }

  .slide {
    min-height: 420px;
  }

  .slide-copy {
    left: 58px;
    right: 58px;
    bottom: var(--content-gap);
  }

  .slide h3 {
    font-size: 2.2rem;
  }

  .slider-btn.prev {
    left: 5px;
  }

  .slider-btn.next {
    right: 5px;
  }

  .server-box {
    padding: var(--item-gap);
  }

  .ip {
    align-items: flex-start;
    flex-direction: column;
  }

  .foot {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
}