: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}
}