/* =====================================================================
   NX HOME — dedicated homepage redesign stylesheet (client reference).
   Self-contained: hardcoded palette, own class namespace (nx-*), loaded
   only on the homepage so it cannot affect any other page.
   ===================================================================== */

:root {
    --nx-bg: #060a14;
    --nx-surface: #0c1424;
    --nx-surface-2: #101b30;
    --nx-line: rgba(255, 255, 255, .08);
    --nx-teal: #17e0c3;
    --nx-blue: #2f8fff;
    --nx-text: #eef3fb;
    --nx-text-dim: rgba(238, 243, 251, .68);
    --nx-ease: cubic-bezier(.19, 1, .22, 1);
}

/* the homepage owns its own dark canvas end-to-end */
body:has(.nx-hero) .main-wrapper,
body:has(.nx-hero) {
    background-color: var(--nx-bg);
}

.nx-section {
    padding: 2rem 0;
    position: relative;
    overflow-x: clip;
}

.nx-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.nx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nx-teal);
    margin-bottom: .9rem;
}

.nx-eyebrow::before {
    content: '';
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nx-teal), var(--nx-blue));
}

.nx-title {
    font-family: 'Plus Jakarta Sans', 'Exo 2', sans-serif;
    font-weight: 800;
    font-size: 2.4rem;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.nx-sub {
    color: var(--nx-text-dim);
    font-size: 1.02rem;
    margin-top: .6rem;
}

.nx-head {
    text-align: center;
    margin-bottom: 1.9rem;
}

@media (max-width: 767px) {
    .nx-title { font-size: 1.8rem; }
    .nx-section { padding: 1.6rem 0; }
}

/* ---------------- navbar tagline ---------------- */
.nx-navtag {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--nx-teal);
    text-transform: uppercase;
    margin-top: -2px;
}

/* ---------------- hero ---------------- */
.nx-hero {
    background: var(--nx-bg);
    padding-top: 10.5rem;
    padding-bottom: 4rem;
    overflow: hidden;
    position: relative;
}

.nx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 55% at 12% 10%, rgba(23, 224, 195, .16) 0%, transparent 60%),
        radial-gradient(40% 50% at 90% 20%, rgba(47, 143, 255, .14) 0%, transparent 60%);
    pointer-events: none;
}

.nx-hero__title {
    font-family: 'Plus Jakarta Sans', 'Exo 2', sans-serif;
    font-weight: 800;
    font-size: 3.1rem;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.nx-hero__title span {
    display: block;
}

.nx-hero__title .nx-gradient {
    background: linear-gradient(90deg, var(--nx-teal), var(--nx-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}

@media (max-width: 991px) {
    .nx-hero__title { font-size: 2.5rem; }
}

@media (max-width: 575px) {
    .nx-hero__title { font-size: 1.9rem; }
}

.nx-hero__desc {
    color: var(--nx-text-dim);
    font-size: 1.05rem;
    max-width: 560px;
    margin-top: 1.1rem;
}

.nx-hero__mini {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 1.1rem;
    margin-top: 2rem;
}

@media (max-width: 1199px) {
    .nx-hero__mini { grid-template-columns: repeat(2, auto); gap: 1.1rem 1.6rem; }
}

@media (max-width: 480px) {
    .nx-hero__mini { grid-template-columns: 1fr; }
}

.nx-hero__mini-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.nx-hero__mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 224, 195, .12);
    border: 1px solid rgba(23, 224, 195, .25);
    color: var(--nx-teal);
    font-size: 1rem;
    flex-shrink: 0;
}

.nx-hero__mini-title {
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap;
}

.nx-hero__mini-sub {
    font-size: .71rem;
    color: var(--nx-text-dim);
    white-space: nowrap;
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .nx-hero__mini { gap: .8rem; }
    .nx-hero__mini-icon { width: 30px; height: 30px; font-size: .9rem; }
    .nx-hero__mini-title { font-size: .74rem; }
    .nx-hero__mini-sub { font-size: .67rem; }
}

.nx-hero__cta {
    display: flex;
    gap: 1rem;
    margin-top: 2.2rem;
    flex-wrap: wrap;
}

.nx-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.7rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .95rem;
    transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease), background .3s ease, color .3s ease;
    border: 1px solid transparent;
}

.nx-btn--solid {
    background: linear-gradient(90deg, var(--nx-teal), var(--nx-blue));
    color: #04211c;
    box-shadow: 0 16px 30px -14px rgba(23, 224, 195, .55);
}

.nx-btn--solid:hover {
    transform: translateY(-3px);
    color: #04211c;
}

.nx-btn--outline {
    background: transparent;
    border-color: var(--nx-line);
    color: #fff;
}

.nx-btn--outline:hover {
    border-color: var(--nx-teal);
    color: var(--nx-teal);
    transform: translateY(-3px);
}

/* hero graphic */
.nx-hero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-scene {
    width: 100%;
    max-width: 560px;
    height: auto;
    overflow: visible;
}

/* the badge and the chart drift on slightly different rhythms so the scene
   never reads as one rigid block sliding up and down */
.nx-scene__badge {
    transform-box: fill-box;
    transform-origin: center;
    animation: nxFloatY 6s ease-in-out infinite;
}

.nx-scene__chart,
.nx-scene__coins {
    transform-box: fill-box;
    transform-origin: center;
    animation: nxFloatY 7.5s ease-in-out infinite;
    animation-delay: -1.5s;
}

.nx-scene__arrow {
    transform-box: fill-box;
    transform-origin: center;
    animation: nxFloatY 8s ease-in-out infinite reverse;
}

.nx-scene__ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: nxSpin 26s linear infinite;
}

.nx-scene__bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: nxBarPulse 3.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes nxFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

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

@keyframes nxBarPulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.93); }
}

@media (prefers-reduced-motion: reduce) {
    .nx-scene__badge,
    .nx-scene__chart,
    .nx-scene__coins,
    .nx-scene__arrow,
    .nx-scene__ring,
    .nx-scene__bar { animation: none !important; }
}

@media (max-width: 991px) {
    .nx-hero__art { margin-top: 2rem; }
    .nx-scene { max-width: 460px; }
}

/* ---------------- stats bar ---------------- */
.nx-stats {
    margin-top: -3.2rem;
    position: relative;
    z-index: 3;
}

.nx-stats__row {
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 18px;
    padding: 1.6rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

@media (max-width: 767px) {
    .nx-stats__row { grid-template-columns: repeat(2, 1fr); }
}

.nx-stat {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .4rem;
}

.nx-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(23, 224, 195, .12);
    color: var(--nx-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.nx-stat__value {
    font-weight: 800;
    font-size: 1.25rem;
    color: #fff;
    line-height: 1.2;
}

.nx-stat__label {
    font-size: .78rem;
    color: var(--nx-text-dim);
}

/* ---------------- plans ---------------- */
.nx-plans {
    background: var(--nx-bg);
}

.nx-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: stretch;
    /* keeps each card in a tall, slim proportion instead of a wide slab */
    max-width: 1040px;
    margin: 0 auto;
}

/* hold all five tiers on one row for as long as they stay readable */
@media (max-width: 1099px) {
    .nx-plan-grid { grid-template-columns: repeat(3, 1fr); gap: 1.7rem 1rem; max-width: 660px; }
}

@media (max-width: 767px) {
    .nx-plan-grid { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
}

@media (max-width: 479px) {
    .nx-plan-grid { grid-template-columns: 1fr; max-width: 300px; }
}

.nx-plan {
    --tier: var(--nx-teal);
    --tier-2: var(--nx-blue);
    position: relative;
    margin-top: 13px;
    padding: 2.4rem .95rem 1.5rem;
    text-align: center;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tier) 15%, transparent) 0%, transparent 45%),
        var(--nx-surface);
    transition: transform .4s var(--nx-ease), box-shadow .4s var(--nx-ease);
}

.nx-plan:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--tier) 60%, transparent);
}

.nx-plan__tier {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem 1.15rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #04140f;
    background: linear-gradient(90deg, var(--tier), var(--tier-2));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tier) 80%, transparent);
}

.nx-plan__name {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.nx-plan__price {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: .35rem 0 1.05rem;
}

.nx-plan__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border-top: 1px solid var(--nx-line);
    font-size: .78rem;
    color: var(--nx-text-dim);
    text-align: left;
}

.nx-plan__row b {
    color: var(--tier);
    font-weight: 700;
    white-space: nowrap;
}

.nx-plan__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.15rem;
    padding: .68rem;
    border-radius: 9px;
    font-size: .85rem;
    font-weight: 700;
    color: #04140f;
    background: linear-gradient(90deg, var(--tier), var(--tier-2));
    transition: transform .3s var(--nx-ease), filter .3s ease;
}

.nx-plan__btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #04140f;
}

.nx-plan--1 { --tier: #17e0c3; --tier-2: #0ea895; }
.nx-plan--2 { --tier: #4fa8ff; --tier-2: #2f6fe0; }
.nx-plan--3 { --tier: #b98bff; --tier-2: #8c5cf0; }
.nx-plan--4 { --tier: #ffc15c; --tier-2: #ff9d33; }
.nx-plan--5 { --tier: #ff7bac; --tier-2: #ef4f8c; }

.nx-plans__note-wrap {
    text-align: center;
}

.nx-plans__note {
    display: inline-block;
    margin-top: 2rem;
    padding: .5rem 1.4rem;
    border: 1px dashed var(--nx-line);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--nx-text-dim);
}

/* ---------------- how it works ---------------- */
.nx-steps {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
}

.nx-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding-right: 1.7rem;
    text-align: left;
}

.nx-step:last-child {
    padding-right: 0;
}

.nx-step__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nx-surface-2);
    border: 1px solid color-mix(in srgb, var(--nx-teal) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--nx-teal);
}

.nx-step__text {
    min-width: 0;
}

.nx-step__title {
    font-weight: 700;
    color: #fff;
    font-size: .88rem;
    line-height: 1.3;
}

.nx-step__sub {
    font-size: .74rem;
    color: var(--nx-text-dim);
    margin-top: .25rem;
    line-height: 1.45;
}

.nx-step__arrow {
    position: absolute;
    top: 15px;
    right: .25rem;
    color: rgba(255, 255, 255, .22);
    font-size: 1.3rem;
}

@media (max-width: 1199px) {
    .nx-steps { flex-wrap: wrap; gap: 1.6rem .3rem; }
    .nx-step { flex: 1 1 45%; }
}

@media (max-width: 575px) {
    .nx-steps { flex-direction: column; gap: 1.5rem; }
    .nx-step { flex: 1 1 auto; padding-right: 0; }
    .nx-step__arrow { display: none; }
}

/* ---------------- referral + spin ---------------- */
.nx-panel {
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
}

.nx-panel__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.nx-panel__desc {
    color: var(--nx-text-dim);
    font-size: .92rem;
    margin-top: .5rem;
}

.nx-bullets {
    margin-top: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.nx-bullet {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: #fff;
}

.nx-bullet i {
    color: var(--nx-teal);
}

.nx-reflabel {
    margin-top: 1.5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.nx-refbox {
    margin-top: .5rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.nx-refbox input {
    flex: 1 1 220px;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-line);
    border-radius: 10px;
    padding: .7rem 1rem;
    color: #fff;
    font-size: .85rem;
}

.nx-spinwheel-wrap {
    position: relative;
    width: 260px;
    max-width: 100%;
    margin: 0 auto 1.2rem;
    aspect-ratio: 1;
}

.nx-spinwheel-rotor {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #8a5a10, 0 22px 45px -18px rgba(0, 0, 0, .7);
    animation: nxSpinSlow 22s linear infinite;
}

.nx-spinwheel-rotor canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

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

@media (prefers-reduced-motion: reduce) {
    .nx-spinwheel-rotor { animation: none; }
}

.nx-spinwheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 22px solid #F5D061;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
    z-index: 3;
}

.nx-spinwheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    color: #5c1414;
    background: radial-gradient(circle at 35% 30%, #FFF3C4, #F5D061 45%, #C98A1A 100%);
    border: 4px solid #8a5a10;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .5);
    z-index: 2;
}

/* ---------------- about cards ---------------- */
.nx-about-card {
    height: 100%;
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--nx-line);
    background: var(--nx-surface);
    transition: transform .4s var(--nx-ease), border-color .4s ease;
}

.nx-about-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--nx-teal) 45%, transparent);
}

.nx-about-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 224, 195, .12);
    color: var(--nx-teal);
    font-size: 1.15rem;
    margin-bottom: .7rem;
}

.nx-about-card__title {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
}

.nx-about-card__text {
    font-size: .8rem;
    line-height: 1.6;
    color: var(--nx-text-dim);
    margin-top: .35rem;
}

/* ---------------- dashboard preview mock ---------------- */
.nx-mock {
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
}

.nx-mock__body {
    display: flex;
    gap: .9rem;
    align-items: stretch;
}

.nx-mock__side {
    width: 152px;
    flex-shrink: 0;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: .75rem .6rem;
}

.nx-mock__side-logo {
    padding: .2rem .35rem .7rem;
    border-bottom: 1px solid var(--nx-line);
    margin-bottom: .5rem;
}

.nx-mock__side-logo img {
    max-height: 24px;
    max-width: 100%;
}

.nx-mock__side-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .5rem;
    border-radius: 7px;
    font-size: .72rem;
    color: var(--nx-text-dim);
}

.nx-mock__side-item i {
    font-size: .9rem;
}

.nx-mock__side-item.is-active {
    background: color-mix(in srgb, var(--nx-teal) 18%, transparent);
    color: var(--nx-teal);
    font-weight: 600;
}

.nx-mock__main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .nx-mock__side { display: none; }
}

.nx-mock__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    .nx-mock__row { grid-template-columns: repeat(2, 1fr); }
}

.nx-mock__card {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: .9rem;
}

.nx-mock__card--1 { background: linear-gradient(155deg, rgba(47, 143, 255, .28), var(--nx-surface-2) 70%); }
.nx-mock__card--2 { background: linear-gradient(155deg, rgba(23, 224, 195, .26), var(--nx-surface-2) 70%); }
.nx-mock__card--3 { background: linear-gradient(155deg, rgba(255, 193, 92, .26), var(--nx-surface-2) 70%); }
.nx-mock__card--4 { background: linear-gradient(155deg, rgba(185, 139, 255, .28), var(--nx-surface-2) 70%); }

.nx-mock__card b {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    margin-top: .2rem;
}

.nx-mock__card span {
    font-size: .72rem;
    color: var(--nx-text-dim);
}

.nx-mock__panel {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    padding: 1rem;
    height: 100%;
}

.nx-mock__panel h6 {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .8rem;
}

.nx-mock__line {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--nx-text-dim);
    padding: .45rem 0;
    border-top: 1px solid var(--nx-line);
}

.nx-mock__line b {
    color: #fff;
}

.nx-mock__chart {
    height: 90px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(23, 224, 195, .18), transparent);
    position: relative;
    overflow: hidden;
}

.nx-mock__chart svg {
    width: 100%;
    height: 100%;
}

.nx-mock-note {
    text-align: center;
    font-size: .74rem;
    color: var(--nx-text-dim);
    margin-top: .8rem;
    font-style: italic;
}

/* ---------------- trust row ---------------- */
.nx-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.2rem;
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 18px;
    padding: 1.4rem 1.8rem;
}

.nx-trust__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 180px;
}

.nx-trust__item i {
    font-size: 1.4rem;
    color: var(--nx-teal);
}

.nx-trust__item b {
    display: block;
    color: #fff;
    font-size: .85rem;
}

.nx-trust__item span {
    font-size: .74rem;
    color: var(--nx-text-dim);
}

/* ---------------- faq ---------------- */
.nx-faq .accordion-item {
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.nx-faq .accordion-button {
    background: var(--nx-surface);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    box-shadow: none;
}

.nx-faq .accordion-button:not(.collapsed) {
    background: var(--nx-surface-2);
    color: var(--nx-teal);
}

.nx-faq .accordion-button::after {
    filter: invert(1);
}

.nx-faq .accordion-body {
    background: var(--nx-surface);
    color: var(--nx-text-dim);
    font-size: .88rem;
}

.nx-support-card {
    background: linear-gradient(160deg, var(--nx-surface-2), var(--nx-surface));
    border: 1px solid var(--nx-line);
    border-radius: 16px;
    padding: 1.6rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nx-support-card i {
    font-size: 1.8rem;
    color: var(--nx-teal);
    margin-bottom: .8rem;
}

/* ---------------- footer ---------------- */
.nx-footer {
    background: var(--nx-bg);
    border-top: 1px solid var(--nx-line);
    padding: 3.5rem 0 1.5rem;
}

.nx-footer h6 {
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 1rem;
}

.nx-footer p, .nx-footer li, .nx-footer a {
    color: var(--nx-text-dim);
    font-size: .85rem;
}

.nx-footer ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.nx-footer a:hover {
    color: var(--nx-teal);
}

.nx-pay-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.nx-pay-badge {
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    border-radius: 8px;
    padding: .4rem .8rem;
    font-size: .74rem;
    color: #fff;
    font-weight: 600;
}

.nx-footer-bottom {
    border-top: 1px solid var(--nx-line);
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .8rem;
}

.nx-social {
    display: flex;
    gap: .6rem;
}

.nx-social a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--nx-surface);
    border: 1px solid var(--nx-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .3s ease, color .3s ease;
}

.nx-social a:hover {
    background: var(--nx-teal);
    color: #04140f;
}

/* =====================================================================
   PHONE LAYOUT
   Everything below 768px only. A tablet, laptop or desktop browser never
   applies any of it, so the approved wide-screen design is untouched.
   Elements that exist only for phones are hidden by default above and
   switched on inside the query.
   ===================================================================== */

.nx-hero__pill,
.nx-scene-mob,
.nx-dock,
.nx-plan-nav {
    display: none;
}

@media (max-width: 767px) {

    /* ---- rhythm ---- */
    .nx-section { padding: 2.4rem 0; }
    .nx-container { padding: 0 1.1rem; }
    .nx-head { margin-bottom: 1.6rem; }
    .nx-title { font-size: 1.42rem; }
    .nx-sub { font-size: .9rem; }
    .nx-eyebrow { font-size: .68rem; margin-bottom: .55rem; }

    /* ---- hero ----
       Text on the left, artwork on the right, feature tiles full width beneath.
       The copy column is dissolved with display:contents so its children become
       grid items and the tiles can break out of it. */
    .nx-hero {
        padding-top: 6rem;
        padding-bottom: 1.5rem;
    }

    .nx-hero .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38%;
        column-gap: .4rem;
        row-gap: 0;
        align-items: start;
        margin: 0;
    }

    .nx-hero__copy { display: contents; }

    .nx-hero__pill   { grid-column: 1; grid-row: 1; }
    .nx-hero__title  { grid-column: 1; grid-row: 2; }
    .nx-hero__desc   { grid-column: 1; grid-row: 3; }
    .nx-hero__cta    { grid-column: 1; grid-row: 4; }
    .nx-hero__mini   { grid-column: 1 / -1; grid-row: 5; }

    .nx-hero__visual {
        grid-column: 2;
        grid-row: 1 / 5;
        align-self: center;
        padding: 0;
    }

    .nx-hero__pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-bottom: .9rem;
        padding: .34rem .8rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--nx-teal) 35%, transparent);
        background: color-mix(in srgb, var(--nx-teal) 12%, transparent);
        color: var(--nx-teal);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
    }

    .nx-hero__title {
        font-size: 1.28rem;
        line-height: 1.18;
        margin: 0;
    }

    .nx-hero__desc {
        font-size: .8rem;
        line-height: 1.5;
        margin-top: .55rem;
    }

    /* the four selling points read as a 2x2 board instead of a long list */
    .nx-hero__mini {
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        gap: .6rem;
        margin-top: 1.4rem;
    }

    .nx-hero__mini-item {
        flex-direction: column;
        align-items: flex-start;
        gap: .45rem;
        padding: .8rem .75rem;
        border-radius: 12px;
        border: 1px solid var(--nx-line);
        background: var(--nx-surface);
    }

    .nx-hero__mini-title,
    .nx-hero__mini-sub { white-space: normal; }
    .nx-hero__mini-title { font-size: .82rem; }
    .nx-hero__mini-sub { font-size: .7rem; }

    .nx-hero__cta {
        margin-top: 1rem;
        gap: .5rem;
    }

    .nx-hero__cta .nx-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: .7rem 1rem;
        font-size: .84rem;
        border-radius: 10px;
    }

    /* swap the desktop scene for the handset one */
    .nx-hero__art { height: auto; margin: 0; }
    .nx-hero__art::before { display: none; }
    .nx-scene { display: none; }

    .nx-scene-mob {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .nx-scene-mob__phone,
    .nx-scene-mob__coins,
    .nx-scene-mob__arrow {
        transform-box: fill-box;
        transform-origin: center;
    }

    .nx-scene-mob__phone { animation: nxFloatY 6s ease-in-out infinite; }
    .nx-scene-mob__coins { animation: nxFloatY 7s ease-in-out infinite; animation-delay: -1.4s; }
    .nx-scene-mob__arrow { animation: nxFloatY 8s ease-in-out infinite reverse; }

    /* ---- stats ---- */
    .nx-stats { margin-top: -1.4rem; }

    .nx-stats__row {
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        padding: 1rem;
        border-radius: 14px;
    }

    .nx-stat { gap: .55rem; padding: .2rem; }
    .nx-stat__icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
    .nx-stat__value { font-size: 1rem; }
    .nx-stat__label { font-size: .68rem; line-height: 1.3; }

    /* ---- plans: a snap rail you swipe ---- */
    .nx-plan-rail { position: relative; }

    .nx-plan-grid {
        display: flex;
        gap: 1rem;
        max-width: none;
        margin: 0 -1.1rem;
        padding: 14px 1.1rem .5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nx-plan-grid::-webkit-scrollbar { display: none; }

    .nx-plan {
        flex: 0 0 76%;
        scroll-snap-align: center;
        margin-top: 0;
    }

    .nx-plan-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--nx-line);
        background: rgba(6, 10, 20, .85);
        backdrop-filter: blur(6px);
        color: #fff;
        font-size: 1rem;
    }

    .nx-plan-nav--prev { left: -6px; }
    .nx-plan-nav--next { right: -6px; }

    .nx-plans__note { margin-top: 1.2rem; font-size: .74rem; padding: .45rem 1rem; }

    /* ---- how it works ---- */
    .nx-panel { padding: 1.25rem; border-radius: 16px; }
    .nx-panel__title { font-size: 1.15rem; }
    .nx-panel__desc { font-size: .87rem; }

    .nx-steps { gap: 1.1rem; }
    .nx-step { padding-right: 0; }
    .nx-step__icon { width: 44px; height: 44px; font-size: 1.05rem; }
    .nx-step__title { font-size: .85rem; }
    .nx-step__sub { font-size: .72rem; }

    /* ---- referral and spin ---- */
    .nx-bullet { font-size: .82rem; }
    .nx-spinwheel-wrap { width: 200px; }
    .nx-spinwheel-hub { width: 48px; height: 48px; font-size: 1.05rem; }
    .nx-refbox input { font-size: .8rem; }
    .nx-refbox .nx-btn { flex: 1 1 100%; justify-content: center; }

    /* ---- dashboard preview ---- */
    .nx-mock { padding: .9rem; border-radius: 14px; }
    .nx-mock__card { padding: .7rem; }
    .nx-mock__card b { font-size: .92rem; }
    .nx-mock__card span { font-size: .66rem; }

    /* ---- trust ---- */
    .nx-trust {
        gap: .85rem;
        padding: 1.1rem;
        border-radius: 14px;
    }

    .nx-trust__item { flex: 1 1 100%; gap: .6rem; }
    .nx-trust__item i { font-size: 1.15rem; }
    .nx-trust__item b { font-size: .8rem; }
    .nx-trust__item span { font-size: .7rem; }

    /* ---- about ---- */
    .nx-about-card { padding: 1rem; }
    .nx-about-card__text { font-size: .78rem; }

    /* ---- faq ---- */
    .nx-faq .accordion-button { font-size: .85rem; padding: .8rem 1rem; }
    .nx-faq .accordion-body { font-size: .82rem; }
    .nx-support-card { padding: 1.25rem; }

    /* ---- footer clears the docked bar ---- */
    .nx-footer { padding-bottom: 6.5rem; }
    .nx-footer-bottom { justify-content: center; text-align: center; }

    /* the back-to-top button would otherwise sit on top of the docked bar */
    .scroll-to-top {
        bottom: 5.2rem;
        right: .9rem;
        width: 40px;
        height: 40px;
    }

    /* ---- the docked call to action ---- */
    .nx-dock {
        display: flex;
        align-items: center;
        gap: .75rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        padding: .6rem .9rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: rgba(6, 10, 20, .92);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--nx-line);
    }

    .nx-dock__brand {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    .nx-dock__mark {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: #04211c;
        background: linear-gradient(135deg, var(--nx-teal), var(--nx-blue));
    }

    .nx-dock__brand b {
        display: block;
        font-size: .82rem;
        color: #fff;
        line-height: 1.15;
    }

    .nx-dock__brand small {
        display: block;
        font-size: .62rem;
        color: var(--nx-text-dim);
        line-height: 1.2;
    }

    .nx-dock__cta {
        margin-left: auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .6rem 1.05rem;
        border-radius: 10px;
        font-size: .83rem;
        font-weight: 700;
        color: #04211c;
        background: linear-gradient(90deg, var(--nx-teal), var(--nx-blue));
    }

    .nx-dock__cta:hover { color: #04211c; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .nx-scene-mob__phone,
    .nx-scene-mob__coins,
    .nx-scene-mob__arrow { animation: none !important; }
}


/* =====================================================================
   PHONE LAYOUT — part 2: match the approved reference screen
   The phone shows a shortlist of the page: hero, features, stats, plans,
   referral + spin, payments, trust, and a docked call to action. The
   longer explanatory sections stay on wide screens, where there is room
   to read them.
   ===================================================================== */

@media (max-width: 767px) {

    /* ---- sections the reference screen leaves out ---- */
    #how-it-works,
    #dashboard-preview,
    #about,
    #faq {
        display: none;
    }

    /* ---- stats: four figures across one strip ---- */
    .nx-stats__row {
        grid-template-columns: repeat(4, 1fr);
        gap: .35rem;
        padding: .7rem .45rem;
    }

    .nx-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .3rem;
        padding: 0;
    }

    .nx-stat__icon {
        width: 26px;
        height: 26px;
        font-size: .78rem;
        border-radius: 8px;
    }

    .nx-stat__value { font-size: .78rem; }
    .nx-stat__label { font-size: .58rem; line-height: 1.25; }

    /* ---- plans: three tiles in view, swipe for the rest ---- */
    .nx-plan-grid {
        gap: .5rem;
        margin: 0 -1.1rem;
        padding: 12px 1.1rem .4rem;
    }

    .nx-plan {
        flex: 0 0 31%;
        padding: 1.5rem .5rem .7rem;
        border-radius: 11px;
    }

    .nx-plan__tier {
        top: -9px;
        padding: .18rem .55rem;
        font-size: .5rem;
        letter-spacing: .06em;
    }

    .nx-plan__name { font-size: .58rem; letter-spacing: .02em; }
    .nx-plan__price { font-size: .92rem; margin: .2rem 0 .5rem; }

    .nx-plan__row {
        padding: .28rem 0;
        font-size: .5rem;
        gap: .2rem;
    }

    .nx-plan__row b { font-size: .55rem; }

    .nx-plan__btn {
        margin-top: .6rem;
        padding: .42rem .2rem;
        font-size: .58rem;
        border-radius: 7px;
        gap: .2rem;
    }

    .nx-plan__btn i { font-size: .7rem; }

    .nx-plan-nav { width: 28px; height: 28px; font-size: .85rem; }
    .nx-plan-nav--prev { left: -8px; }
    .nx-plan-nav--next { right: -8px; }

    /* ---- referral and spin sit side by side ---- */
    #referral .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        margin: 0;
    }

    #referral .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    #referral .nx-panel { padding: .85rem .75rem; border-radius: 13px; }
    #referral .nx-eyebrow { font-size: .55rem; letter-spacing: .08em; margin-bottom: .45rem; }
    #referral .nx-eyebrow::before { width: 12px; }
    #referral .nx-panel__title { font-size: .88rem; line-height: 1.2; }
    #referral .nx-panel__desc { font-size: .64rem; margin-top: .3rem; }
    #referral .nx-bullets { margin-top: .6rem; gap: .35rem; }
    #referral .nx-bullet { font-size: .6rem; gap: .35rem; }
    #referral .nx-bullet i { font-size: .72rem; }
    #referral .nx-reflabel { margin-top: .7rem; font-size: .52rem; }
    #referral .nx-refbox { margin-top: .35rem; gap: .35rem; }
    #referral .nx-refbox input { flex: 1 1 100%; padding: .45rem .55rem; font-size: .58rem; border-radius: 8px; }

    #referral .nx-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: .5rem .5rem;
        font-size: .62rem;
        border-radius: 8px;
        gap: .25rem;
    }

    #referral .nx-spinwheel-wrap { width: 118px; margin-bottom: .7rem; }
    #referral .nx-spinwheel-rotor { box-shadow: 0 0 0 5px #8a5a10, 0 12px 22px -12px rgba(0, 0, 0, .7); }
    #referral .nx-spinwheel-hub { width: 30px; height: 30px; font-size: .7rem; border-width: 3px; }
    #referral .nx-spinwheel-pointer { top: -8px; border-left-width: 8px; border-right-width: 8px; border-top-width: 15px; }

    /* ---- trust badges across, not down ---- */
    .nx-trust {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        padding: .8rem .6rem;
    }

    .nx-trust__item {
        flex: unset;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .3rem;
    }

    .nx-trust__item i { font-size: .95rem; }
    .nx-trust__item b { font-size: .6rem; line-height: 1.2; }
    .nx-trust__item span { font-size: .52rem; line-height: 1.25; }

    /* ---- footer shrinks to the payment strip ---- */
    .nx-footer {
        padding: 1.6rem 0 6rem;
        border-top: none;
    }

    .nx-foot-brand,
    .nx-foot-links { display: none; }

    .nx-foot-pay { width: 100%; max-width: 100%; }

    .nx-foot-pay h6 {
        margin-bottom: .55rem;
        font-size: .58rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--nx-text-dim);
        text-align: center;
    }

    .nx-pay-badges { justify-content: center; gap: .3rem; }
    .nx-pay-badge { padding: .3rem .55rem; font-size: .58rem; }

    .nx-footer-bottom {
        margin-top: 1.1rem;
        padding-top: .9rem;
        font-size: .58rem;
        gap: .2rem;
    }

    .nx-footer-bottom span:last-child { display: none; }
}

/* Small handsets keep the same shape — only the hero copy eases off, so the
   layout never collapses back into a single stacked column. */
@media (max-width: 360px) {
    .nx-hero__title { font-size: 1.1rem; }
    .nx-hero__desc { font-size: .72rem; }
    .nx-hero__pill { font-size: .58rem; padding: .28rem .6rem; }
    .nx-hero__mini-item { padding: .6rem .5rem; }
    .nx-hero__mini-title { font-size: .7rem; }
    .nx-hero__mini-sub { font-size: .6rem; }
    .nx-dock__brand small { display: none; }
}

/* phone layout — final spacing pass */
@media (max-width: 767px) {

    /* the shortlist reads as one screenful, so the gaps between its parts
       tighten to match */
    .nx-section { padding: 1.5rem 0; }
    .nx-head { margin-bottom: 1.1rem; }
    .nx-title { font-size: 1.15rem; line-height: 1.25; }
    .nx-sub { font-size: .72rem; margin-top: .3rem; }
    .nx-eyebrow { font-size: .58rem; margin-bottom: .45rem; }
    .nx-eyebrow::before { width: 14px; }

    .nx-plans__note { margin-top: .9rem; font-size: .62rem; padding: .38rem .8rem; }

    /* arrows clear of the cards they scroll */
    .nx-plan-nav--prev { left: -10px; }
    .nx-plan-nav--next { right: -10px; }

    .nx-footer { padding-top: .5rem; }
}

/* phone hero — close the gap around the artwork */
@media (max-width: 767px) {

    /* a wider column lets the handset render large enough to carry the section,
       instead of floating in the middle of its own empty space */
    .nx-hero .row { grid-template-columns: minmax(0, 1fr) 46%; column-gap: .3rem; }

    .nx-hero { padding-top: 5.4rem; padding-bottom: 1rem; }

    .nx-hero__title { font-size: 1.18rem; }

    /* the admin can write any length here; on a phone it is trimmed to three
       lines so the copy column stays close to the artwork's height */
    .nx-hero__desc {
        font-size: .76rem;
        line-height: 1.45;
        margin-top: .45rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .nx-hero__pill { margin-bottom: .7rem; padding: .3rem .7rem; font-size: .63rem; }

    .nx-hero__cta { margin-top: .85rem; gap: .4rem; }
    .nx-hero__cta .nx-btn { padding: .6rem .9rem; font-size: .78rem; }

    /* the artwork now fills its column edge to edge */
    .nx-hero__visual { grid-row: 1 / 5; align-self: center; }
    .nx-scene-mob { width: 100%; max-width: none; }

    .nx-hero__mini { margin-top: 1rem; gap: .5rem; }
    .nx-hero__mini-item { padding: .7rem .65rem; gap: .4rem; }
}

@media (max-width: 767px) {
    /* the badge reads as one line or not at all */
    .nx-hero__pill { white-space: nowrap; font-size: .58rem; letter-spacing: .02em; }
    .nx-hero__pill i { font-size: .7rem; }
}