:root {
   --ink: #16151a;
   --muted: #6d6a75;
   --purple: #6856f7;
   --purple2: #8c7bff;
   --soft: #f5f4f7;
   --line: #e8e5ec;
   --card: #fff;
   --dark: #17151c
}

* {
   box-sizing: border-box
}

img,
svg,
video {
   max-width: 100%;
   height: auto;
   display: block
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Inter, Arial, sans-serif;
   color: var(--ink);
   background: #fff;
   line-height: 1.5;
   overflow-x: hidden;
   -webkit-text-size-adjust: 100%;
   padding-top: 78px
}

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

.container {
   width: min(1160px, calc(100% - 40px));
   margin: auto
}

.container.platform {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 0
}

.nav-wrap {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
   background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(232, 229, 236, .65)
}

.nav {
   height: 78px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.brand {
   display: flex;
   align-items: center;
   gap: 8px;
   font: 800 25px Manrope
}

.brand-mark {
   width: 29px;
   height: 29px;
   display: grid;
   place-items: center;
   background: var(--purple);
   color: white;
   border-radius: 9px;
   font: 800 20px Manrope;
   transform: rotate(-7deg)
}

.brand-mark.small {
   width: 23px;
   height: 23px;
   font-size: 15px
}

.brand-logo {
   height: 80px;
   width: auto;
   display: block
}

.nav-links {
   display: flex;
   gap: 34px;
   font-size: 14px;
   color: #514f59
}

.nav-links a:hover {
   color: #17151c
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 22px;
   border-radius: 12px;
   font-weight: 700;
   transition: .25s
}

.btn:hover {
   transform: translateY(-1px)
}

.btn-sm {
   padding: 11px 17px;
   background: #17151c;
   color: #fff;
   font-size: 13px
}

.btn-primary {
   background: var(--purple);
   color: #fff;
   box-shadow: 0 13px 35px rgba(104, 86, 247, .24)
}

.btn-light {
   background: #f1eff5;
   color: #17151c
}

.btn-white {
   background: #fff;
   color: #201d2b
}

.menu {
   display: none;
   background: none;
   border: 0
}

.hero {
   position: relative;
   overflow: hidden;
   padding: 88px 0 76px;
   background: linear-gradient(180deg, #fbfaff 0%, #fff 68%)
}

.hero-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(15px);
   opacity: .45;
   pointer-events: none
}

.orb-a {
   width: 420px;
   height: 420px;
   background: #d9d2ff;
   top: 30px;
   left: -200px
}

.orb-b {
   width: 500px;
   height: 500px;
   background: #efeaff;
   right: -200px;
   top: 70px
}

.hero-inner {
   text-align: center;
   position: relative
}

.eyebrow {
   display: inline-flex;
   gap: 9px;
   align-items: center;
   background: #f0edff;
   border: 1px solid #e1dcff;
   padding: 7px 10px;
   border-radius: 999px;
   color: #5e52be;
   font-size: 12px;
   font-weight: 600
}

.pill-new {
   background: #fff;
   color: #6c57f4;
   border-radius: 999px;
   padding: 4px 8px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .06)
}

h1,
h2,
h3 {
   font-family: Manrope, Inter, sans-serif;
   letter-spacing: -.04em
}

h1 {
   font-size: clamp(48px, 6vw, 82px);
   line-height: 1.02;
   margin: 26px auto 20px;
   max-width: 980px
}

.hero-sub {
   max-width: 660px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 18px
}

.hero-actions {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin: 32px 0 50px
}

.muted {
   color: #77727f;
   font-size: 13px
}

.check {
   display: inline-grid;
   place-items: center;
   width: 18px;
   height: 18px;
   background: #ece9ff;
   color: #6d5cf7;
   border-radius: 50%;
   font-style: normal;
   margin-right: 5px
}

.dashboard-shell {
   max-width: 1030px;
   width: 100%;
   margin: 0 auto;
   background: #fff;
   border: 1px solid #e5e2eb;
   border-radius: 20px;
   padding: 12px;
   box-shadow: 0 35px 90px rgba(51, 42, 91, .18);
   text-align: left
}

.dash-topbar {
   height: 56px;
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 0 12px;
   border-bottom: 1px solid #ece9ef;
   min-width: 0
}

.mini-brand {
   font-weight: 800;
   width: 145px;
   flex-shrink: 0
}

.searchbar {
   background: #f6f5f8;
   border: 1px solid #ece9ef;
   border-radius: 8px;
   padding: 9px 12px;
   color: #95919d;
   font-size: 11px;
   flex: 1;
   max-width: 360px;
   min-width: 0
}

.top-icons {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
   color: #8d8994;
   flex-shrink: 0
}

.avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
   background: #25222b;
   color: #fff;
   font-size: 10px;
   font-weight: 800
}

.avatar.purple {
   background: #7462ff
}

.avatar.pink {
   background: #e46eac
}

.avatar.green {
   background: #10b981
}

.avatar.orange {
   background: #f59e0b
}

.avatar.blue {
   background: #3b82f6
}

.dash-grid {
   display: grid;
   grid-template-columns: 160px 1fr;
   min-height: 420px;
   min-width: 0
}

.sidebar {
   padding: 20px 12px;
   border-right: 1px solid #ece9ef;
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-size: 11px;
   color: #7d7885;
   min-width: 0
}

.sidebar span {
   padding: 8px 10px;
   border-radius: 7px
}

.sidebar .side-active {
   background: #f0edff;
   color: #5f4fe8;
   font-weight: 700
}

.dash-main {
   padding: 22px;
   min-width: 0
}

.dash-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-width: 0
}

.dash-title small {
   color: #908b98;
   font-size: 10px
}

.dash-title h3 {
   font-size: 20px;
   margin: 3px 0
}

.dash-title button {
   border: 0;
   background: #6f5df6;
   color: #fff;
   border-radius: 8px;
   padding: 9px 13px;
   font-size: 10px
}

.metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin: 18px 0
}

.metrics div {
   border: 1px solid #ece9ef;
   border-radius: 11px;
   padding: 14px
}

.metrics span {
   display: block;
   color: #8f8a96;
   font-size: 9px
}

.metrics strong {
   display: inline-block;
   font-size: 18px;
   margin-top: 5px
}

.metrics em {
   float: right;
   color: #3f9b65;
   background: #eef9f2;
   padding: 3px 5px;
   border-radius: 5px;
   font-size: 8px
}

.metrics-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px
}

.metrics-4 div {
   text-align: center;
   min-width: 0
}

.metrics-4 strong {
   font-size: 20px;
   white-space: nowrap
}

.commission-banner {
   background: linear-gradient(135deg, #6b58f4, #8d76ff);
   border-radius: 12px;
   padding: 18px 24px;
   margin: 16px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   min-width: 0
}

.commission-info {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
   flex: 1;
   overflow: hidden
}

.commission-label {
   font-size: 14px;
   font-weight: 700
}

.commission-desc {
   font-size: 11px;
   opacity: .85;
   white-space: normal;
   word-break: break-all
}

.commission-amount {
   font-size: 28px;
   font-weight: 800;
   font-family: Manrope, Inter, sans-serif;
   flex-shrink: 0
}

.data-table-card {
   border: 1px solid #ece9ef;
   border-radius: 12px;
   padding: 16px;
   margin-top: 16px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   max-width: 100%;
   min-width: 0
}

.data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 11px;
   margin-top: 10px
}

.data-table th {
   text-align: left;
   padding: 10px 8px;
   color: #8f8a96;
   font-weight: 600;
   border-bottom: 1px solid #ece9ef;
   font-size: 10px;
   white-space: nowrap
}

.data-table td {
   padding: 10px 8px;
   border-bottom: 1px solid #f2f0f5;
   white-space: nowrap
}

.data-table tr:last-child td {
   border-bottom: none
}

.data-table tr:nth-child(even) td {
   background: #faf9fb
}

.charts {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 12px
}

.chart-card,
.donut-card {
   border: 1px solid #ece9ef;
   border-radius: 12px;
   padding: 13px
}

.chart-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 10px
}

.chart-head small {
   color: #9a959f
}

.chart-card svg {
   width: 100%;
   height: 180px
}

.donut {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   margin: 22px auto;
   background: conic-gradient(#6d5cf7 0 72%, #ebe8f0 72% 100%);
   display: grid;
   place-items: center;
   position: relative
}

.donut:after {
   content: "";
   width: 78px;
   height: 78px;
   background: #fff;
   border-radius: 50%;
   position: absolute
}

.donut span {
   z-index: 1;
   font-weight: 800
}

.legend {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 9px;
   margin: 9px 0;
   color: #77727f
}

.legend i {
   width: 7px;
   height: 7px;
   background: #6d5cf7;
   border-radius: 50%
}

.legend:nth-child(5) i {
   background: #d8d3df
}

.legend b {
   margin-left: auto;
   color: #222
}

.trusted {
   margin: 50px 0 18px;
   font-size: 2em;
   color: #6856F6
}

.logo-strip {
   display: flex;
   justify-content: space-between;
   gap: 28px;
   flex-wrap: wrap;
   color: #6f6a76;
   font: 700 16px Manrope;
   opacity: .75
}

.section {
   padding: 24px 0
}

.section.platform-section {
   height: calc(100vh - 78px);
   display: flex;
   flex-direction: column;
   overflow: hidden
}

.section.soft {
   background: #f7f6f9
}

.section-kicker {
   font-size: 11px;
   font-weight: 700;
   color: #6b5bf4;
   text-align: center;
   margin-bottom: 4px
}

.section-kicker span {
   background: #eeeaff;
   border-radius: 999px;
   padding: 4px 7px;
   margin-left: 6px;
   font-size: 9px
}

.section-kicker.light {
   color: #88e6c4
}

.section h2 {
   font-size: clamp(22px, 2.6vw, 32px);
   line-height: 1.08;
   text-align: center;
   max-width: 860px;
   margin: 0 auto 10px
}

.section-sub {
   text-align: center;
   color: var(--muted);
   max-width: 630px;
   margin: 0 auto 50px
}

.section-sub.left {
   text-align: left;
   margin: 0
}

.feature-grid {
   display: grid;
   gap: 18px;
   margin-top: 48px
}

.feature-grid.three {
   grid-template-columns: 1.2fr 1fr 1fr
}

.feature-card {
   background: #faf9fb;
   border: 1px solid #ece9ef;
   border-radius: 18px;
   padding: 28px;
   min-height: 360px;
   overflow: hidden
}

.feature-card h3 {
   font-size: 22px;
   margin: 20px 0 9px
}

.feature-card p {
   color: #7c7783;
   font-size: 14px
}

.feature-img {
   width: 100%;
   max-width: 320px;
   height: auto;
   margin-top: 24px;
   border-radius: 12px;
   display: block
}

.icon-box {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   background: #ebe7ff;
   color: #6856f7;
   border-radius: 11px;
   font-weight: 800
}

.mock-window {
   background: #fff;
   border: 1px solid #e8e5ec;
   border-radius: 12px;
   margin-top: 24px;
   padding: 15px;
   box-shadow: 0 12px 30px rgba(70, 63, 87, .08)
}

.task-list>div {
   display: flex;
   justify-content: space-between;
   font-size: 11px
}

.task-list p {
   background: #faf9fb;
   padding: 10px;
   border-radius: 8px;
   color: #4e4a54;
   font-size: 10px
}

.task-list p i {
   font-style: normal;
   color: #705ef4;
   margin-right: 6px
}

.task-list small {
   float: right;
   color: #9b97a0
}

.integration-cloud {
   height: 180px;
   position: relative;
   margin-top: 22px
}

.integration-cloud span {
   position: absolute;
   width: 52px;
   height: 52px;
   display: grid;
   place-items: center;
   background: #fff;
   border: 1px solid #e9e6ed;
   border-radius: 15px;
   box-shadow: 0 12px 25px rgba(0, 0, 0, .05);
   font-weight: 800
}

.integration-cloud span:nth-child(1) {
   left: 42%;
   top: 38%
}

.integration-cloud span:nth-child(2) {
   left: 8%;
   top: 24%
}

.integration-cloud span:nth-child(3) {
   right: 8%;
   top: 15%
}

.integration-cloud span:nth-child(4) {
   left: 22%;
   bottom: 4%
}

.integration-cloud span:nth-child(5) {
   right: 18%;
   bottom: 6%
}

.role-row {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #fff;
   border: 1px solid #e8e5ec;
   padding: 10px;
   border-radius: 11px;
   margin-top: 12px
}

.role-row div {
   display: flex;
   flex-direction: column;
   font-size: 10px
}

.role-row small {
   color: #98939e
}

.toggle {
   margin-left: auto;
   width: 26px;
   height: 14px;
   border-radius: 999px;
   background: #ddd9e2;
   position: relative
}

.toggle:after {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   background: #fff;
   top: 2px;
   left: 2px;
   border-radius: 50%
}

.toggle.on {
   background: #6d5cf7
}

.toggle.on:after {
   left: 14px
}

.split {
   display: grid;
   grid-template-columns: .95fr 1.05fr;
   align-items: center;
   gap: 70px
}

.split.reverse {
   grid-template-columns: 1.1fr .9fr
}

.split-copy .section-kicker,
.split-copy h2 {
   text-align: left
}

.split-copy h2 {
   font-size: 52px
}

.split-copy>p {
   color: var(--muted)
}

.check-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 32px
}

.check-list>div {
   display: flex;
   gap: 14px;
   padding: 14px 0;
   border-bottom: 1px solid #e5e2e8
}

.check-list i {
   font-style: normal;
   width: 32px;
   height: 32px;
   border-radius: 9px;
   background: #ebe7ff;
   color: #6654f6;
   display: grid;
   place-items: center;
   font-size: 16px;
   font-weight: 800
}

.check-list span {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.check-list b {
   font-size: 14px
}

.check-list small {
   color: #8d8893
}

.compact>div {
   padding: 10px 0
}

.floating-ui {
   min-height: 510px;
   border-radius: 28px;
   /* background: radial-gradient(circle at 40% 30%, #eeeaff, #ded8f8 42%, #cdc3ef); */
   position: relative;
   overflow: hidden;
   padding: 32px
}

.ui-card {
   position: absolute;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, .8);
   box-shadow: 0 25px 60px rgba(45, 35, 88, .18);
   border-radius: 16px;
   padding: 18px
}

.ui-card small {
   display: block;
   color: #908b98;
   font-size: 10px;
   margin-bottom: 7px
}

.contact-card {
   left: 28px;
   top: 36px;
   width: 290px
}

.contact {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 0;
   border-top: 1px solid #efedf1;
   font-size: 10px
}

.contact em {
   margin-left: auto;
   font-style: normal;
   font-weight: 700
}

.stat-card {
   right: 28px;
   top: 170px;
   width: 245px
}

.stat-card strong {
   font-size: 27px
}

.stat-card>span {
   color: #319a62;
   font-size: 10px;
   margin-left: 8px
}

.bars {
   height: 90px;
   display: flex;
   align-items: end;
   gap: 10px;
   margin-top: 10px
}

.bars i {
   flex: 1;
   background: #7a68fa;
   border-radius: 5px 5px 0 0
}

.bars i:nth-child(1) {
   height: 25%
}

.bars i:nth-child(2) {
   height: 45%
}

.bars i:nth-child(3) {
   height: 36%
}

.bars i:nth-child(4) {
   height: 65%
}

.bars i:nth-child(5) {
   height: 82%
}

.bars i:nth-child(6) {
   height: 72%
}

.payment-card {
   left: 70px;
   bottom: 45px;
   width: 210px
}

.payment-card b {
   font-size: 18px
}

.payment-card span {
   float: right;
   color: #32935f;
   font-size: 9px;
   background: #eef9f2;
   padding: 4px 6px;
   border-radius: 5px
}

.dark {
   background: #18161d;
   color: #fff
}

.dark h2 {
   max-width: 900px
}

.platform-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 16px;
   align-items: stretch;
   flex: 1 1 auto;
   min-height: 0;
   min-width: 0
}

.pricing-compare {
   background: linear-gradient(160deg, #1e1a3a 0%, #2a1f4d 40%, #1a1430 100%);
   border: 1px solid rgba(139, 92, 246, .25);
   border-radius: 18px;
   padding: 10px 12px;
   box-shadow: 0 25px 55px rgba(0, 0, 0, .35), 0 0 60px rgba(139, 92, 246, .08);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   min-height: 0;
   min-width: 0
}

.compare-header {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr 1fr;
   gap: 0;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(139, 92, 246, .2);
   flex: 0 0 auto;
   min-width: 0
}

.compare-col-dim {
   font-size: 12px;
   font-weight: 700;
   color: #c4b8f0;
   padding: 4px 6px
}

.compare-col {
   text-align: center;
   padding: 3px 4px;
   border-radius: 8px;
   transition: all .3s ease
}

.compare-col.featured {
   background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .05));
   border: 1px solid rgba(139, 92, 246, .3)
}

.compare-col .plan-name {
   color: #e8e0ff;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 2px
}

.compare-col .plan-price-tag {
   font-size: 8px;
   color: #a89be0;
   margin-bottom: 1px
}

.compare-col .plan-price-value {
   font: 800 20px Manrope;
   color: #fff;
   letter-spacing: -.02em
}

.compare-col.featured .plan-price-value {
   color: #c4b8f0
}

.compare-row {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr 1fr;
   gap: 0;
   padding: 3px 0;
   border-bottom: 1px solid rgba(139, 92, 246, .12);
   flex: 1 1 auto;
   align-content: center;
   min-height: 0;
   overflow: hidden;
   min-width: 0
}

.compare-row:last-child {
   border-bottom: none
}

.compare-row-label {
   font-size: 11px;
   font-weight: 600;
   color: #c4b8f0;
   padding: 2px 6px;
   display: flex;
   align-items: center;
   align-self: stretch
}

.compare-cell {
   font-size: 10px;
   color: #d8d0f0;
   text-align: center;
   padding: 2px 4px;
   line-height: 1.3;
   align-self: stretch;
   display: flex;
   align-items: center;
   justify-content: center;
   word-break: break-word
}

.compare-cell.merge-2 {
   grid-column: span 2
}

.compare-cell.merge-3 {
   grid-column: span 3
}

.value-tag {
   display: inline-block;
   background: rgba(139, 92, 246, .25);
   color: #c4b8f0;
   font-size: 10px;
   font-weight: 600;
   padding: 1px 6px;
   border-radius: 999px;
   margin-left: 3px;
   vertical-align: middle
}

.pricing-table-wrap {
   width: 100%;
   padding: 28px
}

.pricing-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
   color: #d4ebe0
}

.pricing-table th,
.pricing-table td {
   padding: 14px 12px;
   text-align: center;
   vertical-align: middle;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.pricing-table thead th {
   border-bottom: 2px solid rgba(136, 230, 196, .5);
   padding-bottom: 20px;
   background: rgba(255, 255, 255, .04)
}

.pricing-table .col-category {
   text-align: right;
   color: #9ec6b5;
   font-weight: 600;
   font-size: 13px;
   width: 22%;
   padding-right: 20px;
   background: rgba(255, 255, 255, .04)
}

.pricing-table .col-plan {
   font-weight: 600;
   color: #e8f5f0
}

.plan-name {
   color: #e8f5f0;
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 6px
}

.plan-price small {
   display: block;
   color: #9ec6b5;
   font-size: 10px;
   font-weight: 500;
   margin-bottom: 3px
}

.plan-price b {
   display: block;
   font: 800 28px Manrope;
   color: #5ae0b8
}

.pricing-table tbody td {
   font-size: 13px;
   line-height: 1.7;
   color: #d4ebe0
}

.pricing-table tbody td em {
   display: inline-block;
   font-style: normal;
   background: rgba(90, 224, 184, .15);
   color: #5ae0b8;
   padding: 3px 8px;
   border-radius: 6px;
   font-size: 10px;
   font-weight: 600;
   margin-top: 4px
}

.pricing-table tbody tr:last-child td {
   border-bottom: none
}

.pricing-table tbody td:first-child {
   color: #9ec6b5;
   font-weight: 500;
   text-align: right;
   padding-right: 20px
}

.service-panel {
   background: linear-gradient(160deg, #1e1a3a 0%, #2a1f4d 40%, #1a1430 100%);
   border: 1px solid rgba(139, 92, 246, .25);
   border-radius: 18px;
   padding: 14px 18px;
   box-shadow: 0 25px 55px rgba(0, 0, 0, .35), 0 0 60px rgba(139, 92, 246, .08);
   display: flex;
   flex-direction: column;
   min-height: 0;
   min-width: 0;
   overflow: hidden
}

.service-title {
   font-size: 15px;
   font-weight: 800;
   color: #fff;
   text-align: center;
   margin-bottom: 10px;
   letter-spacing: -.01em;
   flex: 0 0 auto
}

.service-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 12px;
   flex: 1 1 auto;
   min-height: 0
}

.service-item {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   flex: 1 1 auto;
   min-height: 0
}

.service-icon {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative
}

.service-icon.icon-1,
.service-icon.icon-2,
.service-icon.icon-3 {
   background: transparent
}

.service-icon.icon-1 svg,
.service-icon.icon-2 svg,
.service-icon.icon-3 svg {
   width: 100%;
   height: 100%;
   border-radius: 50%
}

.service-info h4 {
   font-size: 12px;
   font-weight: 700;
   color: #e8e0ff;
   margin-bottom: 2px;
   flex-shrink: 0
}

.service-info {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-height: 0
}

.service-info p {
   font-size: 10px;
   color: #a89be0;
   line-height: 1.35;
   flex: 1 1 auto
}

.service-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-bottom: 12px;
   flex: 1 1 auto;
   min-height: 0
}

.s-card {
   background: rgba(139, 92, 246, .08);
   border: 1px solid rgba(139, 92, 246, .2);
   border-radius: 12px;
   padding: 8px 10px;
   transition: all .3s ease;
   display: flex;
   flex-direction: column;
   min-height: 0
}

.s-card:hover {
   background: rgba(139, 92, 246, .15);
   border-color: rgba(139, 92, 246, .4);
   transform: translateY(-3px)
}

.s-card-icon {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
   flex-shrink: 0
}

.s-card-icon svg {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   flex-shrink: 0
}

.s-card-icon .s-label {
   font-size: 12px;
   font-weight: 600;
   color: #c4b8f0
}

.s-card h5 {
   font-size: 11px;
   font-weight: 700;
   color: #c4b8f0;
   margin-bottom: 2px;
   flex-shrink: 0
}

.s-card p {
   font-size: 9px;
   color: #9088b8;
   line-height: 1.3;
   flex: 1 1 auto
}

.shop-operation {
   background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(107, 88, 245, .05));
   border: 1px solid rgba(139, 92, 246, .3);
   border-radius: 14px;
   padding: 10px 12px;
   flex: 0 0 auto
}

.shop-operation h4 {
   font-size: 13px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 3px
}

.shop-operation p {
   font-size: 10px;
   color: #c4b8f0;
   line-height: 1.35
}

@media(max-width:900px) {
   .platform-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .pricing-compare {
      padding: 10px 10px
   }

   .service-panel {
      padding: 14px 12px
   }

   .service-cards {
      grid-template-columns: 1fr
   }

   .pricing-table {
      font-size: 12px
   }

   .pricing-table th,
   .pricing-table td {
      padding: 10px 8px
   }

   .plan-price b {
      font-size: 22px
   }

   .plan-name {
      font-size: 13px
   }
}

@media(max-width:620px) {
   .pricing-compare {
      padding: 8px 8px
   }

   .compare-col .plan-price-value { font-size: 18px }

   .service-panel {
      padding: 12px 10px
   }

   .service-item {
      gap: 12px
   }

   .service-icon {
      width: 36px;
      height: 36px
   }

   .service-info h4 {
      font-size: 14px
   }

   .service-info p {
      font-size: 11px
   }

   .pricing-table {
      font-size: 11px
   }

   .pricing-table th,
   .pricing-table td {
      padding: 8px 6px
   }

   .plan-price b {
      font-size: 18px
   }

   .pricing-table .col-category {
      font-size: 11px
   }
}

.tabs {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin: 38px 0 24px;
   flex-wrap: wrap
}

.tabs button {
   border: 1px solid #e4e1e8;
   background: #fff;
   padding: 10px 16px;
   border-radius: 10px;
   color: #7e7984
}

.tabs button.active {
   background: #1f1c24;
   color: white;
   border-color: #1f1c24
}

.case-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 470px;
   background: #f7f5fa;
   border-radius: 24px;
   overflow: hidden
}

.case-image {
   position: relative;
   background: linear-gradient(145deg, #dbd4ff, #b9afef);
   display: grid;
   place-items: center
}

.portrait {
   width: 220px;
   height: 290px;
   border-radius: 100px 100px 40px 40px;
   background: linear-gradient(#2f2c35, #1c1921);
   display: grid;
   place-items: center;
   color: #fff;
   font: 800 70px Manrope;
   box-shadow: 0 30px 60px rgba(47, 39, 87, .3)
}

.quote-badge {
   position: absolute;
   right: 28px;
   bottom: 28px;
   background: #fff;
   padding: 14px 18px;
   border-radius: 14px;
   font: 800 24px Manrope
}

.quote-badge small {
   display: block;
   font: 500 9px Inter;
   color: #7e7984
}

.case-copy {
   padding: 55px
}

.quote-mark {
   font: 800 68px Georgia;
   color: #6d5cf7;
   height: 60px
}

.case-copy>p {
   font: 600 25px/1.45 Manrope;
   margin: 15px 0 34px
}

.author {
   display: flex;
   gap: 11px;
   align-items: center
}

.author div {
   display: flex;
   flex-direction: column
}

.author small {
   color: #908b98
}

.case-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 38px;
   border-top: 1px solid #e3e0e8;
   padding-top: 25px
}

.case-stats strong {
   display: block;
   font: 800 34px Manrope
}

.case-stats span {
   font-size: 11px;
   color: #85808a
}

.insight-ui .wide {
   width: 60%
}

.insight-ui .wide:first-child {
   left: 28px;
   top: 34px
}

.insight-ui .mini {
   width: 42%;
   right: 28px;
   top: 110px
}

.insight-ui .revenue {
   top: auto;
   right: auto;
   left: 65px;
   bottom: 80px
}

.insight-ui .wide:last-child {
   right: 25px;
   left: auto;
   bottom: 28px
}

.spark,
.tiny-chart {
   height: 70px;
   margin-top: 10px;
   background: linear-gradient(180deg, rgba(108, 89, 247, .28), transparent);
   clip-path: polygon(0 65%, 15% 47%, 30% 60%, 45% 28%, 60% 42%, 78% 14%, 100% 27%, 100% 100%, 0 100%)
}

.mini button {
   border: 0;
   background: #6e5cf6;
   color: white;
   border-radius: 7px;
   padding: 7px 9px;
   float: right
}

.summary-bars {
   display: flex;
   gap: 8px;
   align-items: end;
   height: 70px
}

.summary-bars i {
   flex: 1;
   background: #7866f8;
   border-radius: 4px 4px 0 0;
   height: 50%
}

.summary-bars i:nth-child(2) {
   height: 82%
}

.summary-bars i:nth-child(3) {
   height: 64%
}

.summary-bars i:nth-child(4) {
   height: 90%
}

.command-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 48px
}

.command-grid>div {
   border: 1px solid #e6e3e9;
   background: #faf9fb;
   padding: 26px 22px;
   border-radius: 15px;
   font-size: 60px;
   line-height: 1;
   color: #6856f7;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center
}

.command-grid span {
   display: block;
   color: #27232d;
   font-size: 18px;
   margin-top: 18px;
   font-weight: 700
}

.pricing-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   max-width: 900px;
   margin: 50px auto 18px
}

.price-card {
   position: relative;
   background: #fff;
   border: 1px solid #e2dfe6;
   border-radius: 20px;
   padding: 34px
}

.price-card.featured {
   background:
     radial-gradient(circle at top left, rgba(99, 102, 241, .15), transparent 35%),
     radial-gradient(circle at bottom right, rgba(139, 92, 246, .1), transparent 45%),
     linear-gradient(180deg, #0B1026 0%, #1A1F3A 100%);
   border: 1px solid rgba(119, 100, 247, .5);
   box-shadow: 0 25px 55px rgba(0, 0, 0, .45), 0 0 60px rgba(119, 100, 247, .15), inset 0 1px 0 rgba(119, 100, 247, .2)
}

.price-card.featured::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: linear-gradient(135deg, transparent 0%, rgba(119, 100, 247, .06) 50%, transparent 100%);
   pointer-events: none
}

.price-card.featured h3 {
   color: #f0ecff
}

.price-card.featured p {
   color: #b0a8d8
}

.price-card h3 {
   font-size: 24px
}

.price-card p {
   color: #817c87
}

.price {
   display: flex;
   align-items: end;
   gap: 8px;
   margin: 26px 0 4px
}

.price strong {
   font: 800 52px Manrope
}

.price span {
   color: #77727d;
   padding-bottom: 8px
}

.price-card>small {
   color: #928d97
}

.price-card .btn {
   width: 100%;
   margin: 24px 0
}

.price-card h4 {
   font-size: 13px
}

.adv-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-top: 24px
}

.adv-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 14px 16px;
   background: linear-gradient(135deg, #f8f6ff, #f3f0fb);
   border-radius: 14px;
   border: 1px solid #ede8f5;
   transition: transform .3s var(--ease-soft), box-shadow .3s ease
}

.adv-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(103, 88, 196, .1)
}

.adv-item.highlight {
   background: linear-gradient(135deg, #7764f7, #9b8cf5);
   border-color: transparent;
   box-shadow: 0 16px 36px rgba(119, 100, 247, .25)
}

.adv-item.highlight b {
   color: #fff
}

.adv-item.highlight small {
   color: rgba(255, 255, 255, .8)
}

.adv-item.highlight .adv-num {
   background: rgba(255, 255, 255, .2);
   color: #fff
}

.adv-num {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: linear-gradient(135deg, #7764f7, #9b8cf5);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .5px
}

.adv-item b {
   display: block;
   font-size: 14px;
   font-weight: 700;
   color: #27232d;
   margin-bottom: 4px
}

.adv-item small {
   font-size: 12px;
   color: #8d8893;
   line-height: 1.5
}

.price-card ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
   color: #5f5b64;
   font-size: 13px
}

.popular {
   position: absolute;
   right: 20px;
   top: 20px;
   background: linear-gradient(135deg, #7764f7, #5b47d5);
   color: #fff;
   border-radius: 999px;
   padding: 6px 9px;
   font-size: 9px;
   font-weight: 800
}

.merchant-card {
   display: flex;
   flex-direction: column;
   position: relative;
   background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.15), transparent 35%),
      radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.1), transparent 45%),
      linear-gradient(180deg, #0B1026 0%, #1A1F3A 100%);
}

.merchant-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-top: 22px
}

.merchant-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 16px 10px;
   background: linear-gradient(180deg, rgba(40, 30, 80, .7), rgba(25, 18, 55, .8));
   border: 1px solid rgba(119, 100, 247, .25);
   border-radius: 14px;
   transition: transform .3s var(--ease-soft), box-shadow .3s ease, border-color .3s ease;
   position: relative;
   overflow: hidden
}

.merchant-item::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, transparent 30%, rgba(119, 100, 247, .1) 50%, transparent 70%);
   pointer-events: none
}

.merchant-item:hover {
   transform: translateY(-4px);
   border-color: rgba(119, 100, 247, .6);
   box-shadow: 0 16px 36px rgba(0, 0, 0, .35), 0 0 24px rgba(119, 100, 247, .2)
}

.merchant-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #3d3480, #2d2460);
   border: 1px solid rgba(119, 100, 247, .35);
   display: grid;
   place-items: center;
   font-size: 22px;
   box-shadow: inset 0 1px 0 rgba(119, 100, 247, .2)
}

.merchant-item svg {
   width: 100%;
   height: auto;
   max-width: 56px
}

.merchant-item-crown {
   padding: 12px 8px 14px
}

.merchant-item-crown svg {
   width: 80%;
   max-width: none;
   height: auto
}

.merchant-item span {
   font-size: 12px;
   color: #e8e2f8;
   font-weight: 600;
   letter-spacing: .3px
}

.merchant-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 22px
}

.merchant-tags span {
   padding: 6px 14px;
   background: linear-gradient(135deg, rgba(119, 100, 247, .2), rgba(119, 100, 247, .08));
   color: #9b8cf5;
   border: 1px solid rgba(119, 100, 247, .35);
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600
}

.enterprise {
   max-width: 900px;
   margin: auto;
   background: #1d1a22;
   color: #fff;
   padding: 24px 28px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.enterprise h4 {
   margin: 0 0 5px
}

.enterprise p {
   margin: 0;
   color: #b0abb5;
   font-size: 12px
}

.faq-wrap {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 80px;
   align-items: start
}

.faq-wrap .section-kicker,
.faq-wrap h2 {
   text-align: left
}

.faq-wrap h2 {
   font-size: 48px
}

.faq-list details {
   border-bottom: 1px solid #e4e1e7;
   padding: 20px 0
}

.faq-list summary {
   cursor: pointer;
   font-weight: 700;
   list-style: none
}

.faq-list summary:after {
   content: "+";
   float: right;
   font-size: 20px;
   color: #6b5af5
}

.faq-list details[open] summary:after {
   content: "−"
}

.faq-list p {
   color: #7b7681;
   font-size: 13px;
   max-width: 620px
}

.cta {
   position: relative;
   overflow: hidden;
   background: #6b58f4;
   color: #fff;
   padding: 82px 0
}

.cta-orb {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: #9c8dff;
   filter: blur(90px);
   right: -150px;
   top: -210px;
   opacity: .6
}

.cta-inner {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.cta h2 {
   font: 800 50px/1.05 Manrope;
   max-width: 650px;
   letter-spacing: -.04em;
   margin: 0
}

footer {
   background: #17151b;
   color: #fff;
   padding: 40px 0 24px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   gap: 50px
}

.foot-links {
   display: flex;
   flex-direction: column;
   gap: 20px;
   text-align: left;
   /* border: 1px solid #302d34; */
   border-radius: 12px;
   padding: 0px 28px;
   /* background: rgba(255, 255, 255, 0.02) */
}

.foot-group {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.foot-group-info {
   display: flex;
   flex-direction: column;
   gap: 10px
}


.foot-brand p {
   color: #aaa5ae;
   max-width: 280px;
   font-size: 13px;
   margin-top: 18px
}

.footer-grid h4 {
   margin-top: 0
}

.footer-grid a {
   color: #b7b2bc;
   font-size: 13px;
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.foot-icon {
   width: 28px;
   height: 28px;
   object-fit: contain
}

.foot-qr {
   width: 140px;
   height: 140px;
   object-fit: contain;
   border-radius: 8px;
   display: block;
   background: transparent
}

.foot-qr.breathing {
   animation: qrBreathe 1s ease-in-out 1
}

@keyframes qrBreathe {
   0%, 100% { transform: translate(0, 0) rotate(0) }
   10% { transform: translate(-8px, -2px) rotate(-3deg) }
   20% { transform: translate(8px, 2px) rotate(3deg) }
   30% { transform: translate(-6px, -1px) rotate(-2deg) }
   40% { transform: translate(6px, 1px) rotate(2deg) }
   50% { transform: translate(-4px, 0) rotate(-1deg) }
   60% { transform: translate(4px, 0) rotate(1deg) }
   70% { transform: translate(-2px, 0) rotate(-0.5deg) }
   80% { transform: translate(2px, 0) rotate(0.5deg) }
   90% { transform: translate(-1px, 0) rotate(0) }
}

.foot-qr-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px
}

.foot-qr-wrap span {
   font-size: 14px;
   color: #b7b2bc
}

.footer-grid .brand {
   color: #fff;
   font-size: 24px
}

.copyright {
   margin-top: 50px;
   padding-top: 22px;
   border-top: 1px solid #302d34;
   color: #8e8992;
   font-size: 11px;
   display: flex;
   justify-content: space-between
}

/* World Map Tech UI */
.floating-ui.world-map-ui {
   background: transparent;
   border: none;
   box-shadow: none;
   border-radius: 0;
   padding: 0;
   overflow: visible;
}

.floating-ui.world-map-ui::before {
   display: none
}

.tk-dots {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   opacity: .55;
}

.world-map {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.world-map .continents path {
   transition: fill .3s ease
}

.world-map .highlight-regions path {
   mix-blend-mode: screen
}

.world-map .markers .marker-group {
   transform-box: fill-box
}

.breathing-grid {
   position: absolute;
   inset: 0;
   z-index: 3;
   pointer-events: none;
}

.bg-item {
   position: absolute;
   animation: breathe 4s ease-in-out infinite;
   animation-delay: var(--delay, 0s);
   pointer-events: auto;
}

.bg-item:nth-child(odd) {
   animation-duration: 4.5s
}

.bg-item:nth-child(3n) {
   animation-duration: 5s
}

.bg-item:nth-child(5n) {
   animation-duration: 3.5s
}

.bg-item:nth-child(7n) {
   animation-duration: 6s
}

@keyframes breathe {

   0%,
   100% {
      transform: translateY(0) translateX(0) scale(1) rotate(0deg);
      filter: brightness(1);
   }

   25% {
      transform: translateY(-54px) translateX(18px) scale(1.18) rotate(-3deg);
      filter: brightness(1.45);
   }

   50% {
      transform: translateY(12px) translateX(-12px) scale(.91) rotate(3deg);
      filter: brightness(.7);
   }

   75% {
      transform: translateY(-30px) translateX(9px) scale(1.09) rotate(-1.5deg);
      filter: brightness(1.15);
   }
}

.bg-text {
   display: inline-block;
   padding: 8px 16px;
   background: rgba(13, 18, 37, .85);
   backdrop-filter: blur(10px);
   border: 1.5px solid rgba(0, 229, 255, .35);
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   color: #e4e0f0;
   white-space: nowrap;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 0 12px rgba(0, 229, 255, .1);
   transition: all .3s ease;
}

.bg-item:hover .bg-text {
   background: rgba(104, 86, 247, .95);
   color: #fff;
   border-color: rgba(0, 229, 255, .6);
   box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 20px rgba(104, 86, 247, .4);
   transform: scale(1.08);
}

@media(max-width:900px) {
   .nav-links {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 20px;
      font-size: 13px;
      padding: 0 4px;
      flex-shrink: 1;
      min-width: 0;
      white-space: nowrap;
   }
   .nav-links::-webkit-scrollbar { display: none; }
   .nav-links a { flex-shrink: 0; }

   .menu {
      display: none;
   }

   .hero {
      padding-top: 65px
   }

   .dash-grid {
      grid-template-columns: 1fr
   }

   .sidebar {
      display: none
   }

   .data-table-card {
      overflow-x: auto
   }

   .data-table {
      min-width: 700px
   }

   .commission-banner {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start
   }

   .commission-amount {
      align-self: flex-end
   }

   .feature-grid.three,
   .split,
   .split.reverse,
   .platform-grid,
   .case-card,
   .faq-wrap {
      grid-template-columns: 1fr
   }

   .feature-grid.three {
      grid-template-columns: 1fr 1fr
   }

   .feature-card.large {
      grid-column: 1/-1
   }

   .floating-ui {
      min-height: 470px
   }

   .split-copy h2,
   .faq-wrap h2 {
      text-align: center;
      font-size: 42px
   }

   .split-copy .section-kicker,
   .faq-wrap .section-kicker {
      text-align: center
   }

   .section-sub.left {
      text-align: center
   }

   .platform-grid {
      gap: 25px
   }

   .command-grid {
      grid-template-columns: repeat(4, 1fr)
   }

   .pricing-grid {
      grid-template-columns: 1fr
   }

   .merchant-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .cta-inner {
      flex-direction: column;
      text-align: center;
      gap: 26px
   }

   .cta h2 {
      font-size: 42px
   }

   .faq-wrap {
      gap: 30px
   }

   .bg-text {
      font-size: 11px;
      padding: 6px 12px
   }
}

@media(max-width:620px) {
   .container {
      width: min(100% - 28px, 1160px)
   }

   .nav {
      height: 66px
   }

   .btn-sm {
      display: none
   }

   h1 {
      font-size: 46px
   }

   .hero-sub {
      font-size: 15px
   }

   .hero-actions {
      flex-direction: column
   }

   .dashboard-shell {
      padding: 7px
   }

   .dash-main {
      padding: 12px
   }

   .metrics {
      grid-template-columns: 1fr
   }

   .charts {
      grid-template-columns: 1fr
   }

   .donut-card {
      display: none
   }

   .logo-strip {
      justify-content: center
   }

   .section {
      padding: 78px 0
   }

   .section h2 {
      font-size: 38px
   }

   .feature-grid.three {
      grid-template-columns: 1fr
   }

   .feature-card.large {
      grid-column: auto
   }

   .split-copy h2,
   .faq-wrap h2 {
      font-size: 38px
   }

   .floating-ui {
      min-height: 430px
   }

   .contact-card {
      width: 75%
   }

   .stat-card {
      width: 65%;
      right: 14px
   }

   .payment-card {
      left: 24px
   }

   .case-copy {
      padding: 32px 24px
   }

   .case-copy>p {
      font-size: 21px
   }

   .case-stats {
      grid-template-columns: 1fr
   }

   .command-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 8px
   }

   .command-grid>div {
      padding: 12px 8px;
      font-size: 34px;
      align-items: center;
      text-align: center
   }

   .command-grid span {
      font-size: 12px;
      margin-top: 8px
   }

   .pricing-grid {
      margin-top: 30px
   }

   .merchant-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .enterprise {
      align-items: flex-start;
      gap: 18px;
      flex-direction: column
   }

   .cta h2 {
      font-size: 38px
   }

   .footer-grid {
      grid-template-columns: 1fr
   }

   .copyright {
      flex-direction: column;
      gap: 8px
   }

   .bg-text {
      font-size: 10px;
      padding: 5px 10px;
      border-radius: 14px
   }

   .bg-item {
      animation-duration: 3s
   }
}

/* =========================
   Motion system
   ========================= */
:root {
   --ease-out: cubic-bezier(.22, 1, .36, 1);
   --ease-soft: cubic-bezier(.2, .8, .2, 1)
}

html {
   scroll-padding-top: 90px
}

body {
   overflow-x: hidden
}

.nav-wrap {
   transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease
}

.nav-wrap.is-scrolled {
   background: rgba(255, 255, 255, .94);
   box-shadow: 0 10px 35px rgba(36, 31, 54, .08);
   border-color: rgba(226, 222, 232, .9)
}

/* entrance */
.reveal {
   opacity: 0;
   transform: translate3d(0, 34px, 0) scale(.985);
   transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
   will-change: opacity, transform
}

.reveal.from-left {
   transform: translate3d(-42px, 0, 0)
}

.reveal.from-right {
   transform: translate3d(42px, 0, 0)
}

.reveal.zoom {
   transform: scale(.94)
}

.reveal.is-visible {
   opacity: 1;
   transform: translate3d(0, 0, 0) scale(1)
}

.reveal[data-delay="1"] {
   transition-delay: .08s
}

.reveal[data-delay="2"] {
   transition-delay: .16s
}

.reveal[data-delay="3"] {
   transition-delay: .24s
}

.reveal[data-delay="4"] {
   transition-delay: .32s
}

.reveal[data-delay="5"] {
   transition-delay: .4s
}

/* hero load-in */
.hero .eyebrow,
.hero h1,
.hero-sub,
.hero-actions,
.dashboard-shell,
.trusted,
.logo-strip {
   opacity: 0;
   transform: translateY(26px);
   animation: heroIn .9s var(--ease-out) forwards
}

.hero h1 {
   animation-delay: .12s
}

.hero-sub {
   animation-delay: .22s
}

.hero-actions {
   animation-delay: .32s
}

.dashboard-shell {
   animation-delay: .45s
}

.trusted {
   animation-delay: .62s
}

.logo-strip {
   animation-delay: .68s
}

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

.hero-orb {
   animation: orbDrift 9s ease-in-out infinite alternate
}

.orb-b {
   animation-duration: 12s;
   animation-direction: alternate-reverse
}

@keyframes orbDrift {
   0% {
      transform: translate3d(0, 0, 0) scale(1)
   }

   100% {
      transform: translate3d(42px, -18px, 0) scale(1.08)
   }
}

.dashboard-shell {
   transform-origin: center top;
   will-change: transform
}

.dashboard-shell.float-on {
   animation: heroIn .9s var(--ease-out) .45s forwards, dashboardFloat 6s ease-in-out 1.4s infinite
}

@keyframes dashboardFloat {

   0%,
   100% {
      transform: translateY(0) rotateX(0)
   }

   50% {
      transform: translateY(-9px) rotateX(.45deg)
   }
}

/* chart motion */
.chart-card svg path:last-child {
   stroke-dasharray: 1200;
   stroke-dashoffset: 1200;
   animation: drawLine 2.3s var(--ease-out) 1s forwards
}

@keyframes drawLine {
   to {
      stroke-dashoffset: 0
   }
}

.donut {
   transform: scale(.84) rotate(-30deg);
   opacity: .4;
   animation: donutIn 1.2s var(--ease-out) 1.1s forwards
}

@keyframes donutIn {
   to {
      transform: scale(1) rotate(0);
      opacity: 1
   }
}

.bars i,
.summary-bars i {
   transform-origin: bottom;
   animation: barGrow 1.2s var(--ease-out) both;
   animation-play-state: paused
}

.is-visible .bars i,
.is-visible .summary-bars i,
.floating-ui.in-view .bars i,
.floating-ui.in-view .summary-bars i {
   animation-play-state: running
}

@keyframes barGrow {
   from {
      transform: scaleY(.05);
      opacity: .35
   }

   to {
      transform: scaleY(1);
      opacity: 1
   }
}

/* cards */
.feature-card,
.price-card,
.command-grid>div,
.enterprise,
.case-card {
   transition: transform .35s var(--ease-soft), box-shadow .35s ease, border-color .35s ease, background .35s ease
}

.feature-card:hover,
.price-card:hover,
.command-grid>div:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 55px rgba(54, 47, 77, .12);
   border-color: #d8d2e6
}

.feature-card:hover .icon-box,
.command-grid>div:hover {
   animation: microPulse .7s var(--ease-soft)
}

@keyframes microPulse {
   50% {
      transform: translateY(-3px) scale(1.03)
   }
}

.case-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 28px 70px rgba(41, 34, 61, .14)
}

/* floating interface cards */
.ui-card {
   will-change: transform;
   transition: box-shadow .3s ease
}

.floating-ui.in-view .contact-card {
   animation: floatA 5.2s ease-in-out infinite
}

.floating-ui.in-view .stat-card {
   animation: floatB 5.8s ease-in-out .25s infinite
}

.floating-ui.in-view .payment-card {
   animation: floatC 5.4s ease-in-out .5s infinite
}

.insight-ui.in-view .ui-card:nth-child(1) {
   animation: floatA 5.5s ease-in-out infinite
}

.insight-ui.in-view .ui-card:nth-child(2) {
   animation: floatB 6s ease-in-out .2s infinite
}

.insight-ui.in-view .ui-card:nth-child(3) {
   animation: floatC 5.4s ease-in-out .35s infinite
}

.insight-ui.in-view .ui-card:nth-child(4) {
   animation: floatA 6.2s ease-in-out .55s infinite
}

@keyframes floatA {

   0%,
   100% {
      transform: translate3d(0, 0, 0) rotate(0)
   }

   50% {
      transform: translate3d(0, -10px, 0) rotate(.35deg)
   }
}

@keyframes floatB {

   0%,
   100% {
      transform: translate3d(0, 0, 0)
   }

   50% {
      transform: translate3d(7px, -8px, 0)
   }
}

@keyframes floatC {

   0%,
   100% {
      transform: translate3d(0, 0, 0)
   }

   50% {
      transform: translate3d(-7px, -7px, 0)
   }
}

.integration-cloud span {
   animation: iconOrbit 4.8s ease-in-out infinite
}

.integration-cloud span:nth-child(2) {
   animation-delay: .35s
}

.integration-cloud span:nth-child(3) {
   animation-delay: .7s
}

.integration-cloud span:nth-child(4) {
   animation-delay: 1.05s
}

.integration-cloud span:nth-child(5) {
   animation-delay: 1.4s
}

@keyframes iconOrbit {

   0%,
   100% {
      transform: translateY(0) rotate(0)
   }

   50% {
      transform: translateY(-7px) rotate(2deg)
   }
}

/* logo marquee */
.logo-strip {
   position: relative;
   white-space: nowrap;
   flex-wrap: nowrap;
   overflow: hidden;
   justify-content: flex-start;
   perspective: 800px;
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

.marquee-track {
   display: flex;
   gap: 48px;
   width: max-content;
   animation: marqueeScroll 18s linear infinite;
   transform-style: preserve-3d
}

.logo-strip .marquee-track span {
   flex: 0 0 auto;
   font-weight: 800;
   font-size: 18px;
   color: #6f6a76;
   padding: 14px 32px;
   transform: translateZ(0);
   transition: transform .3s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   line-height: 1
}

.brand-ico {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
   object-fit: contain;
   display: block
}

.logo-strip .marquee-track span:hover {
   transform: translateZ(20px) scale(1.05)
}

@keyframes marqueeScroll {
   0% {
      transform: translateX(0)
   }

   100% {
      transform: translateX(-50%)
   }
}

@keyframes logoWave {
   50% {
      transform: translateY(-3px);
      opacity: .82
   }
}

/* buttons */
.btn {
   position: relative;
   overflow: hidden;
   isolation: isolate
}

.btn:before {
   content: "";
   position: absolute;
   inset: -2px;
   z-index: -1;
   background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
   transform: translateX(-120%);
   transition: transform .7s var(--ease-out)
}

.btn:hover:before {
   transform: translateX(120%)
}

.btn:active {
   transform: translateY(0) scale(.98)
}

/* tabs and faq */
.tabs button {
   transition: all .3s var(--ease-soft)
}

.tabs button:hover {
   transform: translateY(-2px);
   border-color: #cfc9dc
}

.tabs button.active {
   transform: translateY(-2px);
   box-shadow: 0 10px 22px rgba(28, 25, 33, .12)
}

.faq-list details {
   overflow: hidden;
   transition: background .3s ease, padding .3s ease
}

.faq-list details[open] {
   background: #faf9fc;
   padding-left: 14px;
   padding-right: 14px;
   border-radius: 12px
}

.faq-list details p {
   animation: faqOpen .38s var(--ease-out)
}

@keyframes faqOpen {
   from {
      opacity: 0;
      transform: translateY(-7px)
   }

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

/* decorative movement */
.cta-orb {
   animation: ctaGlow 7s ease-in-out infinite alternate
}

@keyframes ctaGlow {
   to {
      transform: translate(-90px, 60px) scale(1.16)
   }
}

.progress i {
   transform-origin: left;
   transform: scaleX(0);
   transition: transform 1.25s var(--ease-out)
}

.in-view .progress i {
   transform: scaleX(1)
}

.spark,
.tiny-chart {
   transform-origin: left bottom;
   transform: scaleX(.05);
   opacity: .2;
   transition: transform 1.2s var(--ease-out), opacity .6s ease
}

.in-view .spark,
.in-view .tiny-chart,
.floating-ui.in-view .spark,
.floating-ui.in-view .tiny-chart {
   transform: scaleX(1);
   opacity: 1
}

/* pointer tilt */
.tilt {
   transform-style: preserve-3d;
   transition: transform .22s ease-out
}

.tilt .ui-card {
   transform: translateZ(18px)
}

/* World Map Section */
.floating-ui.world-map-ui {
   background: linear-gradient(145deg, #fdfcff, #f5f3fb);
   border: 1px solid #e8e4f2;
   box-shadow: 0 30px 70px rgba(104, 86, 247, .08);
}

.world-map {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.world-map .continent {
   transition: opacity .3s ease;
}

.world-map .highlight-region {
   animation: regionPulse 3.5s ease-in-out infinite;
}

.world-map .highlight-region:nth-child(2n) {
   animation-delay: .5s;
}

.world-map .highlight-region:nth-child(3n) {
   animation-delay: 1s;
}

.world-map .highlight-region:nth-child(4n) {
   animation-delay: 1.5s;
}

@keyframes regionPulse {

   0%,
   100% {
      opacity: .45
   }

   50% {
      opacity: .85
   }
}

.world-map .map-markers .marker circle {
   transform-origin: center;
   transform-box: fill-box;
}

.world-map .map-connections line {
   stroke-dashoffset: 0;
}

.breathing-grid {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
}

.bg-item {
   position: absolute;
   animation: breathe 4s ease-in-out infinite;
   animation-delay: var(--delay, 0s);
   pointer-events: auto;
}

.bg-item:nth-child(odd) {
   animation-duration: 4.5s;
}

.bg-item:nth-child(3n) {
   animation-duration: 5s;
}

.bg-item:nth-child(5n) {
   animation-duration: 3.5s;
}

@keyframes breathe {

   0%,
   100% {
      transform: translateY(0) scale(1);
      filter: brightness(1);
   }

   30% {
      transform: translateY(-6px) scale(1.03);
      filter: brightness(1.1);
   }

   60% {
      transform: translateY(3px) scale(.98);
      filter: brightness(.95);
   }
}

.bg-text {
   display: inline-block;
   padding: 8px 16px;
   background: rgba(255, 255, 255, .85);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(104, 86, 247, .2);
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   color: #3d3557;
   white-space: nowrap;
   box-shadow: 0 8px 24px rgba(104, 86, 247, .1);
   transition: all .3s ease;
}

.bg-item:hover .bg-text {
   background: rgba(104, 86, 247, .95);
   color: #fff;
   border-color: transparent;
   box-shadow: 0 12px 30px rgba(104, 86, 247, .3);
   transform: scale(1.05);
}

@media(max-width:900px) {
   .bg-text {
      font-size: 11px;
      padding: 6px 12px
   }

   .bg-item:nth-child(3n) .bg-text {
      font-size: 10px
   }
}

@media(max-width:620px) {
   .floating-ui.world-map-ui {
      min-height: 420px;
      padding: 16px
   }

   .bg-text {
      font-size: 10px;
      padding: 5px 10px;
      border-radius: 14px
   }

   .bg-item {
      animation-duration: 3s
   }

   .bg-item:nth-child(odd) {
      animation-duration: 3.5s
   }

   .bg-item:nth-child(3n) {
      animation-duration: 4s
   }
}

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

   *,
   *:before,
   *:after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important
   }

   .reveal {
      opacity: 1 !important;
      transform: none !important
   }
}

/* =========================
   Additional Responsive Breakpoints
   ========================= */

@media (min-width: 1200px) {
   .container { width: min(1160px, calc(100% - 60px)) }
   .hero { padding: 110px 0 90px }
}

/* Tablet landscape 768px */
@media (max-width: 768px) {
   html { scroll-padding-top: 64px }
   body { padding-top: 64px }

   .nav { height: 64px; gap: 10px }
   .brand { font-size: 21px; flex-shrink: 0 }
   .brand-logo { height: 56px }
   .nav-links {
      gap: 16px;
      font-size: 12px;
      padding: 0 2px;
   }

   .dashboard-shell { padding: 6px; border-radius: 14px; width: 100%; max-width: 100%; box-sizing: border-box }
   .dash-topbar { height: 46px; gap: 8px; padding: 0 8px }
   .mini-brand { width: 96px; font-size: 11px; flex-shrink: 0 }
   .searchbar { max-width: 150px; padding: 6px 10px; font-size: 10px }
   .avatar { width: 26px; height: 26px; font-size: 9px }
   .top-icons { gap: 6px; font-size: 11px }

   .dash-grid { grid-template-columns: 1fr; min-height: auto }
   .sidebar { display: none }
   .dash-main { padding: 12px }

   .metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 }
   .metrics div { padding: 10px; border-radius: 9px }
   .metrics span { font-size: 10px }
   .metrics strong { font-size: 16px }
   .metrics-4 { grid-template-columns: repeat(3, 1fr); gap: 8px }
   .metrics-4 div { padding: 8px }
   .metrics-4 strong { font-size: 16px }

   .commission-banner { padding: 12px 14px; border-radius: 10px; margin: 10px 0; gap: 10px; flex-wrap: wrap }
   .commission-label { font-size: 13px }
   .commission-desc { font-size: 10px }
   .commission-amount { font-size: 22px }

   .data-table-card { padding: 10px; border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch }
   .data-table { min-width: 640px; font-size: 10px }
   .data-table th, .data-table td { padding: 7px 5px }
   .chart-head { font-size: 11px }

   h1 { font-size: clamp(36px, 8vw, 52px) }
   .hero-sub { font-size: 15px }
   .orb-a { width: 280px; height: 280px }
   .orb-b { width: 320px; height: 320px }
   .section { padding: 60px 0 }
   .section h2 { font-size: 34px }
   .merchant-grid { grid-template-columns: repeat(3, 1fr) }
   .merchant-item svg { max-width: 44px }
   .footer-grid { grid-template-columns: 1fr; gap: 30px }
   .foot-qr { width: 110px; height: 110px }
   .foot-qrs { gap: 16px }
}

/* Small mobile 480px */
@media (max-width: 480px) {
   html { scroll-padding-top: 58px }
   body { padding-top: 58px }

   .container { width: calc(100% - 20px) }
   .nav { height: 58px }
   .brand { font-size: 18px; gap: 6px }
   .brand-logo { height: 44px }

   .dashboard-shell { padding: 4px; border-radius: 10px; width: 100%; max-width: 100%; box-sizing: border-box }
   .dash-topbar { height: 40px; gap: 4px; padding: 0 6px }
   .mini-brand { width: auto; font-size: 10px; flex-shrink: 0 }
   .searchbar { display: none }
   .avatar { width: 22px; height: 22px; font-size: 8px }
   .top-icons { gap: 4px; font-size: 10px; flex-shrink: 0 }

   .dash-main { padding: 10px }
   .dash-title small { font-size: 9px }
   .dash-title h3 { font-size: 15px; margin: 0 }
   .dash-title button { display: none }

   .metrics { grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 }
   .metrics div { padding: 8px 6px; border-radius: 8px }
   .metrics span { font-size: 9px }
   .metrics strong { font-size: 14px }
   .metrics-4 { grid-template-columns: repeat(2, 1fr); gap: 6px }
   .metrics-4 div { padding: 8px 6px }
   .metrics-4 strong { font-size: 14px }

   .commission-banner { padding: 10px 12px; border-radius: 8px; margin: 8px 0; flex-direction: column; gap: 6px; align-items: stretch }
   .commission-info { gap: 2px }
   .commission-label { font-size: 12px }
   .commission-desc { font-size: 9px; line-height: 1.3; white-space: normal; word-break: break-all }
   .commission-amount { font-size: 18px; text-align: right }

   .data-table-card { padding: 8px; border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px }
   .data-table { min-width: 560px; font-size: 10px }
   .data-table th { padding: 7px 4px; font-size: 9px }
   .data-table td { padding: 7px 4px; font-size: 10px }
   .chart-head { font-size: 11px }

   h1 { font-size: 34px; line-height: 1.05 }
   .hero-sub { font-size: 13px }
   .hero-actions { flex-direction: column; gap: 12px; margin: 20px 0 30px }
   .hero-actions .btn { width: 100%; padding: 12px 16px; font-size: 13px }
   .orb-a { width: 200px; height: 200px }
   .orb-b { width: 220px; height: 220px }
   .section { padding: 48px 0 }
   .section h2 { font-size: 28px; line-height: 1.1 }
   .merchant-grid { grid-template-columns: 1fr 1fr; gap: 8px }
   .merchant-item { padding: 10px 6px }
   .merchant-item svg { max-width: 36px }
   .merchant-item span { font-size: 11px }
   .foot-qr { width: 90px; height: 90px }
   .foot-qrs { flex-direction: column; gap: 12px }
   .cta h2 { font-size: 26px }

   .pricing-compare { padding: 8px 8px; border-radius: 12px }
   .compare-header { padding-bottom: 6px }
   .compare-col-dim { font-size: 10px; padding: 3px 4px }
   .compare-col { padding: 2px 3px; border-radius: 6px }
   .compare-col .plan-name { font-size: 10px }
   .compare-col .plan-price-tag { font-size: 7px }
   .compare-col .plan-price-value { font-size: 16px }
   .compare-row { padding: 2px 0 }
   .compare-row-label { font-size: 9px; padding: 2px 4px }
   .compare-cell { font-size: 9px; padding: 2px 3px; line-height: 1.25 }
   .value-tag { font-size: 8px; padding: 0 3px }
}

/* Ultra small 360px */
@media (max-width: 360px) {
   .container { width: calc(100% - 14px) }

   .dashboard-shell { padding: 3px; border-radius: 8px; width: 100%; max-width: 100%; box-sizing: border-box }
   .dash-topbar { height: 38px; gap: 4px; padding: 0 5px }
   .mini-brand { width: auto; font-size: 9px; flex-shrink: 0 }
   .avatar { width: 20px; height: 20px; font-size: 7px }
   .top-icons { gap: 3px; font-size: 9px; flex-shrink: 0 }

   .dash-main { padding: 8px }
   .dash-title h3 { font-size: 14px; margin: 0 }
   .dash-title small { font-size: 8px }

   .metrics { grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0 }
   .metrics div { padding: 6px 5px; border-radius: 6px }
   .metrics span { font-size: 8px }
   .metrics strong { font-size: 12px }
   .metrics-4 { grid-template-columns: repeat(2, 1fr); gap: 5px }
   .metrics-4 div { padding: 6px 5px }
   .metrics-4 strong { font-size: 12px }

   .commission-banner { padding: 8px 10px; margin: 6px 0; border-radius: 6px }
   .commission-label { font-size: 11px }
   .commission-desc { font-size: 8px; line-height: 1.25; white-space: normal; word-break: break-all }
   .commission-amount { font-size: 16px }

   .data-table-card { padding: 6px; margin-top: 6px; border-radius: 6px }
   .data-table { min-width: 480px; font-size: 9px }
   .data-table th, .data-table td { padding: 5px 3px; font-size: 9px }

   h1 { font-size: 28px }
   .hero-sub { font-size: 12px }
   .section h2 { font-size: 24px }
   .merchant-grid { grid-template-columns: 1fr }
   .foot-qr { width: 80px; height: 80px }
   .cta h2 { font-size: 22px }

   .pricing-compare { padding: 6px 4px; border-radius: 10px }
   .compare-header { padding-bottom: 4px }
   .compare-col-dim { font-size: 9px; padding: 2px 3px }
   .compare-col { padding: 1px 2px; border-radius: 5px }
   .compare-col .plan-name { font-size: 9px; margin-bottom: 1px }
   .compare-col .plan-price-tag { font-size: 6px }
   .compare-col .plan-price-value { font-size: 14px }
   .compare-row { padding: 1px 0 }
   .compare-row-label { font-size: 8px; padding: 2px 3px }
   .compare-cell { font-size: 8px; padding: 2px 2px; line-height: 1.2 }
   .value-tag { font-size: 7px; padding: 0 2px }
}

/* ===== TIKTOK导航：同页内嵌合并视图（无跳转） ===== */
.nav-links a.nav-active {
   color: var(--purple, #7c3aed);
   font-weight: 700;
}

.embed-view {
   display: none;
}

body.tiktok-mode main,
body.tiktok-mode footer {
   display: none !important;
}

body.tiktok-mode .embed-view {
   display: block;
   position: fixed;
   top: 78px;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 900;
   background: #f5f6fa;
}

.embed-view iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   background: #f5f6fa;
}

@media (max-width: 768px) {
   body.tiktok-mode .embed-view { top: 64px }
}

@media (max-width: 480px) {
   body.tiktok-mode .embed-view { top: 58px }
}