*,       *::before,       *::after {         margin: 0;         padding: 0;         box-sizing: border-box;         -webkit-tap-highlight-color: transparent;       }        :root {         --bg-deep: #070913;         --bg-panel: #0D1021;         --bg-card: #111526;         --bg-card2: #161A30;         --text-main: #FFFFFF;         --text-muted: #8B94B5;         --text-dim: #6070A0;         --accent-cyan: #00D2FF;         --accent-purple: #9B4DCA;         --grad: linear-gradient(90deg, #00D2FF 0%, #9B4DCA 100%);         --border: rgba(255, 255, 255, 0.06);       }        body {         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;         background: var(--bg-deep);         color: var(--text-main);         line-height: 1.5;         overflow-x: hidden;       }        a {         text-decoration: none;         color: inherit;       }        ul {         list-style: none;       }        .container {         width: 100%;         max-width: 1200px;         margin: 0 auto;         padding: 0 20px;       }        header {         background: rgba(7, 9, 19, 0.96);         backdrop-filter: blur(12px);         position: fixed;         top: 0;         width: 100%;         z-index: 1000;         border-bottom: 1px solid var(--border);       }        .nav-wrapper {         display: flex;         align-items: center;         justify-content: space-between;         height: 68px;         gap: 12px;       }        .logo {         font-size: 22px;         font-weight: 800;         display: flex;         align-items: center;         gap: 8px;         letter-spacing: -.5px;         flex-shrink: 0;       }        .logo em {         color: var(--accent-purple);         font-style: normal;       }        .nav-links {         display: flex;         align-items: center;         gap: 4px;       }        .nav-links a {         font-size: .78rem;         font-weight: 500;         color: var(--text-muted);         padding: 5px 12px;         border-radius: 20px;         transition: color .2s, background .2s;         white-space: nowrap;       }        .nav-links a:hover {         color: #fff;         background: rgba(155, 77, 202, .12);       }        .nav-links a.active {         color: #fff;         background: rgba(155, 77, 202, .2);         border: 1px solid rgba(155, 77, 202, .3);       }        /* Lang */       .lang-wrap {         position: relative;       }        .btn-lang {         display: flex;         align-items: center;         gap: 5px;         font-size: .78rem;         font-weight: 600;         color: var(--text-main);         background: rgba(255, 255, 255, .06);         border: 1px solid var(--border);         border-radius: 20px;         padding: 6px 13px;         cursor: pointer;         transition: background .2s, border-color .2s;         white-space: nowrap;       }        .btn-lang:hover,       .lang-wrap.open .btn-lang {         background: rgba(155, 77, 202, .18);         border-color: rgba(155, 77, 202, .4);       }        .lang-chevron {         font-style: normal;         font-size: .65rem;         transition: transform .2s;       }        .lang-wrap.open .lang-chevron {         transform: rotate(180deg);       }        .lang-dropdown {         display: none;         position: absolute;         top: calc(100% + 8px);         right: 0;         min-width: 136px;         background: var(--bg-card);         border: 1px solid var(--border);         border-radius: 12px;         overflow: hidden;         box-shadow: 0 10px 36px rgba(0, 0, 0, .6);         z-index: 600;       }        .lang-wrap.open .lang-dropdown {         display: block;       }        .lang-opt {         display: flex;         align-items: center;         gap: 9px;         padding: 10px 14px;         cursor: pointer;         font-size: .82rem;         font-weight: 500;         color: var(--text-muted);         transition: background .15s, color .15s;       }        .lang-opt:hover {         background: rgba(155, 77, 202, .12);         color: #fff;       }        .lang-opt.sel {         background: rgba(155, 77, 202, .2);         color: #fff;       }        .lang-opt .lcode {         font-weight: 700;         letter-spacing: .04em;       }        .lang-opt .lname {         color: var(--text-dim);         font-size: .75rem;         margin-left: auto;       }        /* Auth */       .auth-btns {         display: flex;         gap: 10px;         align-items: center;         flex-shrink: 0;       }        .btn-login {         font-size: .8rem;         font-weight: 600;         color: var(--text-main);         padding: 7px 18px;         border-radius: 20px;         cursor: pointer;         border: 1px solid rgba(255, 255, 255, .2);         background: transparent;         transition: background .2s, border-color .2s;         white-space: nowrap;       }        .btn-login:hover {         background: rgba(255, 255, 255, .06);         border-color: rgba(255, 255, 255, .4);       }        .btn-signup {         font-size: .8rem;         font-weight: 700;         color: #fff;         padding: 8px 20px;         border-radius: 20px;         cursor: pointer;         border: none;         background: var(--grad);         box-shadow: 0 4px 16px rgba(155, 77, 202, .4);         display: flex;         align-items: center;         gap: 5px;         white-space: nowrap;         transition: box-shadow .2s;       }        .btn-signup:hover {         box-shadow: 0 6px 22px rgba(155, 77, 202, .6);       }        /* Burger */       .burger {         display: none;         flex-direction: column;         justify-content: center;         gap: 5px;         width: 36px;         height: 36px;         border-radius: 8px;         cursor: pointer;         background: rgba(255, 255, 255, .06);         border: 1px solid var(--border);         flex-shrink: 0;       }        .burger span {         display: block;         width: 18px;         height: 2px;         background: var(--text-muted);         margin: 0 auto;         border-radius: 2px;         transition: transform .25s, opacity .25s;       }        .burger.open span:nth-child(1) {         transform: translateY(7px) rotate(45deg);       }        .burger.open span:nth-child(2) {         opacity: 0;       }        .burger.open span:nth-child(3) {         transform: translateY(-7px) rotate(-45deg);       }        /* Drawer */       .overlay {         display: none;         position: fixed;         inset: 0;         z-index: 900;         background: rgba(0, 0, 0, .6);       }        .overlay.open {         display: block;       }        .drawer {         position: fixed;         top: 0;         right: 0;         bottom: 0;         width: 280px;         z-index: 1000;         background: var(--bg-card);         border-left: 1px solid var(--border);         display: flex;         flex-direction: column;         padding: 20px 18px;         transform: translateX(100%);         transition: transform .28s cubic-bezier(.4, 0, .2, 1);         overflow-y: auto;       }        .drawer.open {         transform: translateX(0);       }        .drawer-close {         align-self: flex-end;         background: none;         border: none;         color: var(--text-muted);         font-size: 1.3rem;         cursor: pointer;         margin-bottom: 16px;       }        .drawer-section-label {         font-size: .68rem;         font-weight: 700;         letter-spacing: .12em;         text-transform: uppercase;         color: var(--text-dim);         padding: 0 12px;         margin: 8px 0 4px;       }        .drawer a {         display: block;         font-size: .9rem;         font-weight: 500;         color: var(--text-muted);         padding: 9px 12px;         border-radius: 10px;         transition: background .15s, color .15s;       }        .drawer a:hover {         background: rgba(155, 77, 202, .12);         color: #fff;       }        .drawer a.active {         background: rgba(155, 77, 202, .2);         color: #fff;       }        .drawer-sep {         height: 1px;         background: var(--border);         margin: 10px 0;       }        .drawer-auth-btns {         display: flex;         flex-direction: column;         gap: 8px;         margin-bottom: 4px;       }        .drawer-btn-full {         width: 100%;         justify-content: center;         display: flex;       }        .drawer-lang-row {         display: flex;         gap: 8px;         flex-wrap: wrap;         padding: 4px 12px;       }        .drawer-lang-btn {         display: flex;         align-items: center;         gap: 5px;         font-size: .8rem;         font-weight: 600;         color: var(--text-muted);         padding: 6px 12px;         border-radius: 20px;         cursor: pointer;         border: 1px solid var(--border);         background: transparent;         transition: background .15s, color .15s, border-color .15s;       }        .drawer-lang-btn.sel {         background: rgba(155, 77, 202, .2);         color: #fff;         border-color: rgba(155, 77, 202, .4);       }        .hero-slider {         margin-top: 68px;         position: relative;         overflow: hidden;         height: clamp(320px, 55vw, 560px);         background: #060810;       }        .slides-track {         display: flex;         height: 100%;         transition: transform .9s cubic-bezier(.77, 0, .18, 1);       }        .slide {         min-width: 100%;         height: 100%;         position: relative;         flex-shrink: 0;       }        /* Placeholder gradient backgrounds — replace bg with real images */       .slide:nth-child(1) {         background:           linear-gradient(135deg, rgba(0, 10, 40, .85) 0%, rgba(0, 0, 0, .3) 100%),           linear-gradient(180deg, #0a0520 0%, #1a0a3a 50%, #050215 100%);       }        .slide:nth-child(2) {         background:           linear-gradient(135deg, rgba(5, 20, 50, .85) 0%, rgba(0, 0, 0, .3) 100%),           linear-gradient(180deg, #060d28 0%, #0d1a40 50%, #030818 100%);       }        .slide:nth-child(3) {         background:           linear-gradient(135deg, rgba(20, 5, 40, .85) 0%, rgba(0, 0, 0, .3) 100%),           linear-gradient(180deg, #150820 0%, #2a1040 50%, #0a0515 100%);       }        .slide:nth-child(4) {         background:           linear-gradient(135deg, rgba(0, 15, 35, .85) 0%, rgba(0, 0, 0, .3) 100%),           linear-gradient(180deg, #080e22 0%, #141e44 50%, #040810 100%);       }        /* Decorative glow per slide */       .slide::before {         content: '';         position: absolute;         width: 500px;         height: 500px;         border-radius: 50%;         filter: blur(100px);         opacity: .35;         z-index: 0;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);       }        .slide:nth-child(1)::before {         background: #9B4DCA;       }        .slide:nth-child(2)::before {         background: #00D2FF;       }        .slide:nth-child(3)::before {         background: #CA4D9B;       }        .slide:nth-child(4)::before {         background: #4D7ACA;       }        .slide-img {         position: absolute;         inset: 0;         width: 100%;         height: 100%;         object-fit: cover;         opacity: .5;       }        .slide-content {         position: relative;         z-index: 2;         height: 100%;         display: flex;         flex-direction: column;         align-items: center;         justify-content: center;         text-align: center;         padding: 24px 24px;       }        .slide-label {         font-size: .7rem;         font-weight: 700;         letter-spacing: .18em;         text-transform: uppercase;         color: var(--accent-cyan);         margin-bottom: 14px;         background: rgba(0, 210, 255, .1);         border: 1px solid rgba(0, 210, 255, .25);         padding: 4px 14px;         border-radius: 20px;         display: inline-block;       }        .slide-title {         font-size: clamp(24px, 5.5vw, 52px);         line-height: 1.1;         font-weight: 800;         margin-bottom: 16px;         background: linear-gradient(to right, #fff, #b3c0ff);         -webkit-background-clip: text;         -webkit-text-fill-color: transparent;         max-width: 700px;       }        .slide-sub {         font-size: clamp(13px, 2vw, 17px);         color: var(--text-muted);         max-width: 520px;         margin-bottom: 28px;       }        .slide-btn {         display: inline-block;         background: var(--grad);         color: #fff;         font-size: 14px;         font-weight: 700;         padding: 12px 32px;         border-radius: 30px;         box-shadow: 0 8px 28px rgba(0, 210, 255, .25);         text-transform: uppercase;         letter-spacing: 1px;         transition: transform .15s, box-shadow .2s;         border: none;         cursor: pointer;       }        .slide-btn:hover {         box-shadow: 0 12px 36px rgba(0, 210, 255, .45);         transform: translateY(-2px);       }        /* Slider controls */       .slider-prev,       .slider-next {         position: absolute;         top: 50%;         transform: translateY(-50%);         z-index: 10;         width: 44px;         height: 44px;         border-radius: 50%;         background: rgba(255, 255, 255, .08);         border: 1px solid rgba(255, 255, 255, .15);         display: flex;         align-items: center;         justify-content: center;         cursor: pointer;         transition: background .2s;         backdrop-filter: blur(8px);       }        .slider-prev:hover,       .slider-next:hover {         background: rgba(155, 77, 202, .3);       }        .slider-prev {         left: 16px;       }        .slider-next {         right: 16px;       }        .slider-prev svg,       .slider-next svg {         width: 18px;         height: 18px;         color: #fff;       }        /* Dots */       .slider-dots {         position: absolute;         bottom: 18px;         left: 50%;         transform: translateX(-50%);         z-index: 10;         display: flex;         gap: 8px;         align-items: center;       }        .dot {         width: 8px;         height: 8px;         border-radius: 4px;         background: rgba(255, 255, 255, .3);         cursor: pointer;         transition: width .3s, background .3s;       }        .dot.active {         width: 24px;         background: var(--accent-cyan);       }        /* Progress bar */       .slider-progress {         position: absolute;         bottom: 0;         left: 0;         height: 3px;         z-index: 10;         background: var(--grad);         animation: sliderProgress 5s linear infinite;         transform-origin: left;       }        @keyframes sliderProgress {         from {           width: 0;         }          to {           width: 100%;         }       }        .features {         max-width: 1200px;         margin: 0 auto;         padding: 32px 20px 48px;         display: grid;         grid-template-columns: 1fr;         gap: 16px;       }        .feature-card {         background: var(--bg-card2);         border: 1px solid var(--border);         padding: 26px 24px;         border-radius: 16px;       }        .feature-icon {         font-size: 2rem;         margin-bottom: 14px;         display: block;       }        .feature-card h3 {         font-size: 1.05rem;         font-weight: 700;         margin-bottom: 8px;       }        .feature-card p {         font-size: .875rem;         color: var(--text-muted);         line-height: 1.7;       }        .content-area {         max-width: 1240px;         margin: 0 auto;         padding: 0 20px 56px; 		    margin-top: 34px;       }        .content-area>h2 {         font-size: 1.3rem;         font-weight: 700;         color: #fff;         margin-bottom: 20px;         padding-top: 8px;       }        .toc-block {         margin-bottom: 36px;         background: var(--bg-card2);         border: 1px solid var(--border);         border-radius: 16px;         overflow: hidden;       }        .toc-header {         display: flex;         align-items: center;         justify-content: space-between;         padding: 14px 20px;         cursor: pointer;         user-select: none;         border-bottom: 1px solid transparent;         transition: border-color .25s, background .2s;       }        .toc-header:hover {         background: rgba(255, 255, 255, .02);       }        .toc-block.open .toc-header {         border-bottom-color: var(--border);       }        .toc-header-left {         display: flex;         align-items: center;         gap: 10px;       }        .toc-header-left svg {         width: 16px;         height: 16px;         color: var(--accent-cyan);         flex-shrink: 0;       }        .toc-header-left strong {         font-size: .82rem;         font-weight: 700;         letter-spacing: .06em;         text-transform: uppercase;         color: var(--text-muted);       }        .toc-header-right {         display: flex;         align-items: center;         gap: 10px;       }        .toc-toggle-hint {         font-size: .68rem;         color: var(--text-dim);         letter-spacing: .04em;       }        .toc-caret {         width: 26px;         height: 26px;         border-radius: 7px;         background: rgba(255, 255, 255, .05);         border: 1px solid var(--border);         display: flex;         align-items: center;         justify-content: center;         transition: background .2s, transform .3s;       }        .toc-caret svg {         width: 12px;         height: 12px;         color: var(--text-muted);       }        .toc-block.open .toc-caret {         background: rgba(0, 210, 255, .1);         transform: rotate(180deg);       }        .toc-content {         display: none;         padding: 18px 20px 20px;       }        .toc-block.open .toc-content {         display: block;       }        .toc-pills {         display: flex;         flex-wrap: wrap;         gap: 8px;       }        .toc-pill {         display: inline-flex;         align-items: center;         gap: 7px;         font-size: .8rem;         font-weight: 500;         color: var(--text-muted);         background: rgba(255, 255, 255, .04);         border: 1px solid var(--border);         padding: 7px 14px;         border-radius: 30px;         text-decoration: none;         transition: background .18s, border-color .18s, color .18s, transform .15s;         white-space: nowrap;       }        .toc-pill:hover {         background: rgba(0, 210, 255, .1);         border-color: rgba(0, 210, 255, .3);         color: var(--accent-cyan);         transform: translateY(-1px);       }        .toc-pill-num {         width: 18px;         height: 18px;         border-radius: 5px;         flex-shrink: 0;         background: rgba(0, 210, 255, .12);         border: 1px solid rgba(0, 210, 255, .2);         display: inline-flex;         align-items: center;         justify-content: center;         font-size: .62rem;         font-weight: 800;         color: var(--accent-cyan);         line-height: 1;       }        /* Info card */       .info-card {         background: var(--bg-card2);         border: 1px solid var(--border);         border-radius: 16px;         padding: 8px 0;         margin-bottom: 40px;       }        .info-sec {         padding: 24px 28px;       }        .info-sec+.info-sec {         border-top: 1px solid rgba(255, 255, 255, .05);       }        .info-sec h3 {         font-size: .97rem;         font-weight: 700;         color: #fff;         margin-bottom: 10px;         line-height: 1.4;       }        .info-sec p {         font-size: .865rem;         line-height: 1.78;         color: var(--text-muted);       }        .faq-title {         font-size: 1.3rem;         font-weight: 700;         color: #fff;         margin-bottom: 16px;       }        .faq-list {         display: flex;         flex-direction: column;         gap: 12px;       }        .faq-item {         background: var(--bg-card);         border: 1px solid var(--border);         border-radius: 14px;         overflow: hidden;         transition: border-color .2s;       }        .faq-item.open {         border-color: rgba(155, 77, 202, .3);       }        .faq-q {         display: flex;         align-items: center;         justify-content: space-between;         padding: 20px 24px;         cursor: pointer;         user-select: none;         gap: 16px;       }        .faq-q-text {         font-size: .97rem;         font-weight: 600;         color: #fff;         line-height: 1.4;       }        .faq-item:not(.open) .faq-q-text {         color: var(--text-muted);       }        .faq-chevron {         flex-shrink: 0;         width: 24px;         height: 24px;         display: flex;         align-items: center;         justify-content: center;         color: var(--text-muted);         transition: transform .28s, color .2s;       }        .faq-chevron svg {         width: 14px;         height: 14px;       }        .faq-item.open .faq-chevron {         transform: rotate(180deg);         color: var(--accent-cyan);       }        .faq-body {         max-height: 0;         overflow: hidden;         transition: max-height .35s cubic-bezier(.4, 0, .2, 1);       }        .faq-item.open .faq-body {         max-height: 700px;       }        .faq-body-inner {         border-top: 1px solid rgba(255, 255, 255, .06);         padding: 18px 24px 22px;       }        .faq-body-inner p {         font-size: .875rem;         line-height: 1.78;         color: var(--text-muted);       }        .payments {         background: var(--bg-panel);         border-top: 1px solid var(--border);         border-bottom: 1px solid var(--border);         padding: 28px 20px;         text-align: center;       }        .payments-label {         font-size: .68rem;         font-weight: 700;         letter-spacing: .12em;         text-transform: uppercase;         color: var(--text-dim);         margin-bottom: 16px;       }        .payments-logos {         display: flex;         justify-content: center;         gap: 24px;         flex-wrap: wrap;         opacity: .65;       }        .payments-logos span {         font-size: .82rem;         font-weight: 700;       }        .payments-img {         display: block;         width: 100%;         max-width: 1240px;         height: auto;         margin: 24px auto 0;       }        footer {         background: #04060C;         padding: 40px 20px 24px;         border-top: 1px solid var(--border);       }        .footer-inner {         max-width: 1200px;         margin: 0 auto;         text-align: center;       }        .footer-links {         display: flex;         flex-wrap: wrap;         justify-content: center;         gap: 10px 28px;         margin-bottom: 28px;       }        .footer-links a {         font-size: .83rem;         font-weight: 500;         color: var(--text-muted);         transition: color .2s;       }        .footer-links a:hover {         color: #fff;       }        .footer-links a.active {         color: var(--accent-purple);       }        .legal-text {         font-size: .7rem;         color: #404868;         line-height: 1.65;         max-width: 860px;         margin: 0 auto 20px;       }        .footer-badges {         display: flex;         justify-content: center;         gap: 10px;         align-items: center;       }        .badge-18 {         width: 34px;         height: 34px;         border-radius: 50%;         border: 2px solid #404868;         display: flex;         align-items: center;         justify-content: center;         font-size: .65rem;         font-weight: 900;         color: #404868;       }        @media (min-width: 768px) {         .features {           grid-template-columns: repeat(3, 1fr);           padding: 32px 20px 56px;         }       }        @media (min-width: 900px) {         .nav-links {           display: flex;         }          .burger {           display: none !important;         }       }        @media (max-width: 899px) {         .nav-links {           display: none;         }          .burger {           display: flex;         }          .auth-btns {           display: none;         }          .lang-wrap {           display: none;         }       }        @media (max-width: 560px) {         .btn-login {           display: none;         }          .info-sec {           padding: 20px 18px;         }          .faq-q {           padding: 16px 18px;         }          .faq-body-inner {           padding: 16px 18px 20px;         }          .slider-prev,         .slider-next {           width: 36px;           height: 36px;         }          .toc-pills {           gap: 6px;         }          .toc-pill {           font-size: .75rem;           padding: 6px 11px;         }       } #spin-story > img, #spin-story > p > img {  display: block; margin: 0 auto; padding: 20px 0px; max-width: 90%;} #spin-story > ul, ol {padding: 10px 30px; font-size: .865rem; line-height: 1.78; color: var(--text-muted);} #spin-story > ol {list-style: disc;} #spin-story > ul {list-style: decimal;}  /* FAQ new */ .faq__title {   font-size: 1.3rem;   font-weight: 700;   color: #fff;   margin-bottom: 16px; }  .faq__list {   display: flex;   flex-direction: column;   gap: 12px; }  .faq__item {   background: var(--bg-card);   border: 1px solid var(--border);   border-radius: 14px;   overflow: hidden;   transition: border-color .2s; }  .faq__item[open] {   border-color: rgba(155, 77, 202, .3); }  .faq__question {   display: flex;   align-items: center;   justify-content: space-between;   padding: 20px 24px;   cursor: pointer;   user-select: none;   font-size: .97rem;   font-weight: 600;   color: var(--text-muted);   list-style: none;   transition: color .2s; }  .faq__question::-webkit-details-marker {   display: none; }  .faq__item[open] .faq__question {   color: #fff;   border-bottom: 1px solid rgba(255, 255, 255, .06); }  .faq__question::after {   content: '';   flex-shrink: 0;   width: 14px;   height: 14px;   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5l5 5 5-5' stroke='%238B94B5' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");   background-repeat: no-repeat;   background-size: contain;   transition: transform .28s; }  .faq__item[open] .faq__question::after {   transform: rotate(180deg);   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5l5 5 5-5' stroke='%2300D2FF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }  .faq__answer {   padding: 18px 24px 22px; }  .faq__answer p {   font-size: .875rem;   line-height: 1.78;   color: var(--text-muted); }  @media (max-width: 560px) {   .faq__question {     padding: 16px 18px;   }   .faq__answer {     padding: 16px 18px 20px;   } }