:root {
  --bg: #0d0f15;
  --panel: #151821;
  --panel-2: #1b1e28;
  --line: #2a2e39;
  --text: #f4f5f7;
  --muted: #a5a8b1;
  --mint: #0bcbb9;
  --pink: #fa29aa;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: -60px;
  left: 12px;
  padding: 10px 15px;
  background: var(--mint);
  color: #06110f;
  font-weight: 700;
}

.skip-link:focus {
  top: 0;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 15, 21, .96);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  max-width: 1120px;
  height: 68px;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo img {
  width: 130px;
  height: 56px;
  object-fit: contain;
}

.header-inner nav {
  display: flex;
  gap: 25px;
  margin-left: 12px;
}

.header-inner nav a,
.login {
  color: #c1c3ca;
  font-size: 12px;
  font-weight: 700;
}

.header-inner nav a:hover,
.login:hover {
  color: var(--mint);
}

.login {
  margin-left: auto;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--mint);
  border-radius: 6px;
  background: var(--mint);
  color: #06110f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.button:hover {
  background: #24dfce;
}

.button--small {
  min-height: 38px;
  padding: 0 18px;
  font-size: 10px;
}

.hero {
  position: relative;
  max-width: 1120px;
  min-height: 470px;
  overflow: hidden;
  margin: 24px auto 0;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--panel);
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 12, 18, .97), rgba(10, 12, 18, .88) 43%, rgba(10, 12, 18, .20) 78%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
  padding: 64px 54px;
}

.hero-copy > span,
.image-banner span {
  color: var(--pink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.hero h1 {
  margin: 10px 0 16px;
  font-size: clamp(45px, 5.5vw, 68px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.hero p {
  max-width: 570px;
  margin: 0 0 24px;
  color: #c4c6cd;
  font-size: 16px;
}

.bonus-bar {
  display: grid;
  max-width: 1120px;
  min-height: 72px;
  grid-template-columns: repeat(3, 1fr) .8fr;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--panel-2);
}

.bonus-bar > span,
.bonus-bar > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  font-size: 11px;
  text-align: center;
}

.bonus-bar > span {
  flex-direction: column;
  color: #777b86;
  text-transform: uppercase;
}

.bonus-bar strong {
  color: #fff;
  font-size: 14px;
}

.bonus-bar > a {
  border-right: 0;
  background: var(--mint);
  color: #06110f;
  font-weight: 800;
  text-transform: uppercase;
}

.article {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.breadcrumbs {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  color: #6f7380;
  font-size: 10px;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--mint);
}

.article-header {
  padding: 48px 0 34px;
  border-bottom: 1px solid var(--line);
}

.article h2 {
  margin: 45px 0 14px;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.article-header h2 {
  margin-top: 0;
  font-size: 40px;
}

.article h3 {
  margin: 30px 0 9px;
  font-size: 22px;
  line-height: 1.35;
}

.article p {
  margin: 0 0 18px;
  color: var(--muted);
}

.article-header p {
  color: #c5c7ce;
  font-size: 17px;
}

.article small,
.article-header small {
  color: #717581;
  font-size: 10px;
}

.contents {
  margin: 34px 0 8px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.contents > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.contents ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 30px;
  margin: 0;
  padding-left: 22px;
  color: #8c909b;
}

.contents a {
  color: #b8bac2;
  font-size: 13px;
}

.contents a:hover {
  color: var(--mint);
}

.table-wrap {
  overflow-x: auto;
  margin: 24px 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: var(--panel);
  font-size: 13px;
}

th {
  padding: 13px 15px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #1e212b;
  color: #9296a1;
  font-size: 10px;
  text-align: left;
  text-transform: uppercase;
}

td {
  padding: 14px 15px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #b6b9c1;
}

th:last-child,
td:last-child {
  border-right: 0;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

td strong {
  color: #fff;
}

.image-banner {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  margin: 26px 0;
  border: 1px solid rgba(250, 41, 170, .32);
  border-radius: 7px;
  background: var(--panel);
}

.image-banner > img {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.image-banner::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #151821 0%, #151821 44%, transparent 78%);
  content: "";
}

.image-banner > div {
  position: relative;
  z-index: 2;
  max-width: 570px;
  padding: 47px 36px;
}

.image-banner strong {
  display: block;
  margin: 7px 0 9px;
  font-size: 28px;
}

.image-banner p {
  max-width: 480px;
}

.article ul {
  margin: 16px 0 20px;
  padding-left: 22px;
  color: var(--muted);
}

.article li {
  margin: 8px 0;
}

.article li strong {
  color: #e7e8ec;
}

.numbered-list {
  margin: 23px 0 !important;
  padding: 0 !important;
  counter-reset: item;
  list-style: none;
}

.numbered-list li {
  position: relative;
  min-height: 58px;
  margin: 0 !important;
  padding: 17px 0 17px 56px;
  border-bottom: 1px solid var(--line);
  counter-increment: item;
}

.numbered-list li::before {
  position: absolute;
  top: 18px;
  left: 0;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: #06110f;
  content: counter(item);
  font-size: 12px;
  font-weight: 800;
}

.numbered-list p {
  margin: 3px 0 0;
  font-size: 14px;
}

.notice {
  margin: 25px 0;
  padding: 17px 20px;
  border: 1px solid rgba(11, 203, 185, .28);
  border-left: 3px solid var(--mint);
  border-radius: 5px;
  background: rgba(11, 203, 185, .05);
  color: #a8abb4;
  font-size: 14px;
}

.notice strong {
  color: #fff;
}

.content-image {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
}

details {
  border-bottom: 1px solid var(--line);
}

details:first-of-type {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

summary {
  padding: 18px 3px;
  cursor: pointer;
  font-weight: 700;
}

details[open] summary {
  color: var(--mint);
}

details p {
  padding: 0 25px 17px 3px;
  font-size: 14px;
}

.final-cta {
  margin-top: 50px;
  padding: 38px;
  border: 1px solid rgba(250, 41, 170, .35);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(250, 41, 170, .13), var(--panel));
  text-align: center;
}

.final-cta h2 {
  margin-top: 0;
}

.final-cta p {
  margin-bottom: 22px;
}

.site-footer {
  padding: 0 20px;
  border-top: 1px solid var(--line);
  background: #090b10;
}

.footer-main {
  display: flex;
  max-width: 1060px;
  min-height: 110px;
  align-items: center;
  gap: 45px;
  margin: 0 auto;
}

.footer-main > img {
  width: 135px;
  height: 60px;
  object-fit: contain;
}

.footer-main nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
}

.footer-main a {
  color: #888c97;
  font-size: 11px;
}

.footer-main a:hover {
  color: var(--mint);
}

.legal {
  display: grid;
  max-width: 1060px;
  grid-template-columns: 40px 40px 1fr;
  gap: 13px;
  align-items: center;
  margin: 0 auto;
  padding: 19px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.legal > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #bc5065;
  border-radius: 50%;
  color: #ed7088;
  font-size: 11px;
  font-weight: 800;
}

.legal img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: .7;
}

.legal p {
  margin: 0;
  color: #696d78;
  font-size: 10px;
  line-height: 1.5;
}

.legal p strong {
  color: #9da0aa;
}

.copyright {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 0 26px;
  color: #50545f;
  font-size: 9px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .header-inner {
    height: 60px;
    gap: 12px;
    padding: 0 14px;
  }

  .logo img {
    width: 105px;
    height: 49px;
  }

  .header-inner nav {
    display: none;
  }

  .login {
    margin-left: auto;
  }

  .hero {
    min-height: 530px;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .hero > img {
    object-position: 68% center;
  }

  .hero-shade {
    background: linear-gradient(90deg, rgba(10, 12, 18, .94), rgba(10, 12, 18, .36)), linear-gradient(0deg, rgba(10, 12, 18, .72), transparent);
  }

  .hero-copy {
    padding: 70px 20px 45px;
  }

  .hero h1 {
    font-size: clamp(40px, 11vw, 55px);
  }

  .hero p {
    font-size: 14px;
  }

  .bonus-bar {
    grid-template-columns: 1fr 1fr;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .bonus-bar > span,
  .bonus-bar > a {
    min-height: 65px;
    border-bottom: 1px solid var(--line);
  }

  .article {
    padding: 0 15px 65px;
  }

  .article-header {
    padding-top: 37px;
  }

  .article h2,
  .article-header h2 {
    font-size: 28px;
  }

  .article h3 {
    font-size: 20px;
  }

  .article-header p {
    font-size: 15px;
  }

  .contents {
    padding: 18px 20px;
  }

  .contents ol {
    grid-template-columns: 1fr;
  }

  .image-banner {
    min-height: 480px;
  }

  .image-banner > img {
    width: 100%;
    opacity: .55;
  }

  .image-banner::after {
    background: linear-gradient(90deg, rgba(21, 24, 33, .90), rgba(21, 24, 33, .22)), linear-gradient(0deg, #151821, transparent 70%);
  }

  .image-banner > div {
    padding: 42px 22px 150px;
  }

  .footer-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 28px 0;
  }

  .footer-main nav {
    gap: 11px 19px;
    margin-left: 0;
  }

  .legal {
    grid-template-columns: 38px 38px 1fr;
    gap: 9px;
  }
}

@media (max-width: 420px) {
  .login {
    display: none;
  }

  .hero-copy > span {
    font-size: 8px;
  }

  .button {
    width: 100%;
  }

  .button--small {
    width: auto;
  }

  .bonus-bar strong {
    font-size: 12px;
  }

  .final-cta {
    padding: 28px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}