*, *:before, *:after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

footer, header, nav, section, main {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
}

ul {
  list-style: none;
}

button {
  outline: none;
  border: none;
}

button, label {
  cursor: none;
}

a {
  text-decoration: none;
}

body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background: transparet;
}

body::-webkit-scrollbar-thumb {
  background-color: #4B40F6;
  border-radius: 20px;
}

.d-none {
  display: none;
}

body {
  font-family: Regular;
}

.container {
  max-width: 1784px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}
.accent {
  color: #4B40F6;
}

.h1 {
  font-size: 120px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  font-family: Black;
  text-transform: uppercase;
}

.h2 {
  font-size: 100px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-family: Black;
  text-transform: uppercase;
}

.h3 {
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-family: Bold;
}

.h4 {
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-family: Bold;
}

.h5 {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  font-family: Regular;
}

.h6 {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-family: Bold;
}

.subhead {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-family: Bold;
}

.numbers {
  font-size: 75px;
  font-family: Black;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.tag {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-family: Regular;
}

.h-menu {
  font-size: 18px;
  line-height: 3.6;
  letter-spacing: 0.05em;
  font-family: Bold;
}

@media (max-width: 1200px) {
  .h1 {
    font-size: 70px;
  }
  .h2 {
    font-size: 50px;
  }
  .h3 {
    font-size: 28px;
  }
  .h4 {
    font-size: 20px;
  }
  .h5 {
    font-size: 16px;
    line-height: 1.2;
  }
  .h6 {
    font-size: 14px;
    line-height: 1.2;
  }
  .subhead {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  .h2 {
    font-size: 28px;
  }
  .h3 {
    font-size: 24px;
  }
  .numbers {
    font-size: 50px;
  }
  .tag {
    font-size: 14px;
    line-height: 1;
  }
}
.body-lg {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-family: Regular;
}

.body {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  font-family: Light;
}

.body-sm {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-family: Light;
}

.body-xs {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-family: Light;
}

.btn-txt span {
  font-family: Bold;
  font-size: 16px;
  line-height: 16px;
}

.button {
  font-family: Bold;
  font-size: 16px;
  line-height: 16px;
}

@media (max-width: 768px) {
  .body-lg {
    font-size: 18px;
  }
  .body {
    font-size: 16px;
    line-height: 1.2;
  }
}
.btn-animate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 2px solid transparent;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.4s ease;
}

.btn-animate::before {
  content: "";
  position: absolute;
  width: 40%;
  height: 100px;
  background: black;
  top: var(--y, 50%);
  left: var(--x, 50%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
  border-radius: 100%;
  will-change: transform;
}

.btn-animate:hover::before {
  transform: translate(-50%, -50%) scale(7);
  transition: transform 0.6s ease-in-out;
}

.btn-animate span,
.btn-animate svg {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.btn-animate:hover svg {
  color: white;
}

.btn {
  display: flex;
  justify-content: center;
  padding: 16px 60px 16px 40px;
  border: 1px solid #4B40F6;
  border-radius: 100px;
  background-color: #4B40F6;
  width: max-content;
}
.btn span {
  font-size: 16px;
  line-height: 16px;
  font-family: Bold;
  display: flex;
  text-transform: uppercase;
  color: #EDE9EB;
  margin-bottom: 3px;
  width: max-content;
}
.btn span:first-child::after {
  position: absolute;
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='12' width='12'><path d='M8.69971 1.93327L0 10.633L1.36703 12L10.0667 3.30029V10.633H12V0L1.367 4.64783e-07L1.367 1.93327L8.69971 1.93327Z' fill='%23EDE9EB' /></svg>");
  right: -20px;
}
.btn:hover {
  border: 1px solid #EDE9EB;
}

.btn-dark {
  display: flex;
  padding: 16px 60px 16px 40px;
  border: 1px solid #EDE9EB;
  border-radius: 100px;
  background: rgba(237, 233, 235, 0.1);
  width: max-content;
}
.btn-dark span {
  display: flex;
  font-family: Bold;
  font-size: 16px;
  line-height: 16px;
  text-transform: uppercase;
  color: #EDE9EB;
  margin-bottom: 2px;
}
.btn-dark span:first-child::after {
  position: absolute;
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='12' width='12'><path d='M8.69971 1.93327L0 10.633L1.36703 12L10.0667 3.30029V10.633H12V0L1.367 4.64783e-07L1.367 1.93327L8.69971 1.93327Z' fill='%23EDE9EB' /></svg>");
  right: -20px;
}
.btn-dark:hover {
  border: 1px solid #EDE9EB;
}

.btn-light {
  display: flex;
  padding: 16px 60px 16px 40px;
  border: 1px solid #1B1B26;
  border-radius: 100px;
  background: #EDE9EB;
  width: max-content;
  transition: all 0.4s ease;
}
.btn-light span:first-child::after {
  content: "";
}
.btn-light span {
  position: relative;
  display: flex;
  font-family: Bold;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  color: #1B1B26;
  margin-bottom: 2px;
}
.btn-light svg {
  position: absolute;
  top: 3px;
  right: -20px;
  width: 12px;
  height: 13px;
  fill: #1B1B26;
  transition: all 0.4s ease;
}
.btn-light:hover {
  border: 1px solid #EDE9EB;
}
.btn-light:hover span {
  color: #EDE9EB;
}
.btn-light:hover svg {
  fill: #EDE9EB;
}

.btn-bright {
  width: max-content;
  padding: 8px 60px 8px 40px;
  border: none;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  background: #EDE9EB;
  transition: 0.5s;
}
.btn-bright span {
  position: relative;
  font-size: 18px;
  font-family: Bold;
  display: flex;
  color: #151620;
  margin-bottom: 3px;
  width: max-content;
  transition: 0.5s;
}
.btn-bright svg {
  position: absolute;
  top: 9px;
  right: -20px;
  width: 12px;
  height: 12px;
  fill: #151620;
  transition: 0.5s;
  margin-top: 1px;
}
.btn-bright:hover span {
  color: #EDE9EB;
}
.btn-bright:hover svg {
  fill: #EDE9EB;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #EDE9EB;
}
.btn-outline::before {
  background: #EDE9EB;
}
.btn-outline span:first-child::after {
  content: "";
}
.btn-outline svg {
  position: absolute;
  top: 3px;
  right: -20px;
  width: 12px;
  height: 13px;
  fill: #EDE9EB;
  transition: all 0.4s ease;
}
.btn-outline:hover {
  border: 1px solid #EDE9EB;
}
.btn-outline:hover span {
  color: #151620;
}
.btn-outline:hover svg {
  fill: #151620;
}

.link span {
  position: relative;
  font-size: 18px;
  color: #8B8A8F;
  transition: ease 0.3s;
}
.link span::after {
  position: absolute;
  content: "";
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #8B8A8F;
}
.link svg {
  fill: #8B8A8F;
  transition: ease 0.3s;
}

.link:visited span {
  color: #8B8A8F;
}

.link:hover span {
  color: #4B40F6;
}
.link:hover svg {
  fill: #4B40F6;
}

.link-grey {
  position: relative;
  display: flex;
  font-size: 16px;
  color: #8B8A8F;
  line-height: 1.2;
  letter-spacing: 0.05em;
  transition: ease 0.3s;
}
.link-grey::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #8B8A8F;
  opacity: 1;
  transition: ease 0.3s;
}

.link-grey:hover {
  color: #4B40F6;
}
.link-grey:hover::after {
  opacity: 0;
}

@media (max-width: 768px) {
  .btn, .btn-dark {
    padding: 12px 52px 12px 32px;
  }
  .btn span, .btn-dark span {
    font-size: 14px;
    line-height: 14px;
  }
}
@media (max-width: 480px) {
  .btn-bright {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
.menu {
  font-size: 18px;
  line-height: 1;
  font-family: Bold;
  letter-spacing: 0.05em;
  color: #EDE9EB;
  text-transform: uppercase;
}

.button {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  font-family: Bold;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .menu {
    font-size: 35px;
  }
}
.table {
  font-family: Light;
  margin: 16px 0;
}
.table::-webkit-scrollbar {
  display: none;
  height: 0;
}
.table table {
  width: 100%;
}
.table thead {
  display: block;
  margin-bottom: 4px;
}
.table thead th {
  background-color: #DED6DA;
  font-family: Regular;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  text-align: center;
}
.table tbody {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.table tr {
  display: flex;
  gap: 4px;
}
.table td {
  width: 100%;
  background-color: #E5DFE2;
  border-radius: 3px;
  padding: 10px 20px;
}
.table td ul {
  margin: 8px 0 8px 14px;
}
.table td ul li {
  margin: 0;
}
.table th {
  background-color: #DED6DA;
  font-family: Regular;
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .table {
    overflow-x: scroll;
    margin-left: -16px;
    margin-right: -16px;
    font-size: 16px;
    line-height: 1.3;
  }
  .table th {
    padding: 8px 12px;
  }
  .table table td {
    padding: 8px 12px;
  }
  .table thead, .table tbody {
    min-width: 690px;
    padding: 0 16px;
  }
  .table thead ul li, .table tbody ul li {
    line-height: 1.3;
  }
  .table thead ul li::before, .table tbody ul li::before {
    top: 9px;
  }
}
.form-header {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-title {
  max-width: 600px;
  margin: 0 auto;
  font-size: 30px;
  font-family: bold;
  text-align: center;
  text-transform: uppercase;
  color: #151620;
}
.form-title span {
  color: #4B40F6;
  text-decoration: underline;
}
.form-title svg {
  width: 29px;
  height: 28px;
}

.textarea, .input {
  position: relative;
  width: 100%;
  height: auto;
  cursor: none;
  border: none;
  border-bottom: 2px solid #DED6DA;
  background-color: transparent;
  line-height: 1;
  color: #151620;
  margin-top: 32px;
  padding: 0 0 16px 0;
}
.textarea::placeholder, .input::placeholder {
  color: #8B8A8F;
  transition: all 0.5s ease 0s;
}
.textarea:focus, .input:focus {
  outline: none;
}
.textarea:focus::placeholder, .input:focus::placeholder {
  opacity: 0;
}
.textarea.containValue, .input.containValue {
  border-bottom: 2px solid #151620;
}
.textarea.hidePlaceholder::placeholder, .input.hidePlaceholder::placeholder {
  transition: unset;
  color: transparent;
}

.fi-file input {
  padding: 0 165px 16px 0;
}

.textarea {
  resize: vertical;
}
.textarea::-webkit-scrollbar {
  width: 6px;
}
.textarea::-webkit-scrollbar-track {
  background: transparet;
}
.textarea::-webkit-scrollbar-thumb {
  background: #8B8A8F;
  border-radius: 20px;
}

.form-row {
  display: flex;
  gap: 32px;
}
.form-row .form-item-wrapper {
  width: 100%;
}

.form-item-wrapper {
  position: relative;
}
.form-item-wrapper::after {
  position: absolute;
  bottom: 0px;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #DED6DA;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease, background-color 0.5s ease;
}
.form-item-wrapper:focus-within::after {
  transform: scaleX(1);
  background: #4B40F6;
}
.form-item-wrapper:not(:focus-within)::after {
  transform-origin: right;
  transform: scaleX(0);
}

.form-left {
  margin-top: 32px;
}
.form-left .input {
  border-bottom: 2px solid #8B8A8F;
}
.form-left .form-item-wrapper::after {
  background: #8B8A8F;
}
.form-left .form-item-wrapper:focus-within::after {
  background: #4B40F6;
}
.form-left .form-subtitle {
  margin-top: 0;
}

.form-subtitle {
  margin-top: 36px;
}

.txtarea-wrapper::after {
  transition: transform 0.5s ease, background-color 0.5s ease;
  bottom: 5px;
}

.form-checkbox {
  position: relative;
  max-width: 276px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.form-checkbox a {
  color: #4B40F6;
  text-decoration: underline;
  font-family: regular;
}
.form-checkbox a:visited {
  color: #4B40F6;
}
.form-checkbox a:hover {
  color: #4B40F6;
}

.form-checkbox input {
  -webkit-appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  margin: 0;
  border: 2px solid #151620;
  border-radius: 5px;
  cursor: none;
  outline: none;
  background-color: #DED6DA;
  transition: all 0.2s ease;
}
.form-checkbox span {
  max-width: 235px;
}

.form-checkbox input::before {
  position: absolute;
  bottom: 5px;
  left: 2px;
  width: 25px;
  height: 20px;
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20' width='25'><path d='M24.6339 1.18645C24.1458 0.698267 23.3544 0.698267 22.8661 1.18645L7.89036 16.1624L2.13391 10.4059C1.64578 9.91775 0.85437 9.9178 0.366138 10.4059C-0.122046 10.8941 -0.122046 11.6855 0.366138 12.1737L7.00647 18.8139C7.49446 19.302 8.28645 19.3017 8.77424 18.8139L24.6339 2.95422C25.1221 2.46609 25.122 1.67463 24.6339 1.18645Z' fill='%23151620'/></svg>");
  opacity: 0;
  transition: 0.2s;
}

.form-checkbox input:checked::before {
  opacity: 1;
}

.form-footer {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.form-pin-file {
  position: absolute;
  bottom: 8px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  text-decoration: underline;
  color: #8B8A8F;
}

.form-pin-file label {
  display: flex;
  align-items: center;
  transition: 0.2s;
}

.form-pin-file svg {
  width: 20px;
  height: 20px;
  fill: #4B40F6;
  margin-top: 4px;
}
.form-pin-file input {
  display: none;
}

.form-pin-file label:hover {
  color: #33333C;
}

.form-drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 16px;
  border: 2px dashed #8B8A8F;
  border-radius: 5px;
  background: #E5DFE2;
  text-align: center;
  transition: 0.2s;
}

.form-drop-area.load {
  border: 2px dashed #8B8A8F;
  background: #DED6DA;
}

.form-drop-area svg {
  width: 24px;
  height: 24px;
  fill: #151620;
}
.form-drop-area p {
  max-width: 520px;
}
.form-drop-area span {
  color: #8B8A8F;
}

.form-da-input {
  display: none;
}

.mob-text {
  display: none;
  font-family: bold;
  text-transform: uppercase;
}
.mob-text span {
  text-transform: none;
}

.file-input-load {
  position: absolute;
  bottom: 16px;
  left: 0;
  display: none;
}
.file-input-load svg {
  width: 24px;
  height: 24px;
  fill: #4B40F6;
}
.file-input-load .da-file-info {
  gap: 8px;
}
.file-input-load .da-f-title {
  font-family: bold;
}
.file-input-load.load {
  display: block;
}

.form-da-load {
  width: 100%;
  margin: 16px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.da-file-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.da-fi-text {
  position: relative;
  text-align: left;
}

.da-f-delete {
  position: absolute;
  top: -8px;
  right: -10px;
  transform: translateX(100%);
}
.da-f-delete svg {
  width: 12px;
  height: 12px;
  fill: #8B8A8F;
}

.da-f-size {
  margin-top: 2px;
  text-transform: uppercase;
  color: #8B8A8F;
}

@media (max-width: 768px) {
  .form-left {
    margin-top: 0;
  }
  .form-left .form-subtitle {
    margin-top: 32px;
  }
  .form-subtitle {
    margin-top: 32px;
  }
  .form-header {
    margin-bottom: 8px;
  }
  .form-title {
    font-size: 20px;
  }
  .form-title svg {
    width: 20px;
    height: 20px;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .textarea, .input {
    margin-top: 24px;
    padding: 0 0 12px 0;
  }
  .fi-file .form-pin-file {
    left: 0;
    bottom: 12px;
  }
  .fi-file input {
    padding: 0 0 44px 0;
  }
  .form-footer {
    margin-top: 24px;
  }
  .form-footer button {
    max-width: 343px;
    width: 100%;
    margin: 0 auto;
  }
  .form-checkbox {
    max-width: 312px;
    gap: 8px;
  }
  .form-checkbox input {
    width: 22px;
    height: 22px;
  }
  .form-checkbox span {
    width: 100%;
  }
  .form-checkbox input::before {
    bottom: 6px;
    left: 2px;
    width: 16px;
    height: 16px;
  }
  .form-drop-area {
    margin-top: 24px;
  }
  .form-da-text {
    display: none;
  }
  .mob-text {
    display: block;
  }
  .form-da-load {
    justify-content: center;
  }
  .file-input-load {
    bottom: 44px;
  }
}
@font-face {
  font-family: "Black";
  src: url("../fonts/Singolare-Black.woff2") format("woff2"), url("../fonts/Singolare-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bold";
  src: url("../fonts/Singolare-Bold.woff2") format("woff2"), url("../fonts/Singolare-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Regular";
  src: url("../fonts/Singolare-Regular.woff2") format("woff2"), url("../fonts/Singolare-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Light";
  src: url("../fonts/Singolare-Light.woff2") format("woff2"), url("../fonts/Singolare-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
html, body {
  cursor: none;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background-color: #151620;
  color: #EDE9EB;
  font-family: Regular;
  font-size: 18px;
  letter-spacing: 0.05em;
  cursor: none;
}
body::-webkit-scrollbar {
  width: 6px;
}
body::-webkit-scrollbar-track {
  background: transparet;
}
body::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 20px;
}

a {
  cursor: none;
}

.main {
  padding-top: 100px;
}

.grecaptcha-badge {
  opacity: 0;
  z-index: -1;
}

@media (max-width: 992px) {
  .main {
    padding-top: 56px;
  }
}
.header-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 100;
  max-width: 1920px;
  width: 100%;
  padding: 12px 32px;
  background-color: transparent;
  transition: all 0.5s ease-in-out;
}
.header-wrapper.is-menu-active {
  background-color: #151620;
}
.header-wrapper.is-moving {
  background-color: #151620;
}
.header-wrapper.hide {
  background-color: #151620;
  transform: translate(-50%, -100%);
}

.header {
  margin: 0 auto;
  max-width: 1720px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-burger {
  display: none;
}

.header-logo {
  display: flex;
  align-items: center;
}
.header-logo svg {
  width: 153px;
  height: 35px;
  fill: #EDE9EB;
}

.header-list {
  display: flex;
  gap: 64px;
}
.header-list .h-menu {
  line-height: 1;
}

.menu-item {
  position: relative;
  text-transform: uppercase;
  color: #EDE9EB;
}
.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #4B40F6;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
.menu-item:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.count-badge {
  position: absolute;
  top: -10px;
  right: -20px;
  width: 24px;
  height: 18px;
  padding-left: 1px;
  border-radius: 50px;
  background-color: #4B40F6;
  font-size: 14px;
  font-family: Bold;
  text-align: center;
  line-height: 1.1;
  color: #EDE9EB;
}

.mob-cta-header {
  display: none;
}

@media (max-width: 1200px) {
  .header-list {
    gap: 32px;
  }
}
@media (max-width: 1000px) {
  .menu-burger {
    display: flex;
    width: 35px;
    height: 35px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    background: #292939;
    border-radius: 50%;
  }
  .menu-burger span {
    width: 19px;
    height: 2px;
    display: block;
    background: #EDE9EB;
    border-radius: 2px;
    opacity: 1;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }
  .menu-burger.open span:nth-child(1) {
    width: 19px;
    transform: rotate(-45deg) translate(-4px, 3px);
  }
  .menu-burger.open span:nth-child(2) {
    width: 0;
  }
  .menu-burger.open span:nth-child(3) {
    width: 19px;
    transform: rotate(45deg) translate(-4px, -3px);
  }
  .mob-cta-header {
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mob-cta-header svg {
    width: 15px;
    height: 15px;
    fill: #EDE9EB;
    transform: rotate(-135deg);
  }
  .header-logo svg {
    height: 28px;
    width: 125px;
  }
  .h-menu {
    font-size: 35px;
  }
}
@media (max-width: 768px) {
  .header-wrapper {
    padding: 12px 16px;
  }
}
.header-mob-menu {
  display: none;
}

@media (max-width: 1000px) {
  .header-mob-menu {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    transform: translate(100%, 0px);
    width: 100%;
    height: calc(100vh - 15px);
    flex-direction: column;
    transition: all 0.5s ease 0s;
    background-color: #EDE9EB;
    visibility: hidden;
    opacity: 0;
    overflow: auto;
  }
  .header-mob-menu.active {
    visibility: visible;
    transform: translate(0px, 0px);
    opacity: 1;
  }
  .header-mob-menu .header-list {
    flex-direction: column;
    gap: 16px;
  }
  .hm-top {
    padding: 24px 16px;
    background: #151620;
  }
  .hm-bottom {
    padding: 24px 16px;
    display: flex;
    flex-wrap: wrap;
  }
  .hm-bottom .subhead {
    margin-bottom: 8px;
    font-size: 20px;
    color: #151620;
  }
  .hm-bottom-row {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
  }
  .header-nav-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .h-social-item {
    font-family: Bold;
    text-transform: uppercase;
    color: #8B8A8F;
  }
  .h-social-item:visited {
    color: #8B8A8F;
  }
  .h-social-item:hover {
    color: #8B8A8F;
  }
  .hm-bottom-btns {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: Bold;
  }
  .hm-bottom-btns a {
    padding: 8px 16px;
    background: #DED6DA;
    border-radius: 100px;
    font-size: 12px;
    line-height: 100%;
    text-transform: uppercase;
    color: #151620;
  }
  .btn-cta-header {
    margin: 64px auto 0 auto;
  }
}
footer {
  width: 100%;
  overflow-x: clip;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #151620;
}

.footer-nav-social {
  display: flex;
  column-gap: 60px;
  margin: 92px auto 32px;
}
.footer-nav-social .footer-social {
  text-decoration: none;
  padding: 6px 10px 8px;
  transition: ease 0.3s;
  border-radius: 3px;
}
.footer-nav-social .footer-social:hover {
  background: #4B40F6;
}

.footer-bottom-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 32px;
  color: #8B8A8F;
  max-width: 1784px;
}
.footer-bottom-row::before {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8000px;
  height: 1px;
  background-color: rgba(242, 241, 254, 0.3);
}

.footer-nav-legal {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  column-gap: min(80px, 4.6vw);
  width: fit-content;
}
.footer-nav-legal .footer-legal-link {
  transition: ease 0.3s;
  color: #8B8A8F;
  width: max-content;
}
.footer-nav-legal .footer-legal-link:hover {
  color: rgb(165, 159, 251);
}

.footer-logo {
  position: absolute;
  width: 125px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #EDE9EB;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-logo svg {
  fill: #151620;
  width: 75px;
  height: 80px;
  transition: ease 0.6s;
}
.footer-logo:hover svg {
  fill: #4B40F6;
}

@media (max-width: 1000px) {
  .footer-nav-legal {
    position: unset;
    transform: unset;
    width: 100%;
    justify-content: center;
  }
  .footer-bottom-row {
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    row-gap: 20px;
  }
  .footer__location {
    order: 2;
  }
  .footer__rights {
    order: 3;
  }
}
@media (max-width: 768px) {
  .footer-nav-legal {
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
    gap: 6px;
  }
  .footer-logo {
    width: 64px;
  }
  .footer-logo svg {
    width: 36px;
    height: 40px;
  }
  .footer-nav-social {
    margin: 64px auto 32px;
    column-gap: 32px;
  }
  .footer-nav-social .footer-social {
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .footer-bottom-row {
    padding: 32px 0;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
  }
  .footer__rights {
    margin-top: 6px;
  }
}
.modal {
  max-width: 1400px;
  width: 100%;
  transition: ease 0.26s;
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0;
  display: none;
}
.modal.active {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 30;
}
.modal.active .modal-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 60, 0.8);
  transition: unset;
  display: block;
}
.modal.close {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}
.modal.close .modal-overlay {
  display: none;
}

.modal-sm {
  max-width: 800px;
}

.modal-body {
  position: relative;
  box-shadow: 0px 0px 8px 2px rgb(21, 22, 32);
  width: 100%;
  display: flex;
  z-index: 1;
}

.modal-close {
  position: absolute;
  top: 32px;
  right: 32px;
}
.modal-close svg {
  width: 24px;
  height: 24px;
  fill: #151620;
}

.modal-col {
  max-width: 552px;
  padding: 56px;
  background: #DED6DA;
  border-radius: 5px 0 0 5px;
  color: #151620;
}

.md-col-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-text {
  position: relative;
  margin-top: 22px;
  padding-top: 40px;
  line-height: 1.35;
}
.modal-text::before {
  position: absolute;
  top: 0;
  left: 0;
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M10.3334 1.83089V5.83572C10.3334 6.37887 9.89315 6.81895 9.35 6.81895C7.41214 6.81895 6.35803 8.80652 6.21193 12.7293H9.35C9.89315 12.7293 10.3334 13.1698 10.3334 13.7128V22.1688C10.3334 22.7117 9.89315 23.1518 9.35 23.1518H0.98323C0.439879 23.1518 0 22.7113 0 22.1688V13.7128C0 11.8323 0.189344 10.1066 0.562602 8.58307C0.945416 7.02095 1.53304 5.65511 2.30864 4.52337C3.10672 3.36029 4.10501 2.4476 5.276 1.81177C6.4549 1.1721 7.82583 0.847656 9.35035 0.847656C9.89315 0.847656 10.3334 1.28774 10.3334 1.83089ZM23.0165 6.81902C23.5594 6.81902 24 6.37852 24 5.83579V1.83096C24 1.28781 23.5594 0.847725 23.0165 0.847725C21.4926 0.847725 20.1215 1.17224 18.943 1.81184C17.7718 2.44767 16.7729 3.36036 15.9747 4.52344C15.1994 5.65518 14.6118 7.02108 14.2289 8.58355C13.8558 10.1075 13.6665 11.8332 13.6665 13.7128V22.1688C13.6665 22.7117 14.1069 23.1519 14.6499 23.1519H23.0164C23.5593 23.1519 23.9995 22.7114 23.9995 22.1688V13.7128C23.9995 13.1699 23.5594 12.7293 23.0164 12.7293H19.9231C20.067 8.80659 21.1057 6.81902 23.0165 6.81902Z' fill='%23EDE9EB'/></svg>");
  display: inline-block;
  width: 24px;
  height: 24px;
}

.modal-person {
  margin: 32px 0;
  display: flex;
  gap: 16px;
}

.modal-photo {
  width: 50px;
  height: 50px;
}
.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.person-name {
  margin-bottom: 8px;
}

.modal-btn-wrapper {
  display: flex;
  gap: 8px;
}
.modal-btn-wrapper a {
  width: 100%;
}
.modal-btn-wrapper .md-btn-sm {
  max-width: 216px;
}

.md-col-form {
  max-width: 848px;
  width: 100%;
  background: #EDE9EB;
  border-radius: 0 5px 5px 0;
}

@media (max-width: 1440px) {
  .modal {
    width: calc(100vw - 64px);
  }
}
@media (max-width: 1200px) {
  .modal-body {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .modal-col {
    width: 100%;
    padding: 32px;
  }
  .modal-close {
    top: 16px;
    right: 16px;
  }
  .modal-close svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 1000px) {
  .modal-body {
    flex-direction: column;
  }
  .modal-col {
    max-width: unset;
    border-radius: 5px 5px 0 0;
  }
  .md-col-form {
    border-radius: 0 0 5px 5px;
  }
}
@media (max-width: 768px) {
  .modal {
    width: calc(100vw - 32px);
  }
  .modal-col {
    padding: 32px 16px;
  }
  .modal-btn-wrapper {
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .modal-btn-wrapper {
    flex-wrap: wrap;
  }
  .modal-btn-wrapper .md-btn-sm {
    max-width: 100%;
  }
}
#cookie-consent-banner {
  position: fixed;
  bottom: 36px;
  left: 50%;
  gap: 14px;
  transform: translateX(-50%);
  align-items: center;
  border: 1px solid rgba(222, 214, 218, 0.3);
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(20, 21, 31, 0.8);
  width: max-content;
  z-index: 100;
}
#cookie-consent-banner p {
  margin-top: -2px;
}

.cookie-close {
  width: 12px;
  height: 12px;
  fill: #DED6DA;
}

.cookie-icon {
  width: 24px;
  height: 27px;
  fill: #DED6DA;
}

.text-link {
  margin: 0 10px 0 22px;
  text-decoration: underline;
  color: #EDE9EB;
}
.text-link:visited {
  color: #EDE9EB;
}
.text-link:hover {
  text-decoration: none;
}

#accept-cookies {
  display: flex;
}

@media (max-width: 768px) {
  #cookie-consent-banner {
    width: calc(100% - 32px);
    font-size: 16px;
    align-items: center;
    line-height: 1.45;
  }
  #cookie-consent-banner .text-link {
    margin: 0 8px;
  }
  .cookie-icon {
    display: none;
  }
  .cookie-close {
    width: 16px;
    height: 16px;
  }
}
* {
  cursor: none !important;
}

.cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  z-index: 999;
  border-radius: 50%;
  background: white;
  mix-blend-mode: difference;
  user-select: none;
  pointer-events: none;
  transition: transform 0.3s;
}
.cursor.hidden {
  opacity: 0;
}

body:has(a:hover, button:hover, input:hover, textarea:hover, .cursor-zoom:hover, .form-drop-area:hover, .form-pin-file:hover, .modal-close:hover) > .cursor {
  transform: translate(-50%, -50%) scale(2);
}

@media (max-width: 1000px) {
  .cursor {
    display: none;
  }
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: #151620;
  transition: opacity 0.6s;
  opacity: 1;
}
@charset "UTF-8";
.hero {
  position: relative;
  background-color: #151620;
  width: 100%;
  margin: 0 auto;
  max-width: 1920px;
}
.hero::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 1500px;
  height: 1500px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #4B40F6 0%, #151620 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.26;
  z-index: -1;
}
.hero::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  transform: translate(50%, -40%);
  background: radial-gradient(circle, #4B40F6 0%, #151620 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.12;
  z-index: -1;
}

.hero-wrap {
  margin: 0 auto;
  max-width: 1784px;
  padding: 200px 32px 56px;
}

.breadcrumbs-list {
  display: flex;
  gap: 12px;
}
.breadcrumbs-list li a {
  color: #DED6DA;
}
.breadcrumbs-list li a:visited {
  color: #DED6DA;
}
.breadcrumbs-list svg {
  fill: #8B8A8F;
  width: 7px;
  height: 12px;
  margin-top: 3px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb-last {
  color: #8B8A8F;
}

.post-header {
  font-size: 70px;
  text-transform: uppercase;
  color: #EDE9EB;
  max-width: 1090px;
  font-family: Black;
  margin: 32px 0;
}

.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-tag {
  padding: 7px 24px 9px 24px;
  background-color: rgba(75, 64, 246, 0.1);
  border-radius: 5px;
  font-family: Bold;
  text-transform: uppercase;
  font-size: 14px;
}

.category-tag {
  background-color: #4B40F6;
}

.post-props {
  display: flex;
  align-items: center;
  gap: 24px;
}

.post-prop {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #8B8A8F;
}
.post-prop svg {
  fill: #8B8A8F;
  width: 16px;
  height: 16px;
  min-width: 18px;
}
.post-prop:nth-child(2) svg {
  margin-bottom: -1px;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 22px;
  line-height: 0.75;
}

.rating-body {
  position: relative;
}
.rating-body::before {
  width: 100%;
  height: 100%;
  content: "★★★★★";
  display: block;
  color: #8B8A8F;
}

.rating-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.rating-active::before {
  width: 100%;
  height: 100%;
  content: "★★★★★";
  display: block;
  color: #4B40F6;
  overflow: hidden;
}

.rating-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}
.rating-items input {
  cursor: none;
}

.rating-item {
  flex: 0 0 20%;
  height: 100%;
  margin: 2px 0 0 0;
  opacity: 0;
  -webkit-appearance: auto;
  appearance: auto;
}

.rating-count {
  font-size: 14px;
  font-family: Light;
  color: #8B8A8F;
  margin-left: 4px;
  line-height: 1.4;
}

.rating-value {
  position: absolute;
  visibility: hidden;
}

.post-cover {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 192/45;
}
.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-wrap {
  background-color: #EDE9EB;
  width: 100%;
  margin: 0 auto;
  max-width: 1920px;
}

.post {
  display: flex;
  gap: 96px;
  max-width: 1784px;
  margin: 0 auto;
  padding: 96px 32px;
  color: #151620;
}

aside {
  width: 100%;
  max-width: 520px;
}

.aside {
  position: sticky;
  top: 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.box {
  position: relative;
  background-color: #E5DFE2;
  border-radius: 3px;
  padding: 24px;
}

.table-of-contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.contents-item {
  position: relative;
}
.contents-item a {
  transition: ease 0.3s;
  color: #8B8A8F;
}
.contents-item::before {
  transition: ease 0.3s;
  position: absolute;
  content: "";
  width: 5px;
  height: 40px;
  background-color: #151620;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  opacity: 0;
}

.contents-item:hover a {
  text-decoration: underline;
}

.contents-item.active a {
  color: #151620;
  text-decoration: none;
}
.contents-item.active::before {
  opacity: 1;
}

.progress-box {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: transparent;
}

progress {
  width: 100%;
  height: 4px;
  border: none;
  margin-bottom: 12px;
}

#progressBar::-webkit-progress-bar {
  background-color: #E5DFE2;
}

#progressBar::-webkit-progress-value {
  background-color: #151620;
}

#progressBar::-moz-progress-bar {
  background-color: #E5DFE2;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #151620;
}
.progress-info svg {
  fill: #151620;
}

#progressText {
  color: #151620;
  font-weight: Bold;
}

.person {
  display: flex;
  align-items: center;
  margin: 24px 0;
}
.person:last-child {
  margin-bottom: 0;
}

.person-picture {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.person-picture img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 16px;
  width: 100%;
}
.person-info span:nth-child(2) {
  color: #8B8A8F;
}

.person-page {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 4px;
  align-items: center;
}
.person-page svg {
  width: 16px;
  height: 16px;
  transform: rotate(-135deg);
  margin-bottom: -5px;
}

.divider {
  height: 2px;
  width: calc(100% + 48px);
  background-color: #DED6DA;
  border: none;
  margin: 24px 0 24px -24px;
}

.download-supheader {
  margin-bottom: 8px;
}

.download-title {
  position: relative;
  text-transform: uppercase;
  margin-bottom: 16px;
  z-index: 1;
}

.download-btn {
  margin-top: 16px;
}

.file {
  position: absolute;
  top: 64px;
  right: 44px;
  width: 76px;
  height: 86px;
}

.download-text {
  max-width: 440px;
}

.article {
  width: 100%;
}
.article h2 {
  margin: 56px 0 24px;
  font-size: 34px;
  font-family: Bold;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.article h3 {
  font-size: 26px;
  font-family: Bold;
  margin: 24px 0 16px;
  line-height: 1.2;
}
.article p {
  margin-bottom: 8px;
  font-family: Light;
  line-height: 1.45;
}
.article strong {
  font-family: Bold;
}
.article ul {
  margin: 16px 0 16px 32px;
}
.article ul li {
  position: relative;
  margin-bottom: 8px;
  font-family: Light;
  line-height: 1.45;
}
.article ul li::before {
  position: absolute;
  content: "";
  left: -18px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #151620;
}
.article ol {
  margin: 16px 0 16px 32px;
}
.article ol li {
  margin-bottom: 8px;
  font-family: Light;
}
.article .image {
  margin: 24px 0;
}
.article .image img {
  width: 100%;
}
.article .image figcaption {
  margin-top: 6px;
  text-align: center;
}

.action {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
  border-top: 2px solid #DED6DA;
  margin-top: 56px;
  padding-top: 16px;
}

.action-rating {
  display: flex;
  gap: 6px;
  font-size: 22px;
  letter-spacing: 0.1em;
  color: #8B8A8F;
  line-height: 0.86;
}

.action-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.lg-copy {
  position: relative;
}
.lg-copy .copy-popup {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  background: #33333C;
  padding: 6px 12px;
  border-radius: 2px;
  color: #EDE9EB;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
.lg-copy .copy-popup.show {
  opacity: 1;
}

.action-count {
  font-size: 18px;
  line-height: 1.1;
}

@media (max-width: 1200px) {
  .post-header {
    font-size: 48px;
    max-width: 1000px;
  }
  .post-tags {
    margin-bottom: 32px;
  }
  .download-box {
    margin-top: 32px;
    padding: 24px 24px 74px 24px;
    overflow: hidden;
  }
  .file {
    top: unset;
    bottom: -74px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 136px;
  }
}
@media (max-width: 768px) {
  .hero::before {
    display: none;
  }
  .hero::after {
    display: none;
  }
  .hero-wrap {
    padding: 82px 16px 24px;
  }
  .post-header {
    font-size: 22px;
    margin: 56px 0 12px 0;
    font-family: Bold;
  }
  .breadcrumbs {
    display: none;
  }
  .post-tags {
    gap: 4px;
  }
  .post-tag {
    padding: 4px 12px 6px 12px;
    font-family: Regular;
  }
  .post-prop {
    font-size: 14px;
    gap: 4px;
    letter-spacing: 0.02em;
  }
  .post-prop svg {
    width: 12px;
    height: 12px;
    min-width: 12px;
  }
  .rating {
    gap: 0;
    font-size: 16px;
    line-height: 0.8;
  }
  .rating-count {
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-top: -1px;
  }
  .post {
    flex-direction: column;
    padding: 32px 16px 0;
    gap: 56px;
  }
  .aside {
    gap: 16px;
  }
  .box {
    padding: 16px;
  }
  .progress-box {
    display: none;
  }
  .person-page {
    display: none;
  }
  .contents-item a {
    display: flex;
    font-size: 16px;
  }
  .contents-item::before {
    display: none;
  }
  .contents-item.active a {
    color: #8B8A8F;
  }
  .table-of-contents {
    gap: 12px;
  }
  .person {
    margin: 16px 0;
  }
  .person-info {
    width: max-content;
  }
  .person-info .name {
    font-size: 16px;
  }
  .divider {
    width: calc(100% + 32px);
    margin: 16px 0 16px -16px;
    height: 1px;
  }
  .download-box {
    padding: 24px 24px 74px 24px;
    text-align: center;
  }
  .download-box .body-sm {
    font-size: 14px;
  }
  .download-text {
    max-width: unset;
  }
  .download-title {
    font-size: 20px;
    text-transform: unset;
  }
  .download-btn {
    width: 100%;
  }
  .action {
    gap: 24px;
    margin-top: 32px;
    justify-content: center;
  }
  .action-box {
    align-items: center;
  }
  .action-rating {
    font-size: 24px;
  }
  .article h2 {
    font-size: 24px;
    margin: 32px 0 24px;
  }
  .article h3 {
    font-size: 20px;
  }
  .article p {
    font-size: 16px;
  }
  .article .image figcaption {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1;
  }
  .article ul {
    margin: 8px 0 8px 24px;
  }
  .article ul li {
    font-size: 16px;
  }
}
.follow {
  position: relative;
  max-width: 1720px;
  width: 100%;
  padding: 56px 56px 112px;
  margin: 100px auto;
  border-radius: 5px;
  background-color: #151620;
  overflow: hidden;
}
.follow::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  transform: translate(-34%, -50%);
  background: radial-gradient(circle, #1400FF 0%, #151620 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.26;
}
.follow::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 1200px;
  height: 1200px;
  border-radius: 50%;
  transform: translate(36%, -30%);
  background: radial-gradient(circle, #1400FF 0%, #151620 70%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.3;
}
.follow .body-lg {
  position: relative;
  z-index: 1;
}

.follow-title {
  position: relative;
  z-index: 2;
  font-size: 85px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: Bold;
  max-width: 800px;
  margin: 24px 0 32px;
}

.follow-socials {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
}

.follow-social {
  padding: 11px 32px 13px 32px;
  text-transform: uppercase;
  font-size: 18px;
  font-family: Bold;
  letter-spacing: 0.05em;
  color: #EDE9EB;
  border-radius: 3px;
  background-color: rgba(75, 64, 246, 0.1);
  transition: ease 0.3s;
}
.follow-social:hover {
  background-color: #4B40F6;
}

.follow-img {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 80px;
  transform: translateY(-48%);
  width: 480px;
  height: auto;
}

@media (max-width: 1784px) {
  .follow {
    margin: 100px 32px;
    width: calc(100% - 64px);
  }
}
@media (max-width: 1500px) {
  .follow-img {
    right: 0;
    width: min(480px, 34vw);
  }
}
@media (max-width: 1200px) {
  .follow-img {
    top: unset;
    bottom: -12%;
    transform: unset;
  }
}
@media (max-width: 768px) {
  .follow {
    padding: 32px 16px 12px 16px;
    margin: 56px 16px;
    width: calc(100% - 32px);
    text-align: center;
  }
  .follow::before {
    width: 600px;
    height: 600px;
  }
  .follow::after {
    width: 600px;
    height: 600px;
    top: unset;
    bottom: -50%;
    right: 50%;
    transform: translate(50%, 0%);
  }
  .follow-title {
    font-size: 32px;
    margin: 16px 0 24px;
    line-height: 1.2;
  }
  .follow-socials {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .follow-social {
    font-size: 14px;
    padding: 7px 16px 8px 16px;
  }
  .follow-img {
    position: relative;
    width: 240px;
    margin-top: 42px;
  }
}