:root {
     --bg: #050807;
     --panel: #0d1310;
     --text: #f2f7f4;
     --muted: #89958f;
     --green: #1ff3b4;
     --line: rgba(255, 255, 255, .09);
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     min-width: 320px;
     background: var(--bg);
     color: var(--text);
     font-family: Arial, Helvetica, sans-serif;
 }

 button,
 input,
 select {
     font: inherit;
 }

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

 .page {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
     isolation: isolate;
     background:
         radial-gradient(circle at 78% 45%, rgba(0, 235, 171, .13), transparent 28rem),
         radial-gradient(circle at 4% 8%, rgba(0, 166, 255, .11), transparent 27rem),
         var(--bg);
 }

 .page::before {
     position: absolute;
     inset: 0;
     z-index: -2;
     content: "";
     background-image:
         linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
     background-size: 72px 72px;
     -webkit-mask-image: linear-gradient(#000, transparent 90%);
     mask-image: linear-gradient(#000, transparent 90%);
 }

 .ring {
     position: absolute;
     top: 13%;
     right: -14rem;
     z-index: -1;
     width: 35rem;
     height: 35rem;
     border: 1px solid rgba(45, 255, 190, .16);
     border-radius: 50%;
     box-shadow: inset 0 0 130px rgba(0, 255, 184, .06);
 }

 .header,
 .hero,
 .footer {
     width: min(calc(100% - 64px), 1320px);
     margin-inline: auto;
 }

 .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 96px;
 }

 .brand {
     display: inline-flex;
     align-items: center;
     gap: 11px;
     font-size: 27px;
     font-weight: 800;
     letter-spacing: -1.5px;
 }

 .brand b {
     color: var(--green);
     font-size: 28px;
     font-weight: 500;
     letter-spacing: -7px;
 }

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

 .online,
 .tg-small {
     display: inline-flex;
     align-items: center;
     min-height: 44px;
     border: 1px solid var(--line);
     border-radius: 999px;
     background: rgba(255, 255, 255, .035);
     font-size: 13px;
     font-weight: 700;
 }

 .online {
     gap: 10px;
     padding: 0 17px;
     color: #b9c3be;
 }

 .online i {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 16px var(--green);
 }

 .tg-small {
     padding: 0 18px;
     transition: .2s ease;
 }

 .tg-small:hover {
     border-color: rgba(31, 243, 180, .45);
     background: rgba(31, 243, 180, .08);
 }

 .hero {
     display: grid;
     grid-template-columns: minmax(0, 1.04fr) minmax(440px, .8fr);
     align-items: center;
     gap: clamp(50px, 8vw, 124px);
     min-height: calc(100svh - 176px);
     padding: 52px 0 76px;
 }

 .eyebrow {
     display: flex;
     align-items: center;
     gap: 13px;
     margin: 0 0 28px;
     color: #9ca8a2;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: .16em;
     text-transform: uppercase;
 }

 .eyebrow b {
     display: grid;
     width: 34px;
     height: 34px;
     place-items: center;
     border: 1px solid rgba(31, 243, 180, .28);
     border-radius: 50%;
     color: var(--green);
     font-size: 10px;
     letter-spacing: 0;
 }

 h1 {
     max-width: 760px;
     margin: 0;
     font-size: clamp(66px, 7.2vw, 108px);
     font-weight: 700;
     line-height: .91;
     letter-spacing: -.072em;
 }

 h1 span {
     display: block;
     color: var(--green);
 }

 .description {
     max-width: 600px;
     margin: 30px 0 0;
     color: var(--muted);
     font-size: 17px;
     line-height: 1.75;
 }

 .advantages {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 14px;
     max-width: 610px;
     margin-top: 34px;
 }

 .advantage {
     display: flex;
     align-items: center;
     gap: 14px;
     min-height: 80px;
     padding: 13px 16px;
     border: 1px solid rgba(255, 255, 255, .075);
     border-radius: 19px;
     background: rgba(255, 255, 255, .025);
 }

 .advantage-icon {
     display: grid;
     flex: 0 0 44px;
     height: 44px;
     place-items: center;
     border-radius: 14px;
     background: rgba(31, 243, 180, .09);
     color: var(--green);
 }

 .advantage strong,
 .advantage small {
     display: block;
 }

 .advantage strong {
     font-size: 13px;
 }

 .advantage small {
     margin-top: 5px;
     color: #76817c;
     font-size: 11px;
 }

 .members {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-top: 28px;
     color: #69746f;
     font-size: 11px;
     line-height: 1.5;
 }

 .members strong {
     display: block;
     color: #dbe3df;
     font-size: 12px;
 }

 .coins {
     display: flex;
     padding-left: 9px;
 }

 .coins i {
     display: grid;
     width: 34px;
     height: 34px;
     margin-left: -9px;
     place-items: center;
     border: 3px solid #070a09;
     border-radius: 50%;
     background: #19231f;
     color: #d9e2dd;
     font-style: normal;
     font-weight: 800;
 }

 .coins i:nth-child(2) {
     background: #10b981;
     color: #04100b;
 }

 .coins i:nth-child(3) {
     background: #3b82f6;
     color: #fff;
 }

 .exchange-wrap {
     position: relative;
     width: 100%;
     max-width: 540px;
     margin-left: auto;
 }

 .texture {
     position: absolute;
     top: -78px;
     right: -62px;
     width: 188px;
     aspect-ratio: 1;
     border: 1px solid rgba(255, 255, 255, .13);
     border-radius: 42px;
     object-fit: cover;
     opacity: .88;
     box-shadow: 0 32px 90px rgba(0, 255, 183, .16);
     transform: rotate(9deg);
 }

 .exchange {
     position: relative;
     padding: 28px;
     border: 1px solid rgba(255, 255, 255, .11);
     border-radius: 32px;
     background: linear-gradient(150deg, rgba(17, 24, 21, .96), rgba(8, 12, 10, .94));
     box-shadow: 0 44px 120px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .04);
     backdrop-filter: blur(24px);
     animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
 }

 .card-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 18px;
     margin-bottom: 27px;
 }

 .card-head p {
     margin: 0 0 7px;
     color: #718078;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .15em;
     text-transform: uppercase;
 }

 .card-head h2 {
     margin: 0;
     font-size: 25px;
     letter-spacing: -.035em;
 }

 .secure {
     padding: 10px 12px;
     border: 1px solid rgba(31, 243, 180, .16);
     border-radius: 999px;
     background: rgba(31, 243, 180, .06);
     color: #56dbae;
     font-size: 9px;
     font-weight: 900;
     letter-spacing: .13em;
     text-transform: uppercase;
 }

 .exchange-field {
     padding: 17px 18px 16px;
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 20px;
     background: rgba(255, 255, 255, .035);
     transition: .2s ease;
 }

 .exchange-field:focus-within {
     border-color: rgba(31, 243, 180, .3);
     background: rgba(31, 243, 180, .035);
 }

 .exchange-field label {
     display: block;
     margin-bottom: 11px;
     color: #76817c;
     font-size: 11px;
     font-weight: 700;
 }

 .field-row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 148px;
     align-items: center;
     gap: 10px;
 }

 .amount,
 .result {
     width: 100%;
     min-width: 0;
     height: 48px;
     padding: 0;
     border: 0;
     outline: 0;
     background: transparent;
     color: var(--text);
     font-size: 30px;
     font-weight: 650;
     letter-spacing: -.04em;
 }

 .result {
     display: flex;
     align-items: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 select {
     width: 148px;
     height: 48px;
     padding: 0 36px 0 14px;
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 14px;
     outline: 0;
     background: #19201d;
     color: #edf5f1;
     font-weight: 800;
     cursor: pointer;
 }

 .swap-row {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 10px;
     height: 42px;
 }

 .swap-row span {
     height: 1px;
     background: rgba(255, 255, 255, .055);
 }

 .swap {
     display: grid;
     width: 34px;
     height: 34px;
     padding: 0;
     place-items: center;
     border: 1px solid rgba(31, 243, 180, .2);
     border-radius: 11px;
     background: #101a16;
     color: var(--green);
     cursor: pointer;
     transition: .2s ease;
 }

 .swap:hover {
     border-color: rgba(31, 243, 180, .5);
     transform: rotate(180deg);
 }

 .rate {
     display: flex;
     justify-content: space-between;
     gap: 18px;
     margin: 17px 2px 20px;
     color: #6f7b75;
     font-size: 11px;
 }

 .rate strong {
     color: #aeb9b3;
     text-align: right;
 }

 .telegram {
     display: flex;
     width: 100%;
     height: 62px;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     border-radius: 18px;
     background: linear-gradient(95deg, #16dba0, #24f1a7);
     color: #03120c;
     font-size: 14px;
     font-weight: 900;
     box-shadow: 0 15px 45px rgba(25, 239, 165, .18);
     transition: .2s ease;
 }

 .telegram:hover {
     transform: translateY(-2px);
     box-shadow: 0 18px 52px rgba(25, 239, 165, .25);
 }

 .note {
     margin: 15px 0 0;
     color: #64706a;
     font-size: 10px;
     text-align: center;
 }

 .footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     min-height: 80px;
     border-top: 1px solid rgba(255, 255, 255, .06);
     color: #56615c;
     font-size: 10px;
 }

 @keyframes rise {
     from {
         opacity: 0;
         transform: translateY(22px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 980px) {
     .hero {
         grid-template-columns: 1fr;
         min-height: auto;
         padding: 65px 0 110px;
     }

     h1 {
         font-size: clamp(60px, 12vw, 90px);
     }

     .exchange-wrap {
         max-width: 600px;
         margin: 65px auto 0;
     }

     .texture {
         right: -24px;
     }
 }

 @media (max-width: 560px) {
     .page {
         overflow: hidden visible;
     }

     .header,
     .hero,
     .footer {
         width: min(calc(100% - 38px), 680px);
     }

     .header {
         min-height: 78px;
     }

     .brand {
         font-size: 23px;
     }

     .tg-small {
         display: none;
     }

     .online {
         padding: 0 13px;
         font-size: 11px;
     }

     .hero {
         padding: 48px 0 80px;
     }

     h1 {
         font-size: clamp(48px, 15vw, 67px);
         line-height: .94;
     }

     .description {
         margin-top: 24px;
         font-size: 15px;
         line-height: 1.65;
     }

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

     .texture {
         top: -42px;
         right: -14px;
         width: 130px;
         border-radius: 30px;
     }

     .exchange {
         padding: 20px;
         border-radius: 25px;
     }

     .secure {
         font-size: 0;
     }

     .secure::after {
         content: "✓";
         font-size: 12px;
     }

     .exchange-field {
         padding-inline: 14px;
     }

     .field-row {
         grid-template-columns: minmax(0, 1fr) 116px;
     }

     .amount,
     .result {
         font-size: 24px;
     }

     select {
         width: 116px;
         padding-left: 10px;
     }

     .telegram {
         height: 58px;
         font-size: 12px;
     }

     .footer {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         padding: 24px 0;
         line-height: 1.5;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
         scroll-behavior: auto !important;
         animation-duration: .01ms !important;
     }
 }.exchange select.static-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-right: 14px;
}