:root {
    --bg: #07040d;
    --panel: rgba(18, 9, 28, .72);
    --panel2: rgba(26, 12, 39, .86);
    --line: rgba(233, 160, 255, .18);
    --text: #f8f3fb;
    --muted: #b8adbf;
    --pink: #ff0bc7;
    --violet: #8d2cff;
    --blue: #7867ff;
    --radius: 28px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, sans-serif;
    overflow-x: hidden
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -5;
    background:
        radial-gradient(1200px 700px at 78% -8%, rgba(150, 40, 235, .30), transparent 60%),
        radial-gradient(900px 620px at 12% 6%, rgba(95, 24, 180, .26), transparent 58%),
        radial-gradient(700px 500px at 88% 42%, rgba(255, 10, 199, .12), transparent 55%),
        radial-gradient(1000px 900px at 50% 108%, rgba(120, 30, 210, .18), transparent 60%),
        #030109
}

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

button {
    font: inherit
}

.section {
    position: relative;
    padding: 110px max(5vw, 28px)
}

.center {
    text-align: center;
    max-width: 1050px;
    margin: 0 auto 55px
}

.kicker {
    display: block;
    color: #d8c7df;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 18px
}

h1,
h2,
h3,
p {
    margin-top: 0
}

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

h2 {
    font-size: clamp(44px, 5.4vw, 84px);
    line-height: .98;
    margin-bottom: 22px
}

h2 em,
h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #bf78ff, var(--pink));
    -webkit-background-clip: text;
    color: transparent
}

.center>p,
.split-head>p {
    color: var(--muted);
    line-height: 1.75
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.nebula {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -3;
    opacity: .18;
    pointer-events: none
}

.n1 {
    width: 550px;
    height: 550px;
    background: #5d1eff;
    left: -180px;
    top: 12vh
}

.n2 {
    width: 480px;
    height: 480px;
    background: #ff0bbf;
    right: -160px;
    top: 38vh
}

#cosmos {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none
}

.cursor-glow {
    position: fixed;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(187, 57, 255, .12), transparent 68%);
    z-index: 2;
    pointer-events: none
}

.promo-bar {
    position: relative;
    height: 42px;
    background: linear-gradient(90deg, #5311ca, #ec0bb4);
    display: flex;
    align-items: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    z-index: 100
}

.promo-track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: ticker 34s linear infinite
}

.promo-track i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff
}

.promo-timer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    background: rgba(0, 0, 0, .25);
    height: 100%;
    white-space: nowrap
}

.promo-timer small {
    font-size: 9px
}

.header {
    height: 78px;
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    padding: 0 max(4vw, 24px);
    background: rgba(7, 4, 13, .62);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line)
}

.logo img {
    width: 180px
}

.header nav {
    display: flex;
    gap: 28px;
    margin: auto
}

.header nav a {
    color: #d8cedd;
    font-size: 14px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 17px 25px;
    border-radius: 12px;
    background: linear-gradient(100deg, #8d2cff, var(--pink));
    font-weight: 800;
    box-shadow: 0 18px 50px rgba(208, 17, 225, .25);
    border: 0
}

.btn.small {
    padding: 13px 18px
}

.menu {
    display: none
}

.hero {
    min-height: calc(100vh - 120px);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 80px max(5vw, 28px);
    overflow: hidden
}

.hero-motion {
    position: absolute;
    inset: -6% -6% -6% 18%;
    background: radial-gradient(closest-side at 68% 46%, rgba(120, 40, 210, .30), transparent 72%);
    opacity: .9;
    mix-blend-mode: screen;
    filter: saturate(1.15) contrast(1.02);
    animation: heroGlow 7s ease-in-out infinite alternate
}
.hero-motion:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side at 62% 45%, rgba(190, 70, 255, .28), transparent 70%);
    mix-blend-mode: screen;
    animation: heroPulse 5.5s ease-in-out infinite alternate
}

.hero-motion:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 4, 13, .92) 0%, rgba(7, 4, 13, .48) 42%, rgba(7, 4, 13, .1) 72%), linear-gradient(0deg, #07040d 0%, transparent 25%)
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, black 30%, transparent)
}

.hero-copy {
    position: relative;
    z-index: 5;
    max-width: 680px
}

.pill {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: rgba(255, 255, 255, .045);
    font-size: 12px
}

.pill b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 12px var(--pink)
}

h1 {
    font-size: clamp(70px, 9vw, 138px);
    line-height: .82;
    margin: 30px 0
}

.hero-copy>p {
    max-width: 570px;
    color: #c7bdcc;
    font-size: 18px;
    line-height: 1.7
}

.hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px
}

.video-btn {
    border: 0;
    background: transparent;
    color: white
}

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

.hero-stats div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(15, 8, 24, .58);
    backdrop-filter: blur(12px)
}

.hero-stats strong {
    display: block;
    font-size: 22px
}

.hero-stats span {
    font-size: 11px;
    color: var(--muted)
}

.hero-scene {
    position: relative;
    height: 720px
}

.portal {
    position: absolute;
    left: 13%;
    top: 8%;
    width: 75%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 51, 255, .34), rgba(61, 13, 97, .12) 45%, transparent 68%);
    filter: drop-shadow(0 0 50px rgba(217, 42, 255, .42))
}

.portal span {
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(241, 69, 255, .36);
    border-radius: 50%;
    animation: spin 16s linear infinite
}

.portal span:nth-child(2) {
    inset: 20%;
    animation-direction: reverse
}

.character-rig {
    position: absolute;
    left: 21%;
    bottom: -9%;
    width: 58%;
    z-index: 3
}

.character-rig img {
    width: 100%;
    display: block
}

.character-glow {
    position: absolute;
    filter: blur(10px);
    opacity: .65
}

.character-light {
    position: absolute;
    left: 33%;
    top: 7%;
    width: 34%;
    height: 20%;
    background: radial-gradient(circle, #fff8, transparent 68%);
    mix-blend-mode: screen
}

.hero-coins {
    position: absolute;
    width: 32%;
    right: 2%;
    top: 7%;
    z-index: 4;
    filter: drop-shadow(0 0 25px #db1df3)
}

.payout-card {
    position: absolute;
    z-index: 5;
    width: 190px;
    padding: 16px;
    border: 1px solid rgba(255, 91, 232, .42);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37, 13, 55, .9), rgba(13, 7, 22, .82));
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35)
}

.payout-card strong {
    font-size: 22px
}

.payout-card span,
.payout-card small,
.payout-card i {
    display: block;
    margin-top: 7px;
    font-size: 9px
}

.payout-card small {
    color: #ff6cdd
}

.payout-card i {
    text-align: right;
    color: #d2c5d8
}

.p1 {
    left: 0;
    top: 22%
}

.p2 {
    right: 0;
    top: 30%
}

.p3 {
    left: 8%;
    bottom: 16%
}

.p4 {
    right: 5%;
    bottom: 10%
}

.logo-ticker,
.certificate-section {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(10, 5, 16, .62);
    overflow: hidden
}

.logo-ticker p {
    text-align: center;
    font-size: 10px;
    letter-spacing: .2em;
    color: #a899af;
    padding: 20px 0 4px
}

.ticker-viewport {
    overflow: hidden
}

.ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 50px;
    padding: 24px 0;
    animation: ticker 32s linear infinite
}

.ticker-track span {
    font-weight: 800;
    color: #d8cfe1;
    letter-spacing: .05em
}

.ticker-track i {
    width: 7px;
    height: 7px;
    background: var(--violet);
    transform: rotate(45deg)
}

@keyframes ticker {
    to {
        transform: translateX(-25%)
    }
}

.certificate-section {
    padding: 70px 0
}

.certificate-head,
.split-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 35px;
    padding: 0 max(4vw, 24px)
}

.certificate-head h2 {
    font-size: 48px
}

.live-pulse {
    font-size: 12px
}

.live-pulse i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #32f6b0;
    border-radius: 50%;
    box-shadow: 0 0 16px #32f6b0
}

.certificate-marquee {
    overflow: hidden
}

.certificate-track {
    display: flex;
    width: max-content;
    gap: 18px;
    animation: ticker 50s linear infinite
}

.cert-card {
    width: 430px;
    display: grid;
    grid-template-columns: 1fr 125px;
    gap: 15px;
    align-items: center;
    padding: 18px 18px 18px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(56, 15, 66, .8), rgba(16, 8, 25, .8));
    position: relative;
    overflow: hidden
}

.cert-card:before {
    content: "";
    position: absolute;
    inset: -80% auto -80% -20%;
    width: 80px;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, #fff2, transparent);
    animation: shine 4s linear infinite
}

.cert-card img {
    width: 125px
}

.cert-card small,
.cert-card span {
    display: block;
    color: #c8b9ce
}

.cert-card strong {
    display: block;
    font-size: 24px;
    margin: 8px 0
}

.cert-card button {
    grid-column: 1/3;
    background: transparent;
    border: 0;
    color: #ff72dd;
    text-align: left;
    font-size: 10px;
    font-weight: 800
}

.bento {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    gap: 16px
}

.glass {
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(28, 14, 40, .82), rgba(9, 5, 14, .72));
    padding: 30px;
    min-height: 310px;
    position: relative;
    overflow: hidden;
    transition: .35s
}

.glass:hover {
    border-color: #d644ff;
    box-shadow: 0 28px 80px rgba(112, 18, 158, .25)
}

.glass>span,
.card-copy>span {
    color: #ff5bd8;
    font-size: 11px
}

.glass h3 {
    font-size: 26px;
    margin: 28px 0 12px
}

.glass p {
    color: var(--muted);
    line-height: 1.65
}

.bento-main {
    grid-row: span 2;
    min-height: 640px;
    display: flex;
    flex-direction: column
}

.visual-terminal {
    margin-top: 24px;
    flex: 1;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #07050b;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-shadow: inset 0 0 80px rgba(98, 23, 135, .18)
}

.terminal-top {
    position: absolute;
    left: 52px;
    right: 52px;
    bottom: 350px;
    display: flex;
    gap: 6px
}

.terminal-top i {
    width: 8px;
    height: 8px;
    background: var(--pink);
    border-radius: 50%
}

.terminal-top b {
    margin-left: auto;
    font-size: 9px;
    color: #7e7086
}

.visual-terminal svg {
    width: 100%;
    filter: drop-shadow(0 0 12px #ff14cc)
}

.terminal-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

.risk-orbit {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 35px auto 0;
    display: grid;
    place-content: center;
    text-align: center;
    background: conic-gradient(var(--pink) 0 36%, #7d2cff 36% 58%, #241b2e 58%);
    position: relative
}

.risk-orbit:after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #0b0710
}

.risk-orbit b,
.risk-orbit small {
    z-index: 2
}

.risk-orbit b {
    font-size: 34px
}

.speed-core {
    margin: 46px 0 0
}

.speed-core b {
    font-size: 88px;
    background: linear-gradient(#fff, #bf65ff);
    -webkit-background-clip: text;
    color: transparent
}

.speed-core em {
    font-size: 11px
}

.wide {
    grid-column: 2/4;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.asset-orbit {
    position: relative;
    width: 300px;
    height: 260px;
    display: grid;
    place-items: center
}

/* orbit rings that the asset icons ride on */
.asset-orbit:before,
.asset-orbit:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(233, 130, 255, .28);
    transform: translate(-50%, -50%)
}

.asset-orbit:before {
    width: 250px;
    height: 250px;
    animation: spin 26s linear infinite
}

.asset-orbit:after {
    width: 150px;
    height: 150px;
    border-style: solid;
    border-color: rgba(233, 130, 255, .16);
    animation: spin 16s linear infinite reverse
}

.asset-orbit>img {
    position: absolute;
    width: 46px;
    height: 46px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(12, 7, 20, .9);
    border: 1px solid rgba(233, 130, 255, .35);
    box-shadow: 0 0 18px rgba(255, 50, 226, .4);
    left: 50%;
    top: 50%;
    transform-origin: center
}

/* each asset sits on a ring and revolves; counter-spin keeps the logo upright */
.asset-orbit>img:nth-child(1) {
    animation: orbit-a 26s linear infinite
}

.asset-orbit>img:nth-child(2) {
    animation: orbit-b 26s linear infinite
}

.asset-orbit>img:nth-child(3) {
    animation: orbit-c 16s linear infinite
}

.orbit-core {
    position: relative;
    z-index: 2;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 25%, #cb58ff, #46145f 48%, #0e0715 75%);
    box-shadow: 0 0 55px #9629d2, inset 0 0 22px rgba(255, 190, 255, .2)
}

.orbit-core:after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(230, 90, 255, .5);
    animation: pulse 3s ease-in-out infinite
}

.orbit-core img {
    width: 50px
}

@keyframes orbit-a {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(125px) rotate(0deg) }
    to   { transform: translate(-50%, -50%) rotate(360deg) translateX(125px) rotate(-360deg) }
}

@keyframes orbit-b {
    from { transform: translate(-50%, -50%) rotate(140deg) translateX(125px) rotate(-140deg) }
    to   { transform: translate(-50%, -50%) rotate(500deg) translateX(125px) rotate(-500deg) }
}

@keyframes orbit-c {
    from { transform: translate(-50%, -50%) rotate(250deg) translateX(75px) rotate(-250deg) }
    to   { transform: translate(-50%, -50%) rotate(610deg) translateX(75px) rotate(-610deg) }
}

.feature-rail {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feature-rail article {
    display: flex;
    gap: 18px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(16, 8, 24, .68)
}

.feature-rail strong {
    font-size: 30px;
    color: #f06ae2
}

.feature-rail h3 {
    margin-bottom: 7px
}

.feature-rail p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5
}

.plan-builder {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    border: 1px solid var(--line);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(13, 7, 20, .8);
    box-shadow: 0 40px 110px rgba(0, 0, 0, .45)
}

.plan-controls,
.plan-summary {
    padding: 38px
}

.control-label {
    font-size: 10px;
    letter-spacing: .18em;
    color: #a99eb4;
    margin: 5px 0 14px
}

.type-tabs,
.size-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.type-tabs button,
.size-tabs button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .035);
    color: #ded4e3;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer
}

.type-tabs button.active,
.size-tabs button.active {
    background: linear-gradient(135deg, #7427ff, #ff0dc8);
    color: #fff;
    border-color: transparent
}

.buyer-scene {
    margin: 24px 0;
    min-height: 220px;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: radial-gradient(circle at 20% 40%, rgba(150, 34, 220, .25), transparent 50%), rgba(255, 255, 255, .02)
}

.mini-character {
    height: 180px;
    position: relative;
    overflow: hidden
}

.mini-character img {
    height: 250px;
    position: absolute;
    left: 22px;
    top: 4px
}

.mini-character .scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ff28d0;
    box-shadow: 0 0 14px #ff28d0;
    animation: scan 3s linear infinite
}

.buyer-scene small {
    color: #ff62d9
}

.buyer-scene p,
.buyer-scene li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5
}

.custom-trust {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025)
}

.custom-trust .check {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #17b893;
    font-weight: 900
}

.custom-trust small {
    display: block;
    color: var(--muted);
    margin-top: 4px
}

.stars {
    margin-left: auto;
    color: #ffc52d;
    letter-spacing: 2px
}

.plan-summary {
    position: relative;
    background: radial-gradient(circle at 95% 0, rgba(255, 12, 199, .18), transparent 42%)
}

.summary-top {
    display: flex;
    justify-content: space-between
}

.selected-type {
    font-weight: 800
}

.discount-badge {
    background: var(--pink);
    padding: 7px 10px;
    border-radius: 99px;
    font-size: 11px
}

.selected-size {
    font: 800 68px/1 Manrope;
    margin: 26px 0 4px
}

.price-row {
    display: flex;
    align-items: end;
    gap: 13px;
    margin: 24px 0
}

.final-price {
    font-size: 50px
}

.original-price {
    font-size: 20px;
    color: #766d7c
}

.save-panel {
    margin-left: auto;
    padding: 12px 16px;
    border: 1px solid #9b38d8;
    border-radius: 14px;
    background: rgba(143, 37, 198, .16)
}

.save-panel small {
    display: block;
    color: #c8b7cf
}

.save-panel b {
    font-size: 24px;
    color: #ff65dd
}

.phase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 22px 0
}

.phase-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
    background: rgba(255, 255, 255, .03)
}

.phase-card h4 {
    margin: 0 0 10px
}

.phase-card div {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
    margin: 6px 0
}

.plan-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0
}

.plan-facts span {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 10px
}

.checkout-link {
    width: 100%
}

.secure-note {
    text-align: center;
    color: #8f8397;
    font-size: 10px;
    margin-top: 14px
}

.split-head strong {
    font-size: 64px
}

.split-head strong small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500
}

.rule-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.rule-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(15, 8, 23, .65)
}

.rule-grid span {
    color: #ff5edb
}

.rule-grid p {
    color: var(--muted)
}

.dashboard {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px;
    align-items: center
}

.dashboard-copy ul {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

.dashboard-copy li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: #cfc3d4
}

.dashboard-stage {
    position: relative;
    min-height: 620px;
    perspective: 1300px
}

.dash-frame {
    position: absolute;
    inset: 30px 0 40px 20px;
    border: 1px solid #8e3ec5;
    border-radius: 26px;
    overflow: hidden;
    background: #09070d;
    display: grid;
    grid-template-columns: 75px 1fr;
    transform: rotateY(-6deg) rotateX(2deg);
    box-shadow: 0 60px 120px rgba(0, 0, 0, .48), 0 0 60px rgba(143, 31, 208, .18)
}

.dash-nav {
    background: #0d0912;
    border-right: 1px solid var(--line);
    padding: 22px 18px
}

.dash-nav img {
    width: 38px
}

.dash-nav i {
    display: block;
    height: 38px;
    border-radius: 10px;
    background: #1f1329;
    margin: 18px 0
}

.dash-content {
    padding: 30px
}

.dash-top {
    display: flex;
    justify-content: space-between
}

.dash-top span {
    color: #3effbd
}

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

.dash-kpis article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025)
}

.dash-kpis small {
    color: var(--muted)
}

.dash-kpis b {
    display: block;
    font-size: 24px;
    margin-top: 8px
}

.dash-chart {
    height: 240px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(rgba(132, 24, 188, .1), transparent)
}

.dash-chart svg {
    width: 100%;
    height: 100%
}

.dash-chart path {
    fill: none;
    stroke: #fb16cd;
    stroke-width: 6;
    filter: drop-shadow(0 0 12px #f816ca)
}

.dash-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px
}

.dash-bottom article {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px
}

.dash-bottom small,
.dash-bottom b {
    display: block
}

.dash-bottom i {
    display: block;
    height: 6px;
    background: #23182c;
    border-radius: 9px;
    margin-top: 12px
}

.dash-bottom em {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7f32ff, #ff13ca);
    border-radius: 9px
}

.dash-float {
    position: absolute;
    padding: 14px 17px;
    border: 1px solid #ab43ee;
    background: rgba(16, 7, 25, .86);
    border-radius: 12px;
    font-weight: 800
}

.dash-float small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    margin-top: 5px
}

.f1 {
    top: 10px;
    left: -10px
}

.f2 {
    right: -20px;
    bottom: 70px
}

.rewards {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 50px;
    align-items: center
}

.mini-stats {
    display: flex;
    gap: 12px
}

.mini-stats span {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    font-size: 10px
}

.mini-stats b {
    display: block;
    font-size: 19px
}

.reward-vault {
    height: 600px;
    position: relative;
    perspective: 1200px
}

.reward-ring {
    position: absolute;
    inset: 8%;
    border: 1px solid #b530ef;
    border-radius: 50%;
    transform: rotateX(70deg);
    box-shadow: 0 0 70px rgba(189, 50, 247, .25)
}

.reward-slab {
    position: absolute;
    left: 10%;
    right: 4%;
    height: 135px;
    border: 1px solid #f15af0;
    border-radius: 24px;
    background: linear-gradient(100deg, rgba(79, 20, 115, .95), rgba(178, 34, 220, .8));
    box-shadow: 0 20px 70px rgba(162, 28, 208, .28);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px
}

.reward-slab i {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #db40ef;
    font-size: 30px
}

.reward-slab small {
    padding: 7px 10px;
    border: 1px solid #fff5;
    border-radius: 99px
}

.reward-slab b {
    margin-left: auto;
    font-size: 30px
}

.s1 {
    top: 80px;
    transform: rotate(6deg)
}

.s2 {
    top: 235px
}

.s3 {
    top: 390px;
    transform: rotate(-6deg)
}

.reward-vault>img {
    position: absolute;
    width: 210px;
    right: 0;
    top: 210px
}

.process {
    padding-left: 0;
    padding-right: 0
}

.process-head {
    padding: 0 max(5vw, 28px)
}

.process-pin {
    overflow: hidden;
    padding: 30px 0
}

.process-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 7vw
}

.process-card {
    width: 420px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(29, 13, 43, .9), rgba(9, 5, 15, .85));
    overflow: hidden;
    padding-bottom: 30px
}

.process-scene {
    height: 330px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 70%, rgba(169, 35, 231, .5), transparent 45%), linear-gradient(#12081c, #07040b)
}

.process-scene>img {
    position: absolute;
    height: 370px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%)
}

.process-scene:after {
    content: "";
    position: absolute;
    inset: auto 8% 10% 8%;
    height: 40px;
    border-radius: 50%;
    background: #a52be6;
    filter: blur(28px)
}

.holo {
    position: absolute;
    border: 1px solid #d64bf8;
    background: rgba(120, 34, 180, .14);
    box-shadow: 0 0 25px rgba(212, 46, 238, .25)
}

.h1 {
    width: 130px;
    height: 80px;
    left: 25px;
    top: 35px;
    transform: rotateY(25deg)
}

.h2 {
    width: 105px;
    height: 145px;
    right: 24px;
    top: 70px
}

.activity {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 3;
    padding: 9px 16px;
    border-radius: 99px;
    background: #ff12c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em
}

.process-card>span {
    display: block;
    color: #ff5edb;
    padding: 24px 28px 0
}

.process-card h3,
.process-card p {
    padding: 0 28px
}

.process-card h3 {
    font-size: 28px;
    margin: 14px 0 9px
}

.process-card p {
    color: var(--muted);
    line-height: 1.65
}

.markets {
    min-height: 760px;
    text-align: center;
    overflow: hidden;
    background: transparent
}

.market-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    overflow: hidden;
    opacity: .72;
    mix-blend-mode: screen
}

.market-waves img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: hue-rotate(38deg) saturate(.9) brightness(.75)
}

.market-copy {
    position: relative;
    z-index: 4
}

.market-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.market-links path {
    fill: none;
    stroke: url(#x);
    stroke-width: 2;
    stroke-dasharray: 9 12;
    filter: drop-shadow(0 0 8px #ff2bd3);
    animation: dash 4s linear infinite
}

.market-universe {
    position: absolute;
    inset: 220px 5% 0;
    z-index: 3
}

.x-core {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 170px;
    height: 170px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid #e043ff;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, #a82dff, #1b0b25 70%);
    box-shadow: 0 0 65px #9d28df
}

.x-core:before,
.x-core:after {
    content: "";
    position: absolute;
    border: 1px solid #a837ee;
    border-radius: 50%;
    inset: -35px;
    animation: spin 12s linear infinite
}

.x-core:after {
    inset: -75px;
    animation-direction: reverse
}

.x-core img {
    width: 75px
}

.market-icon {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    background: rgba(10, 6, 15, .88);
    box-shadow: 0 0 35px rgba(128, 29, 184, .22)
}

.market-icon img {
    width: 54%
}

.mi1 {
    left: 13%;
    top: 55%
}

.mi2 {
    left: 25%;
    top: 28%
}

.mi3 {
    left: 40%;
    top: 12%
}

.mi4 {
    right: 23%;
    top: 25%
}

.mi5 {
    right: 10%;
    top: 55%
}

.mi6 {
    left: 7%;
    top: 15%
}

.mi7 {
    right: 4%;
    top: 9%
}

.mi8 {
    left: 31%;
    top: 66%
}

.mi9 {
    right: 34%;
    top: 69%
}

.compare-arena {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center
}

.legacy-stack {
    position: relative;
    height: 510px
}

.legacy-stack article {
    position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    padding: 25px;
    border: 1px solid #5c5061;
    border-radius: 20px;
    background: rgba(14, 10, 18, .88);
    box-shadow: 0 25px 60px #0007
}

.legacy-stack article:nth-child(2) {
    top: 95px;
    transform: scale(.96)
}

.legacy-stack article:nth-child(3) {
    top: 190px;
    transform: scale(.92)
}

.legacy-stack article:nth-child(4) {
    top: 285px;
    transform: scale(.88)
}

.legacy-stack span,
.legacy-stack small {
    display: block;
    color: #817986;
    font-size: 10px
}

.legacy-stack b {
    display: block;
    font-size: 22px;
    margin: 15px 0
}

.versus {
    text-align: center;
    font-weight: 900
}

.axion-standard {
    min-height: 500px;
    padding: 40px;
    border: 1px solid #f22ee5;
    border-radius: 30px;
    background: radial-gradient(circle at 80% 20%, rgba(231, 32, 224, .28), transparent 42%), linear-gradient(145deg, rgba(68, 22, 91, .9), rgba(17, 8, 27, .9));
    position: relative
}

.axion-standard>img {
    width: 65px
}

.axion-standard h3 {
    font-size: 32px
}

.axion-standard ul {
    list-style: none;
    padding: 0
}

.axion-standard li {
    padding: 17px 0;
    border-bottom: 1px solid #fff2
}

.standard-score {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 120px;
    height: 120px;
    border: 1px solid #d553ff;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center
}

.standard-score b {
    font-size: 38px
}

.standard-score span {
    font-size: 8px
}

.video-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.video-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(17, 9, 25, .82);
    padding-bottom: 20px
}

.video-shell {
    height: 400px;
    position: relative;
    background: #0b0710
}

.video-shell video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-controls {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px
}

.video-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid #fff4;
    border-radius: 50%;
    background: #08060cb8;
    color: white;
    backdrop-filter: blur(8px)
}

.video-card h3,
.video-card>b,
.video-card>small {
    display: block;
    margin: 12px 18px 0
}

.video-card>b {
    font-size: 25px
}

.video-card>small {
    color: var(--muted)
}

.condition-system {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.condition-system article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: linear-gradient(160deg, rgba(30, 15, 43, .85), rgba(8, 5, 13, .8));
    overflow: hidden
}

.condition-visual {
    height: 220px;
    position: relative;
    display: grid;
    place-items: center
}

.icon-core {
    width: 115px;
    height: 115px;
    border-radius: 30px;
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(145deg, #7c29ff, #ff0fc9);
    box-shadow: 0 0 50px rgba(204, 32, 232, .34)
}

.condition-visual i {
    position: absolute;
    border: 1px solid #ad39e9;
    border-radius: 50%;
    inset: 20px;
    animation: spin 12s linear infinite
}

.condition-visual i:nth-child(2) {
    inset: 48px;
    animation-direction: reverse
}

.condition-visual i:nth-child(3) {
    width: 10px;
    height: 10px;
    background: #fff;
    left: 25px;
    top: 90px;
    box-shadow: 0 0 15px #fff
}

.condition-system article>span {
    color: #ff5bdd
}

.condition-system h3 {
    font-size: 24px
}

.condition-system p {
    color: var(--muted);
    line-height: 1.6
}

.condition-system article>b {
    font-size: 10px;
    color: #ff5bdd
}

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

.expo-grid article {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(15, 8, 22, .72)
}

.expo-visual {
    height: 360px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, #76229c, transparent 60%)
}

.expo-visual img {
    height: 420px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.expo-visual span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 10px;
    letter-spacing: .15em
}

.expo-grid h3,
.expo-grid p {
    margin-left: 20px
}

.expo-grid p {
    color: var(--muted)
}

.testimonial-wall {
    columns: 3;
    column-gap: 16px
}

.testimonial-wall article {
    break-inside: avoid;
    margin-bottom: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(17, 9, 24, .72)
}

.testimonial-wall article:nth-child(2n) {
    padding-block: 38px
}

.testimonial-wall div {
    display: flex;
    align-items: center;
    gap: 12px
}

.testimonial-wall div span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7f2aff, #ff11c9)
}

.testimonial-wall p {
    font-size: 18px;
    line-height: 1.55;
    margin: 20px 0
}

.testimonial-wall small {
    color: #9c8fa4
}

.community-card {
    max-width: 1400px;
    margin: auto;
    min-height: 600px;
    border: 1px solid var(--line);
    border-radius: 34px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    padding: 55px;
    background: radial-gradient(circle at 72% 45%, rgba(155, 35, 205, .22), transparent 37%), rgba(14, 8, 21, .72)
}

.network-visual {
    height: 500px;
    position: relative
}

.network-globe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 25%, #d64cff, #5f1687 43%, #100718 72%);
    box-shadow: inset -45px -40px 65px #040207, 0 0 90px rgba(182, 44, 233, .42)
}

.network-globe:after {
    content: "";
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 1px solid #ff9af0;
    animation: pulse 3s ease-in-out infinite
}

.network-globe img {
    width: 85px;
    filter: drop-shadow(0 0 18px #fff)
}

.network-visual svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #a82ad8;
    opacity: .6
}

.city {
    position: absolute;
    width: 80px;
    height: 44px;
    border: 1px solid #e343fa;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #12071b;
    font-style: normal;
    font-size: 10px;
    box-shadow: 0 0 25px rgba(225, 50, 245, .18)
}

.city em {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #fff
}

.c1 {
    left: 17%;
    top: 22%
}

.c2 {
    right: 20%;
    top: 18%
}

.c3 {
    right: 8%;
    top: 50%
}

.c4 {
    right: 28%;
    bottom: 10%
}

.c5 {
    left: 20%;
    bottom: 14%
}

.c6 {
    left: 5%;
    top: 52%
}

.faq {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 70px
}

.faq-list {
    border-top: 1px solid var(--line)
}

.faq-item {
    border-bottom: 1px solid var(--line)
}

.faq-item button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    background: transparent;
    border: 0;
    color: white;
    text-align: left;
    font-weight: 700
}

.faq-item p {
    display: none;
    color: var(--muted);
    line-height: 1.7;
    padding: 0 0 20px
}

.faq-item.open p {
    display: block
}

.faq-item.open i {
    transform: rotate(45deg)
}

.final-cta {
    min-height: 720px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 60px
}

.cta-character {
    position: absolute;
    height: 650px;
    left: -30px;
    bottom: -90px
}

.cta-coins {
    position: absolute;
    width: 240px;
    right: 6%;
    top: 30px
}

.cta-rings {
    position: absolute;
    inset: 0
}

.cta-rings i {
    position: absolute;
    border: 1px solid rgba(218, 59, 255, .25);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 780px;
    height: 360px;
    animation: spin 18s linear infinite
}

.cta-rings i:nth-child(2) {
    width: 980px;
    height: 500px;
    animation-direction: reverse
}

.cta-rings i:nth-child(3) {
    width: 1200px;
    height: 650px
}

.final-cta>div:last-child {
    position: relative;
    z-index: 3
}

.final-cta h2 {
    font-size: clamp(58px, 7vw, 110px)
}

footer {
    position: relative;
    padding: 80px max(5vw, 28px) 30px;
    border-top: 1px solid var(--line);
    background: #050208
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px
}

.footer-brand img {
    width: 210px
}

.footer-brand p {
    max-width: 500px;
    color: #a99eaf;
    line-height: 1.7
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.socials a {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 11px
}

.footer-top>div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.footer-top b {
    margin-bottom: 12px
}

.footer-top a {
    color: #a99eaf;
    font-size: 13px
}

.footer-disclaimer {
    margin-top: 55px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: #9f93a6;
    font-size: 12px;
    line-height: 1.7
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
    color: #766d7c;
    font-size: 11px
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: radial-gradient(circle at 50% 45%, #2b0c40, #050208 55%);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: opacity .8s, visibility .8s
}

.page-loader.done {
    opacity: 0;
    visibility: hidden
}

.loader-ram {
    position: absolute;
    height: 70vh;
    left: 50%;
    bottom: -22vh;
    transform: translateX(-50%);
    filter: brightness(.8)
}

.loader-glyph {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border: 1px solid #e145fc;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(13, 5, 20, .65);
    box-shadow: 0 0 70px #9a27cf
}

.loader-glyph img {
    width: 70px;
    animation: float 2s ease-in-out infinite
}

.loader-ring {
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid #b52be8;
    border-radius: 50%;
    animation: spin 8s linear infinite
}

.r2 {
    width: 650px;
    height: 650px;
    animation-direction: reverse
}

.loader-text {
    position: absolute;
    top: 68%;
    text-align: center
}

.loader-text b,
.loader-text span {
    display: block
}

.loader-text b {
    letter-spacing: .22em
}

.loader-text span {
    color: #ab9caf;
    font-size: 12px;
    margin: 8px
}

.loader-text i {
    display: block;
    width: 220px;
    height: 3px;
    background: #24132d;
    margin-top: 18px
}

.loader-text em {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7928ff, #ff0bc7);
    animation: load 2s ease-in-out infinite
}

.promo-modal,
.exit-modal {
    position: fixed;
    z-index: 1000;
    background: linear-gradient(145deg, #22102f, #09050e);
    border: 1px solid #d83bf0;
    border-radius: 26px;
    box-shadow: 0 35px 120px #000;
    display: none
}

.promo-modal {
    width: min(760px, 92vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: 280px 1fr;
    overflow: hidden;
    padding: 0
}

.promo-modal.show {
    display: grid
}

.modal-character {
    height: 430px;
    background: radial-gradient(circle, #8c25b5, transparent 65%);
    overflow: hidden
}

.modal-character img {
    height: 500px;
    transform: translateX(-20px)
}

.promo-modal>div:last-of-type {
    padding: 45px 35px
}

.promo-modal span,
.exit-modal span {
    color: #ff65dc;
    font-size: 11px;
    letter-spacing: .15em
}

.promo-modal h2 {
    font-size: 42px;
    margin: 14px 0
}

.promo-modal p,
.exit-modal p {
    color: var(--muted);
    line-height: 1.6
}

.coupon-box {
    display: flex;
    justify-content: space-between;
    border: 1px dashed #ef59ef;
    border-radius: 12px;
    padding: 14px;
    margin: 22px 0
}

.coupon-box button {
    background: transparent;
    border: 0;
    color: white
}

.modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #0d0713;
    color: white;
    z-index: 3
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: #000b;
    z-index: 999
}

.modal-backdrop.show {
    display: block
}

.exit-modal {
    right: 25px;
    bottom: 25px;
    width: min(420px, calc(100vw - 30px));
    padding: 30px
}

.exit-modal.show {
    display: block
}

.exit-modal>img {
    width: 150px;
    float: right
}

.exit-modal h2 {
    font-size: 40px;
    margin: 10px 0
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes float {
    50% {
        transform: translateY(-14px)
    }
}

@keyframes shine {
    to {
        left: 120%
    }
}

@keyframes scan {
    from {
        top: 0
    }

    to {
        top: 100%
    }
}

@keyframes pulse {
    50% {
        transform: scale(1.2);
        opacity: .3
    }
}

@keyframes load {
    0% {
        width: 0
    }

    70%,
    100% {
        width: 100%
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -42
    }
}

@keyframes heroGlow {
    to {
        filter: saturate(1.5) brightness(1.15)
    }
}

@media(max-width:1050px) {
    .header nav {
        display: none
    }

    .hero,
    .dashboard,
    .rewards,
    .faq,
    .community-card {
        grid-template-columns: 1fr
    }

    .hero-scene {
        height: 620px
    }

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

    .bento-main {
        grid-row: auto
    }

    .wide {
        grid-column: 1/3
    }

    .plan-builder {
        grid-template-columns: 1fr
    }

    .feature-rail,
    .condition-system,
    .video-proof-grid {
        grid-template-columns: 1fr 1fr
    }

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

    .footer-top>div:nth-last-child(-n+2) {
        margin-top: 25px
    }

    .community-card {
        gap: 30px
    }

    .dashboard-stage {
        min-height: 580px
    }
}

@media(max-width:700px) {
    .section {
        padding: 80px 20px
    }

    .promo-timer {
        display: none
    }

    .header {
        height: 68px
    }

    .logo img {
        width: 145px
    }

    .header-actions .login {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 70px
    }

    .hero h1 {
        font-size: 72px
    }

    .hero-scene {
        height: 500px;
        margin-top: 30px
    }

    .character-rig {
        width: 72%;
        left: 14%
    }

    .payout-card {
        width: 145px;
        padding: 11px
    }

    .payout-card strong {
        font-size: 16px
    }

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

    .certificate-head,
    .split-head {
        align-items: flex-start;
        flex-direction: column
    }

    .cert-card {
        width: 330px;
        grid-template-columns: 1fr 95px
    }

    .cert-card img {
        width: 95px
    }

    .bento,
    .feature-rail,
    .rule-grid,
    .condition-system,
    .expo-grid,
    .video-proof-grid {
        grid-template-columns: 1fr
    }

    .wide {
        grid-column: auto;
        display: block
    }

    .asset-orbit {
        width: 100%
    }

    .plan-controls,
    .plan-summary {
        padding: 24px
    }

    .buyer-scene {
        grid-template-columns: 110px 1fr
    }

    .mini-character img {
        left: 0
    }

    .selected-size {
        font-size: 52px
    }

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

    .dashboard {
        gap: 20px
    }

    .dashboard-stage {
        min-height: 500px
    }

    .dash-frame {
        inset: 20px 0;
        grid-template-columns: 50px 1fr
    }

    .dash-content {
        padding: 16px
    }

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

    .dash-kpis article:nth-child(n+2) {
        display: none
    }

    .rewards {
        gap: 20px
    }

    .reward-vault {
        height: 500px
    }

    .reward-slab {
        left: 0;
        right: 0;
        height: 110px;
        padding: 15px
    }

    .reward-slab b {
        font-size: 18px
    }

    .process-card {
        width: 330px
    }

    .market-icon {
        width: 58px;
        height: 58px
    }

    .x-core {
        width: 115px;
        height: 115px
    }

    .compare-arena {
        grid-template-columns: 1fr
    }

    .legacy-stack {
        height: 430px
    }

    .versus {
        padding: 20px
    }

    .testimonial-wall {
        columns: 1
    }

    .community-card {
        padding: 28px
    }

    .network-visual {
        height: 420px
    }

    .network-globe {
        width: 220px;
        height: 220px
    }

    .final-cta {
        min-height: 620px
    }

    .cta-character {
        height: 470px;
        left: -100px;
        opacity: .5
    }

    .cta-coins {
        width: 150px
    }

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

    .footer-brand {
        grid-column: 1/3
    }

    .footer-bottom {
        flex-direction: column
    }

    .promo-modal.show {
        display: block
    }

    .modal-character {
        display: none
    }

    .promo-modal>div:last-of-type {
        padding: 40px 25px
    }

    .cursor-glow {
        display: none
    }
}

/* ============================================================
   AXION NEXTGEN v6 — ENHANCEMENTS
   Galaxy background · animated dashboards · lightning markets
   marquee testimonials · figma-matched reward cards · network
   ============================================================ */

/* ---- crisp animated neon ribbons layered over the hero ---- */
@keyframes heroPulse{from{opacity:.35;transform:scale(1)}to{opacity:.85;transform:scale(1.08)}}

/* ============ generic premium card hover shimmer ============ */
.glass::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-18deg);transition:.7s;pointer-events:none;z-index:4}
.glass:hover::before{left:130%}

/* ============ 01 · animated live analytics terminal ============ */
.visual-terminal{position:relative}
.chart-live{position:relative;width:100%;height:100%}
.chart-live svg{width:100%;height:100%;overflow:visible}
.chart-grid line{stroke:rgba(233,160,255,.10);stroke-width:1}
.chart-area{fill:url(#axArea);opacity:0;animation:areaFade 1.2s ease .8s forwards}
@keyframes areaFade{to{opacity:.55}}
.chart-line{fill:none;stroke:url(#axLine);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px #ff14cc);stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLine 2.6s ease forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.chart-dot{fill:#fff;filter:drop-shadow(0 0 8px #ff5be0);opacity:0;animation:dotIn .4s ease 2.4s forwards}
.chart-dot-ring{fill:none;stroke:#ff5be0;stroke-width:2;transform-origin:center;transform-box:fill-box;
  opacity:0;animation:dotIn .4s ease 2.4s forwards, ping 1.8s ease-out 2.6s infinite}
@keyframes dotIn{to{opacity:1}}
@keyframes ping{0%{r:4;opacity:.9}100%{r:16;opacity:0}}
.chart-bars rect{fill:url(#axBar);opacity:.5;transform-origin:bottom;transform-box:fill-box;
  animation:barPump 2.4s ease-in-out infinite}
.chart-bars rect:nth-child(2n){animation-delay:.3s}
.chart-bars rect:nth-child(3n){animation-delay:.6s}
.chart-bars rect:nth-child(4n){animation-delay:.9s}
@keyframes barPump{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.chart-scan{stroke:rgba(255,255,255,.35);stroke-width:1;animation:scanX 3.2s linear infinite}
@keyframes scanX{from{transform:translateX(0)}to{transform:translateX(520px)}}
.terminal-metrics b{position:relative;padding-left:14px}
.terminal-metrics b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;
  background:#32f6b0;box-shadow:0 0 10px #32f6b0;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.count[data-count]{font-variant-numeric:tabular-nums}

/* ---- 02 risk orbit + 03 speed core micro-motion ---- */
.risk-orbit{animation:spin 28s linear infinite}
.risk-orbit b,.risk-orbit small{animation:spin 28s linear infinite reverse}
.speed-core b{position:relative}
.glass:hover .risk-orbit{filter:drop-shadow(0 0 22px rgba(255,40,220,.5))}

/* ================ RULE TRANSPARENCY hover FX ================ */
.rule-grid article{position:relative;overflow:hidden;cursor:default;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s,background .4s}
.rule-grid article::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(120deg,#8d2cff,#ff0bc7,#7867ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.rule-grid article::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;top:-40%;right:-20%;
  background:radial-gradient(circle,rgba(255,40,220,.22),transparent 70%);opacity:0;transition:opacity .45s}
.rule-grid article:hover{transform:translateY(-8px);background:rgba(26,12,38,.8);
  box-shadow:0 26px 60px rgba(150,25,200,.28)}
.rule-grid article:hover::before{opacity:1}
.rule-grid article:hover::after{opacity:1}
.rule-grid span{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.14em;
  transition:transform .4s;position:relative;z-index:2}
.rule-grid article:hover span{transform:translateX(4px)}
.rule-grid h3{transition:color .35s;position:relative;z-index:2}
.rule-grid article:hover h3{color:#fff}
.rule-grid p{position:relative;z-index:2}
.rule-grid article .rule-arrow{position:absolute;right:24px;bottom:22px;font-size:18px;color:#ff5edb;
  opacity:0;transform:translateX(-8px);transition:.4s;z-index:2}
.rule-grid article:hover .rule-arrow{opacity:1;transform:translateX(0)}

/* ============ THE AXION COMMAND CENTER — working dash ============ */
.dash-top span{position:relative;padding-left:16px}
.dash-top span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-radius:50%;
  background:#3effbd;box-shadow:0 0 12px #3effbd;transform:translateY(-50%);animation:pulse 1.4s ease-in-out infinite}
.dash-chart{position:relative;overflow:hidden}
.dash-chart svg{overflow:visible}
.dash-area{fill:url(#dashArea);opacity:0;animation:areaFade 1.4s ease 1s forwards}
.dash-chart path.dash-line{stroke:url(#dashLine);stroke-width:5;stroke-dasharray:1500;stroke-dashoffset:1500;
  animation:drawLine 3s ease .3s forwards}
.dash-live-dot{fill:#fff;opacity:0;animation:dotIn .4s ease 3.1s forwards}
.dash-live-ring{fill:none;stroke:#ff5be0;stroke-width:2;opacity:0;
  animation:dotIn .4s ease 3.1s forwards,ping 1.8s ease-out 3.3s infinite}
.dash-grid line{stroke:rgba(233,160,255,.08)}
.dash-bottom em{width:0;animation:barGrow 1.6s cubic-bezier(.2,.8,.2,1) 1.2s forwards}
.dash-bottom article:nth-child(2) em{animation-delay:1.4s}
@keyframes barGrow{to{width:var(--w,80%)}}
.dash-kpis b{font-variant-numeric:tabular-nums}

/* ================ REWARDS — matched to figma cards ================ */
.reward-vault{height:auto;min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:24px;
  perspective:1400px;padding:20px 0}
.reward-ring{display:none}
.reward-vault>img{display:none}
.reward-slab{position:relative;left:auto;right:auto;top:auto;height:auto;width:100%;
  transform:none;padding:26px 30px;gap:22px;border-radius:24px;
  border:1px solid rgba(255,120,240,.45);
  background:linear-gradient(120deg,rgba(120,40,190,.34),rgba(60,18,95,.5));
  backdrop-filter:blur(16px);box-shadow:0 24px 60px rgba(120,20,180,.32),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;overflow:hidden}
.reward-slab::before{content:"";position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(160px 120px at 12% 30%,rgba(255,120,240,.28),transparent 70%);pointer-events:none}
.reward-slab:nth-child(1){transform:rotate(1.6deg) translateX(3%)}
.reward-slab:nth-child(2){transform:rotate(-1deg) translateX(-2%);z-index:2}
.reward-slab:nth-child(3){transform:rotate(1.4deg) translateX(1%)}
.reward-slab:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 34px 80px rgba(190,40,240,.5)}
.reward-slab .rw-coin{width:62px;height:62px;min-width:62px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:900;position:relative;
  background:radial-gradient(circle at 34% 28%,#ff8bf2,#b02adf 55%,#5c1685);
  box-shadow:0 0 26px rgba(230,80,255,.6),inset 0 -6px 12px rgba(0,0,0,.3),inset 0 4px 8px rgba(255,255,255,.35);
  animation:coinBob 3.4s ease-in-out infinite}
.reward-slab:nth-child(2) .rw-coin{animation-delay:.4s}
.reward-slab:nth-child(3) .rw-coin{animation-delay:.8s}
@keyframes coinBob{50%{transform:translateY(-7px) rotate(6deg)}}
.reward-slab .rw-body{flex:1;display:flex;flex-direction:column;gap:8px}
.reward-slab .rw-tag{align-self:flex-start;padding:5px 12px;border:1px solid rgba(255,255,255,.35);
  border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.18em;background:rgba(0,0,0,.2)}
.reward-slab .rw-amount{font-family:Manrope,sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.reward-slab .rw-amount .cents{font-size:20px;opacity:.8}
.reward-float{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#c66bff,#5c1685 60%,#241031);
  box-shadow:0 0 22px rgba(190,60,255,.5);display:grid;place-items:center}
.reward-float img{width:52%;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
.reward-float.rf1{width:66px;height:66px;right:-14px;top:8%;animation:float 4s ease-in-out infinite}
.reward-float.rf2{width:54px;height:54px;right:6%;bottom:6%;animation:float 5s ease-in-out infinite .6s}

/* ============ HOW WE OPERATE — revamped step scenes ============ */
.process-scene{height:280px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(150,40,220,.35),transparent 60%),linear-gradient(#140a20,#07040c)}
.process-scene>img{display:none}
.process-scene .holo,.process-scene .activity+.holo{display:none}
.step-viz{position:relative;width:190px;height:190px;display:grid;place-items:center}
.step-viz .ring{position:absolute;border-radius:50%;border:1px solid rgba(233,120,255,.32)}
.step-viz .ring.r-a{inset:0;animation:spin 18s linear infinite}
.step-viz .ring.r-b{inset:26px;border-style:dashed;border-color:rgba(233,120,255,.22);animation:spin 12s linear infinite reverse}
.step-viz .core{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(40,18,60,.9),rgba(14,8,22,.9));border:1px solid rgba(233,120,255,.4);
  box-shadow:0 0 40px rgba(180,45,230,.35),inset 0 0 24px rgba(120,30,180,.3);position:relative;z-index:2}
.step-viz .core svg{width:44px;height:44px;stroke:#ff8bf0;fill:none;stroke-width:1.7;
  filter:drop-shadow(0 0 6px #ff3fd0)}
.step-viz .orbdot{position:absolute;width:14px;height:14px;border-radius:50%;background:#ff33d0;
  box-shadow:0 0 14px #ff33d0;top:50%;left:50%;margin:-7px;animation:stepOrbit 6s linear infinite}
.step-viz .orbdot.d2{background:#8d5bff;box-shadow:0 0 14px #8d5bff;animation-duration:9s;animation-delay:-3s}
@keyframes stepOrbit{from{transform:rotate(0) translateX(92px) rotate(0)}to{transform:rotate(360deg) translateX(92px) rotate(-360deg)}}
.step-viz .spark{position:absolute;inset:0}
.step-viz .spark i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7;
  animation:twk 2.4s ease-in-out infinite}
.step-viz .spark i:nth-child(1){left:12%;top:20%}
.step-viz .spark i:nth-child(2){right:10%;top:30%;animation-delay:.6s}
.step-viz .spark i:nth-child(3){left:20%;bottom:16%;animation-delay:1.1s}
.step-viz .spark i:nth-child(4){right:18%;bottom:22%;animation-delay:1.6s}
@keyframes twk{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.2)}}
.process-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s}
.process-card:hover{transform:translateY(-8px);border-color:#d644ff;box-shadow:0 30px 70px rgba(120,20,170,.3)}
.process-card:hover .step-viz .core{box-shadow:0 0 60px rgba(220,70,255,.55),inset 0 0 24px rgba(120,30,180,.3)}
.process-card .activity{background:linear-gradient(100deg,#8d2cff,#ff12c8)}

/* ============ GLOBAL MARKET ACCESS — lightning strikes ============ */
.market-links path{stroke:url(#x);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:0;filter:drop-shadow(0 0 6px #b23bff);
  opacity:0;animation:strike 3.4s ease-in-out infinite}
.market-links path:nth-child(1){animation-delay:0s}
.market-links path:nth-child(2){animation-delay:.35s}
.market-links path:nth-child(3){animation-delay:.7s}
.market-links path:nth-child(4){animation-delay:1.05s}
.market-links path:nth-child(5){animation-delay:1.4s}
.market-links path:nth-child(6){animation-delay:1.75s}
.market-links path:nth-child(7){animation-delay:2.1s}
.market-links path:nth-child(8){animation-delay:2.45s}
.market-links path:nth-child(9){animation-delay:2.8s}
@keyframes strike{
  0%,92%{opacity:0}
  4%{opacity:1;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #ff2bd3)}
  7%{opacity:.2}
  10%{opacity:1;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px #b23bff)}
  22%{opacity:.85}
  40%{opacity:.35;filter:drop-shadow(0 0 6px #b23bff)}
  60%{opacity:.7}
  100%{opacity:0}}
.market-icon{transition:transform .4s,box-shadow .4s;z-index:4}
.market-icon:hover{transform:scale(1.12);box-shadow:0 0 40px rgba(255,60,230,.6)}
.x-core{z-index:5}
.x-core::before{border-color:rgba(255,80,240,.4)}

/* ============ BUILT FOR PROFESSIONAL EXECUTION — animated ============ */
.condition-system article{position:relative;overflow:hidden;transition:transform .45s,border-color .45s,box-shadow .45s}
.condition-system article:hover{transform:translateY(-8px);border-color:#d644ff;box-shadow:0 28px 66px rgba(140,25,190,.3)}
.condition-visual{height:190px}
.cond-anim{position:relative;width:150px;height:150px;display:grid;place-items:center}
.cond-anim .halo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(200,60,255,.28),transparent 62%);animation:pulse 3s ease-in-out infinite}
.cond-anim .ring2{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(233,120,255,.35);
  animation:spin 14s linear infinite}
.cond-anim .ring2::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px #fff;top:-5px;left:50%;margin-left:-5px}
.cond-anim .chip{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;position:relative;z-index:2;
  background:linear-gradient(150deg,#7c29ff,#ff0fc9);box-shadow:0 0 44px rgba(204,32,232,.4)}
.cond-anim .chip svg{width:42px;height:42px;stroke:#fff;fill:none;stroke-width:1.8}
/* mini animated candlesticks for "fast execution" */
.cond-anim.exec .chip{background:linear-gradient(150deg,#3a1560,#0e0716)}
.cond-anim .mini-bars{display:flex;gap:5px;align-items:flex-end;height:44px}
.cond-anim .mini-bars i{width:6px;border-radius:3px;background:linear-gradient(#ff5be0,#8d2cff);
  animation:barPump 1.6s ease-in-out infinite}
.cond-anim .mini-bars i:nth-child(2){animation-delay:.2s}
.cond-anim .mini-bars i:nth-child(3){animation-delay:.4s}
.cond-anim .mini-bars i:nth-child(4){animation-delay:.6s}
.cond-anim .mini-bars i:nth-child(5){animation-delay:.8s}

/* ================ TESTIMONIALS — dual marquee rows ================ */
.testimonial-wall{columns:auto;column-gap:0;display:flex;flex-direction:column;gap:18px;
  overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-row{display:flex;gap:18px;width:max-content}
.tm-row.left{animation:marqL 46s linear infinite}
.tm-row.right{animation:marqR 52s linear infinite}
.testimonial-wall:hover .tm-row{animation-play-state:paused}
@keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.testimonial-wall article{break-inside:auto;margin:0;flex:0 0 380px;width:380px;padding:26px;
  border:1px solid var(--line);border-radius:20px;background:rgba(17,9,24,.72);
  transition:transform .4s,border-color .4s,box-shadow .4s}
.testimonial-wall article:hover{transform:translateY(-6px);border-color:#d644ff;box-shadow:0 22px 50px rgba(130,25,180,.28)}
.testimonial-wall article:nth-child(2n){padding-block:26px}
.tm-stars{color:#ffbf47;font-size:13px;letter-spacing:2px;margin-top:6px}

/* ================ THE AXION NETWORK — animated network ================ */
.network-visual{height:520px;position:relative}
.net-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:250px;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#c94dff,#5f1687 44%,#0d0616 74%);
  box-shadow:inset -40px -36px 60px #040207,0 0 100px rgba(182,44,233,.5)}
.net-core img{width:78px;filter:drop-shadow(0 0 20px #fff);animation:float 4s ease-in-out infinite}
.net-core::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px solid rgba(255,150,240,.5);
  animation:pulse 3.4s ease-in-out infinite}
.net-core::before{content:"";position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,245,.35),transparent 68%);animation:pulse 2.6s ease-in-out infinite}
.net-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(180,70,240,.18)}
.net-orbit.o1{width:360px;height:360px;animation:spin 40s linear infinite}
.net-orbit.o2{width:470px;height:470px;animation:spin 60s linear infinite reverse}
.net-node{position:absolute;padding:8px 14px;border-radius:99px;border:1px solid #e343fa;
  background:rgba(14,7,22,.9);font-size:11px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 0 22px rgba(200,60,255,.35);transform:translate(-50%,-50%);z-index:3;white-space:nowrap}
.net-node small{display:block;font-size:8px;font-weight:600;color:#c69ad6;letter-spacing:.04em}
.net-node::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;
  background:#32f6b0;box-shadow:0 0 10px #32f6b0;transform:translateY(-50%);animation:pulse 1.6s ease-in-out infinite}
.net-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.net-link{stroke:url(#netGrad);stroke-width:1.4;fill:none;opacity:.4}
.net-packet{fill:#fff;filter:drop-shadow(0 0 6px #ff5be0)}
@keyframes netTravel{from{offset-distance:0%}to{offset-distance:100%}}

/* keep the reduced-motion crowd comfortable */
@media(prefers-reduced-motion:reduce){
  .hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen,.chart-line,.dash-chart path.dash-line,.market-links path,
  .tm-row.left,.tm-row.right{animation:none!important}
  .chart-line,.dash-chart path.dash-line{stroke-dashoffset:0}
}

/* responsive polish for the reworked blocks */
@media(max-width:1050px){
  .reward-vault{min-height:auto}
  .network-visual{height:460px}
  .net-orbit.o2{width:400px;height:400px}
}
@media(max-width:700px){
  .testimonial-wall article{flex-basis:300px;width:300px}
  .reward-slab .rw-amount{font-size:26px}
  .net-core{width:180px;height:180px}
  .net-orbit.o1{width:250px;height:250px}
  .net-orbit.o2{width:320px;height:320px}
  .step-viz{width:150px;height:150px}
  .hero-art{opacity:.62}
}


/* ============================================================
   HERO ART — figma ribbon artwork + character action pose
   Infinite, seamless (0% == 100%), GPU-only transforms.
   GSAP owns .character-rig's transform, so the character's
   "action" is animated on its INNER layers to avoid conflict.
   ============================================================ */
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-art-aura{position:absolute;right:6%;top:44%;width:52%;height:74%;transform:translateY(-50%);
  background:radial-gradient(closest-side,rgba(190,60,255,.30),rgba(90,30,170,.12) 52%,transparent 74%);
  filter:blur(12px);mix-blend-mode:screen;
  animation:artAura 9s ease-in-out infinite;will-change:transform,opacity}
@keyframes artAura{0%,100%{opacity:.62;transform:translateY(-50%) scale(1)}
  50%{opacity:.95;transform:translateY(-50%) scale(1.07)}}

/* --- the ribbon artwork: sits right, blended onto the black galaxy --- */
.hero-art-ribbon{position:absolute;right:-6%;top:50%;width:78%;transform:translateY(-50%);
  perspective:1600px;perspective-origin:58% 50%;filter:saturate(1.1) contrast(1.03)}
.hero-art-ribbon img{display:block;width:100%;height:auto;
  transform-style:preserve-3d;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite;will-change:transform;backface-visibility:visible}
/* The artwork is a pair of interlocked rings. Precessing its plane — spin the
   frame, tilt, then unspin — sweeps the surface normal around a cone, so the
   rings orbit one another instead of drifting. 0% and 100% are identical. */
@keyframes ringRevolve{
  0%     {transform:rotateZ(0deg) rotateX(21deg) rotateZ(-0deg)}
  6.25%  {transform:rotateZ(22.5deg) rotateX(21deg) rotateZ(-22.5deg)}
  12.5%  {transform:rotateZ(45deg) rotateX(21deg) rotateZ(-45deg)}
  18.75% {transform:rotateZ(67.5deg) rotateX(21deg) rotateZ(-67.5deg)}
  25%    {transform:rotateZ(90deg) rotateX(21deg) rotateZ(-90deg)}
  31.25% {transform:rotateZ(112.5deg) rotateX(21deg) rotateZ(-112.5deg)}
  37.5%  {transform:rotateZ(135deg) rotateX(21deg) rotateZ(-135deg)}
  43.75% {transform:rotateZ(157.5deg) rotateX(21deg) rotateZ(-157.5deg)}
  50%    {transform:rotateZ(180deg) rotateX(21deg) rotateZ(-180deg)}
  56.25% {transform:rotateZ(202.5deg) rotateX(21deg) rotateZ(-202.5deg)}
  62.5%  {transform:rotateZ(225deg) rotateX(21deg) rotateZ(-225deg)}
  68.75% {transform:rotateZ(247.5deg) rotateX(21deg) rotateZ(-247.5deg)}
  75%    {transform:rotateZ(270deg) rotateX(21deg) rotateZ(-270deg)}
  81.25% {transform:rotateZ(292.5deg) rotateX(21deg) rotateZ(-292.5deg)}
  87.5%  {transform:rotateZ(315deg) rotateX(21deg) rotateZ(-315deg)}
  93.75% {transform:rotateZ(337.5deg) rotateX(21deg) rotateZ(-337.5deg)}
  100%   {transform:rotateZ(360deg) rotateX(21deg) rotateZ(-360deg)}}
/* counter-revolving companion glow — gives the second ring its own orbit,
   so the pair reads as revolving around each other rather than in lockstep */
.hero-art-ribbon::after{content:"";position:absolute;inset:6% 4%;
  background:radial-gradient(closest-side at 58% 48%,rgba(255,80,235,.20),transparent 68%);
  mix-blend-mode:screen;pointer-events:none;transform-origin:58% 50%;
  animation:ringRevolve 40s linear infinite reverse;will-change:transform}

/* --- travelling light sheen across the ribbon (clipped to the artwork) --- */
.hero-art-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%);
  mask:radial-gradient(closest-side at 58% 50%,#000 42%,transparent 78%)}
.hero-art-sheen::before{content:"";position:absolute;top:-30%;left:-45%;width:34%;height:160%;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.16) 42%,rgba(255,190,255,.28) 50%,rgba(255,255,255,.16) 58%,transparent);
  transform:skewX(-14deg);mix-blend-mode:screen;
  animation:artSheen 9s cubic-bezier(.45,0,.2,1) infinite;will-change:transform,opacity}
@keyframes artSheen{
  0%{transform:translateX(-40%) skewX(-14deg);opacity:0}
  6%{opacity:.85}
  40%{opacity:.7}
  55%{transform:translateX(300%) skewX(-14deg);opacity:0}
  100%{transform:translateX(-40%) skewX(-14deg);opacity:0}}

/* ---------- CHARACTER: the idle "action" loop ---------- */
/* bottom origin keeps the feet planted while the body breathes */
.character-body{transform-origin:52% 100%;
  animation:charBreathe 5.6s ease-in-out infinite;will-change:transform,filter}
@keyframes charBreathe{
  0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 18px rgba(214,58,255,.34))}
  50%{transform:scale(1.014) rotate(.45deg);filter:drop-shadow(0 0 30px rgba(255,90,240,.52))}}
/* aura behind the figure throbs on a different period so it never looks mechanical */
.character-glow{transform-origin:52% 100%;
  animation:charAura 4.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes charAura{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.05)}}
/* key light drifting over the figure = the sense of "doing something" */
.character-light{animation:charKey 6.8s ease-in-out infinite;will-change:transform,opacity}
@keyframes charKey{
  0%,100%{opacity:.45;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:.9;transform:translate3d(-8%,3%,0) scale(1.12)}
  70%{opacity:.62;transform:translate3d(6%,-2%,0) scale(.95)}}

/* subtle pointer parallax (JS sets --px/--py) — depth without motion sickness */
.hero-art-ribbon{transform:translateY(-50%) translate3d(calc(var(--px,0)*14px),calc(var(--py,0)*10px),0)}
.character-rig{--rigx:calc(var(--px,0)*-7px);--rigy:calc(var(--py,0)*-5px)}

@media(prefers-reduced-motion:reduce){
  .hero-art-aura,.hero-art-ribbon img,.hero-art-ribbon::after,.hero-art-sheen::before,
  .character-body,.character-glow,.character-light{animation:none!important}
  .hero-art-sheen::before{opacity:0}
}
@media(max-width:900px){
  .hero-art-ribbon{right:-18%;width:118%;opacity:.72}
  .hero-art-aura{right:-6%;width:82%}
}

/* ============================================================
   FINAL POLISH 6.3 — smooth motion, premium loader, offers
   ============================================================ */
:root{--motion-smooth:cubic-bezier(.22,.61,.36,1)}
img{image-rendering:auto}
.hero-art-ribbon,.hero-art-ribbon img,.character-rig,.payout-card,.process-track{transform-style:preserve-3d;backface-visibility:hidden;-webkit-font-smoothing:antialiased}
.hero-art-ribbon{will-change:transform}
.hero-art-ribbon img{animation:ribbonDrift 18s var(--motion-smooth) infinite alternate!important;will-change:transform,filter;filter:saturate(1.08) contrast(1.04) brightness(1.02)}
.hero-art-ribbon::after{animation:ribbonGlow 11s ease-in-out infinite!important}
@keyframes ribbonDrift{
  0%{transform:translate3d(-.35%,.15%,0) scale(1.012) rotateZ(-.15deg)}
  50%{transform:translate3d(.45%,-.35%,0) scale(1.022) rotateZ(.12deg)}
  100%{transform:translate3d(-.1%,.32%,0) scale(1.015) rotateZ(-.08deg)}
}
@keyframes ribbonGlow{0%,100%{opacity:.42;transform:scale(.99)}50%{opacity:.78;transform:scale(1.025)}}
.hero-art-sheen::before{animation-duration:12s!important}
.character-body,.character-glow,.character-light,.hero-coins,.payout-card{will-change:transform,opacity}

/* Risk ring rotates independently; 10% and MAX LOSS remain perfectly still. */
.risk-orbit{background:#0b0710;animation:none!important;isolation:isolate;overflow:hidden}
.risk-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--pink) 0 36%,#7d2cff 36% 58%,#241b2e 58%);animation:riskSpin 12s linear infinite;z-index:-2}
.risk-orbit::after{z-index:-1}
.risk-orbit b,.risk-orbit small{animation:none!important;transform:none!important;position:relative}
@keyframes riskSpin{to{transform:rotate(360deg)}}

/* Important phase information is larger and easier to scan. */
.phase-grid{gap:14px;margin:28px 0 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.phase-card{padding:20px 20px 18px;border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(125,30,175,.075));box-shadow:inset 0 1px rgba(255,255,255,.04);transition:border-color .35s var(--motion-smooth),transform .35s var(--motion-smooth),background .35s}
.phase-card:hover{transform:translateY(-3px);border-color:rgba(225,70,255,.55);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(154,35,207,.12))}
.phase-card h4{font-size:16px;margin-bottom:14px;color:#fff}
.phase-card div{font-size:13px;margin:9px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055)}
.phase-card div:last-child{border-bottom:0;padding-bottom:0}
.phase-card div b{color:#fff;font-size:13px}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Prevent hover transforms from fighting the pinned horizontal ScrollTrigger. */
.process-track{will-change:transform}
.process-card{transform:translateZ(0);contain:paint;transition:border-color .4s,box-shadow .4s!important}
.process-card:hover{transform:translateZ(0)!important;box-shadow:0 28px 70px rgba(120,20,170,.28)}
.process-pin{overscroll-behavior:contain;transform:translateZ(0)}

/* Professional cinematic loader */
.page-loader{background:radial-gradient(ellipse at 50% 45%,#251038 0,#09030f 46%,#020104 100%);transition:opacity .75s var(--motion-smooth),visibility .75s;contain:strict}
.page-loader.done{pointer-events:none}
.loader-stage{position:relative;width:min(920px,92vw);height:min(650px,86vh);display:grid;place-items:center;overflow:hidden;border:1px solid rgba(223,102,255,.13);border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.005));box-shadow:0 50px 160px #000, inset 0 0 90px rgba(132,32,190,.08)}
.loader-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,#000,transparent 76%)}
.loader-noise{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='x'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)'/%3E%3C/svg%3E")}
.loader-character-wrap{position:absolute;left:50%;bottom:-18%;width:min(430px,54vw);height:84%;transform:translateX(-50%);overflow:hidden;filter:drop-shadow(0 0 45px rgba(206,61,255,.28))}
.loader-ram{position:absolute!important;height:100%!important;width:auto;left:50%!important;bottom:0!important;transform:translateX(-50%)!important;filter:brightness(.55) saturate(1.08);opacity:.68;animation:loaderBreath 4.8s ease-in-out infinite}
.loader-character-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,2,12,.75),transparent 32% 68%,rgba(8,2,12,.75)),linear-gradient(transparent 55%,#050208 96%)}
.loader-scan{position:absolute;z-index:2;left:8%;right:8%;height:1px;top:12%;background:linear-gradient(90deg,transparent,#ff56e4,transparent);box-shadow:0 0 14px #ff22d0;animation:loaderScan 2.8s ease-in-out infinite}
.loader-glyph{top:43%;width:116px;height:116px;background:rgba(8,3,13,.82);box-shadow:0 0 0 12px rgba(174,39,224,.06),0 0 80px rgba(154,39,207,.55);z-index:4}
.loader-glyph::before{content:"";position:absolute;inset:-18px;border:1px dashed rgba(234,91,255,.42);border-radius:50%;animation:spin 10s linear infinite}
.loader-glyph img{width:62px;animation:loaderGlyph 2.8s ease-in-out infinite}
.loader-ring{width:300px;height:300px;border-color:rgba(220,67,255,.25);z-index:3;animation-duration:14s}.loader-ring.r2{width:460px;height:460px;border-style:dashed;animation-duration:24s}
.loader-text{top:auto;bottom:7%;z-index:5;min-width:300px}.loader-text b{font:700 13px/1 Space Grotesk;letter-spacing:.34em}.loader-text span{font-size:11px;letter-spacing:.08em}.loader-text i{width:280px;height:2px;border-radius:4px;overflow:hidden}.loader-text em{animation:load 2.15s cubic-bezier(.65,0,.2,1) infinite}.loader-percent{display:block;margin-top:10px;color:#f2c7ff;font:700 10px/1 Space Grotesk;letter-spacing:.2em}
.loader-status{position:absolute;left:34px;right:34px;top:28px;display:flex;justify-content:space-between;color:#8f7b9a;font:600 9px/1 Space Grotesk;letter-spacing:.17em;z-index:5}.loader-status span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#3dffb2;box-shadow:0 0 9px #3dffb2;margin-right:7px}
.loader-hud{position:absolute;width:110px;height:110px;border-color:rgba(226,75,255,.28);z-index:2}.hud-a{left:8%;top:16%;border-left:1px solid;border-top:1px solid}.hud-b{right:8%;bottom:16%;border-right:1px solid;border-bottom:1px solid}
@keyframes loaderBreath{0%,100%{transform:translateX(-50%) scale(1);opacity:.6}50%{transform:translateX(-50%) scale(1.012);opacity:.76}}
@keyframes loaderScan{0%,100%{top:15%;opacity:0}15%{opacity:1}80%{opacity:.7}100%{top:86%;opacity:0}}
@keyframes loaderGlyph{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.045)}}

/* Multiple-offer marquee and copy feedback */
.promo-bar{height:44px;background:linear-gradient(90deg,#4410a8,#a313bd 46%,#ed0aac);box-shadow:0 8px 32px rgba(152,18,199,.18)}
.promo-track{gap:22px;animation-duration:48s;will-change:transform;padding-left:22px}
.promo-item{display:inline-flex;align-items:center;gap:8px}
.promo-item strong{color:#fff}.promo-item small{display:inline-flex;gap:5px;align-items:center;color:#f7c8ff;font-size:9px;letter-spacing:.12em}.promo-item time{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.inline-code{padding:4px 7px;border:1px dashed rgba(255,255,255,.55);border-radius:6px;background:rgba(0,0,0,.12)}
.copy-inline{position:relative;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:7px;height:26px;min-width:30px;cursor:pointer;transition:.25s}
.copy-inline:hover,.copy-inline.copied{background:#fff;color:#7b14b5;transform:translateY(-1px)}
.copy-inline em{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%) translateY(4px);padding:5px 8px;border-radius:6px;background:#08030d;color:#fff;font-style:normal;font-size:9px;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 24px #000;z-index:20}
.copy-inline:hover em,.copy-inline.copied em{opacity:1;transform:translateX(-50%) translateY(0)}
.pricing-coupon{display:flex;align-items:center;gap:9px}.pricing-copy{background:rgba(197,48,239,.12);border:1px solid rgba(226,75,255,.3)}

/* Multi-offer modal */
.promo-modal{width:min(900px,94vw);grid-template-columns:minmax(250px,330px) 1fr;background:linear-gradient(145deg,rgba(34,13,49,.98),rgba(6,3,10,.99));backdrop-filter:blur(22px)}
.modal-character{height:520px;position:relative;background:radial-gradient(circle at 50% 42%,rgba(193,58,246,.55),transparent 58%),#09040d}
.modal-character img{height:570px;position:absolute;left:50%;bottom:-70px;transform:translateX(-50%)}
.modal-orbit{position:absolute;left:50%;top:42%;width:230px;height:230px;border:1px solid rgba(231,90,255,.45);border-radius:50%;transform:translate(-50%,-50%);animation:spin 18s linear infinite}
.modal-orbit::after{content:"";position:absolute;inset:24px;border:1px dashed rgba(231,90,255,.28);border-radius:50%;animation:spin 10s linear infinite reverse}
.offer-panel{padding:38px 36px!important;min-width:0}.offer-panel h2{font-size:38px}.offer-carousel{position:relative;min-height:250px;margin-top:18px}.offer-card{position:absolute;inset:0;padding:22px;border:1px solid rgba(224,76,255,.26);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(136,31,187,.08));opacity:0;visibility:hidden;transform:translateX(28px) scale(.98);transition:.5s var(--motion-smooth)}.offer-card.active{opacity:1;visibility:visible;transform:none}.offer-card>small{color:#f2b7ff;font-size:10px;letter-spacing:.14em}.offer-card>strong{display:block;font:800 42px/1 Manrope;margin:9px 0;background:linear-gradient(90deg,#fff,#ff47df);-webkit-background-clip:text;color:transparent}.offer-card p{margin-bottom:12px}.offer-time{display:flex;justify-content:space-between;padding:9px 0;color:#aa9cb1;font-size:10px}.offer-time time{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}.offer-card .coupon-box{margin:8px 0 0}.offer-dots{display:flex;gap:7px;margin:14px 0 20px}.offer-dots button{width:22px;height:4px;border:0;border-radius:8px;background:#4e3858;transition:.3s}.offer-dots button.active{width:42px;background:linear-gradient(90deg,#8d2cff,#ff0bc7)}
.copy-code{cursor:pointer}.copy-code.copied{color:#52ffc2!important}

/* General interaction quality */
.btn,.glass,.rule-grid article,.condition-system article,.faq-item,.cert-card{transition-timing-function:var(--motion-smooth)!important}
@media(max-width:700px){.loader-stage{width:100vw;height:100vh;border:0;border-radius:0}.loader-status{display:none}.loader-character-wrap{width:78vw}.promo-modal{grid-template-columns:1fr}.modal-character{display:none}.offer-panel{padding:34px 22px!important}.phase-grid{grid-template-columns:1fr}.promo-item small{display:none}}
.exit-code-line{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.exit-code{color:#ff67df}

/* Offer grid + reliable coupon layout — v6.4 */
.promo-modal{width:min(1180px,96vw);max-height:min(90vh,860px);grid-template-columns:minmax(240px,330px) minmax(0,1fr);overflow:hidden}
.offer-panel{overflow:auto;max-height:min(90vh,860px);scrollbar-width:thin;scrollbar-color:rgba(230,57,255,.55) transparent}
.offer-panel>p{max-width:680px}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 22px;align-items:stretch}
.offer-grid .offer-card{position:relative;inset:auto;display:flex;flex-direction:column;min-width:0;min-height:270px;padding:22px;opacity:1;visibility:visible;transform:none;box-sizing:border-box;overflow:hidden}
.offer-grid .offer-card p{flex:1;overflow-wrap:anywhere}
.offer-grid .offer-time{gap:12px;align-items:center}
.offer-grid .coupon-box{display:flex;width:100%;min-width:0;box-sizing:border-box;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;padding:0 0 0 15px}
.offer-grid .coupon-box b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-grid .coupon-box button{flex:0 0 auto;white-space:nowrap;max-width:46%;padding-inline:14px}
.offer-time time,.promo-item time,.pricing-expiry time{font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-time .expired,.pricing-expiry .expired{color:#ff7fab}
.pricing-offer-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.pricing-offer-row .pricing-coupon{margin:0}
.pricing-expiry{display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px;border:1px solid rgba(227,65,255,.26);border-radius:10px;background:rgba(137,29,177,.09)}
.pricing-expiry[hidden]{display:none!important}
.pricing-expiry span{color:#9f8ba8;font-size:9px;letter-spacing:.12em}
.pricing-expiry time{color:#fff;font-size:11px;font-weight:800}
@media(max-width:920px){.promo-modal{grid-template-columns:1fr;width:min(720px,95vw)}.modal-character{display:none}.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.offer-grid{grid-template-columns:1fr}.offer-panel{padding:30px 18px!important}.offer-panel h2{font-size:30px}.offer-grid .offer-card{min-height:240px}.promo-item time{font-size:9px}}


/* ===================================================================
   v6.3 — MOBILE / RESPONSIVE FIXES
   =================================================================== */

/* --- 1. Runaway zoom-out and the phantom gutter on the right ---------
   `overflow-x:hidden` on <body> alone does NOT clip: the overflow
   propagates up to the viewport, so the page stayed 512px wide on a
   390px phone. The browser then zoomed out to fit, which is what showed
   the empty strip on the right. Clipping on <html> is the actual fix.
   `clip` rather than `hidden` so no scroll container is created and
   position:sticky keeps working. ------------------------------------- */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%}

/* Decorative full-bleed layers must never widen the layout. */
.nebula,.grain,#cosmos,.cursor-glow{max-width:100vw;pointer-events:none}

/* --- 2. THE AXION NETWORK: orbit rings pushed past the viewport ------ */
.network-visual{overflow:hidden}
@media(max-width:700px){
  .net-orbit.o1{width:230px;height:230px}
  .net-orbit.o2{width:290px;height:290px}
  .net-core{width:150px;height:150px}
  .net-node{font-size:10px;padding:6px 10px}
  .net-node small{font-size:7px}
}
@media(max-width:400px){
  .net-orbit.o1{width:195px;height:195px}
  .net-orbit.o2{width:240px;height:240px}
}

/* --- 3. HOW WE OPERATE: cards were unswipeable on mobile -------------
   The pinned horizontal scroll is a GSAP matchMedia block gated at
   (min-width:901px). Below that nothing ran, so the track just
   overflowed and was clipped — no drag, no scrollbar, no way to reach
   cards 2-5. Under 900px it becomes a native scroll-snap carousel,
   which also feels correct on touch. ---------------------------------- */
@media(max-width:900px){
  .process-pin{height:auto!important;transform:none!important}
  .process-track{
    width:auto;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-left:5vw;
    padding:4px 5vw 22px;
    transform:none!important;      /* defeat any stale GSAP transform */
    cursor:grab;
    scrollbar-width:none;
  }
  .process-track::-webkit-scrollbar{display:none}
  .process-track:active{cursor:grabbing}
  .process-card{
    scroll-snap-align:center;
    flex:0 0 min(300px,82vw);
    width:min(300px,82vw);
  }
  /* a hint that there is more to the right */
  .process-head{position:relative}
  .process-head::after{
    content:"Swipe for more →";
    display:block;margin-top:10px;
    font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    color:rgba(233,160,255,.55);font-weight:700;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .process-track{scroll-behavior:auto}
}

/* --- 4. Modals: were taller than the screen with no way to scroll ---- */
@media(max-width:700px){
  .promo-modal{
    width:min(500px,94vw);
    max-height:88vh;
    max-height:88dvh;              /* dodges mobile browser chrome */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    grid-template-columns:1fr;
    border-radius:20px;
  }
  /* the artwork panel eats the whole screen on a phone — trim it */
  .promo-modal .promo-visual,
  .promo-modal>figure,
  .promo-modal>img{max-height:150px;object-fit:cover}
  .promo-modal .promo-body,
  .promo-modal>div:last-child{padding:22px 20px 26px}
  .promo-modal h3,.promo-modal h2{font-size:22px;line-height:1.2}
  .modal-close{right:10px;top:10px;width:38px;height:38px}  /* 38px ≥ tap target */

  .exit-modal{
    right:12px;left:12px;bottom:12px;
    width:auto;
    max-height:80vh;max-height:80dvh;
    overflow-y:auto;
    padding:22px 20px;
  }
  .exit-modal h3{font-size:20px}
  .modal-orbit{display:none}       /* decorative, and it overflowed */
}
@media(max-width:400px){
  .promo-modal .promo-visual,.promo-modal>figure,.promo-modal>img{max-height:110px}
}

/* --- 5. Marquees and tickers: clip at the section, not the viewport -- */
.promo-strip,.ticker,.certificate-strip,.testimonial-wall{overflow:hidden;max-width:100vw}

/* --- 6. Tap targets and text sizing on small screens ----------------- */
@media(max-width:700px){
  .btn,.ax-btn,button,.nav a{min-height:44px}          /* WCAG 2.5.5 */
  .copy-inline{min-width:44px;min-height:44px}
  input,select,textarea{font-size:16px}                /* stops iOS auto-zoom */
  h1{font-size:clamp(34px,10vw,52px);line-height:1.05}
  h2{font-size:clamp(26px,7.5vw,38px);line-height:1.12}
  .section{padding-left:20px;padding-right:20px}
  .hero-copy{padding-right:8px}
}

/* --- 7. Tables and wide blocks scroll instead of stretching the page - */
@media(max-width:700px){
  .rule-grid,.condition-system,.bento{grid-template-columns:1fr!important}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* --- 8. Respect the notch --------------------------------------------- */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* --- 9. Consent banner ------------------------------------------------ */
.ax-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
  display:none;gap:14px;align-items:center;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;
  background:rgba(18,10,32,.97);border:1px solid rgba(233,120,255,.34);
  box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);
}
.ax-consent.show{display:flex}
.ax-consent p{margin:0;flex:1 1 280px;font-size:13px;line-height:1.55;color:#c9b6dd}
.ax-consent a{color:#ff5be0}
.ax-consent .ax-consent-actions{display:flex;gap:9px;flex-wrap:wrap}
.ax-consent button{
  padding:11px 18px;border-radius:10px;border:1px solid rgba(233,120,255,.34);
  background:transparent;color:#efe6fa;font:700 13px/1 inherit;cursor:pointer;min-height:44px;
}
.ax-consent button.primary{background:linear-gradient(100deg,#8d2cff,#ff0bc7);border-color:transparent;color:#fff}
@media(max-width:620px){
  .ax-consent{left:10px;right:10px;bottom:10px;padding:16px}
  .ax-consent .ax-consent-actions{width:100%}
  .ax-consent .ax-consent-actions button{flex:1}
}

/* --- 10. Tap targets on tablet too, not just phones -------------------
   The 44px rule was scoped to 700px, so tablets kept 13-26px controls.
   Inline links inside prose are exempt: padding them out would wreck
   the line rhythm, and they are not primary controls. ----------------- */
@media(max-width:900px){
  .btn,.ax-btn,button,.video-btn,.play-toggle,.mute-toggle,
  .copy-inline,.login,.nav a,.footer-nav a,.modal-close{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .copy-inline{min-width:44px}
  /* standalone links get a hit area without shifting the layout */
  .nav a,.footer-nav a,.login{padding:10px 12px}
}

/* Axion promotion stack: maximum three visible rows, remaining offers rotate */
.ax-promo-stack{position:relative;z-index:9997;display:grid;grid-template-rows:repeat(3,minmax(0,auto));overflow:hidden;background:#120719;border-bottom:1px solid rgba(255,255,255,.08)}
.ax-promo-slide{min-height:36px;display:none;align-items:center;justify-content:center;gap:14px;padding:7px 42px;background:linear-gradient(90deg,#7625dc,#ff2aa8);color:#fff;font-size:13px;font-weight:700;transition:opacity .35s,transform .35s}.ax-promo-slide.is-visible{display:flex}.ax-promo-slide:nth-child(3n+2){background:linear-gradient(90deg,#4b168f,#a31bd4)}.ax-promo-slide:nth-child(3n+3){background:linear-gradient(90deg,#27105c,#6c18b8)}.ax-promo-slide b{border:1px dashed rgba(255,255,255,.65);border-radius:7px;padding:2px 8px}.ax-promo-slide small{opacity:.9}.ax-promo-slide a{color:#fff;text-decoration:underline}.ax-promo-slide time{font-variant-numeric:tabular-nums}@media(max-width:760px){.ax-promo-slide{font-size:11px;gap:8px;padding:7px 12px;flex-wrap:wrap}.ax-promo-slide small{display:none}}

/* Discount chips on programme and balance selectors */
.type-tabs button,.size-tabs button{position:relative;overflow:visible}
.program-offer-chip,.plan-offer-chip{position:absolute;top:-10px;right:-8px;z-index:4;padding:4px 7px;border-radius:999px;background:linear-gradient(135deg,#8d2cff,#ff00b8);color:#fff;font:800 9px/1 Manrope,sans-serif;letter-spacing:.04em;box-shadow:0 7px 20px rgba(255,0,184,.34);border:1px solid rgba(255,255,255,.28);white-space:nowrap;font-style:normal}
.size-tabs button.active .plan-offer-chip,.type-tabs button.active .program-offer-chip{background:linear-gradient(135deg,#00d9a3,#00a7ff);box-shadow:0 7px 20px rgba(0,217,163,.26)}


/* v8.5.1 — premium selector discount chips */
.type-tabs .type-tab,
.size-tabs > button{position:relative!important;overflow:visible!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;isolation:isolate}
.type-tabs .type-tab > .program-offer-chip,
.size-tabs > button > .plan-offer-chip{position:absolute!important;top:-12px!important;right:-10px!important;left:auto!important;bottom:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:max-content!important;height:22px!important;padding:0 8px!important;margin:0!important;border:1px solid rgba(255,255,255,.42)!important;border-radius:999px!important;background:linear-gradient(135deg,#ff26c8 0%,#a827ff 52%,#6b5cff 100%)!important;box-shadow:0 8px 24px rgba(217,24,255,.38),inset 0 1px 0 rgba(255,255,255,.22)!important;color:#fff!important;font-family:Manrope,Inter,sans-serif!important;font-size:9px!important;font-weight:800!important;font-style:normal!important;line-height:1!important;letter-spacing:.07em!important;text-transform:uppercase!important;white-space:nowrap!important;pointer-events:none!important;transform:none!important;z-index:30!important}
.type-tabs .type-tab > .program-offer-chip::before,
.size-tabs > button > .plan-offer-chip::before{content:'✦';margin-right:4px;font-size:8px;opacity:.95}
.type-tabs .type-tab.active > .program-offer-chip,
.size-tabs > button.active > .plan-offer-chip{background:linear-gradient(135deg,#00d8b5 0%,#00a4ff 100%)!important;box-shadow:0 8px 24px rgba(0,190,225,.32),inset 0 1px 0 rgba(255,255,255,.28)!important}
@media(max-width:700px){.type-tabs .type-tab > .program-offer-chip,.size-tabs > button > .plan-offer-chip{top:-9px!important;right:-5px!important;height:19px!important;padding:0 6px!important;font-size:8px!important}}

/* Axion phase cards restoration v8.5.2 */
.phase-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 24px;overflow:visible!important;opacity:1!important;visibility:visible!important;height:auto!important}
.phase-section-head{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:2px;padding:0 2px}
.phase-section-head span{font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em}
.phase-section-head small{font-size:11px;color:rgba(220,188,235,.62)}
.phase-card{display:block!important;min-height:0;padding:18px;border:1px solid rgba(221,71,255,.22);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(125,30,175,.08));box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 34px rgba(22,0,35,.18)}
.phase-card-top{display:flex!important;align-items:center;gap:10px;padding-bottom:12px!important;margin:0 0 10px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.phase-card-top span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#aa24ff,#ff00b8);color:#fff!important;font-size:10px!important;font-weight:900}
.phase-card-top h4{margin:0!important;font-size:15px;color:#fff}
.phase-card>div:not(.phase-card-top){display:flex;justify-content:space-between;gap:12px;margin:8px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}
.phase-card>div:last-child{border-bottom:0;padding-bottom:0}
.phase-card>div span{color:rgba(215,184,229,.68)}
.phase-card>div b{color:#fff;font-size:12px}
.phase-empty{grid-column:1/-1;padding:18px;border:1px dashed rgba(220,74,255,.3);border-radius:15px;background:rgba(110,24,139,.07);display:flex;flex-direction:column;gap:5px}
.phase-empty b{color:#fff}.phase-empty span{font-size:12px;color:rgba(218,190,231,.65)}
@media(min-width:1150px){.phase-grid:has(.phase-card:nth-of-type(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.phase-grid{grid-template-columns:1fr}.phase-section-head{align-items:flex-start;flex-direction:column;gap:3px}}


/* Axion pricing recovery v8.5.3 */
.type-tabs,.size-tabs{display:flex!important;flex-wrap:wrap!important;column-gap:10px!important;row-gap:20px!important;overflow:visible!important;padding-top:13px!important;padding-right:8px!important}
.type-tabs .type-tab,.size-tabs>button{position:relative!important;min-height:46px!important;padding:0 18px!important;overflow:visible!important}
.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{top:-13px!important;right:-5px!important;transform:translateY(-2px)!important}
.plan-summary .pricing-offer-row{margin-top:16px!important;min-height:34px!important}
.plan-summary .pricing-coupon{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;color:rgba(238,220,247,.78)!important}
.plan-summary .pricing-coupon b{color:#fff!important;padding:6px 10px!important;border:1px solid rgba(236,72,255,.28)!important;border-radius:999px!important;background:rgba(255,255,255,.035)!important}
.phase-grid{display:grid!important;opacity:1!important;visibility:visible!important;max-height:none!important;min-height:120px!important;margin-top:24px!important}
.ax-promo-stack:empty{display:none!important}
.ax-promo-stack{position:relative;z-index:80}
.promo-modal.show{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.modal-backdrop.show{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
@media(max-width:700px){.type-tabs,.size-tabs{row-gap:18px!important}.type-tabs .type-tab,.size-tabs>button{padding:0 14px!important}.type-tabs .type-tab>.program-offer-chip,.size-tabs>button>.plan-offer-chip{right:0!important}}

/* Axion promotion banner description */
.ax-promo-slide .ax-promo-title{font-weight:800;white-space:nowrap}
.ax-promo-slide .ax-promo-description{font-weight:500;opacity:.9;max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-promo-slide strong,.ax-promo-slide small{white-space:nowrap}
@media(max-width:900px){.ax-promo-slide .ax-promo-description{max-width:260px}}
@media(max-width:760px){.ax-promo-slide .ax-promo-description{width:100%;max-width:none;text-align:center;white-space:normal;line-height:1.35;order:4}.ax-promo-slide .ax-promo-title{white-space:normal}}

/* ============================================================
   AXION PUBLIC UI HOTFIX 8.7.0
   Stable responsive header, creative mobile navigation and
   connected Help Center CTA. Tracking selectors are untouched.
   ============================================================ */

/* ----- Header: stable geometry on every desktop width ----- */
.header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:clamp(22px,3vw,52px);
    min-width:0;
    height:78px;
    padding-inline:clamp(22px,4vw,72px);
    isolation:isolate;
}
.header .logo{
    display:flex;
    align-items:center;
    min-width:0;
    flex:0 0 auto;
    position:relative;
    z-index:2;
}
.header .logo img{
    display:block;
    width:clamp(148px,11.5vw,184px);
    height:auto;
    max-width:none;
}
.header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,1.7vw,31px);
    margin:0;
    min-width:0;
}
.header-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 0;
    white-space:nowrap;
    color:#d8cedd;
    font-size:clamp(12px,.92vw,14px);
    transition:color .25s ease,transform .25s ease;
}
.header-nav a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:4px;
    height:1px;
    background:linear-gradient(90deg,#a92dff,#ff19d2);
    transition:right .3s cubic-bezier(.22,.61,.36,1);
}
.header-nav a:hover,
.header-nav a:focus-visible{
    color:#fff;
    transform:translateY(-1px);
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after{right:0}
.header-help-link{
    padding:8px 12px!important;
    border:1px solid rgba(207,73,255,.28);
    border-radius:999px;
    background:rgba(140,34,188,.10);
}
.header-help-link::after{display:none}
.header-help-link span{font-size:11px;color:#ff80e7}
.header-actions{
    justify-self:end;
    min-width:max-content;
}
.header-actions .btn.small{white-space:nowrap}
.menu{
    position:relative;
    z-index:102;
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-width:48px;
    height:44px;
    padding:0 13px;
    border:1px solid rgba(210,78,255,.30);
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,rgba(103,31,142,.28),rgba(15,7,24,.84));
    box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 36px rgba(0,0,0,.22);
    cursor:pointer;
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.menu:hover,.menu:focus-visible{border-color:rgba(238,88,255,.68);transform:translateY(-1px)}
.menu-label{font:700 10px/1 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.menu-lines{width:18px;height:15px;display:block;position:relative}
.menu-lines i{
    display:block;
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    border-radius:999px;
    background:#fff;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),top .35s,opacity .2s;
}
.menu-lines i:first-child{top:3px}
.menu-lines i:last-child{top:10px;width:13px;left:5px}
.menu[aria-expanded="true"] .menu-lines i:first-child{top:7px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-lines i:last-child{top:7px;left:0;width:18px;transform:rotate(-45deg)}

/* ----- Creative mobile navigation ----- */
.mobile-menu-shell{
    position:fixed;
    inset:0;
    z-index:1000;
    visibility:hidden;
    pointer-events:none;
}
.mobile-menu-shell.is-open{visibility:visible;pointer-events:auto}
.mobile-menu-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(2,0,6,.76);
    backdrop-filter:blur(9px);
    opacity:0;
    transition:opacity .35s ease;
}
.mobile-menu-shell.is-open .mobile-menu-backdrop{opacity:1}
.mobile-menu-panel{
    position:absolute;
    top:8px;
    right:8px;
    bottom:8px;
    width:min(430px,calc(100vw - 16px));
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(214,72,255,.34);
    border-radius:27px;
    background:
      radial-gradient(circle at 78% 14%,rgba(219,28,255,.22),transparent 32%),
      radial-gradient(circle at 10% 84%,rgba(109,51,255,.18),transparent 34%),
      linear-gradient(155deg,#160922 0%,#09040f 60%,#050208 100%);
    box-shadow:-34px 0 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.06);
    transform:translate3d(105%,0,0) scale(.985);
    transition:transform .48s cubic-bezier(.22,.75,.18,1);
}
.mobile-menu-shell.is-open .mobile-menu-panel{transform:translate3d(0,0,0) scale(1)}
.mobile-menu-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    background-image:
      radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.6px),
      radial-gradient(circle,rgba(240,128,255,.75) 0 1px,transparent 1.5px);
    background-size:92px 92px,137px 137px;
    background-position:22px 14px,65px 48px;
    mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.mobile-menu-head{
    position:relative;
    z-index:1;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu-head img{width:154px;height:auto;display:block}
.mobile-menu-close{
    width:43px;height:43px;position:relative;border:1px solid rgba(255,255,255,.13);border-radius:13px;
    background:rgba(255,255,255,.045);cursor:pointer;transition:background .25s,border-color .25s;
}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:rgba(204,42,255,.14);border-color:rgba(226,80,255,.45)}
.mobile-menu-close i{position:absolute;left:12px;top:20px;width:18px;height:2px;border-radius:2px;background:#fff}
.mobile-menu-close i:first-child{transform:rotate(45deg)}
.mobile-menu-close i:last-child{transform:rotate(-45deg)}
.mobile-menu-body{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    overflow:auto;
    overscroll-behavior:contain;
    padding:24px 20px 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(217,57,255,.4) transparent;
}
.mobile-menu-eyebrow{
    margin:0 0 12px;
    color:#9e87aa;
    font:700 10px/1.2 Manrope,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.mobile-menu-nav{display:grid;gap:7px}
.mobile-menu-nav a{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 24px;
    align-items:center;
    min-width:0;
    padding:13px 14px;
    border:1px solid transparent;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    color:#f7effb;
    transition:background .25s,border-color .25s,transform .25s;
}
.mobile-menu-nav a:hover,.mobile-menu-nav a:focus-visible{
    background:rgba(184,52,229,.11);
    border-color:rgba(208,67,255,.27);
    transform:translateX(3px);
}
.mobile-menu-nav small{color:#8b6e99;font:700 10px/1 Manrope,sans-serif;letter-spacing:.08em}
.mobile-menu-nav span{font:700 clamp(16px,4.5vw,19px)/1.2 Manrope,sans-serif}
.mobile-menu-nav i{justify-self:end;color:#d758ff;font-style:normal}
.mobile-help-feature{
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:16px;
    overflow:hidden;
    border:1px solid rgba(235,91,255,.36);
    border-radius:17px;
    background:linear-gradient(135deg,rgba(152,38,219,.25),rgba(81,24,123,.10));
    box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.mobile-help-feature::before{
    content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;top:-80px;
    background:radial-gradient(circle,rgba(253,56,225,.28),transparent 70%);pointer-events:none
}
.mobile-help-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#8c2cff,#ff10c8);font:800 22px/1 Manrope,sans-serif;color:#fff;box-shadow:0 12px 25px rgba(183,25,225,.24)}
.mobile-help-feature>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.mobile-help-feature small{color:#dc84ed;font:700 9px/1.2 Manrope,sans-serif;letter-spacing:.15em}
.mobile-help-feature b{margin-top:5px;color:#fff;font:700 14px/1.3 Manrope,sans-serif}
.mobile-help-feature em{margin-top:3px;color:#ad9ab7;font:500 11px/1.35 Inter,sans-serif;font-style:normal}
.mobile-help-feature>i{justify-self:end;color:#ff76e8;font-style:normal}
.mobile-menu-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;margin-top:18px}
.mobile-menu-actions>a{min-height:48px;border-radius:13px}
.mobile-login{display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);color:#fff;font-weight:700;background:rgba(255,255,255,.035)}
.mobile-menu-actions .btn{padding:13px 14px;font-size:13px;gap:9px}
.mobile-menu-foot{
    position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,.07);color:#786d80;font-size:10px
}
.mobile-menu-foot a{color:#d8b5e2;text-align:right}
body.mobile-menu-open{overflow:hidden;touch-action:none}

/* ----- Homepage Help Center CTA ----- */
.helpdesk-cta{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
    gap:clamp(38px,6vw,88px);
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    padding-top:clamp(90px,9vw,145px);
    padding-bottom:clamp(90px,9vw,145px);
    border-top:1px solid rgba(255,255,255,.045);
    border-bottom:1px solid rgba(255,255,255,.045);
    background:
      radial-gradient(circle at 14% 36%,rgba(153,45,221,.14),transparent 33%),
      radial-gradient(circle at 88% 58%,rgba(255,20,199,.10),transparent 34%),
      linear-gradient(180deg,rgba(9,4,15,.70),rgba(5,2,9,.92));
}
.helpdesk-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.helpdesk-backdrop::before{
    content:"";position:absolute;inset:0;opacity:.28;
    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:68px 68px;
    mask-image:linear-gradient(to right,transparent,#000 25%,#000 75%,transparent)
}
.helpdesk-backdrop i{position:absolute;border:1px solid rgba(202,70,255,.13);border-radius:50%;animation:helpOrbit 16s linear infinite}
.helpdesk-backdrop i:nth-child(1){width:540px;height:540px;right:-120px;top:50%;margin-top:-270px}
.helpdesk-backdrop i:nth-child(2){width:390px;height:390px;right:-45px;top:50%;margin-top:-195px;animation-direction:reverse;animation-duration:21s}
.helpdesk-backdrop i:nth-child(3){width:12px;height:12px;right:188px;top:21%;border:0;background:#f0a0ff;box-shadow:0 0 22px #e03cff;animation:helpPulse 2.4s ease-in-out infinite}
@keyframes helpOrbit{to{transform:rotate(360deg)}}
@keyframes helpPulse{50%{opacity:.34;transform:scale(.65)}}
.helpdesk-copy{max-width:650px}
.helpdesk-copy h2{margin:18px 0 18px;font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.045em}
.helpdesk-copy h2 em{font-style:normal;background:linear-gradient(90deg,#c66cff,#ff37d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.helpdesk-copy>p{max-width:620px;color:#b3a5bb;font-size:clamp(15px,1.2vw,18px);line-height:1.75}
.helpdesk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.helpdesk-link{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 18px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#fff;font-weight:750;background:rgba(255,255,255,.035);transition:border-color .25s,background .25s,transform .25s}
.helpdesk-link:hover{border-color:rgba(231,82,255,.48);background:rgba(187,45,220,.10);transform:translateY(-2px)}
.helpdesk-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:35px}
.helpdesk-trust span{display:flex;flex-direction:column;min-width:126px;padding:13px 15px;border-left:1px solid rgba(219,91,255,.28);background:linear-gradient(90deg,rgba(166,47,204,.055),transparent)}
.helpdesk-trust b{color:#fff;font:800 17px/1.2 Manrope,sans-serif}
.helpdesk-trust small{margin-top:3px;color:#817587;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.helpdesk-options{position:relative;display:grid;gap:13px;min-width:0}
.helpdesk-option{
    position:relative;
    display:grid;
    grid-template-columns:38px 58px minmax(0,1fr) 30px;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:20px 20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:19px;
    background:linear-gradient(145deg,rgba(31,14,45,.88),rgba(13,7,20,.88));
    box-shadow:0 22px 65px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);
    transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .35s,background .35s,box-shadow .35s;
}
.helpdesk-option::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 20%,rgba(230,87,255,.08),transparent 75%);transform:translateX(-45%);transition:opacity .35s,transform .55s}
.helpdesk-option:hover,.helpdesk-option:focus-visible{transform:translateX(-8px);border-color:rgba(224,76,255,.45);background:linear-gradient(145deg,rgba(50,19,68,.95),rgba(16,7,24,.94));box-shadow:0 28px 72px rgba(83,12,109,.24)}
.helpdesk-option:hover::after,.helpdesk-option:focus-visible::after{opacity:1;transform:translateX(35%)}
.helpdesk-option.is-primary{margin-left:-32px;border-color:rgba(222,73,255,.30);background:linear-gradient(145deg,rgba(70,21,91,.88),rgba(18,7,27,.94))}
.helpdesk-option-index{align-self:start;color:#6e6075;font:700 10px/1 Manrope,sans-serif;letter-spacing:.1em}
.helpdesk-option-icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(224,89,255,.24);border-radius:16px;background:rgba(174,49,222,.09);color:#f18aff;font:600 24px/1 Manrope,sans-serif}
.helpdesk-option>div{min-width:0}
.helpdesk-option small{color:#bf69d0;font:700 9px/1.2 Manrope,sans-serif;letter-spacing:.15em}
.helpdesk-option h3{margin:6px 0 5px;color:#fff;font-size:clamp(16px,1.4vw,21px);line-height:1.2}
.helpdesk-option p{margin:0;color:#96899e;font-size:12px;line-height:1.55}
.helpdesk-option>i{justify-self:end;color:#e56fff;font-style:normal;font-size:17px}

/* ----- Responsive protection: the logo and controls never collide ----- */
@media(max-width:1260px){
    .header{gap:22px;padding-inline:24px}
    .header-nav{gap:18px}
    .header-nav a{font-size:12px}
    .header-help-link{padding-inline:10px!important}
}
@media(max-width:1120px){
    .header{grid-template-columns:auto 1fr;height:74px}
    .header-nav{display:none!important}
    .header-actions{display:flex;justify-content:flex-end}
    .menu{display:inline-flex}
    .helpdesk-cta{grid-template-columns:1fr;gap:52px}
    .helpdesk-copy{max-width:760px}
    .helpdesk-options{max-width:850px;width:100%;margin-inline:auto}
    .helpdesk-option.is-primary{margin-left:0}
}
@media(max-width:700px){
    .header{height:66px;padding-inline:15px;gap:10px}
    .header .logo img{width:clamp(128px,36vw,148px)}
    .header-actions{gap:8px}
    .header-actions .login{display:none}
    .header-actions .btn.small{padding:11px 13px;border-radius:10px;font-size:11px;gap:7px;box-shadow:none}
    .menu{height:42px;min-width:42px;padding-inline:11px;border-radius:11px}
    .menu-label{display:none}
    .mobile-menu-panel{top:5px;right:5px;bottom:5px;width:calc(100vw - 10px);border-radius:23px}
    .mobile-menu-head{height:68px;padding-inline:16px}
    .mobile-menu-head img{width:145px}
    .mobile-menu-body{padding:20px 16px 17px}
    .mobile-menu-foot{padding-inline:16px}
    .helpdesk-cta{padding-inline:20px}
    .helpdesk-copy h2{font-size:clamp(41px,12vw,58px)}
    .helpdesk-actions{align-items:stretch}
    .helpdesk-actions>a{width:100%}
    .helpdesk-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
    .helpdesk-trust span{min-width:0;padding:11px 8px}
    .helpdesk-trust small{font-size:8px}
    .helpdesk-option{grid-template-columns:34px 48px minmax(0,1fr) 20px;gap:10px;padding:16px 13px;border-radius:16px}
    .helpdesk-option-icon{width:46px;height:46px;border-radius:13px;font-size:20px}
    .helpdesk-option p{font-size:11px}
}
@media(max-width:480px){
    .header-actions .btn.small{display:none}
    .header{grid-template-columns:minmax(0,1fr) auto}
    .menu{display:inline-flex}
    .mobile-menu-actions{grid-template-columns:1fr}
    .mobile-menu-foot{align-items:flex-start;flex-direction:column}
    .mobile-menu-foot a{text-align:left}
    .helpdesk-trust{grid-template-columns:1fr}
    .helpdesk-trust span{display:grid;grid-template-columns:60px 1fr;align-items:center}
    .helpdesk-option{grid-template-columns:28px 44px minmax(0,1fr)}
    .helpdesk-option>i{display:none}
    .helpdesk-option h3{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
    .mobile-menu-panel,.mobile-menu-backdrop,.menu-lines i,.helpdesk-option,.helpdesk-option::after{transition:none!important}
    .helpdesk-backdrop i{animation:none!important}
}

/* v3.3.0 — operating-company and payment disclosure */
.footer-entity-disclosure{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:46px;
}
.footer-entity-disclosure article,
.footer-entity-disclosure>div{
    min-width:0;
    padding:20px 22px;
    border:1px solid rgba(223,130,255,.18);
    border-radius:17px;
    background:linear-gradient(145deg,rgba(31,13,45,.76),rgba(12,6,19,.84));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.footer-entity-disclosure small{
    display:block;
    margin-bottom:8px;
    color:#c77bdf;
    font:800 9px/1.25 Manrope,sans-serif;
    letter-spacing:.15em;
}
.footer-entity-disclosure strong{
    display:block;
    color:#fff;
    font:750 15px/1.4 Manrope,sans-serif;
    overflow-wrap:anywhere;
}
.footer-entity-disclosure p{
    margin:7px 0 0;
    color:#9e91a7;
    font-size:11.5px;
    line-height:1.65;
    overflow-wrap:anywhere;
}
@media(max-width:980px){.footer-entity-disclosure{grid-template-columns:1fr 1fr}.footer-entity-disclosure>*:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:620px){.footer-entity-disclosure{grid-template-columns:1fr;margin-top:34px}.footer-entity-disclosure>*:last-child:nth-child(odd){grid-column:auto}}

/* ============================================================
   AXION CHALLENGE SELECTOR + EXIT INTENT v3.4.0
   Responsive option cards for any programme/account count.
   ============================================================ */
.selector-section-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:#fff}
.selector-section-head.balance-head{margin-top:25px}
.selector-section-head>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border:1px solid rgba(239,87,255,.34);border-radius:11px;background:linear-gradient(145deg,rgba(189,38,255,.18),rgba(255,22,198,.06));color:#f190ff;font:800 11px/1 Manrope,sans-serif;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.selector-section-head b,.selector-section-head small{display:block}.selector-section-head b{font:800 13px/1.2 Manrope,sans-serif;letter-spacing:.01em}.selector-section-head small{margin-top:3px;color:rgba(223,194,235,.58);font-size:10px;line-height:1.4}
.type-tabs.choice-grid,.size-tabs.choice-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:11px!important;padding:0!important;overflow:visible!important}
.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:minmax(190px,280px)!important}
.type-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(170px,1fr))!important}
.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(150px,1fr))!important}
.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{position:relative!important;min-width:0!important;min-height:82px!important;width:100%!important;display:grid!important;grid-template-columns:31px minmax(0,1fr) 24px!important;align-items:center!important;gap:10px!important;margin:0!important;padding:14px 13px!important;border:1px solid rgba(211,83,255,.2)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(91,19,118,.07))!important;color:#e8ddeb!important;text-align:left!important;overflow:hidden!important;isolation:isolate;box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 28px rgba(10,0,17,.13)!important;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease!important}
.type-tabs.choice-grid .type-tab::before,.size-tabs.choice-grid>button::before{content:"";position:absolute;inset:auto -35% -75% 20%;height:150%;border-radius:50%;background:radial-gradient(circle,rgba(223,28,255,.18),transparent 66%);opacity:0;transform:translateY(15px);transition:.25s;z-index:-1}
.type-tabs.choice-grid .type-tab:hover,.size-tabs.choice-grid>button:hover{transform:translateY(-2px)!important;border-color:rgba(226,85,255,.47)!important;background:linear-gradient(145deg,rgba(198,45,255,.11),rgba(255,32,201,.045))!important;box-shadow:0 16px 38px rgba(94,14,129,.18),inset 0 1px rgba(255,255,255,.07)!important}
.type-tabs.choice-grid .type-tab:hover::before,.size-tabs.choice-grid>button:hover::before,.type-tabs.choice-grid .type-tab.active::before,.size-tabs.choice-grid>button.active::before{opacity:1;transform:none}
.type-tabs.choice-grid .type-tab.active,.size-tabs.choice-grid>button.active{border-color:rgba(255,55,221,.82)!important;background:linear-gradient(145deg,rgba(180,34,255,.24),rgba(255,12,190,.13))!important;box-shadow:0 16px 40px rgba(191,27,255,.2),inset 0 0 0 1px rgba(255,255,255,.07)!important;color:#fff!important}
.selector-order{width:31px;height:31px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(0,0,0,.16);color:rgba(225,186,239,.56);font:800 9px/1 Manrope,sans-serif;letter-spacing:.05em}
.type-tab.active .selector-order,.size-tabs>button.active .selector-order{border-color:rgba(255,255,255,.2);background:linear-gradient(135deg,#9f2cff,#ff0bc7);color:#fff;box-shadow:0 7px 18px rgba(255,11,199,.25)}
.selector-main{min-width:0;display:block!important}.selector-main strong,.selector-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selector-main strong{color:inherit;font:800 15px/1.25 Manrope,sans-serif}.selector-main small{margin-top:4px;color:rgba(218,193,229,.55);font:600 9.5px/1.35 Inter,sans-serif}.active .selector-main small{color:rgba(255,235,250,.68)}
.selector-check{width:22px;height:22px;display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:transparent;background:rgba(255,255,255,.025);font-size:11px;font-weight:900}.active .selector-check{border-color:rgba(64,244,199,.3);background:rgba(21,223,168,.13);color:#54edc8}
.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{position:absolute!important;top:7px!important;right:8px!important;left:auto!important;bottom:auto!important;transform:none!important;display:inline-flex!important;align-items:center!important;width:auto!important;min-width:0!important;height:19px!important;padding:0 6px!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:7px!important;background:linear-gradient(135deg,#7c31f1,#ff16bc)!important;color:#fff!important;font:800 7.5px/1 Manrope,sans-serif!important;letter-spacing:.045em!important;box-shadow:0 6px 14px rgba(188,25,255,.22)!important;pointer-events:none!important;z-index:4!important}
.type-tabs.choice-grid .program-offer-chip::before,.size-tabs.choice-grid .plan-offer-chip::before{content:""!important;margin:0!important}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,.size-tabs.choice-grid>button.active>.plan-offer-chip{background:linear-gradient(135deg,#0ebc9b,#00a9e8)!important;box-shadow:0 6px 14px rgba(0,191,177,.18)!important}
.pricing-offer-row .pricing-coupon{border:1px solid rgba(227,87,255,.17);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.025)}
.pricing-offer-label{color:rgba(224,193,236,.62);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.pricing-coupon .coupon-code{padding:0!important;border:0!important;background:none!important;color:#fff!important;font-size:12px!important}
.exit-modal{width:min(420px,calc(100vw - 24px))!important;padding:30px!important;border-radius:24px!important;background:radial-gradient(circle at 85% 0,rgba(202,36,255,.19),transparent 40%),linear-gradient(155deg,#190922,#0b0410)!important;border:1px solid rgba(244,74,255,.5)!important;box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.06)!important;text-align:left!important}
.exit-modal>img{position:absolute!important;right:10px!important;top:4px!important;width:142px!important;opacity:.9;pointer-events:none}.exit-modal>span{display:block!important;color:#ea72ff!important;font:800 9px/1 Manrope,sans-serif!important;letter-spacing:.17em!important}.exit-modal h2{max-width:280px;margin:10px 0 12px!important;font-size:clamp(29px,4vw,42px)!important;line-height:.98!important;letter-spacing:-.045em!important}.exit-modal>p{max-width:330px;margin:0 0 18px!important;color:rgba(232,214,239,.68)!important;font-size:13px!important;line-height:1.65!important;text-align:left!important}.exit-modal>.btn{margin-top:16px!important;min-width:190px!important}
.exit-auto-offer,.exit-offer-code{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:center;padding:13px 14px;border:1px solid rgba(224,82,255,.25);border-radius:14px;background:linear-gradient(135deg,rgba(173,35,255,.13),rgba(255,27,195,.055));overflow:hidden}.exit-auto-offer::after,.exit-offer-code::after{content:"";position:absolute;right:-22px;top:-35px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,42,216,.22),transparent 68%)}
.exit-auto-offer span,.exit-offer-code>span{grid-column:1/-1;color:#b893c7!important;font:800 8px/1 Manrope,sans-serif!important;letter-spacing:.14em!important}.exit-auto-offer b,.exit-offer-code b{color:#fff;font-size:17px;line-height:1.2}.exit-auto-offer small{color:#bca9c5;font-size:9.5px}.exit-offer-code .copy-inline{justify-self:end;min-height:34px!important}
.exit-offer-time{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025)}.exit-offer-time span{color:#9a7ca8!important;font-size:8px!important;font-weight:800;letter-spacing:.1em}.exit-offer-time time{color:#fff;font:800 12px/1 'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
@media(max-width:1180px){.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(160px,1fr))!important}}
@media(max-width:700px){.selector-section-head{margin-bottom:10px}.selector-section-head.balance-head{margin-top:20px}.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.type-tabs.choice-grid[data-count="1"],.size-tabs.choice-grid[data-count="1"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:74px!important;grid-template-columns:25px minmax(0,1fr) 18px!important;gap:7px!important;padding:12px 9px!important;border-radius:13px!important}.selector-order{width:25px;height:25px;border-radius:8px;font-size:8px}.selector-main strong{font-size:13px}.selector-main small{font-size:8.5px}.selector-check{width:18px;height:18px;border-radius:6px;font-size:9px}.type-tabs.choice-grid .program-offer-chip,.size-tabs.choice-grid .plan-offer-chip{top:5px!important;right:5px!important;height:17px!important;font-size:6.8px!important}.exit-modal{padding:25px 20px!important}.exit-modal>img{width:112px!important;opacity:.72}}
@media(max-width:420px){.type-tabs.choice-grid,.size-tabs.choice-grid,.type-tabs.choice-grid[data-count="2"],.type-tabs.choice-grid[data-count="3"],.size-tabs.choice-grid[data-count="2"],.size-tabs.choice-grid[data-count="3"]{grid-template-columns:1fr!important}.type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important}}

/* Axion pricing selector refinement v3.4.1 */
.type-tabs.choice-grid,
.size-tabs.choice-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.type-tabs.choice-grid .type-tab,
.size-tabs.choice-grid>button{
  position:relative!important;
  min-width:0!important;
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  padding:14px 13px!important;
  overflow:visible!important;
  border:1px solid rgba(214,117,255,.22)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(143,34,206,.035))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
  text-align:left!important;
}
.type-tabs.choice-grid .type-tab:hover,
.size-tabs.choice-grid>button:hover{
  border-color:rgba(238,78,255,.58)!important;
  background:linear-gradient(145deg,rgba(190,49,255,.12),rgba(255,16,194,.055))!important;
  transform:translateY(-2px)!important;
}
.type-tabs.choice-grid .type-tab.active,
.size-tabs.choice-grid>button.active{
  border-color:rgba(255,39,213,.9)!important;
  background:linear-gradient(145deg,rgba(158,29,239,.32),rgba(255,12,190,.16))!important;
  box-shadow:0 14px 34px rgba(166,30,226,.22),inset 0 1px rgba(255,255,255,.12)!important;
}
.type-tabs.choice-grid .type-tab.active:after,
.size-tabs.choice-grid>button.active:after{
  content:""!important;
  position:absolute!important;
  inset:auto 13px 0 13px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#ff26d0,#8d5cff,transparent)!important;
  box-shadow:0 0 14px rgba(255,38,208,.65)!important;
}
.type-tabs.choice-grid .selector-order,
.size-tabs.choice-grid .selector-order{
  width:34px!important;
  height:34px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(227,141,255,.18)!important;
  background:rgba(255,255,255,.035)!important;
  color:#a98db7!important;
  font-size:9px!important;
  font-weight:900!important;
}
.type-tabs.choice-grid .active .selector-order,
.size-tabs.choice-grid>button.active .selector-order{
  border-color:rgba(255,255,255,.18)!important;
  background:linear-gradient(135deg,#a126ff,#ff13bd)!important;
  color:#fff!important;
}
.type-tabs.choice-grid .selector-main,
.size-tabs.choice-grid .selector-main{min-width:0!important;display:block!important}
.type-tabs.choice-grid .selector-main strong,
.size-tabs.choice-grid .selector-main strong{
  display:block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  color:#f8f2fb!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:800!important;
}
.type-tabs.choice-grid .selector-main small,
.size-tabs.choice-grid .selector-main small,
.type-tabs.choice-grid .selector-check,
.size-tabs.choice-grid .selector-check{display:none!important}
.type-tabs.choice-grid .program-offer-chip,
.size-tabs.choice-grid .plan-offer-chip{
  top:-8px!important;
  right:9px!important;
  height:20px!important;
  padding:0 8px!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#7735f4,#ff18bc)!important;
  box-shadow:0 8px 20px rgba(198,24,238,.3)!important;
  color:#fff!important;
  font-size:7.5px!important;
  letter-spacing:.045em!important;
}
.type-tabs.choice-grid .type-tab.active>.program-offer-chip,
.size-tabs.choice-grid>button.active>.plan-offer-chip{
  background:linear-gradient(135deg,#00bfa5,#009fe8)!important;
}
@media(max-width:620px){
  .type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .type-tabs.choice-grid .type-tab,.size-tabs.choice-grid>button{min-height:68px!important;padding:12px 10px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:8px!important}
  .type-tabs.choice-grid .selector-order,.size-tabs.choice-grid .selector-order{width:29px!important;height:29px!important;border-radius:9px!important}
  .type-tabs.choice-grid .selector-main strong,.size-tabs.choice-grid .selector-main strong{font-size:13px!important}
}
@media(max-width:390px){.type-tabs.choice-grid,.size-tabs.choice-grid{grid-template-columns:1fr!important}}
/* v2.0.18 Affiliate Network homepage CTA */
.affiliate-home-cta{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);background:radial-gradient(circle at 78% 38%,rgba(187,42,235,.12),transparent 28%)}.affiliate-home-copy{max-width:680px}.affiliate-home-copy h2{font-size:clamp(46px,5vw,76px);line-height:.97;letter-spacing:-.055em;margin:12px 0 20px}.affiliate-home-copy h2 em{font-style:normal;color:#e260ff}.affiliate-home-copy>p{color:var(--muted,#aaa);line-height:1.75;max-width:650px}.affiliate-home-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.affiliate-home-chips span{font-size:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#ccb9d5;background:rgba(255,255,255,.025)}.affiliate-home-visual{min-height:500px;position:relative;display:grid;place-items:center}.affiliate-home-visual>img{max-height:485px;max-width:70%;position:relative;z-index:2;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}.affiliate-home-ring{position:absolute;width:430px;height:430px;border:1px solid rgba(222,67,255,.17);border-radius:50%;box-shadow:inset 0 0 60px rgba(164,45,234,.08)}.affiliate-home-visual article{position:absolute;z-index:3;width:190px;padding:14px;border-radius:14px;border:1px solid rgba(234,91,255,.22);background:rgba(16,10,24,.84);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.32)}.affiliate-home-visual article:first-of-type{left:3%;top:24%}.affiliate-home-visual article:last-of-type{right:2%;bottom:20%}.affiliate-home-visual article small,.affiliate-home-visual article span{display:block;color:#a995b3;font-size:9px}.affiliate-home-visual article b{display:block;font-size:20px;margin:5px 0}@media(max-width:900px){.affiliate-home-cta{grid-template-columns:1fr}.affiliate-home-visual{min-height:420px}.affiliate-home-visual>img{max-height:390px}}@media(max-width:560px){.affiliate-home-copy h2{font-size:43px}.affiliate-home-visual{min-height:360px}.affiliate-home-ring{width:310px;height:310px}.affiliate-home-visual article{width:145px;padding:10px}.affiliate-home-visual article:first-of-type{left:-5px}.affiliate-home-visual article:last-of-type{right:-5px}}

/* =====================================================================
   v2.0.23 — certificates, momentum showcase and exhibition visual refresh
   ===================================================================== */
.certificate-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.certificate-wall-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border:1px solid rgba(255,91,224,.28);border-radius:12px;background:rgba(141,44,255,.08);color:#f0e7f7;font-size:11px;font-weight:800;letter-spacing:.02em;transition:.22s}
.certificate-wall-link:hover{transform:translateY(-2px);border-color:rgba(255,91,224,.65);background:rgba(141,44,255,.16)}
.cert-card{width:520px;grid-template-columns:minmax(0,1fr) 176px;padding:18px 18px 14px 22px;gap:14px 18px}
.cert-preview-mini{width:176px;aspect-ratio:1.6/1;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#0b0612;position:relative;z-index:1}
.cert-preview-mini svg{display:block;width:100%;height:100%}
.cert-open{grid-column:1/3;display:inline-flex;align-items:center;width:max-content;color:#ff72dd;font-size:10px;font-weight:800;letter-spacing:.08em;position:relative;z-index:2}
.cert-open:hover{color:#fff}
.certificate-empty-public{max-width:1400px;margin:0 auto;padding:24px max(4vw,24px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(56,15,66,.48),rgba(16,8,25,.62));display:flex;align-items:center;justify-content:space-between;gap:22px}
.certificate-empty-public b,.certificate-empty-public span{display:block}.certificate-empty-public span{margin-top:7px;color:var(--muted);font-size:13px}.certificate-empty-public a{color:#ff72dd;font-weight:800;font-size:12px;white-space:nowrap}

.milestone-showcase{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;max-width:1400px;margin:0 auto}
.milestone-loop-card{position:relative;min-height:620px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#08040d;box-shadow:0 24px 80px rgba(49,7,73,.34)}
.milestone-loop-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(5,2,9,.94) 100%);pointer-events:none}
.milestone-loop-card video{width:100%;height:100%;min-height:620px;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.03)}
.milestone-loop-overlay{position:absolute;left:28px;right:28px;bottom:28px;z-index:2;padding:20px 22px;border:1px solid rgba(255,91,224,.2);border-radius:18px;background:rgba(10,4,16,.64);backdrop-filter:blur(18px)}
.milestone-loop-overlay span{display:block;color:#ff5bdd;font:800 10px/1.2 Space Grotesk,sans-serif;letter-spacing:.18em}.milestone-loop-overlay b{display:block;font-size:26px;margin:8px 0 4px}.milestone-loop-overlay small{color:var(--muted);font-size:12px}
.milestone-thumb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.milestone-thumb{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(155deg,rgba(28,13,41,.94),rgba(8,4,13,.9));transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s;min-width:0}
.milestone-thumb:hover{transform:translateY(-6px);border-color:rgba(255,91,224,.45);box-shadow:0 24px 60px rgba(99,18,132,.23)}
.milestone-thumb-media{aspect-ratio:16/8.2;overflow:hidden;background:#090410}.milestone-thumb-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--motion-smooth)}.milestone-thumb:hover img{transform:scale(1.035)}
.milestone-thumb>div:last-child{padding:18px 18px 20px}.milestone-thumb span{color:#ff5bdd;font-size:9px;font-weight:800;letter-spacing:.16em}.milestone-thumb h3{font-size:18px;margin:7px 0 6px}.milestone-thumb p{color:var(--muted);font-size:12px;line-height:1.55;margin:0}

.expo-grid-generated article{position:relative;overflow:hidden;transition:transform .3s var(--motion-smooth),border-color .3s,box-shadow .3s}.expo-grid-generated article:hover{transform:translateY(-7px);border-color:rgba(255,91,224,.42);box-shadow:0 26px 70px rgba(72,10,104,.28)}
.expo-grid-generated .expo-visual{height:430px;background:#090510}.expo-grid-generated .expo-visual img{position:static;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .7s var(--motion-smooth)}.expo-grid-generated article:hover .expo-visual img{transform:scale(1.035)}
.expo-grid-generated .expo-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,2,9,.76));pointer-events:none}.expo-grid-generated .expo-visual span{z-index:2;padding:7px 10px;border:1px solid rgba(255,91,224,.28);border-radius:9px;background:rgba(8,4,13,.68);backdrop-filter:blur(10px);font-weight:800}.expo-grid-generated article>small{display:block;margin:18px 20px 0;color:#ff5bdd;font-size:9px;font-weight:800;letter-spacing:.16em}.expo-grid-generated h3{font-size:23px;margin-top:7px;margin-bottom:0}.expo-grid-generated p{margin-top:6px;margin-bottom:22px}

@media(max-width:1100px){.milestone-showcase{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:500px}}
@media(max-width:700px){.certificate-head-actions{justify-content:flex-start}.certificate-empty-public{margin:0 20px;flex-direction:column;align-items:flex-start}.cert-card{width:350px;grid-template-columns:1fr 112px}.cert-preview-mini{width:112px}.milestone-thumb-grid{grid-template-columns:1fr}.milestone-loop-card,.milestone-loop-card video{min-height:360px}.milestone-loop-overlay{left:14px;right:14px;bottom:14px;padding:15px}.milestone-loop-overlay b{font-size:20px}.expo-grid-generated .expo-visual{height:360px}}
@media(prefers-reduced-motion:reduce){.milestone-loop-card video{display:none}.milestone-loop-card{background:url('../images/hotfix-20260816/milestone-trader-progress.webp') center/cover no-repeat}.milestone-thumb,.expo-grid-generated article,.milestone-thumb-media img,.expo-grid-generated .expo-visual img{transition:none!important}}