body {     background-color: #000;     margin: 0;     padding: 0;     width: 100%;     font-family: 'Inter', 'Roboto', 'Arial', 'Helvetica', 'sans-serif';     color: #fff; }  * {     box-sizing: border-box;     margin: 0;     padding: 0; }  .container {     max-width: 1200px;     margin: 0 auto;     padding: 0 20px; }  .header {     background-color: #00000000;     left: 0;     position: fixed;     top: 0;     width: 100%;     z-index: 900;     padding: 20px 40px; }  .header__inner {     display: flex;     justify-content: space-between;     align-items: center; }  .header__logo {     display: flex;     align-items: center;     gap: 5px; }  .header__logo span {     color: #fff;     text-transform: uppercase;     font-family: 'Roboto', sans-serif;     font-size: 18px;     color: #fff;     text-transform: uppercase;     letter-spacing: 0;     font-family: 'Roboto', sans-serif; }  .header__logo svg {     width: 224px; }  .header__menu {     align-items: stretch;     background: #141414;     border-radius: 16px;     display: flex;     padding: 8px 24px;     list-style: none;     margin: 0; }  .header__menu ul {     align-items: stretch;     display: grid;     gap: 24px;     grid-auto-flow: column;     margin: 0;     list-style: none;     margin: 0;     padding: 0; }  .header__menu ul li {     display: grid;     grid-row-gap: 8px;     padding: 8px 0; }  .header__menu ul a {     color: #ffffff8f;     font-size: 14px;     font-weight: 600;     letter-spacing: 0;     line-height: 1.7;     white-space: nowrap;     text-decoration: none; }  .header__menu ul a:hover {     color: #ffffff; }  .btn__container {     display: flex;     gap: 16px; }  .btn {     border-radius: 12px;     font-size: 14px;     line-height: 1.7;     padding: 8px 16px;     text-decoration: none;     background: #f2f2f214;     align-items: center;     display: flex;     justify-content: center;     transition: background 0.3s ease;     min-width: 83px;     color: #ffffff;     font-weight: 600; }  .btn__login:hover {     background: #f1f3f31f; }  .btn.btn__register {     min-width: 104px;     background: linear-gradient(90deg, #00ffc2, #42ff00);     color: #000; }  .btn.btn__register:hover {     background: linear-gradient(90deg, #66fef5, #6dfe84); }  .header__toggle {     position: absolute;     width: 0;     height: 0;     opacity: 0;     pointer-events: none; }  .header__burger {     display: none; }  /* Hero + Mockup */ .main {     flex: 1;     padding-top: 80px; }  .wrapper {     display: flex;     justify-content: space-between;     align-items: center; }  .download {     display: flex;     gap: 24px; }  .download__content {     max-width: 240px;     display: flex;     flex: 1;     flex-direction: column;     min-width: 174px;     row-gap: 8px; }  .download__qrcode {     background: #fff;     padding: 10px;     border-radius: 12px;     width: 80px;     height: 80px; }  .download__content-p {     color: #fff;     font-size: 18px;     font-weight: 600;     line-height: 1;     padding-bottom: .1em; }  .download__content a, .instruments__cards a, .payments__wrap a, .comunities__wrapper a {     display: flex;     align-items: center;     color: #6aff41;     text-transform: lowercase;     font-size: 16px;     line-height: 1.33;     text-decoration: none;     transition: color 0.3s ease;     position: relative;     z-index: 10; }  .download__content a svg, .instruments__cards a svg, .payments__wrap a svg, .comunities__wrapper a svg {     fill: #6aff41; }  .download__content a:hover svg, .instruments__cards a:hover svg, .payments__wrap a:hover svg, .comunities__wrapper a:hover svg {     animation: arrow-animation .6s ease infinite; }  @keyframes arrow-animation {     0% {         transform: translateX(-8px);     }      50% {         transform: translateX(0);     }      100% {         transform: translateX(-8px);     } }  .hero {     padding: 40px 0 60px; }  .hero__title {     color: #fff;     font-size: clamp(28px, 4vw, 40px);     font-weight: 700;     text-align: center;     margin-bottom: 32px; }  .mockup__wrap {     position: relative;     max-width: 490px;     margin: 0 auto;     min-height: 500px; }  .mockup__bg img {     width: 100%;     height: auto;     display: block; }  .mockup__terminal {     left: 16%;     position: absolute;     top: 10.5%;     width: 44%;     z-index: -1; }  .mockup__terminal img {     width: 100%;     height: auto;     display: block;     object-fit: cover; }  .mockup__animation {     left: 38%;     bottom: 260px;     transform: translateX(-50%);     width: 214px;     max-width: 90vw;     position: absolute;     z-index: 1; }  .mockup__animation img {     width: 100%;     height: auto;     display: block; }  .params {     padding: 40px 0; }  .params .container {     padding: 0; }  .params__chart {     display: flex;     justify-content: space-between;     align-items: center;     gap: 24px;     background: radial-gradient(100.15% 191.04% at 15.32% 0%, #171717 0%, #101010 66.17%);     border-radius: 48px; }  .params__chart-content {     display: flex;     flex: 1;     flex-direction: column;     min-width: 174px;     row-gap: 8px; }  .params__chart-content h3 {     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     font-size: 32px;     line-height: 1;     padding-bottom: .1em;     margin-bottom: 24px; }  .params__chart-content p {     display: flex;     justify-content: center;     align-items: center;     font-size: 18px;     line-height: 1.42;     color: #ffffff8f;     text-align: center;     font-weight: 600; }  .instruments__wrap {     column-gap: 23px;     grid-template-columns: 1fr 1fr;     margin-top: 23px;     row-gap: 24px;     display: grid; }  .instruments__cards {     display: grid;     row-gap: 24px; }  .intersection-wrapper {     overflow: hidden;     border-radius: 48px;     height: 100%;     padding: 1px;     position: relative;     width: 100%;     background: radial-gradient(100.15% 191.04% at 15.32% 0%, #171717 0%, #101010 66.17%);     padding-top: 63px; }  .instruments__title {     padding: 0 20px;     text-align: center;     font-size: 32px;     line-height: 1;     padding-bottom: .1em;     margin-bottom: 24px;     color: #ffffff8f; }  .instruments__title span {     color: #fff;     transition: color .6s ease;     transition-delay: .9s; }  .instruments__cards a {     justify-content: center; }  .instruments__card-img {     height: 420px;     width: 690px; }  .instruments__card-img img {     width: 100%;     height: 100%;     object-fit: cover;     left: 50%;     max-height: 100%;     position: absolute !important;     transform: translateX(-50%);     top: 0; }  .instruments__card {     padding-bottom: 30px; }  .instruments__card-img--deals {     position: relative;     width: 467px;     height: 125px;     margin: 44px auto 0; }  .instruments__card-img--deals img {     width: 100%;     height: 100%;     object-fit: contain; }  .instruments__card-img--deposits {     position: relative;     overflow: visible;     width: 116%;     z-index: 0;     height: 369px; }  .instruments__card-img--deposits img {     width: 100%;     height: 100%;     object-fit: contain;     left: 40%; }  .instruments__card-balance {     background-color: #3cef43;     border-radius: 76px;     height: 24px;     width: 39px;     position: relative;     transition: background-color .6s ease;     transition-delay: .9s;     display: inline-flex; }  .instruments__card-balance::before {     background-color: #fff;     border-radius: 50%;     content: "";     display: block;     height: 14px;     left: 50%;     position: absolute;     top: 1px;     transform: translateX(-80%);     transition: transform .6s ease;     transition-delay: .9s;     height: 21px;     width: 21px;     transform: translateX(-20%); }  .instruments__card-img--protection {     position: relative;     width: 640px;     height: 326px; }  .instruments__card-img--protection img {     width: 100%;     height: 100%;     object-fit: contain;     left: 45%; }  .payments__title {     text-align: center;     font-size: 56px;     letter-spacing: -1.12px;     padding-bottom: .1em;     background: linear-gradient(90deg, #00ffc2, #42ff00);     background-clip: text;     -webkit-background-clip: text;     margin-left: 0;     max-width: 100%; }  .payments__title span {     animation: gradient-animation .6s ease forwards;     animation-delay: .3s; }  p {     margin: 7px 0 10px; }  @keyframes gradient-animation {     0% {         color: #fff;     }      100% {         color: transparent;     } }  .payments__wrap a, .comunities__wrapper a {     justify-content: center; }  .payments__cards {     display: flex;     justify-content: center; }  .payments__cards__list {     display: flex;     flex-direction: row;     justify-content: center;     margin-left: -25px;     perspective-origin: 100%;     margin-bottom: 81px;     margin-top: 80px; }  .payments__card {     height: 354px;     margin: 0 -95px 0 0;     perspective: 200px;     transition: all .2s cubic-bezier(.455, .03, .515, .955);     width: 247px;     position: relative;     z-index: 1;     list-style-type: none;     cursor: pointer; }  .payments__card__inner {     align-items: center;     animation: none;     background-size: contain;     border-radius: 40px;     box-shadow: none;     height: 100%;     left: 0;     margin: 0;     opacity: 1;     padding: 12px;     position: absolute;     top: 0;     transform: rotateY(35deg);     transform-origin: left;     transform-style: preserve-3d;     transition: all .2s cubic-bezier(.455, .03, .515, .955);     width: 100%;     justify-content: center;     cursor: pointer; }  .payments__card__item {     height: 100%;     padding: 1px;     position: relative;     width: 100%;     background: linear-gradient(148.42deg, #333 13.56%, #111 80.96%);     border-radius: 24px;     overflow: hidden;     cursor: pointer; }  .payments__card__item--bg {     height: 100%;     border-radius: inherit;     background: radial-gradient(100.15% 191.04% at 15.32% 0%, #171717 0%, #101010 66.17%);     cursor: pointer; }  .payments__card__item--bg a {     background: none;     border: 0;     font-size: 16px;     line-height: 1.2;     outline: none;     display: flex;     height: 100%;     justify-content: center;     width: 100%;     align-items: center;     cursor: pointer; }  .payments__card__item--bg a svg {     height: 100%;     width: 100%; }  .payments__card:hover {     width: 320px;     z-index: 2; }  .payments__card:hover .payments__card__inner {     transform: rotateY(0); }  .comunities {     background: url(/shared/3700/communities_bg.webp) no-repeat center center;     background-size: cover;     padding: 165px 0; }  .comunities__wrapper h2 {     text-align: center;     font-size: 56px;     line-height: 1;     padding-bottom: .1em;     margin-bottom: 40px;     font-weight: 600; }  .comunities__people {     display: flex;     justify-content: center;     align-items: center;     position: relative; }  .comunities__people__img {     height: 128px;     margin-bottom: 24px;     width: 488px;     display: block; }  .comunities__people__img img {     width: 100%;     height: 100%; }  .comunities__people__link {     display: block;     background-image: linear-gradient(90deg, #00ffc2, #42ff00, #00ffc2);     background-position: 50%;     background-size: 300% 100%;     border-radius: 50%;     position: absolute;     top: -10px;     transition: background-position .4s ease;     height: 128px;     width: 128px;     border: 3px solid #08080d;     font-size: 16px;     line-height: 1.2;     right: 70px; }  .comunities__people__link:before, .comunities__people__link:after {     background-color: #1b1b1b;     border-radius: 6rem;     content: "";     left: 50%;     position: absolute;     top: 50%;     transform: translate(-50%, -50%);     transition: transform .4s ease; }  .comunities__people__link:before {     width: 75%;     height: 6px; }  .comunities__people__link:after {     width: 6px;     height: 75%; }  .comunities__people__link:hover {     background-position: 150%; }  .comunities__people__link:hover:before {     transform: translate(-50%, -50%) scaleX(.7); }  .comunities__people__link:hover:after {     transform: translate(-50%, -50%) scaleY(.7); }  .comunities__wrapper a {     font-size: 18px;     line-height: 1.33;     font-weight: 600;     text-transform: capitalize; }  .footer p {     color: #ffffff3d;     font-size: 14px;     line-height: 1.42;     margin-bottom: 16px; }  .footer .copy {     font-size: 18px;     line-height: 1.33;     margin-bottom: 24px;     color: #ffffff8f; }  /* Tables */ .main__content table, .content-table {     width: 100%;     border-collapse: collapse;     margin: 24px 0;     font-size: 16px;     line-height: 1.5;     background: radial-gradient(100.15% 191.04% at 15.32% 0%, #171717 0%, #101010 66.17%);     border-radius: 16px;     overflow: hidden;     border: 1px solid rgba(255, 255, 255, 0.08); }  .main__content th, .main__content td, .content-table th, .content-table td {     padding: 14px 20px;     text-align: left;     border-bottom: 1px solid rgba(255, 255, 255, 0.08); }  .main__content th, .content-table th {     background: rgba(106, 255, 65, 0.12);     color: #6aff41;     font-weight: 600;     font-size: 14px;     text-transform: uppercase;     letter-spacing: 0.05em; }  .main__content tr:last-child td, .content-table tr:last-child td {     border-bottom: none; }  .main__content tbody tr:hover, .content-table tbody tr:hover {     background: rgba(255, 255, 255, 0.03); }  .main__content caption, .content-table caption {     caption-side: top;     padding: 12px 20px;     color: #ffffff8f;     font-size: 14px;     text-align: left; }  /* Numbered lists (ol) */ .main__content ol, .list-numbered {     margin: 16px 0;     padding-left: 28px;     list-style-type: decimal; }  .main__content ol li, .list-numbered li {     margin-bottom: 10px;     padding-left: 8px;     line-height: 1.6; }  .main__content ol li::marker, .list-numbered li::marker {     color: #6aff41;     font-weight: 600; }  /* Bullet lists (ul) — only in content, not in header */ .main__content ul:not(.header__menu ul):not([class*="payments"]):not([class*="cards"]), .list-bullet {     margin: 16px 0;     padding-left: 28px;     list-style-type: disc; }  .main__content ul:not(.header__menu ul):not([class*="payments"]):not([class*="cards"]) li, .list-bullet li {     margin-bottom: 10px;     padding-left: 8px;     line-height: 1.6; }  .main__content ul:not(.header__menu ul):not([class*="payments"]):not([class*="cards"]) li::marker, .list-bullet li::marker {     color: #6aff41; }  /* ========== RESPONSIVE LAYOUT ========== */  /* Tablet and below */ @media (max-width: 1024px) {     .container {         padding: 0 16px;     }      .header {         background-color: #000000;     }      .header__inner {         flex-wrap: wrap;         gap: 12px;     }      .header__toggle:not(:checked)~.header__menu {         display: none;     }      .header__menu {         order: 10;         width: 100%;         padding: 12px 16px;         border-radius: 12px;     }      .header__menu ul {         grid-auto-flow: row;         gap: 0;     }      .header__menu ul li {         padding: 10px 0;         border-bottom: 1px solid rgba(255, 255, 255, 0.08);     }      .header__menu ul li:last-child {         border-bottom: none;     }      .header__menu ul a {         font-size: 16px;         padding: 4px 0;     }      .header__burger {         display: flex;         flex-direction: column;         justify-content: center;         gap: 5px;         width: 44px;         height: 44px;         padding: 10px;         cursor: pointer;         background: #141414;         border-radius: 12px;         order: 2;         margin-left: auto;     }      .header__burger span {         display: block;         width: 100%;         height: 2px;         background: #fff;         border-radius: 1px;         transition: transform 0.3s ease, opacity 0.3s ease;     }      .header__toggle:checked~.header__burger span:nth-child(1) {         transform: translateY(7px) rotate(45deg);     }      .header__toggle:checked~.header__burger span:nth-child(2) {         opacity: 0;     }      .header__toggle:checked~.header__burger span:nth-child(3) {         transform: translateY(-7px) rotate(-45deg);     }      .btn__container {         order: 3;     }      .btn {         min-width: auto;         padding: 8px 12px;         font-size: 13px;     }      .btn.btn__register {         min-width: auto;     }      .wrapper {         flex-direction: column;         gap: 32px;     }      .download {         flex-direction: row;         justify-content: center;         align-items: center;     }      .params__chart {         flex-direction: column;         padding: 32px 24px;         border-radius: 24px;         gap: 24px;     }      .params__chart-content h3 {         font-size: 26px;     }      .params__chart-content p {         font-size: 16px;     }      .instruments__wrap {         grid-template-columns: 1fr;         margin-top: 16px;         row-gap: 20px;     }      .intersection-wrapper {         border-radius: 24px;         padding-top: 40px;     }      .instruments__title {         font-size: 26px;         margin-bottom: 16px;     }      .instruments__card-img {         height: 280px;         width: 100%;         max-width: 100%;     }      .instruments__card-img--deals {         width: 100%;         max-width: 380px;         height: 100px;         margin: 24px auto 0;     }      .instruments__card-img--deposits {         width: 100%;         height: 280px;     }      .instruments__card-img--protection {         width: 100%;         max-width: 100%;         height: 240px;     }      .payments__title {         font-size: clamp(28px, 5vw, 42px);     }      .payments__cards__list {         flex-wrap: wrap;         gap: 20px;         justify-content: center;         margin-left: 0;         margin-top: 40px;         margin-bottom: 48px;     }      .payments__card {         margin: 0;         width: 200px;         height: 280px;     }      .payments__card:hover {         width: 220px;     }      .comunities {         padding: 80px 0;     }      .comunities__wrapper h2 {         font-size: clamp(28px, 5vw, 40px);         margin-bottom: 24px;     }      .comunities__people__link {         height: 125px;         width: 125px;     } }  /* Mobile: show burger, collapse menu */ @media (max-width: 768px) {     .main {         padding-top: 72px;     }      .hero {         padding: 24px 0 40px;     }      .hero__title {         font-size: clamp(22px, 5vw, 28px);         margin-bottom: 24px;     }      .download {         flex-direction: column;         text-align: center;     }      .download__content {         max-width: none;         min-width: 0;         align-items: center;     }      .download__content-p {         font-size: 16px;     }      .mockup__wrap {         min-height: 380px;         max-width: 100%;     }      .params {         padding: 24px 0;     }      .params__chart {         border-radius: 20px;         padding: 24px 16px;     }      .params__chart-content h3 {         font-size: 22px;     }      .instruments__card-img {         height: 220px;     }      .instruments__card-img--deals {         height: 80px;         margin: 16px auto 0;     }      .instruments__card-img--deposits {         height: 220px;     }      .instruments__card-img--protection {         height: 180px;     }      .payments__cards__list {         margin-top: 24px;         margin-bottom: 32px;         gap: 16px;     }      .payments__card {         width: 160px;         height: 224px;     }      .payments__card:hover {         width: 180px;     }      .payments__card__inner {         transform: rotateY(0);     }      .comunities {         padding: 48px 0;     }      /* Content: tables and lists */     .main__content th,     .main__content td,     .content-table th,     .content-table td {         padding: 10px 12px;         font-size: 14px;     }      .main__content caption,     .content-table caption {         padding: 10px 12px;         font-size: 13px;     }      .btn.btn__login {         display: none;     }      .header {         padding: 5px 10px;     } }  @media (max-width: 650px) {     .comunities__people__img {         height: auto;         width: 300px;     }      .comunities__people__link {         top: -13px;         right: 45px;         height: 80px;         width: 80px;     } }  @media (max-width: 545px) {     .header__logo {         flex-direction: column;     } }  /* Small phones */ @media (max-width: 480px) {     .header {         padding: 12px 16px;     }      .header__logo span {         font-size: 14px;     }      .header__logo svg {         width: 140px;     }      .container {         padding: 0 12px;     }      .main {         padding-top: 64px;     }      .hero__title {         font-size: 20px;     }      .download__qrcode {         width: 64px;         height: 64px;         padding: 8px;     }      .download__qrcode svg {         width: 48px;         height: 48px;     }      .params__chart-content h3 {         font-size: 18px;     }      .params__chart-content p {         font-size: 14px;     }      .instruments__title {         font-size: 20px;         padding: 0 12px;     }      .payments__title {         font-size: 24px;     }      .payments__cards__list {         flex-direction: column;         align-items: center;     }      .payments__card {         width: 200px;         height: 280px;     }      .payments__card:hover {         width: 200px;     }      .comunities__wrapper h2 {         font-size: 22px;     }      /* Table: horizontal scroll on very small screens */     .main__content .container {         overflow-x: auto;         -webkit-overflow-scrolling: touch;     }      .main__content table,     .content-table {         min-width: 280px;         font-size: 13px;     }      .main__content th,     .main__content td,     .content-table th,     .content-table td {         padding: 8px 10px;     } }  @media (max-width: 420px) {     .btn__container {         margin: 0 auto;     }      .main {         padding-top: 115px;     }      .comunities__people {         display: block;     }      .comunities__people__img {         margin: 0 auto 24px;     }      .comunities__people__link {         position: absolute;         top: 0;         right: 0;     } }