/* ══════════════════════════════════════════════════════════════════════
   LuckGary palette — the full supplied colour system.

   Loaded last in frontend/layout/{master,master2,auth}.blade.php so it wins
   over style.css and the generated color.php palette.

   style.css composes its rgba() values from the --*-rgb channel tokens, so
   redefining those recolours the ~260 accent rules in one pass.

   Headline combination:
     #010114 + #050A22 + #6A22E8 + #D222E9 + #2E8AE6 + #00E676 + #FFB52E
   ══════════════════════════════════════════════════════════════════════ */

:root {

    /* ══ 1. Backgrounds ═══════════════════════════════════════════════ */
    --c-bg:          #010114;   /* main body            */
    --c-bg2:         #030519;   /* secondary background */
    --c-bg3:         #0B0433;   /* deep purple          */
    --lg-deep-navy:  #040225;
    --lg-sidebar-bg: #080A4A;
    --lg-header-bg:  #010109;

    --lg-main-gradient: linear-gradient(135deg, #010114 0%, #040225 55%, #0B0433 100%);

    /* ══ 2. Purple ════════════════════════════════════════════════════ */
    --lg-purple-primary: #311041;
    --lg-purple-deep:    #210341;
    --lg-purple-royal:   #2A0A89;
    --lg-purple-bright:  #5F18D0;
    --lg-purple-neon:    #8624C4;
    --lg-purple-light:   #BC63E2;

    /* Main UI accent — the token ~300 rules key off. */
    --c-cyan:      #6A22E8;
    --c-cyan-rgb:  106, 34, 232;
    --c-cyan-dim:  rgba(var(--c-cyan-rgb), 0.12);
    --c-cyan-glow: rgba(var(--c-cyan-rgb), 0.45);

    /* ══ 3. Pink / magenta ════════════════════════════════════════════ */
    --lg-pink-dark:   #400C25;
    --lg-pink-hot:    #870EA5;
    --lg-pink-accent: #C41C70;
    --lg-magenta:     #E052EA;

    --c-violet:     #D222E9;   /* Neon Pink */
    --c-violet-rgb: 210, 34, 233;
    --c-violet-dim: rgba(var(--c-violet-rgb), 0.12);

    --lg-premium-gradient: linear-gradient(135deg, #5520E8, #D222E9);
    --lg-gaming-gradient:  linear-gradient(135deg, #6A22E8 0%, #C41C70 50%, #E052EA 100%);

    /* ══ 4. Blue / cyan ═══════════════════════════════════════════════ */
    --lg-blue-deep:     #163594;
    --lg-blue-royal:    #2E26DC;
    --lg-blue-electric: #2E8AE6;   /* trading / invest */
    --lg-blue-neon:     #00BFFF;
    --lg-cyan:          #17D8FF;
    --lg-blue-rgb:      46, 138, 230;

    /* ══ 5. Green ═════════════════════════════════════════════════════ */
    --c-green:          #00E676;
    --c-green-rgb:      0, 230, 118;
    --c-green-dim:      rgba(var(--c-green-rgb), 0.12);
    --lg-green-premium: #20C978;
    --lg-green-bg:      #062D21;
    --lg-green-glow:    0 0 20px rgba(0, 230, 118, .25);

    /* ══ 6. Gold / orange ═════════════════════════════════════════════ */
    --lg-gold-deep:     #EB900D;
    --c-amber:          #FFB52E;   /* Premium Gold */
    --c-amber-rgb:      255, 181, 46;
    --c-amber-dim:      rgba(var(--c-amber-rgb), 0.12);
    --lg-gold-bg:       #4A2810;
    --lg-gold-gradient: linear-gradient(135deg, #EB900D, #FFB52E);

    /* ══ 7. Red / withdraw ════════════════════════════════════════════ */
    --c-red:         #FF246F;
    --c-red-rgb:     255, 36, 111;
    --c-red-dim:     rgba(var(--c-red-rgb), 0.12);
    --lg-red-bright: #E52270;
    --lg-red-bg:     #3E0A25;

    /* ══ 8. Cards ═════════════════════════════════════════════════════ */
    --c-card:  #050A22;
    --c-card2: #0C0830;

    --lg-card-glass: linear-gradient(135deg, rgba(12, 8, 48, .96), rgba(4, 8, 30, .96));

    --c-border:         #34208C;
    --lg-border-purple: #5A19D6;
    --c-border-glow:    rgba(var(--c-cyan-rgb), 0.55);
    --lg-card-glow:     0 0 18px rgba(var(--c-cyan-rgb), 0.12);

    --shadow-card: 0 4px 28px rgba(0, 0, 0, 0.55), var(--lg-card-glow);
    --shadow-glow: 0 0 40px rgba(var(--c-cyan-rgb), 0.18);

    /* ══ 10. Text ═════════════════════════════════════════════════════
       Spec muted #74718A measures 4.17:1 on the #050A22 card — just under
       the 4.5:1 readability line, so the token the theme uses for small
       print is nudged up to #8E8AA6 (5.5:1). The spec value stays available
       as --lg-muted for decorative, non-essential text. */
    --lg-heading:  #FFFFFF;
    --c-text:      #FBF9FF;
    --c-text2:     #DAD5EA;
    --c-text3:     #C6C0DC;
    --lg-muted:    #74718A;
    --c-cyan-soft: #C9A5FF;   /* purple text */

    /* ══ 11. VIP ══════════════════════════════════════════════════════ */
    --lg-vip-light: #C95AFF;
    --lg-vip-mid:   #8B2BE2;
    --lg-vip-deep:  #5A19D6;
    --lg-vip-glow:  0 0 15px rgba(139, 43, 226, .45), 0 0 35px rgba(201, 90, 255, .25);

    /* ══ 12. Buttons ══════════════════════════════════════════════════ */
    --lg-btn-deposit:  linear-gradient(135deg, #5428E8, #7B3FF2);
    --lg-btn-withdraw: linear-gradient(135deg, #C91869, #E52A88);
    --lg-btn-trade:    linear-gradient(135deg, #241A91, #3826D8);
    --lg-cta-gradient: linear-gradient(135deg, #6427E8, #D127E8);

    /* ══ 13. Glows ════════════════════════════════════════════════════ */
    --lg-glow-purple: rgba(106, 34, 232, 0.45);
    --lg-glow-pink:   rgba(210, 34, 233, 0.40);
    --lg-glow-blue:   rgba(46, 138, 230, 0.35);
    --lg-glow-green:  rgba(0, 230, 118, 0.30);
    --lg-glow-gold:   rgba(235, 144, 13, 0.30);

    --lg-cta-glow: 0 0 22px var(--lg-glow-purple), 0 0 40px var(--lg-glow-pink);

    /* ══ Aliases other rules reach for ════════════════════════════════ */
    --theme-color:   var(--c-cyan);
    --theme-color-2: var(--c-violet);
    --primary:       var(--c-cyan);
    --site-color:    var(--c-cyan);
    --brand-primary: var(--c-cyan);
    --accent-gold:   var(--c-amber);

    --s-bg-a: #010114;
    --s-bg-b: #030519;
    --s-bg-c: #040225;
    --s-bg-d: #0B0433;
    --s-bg-e: #010109;
    --s-glow-cyan:   rgba(var(--c-cyan-rgb), 0.08);
    --s-glow-violet: rgba(var(--c-violet-rgb), 0.07);
    --s-glow-green:  rgba(var(--c-green-rgb), 0.05);
    --s-sep:         rgba(255, 255, 255, 0.05);
}

/* ══ Shell ═══════════════════════════════════════════════════════════ */

body { background-color: var(--c-bg); color: var(--c-text); }

h1, h2, h3, h4, h5, h6 { color: var(--lg-heading); }

.hn_dashboard_main,
main#main {
    background: var(--lg-main-gradient);
    background-attachment: fixed;
}

.hn_dashboard_sidebar { background: var(--lg-sidebar-bg); border-color: var(--c-border); }

.hn_dashboard_navbar,
.hn_header { background: var(--lg-header-bg); border-color: var(--c-border); }

.hn_footer { background: var(--c-bg); border-top: 1px solid var(--c-border); }

/* ══ Cards ═══════════════════════════════════════════════════════════
   The neon edge is a background layer, not a pseudo-element: border-radius
   already clips backgrounds, and overflow:hidden here would cut off any
   dropdown opened inside a card. */

.hn_card {
    background:
        linear-gradient(90deg, var(--c-cyan), var(--c-violet)) top / 100% 2px no-repeat,
        var(--lg-card-glass);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
}

.hn_card .card-header { border-bottom-color: var(--c-border); }

.lg-card-glass { background: var(--lg-card-glass); }

/* ══ 9. Statistics cards — border + icon per metric ══════════════════ */

.nx-stat {
    background: var(--lg-card-glass);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
}

.nx-stat:hover {
    border-color: var(--lg-border-purple);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 26px var(--lg-glow-purple);
}

/* Each metric keeps the spec's own border + icon pair. */
.lg-stat--invest                       { border-color: #4C26E8; }
.lg-stat--invest .lg-stat__icon        { color: #6748FF; background: rgba(103, 72, 255, .14); }
.lg-stat--deposit                      { border-color: #D222E9; }
.lg-stat--deposit .lg-stat__icon       { color: #FF2E91; background: rgba(255, 46, 145, .14); }
.lg-stat--earnings                     { border-color: #00A96B; }
.lg-stat--earnings .lg-stat__icon      { color: #00E676; background: rgba(0, 230, 118, .14); }
.lg-stat--commission                   { border-color: #EB900D; }
.lg-stat--commission .lg-stat__icon    { color: #FFB52E; background: rgba(255, 181, 46, .14); }
.lg-stat--withdraw                     { border-color: #FF246F; }
.lg-stat--withdraw .lg-stat__icon      { color: #FF246F; background: rgba(255, 36, 111, .14); }
.lg-stat--pend-withdraw                { border-color: #A35A12; }
.lg-stat--pend-withdraw .lg-stat__icon { color: #FF9F1A; background: rgba(255, 159, 26, .14); }
.lg-stat--pend-deposit                 { border-color: #7C21C8; }
.lg-stat--pend-deposit .lg-stat__icon  { color: #A855F7; background: rgba(168, 85, 247, .14); }
.lg-stat--pend-invest                  { border-color: #1C62D6; }
.lg-stat--pend-invest .lg-stat__icon   { color: #22A8FF; background: rgba(34, 168, 255, .14); }

/* The theme's own stat modifiers, recoloured to the LuckGary accents. */
.nx-stat--cyan   { border-left-color: var(--c-cyan); }
.nx-stat--violet { border-left-color: var(--c-violet); }
.nx-stat--green  { border-left-color: var(--c-green); }
.nx-stat--amber  { border-left-color: var(--c-amber); }
.nx-stat--red    { border-left-color: var(--c-red); }

.nx-stat--cyan::after   { background: radial-gradient(circle at top right, rgba(var(--c-cyan-rgb),   .14), transparent 70%); }
.nx-stat--violet::after { background: radial-gradient(circle at top right, rgba(var(--c-violet-rgb), .14), transparent 70%); }
.nx-stat--green::after  { background: radial-gradient(circle at top right, rgba(var(--c-green-rgb),  .12), transparent 70%); }
.nx-stat--amber::after  { background: radial-gradient(circle at top right, rgba(var(--c-amber-rgb),  .12), transparent 70%); }
.nx-stat--red::after    { background: radial-gradient(circle at top right, rgba(var(--c-red-rgb),    .12), transparent 70%); }

.nx-stat-icon--cyan,   .nx-stat-icon.c { background: rgba(var(--c-cyan-rgb),   .16); color: var(--c-cyan-soft); }
.nx-stat-icon--violet, .nx-stat-icon.v { background: rgba(var(--c-violet-rgb), .16); color: var(--c-violet); }
.nx-stat-icon--green,  .nx-stat-icon.g { background: rgba(var(--c-green-rgb),  .16); color: var(--c-green); }
.nx-stat-icon--amber,  .nx-stat-icon.a { background: rgba(var(--c-amber-rgb),  .16); color: var(--c-amber); }
.nx-stat-icon--red,    .nx-stat-icon.r { background: rgba(var(--c-red-rgb),    .16); color: var(--c-red); }

/* ══ Balance / profit figures ════════════════════════════════════════ */

.db-balance-val { color: var(--c-amber); }

.nx-profit-pos, .nx-badge-up, .db-txn-amount--in  { color: var(--c-green); }
.nx-profit-neg, .nx-badge-dn, .db-txn-amount--out { color: var(--c-red); }

.db-welcome {
    background: var(--lg-main-gradient);
    border: 1px solid var(--lg-border-purple);
    box-shadow: var(--lg-card-glow);
}

/* ══ 12. Buttons ═════════════════════════════════════════════════════ */

.btn.hn_btn_solid,
.hn_btn_solid,
button.hn_btn_solid,
a.hn_btn_solid,
.ax-btn {
    background: var(--lg-cta-gradient);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border: 0;
    color: #fff;
    box-shadow: var(--lg-cta-glow);
    transition: background-position var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}

/* Slide the sweep rather than fading it, so the brand colours stay true. */
.btn.hn_btn_solid:hover,
.hn_btn_solid:hover,
button.hn_btn_solid:hover,
a.hn_btn_solid:hover,
.ax-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 0 28px var(--lg-glow-purple), 0 0 50px var(--lg-glow-pink);
    color: #fff;
    opacity: 1;   /* auth.css dims .ax-btn on hover; the sweep replaces that */
}

.btn.hn_btn_solid:active { transform: translateY(1px); }

.btn.hn_btn_outline,
.btn.hn_btn_border_base {
    border-color: var(--lg-border-purple);
    color: var(--c-cyan-soft);
    background: transparent;
}

.btn.hn_btn_outline:hover,
.btn.hn_btn_border_base:hover {
    background: rgba(var(--c-cyan-rgb), 0.16);
    border-color: var(--c-cyan);
    color: #fff;
}

/* Named action buttons from the spec. */
.lg-btn--deposit  { background: var(--lg-btn-deposit);  color: #fff; border: 0; }
.lg-btn--withdraw { background: var(--lg-btn-withdraw); color: #fff; border: 0; }
.lg-btn--trade    { background: var(--lg-btn-trade);    color: #fff; border: 0; }

/* ══ Action tiles ════════════════════════════════════════════════════ */

.lg-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    border: 0;
    transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.lg-action:hover { transform: translateY(-3px); filter: brightness(1.08); color: #fff; }

.lg-action__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    font-size: 1.35rem;
    background: rgba(255, 255, 255, 0.18);
}

.lg-action__title { font-weight: 700; font-size: 1.06rem; line-height: 1.2; }
.lg-action__sub   { font-size: .82rem; opacity: .85; }

.lg-action--deposit  { background: var(--lg-btn-deposit);  box-shadow: 0 0 22px var(--lg-glow-purple); }
.lg-action--withdraw { background: var(--lg-btn-withdraw); box-shadow: 0 0 22px var(--lg-glow-pink); }
.lg-action--transfer { background: linear-gradient(135deg, #0F8F55, #20C978); box-shadow: var(--lg-green-glow); }

/* ══ Logo / VIP ══════════════════════════════════════════════════════ */

.lg-logo-text {
    background: var(--lg-gaming-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.lg-vip {
    color: var(--lg-vip-light);
    text-shadow: 0 0 12px rgba(139, 43, 226, .55);
}

.lg-vip-badge {
    background: linear-gradient(135deg, var(--lg-vip-deep), var(--lg-vip-mid));
    border: 1px solid var(--lg-vip-light);
    color: #fff;
    box-shadow: var(--lg-vip-glow);
}

.lg-gold { color: var(--c-amber); }

/* ══ Sidebar navigation ══════════════════════════════════════════════ */

.hn_sidebar_menu a.active,
.hn_sidebar_menu a:hover {
    background: rgba(var(--c-cyan-rgb), 0.18);
    color: var(--lg-heading);
}

.hn_sidebar_menu a.active { border-left-color: var(--c-cyan); }

/* ══ Bottom navigation ═══════════════════════════════════════════════ */

.mobile-app-menu {
    background: var(--lg-header-bg);
    border-top: 1px solid var(--c-border);
}

.mobile-app-menu a        { color: var(--c-text3); }
.mobile-app-menu a.active { color: var(--c-cyan-soft); }

.lg-nav-cta {
    background: var(--lg-cta-gradient);
    box-shadow: 0 0 25px var(--lg-glow-purple), 0 0 45px var(--lg-glow-pink);
    color: #fff;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* ══ Quick links ═════════════════════════════════════════════════════ */

.nx-quick-link--cyan   { --ql: var(--c-cyan); }
.nx-quick-link--violet { --ql: var(--c-violet); }
.nx-quick-link--green  { --ql: var(--c-green); }
.nx-quick-link--amber  { --ql: var(--c-amber); }

.nx-quick-link { border-color: var(--c-border); }

.nx-quick-link:hover {
    border-color: color-mix(in srgb, var(--ql, var(--c-cyan)) 70%, transparent);
    background: color-mix(in srgb, var(--ql, var(--c-cyan)) 14%, transparent);
}

/* ══ Tables ══════════════════════════════════════════════════════════ */

.hn_main_table thead th {
    background: rgba(var(--c-cyan-rgb), 0.12);
    color: var(--c-text2);
    border-bottom-color: var(--c-border);
}

.hn_main_table tbody tr:hover { background: rgba(var(--c-cyan-rgb), 0.07); }

/* ══ Form controls ═══════════════════════════════════════════════════ */

.form-control,
.form-select {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--c-border);
    color: var(--c-text);
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--c-cyan);
    box-shadow: 0 0 0 3px rgba(var(--c-cyan-rgb), 0.25);
    color: var(--c-text);
}

.form-control::placeholder { color: var(--c-text3); }

/* ══════════════════════════════════════════════════════════════════════
   Casino floor — public site sections

   Every section already reads its background from --s-bg-*, so instead of a
   flat fill each one gets a deep base plus two neon pools of light. The hues
   rotate down the page (violet → magenta → blue → green → gold) so scrolling
   feels like walking past different machines rather than one long dark wall.
   ══════════════════════════════════════════════════════════════════════ */

.hn_banner, .hn_about, .hn_plan, .hn_calculator, .hn_transaction, .hn_investor,
.hn_how_work, .hn_referral, .hn_referral_step, .hn_testimonial, .hn_blog,
.hn_contact, .hn_newsletter, .hn_holiday_section, .hn_ranking_section,
.nx-section-why, .nx-section-faq {
    position: relative;
    background-color: var(--c-bg);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* A hairline of neon along the top edge of each section. */
.hn_about::before, .hn_plan::before, .hn_calculator::before, .hn_transaction::before,
.hn_investor::before, .hn_how_work::before, .hn_referral::before, .hn_testimonial::before,
.hn_blog::before, .hn_contact::before, .hn_newsletter::before,
.nx-section-why::before, .nx-section-faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--c-cyan-rgb), .7) 30%,
        rgba(var(--c-violet-rgb), .7) 70%,
        transparent);
    pointer-events: none;
}

/* ── Hue rotation, section by section ──────────────────────────────── */

.hn_banner {
    background-image:
        radial-gradient(900px 520px at 12% 0%,   rgba(var(--c-cyan-rgb), .22), transparent 62%),
        radial-gradient(760px 460px at 90% 30%,  rgba(var(--c-violet-rgb), .16), transparent 60%),
        linear-gradient(160deg, #010114 0%, #040225 55%, #0B0433 100%);
}

.hn_about,
.hn_how_work {
    background-image:
        radial-gradient(760px 420px at 88% 8%,  rgba(var(--c-violet-rgb), .14), transparent 62%),
        radial-gradient(620px 380px at 5% 90%,  rgba(var(--c-cyan-rgb), .12), transparent 60%),
        linear-gradient(180deg, #010114, #05031C);
}

.hn_plan,
.hn_ranking_section {
    background-image:
        radial-gradient(820px 460px at 15% 5%,  rgba(var(--c-cyan-rgb), .18), transparent 62%),
        radial-gradient(640px 400px at 92% 88%, rgba(var(--c-amber-rgb), .10), transparent 60%),
        linear-gradient(180deg, #04021A, #0B0433);
}

.hn_calculator,
.hn_transaction {
    background-image:
        radial-gradient(700px 420px at 82% 10%, rgba(var(--lg-blue-rgb), .16), transparent 62%),
        radial-gradient(600px 380px at 8% 85%,  rgba(var(--c-cyan-rgb), .12), transparent 60%),
        linear-gradient(180deg, #010114, #030A22);
}

.hn_investor,
.hn_testimonial {
    background-image:
        radial-gradient(760px 440px at 10% 8%,  rgba(var(--c-violet-rgb), .16), transparent 62%),
        radial-gradient(620px 380px at 90% 92%, rgba(var(--c-cyan-rgb), .12), transparent 60%),
        linear-gradient(180deg, #050119, #0B0433);
}

.hn_referral,
.hn_referral_step {
    background-image:
        radial-gradient(780px 440px at 88% 6%,  rgba(var(--c-green-rgb), .12), transparent 62%),
        radial-gradient(640px 400px at 6% 88%,  rgba(var(--c-cyan-rgb), .14), transparent 60%),
        linear-gradient(180deg, #010114, #04061E);
}

.hn_blog,
.hn_holiday_section {
    background-image:
        radial-gradient(700px 420px at 18% 6%,  rgba(var(--c-amber-rgb), .10), transparent 62%),
        radial-gradient(620px 380px at 88% 90%, rgba(var(--c-violet-rgb), .12), transparent 60%),
        linear-gradient(180deg, #04021A, #010114);
}

.nx-section-why,
.nx-section-faq {
    background-image:
        radial-gradient(820px 460px at 50% 0%,  rgba(var(--c-cyan-rgb), .16), transparent 62%),
        linear-gradient(180deg, #010114, #08032A);
}

.hn_contact,
.hn_newsletter {
    background-image:
        radial-gradient(900px 500px at 50% 100%, rgba(var(--c-violet-rgb), .18), transparent 62%),
        linear-gradient(180deg, #010114, #0B0433);
}

/* ══ Dashboard cards — the same cabinet treatment ════════════════════
   The corner wash is a background layer, not ::after: style.css already
   owns .nx-stat::after (opacity 0 until hover) and pushing card children
   into a new stacking context would clip any dropdown opened inside. */

.hn_card {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--c-cyan-rgb), .14), transparent 60%),
        linear-gradient(90deg, var(--c-cyan), var(--c-violet)) top / 100% 2px no-repeat,
        var(--lg-card-glass);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.hn_card:hover {
    border-color: var(--lg-border-purple);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 30px rgba(var(--c-cyan-rgb), .25);
}

/* Per-metric wash, so a row of cards reads like a row of machines. */

@media (prefers-reduced-motion: reduce) {
    .hn_card, .nx-stat { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   Casino floor — the section classes the live home page actually uses
   (.nx-section / .nx-section-alt and friends). The .hn_* rules above cover
   the older page templates; these cover what renders today.
   ══════════════════════════════════════════════════════════════════════ */

.nx-section,
.ud-section,
.nx-security-section {
    position: relative;
    background:
        radial-gradient(820px 460px at 12% 0%,  rgba(var(--c-cyan-rgb), .13), transparent 62%),
        radial-gradient(680px 420px at 92% 88%, rgba(var(--c-violet-rgb), .10), transparent 60%),
        linear-gradient(180deg, #010114 0%, #04021C 100%);
}

/* Alternating band — pushes further into purple so the page reads as stripes. */
.nx-section-alt {
    background:
        radial-gradient(880px 480px at 88% 4%,  rgba(var(--c-violet-rgb), .15), transparent 62%),
        radial-gradient(700px 430px at 6% 92%,  rgba(var(--c-cyan-rgb), .13), transparent 60%),
        linear-gradient(180deg, #04021C 0%, #0B0433 100%);
}

/* The old theme pinned this one to a hardcoded navy with !important. */
.stats-section {
    background:
        radial-gradient(820px 460px at 50% 0%, rgba(var(--c-cyan-rgb), .16), transparent 62%),
        linear-gradient(180deg, #010114 0%, #08032A 100%) !important;
}

.nx-trading-modes-section {
    background:
        radial-gradient(760px 440px at 14% 6%,  rgba(var(--lg-blue-rgb), .15), transparent 62%),
        radial-gradient(640px 400px at 90% 90%, rgba(var(--c-violet-rgb), .12), transparent 60%),
        linear-gradient(180deg, #010114 0%, #030A22 100%);
}

/* Neon hairline between consecutive bands. */
.nx-section + .nx-section::before,
.nx-section-alt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--c-cyan-rgb), .65) 30%,
        rgba(var(--c-violet-rgb), .65) 70%,
        transparent);
    pointer-events: none;
}

/* Hero keeps the deepest, most saturated pool of light. */
.hn_banner,
.nx-banner-pro {
    background:
        radial-gradient(1000px 560px at 12% 0%,  rgba(var(--c-cyan-rgb), .24), transparent 62%),
        radial-gradient(820px 480px at 92% 26%,  rgba(var(--c-violet-rgb), .18), transparent 60%),
        linear-gradient(160deg, #010114 0%, #040225 55%, #0B0433 100%);
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL casino field

   Painted once on the page canvas and pinned with background-attachment,
   so every page — not just the ones whose section classes are named above —
   sits on the same lit floor. Sections then float over it as translucent
   panels instead of each carrying its own opaque fill.
   ══════════════════════════════════════════════════════════════════════ */

body {
    background:
        radial-gradient(1200px 700px at 14% 0%,   rgba(var(--c-cyan-rgb), .17), transparent 58%),
        radial-gradient(1000px 620px at 88% 22%,  rgba(var(--c-violet-rgb), .13), transparent 58%),
        radial-gradient(900px 560px at 45% 62%,   rgba(var(--lg-blue-rgb), .10), transparent 58%),
        radial-gradient(820px 520px at 8% 96%,    rgba(var(--c-green-rgb), .07), transparent 58%),
        radial-gradient(760px 480px at 95% 100%,  rgba(var(--c-amber-rgb), .07), transparent 58%),
        linear-gradient(180deg, #010114 0%, #04021C 38%, #0B0433 72%, #010114 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Token-driven sections go see-through so the global field reads underneath. */
:root {
    --s-bg-a: transparent;
    --s-bg-b: transparent;
    --s-bg-c: transparent;
    --s-bg-d: transparent;
    --s-bg-e: transparent;
}

/* Anything wrapped in a <section> inside the page body becomes a translucent
   panel — this is the part that works on pages whose classes we never named. */
main#main > section,
main#main > div > section {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(11, 4, 51, .28), rgba(1, 1, 20, .40));
    position: relative;
}

main#main > section:nth-of-type(even),
main#main > div > section:nth-of-type(even) {
    background-image: linear-gradient(180deg, rgba(22, 7, 78, .40), rgba(4, 2, 28, .50));
}

/* ══ Text legibility, globally ═══════════════════════════════════════
   Small labels used the raw #6A22E8 accent, which only reaches 2.8:1 on a
   dark panel. Lettering moves to the lighter violet; the raw accent stays
   on borders, fills and glows where contrast does not apply. */

.nx-label,
a.nx-label,
.site-color,
.text-primary {
    color: var(--c-cyan-soft) !important;
}

.nx-dim,
.nx-muted,
.text-muted,
small.text-muted {
    color: var(--c-text2) !important;
}

/* Headings and body copy sit on gradients, so a touch of shadow keeps the
   edges crisp without lightening the type itself. */
main#main h1, main#main h2, main#main h3,
main#main h4, main#main h5, main#main h6 {
    color: var(--lg-heading);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .65);
}

main#main p,
main#main li,
.hn_dashboard_main p,
.hn_dashboard_main li {
    color: var(--c-text);
}

/* Section eyebrow / kicker text stays readable but keeps the neon feel. */
.nx-section-label,
.nx-eyebrow {
    color: var(--c-cyan-soft);
    text-shadow: 0 0 14px rgba(var(--c-cyan-rgb), .5);
}

/* ══════════════════════════════════════════════════════════════════════
   Dashboard cards as casino machines

   Each stat variant gets its own hue all the way through — a tinted
   gradient body, a matching neon rim, its own glow and its own icon chip —
   so a grid of cards reads like a row of different machines rather than one
   colour repeated. The body stays dark enough that white type holds up;
   every pairing below is contrast-checked.
   ══════════════════════════════════════════════════════════════════════ */

.nx-stat {
    border: 1px solid var(--c-border);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.nx-stat:hover { transform: translateY(-3px); }

/* ── Violet machine ─────────────────────────────────────────────── */
.nx-stat--cyan {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(106, 34, 232, .70), transparent 62%),
        linear-gradient(160deg, #150638 0%, #050A22 70%);
    border-color: rgba(106, 34, 232, .75);
    border-left-color: #A970FF;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(106, 34, 232, .30);
}
.nx-stat--cyan:hover  { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(106, 34, 232, .55); }
.nx-stat--cyan .nx-stat-icon  { background: rgba(106, 34, 232, .22); color: var(--c-cyan-soft); }

/* ── Magenta machine ────────────────────────────────────────────── */
.nx-stat--violet {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(210, 34, 233, .68), transparent 62%),
        linear-gradient(160deg, #2A0733 0%, #050A22 70%);
    border-color: rgba(210, 34, 233, .75);
    border-left-color: #E052EA;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(210, 34, 233, .28);
}
.nx-stat--violet:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(210, 34, 233, .55); }
.nx-stat--violet .nx-stat-icon { background: rgba(210, 34, 233, .22); color: #F2A6F7; }

/* ── Neon-green machine ─────────────────────────────────────────── */
.nx-stat--green {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(0, 230, 118, .40), transparent 62%),
        linear-gradient(160deg, #031912 0%, #050A22 70%);
    border-color: rgba(0, 230, 118, .70);
    border-left-color: #00E676;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 230, 118, .25);
}
.nx-stat--green:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(0, 230, 118, .48); }
.nx-stat--green .nx-stat-icon { background: rgba(0, 230, 118, .20); color: #00E676; }

/* ── Gold machine ───────────────────────────────────────────────── */
.nx-stat--amber {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(255, 181, 46, .40), transparent 62%),
        linear-gradient(160deg, #201404 0%, #050A22 70%);
    border-color: rgba(255, 181, 46, .70);
    border-left-color: #FFB52E;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(235, 144, 13, .28);
}
.nx-stat--amber:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(235, 144, 13, .5); }
.nx-stat--amber .nx-stat-icon { background: rgba(255, 181, 46, .20); color: #FFB52E; }

/* ── Hot-pink machine ───────────────────────────────────────────── */
.nx-stat--red {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(255, 36, 111, .56), transparent 62%),
        linear-gradient(160deg, #33081D 0%, #050A22 70%);
    border-color: rgba(255, 36, 111, .72);
    border-left-color: #FF246F;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 36, 111, .28);
}
.nx-stat--red:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 36, 111, .5); }
.nx-stat--red .nx-stat-icon { background: rgba(255, 36, 111, .20); color: #FF95BA; }

/* ── Orange machine (pending) ───────────────────────────────────── */
.nx-stat--pending {
    opacity: 1;
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(255, 159, 26, .46), transparent 62%),
        linear-gradient(160deg, #1C1206 0%, #050A22 70%);
    border-color: rgba(255, 159, 26, .68);
    border-left-color: #FF9F1A;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 159, 26, .24);
}
.nx-stat--pending:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 159, 26, .46); }
.nx-stat--pending .nx-stat-icon { background: rgba(255, 159, 26, .20); color: #FF9F1A; }

/* ── Blue machine, for anything that wants a sixth hue ──────────── */
.nx-stat--blue {
    background:
        radial-gradient(130% 95% at 100% 0%, rgba(46, 138, 230, .64), transparent 62%),
        linear-gradient(160deg, #041325 0%, #050A22 70%);
    border-color: rgba(46, 138, 230, .72);
    border-left: 3px solid #22A8FF;
    box-shadow: 0 4px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(46, 138, 230, .28);
}
.nx-stat--blue .nx-stat-icon { background: rgba(46, 138, 230, .20); color: #6DC6FF; }

@media (prefers-reduced-motion: reduce) {
    .nx-stat:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Frontend sections as machines

   The ten sections on a page are siblings, so nth-of-type gives each one its
   own hue — the same seven verified card colours, cycling down the page.
   Base + glow pairs are the ones already contrast-checked on the cards, so
   headings, body copy and muted text all stay readable on every band.
   ══════════════════════════════════════════════════════════════════════ */

main#main section:nth-of-type(7n+1) {
    background:
        radial-gradient(1000px 560px at 12% 0%, rgba(106, 34, 232, .70), transparent 60%),
        linear-gradient(165deg, #150638 0%, #010114 72%);
}
main#main section:nth-of-type(7n+2) {
    background:
        radial-gradient(920px 520px at 88% 6%, rgba(210, 34, 233, .68), transparent 60%),
        linear-gradient(165deg, #2A0733 0%, #010114 72%);
}
main#main section:nth-of-type(7n+3) {
    background:
        radial-gradient(900px 520px at 10% 8%, rgba(0, 230, 118, .40), transparent 60%),
        linear-gradient(165deg, #031912 0%, #010114 72%);
}
main#main section:nth-of-type(7n+4) {
    background:
        radial-gradient(900px 520px at 90% 8%, rgba(255, 181, 46, .40), transparent 60%),
        linear-gradient(165deg, #201404 0%, #010114 72%);
}
main#main section:nth-of-type(7n+5) {
    background:
        radial-gradient(940px 540px at 14% 6%, rgba(255, 36, 111, .56), transparent 60%),
        linear-gradient(165deg, #33081D 0%, #010114 72%);
}
main#main section:nth-of-type(7n+6) {
    background:
        radial-gradient(900px 520px at 86% 8%, rgba(255, 159, 26, .46), transparent 60%),
        linear-gradient(165deg, #1C1206 0%, #010114 72%);
}
main#main section:nth-of-type(7n+7) {
    background:
        radial-gradient(940px 540px at 50% 0%, rgba(46, 138, 230, .64), transparent 60%),
        linear-gradient(165deg, #041325 0%, #010114 72%);
}

/* ══ Card type goes white ════════════════════════════════════════════
   Requested explicitly. Muted copy stays in the white family at 75% so the
   heading / body / caption hierarchy survives instead of flattening. */

.hn_card,
.hn_card p, .hn_card li, .hn_card td, .hn_card th, .hn_card span,
.hn_card h1, .hn_card h2, .hn_card h3, .hn_card h4, .hn_card h5, .hn_card h6,
.hn_card .card-header, .hn_card .card-body,
.nx-stat,
.nx-stat p, .nx-stat span, .nx-stat div, .nx-stat strong, .nx-stat b,
.nx-stat h1, .nx-stat h2, .nx-stat h3, .nx-stat h4, .nx-stat h5, .nx-stat h6 {
    color: #FFFFFF;
}

.hn_card .nx-dim,   .hn_card .nx-muted,   .hn_card .text-muted,   .hn_card small,
.nx-stat .nx-dim,   .nx-stat .nx-muted,   .nx-stat .text-muted,   .nx-stat small,
.hn_card .nx-stat-lbl, .nx-stat .nx-stat-lbl {
    color: rgba(255, 255, 255, .75) !important;
}

/* Semantic and accent colours keep their meaning inside cards. */
.hn_card .nx-profit-pos, .nx-stat .nx-profit-pos,
.hn_card .text-success,  .nx-stat .text-success  { color: var(--c-green) !important; }
.hn_card .nx-profit-neg, .nx-stat .nx-profit-neg,
.hn_card .text-danger,   .nx-stat .text-danger   { color: var(--c-red) !important; }
.hn_card .db-balance-val, .nx-stat .db-balance-val { color: var(--c-amber) !important; }

/* ══════════════════════════════════════════════════════════════════════
   Neon highlight pass

   Glow is applied as text-shadow, which adds light around a glyph without
   touching the glyph's own colour — so every contrast figure measured above
   still holds while the type reads as lit rather than printed.
   ══════════════════════════════════════════════════════════════════════ */

main#main h1, main#main h2, main#main h3,
.hn_dashboard_main h1, .hn_dashboard_main h2, .hn_dashboard_main h3,
.hn_card h4, .hn_card h5, .nx-stat h4, .nx-stat h5 {
    color: var(--lg-heading);
    text-shadow:
        0 0 18px rgba(var(--c-cyan-rgb), .55),
        0 0 42px rgba(var(--c-violet-rgb), .30),
        0 2px 12px rgba(0, 0, 0, .75);
}

/* Money and statistics burn brightest. */
.nx-stat-value, .nx-stat-num, .db-balance-val, .nx-stat strong, .nx-stat b {
    text-shadow: 0 0 16px currentColor, 0 0 34px rgba(0, 0, 0, .5);
}

.nx-profit-pos, .nx-badge-up, .db-txn-amount--in {
    color: var(--c-green);
    text-shadow: 0 0 14px rgba(var(--c-green-rgb), .8);
}

.nx-profit-neg, .nx-badge-dn, .db-txn-amount--out {
    color: var(--c-red);
    text-shadow: 0 0 14px rgba(var(--c-red-rgb), .8);
}

/* Eyebrow labels read as little neon signs. */
.nx-label, a.nx-label, .site-color, .nx-section-label, .nx-eyebrow {
    color: var(--c-cyan-soft) !important;
    text-shadow: 0 0 14px rgba(var(--c-cyan-rgb), .85), 0 0 30px rgba(var(--c-violet-rgb), .45);
}

/* Icon chips get a halo in their own hue. */
.nx-stat--cyan .nx-stat-icon { box-shadow: 0 0 20px rgba(106, 34, 232, .65); }
.nx-stat--violet  .nx-stat-icon { box-shadow: 0 0 20px rgba(210, 34, 233, .65); }
.nx-stat--green   .nx-stat-icon { box-shadow: 0 0 20px rgba(0, 230, 118, .55); }
.nx-stat--amber   .nx-stat-icon { box-shadow: 0 0 20px rgba(255, 181, 46, .55); }
.nx-stat--red     .nx-stat-icon { box-shadow: 0 0 20px rgba(255, 36, 111, .6); }
.nx-stat--pending .nx-stat-icon { box-shadow: 0 0 20px rgba(255, 159, 26, .55); }
.nx-stat--blue    .nx-stat-icon { box-shadow: 0 0 20px rgba(46, 138, 230, .6); }

/* Rims burn brighter, and the neon rule on top of cards doubles. */
.hn_card {
    border-width: 1px;
    border-color: var(--lg-border-purple);
    box-shadow: 0 4px 28px rgba(0, 0, 0, .6), 0 0 26px rgba(var(--c-cyan-rgb), .30);
}

.nx-stat { border-width: 1px; }

/* Section dividers become bright neon strips. */
.nx-section-alt::before,
.nx-section + .nx-section::before {
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--c-cyan-rgb), 1) 28%,
        rgba(var(--c-violet-rgb), 1) 72%,
        transparent);
    box-shadow: 0 0 14px rgba(var(--c-cyan-rgb), .8);
}

/* Links pick up the neon too. */
main#main a:not(.btn):not(.nx-wpop__btn):hover {
    color: var(--c-cyan-soft);
    text-shadow: 0 0 12px rgba(var(--c-cyan-rgb), .8);
}

@media (prefers-reduced-motion: reduce) {
    main#main h1, main#main h2, main#main h3 { text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
}

/* ══════════════════════════════════════════════════════════════════════
   Header and footer type goes white

   The theme pinned footer links to #475569 and their icons to #334155 with
   !important. Against the near-black footer those measure 2.73:1 and 2:1 —
   effectively invisible. Everything here moves into the white family.
   ══════════════════════════════════════════════════════════════════════ */

.hn_header,
.hn_header a,
.hn_header_menu li a,
.hn_header_menu li a span,
.hn_header .nx-nav-menu-label,
.hn_nav a {
    color: #FFFFFF !important;
}

.hn_header_menu li a:hover,
.hn_header a:hover {
    color: var(--c-cyan-soft) !important;
    text-shadow: 0 0 14px rgba(var(--c-cyan-rgb), .85);
}

/* Active nav item keeps a neon underline instead of a colour change. */
.hn_header_menu li a.active {
    color: #FFFFFF !important;
    text-shadow: 0 0 16px rgba(var(--c-cyan-rgb), .9);
}

.hn_footer,
.hn_footer p,
.hn_footer li,
.hn_footer a,
.hn_footer span,
.hn_footer_menu li a,
.hn_footer .nx-muted,
.hn_footer .nx-dim {
    color: #FFFFFF !important;
}

/* Icons beside footer links were the darkest thing on the page. */
.hn_footer_menu li a i,
.hn_footer i {
    color: var(--c-cyan-soft) !important;
}

.hn_footer h1, .hn_footer h2, .hn_footer h3,
.hn_footer h4, .hn_footer h5, .hn_footer h6,
.hn_footer .footer-title {
    color: #FFFFFF !important;
    text-shadow: 0 0 16px rgba(var(--c-cyan-rgb), .5);
}

/* Secondary footer copy stays in the white family so hierarchy survives. */
.hn_footer .nx-muted,
.hn_footer p.nx-muted,
.hn_footer small,
.hn_footer .copyright {
    color: rgba(255, 255, 255, .78) !important;
}

.hn_footer a:hover,
.hn_footer_menu li a:hover {
    color: var(--c-cyan-soft) !important;
    text-shadow: 0 0 14px rgba(var(--c-cyan-rgb), .85);
}

.hn_footer_menu li a:hover i { color: #FFFFFF !important; }

/* ══════════════════════════════════════════════════════════════════════
   STEP 1 — clearing the blockers

   style.css pins several colours with !important, which is why the redesign
   was invisible on half the page. Each one is answered here at equal or
   higher specificity. Measured contrasts of what was there before:
     #64748b 4.28:1 · #475569 2.69:1 · #374151 1.98:1 · #334155 1.97:1
   ══════════════════════════════════════════════════════════════════════ */

/* Section and footer fills that were locked to the old navy. */
.nx-section-alt        { background: none !important; }
.stats-section         { background: none !important; }
.hn_banner > .container{ background: transparent !important; }
.hn_footer             { background: linear-gradient(180deg, #04021C 0%, #010114 100%) !important; }
.hn_banner ~ div[style*="border-top"] { background: rgba(1, 1, 20, .5) !important; }

/* Body copy that was too dark to read on a near-black page. */
.nx-banner-desc,
.hn_section_desc,
.nx-plan-features li,
.nx-newsletter-desc,
.nx-why-card:hover .nx-why-desc,
.nx-referral-block:hover .nx-referral-block-sub {
    color: rgba(255, 255, 255, .86) !important;
}

.hn_counter_label,
.nx-how-desc,
.nx-why-desc,
.nx-plan-sub,
.nx-referral-block-sub,
.nx-section-faq .collapse p {
    color: rgba(255, 255, 255, .78) !important;
}

.hn_footer .nx-muted,
.hn_footer_menu li a,
.hn_copy_right p,
.hn_footer #subscribe .form-control {
    color: #FFFFFF !important;
}

.hn_copy_right p { color: rgba(255, 255, 255, .78) !important; }

/* Quick links still carried the pre-brand cyan. */
.nx-quick-link--cyan        { border-color: rgba(var(--c-cyan-rgb), .45) !important;
                              background: rgba(var(--c-cyan-rgb), .08) !important; }
.nx-quick-link--cyan p      { color: var(--c-cyan-soft) !important; }
.nx-quick-link--cyan:hover  { border-color: var(--c-cyan) !important;
                              background: rgba(var(--c-cyan-rgb), .16) !important; }

/* ══════════════════════════════════════════════════════════════════════
   STEP 2 — sections get room to breathe
   ══════════════════════════════════════════════════════════════════════ */

main#main > div > section,
.nx-section,
.ud-section,
.nx-security-section,
.stats-section,
.nx-trading-modes-section {
    padding-top: clamp(72px, 9vw, 140px);
    padding-bottom: clamp(72px, 9vw, 140px);
    position: relative;
    overflow: hidden;
}

.hn_banner,
.nx-banner-pro {
    padding-top: clamp(110px, 12vw, 180px) !important;
    padding-bottom: clamp(80px, 10vw, 140px) !important;
}

main#main h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.08; }
main#main h2 { font-size: clamp(1.7rem, 3.8vw, 3rem); line-height: 1.14; }
main#main h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.2; }

/* ══════════════════════════════════════════════════════════════════════
   STEP 3 — fresh multi-layer section backgrounds

   Four layers per band: a fine casino-floor grid, two pools of coloured
   light, and a deep diagonal base. The grid is drawn with gradients rather
   than an image so it costs nothing to load.
   ══════════════════════════════════════════════════════════════════════ */

main#main section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

/* Content must sit above the texture. */
main#main section > * { position: relative; z-index: 1; }

/* Bright neon rule capping every band. */
main#main section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--c-cyan-rgb), 1) 26%,
        rgba(var(--c-violet-rgb), 1) 74%,
        transparent);
    box-shadow: 0 0 16px rgba(var(--c-cyan-rgb), .85);
    pointer-events: none;
}

main#main section:first-of-type::before { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   STEP 4 — gradient display type

   Applied only to large headings and figures. Body copy, labels and links
   stay solid so nothing small depends on a gradient to be legible.
   ══════════════════════════════════════════════════════════════════════ */

main#main h1,
main#main h2,
main#main .nx-section-title,
main#main .hn_section_title {
    background: linear-gradient(100deg, #FFFFFF 0%, #E3D0FF 34%, #FAC7FD 62%, #FFD37A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* A gradient fill cannot carry a text-shadow, so the halo goes on a
       drop-shadow filter instead. */
    filter: drop-shadow(0 0 22px rgba(var(--c-cyan-rgb), .45))
            drop-shadow(0 2px 10px rgba(0, 0, 0, .8));
    font-weight: 900;
}

/* Counters and big figures burn in their own hue. */
main#main .hn_counter_number,
main#main .nx-stat-num,
.hn_dashboard_main .nx-stat-value {
    background: linear-gradient(120deg, #FFFFFF, #E3D0FF 55%, #FAC7FD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(var(--c-violet-rgb), .5));
    font-weight: 900;
}

/* Older browsers without background-clip:text fall back to solid white. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    main#main h1, main#main h2,
    main#main .nx-section-title, main#main .hn_section_title,
    main#main .hn_counter_number, main#main .nx-stat-num,
    .hn_dashboard_main .nx-stat-value {
        background: none;
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    main#main section::after { display: none; }
}