/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --bg-0          : #0a0a0d;
    --bg-1          : #101013;
    --bg-2          : #16161a;
    --bg-3          : #1c1c22;
    --bg-4          : #232329;

    --accent        : #5865F2;
    --accent-hover  : #4752c4;
    --accent-dim    : rgba(88, 101, 242, 0.1);
    --accent-border : rgba(88, 101, 242, 0.28);

    --text-0        : #f0f0f2;
    --text-1        : #a4a4b0;
    --text-2        : #5e5e6a;

    --border        : rgba(255, 255, 255, 0.055);
    --border-strong : rgba(255, 255, 255, 0.1);

    --radius-sm     : 6px;
    --radius-md     : 10px;
    --radius-lg     : 16px;
    --radius-xl     : 22px;

    --shadow-sm     : 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md     : 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg     : 0 8px 48px rgba(0, 0, 0, 0.55);

    --font          : 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono     : 'Courier New', 'Consolas', monospace;
    --transition    : 150ms ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

html {
    scroll-behavior        : smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family              : var(--font);
    background-color         : var(--bg-0);
    color                    : var(--text-0);
    line-height              : 1.6;
    font-size                : 16px;
    -webkit-font-smoothing   : antialiased;
    -moz-osx-font-smoothing  : grayscale;
}

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

ul { list-style: none; }

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

button {
    cursor      : pointer;
    font-family : inherit;
    border      : none;
    background  : none;
    color       : inherit;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
    width     : 100%;
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 24px;
}

.section { padding: 80px 0; }

.text-accent { color: var(--accent); }

.section-header {
    text-align    : center;
    margin-bottom : 56px;
}

.section-title {
    font-size      : clamp(1.75rem, 3vw, 2.5rem);
    font-weight    : 700;
    letter-spacing : -0.025em;
    margin-bottom  : 12px;
}

.section-subtitle {
    font-size  : 1.0625rem;
    color      : var(--text-1);
    max-width  : 560px;
    margin     : 0 auto;
    line-height: 1.7;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 10px 22px;
    border-radius   : var(--radius-md);
    font-size       : 0.9375rem;
    font-weight     : 600;
    line-height     : 1;
    white-space     : nowrap;
    transition      : background-color var(--transition),
                      color            var(--transition),
                      border-color     var(--transition),
                      box-shadow       var(--transition),
                      transform        var(--transition);
    border          : 1px solid transparent;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
    background-color : var(--accent);
    color            : #fff;
}
.btn--primary:hover {
    background-color : var(--accent-hover);
    box-shadow       : 0 4px 20px rgba(88, 101, 242, 0.28);
}

.btn--ghost {
    background-color : var(--bg-3);
    color            : var(--text-0);
    border-color     : var(--border-strong);
}
.btn--ghost:hover {
    background-color : var(--bg-4);
}

.btn--outline {
    background-color : transparent;
    color            : var(--text-0);
    border-color     : var(--border-strong);
}
.btn--outline:hover {
    background-color : var(--bg-3);
}

.btn--sm  { padding: 7px 16px; font-size: 0.875rem; }
.btn--lg  { padding: 13px 28px; font-size: 1rem; }
.btn--full{ width: 100%; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position         : sticky;
    top              : 0;
    z-index          : 100;
    background-color : rgba(10, 10, 13, 0.88);
    backdrop-filter  : blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom    : 1px solid var(--border);
}

.navbar__inner {
    display     : flex;
    align-items : center;
    height      : 64px;
    gap         : 32px;
}

.navbar__brand {
    font-size      : 1.25rem;
    font-weight    : 800;
    color          : var(--accent);
    letter-spacing : -0.02em;
    flex-shrink    : 0;
}

.navbar__nav {
    display     : flex;
    align-items : center;
    gap         : 2px;
    flex        : 1;
}

.nav-link {
    padding       : 6px 12px;
    border-radius : var(--radius-sm);
    font-size     : 0.9375rem;
    font-weight   : 500;
    color         : var(--text-1);
    transition    : color var(--transition), background-color var(--transition);
}
.nav-link:hover       { color: var(--text-0); background-color: var(--bg-2); }
.nav-link--active     { color: var(--text-0); background-color: var(--bg-2); }

.navbar__actions { flex-shrink: 0; }

.navbar__toggle {
    display        : none;
    flex-direction : column;
    gap            : 5px;
    padding        : 6px;
    margin-left    : auto;
}
.navbar__toggle span {
    display          : block;
    width            : 22px;
    height           : 2px;
    background-color : var(--text-0);
    border-radius    : 2px;
    transition       : transform var(--transition), opacity var(--transition);
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MAIN
   ============================================================ */
main { min-height: calc(100vh - 64px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position   : relative;
    overflow   : hidden;
    padding    : 100px 0 88px;
    text-align : center;
}

.hero__inner {
    position   : relative;
    z-index    : 1;
    max-width  : 780px;
    margin     : 0 auto;
}

.hero__glow {
    position         : absolute;
    top              : -60px;
    left             : 50%;
    transform        : translateX(-50%);
    width            : 700px;
    height           : 460px;
    background       : radial-gradient(ellipse at 50% 0%,
                         rgba(88, 101, 242, 0.09) 0%,
                         transparent 68%);
    pointer-events   : none;
    z-index          : 0;
}

.hero__badge {
    display          : inline-block;
    padding          : 5px 14px;
    background-color : var(--accent-dim);
    border           : 1px solid var(--accent-border);
    border-radius    : 999px;
    font-size        : 0.8rem;
    font-weight      : 700;
    color            : var(--accent);
    letter-spacing   : 0.06em;
    text-transform   : uppercase;
    margin-bottom    : 24px;
}

.hero__title {
    font-size      : clamp(2.6rem, 6.5vw, 4.2rem);
    font-weight    : 800;
    letter-spacing : -0.035em;
    line-height    : 1.08;
    margin-bottom  : 22px;
}

.hero__description {
    font-size     : 1.125rem;
    color         : var(--text-1);
    line-height   : 1.75;
    max-width     : 600px;
    margin        : 0 auto 40px;
}

.hero__actions {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 12px;
    flex-wrap       : wrap;
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
    background-color : var(--bg-2);
    border-top       : 1px solid var(--border);
    border-bottom    : 1px solid var(--border);
    padding          : 32px 0;
}

.stats-bar__inner {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.stat {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    padding         : 8px 52px;
}

.stat__value {
    font-size      : 2rem;
    font-weight    : 800;
    letter-spacing : -0.025em;
    line-height    : 1;
    color          : var(--text-0);
}

.stat__label {
    font-size      : 0.78rem;
    color          : var(--text-2);
    font-weight    : 600;
    margin-top     : 5px;
    text-transform : uppercase;
    letter-spacing : 0.07em;
}

.stat-divider {
    width            : 1px;
    height           : 40px;
    background-color : var(--border-strong);
}

/* ============================================================
   FEATURES GRID
   ============================================================ */
.features-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(340px, 1fr));
    gap                   : 20px;
}

.feature-card {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    padding          : 28px;
    transition       : border-color var(--transition), transform var(--transition);
}
.feature-card:hover {
    border-color : var(--border-strong);
    transform    : translateY(-2px);
}

.feature-card__title {
    font-size     : 1.0625rem;
    font-weight   : 700;
    margin-bottom : 10px;
}

.feature-card__description {
    font-size     : 0.9375rem;
    color         : var(--text-1);
    line-height   : 1.65;
    margin-bottom : 20px;
}

.feature-card__commands {
    display   : flex;
    flex-wrap : wrap;
    gap       : 6px;
}

.command-tag {
    padding          : 3px 10px;
    background-color : var(--bg-4);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-sm);
    font-size        : 0.8125rem;
    font-family      : var(--font-mono);
    color            : var(--text-1);
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
    background-color : var(--bg-1);
    border-top       : 1px solid var(--border);
}

.cta-block {
    max-width  : 640px;
    margin     : 0 auto;
    text-align : center;
}

.cta-block__title {
    font-size      : clamp(1.75rem, 3vw, 2.25rem);
    font-weight    : 700;
    letter-spacing : -0.025em;
    margin-bottom  : 12px;
}

.cta-block__text {
    font-size     : 1.0625rem;
    color         : var(--text-1);
    margin-bottom : 32px;
    line-height   : 1.7;
}

.cta-block__actions {
    display         : flex;
    justify-content : center;
    gap             : 12px;
    flex-wrap       : wrap;
}

/* ============================================================
   PAGE HEADER (pages internes)
   ============================================================ */
.page-header {
    background-color : var(--bg-1);
    border-bottom    : 1px solid var(--border);
    padding          : 56px 0 48px;
}

.page-header__title {
    font-size      : clamp(2rem, 4vw, 3rem);
    font-weight    : 800;
    letter-spacing : -0.03em;
    margin-bottom  : 8px;
}

.page-header__subtitle {
    font-size : 1.0625rem;
    color     : var(--text-1);
}

/* ============================================================
   COMMANDS PAGE
   ============================================================ */
.commands-layout {
    display               : grid;
    grid-template-columns : 260px 1fr;
    gap                   : 32px;
    align-items           : start;
}

/* Sidebar */
.commands-sidebar {
    position         : sticky;
    top              : 80px;
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    overflow         : hidden;
}

.sidebar-search {
    padding       : 14px;
    border-bottom : 1px solid var(--border);
}

.search-input {
    width            : 100%;
    padding          : 9px 13px;
    background-color : var(--bg-0);
    border           : 1px solid var(--border-strong);
    border-radius    : var(--radius-sm);
    font-family      : var(--font);
    font-size        : 0.875rem;
    color            : var(--text-0);
    outline          : none;
    transition       : border-color var(--transition);
}
.search-input:focus       { border-color: var(--accent-border); }
.search-input::placeholder{ color: var(--text-2); }

.category-list {
    padding        : 8px 0;
    max-height     : calc(100vh - 230px);
    overflow-y     : auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-4) transparent;
}
.category-list::-webkit-scrollbar       { width: 4px; }
.category-list::-webkit-scrollbar-track { background: transparent; }
.category-list::-webkit-scrollbar-thumb { background-color: var(--bg-4); border-radius: 2px; }

.category-btn {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 100%;
    padding         : 9px 16px;
    font-size       : 0.9rem;
    font-weight     : 500;
    color           : var(--text-1);
    text-align      : left;
    transition      : background-color var(--transition), color var(--transition);
}
.category-btn:hover            { background-color: var(--bg-3); color: var(--text-0); }
.category-btn--active          { background-color: var(--accent-dim); color: var(--accent); }
.category-btn--active:hover    { background-color: var(--accent-dim); }

.category-btn__count {
    font-size        : 0.72rem;
    background-color : var(--bg-4);
    color            : var(--text-2);
    padding          : 2px 8px;
    border-radius    : 999px;
    font-weight      : 600;
}
.category-btn--active .category-btn__count {
    background-color : rgba(88, 101, 242, 0.18);
    color            : var(--accent);
}

/* Panels */
.commands-panel         { display: none; }
.commands-panel--active { display: block; }

.commands-panel__header { margin-bottom: 24px; }

.commands-panel__title {
    font-size      : 1.5rem;
    font-weight    : 700;
    letter-spacing : -0.015em;
    margin-bottom  : 4px;
}

.commands-panel__desc {
    font-size : 0.9375rem;
    color     : var(--text-1);
}

/* Commands grid */
.commands-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(210px, 1fr));
    gap                   : 12px;
}

.command-card {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-md);
    padding          : 16px;
    transition       : border-color var(--transition);
}
.command-card:hover { border-color: var(--border-strong); }

.command-card__name {
    font-family   : var(--font-mono);
    font-size     : 0.9375rem;
    font-weight   : 700;
    margin-bottom : 6px;
}

.command-card__prefix {
    color       : var(--accent);
    font-weight : 700;
}

.command-card__desc {
    font-size   : 0.8125rem;
    color       : var(--text-1);
    line-height : 1.5;
}
.command-card__desc--empty {
    color       : var(--text-2);
    font-style  : italic;
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 24px;
    max-width             : 1000px;
    margin                : 0 auto 36px;
    align-items           : start;
    padding               : 20px 0;
}

.pricing-card {
    position         : relative;
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-xl);
    padding          : 32px;
    display          : flex;
    flex-direction   : column;
    gap              : 28px;
    transition       : border-color var(--transition), transform var(--transition);
}
.pricing-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.pricing-card--featured {
    border-color     : var(--accent-border);
    background-color : var(--bg-3);
    box-shadow       : 0 0 48px rgba(88, 101, 242, 0.07);
    transform        : translateY(-8px);
}
.pricing-card--featured:hover {
    border-color : rgba(88, 101, 242, 0.45);
    transform    : translateY(-12px);
}

.pricing-card__badge {
    position       : absolute;
    top            : -13px;
    left           : 50%;
    transform      : translateX(-50%);
    background     : var(--accent);
    color          : #fff;
    font-size      : 0.73rem;
    font-weight    : 700;
    padding        : 4px 16px;
    border-radius  : 999px;
    text-transform : uppercase;
    letter-spacing : 0.07em;
    white-space    : nowrap;
}

.pricing-card__name {
    font-size   : 1.125rem;
    font-weight : 700;
    color       : var(--text-0);
}

.pricing-card__price {
    display     : flex;
    align-items : flex-end;
    gap         : 6px;
    margin      : 10px 0 6px;
}

.price__amount {
    font-size      : 2.75rem;
    font-weight    : 800;
    letter-spacing : -0.035em;
    line-height    : 1;
    color          : var(--text-0);
}

.price__meta {
    display        : flex;
    flex-direction : column;
    padding-bottom : 4px;
    line-height    : 1.3;
}

.price__currency {
    font-size   : 0.9rem;
    font-weight : 600;
    color       : var(--text-1);
}

.price__period {
    font-size : 0.85rem;
    color     : var(--text-2);
}

.pricing-card__desc {
    font-size   : 0.9rem;
    color       : var(--text-1);
    line-height : 1.6;
}

.pricing-card__features {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    flex           : 1;
}

.pricing-feature {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : 0.9375rem;
    color       : var(--text-1);
}

.pricing-feature__check {
    flex-shrink      : 0;
    width            : 16px;
    height           : 16px;
    border-radius    : 50%;
    background-color : var(--accent-dim);
    border           : 1.5px solid var(--accent-border);
    position         : relative;
}
.pricing-feature__check::after {
    content          : '';
    position         : absolute;
    top              : 3px;
    left             : 3px;
    width            : 8px;
    height           : 8px;
    border-radius    : 50%;
    background-color : var(--accent);
}

.pricing-note {
    text-align : center;
    font-size  : 0.875rem;
    color      : var(--text-2);
    max-width  : 480px;
    margin     : 0 auto;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(440px, 1fr));
    gap                   : 20px;
    max-width             : 1000px;
    margin                : 0 auto;
}

.faq-item {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    padding          : 24px;
}

.faq-item__question {
    font-size     : 1rem;
    font-weight   : 600;
    color         : var(--text-0);
    margin-bottom : 8px;
}

.faq-item__answer {
    font-size   : 0.9375rem;
    color       : var(--text-1);
    line-height : 1.65;
}

/* ============================================================
   ERROR PAGES
   ============================================================ */
.error-page {
    min-height      : calc(100vh - 64px - 200px);
    display         : flex;
    align-items     : center;
    justify-content : center;
    text-align      : center;
}

.error-code {
    font-size      : clamp(6rem, 16vw, 11rem);
    font-weight    : 800;
    letter-spacing : -0.04em;
    line-height    : 1;
    color          : var(--accent);
    margin-bottom  : 16px;
    opacity        : 0.85;
}

.error-title {
    font-size      : clamp(1.5rem, 3vw, 2.25rem);
    font-weight    : 700;
    letter-spacing : -0.02em;
    margin-bottom  : 12px;
}

.error-message {
    font-size      : 1rem;
    color          : var(--text-1);
    margin-bottom  : 32px;
    max-width      : 400px;
    margin-left    : auto;
    margin-right   : auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background-color : var(--bg-1);
    border-top       : 1px solid var(--border);
}

.footer__inner {
    display         : flex;
    justify-content : space-between;
    gap             : 48px;
    padding-top     : 56px;
    padding-bottom  : 40px;
    flex-wrap       : wrap;
}

.footer__about { max-width: 280px; }

.footer__brand {
    font-size      : 1.25rem;
    font-weight    : 800;
    color          : var(--accent);
    letter-spacing : -0.02em;
    display        : block;
    margin-bottom  : 10px;
}

.footer__tagline {
    font-size   : 0.9rem;
    color       : var(--text-2);
    line-height : 1.65;
}

.footer__links {
    display   : flex;
    gap       : 64px;
    flex-wrap : wrap;
}

.footer__col-title {
    font-size      : 0.78rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 0.08em;
    color          : var(--text-0);
    margin-bottom  : 14px;
}

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

.footer__list a {
    font-size  : 0.9375rem;
    color      : var(--text-2);
    transition : color var(--transition);
}
.footer__list a:hover { color: var(--text-0); }

.footer__bottom {
    border-top : 1px solid var(--border);
    padding    : 20px 0;
}

.footer__bottom p {
    font-size  : 0.875rem;
    color      : var(--text-2);
    text-align : center;
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .commands-layout      { grid-template-columns: 230px 1fr; }
    .pricing-grid         { grid-template-columns: 1fr 1fr; }
    .pricing-card--featured { transform: none; }
    .pricing-card--featured:hover { transform: translateY(-4px); }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
    .section { padding: 56px 0; }

    /* Navbar mobile */
    .navbar__nav {
        display          : none;
        position         : absolute;
        top              : 64px;
        left             : 0;
        right            : 0;
        background-color : var(--bg-1);
        border-bottom    : 1px solid var(--border);
        flex-direction   : column;
        padding          : 12px 16px 16px;
        gap              : 2px;
    }
    .navbar__nav.navbar__nav--open { display: flex; }
    .navbar__toggle     { display: flex; }
    .navbar__actions    { display: none; }
    .navbar__inner      { position: relative; }

    /* Hero */
    .hero { padding: 64px 0 52px; }

    /* Stats */
    .stats-bar__inner { flex-wrap: wrap; }
    .stat             { padding: 8px 28px; }

    /* Features */
    .features-grid { grid-template-columns: 1fr; }

    /* Commands */
    .commands-layout {
        grid-template-columns : 1fr;
    }
    .commands-sidebar { position: static; }
    .category-list {
        max-height  : none;
        display     : flex;
        flex-wrap   : wrap;
        gap         : 4px;
        padding     : 12px;
    }
    .category-btn {
        width         : auto;
        border-radius : var(--radius-sm);
        padding       : 6px 12px;
        font-size     : 0.8125rem;
    }
    .sidebar-search { display: none; }

    /* Pricing */
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }

    /* FAQ */
    .faq-grid { grid-template-columns: 1fr; }

    /* Footer */
    .footer__inner  { flex-direction: column; gap: 32px; }
    .footer__links  { gap: 32px; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    .hero__title { font-size: 2.25rem; }

    .stats-bar__inner {
        display               : grid;
        grid-template-columns : 1fr 1fr;
        gap                   : 16px;
        text-align            : center;
    }
    .stat-divider { display: none; }
    .stat         { padding: 8px 0; }

    .commands-grid { grid-template-columns: 1fr; }

    .hero__actions { flex-direction: column; align-items: stretch; }
    .cta-block__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   NAVBAR — AVATAR USER
   ============================================================ */
.navbar__avatar-link {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding     : 4px 10px;
    border-radius : var(--radius-md);
    transition  : background-color var(--transition);
}
.navbar__avatar-link:hover { background-color: var(--bg-2); }

.navbar__avatar {
    width         : 28px;
    height        : 28px;
    border-radius : 50%;
    object-fit    : cover;
}

.navbar__username {
    font-size   : 0.9rem;
    font-weight : 600;
    color       : var(--text-0);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display          : inline-block;
    padding          : 3px 10px;
    border-radius    : 999px;
    font-size        : 0.72rem;
    font-weight      : 700;
    text-transform   : uppercase;
    letter-spacing   : 0.05em;
    background-color : var(--bg-4);
    color            : var(--text-1);
    border           : 1px solid var(--border);
}
.badge--green  { background-color: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.25); }
.badge--accent { background-color: var(--accent-dim);   color: var(--accent); border-color: var(--accent-border); }
.badge--yellow { background-color: rgba(234,179,8,.12); color: #facc15; border-color: rgba(234,179,8,.25); }
.badge--error  { background-color: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.25); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding       : 12px 16px;
    border-radius : var(--radius-md);
    font-size     : 0.9375rem;
    margin-bottom : 20px;
    border        : 1px solid transparent;
}
.alert--success { background-color: rgba(34,197,94,.1);  color: #4ade80; border-color: rgba(34,197,94,.25); }
.alert--error   { background-color: rgba(239,68,68,.1);  color: #f87171; border-color: rgba(239,68,68,.25); }

/* ============================================================
   STORE
   ============================================================ */
.store-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
    gap                   : 20px;
}

.store-card {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    overflow         : hidden;
    display          : flex;
    flex-direction   : column;
    transition       : border-color var(--transition), transform var(--transition);
}
.store-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.store-card__img {
    width      : 100%;
    height     : 160px;
    object-fit : cover;
}

.store-card__img-placeholder {
    width            : 100%;
    height           : 160px;
    background       : linear-gradient(135deg, var(--bg-3), var(--bg-4));
}

.store-card__body {
    padding        : 20px;
    display        : flex;
    flex-direction : column;
    flex           : 1;
    gap            : 10px;
}

.store-card__top {
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.store-card__name {
    font-size   : 1.0625rem;
    font-weight : 700;
    flex        : 1;
}

.store-card__desc {
    font-size   : 0.9rem;
    color       : var(--text-1);
    line-height : 1.6;
    flex        : 1;
}

.store-card__footer {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-top      : 8px;
    gap             : 8px;
}

.store-card__actions { display: flex; gap: 6px; align-items: center; }

.price-free    { font-size: 1.1rem; font-weight: 700; color: #4ade80; }
.price-amount  { font-size: 1.2rem; font-weight: 800; color: var(--text-0); }
.price-currency{ font-size: 0.85rem; color: var(--text-1); margin-left: 2px; }

/* ============================================================
   BOT DETAIL PAGE
   ============================================================ */
.bot-detail__layout {
    display               : grid;
    grid-template-columns : 1fr 320px;
    gap                   : 40px;
    align-items           : start;
}

.back-link {
    display       : inline-block;
    font-size     : 0.875rem;
    color         : var(--text-2);
    margin-bottom : 12px;
    transition    : color var(--transition);
}
.back-link:hover { color: var(--text-0); }

.bot-detail__desc {
    font-size    : 1rem;
    color        : var(--text-1);
    line-height  : 1.8;
    white-space  : pre-wrap;
    margin-bottom: 32px;
}

.bot-detail__section-title {
    font-size     : 1.0625rem;
    font-weight   : 700;
    margin-bottom : 14px;
    color         : var(--text-0);
}

.feature-list { display: flex; flex-direction: column; gap: 10px; }
.feature-list__item {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : 0.9375rem;
    color       : var(--text-1);
}

.detail-card {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-xl);
    padding          : 24px;
    display          : flex;
    flex-direction   : column;
    gap              : 16px;
    position         : sticky;
    top              : 80px;
}

.detail-card__img {
    width         : 100%;
    border-radius : var(--radius-md);
    object-fit    : cover;
    max-height    : 180px;
}

.detail-card__price {
    display     : flex;
    align-items : baseline;
    gap         : 4px;
}

.detail-card__balance { font-size: 0.875rem; color: var(--text-1); }

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.dashboard-layout {
    display               : grid;
    grid-template-columns : 220px 1fr;
    min-height            : calc(100vh - 64px);
}

.dashboard-nav {
    background-color : var(--bg-1);
    border-right     : 1px solid var(--border);
    padding          : 24px 0;
    position         : sticky;
    top              : 64px;
    height           : calc(100vh - 64px);
    overflow-y       : auto;
}

.dnav-list { display: flex; flex-direction: column; }

.dnav-link {
    display     : block;
    padding     : 10px 20px;
    font-size   : 0.9rem;
    font-weight : 500;
    color       : var(--text-1);
    transition  : color var(--transition), background-color var(--transition);
}
.dnav-link:hover         { background-color: var(--bg-2); color: var(--text-0); }
.dnav-link--active       { background-color: var(--bg-2); color: var(--text-0); }
.dnav-link--admin        { color: var(--accent); }
.dnav-link--admin:hover  { background-color: var(--accent-dim); color: var(--accent); }

.dashboard-main { padding: 40px; }

.dashboard-header   { margin-bottom: 32px; }

.dashboard-title {
    font-size      : clamp(1.5rem, 3vw, 2rem);
    font-weight    : 800;
    letter-spacing : -0.025em;
}

.dashboard-subtitle { font-size: 0.9375rem; color: var(--text-1); margin-top: 4px; }

/* ============================================================
   DASH STATS
   ============================================================ */
.dash-stats {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 16px;
    margin-bottom: 40px;
}

.dash-stat {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    padding          : 20px 28px;
    display          : flex;
    flex-direction   : column;
    gap              : 4px;
    min-width        : 140px;
}

.dash-stat--warn { border-color: rgba(234,179,8,.3); background-color: rgba(234,179,8,.06); }

.dash-stat__value {
    font-size      : 1.75rem;
    font-weight    : 800;
    letter-spacing : -0.025em;
    color          : var(--text-0);
}

.dash-stat__label {
    font-size      : 0.75rem;
    color          : var(--text-2);
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.06em;
}

/* ============================================================
   DASH SECTIONS
   ============================================================ */
.dash-section       { margin-bottom: 40px; }

.dash-section__title {
    font-size     : 1.125rem;
    font-weight   : 700;
    margin-bottom : 16px;
    color         : var(--text-0);
}

.dash-section__desc {
    font-size     : 0.9rem;
    color         : var(--text-1);
    line-height   : 1.65;
    margin-bottom : 20px;
    max-width     : 640px;
}

/* ============================================================
   PURCHASES GRID
   ============================================================ */
.purchases-grid { display: flex; flex-direction: column; gap: 10px; }

.purchase-card {
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-md);
    padding          : 14px 18px;
    gap              : 12px;
}

.purchase-card__name { font-size: 0.9375rem; color: var(--text-0); }
.purchase-card__desc { font-size: 0.8125rem; color: var(--text-1); margin-top: 2px; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
    overflow-x    : auto;
    border-radius : var(--radius-lg);
    border        : 1px solid var(--border);
}

.data-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : 0.875rem;
}

.data-table th {
    padding          : 12px 16px;
    text-align       : left;
    font-size        : 0.75rem;
    font-weight      : 700;
    text-transform   : uppercase;
    letter-spacing   : 0.06em;
    color            : var(--text-2);
    background-color : var(--bg-2);
    border-bottom    : 1px solid var(--border);
    white-space      : nowrap;
}

.data-table td {
    padding        : 12px 16px;
    border-bottom  : 1px solid var(--border);
    color          : var(--text-0);
    vertical-align : middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td      { background-color: var(--bg-2); }
.row--banned td              { opacity: 0.55; }
.row--ok     td              { background-color: rgba(34,197,94,.04); }

.td-muted   { color: var(--text-2); font-size: 0.8125rem; }
.td-mono    { font-family: var(--font-mono); font-size: 0.75rem; }
.td-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 16px;
    margin-bottom         : 20px;
}

.form-row--full { grid-column: 1 / -1; }

.form-label {
    display       : block;
    font-size     : 0.8125rem;
    font-weight   : 600;
    color         : var(--text-1);
    margin-bottom : 6px;
}

.form-input,
.form-select,
.form-textarea {
    width            : 100%;
    padding          : 9px 12px;
    background-color : var(--bg-0);
    border           : 1px solid var(--border-strong);
    border-radius    : var(--radius-sm);
    font-family      : var(--font);
    font-size        : 0.9rem;
    color            : var(--text-0);
    outline          : none;
    transition       : border-color var(--transition);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus  { border-color: var(--accent-border); }
.form-input::placeholder { color: var(--text-2); }
.form-input--xs { width: 80px; padding: 5px 8px; font-size: 0.8rem; }
.form-textarea  { resize: vertical; }
.form-select    { appearance: none; cursor: pointer; }

.inline-form { display: inline-flex; align-items: center; gap: 4px; }

.deposit-form {
    display        : flex;
    flex-direction : column;
    gap            : 16px;
    max-width      : 480px;
}

.wallet-preview {
    background-color : var(--bg-3);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-md);
    padding          : 16px;
}

.wallet-info        { display: flex; flex-direction: column; gap: 4px; }

.wallet-info__label {
    font-size      : 0.75rem;
    color          : var(--text-2);
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 0.06em;
}

.wallet-info__address {
    font-family : var(--font-mono);
    font-size   : 0.8125rem;
    color       : var(--text-0);
    word-break  : break-all;
    user-select : all;
}

.wallet-info__crypto {
    font-size   : 1.25rem;
    font-weight : 800;
    color       : var(--accent);
}

/* ============================================================
   ADMIN QUICK LINKS
   ============================================================ */
.admin-quick-links {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
    gap                   : 16px;
}

.admin-ql-card {
    background-color : var(--bg-2);
    border           : 1px solid var(--border);
    border-radius    : var(--radius-lg);
    padding          : 20px 24px;
    font-size        : 0.9375rem;
    font-weight      : 600;
    color            : var(--text-0);
    transition       : border-color var(--transition), transform var(--transition);
    display          : block;
}
.admin-ql-card:hover {
    border-color : var(--accent-border);
    color        : var(--accent);
    transform    : translateY(-2px);
}

/* ============================================================
   BUTTON EXTRA SIZES
   ============================================================ */
.btn--xs  { padding: 4px 10px; font-size: 0.78rem; border-radius: var(--radius-sm); }
.btn--error {
    background-color : rgba(239,68,68,.15);
    color            : #f87171;
    border-color     : rgba(239,68,68,.3);
}
.btn--error:hover { background-color: rgba(239,68,68,.25); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align     : center;
    padding        : 40px 24px;
    border         : 1px dashed var(--border-strong);
    border-radius  : var(--radius-lg);
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 16px;
}

.empty-state__text { font-size: 0.9375rem; color: var(--text-2); }

/* ============================================================
   RESPONSIVE — DASHBOARD + STORE
   ============================================================ */
@media (max-width: 768px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-nav {
        position      : static;
        height        : auto;
        border-right  : none;
        border-bottom : 1px solid var(--border);
        padding       : 8px 0;
    }
    .dnav-list      { flex-direction: row; flex-wrap: wrap; padding: 0 12px; gap: 2px; }
    .dnav-link      { padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.8125rem; }
    .dashboard-main { padding: 24px 16px; }

    .bot-detail__layout { grid-template-columns: 1fr; }
    .detail-card        { position: static; }

    .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .store-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   STORE DETAIL — SUBSCRIPTION FORM
   ============================================================ */
.sub-form {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
}

.crypto-select { font-size: 0.875rem; }

.detail-sep {
    border     : none;
    border-top : 1px solid var(--border);
    margin     : 4px 0;
}

.detail-card__note {
    font-size  : 0.78rem;
    color      : var(--text-2);
    text-align : center;
    line-height: 1.5;
}

/* ============================================================
   SUBSCRIPTION BADGE — EXPIRY IN CARD
   ============================================================ */
.sub-expiry {
    font-size  : 0.8rem;
    color      : var(--text-2);
    margin-top : 2px;
}


/* ============================================================
   INSTANCES (multi-tenant bot hosting)
   ============================================================ */
.instances-grid {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

.instance-card {
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 20px 24px;
}

.instance-card__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 8px;
}

.instance-card__name {
    font-size   : 0.9375rem;
    color       : var(--text-0);
}

.instance-card__meta {
    font-size     : 0.8125rem;
    color         : var(--text-1);
    margin-bottom : 12px;
}

.instance-card__meta--warn { color: #e0a020; }

.instance-card__error {
    font-size     : 0.8125rem;
    color         : #e05050;
    margin-bottom : 12px;
    font-family   : var(--font-mono);
    background    : rgba(224,80,80,.08);
    padding       : 6px 10px;
    border-radius : var(--radius-sm);
}

.instance-card__actions {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 8px;
    margin-top : 12px;
}

.token-update-form {
    display    : flex;
    gap        : 8px;
    margin-top : 12px;
    align-items: center;
}

.token-update-form .form-input {
    flex : 1;
}

.hidden { display: none !important; }

/* Instance form */
.instance-form {
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 24px;
    max-width     : 560px;
    display       : flex;
    flex-direction: column;
    gap           : 16px;
}

/* Lang toggle button */
.lang-toggle {
    font-size    : 0.75rem;
    font-weight  : 600;
    letter-spacing: 0.05em;
    padding      : 4px 10px;
}

/* Badge red */
.badge--red {
    background-color : rgba(224,80,80,.15);
    color            : #e05050;
    border-color     : rgba(224,80,80,.3);
}

/* ============================================================
   BALANCE CHIP — NAVBAR
   ============================================================ */
.balance-chip {
    display      : inline-flex;
    align-items  : center;
    gap          : 7px;
    padding      : 5px 13px 5px 10px;
    background   : linear-gradient(135deg, rgba(88, 101, 242, .12), rgba(88, 101, 242, .05));
    border       : 1px solid var(--accent-border);
    border-radius: 999px;
    font-size    : 0.8125rem;
    font-weight  : 700;
    color        : var(--accent);
    transition   : background var(--transition), border-color var(--transition);
    white-space  : nowrap;
}
.balance-chip:hover {
    background   : var(--accent-dim);
    border-color : rgba(88, 101, 242, .45);
}
.balance-chip__dot {
    width        : 7px;
    height       : 7px;
    background   : var(--accent);
    border-radius: 50%;
    flex-shrink  : 0;
    animation    : pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .45; transform: scale(.65); }
}

/* ============================================================
   DASHBOARD WELCOME CARD
   ============================================================ */
.dash-welcome {
    display      : flex;
    align-items  : center;
    gap          : 20px;
    background   : linear-gradient(135deg, var(--bg-2) 60%, var(--bg-3));
    border       : 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding      : 26px 30px;
    margin-bottom: 28px;
    position     : relative;
    overflow     : hidden;
}
.dash-welcome::after {
    content       : '';
    position      : absolute;
    top           : -50px;
    right         : -50px;
    width         : 220px;
    height        : 220px;
    background    : radial-gradient(circle, rgba(88, 101, 242, .06) 0%, transparent 70%);
    pointer-events: none;
}
.dash-welcome__avatar img,
.dash-welcome__avatar-placeholder {
    width        : 56px;
    height       : 56px;
    border-radius: 50%;
    flex-shrink  : 0;
}
.dash-welcome__avatar img {
    border    : 2px solid var(--accent-border);
    object-fit: cover;
}
.dash-welcome__avatar-placeholder {
    background     : var(--bg-4);
    border         : 2px solid var(--border-strong);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 1.4rem;
    font-weight    : 800;
    color          : var(--text-2);
}
.dash-welcome__info        { flex: 1; min-width: 0; }
.dash-welcome__greeting {
    font-size     : 1.25rem;
    font-weight   : 800;
    letter-spacing: -.02em;
    margin-bottom : 3px;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.dash-welcome__role          { font-size: .8rem; color: var(--text-2); font-weight: 600; }
.dash-welcome__role--admin   { color: var(--accent); }
.dash-welcome__balance {
    display        : flex;
    flex-direction : column;
    align-items    : flex-end;
    gap            : 8px;
    flex-shrink    : 0;
}
.dash-balance-label {
    font-size     : .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color         : var(--text-2);
    font-weight   : 700;
}
.dash-balance-amount {
    font-size     : 1.85rem;
    font-weight   : 800;
    letter-spacing: -.03em;
    line-height   : 1;
    color         : var(--text-0);
}

/* ============================================================
   STAT CARDS V2
   ============================================================ */
.dash-stats-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(165px, 1fr));
    gap                   : 14px;
    margin-bottom         : 36px;
}
.stat-card {
    background   : var(--bg-2);
    border       : 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding      : 18px 20px;
    display      : flex;
    flex-direction: column;
    gap          : 14px;
    position     : relative;
    overflow     : hidden;
    transition   : border-color var(--transition), transform var(--transition);
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.stat-card__icon {
    width         : 34px;
    height        : 34px;
    border-radius : var(--radius-sm);
    display       : flex;
    align-items   : center;
    justify-content: center;
}
.stat-card__icon--red    { background: rgba(88, 101, 242, .12); color: var(--accent); }
.stat-card__icon--green  { background: rgba(34,197,94,.12); color: #4ade80; }
.stat-card__icon--blue   { background: rgba(99,102,241,.12); color: #818cf8; }
.stat-card__icon--yellow { background: rgba(234,179,8,.12); color: #facc15; }
.stat-card__value {
    font-size     : 1.85rem;
    font-weight   : 800;
    letter-spacing: -.03em;
    line-height   : 1;
    color         : var(--text-0);
}
.stat-card__label {
    font-size     : .72rem;
    color         : var(--text-2);
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.stat-card__bar {
    position: absolute;
    bottom  : 0;
    left    : 0;
    width   : 55%;
    height  : 2px;
}
.stat-card__bar--red    { background: linear-gradient(90deg, var(--accent), transparent); }
.stat-card__bar--green  { background: linear-gradient(90deg, #4ade80, transparent); }
.stat-card__bar--blue   { background: linear-gradient(90deg, #818cf8, transparent); }
.stat-card__bar--yellow { background: linear-gradient(90deg, #facc15, transparent); }

/* ============================================================
   SECTION HEADER WITH ACTION LINK
   ============================================================ */
.dash-section-head {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 16px;
}
.dash-section-head .dash-section__title { margin-bottom: 0; }

/* Dot status on purchase card */
.purchase-card__dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    flex-shrink  : 0;
}
.purchase-card__dot--green  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.5); }
.purchase-card__dot--yellow { background: #facc15; box-shadow: 0 0 6px rgba(250,204,21,.5); }

/* ============================================================
   FEATURE CARDS — icon + colored top accent
   ============================================================ */
.feature-card__icon {
    width        : 38px;
    height       : 38px;
    border-radius: var(--radius-sm);
    display      : flex;
    align-items  : center;
    justify-content: center;
    margin-bottom: 14px;
}
.feature-card:nth-child(6n+1) { border-top: 2px solid rgba(88, 101, 242, .35); }
.feature-card:nth-child(6n+2) { border-top: 2px solid rgba( 99,102,241,.35); }
.feature-card:nth-child(6n+3) { border-top: 2px solid rgba( 34,197, 94,.35); }
.feature-card:nth-child(6n+4) { border-top: 2px solid rgba(234,179,  8,.35); }
.feature-card:nth-child(6n+5) { border-top: 2px solid rgba( 56,189,248,.35); }
.feature-card:nth-child(6n+6) { border-top: 2px solid rgba(244,114,182,.35); }
.feature-card:nth-child(6n+1) .feature-card__icon { background: rgba(88, 101, 242, .12); color: #ff5040; }
.feature-card:nth-child(6n+2) .feature-card__icon { background: rgba( 99,102,241,.12); color: #818cf8; }
.feature-card:nth-child(6n+3) .feature-card__icon { background: rgba( 34,197, 94,.12); color: #4ade80; }
.feature-card:nth-child(6n+4) .feature-card__icon { background: rgba(234,179,  8,.12); color: #facc15; }
.feature-card:nth-child(6n+5) .feature-card__icon { background: rgba( 56,189,248,.12); color: #38bdf8; }
.feature-card:nth-child(6n+6) .feature-card__icon { background: rgba(244,114,182,.12); color: #f472b6; }

/* ============================================================
   HERO GRID BACKGROUND
   ============================================================ */
.hero__grid {
    position    : absolute;
    inset       : 0;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events : none;
    z-index        : 0;
    mask-image          : radial-gradient(ellipse at 50% 0%, black 20%, transparent 72%);
    -webkit-mask-image  : radial-gradient(ellipse at 50% 0%, black 20%, transparent 72%);
}
.hero__badge-live {
    display         : inline-block;
    width           : 7px;
    height          : 7px;
    background      : var(--accent);
    border-radius   : 50%;
    margin-right    : 6px;
    vertical-align  : middle;
    animation       : pulse-dot 2s ease-in-out infinite;
}

/* ============================================================
   RESPONSIVE — nouveaux composants
   ============================================================ */
@media (max-width: 768px) {
    .dash-welcome        { flex-wrap: wrap; }
    .dash-welcome__balance {
        width          : 100%;
        flex-direction : row;
        align-items    : center;
        gap            : 12px;
    }
    .dash-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .balance-chip { display: none; }
}
@media (max-width: 480px) {
    .dash-stats-grid { grid-template-columns: 1fr 1fr; }
    .dash-welcome__greeting { font-size: 1.05rem; }
    .dash-balance-amount    { font-size: 1.4rem; }
}

/* ============================================================
   DASHBOARD NAV — icons
   ============================================================ */
.dnav-link {
    display      : flex;
    align-items  : center;
    gap          : 10px;
}
.dnav-link svg { flex-shrink: 0; opacity: .65; transition: opacity var(--transition); }
.dnav-link:hover svg,
.dnav-link--active svg { opacity: 1; }
.dnav-section {
    font-size     : .65rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color         : var(--text-2);
    padding       : 18px 20px 6px;
}

/* ============================================================
   WALLET PAGE
   ============================================================ */
.wallet-hero {
    display      : flex;
    align-items  : center;
    justify-content: space-between;
    gap          : 20px;
    background   : linear-gradient(135deg, var(--bg-2) 60%, var(--bg-3));
    border       : 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding      : 28px 32px;
    margin-bottom: 28px;
    position     : relative;
    overflow     : hidden;
}
.wallet-hero::before {
    content    : '';
    position   : absolute;
    bottom     : -40px;
    right      : -40px;
    width      : 180px;
    height     : 180px;
    background : radial-gradient(circle, rgba(88, 101, 242, .07) 0%, transparent 70%);
    pointer-events: none;
}
.wallet-hero__left      { display: flex; flex-direction: column; gap: 6px; }
.wallet-hero__label     { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); font-weight: 700; }
.wallet-hero__amount    { font-size: 2.8rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text-0); }
.wallet-hero__sub       { font-size: .875rem; color: var(--text-1); }
.wallet-hero__icon {
    width        : 56px;
    height       : 56px;
    border-radius: var(--radius-lg);
    background   : var(--accent-dim);
    border       : 1px solid var(--accent-border);
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : var(--accent);
    flex-shrink  : 0;
}

/* Deposit card layout */
.deposit-layout {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 24px;
    align-items           : start;
}
.deposit-card {
    background   : var(--bg-2);
    border       : 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding      : 28px;
}
.deposit-card__title {
    font-size     : 1rem;
    font-weight   : 700;
    margin-bottom : 6px;
    color         : var(--text-0);
}
.deposit-card__desc {
    font-size     : .875rem;
    color         : var(--text-1);
    line-height   : 1.6;
    margin-bottom : 20px;
}
.deposit-card__divider {
    height           : 1px;
    background-color : var(--border);
    margin           : 20px 0;
}
.crypto-addr-box {
    background   : var(--bg-3);
    border       : 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding      : 14px 16px;
    display      : flex;
    flex-direction: column;
    gap          : 6px;
}
.crypto-addr-box__label   { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.crypto-addr-box__addr    { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-0); word-break: break-all; user-select: all; }
.crypto-addr-box__estimate { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.crypto-addr-box__est-val  { font-size: 1.35rem; font-weight: 800; color: var(--accent); }
.crypto-addr-box__est-label{ font-size: .78rem; color: var(--text-2); }

/* ============================================================
   ADMIN NAV & CARDS
   ============================================================ */
.admin-ql-card__icon {
    width         : 36px;
    height        : 36px;
    border-radius : var(--radius-sm);
    background    : var(--accent-dim);
    color         : var(--accent);
    display       : flex;
    align-items   : center;
    justify-content: center;
    margin-bottom : 14px;
    transition    : background var(--transition);
}
.admin-ql-card:hover .admin-ql-card__icon { background: rgba(88, 101, 242, .22); }
.admin-ql-card__desc  { font-size: .8125rem; color: var(--text-2); margin-top: 4px; font-weight: 400; }
.admin-ql-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
    gap                   : 16px;
}

/* ============================================================
   INSTANCE CARD v2
   ============================================================ */
.instance-card {
    background   : var(--bg-2);
    border       : 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding      : 22px 24px;
    display      : flex;
    flex-direction: column;
    gap          : 14px;
    transition   : border-color var(--transition), transform var(--transition);
}
.instance-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.instance-card--running { border-left: 3px solid #4ade80; }
.instance-card--error   { border-left: 3px solid #f87171; }
.instance-card--stopped { border-left: 3px solid rgba(255,255,255,.12); }
.instance-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.instance-card__name   { font-size: 1rem; font-weight: 700; color: var(--text-0); }
.instance-card__meta   { font-size: .8125rem; color: var(--text-1); }
.instance-card__meta--warn { color: #facc15; }
.instance-card__error  { font-size: .8rem; color: #f87171; background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.2); border-radius: var(--radius-sm); padding: 8px 12px; }
.instance-card__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.token-update-form { display: flex; gap: 8px; margin-top: 4px; }
.token-update-form .form-input { flex: 1; }

/* ============================================================
   STORE CARD v2
   ============================================================ */
.store-card__img-placeholder {
    width            : 100%;
    height           : 160px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background       : linear-gradient(135deg, var(--bg-3) 0%, var(--bg-4) 100%);
    position         : relative;
    overflow         : hidden;
}
.store-card__img-placeholder::after {
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    right            : 0;
    height           : 60px;
    background       : linear-gradient(to top, var(--bg-2), transparent);
}
.store-card__placeholder-icon {
    color   : var(--text-2);
    opacity : .4;
}
.store-card__price-tag {
    display        : inline-flex;
    align-items    : baseline;
    gap            : 3px;
}

/* ============================================================
   PAGE HEADER v2 — avec fond dégradé
   ============================================================ */
.page-header {
    position         : relative;
    overflow         : hidden;
}
.page-header::after {
    content          : '';
    position         : absolute;
    top              : 0;
    left             : 50%;
    transform        : translateX(-50%);
    width            : 600px;
    height           : 200px;
    background       : radial-gradient(ellipse at 50% 0%, rgba(88, 101, 242, .06) 0%, transparent 70%);
    pointer-events   : none;
    z-index          : 0;
}
.page-header .container { position: relative; z-index: 1; }
.page-header__breadcrumb {
    font-size       : .8125rem;
    color           : var(--text-2);
    margin-bottom   : 10px;
    display         : flex;
    align-items     : center;
    gap             : 6px;
}
.page-header__breadcrumb a     { color: var(--text-2); transition: color var(--transition); }
.page-header__breadcrumb a:hover { color: var(--text-0); }
.page-header__breadcrumb-sep   { opacity: .4; }

/* ============================================================
   ERROR PAGES v2
   ============================================================ */
.error-page__glow {
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -60%);
    width        : 500px;
    height       : 400px;
    background   : radial-gradient(ellipse, rgba(88, 101, 242, .07) 0%, transparent 65%);
    pointer-events: none;
    z-index      : 0;
}
.error-page { position: relative; }
.error-page__inner { position: relative; z-index: 1; }
.error-code__sub {
    font-size  : 1rem;
    font-weight: 600;
    color      : var(--text-2);
    margin-bottom: 24px;
    letter-spacing: .01em;
}

/* ============================================================
   FORM HINT
   ============================================================ */
.form-hint {
    font-size : .78rem;
    color     : var(--text-2);
    margin-top: 5px;
    display   : block;
    line-height: 1.5;
}

/* ============================================================
   RESPONSIVE — wallet layout
   ============================================================ */
@media (max-width: 768px) {
    .deposit-layout { grid-template-columns: 1fr; }
    .wallet-hero__amount { font-size: 2rem; }
}

/* ============================================================
   VISUAL POLISH PASS — gradients, glows, micro-animations
   ============================================================ */

/* ──────────────────────────────────────────
   CSS VARS ADDITIONS
────────────────────────────────────────── */
:root {
    --gradient-brand  : linear-gradient(135deg, #5865F2 0%, #ff6040 100%);
    --gradient-subtle : linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
    --glow-accent     : 0 0 32px rgba(88, 101, 242, .18), 0 0 8px rgba(88, 101, 242, .1);
    --glow-card       : 0 8px 32px rgba(0,0,0,.45);
    --transition-slow : 280ms cubic-bezier(.4,0,.2,1);
}

/* ──────────────────────────────────────────
   SCROLLBAR GLOBAL
────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-2); }
* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }

/* ──────────────────────────────────────────
   SELECTION COLOR
────────────────────────────────────────── */
::selection { background: rgba(88, 101, 242, .25); color: #fff; }

/* ──────────────────────────────────────────
   BRAND — gradient text
────────────────────────────────────────── */
.navbar__brand,
.footer__brand {
    background       : var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}
.navbar__brand:hover { opacity: .88; }
.footer__brand:hover { opacity: .88; }

/* ──────────────────────────────────────────
   NAVBAR IMPROVEMENTS
────────────────────────────────────────── */
.navbar {
    background-color : rgba(8, 8, 10, 0.92);
    box-shadow       : 0 1px 0 0 rgba(88, 101, 242, .08), 0 4px 24px rgba(0,0,0,.3);
    border-bottom    : none;
}
.navbar::after {
    content     : '';
    position    : absolute;
    bottom      : 0; left: 0; right: 0;
    height      : 1px;
    background  : linear-gradient(90deg, transparent, rgba(88, 101, 242, .18) 30%, rgba(88, 101, 242, .18) 70%, transparent);
}
.navbar { position: sticky; top: 0; z-index: 100; }

.nav-link {
    border-radius : var(--radius-md);
    font-size     : 0.9rem;
    position      : relative;
}
.nav-link--active {
    background    : linear-gradient(135deg, rgba(88, 101, 242, .1), rgba(88, 101, 242, .04));
    color         : var(--text-0);
    border        : 1px solid rgba(88, 101, 242, .15);
}

/* ──────────────────────────────────────────
   BUTTONS — richer gradients + glow
────────────────────────────────────────── */
.btn--primary {
    background    : var(--gradient-brand);
    border-color  : transparent;
    box-shadow    : 0 2px 12px rgba(88, 101, 242, .2);
    position      : relative;
    overflow      : hidden;
}
.btn--primary::before {
    content   : '';
    position  : absolute;
    inset     : 0;
    background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 55%);
    pointer-events: none;
}
.btn--primary:hover {
    background    : linear-gradient(135deg, #4752c4 0%, #ff4020 100%);
    box-shadow    : var(--glow-accent), 0 4px 16px rgba(88, 101, 242, .25);
    transform     : translateY(-1px);
}
.btn--primary:active { transform: translateY(0) scale(.97); }

.btn--ghost {
    background   : rgba(255,255,255,.04);
    border-color : rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
}
.btn--ghost:hover {
    background   : rgba(255,255,255,.08);
    border-color : rgba(255,255,255,.14);
    transform    : translateY(-1px);
}

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

/* ──────────────────────────────────────────
   HERO — richer gradient text + badge
────────────────────────────────────────── */
.hero {
    padding    : 110px 0 96px;
}
.hero__glow {
    width      : 900px;
    height     : 600px;
    background : radial-gradient(ellipse at 50% 0%,
                   rgba(88, 101, 242, .11) 0%,
                   rgba(255,60,0,.04) 40%,
                   transparent 70%);
}

.text-accent {
    background       : linear-gradient(135deg, #5865F2 0%, #ff6b50 60%, #5865F2 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

.hero__badge {
    padding     : 6px 16px;
    font-size   : 0.75rem;
    background  : rgba(88, 101, 242, .1);
    border      : 1px solid rgba(88, 101, 242, .22);
    box-shadow  : 0 0 20px rgba(88, 101, 242, .08) inset;
    backdrop-filter: blur(8px);
}

.hero__title { line-height: 1.06; }

/* ──────────────────────────────────────────
   STATS BAR — glassmorphism
────────────────────────────────────────── */
.stats-bar {
    background   : rgba(22, 22, 26, 0.9);
    backdrop-filter: blur(12px);
    border-top   : 1px solid rgba(88, 101, 242, .06);
    border-bottom: 1px solid var(--border);
}
.stat__value {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.7) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
    font-size        : 2.1rem;
}

/* ──────────────────────────────────────────
   FEATURE CARDS — glass-morphism hover
────────────────────────────────────────── */
.feature-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
    position     : relative;
}
.feature-card:hover {
    transform    : translateY(-4px);
    box-shadow   : var(--glow-card);
}
.feature-card:nth-child(6n+1):hover { border-color: rgba(88, 101, 242, .4); box-shadow: 0 8px 32px rgba(88, 101, 242, .08); }
.feature-card:nth-child(6n+2):hover { border-color: rgba( 99,102,241,.4); box-shadow: 0 8px 32px rgba(99,102,241,.08); }
.feature-card:nth-child(6n+3):hover { border-color: rgba( 34,197, 94,.4); box-shadow: 0 8px 32px rgba(34,197,94,.08); }
.feature-card:nth-child(6n+4):hover { border-color: rgba(234,179,  8,.4); box-shadow: 0 8px 32px rgba(234,179,8,.08); }
.feature-card:nth-child(6n+5):hover { border-color: rgba( 56,189,248,.4); box-shadow: 0 8px 32px rgba(56,189,248,.08); }
.feature-card:nth-child(6n+6):hover { border-color: rgba(244,114,182,.4); box-shadow: 0 8px 32px rgba(244,114,182,.08); }

.command-tag {
    background   : rgba(255,255,255,.04);
    border-color : rgba(255,255,255,.07);
    transition   : background var(--transition), border-color var(--transition);
}
.command-tag:hover { background: rgba(88, 101, 242, .08); border-color: rgba(88, 101, 242, .15); color: var(--accent); }

/* ──────────────────────────────────────────
   CTA SECTION — mesh gradient bg
────────────────────────────────────────── */
.cta-section {
    position     : relative;
    overflow     : hidden;
    background   : linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
.cta-section::before {
    content      : '';
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    width        : 800px;
    height       : 500px;
    background   : radial-gradient(ellipse, rgba(88, 101, 242, .055) 0%, transparent 65%);
    pointer-events: none;
}
.cta-block { position: relative; z-index: 1; }

.cta-block__title {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.75) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   PAGE HEADER IMPROVEMENTS
────────────────────────────────────────── */
.page-header {
    background : linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    padding    : 60px 0 52px;
}
.page-header__title {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.8) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   FORMS — focus ring + elevated inputs
────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
    background   : rgba(0,0,0,.3);
    border-color : rgba(255,255,255,.07);
    transition   : border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color : rgba(88, 101, 242, .45);
    box-shadow   : 0 0 0 3px rgba(88, 101, 242, .08);
    background   : rgba(0,0,0,.45);
}
.search-input:focus {
    box-shadow   : 0 0 0 3px rgba(88, 101, 242, .08);
}

/* ──────────────────────────────────────────
   TABLES — subtle row shimmer
────────────────────────────────────────── */
.table-wrap {
    border       : 1px solid rgba(255,255,255,.06);
    box-shadow   : 0 4px 24px rgba(0,0,0,.3);
}
.data-table th {
    background   : rgba(0,0,0,.4);
    letter-spacing: .08em;
}
.data-table tr:hover td {
    background   : rgba(255,255,255,.025);
}
.data-table td { border-bottom-color: rgba(255,255,255,.04); }

/* ──────────────────────────────────────────
   STAT CARDS — enhanced glow bars
────────────────────────────────────────── */
.stat-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.stat-card:hover {
    box-shadow   : 0 6px 24px rgba(0,0,0,.4);
    transform    : translateY(-3px);
}
.stat-card__value {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.8) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}
.stat-card__bar { height: 3px; width: 65%; border-radius: 2px; }

/* ──────────────────────────────────────────
   DASHBOARD WELCOME — stronger glow
────────────────────────────────────────── */
.dash-welcome {
    background   : linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 50%, rgba(88, 101, 242, .03) 100%);
    border       : 1px solid rgba(88, 101, 242, .1);
    box-shadow   : 0 4px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(88, 101, 242, .05) inset;
    transition   : border-color var(--transition-slow), box-shadow var(--transition-slow);
}
.dash-welcome:hover {
    border-color : rgba(88, 101, 242, .18);
}
.dash-balance-amount {
    background       : var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   PURCHASE CARDS — row hover glow
────────────────────────────────────────── */
.purchase-card {
    background   : linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.purchase-card:hover {
    border-color : var(--border-strong);
    transform    : translateX(3px);
    box-shadow   : 0 2px 12px rgba(0,0,0,.25);
}

/* ──────────────────────────────────────────
   STORE CARDS — elevated hover
────────────────────────────────────────── */
.store-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.store-card:hover {
    border-color : rgba(88, 101, 242, .28);
    transform    : translateY(-5px);
    box-shadow   : 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(88, 101, 242, .05) inset;
}
.price-free {
    background       : linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}
.price-amount {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.8) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   PRICING CARDS — enhanced
────────────────────────────────────────── */
.pricing-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.pricing-card:hover {
    box-shadow   : 0 12px 40px rgba(0,0,0,.45);
}
.pricing-card--featured {
    background   : linear-gradient(145deg, var(--bg-3) 0%, rgba(88, 101, 242, .04) 100%);
    box-shadow   : 0 0 60px rgba(88, 101, 242, .1), 0 4px 24px rgba(0,0,0,.4);
}
.price__amount {
    background       : var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   ADMIN QUICK LINKS — enhanced
────────────────────────────────────────── */
.admin-ql-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.admin-ql-card:hover {
    border-color : rgba(88, 101, 242, .3);
    transform    : translateY(-3px);
    box-shadow   : 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(88, 101, 242, .08) inset;
    color        : var(--text-0);
}
.admin-ql-card:hover .admin-ql-card__icon {
    background   : rgba(88, 101, 242, .22);
    box-shadow   : 0 0 12px rgba(88, 101, 242, .15);
}

/* ──────────────────────────────────────────
   INSTANCE CARDS — enhanced
────────────────────────────────────────── */
.instance-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-slow);
}
.instance-card:hover {
    box-shadow   : 0 8px 28px rgba(0,0,0,.4);
    transform    : translateY(-2px);
}
.instance-card--running:hover { box-shadow: 0 8px 28px rgba(74,222,128,.08); }
.instance-card--error:hover   { box-shadow: 0 8px 28px rgba(248,113,113,.08); }

/* ──────────────────────────────────────────
   WALLET HERO — pulse icon
────────────────────────────────────────── */
.wallet-hero__amount {
    background       : linear-gradient(135deg, var(--text-0) 0%, rgba(240,240,242,.75) 100%);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}
.wallet-hero__icon {
    animation    : float 3s ease-in-out infinite;
    box-shadow   : 0 0 20px rgba(88, 101, 242, .15);
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}
.deposit-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    box-shadow   : 0 4px 20px rgba(0,0,0,.25);
    transition   : box-shadow var(--transition-slow), border-color var(--transition-slow);
}
.deposit-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.35); border-color: var(--border-strong); }

.crypto-addr-box {
    background   : rgba(0,0,0,.35);
    border       : 1px solid rgba(255,255,255,.07);
    transition   : border-color var(--transition);
}
.crypto-addr-box:hover { border-color: rgba(88, 101, 242, .2); }
.crypto-addr-box__est-val {
    background       : var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────
   COMMANDS PAGE — command card hover
────────────────────────────────────────── */
.command-card {
    background   : linear-gradient(145deg, var(--bg-2) 0%, var(--bg-1) 100%);
    transition   : border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.command-card:hover {
    border-color : rgba(88, 101, 242, .2);
    transform    : translateY(-2px);
    box-shadow   : 0 6px 20px rgba(0,0,0,.35);
}
.command-card__prefix { filter: drop-shadow(0 0 6px rgba(88, 101, 242, .3)); }

/* ──────────────────────────────────────────
   ERROR PAGE — floating 404 number
────────────────────────────────────────── */
.error-code {
    background       : var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip  : text;
    -webkit-text-fill-color: transparent;
    filter           : drop-shadow(0 0 40px rgba(88, 101, 242, .2));
    animation        : float 4s ease-in-out infinite;
}

/* ──────────────────────────────────────────
   FOOTER — improved
────────────────────────────────────────── */
.footer {
    background   : linear-gradient(180deg, var(--bg-0) 0%, rgba(4,4,6,1) 100%);
    border-top   : 1px solid rgba(88, 101, 242, .08);
}
.footer__list a {
    display        : flex;
    align-items    : center;
    gap            : 6px;
    transition     : color var(--transition), transform var(--transition);
}
.footer__list a::before {
    content  : '';
    width    : 4px;
    height   : 4px;
    border-radius: 50%;
    background: var(--text-2);
    flex-shrink: 0;
    transition: background var(--transition);
}
.footer__list a:hover {
    color    : var(--text-0);
    transform: translateX(4px);
}
.footer__list a:hover::before { background: var(--accent); }

.footer__bottom {
    border-top : 1px solid rgba(255,255,255,.04);
}
.footer__bottom p { color: rgba(94,94,106,.7); }

/* ──────────────────────────────────────────
   BADGES — refined
────────────────────────────────────────── */
.badge--green {
    background : rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.2);
    box-shadow : 0 0 8px rgba(34,197,94,.06) inset;
}
.badge--accent {
    background : rgba(88, 101, 242, .1);
    border-color: rgba(88, 101, 242, .2);
}

/* ──────────────────────────────────────────
   ALERTS — glass
────────────────────────────────────────── */
.alert--success { box-shadow: 0 0 16px rgba(34,197,94,.06) inset; }
.alert--error   { box-shadow: 0 0 16px rgba(239,68,68,.06) inset; }

/* ──────────────────────────────────────────
   EMPTY STATE — better look
────────────────────────────────────────── */
.empty-state {
    background   : linear-gradient(135deg, rgba(255,255,255,.015) 0%, transparent 100%);
    border-color : rgba(255,255,255,.06);
}

/* ──────────────────────────────────────────
   DASHBOARD NAV — active state gradient
────────────────────────────────────────── */
.dnav-link {
    border-radius: var(--radius-sm);
    margin       : 0 8px;
    transition   : background var(--transition-slow), color var(--transition);
}
.dnav-link--active {
    background   : linear-gradient(135deg, rgba(88, 101, 242, .1), rgba(88, 101, 242, .04));
    color        : var(--accent);
    border       : 1px solid rgba(88, 101, 242, .15);
}
.dnav-link--active svg { opacity: 1; color: var(--accent); }
.dnav-link--admin.dnav-link--active,
.dnav-link--admin:hover {
    background   : rgba(88, 101, 242, .08);
}

/* ──────────────────────────────────────────
   SMOOTH PAGE-LOAD ANIMATION
────────────────────────────────────────── */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero__inner,
.section-header,
.dash-welcome,
.wallet-hero {
    animation: fade-up 0.55s cubic-bezier(.4,0,.2,1) both;
}
.dash-stats-grid { animation: fade-up 0.65s 0.1s cubic-bezier(.4,0,.2,1) both; }
.features-grid   { animation: fade-up 0.65s 0.15s cubic-bezier(.4,0,.2,1) both; }
.store-grid      { animation: fade-up 0.65s 0.1s cubic-bezier(.4,0,.2,1) both; }


/* Ripple keyframe */
@keyframes ripple-anim {
    to { transform: scale(1); opacity: 0; }
}

/* ════════════════════════════════════════════════════════
   HERO SPLIT — 2 colonnes
════════════════════════════════════════════════════════ */
.hero--split .hero__inner {
    display        : grid;
    grid-template-columns: 1fr 480px;
    gap            : 60px;
    align-items    : center;
    text-align     : left;
    max-width      : 1140px;
}
.hero--split .hero__actions {
    justify-content: flex-start;
}
.hero--split .hero__description {
    margin-left  : 0;
    margin-right : 0;
}
.hero--split .hero__badge {
    display      : inline-flex;
}

/* Trust line */
.hero__trust {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    margin-top   : 28px;
    flex-wrap    : wrap;
}
.hero__trust-label {
    font-size    : .78rem;
    color        : var(--text-2);
    font-weight  : 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.hero__trust-tag {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 4px 10px;
    background   : rgba(255,255,255,.04);
    border       : 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    font-size    : .78rem;
    font-weight  : 600;
    color        : var(--text-2);
}

/* ════════════════════════════════════════════════════════
   HERO MOCKUP — floating card
════════════════════════════════════════════════════════ */
.hero__visual {
    position     : relative;
    padding      : 24px 0;
    animation    : fade-up 0.7s 0.2s cubic-bezier(.4,0,.2,1) both;
}

.hero__mockup {
    background   : rgba(22,22,26,0.95);
    border       : 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-xl);
    overflow     : hidden;
    box-shadow   : 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(16px);
}

.hero__mockup-header {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 12px 16px;
    background   : rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero__mockup-dots    { display: flex; gap: 5px; }
.hero__mockup-dot {
    width          : 10px;
    height         : 10px;
    border-radius  : 50%;
}
.hero__mockup-dot--red    { background: #ff5f57; }
.hero__mockup-dot--yellow { background: #ffbd2e; }
.hero__mockup-dot--green  { background: #28c840; }

.hero__mockup-title {
    font-size    : .75rem;
    color        : var(--text-2);
    font-weight  : 600;
    margin-left  : 8px;
    display      : flex;
    align-items  : center;
    gap          : 5px;
}

.hero__mockup-body { padding: 20px; display: flex; flex-direction: column; gap: 4px; }

.hero__mockup-sep {
    height       : 1px;
    background   : rgba(255,255,255,.05);
    margin       : 8px 0;
}

.hero__mockup-row {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 8px 10px;
    border-radius: var(--radius-md);
    transition   : background var(--transition);
}
.hero__mockup-row:hover { background: rgba(255,255,255,.03); }

.hero__mockup-icon {
    width          : 32px;
    height         : 32px;
    border-radius  : var(--radius-sm);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}
.hero__mockup-icon--green  { background: rgba(34,197,94,.12); color: #4ade80; }
.hero__mockup-icon--blue   { background: rgba(99,102,241,.12); color: #818cf8; }
.hero__mockup-icon--red    { background: rgba(88, 101, 242, .12); color: var(--accent); }

.hero__mockup-text { display: flex; flex-direction: column; gap: 2px; }
.hero__mockup-val {
    font-size    : .9375rem;
    font-weight  : 700;
    color        : var(--text-0);
    letter-spacing: -.01em;
}
.hero__mockup-sub  { font-size: .78rem; color: var(--text-2); }

.hero__mockup-footer {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 10px 16px;
    background     : rgba(0,0,0,.25);
    border-top     : 1px solid rgba(255,255,255,.05);
}
.hero__mockup-status {
    font-size    : .75rem;
    color        : #4ade80;
    font-weight  : 600;
    display      : flex;
    align-items  : center;
}
.hero__mockup-ping {
    font-size    : .75rem;
    color        : var(--text-2);
    font-family  : var(--font-mono);
}

/* Floating badges */
.hero__float-badge {
    position     : absolute;
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    padding      : 7px 14px;
    background   : rgba(22,22,26,.95);
    border       : 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    font-size    : .78rem;
    font-weight  : 700;
    color        : var(--text-0);
    box-shadow   : 0 8px 24px rgba(0,0,0,.4);
    backdrop-filter: blur(8px);
    white-space  : nowrap;
}
.hero__float-badge--1 {
    top           : -10px;
    right         : -20px;
    color         : #4ade80;
    border-color  : rgba(74,222,128,.2);
    background    : rgba(34,197,94,.08);
    animation     : float 3.5s ease-in-out infinite;
}
.hero__float-badge--2 {
    bottom        : -10px;
    left          : -20px;
    color         : #818cf8;
    border-color  : rgba(99,102,241,.2);
    background    : rgba(99,102,241,.08);
    animation     : float 4s 1s ease-in-out infinite;
}

/* Responsive hero split */
@media (max-width: 1024px) {
    .hero--split .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 48px;
    }
    .hero--split .hero__actions,
    .hero--split .hero__trust { justify-content: center; }
    .hero__visual { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .hero__visual { display: none; }
}

/* ════════════════════════════════════════════════════════
   STATS BAR V2 — avec icônes
════════════════════════════════════════════════════════ */
.stat {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 10px 44px;
}
.stat__icon {
    width          : 38px;
    height         : 38px;
    border-radius  : var(--radius-sm);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}
.stat__icon--red    { background: rgba(88, 101, 242, .1); color: var(--accent); }
.stat__icon--blue   { background: rgba(99,102,241,.1); color: #818cf8; }
.stat__icon--green  { background: rgba(34,197,94,.1); color: #4ade80; }
.stat__icon--yellow { background: rgba(234,179,8,.1); color: #facc15; }
.stat__data { display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════════════
   SECTION LABEL + TITLE DECORATION
════════════════════════════════════════════════════════ */
.section-label {
    display          : inline-block;
    font-size        : .72rem;
    font-weight      : 700;
    text-transform   : uppercase;
    letter-spacing   : .1em;
    color            : var(--accent);
    padding          : 4px 12px;
    background       : var(--accent-dim);
    border           : 1px solid var(--accent-border);
    border-radius    : 999px;
    margin-bottom    : 14px;
}
.section-header {
    position         : relative;
}
.section-title::after {
    content          : '';
    display          : block;
    width            : 40px;
    height           : 3px;
    background       : var(--gradient-brand);
    border-radius    : 2px;
    margin           : 12px auto 0;
}
.section-header:has(.section-label) .section-title::after {
    margin-top       : 12px;
}

/* ════════════════════════════════════════════════════════
   STEPS SECTION
════════════════════════════════════════════════════════ */
.steps-section {
    position   : relative;
    background : linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
}
.steps-section::before {
    content    : '';
    position   : absolute;
    top: 50%; left: 50%;
    transform  : translate(-50%, -50%);
    width      : 700px;
    height     : 400px;
    background : radial-gradient(ellipse, rgba(99,102,241,.05) 0%, transparent 70%);
    pointer-events: none;
}
.steps-grid {
    display     : flex;
    align-items : stretch;
    gap         : 0;
    position    : relative;
}

/* Flèche entre cards */
.step-arrow {
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--text-2);
    flex-shrink     : 0;
    padding         : 0 8px;
    margin-top      : -20px;
}

.step-card {
    flex           : 1;
    background     : var(--bg-2);
    border         : 1px solid var(--border);
    border-radius  : var(--radius-xl);
    padding        : 32px 28px 28px;
    position       : relative;
    overflow       : hidden;
    transition     : transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    display        : flex;
    flex-direction : column;
    gap            : 0;
}
.step-card:hover {
    transform    : translateY(-6px);
    box-shadow   : 0 20px 60px rgba(0,0,0,.5);
}

/* Couleurs par step */
.step-card--blue  { border-top: 2px solid #3b82f6; }
.step-card--purple{ border-top: 2px solid #8b5cf6; }
.step-card--red   { border-top: 2px solid var(--accent); }

.step-card--blue:hover   { border-color: rgba(59,130,246,.6); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.08) inset; }
.step-card--purple:hover { border-color: rgba(139,92,246,.6); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.08) inset; }
.step-card--red:hover    { border-color: var(--accent-border); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(88, 101, 242, .06) inset; }

/* Grand numéro fantôme en fond */
.step-card__bg-num {
    position       : absolute;
    bottom         : -12px;
    right          : 12px;
    font-size      : 7rem;
    font-weight    : 900;
    font-family    : var(--font-mono);
    line-height    : 1;
    letter-spacing : -.05em;
    pointer-events : none;
    user-select    : none;
    opacity        : .045;
    color          : var(--text-0);
}

/* Badge "Étape N" */
.step-card__top { margin-bottom: 20px; }
.step-card__badge {
    display          : inline-flex;
    align-items      : center;
    padding          : 3px 10px;
    border-radius    : 999px;
    font-size        : .7rem;
    font-weight      : 700;
    text-transform   : uppercase;
    letter-spacing   : .07em;
}
.step-card--blue   .step-card__badge { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.step-card--purple .step-card__badge { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.step-card--red    .step-card__badge { background: var(--accent-dim);    color: var(--accent); border: 1px solid var(--accent-border); }

/* Icône */
.step-card__icon-wrap {
    width          : 56px;
    height         : 56px;
    border-radius  : var(--radius-lg);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 20px;
    transition     : transform 220ms ease;
}
.step-card:hover .step-card__icon-wrap { transform: scale(1.1); }
.step-card--blue   .step-card__icon-wrap { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.step-card--purple .step-card__icon-wrap { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.2); }
.step-card--red    .step-card__icon-wrap { background: var(--accent-dim);    color: var(--accent); border: 1px solid var(--accent-border); }

.step-card__title {
    font-size      : 1.05rem;
    font-weight    : 700;
    color          : var(--text-0);
    margin-bottom  : 10px;
}

.step-card__desc {
    font-size      : .875rem;
    color          : var(--text-1);
    line-height    : 1.7;
    flex           : 1;
    margin-bottom  : 20px;
}

/* Tag "Gratuit & instantané" etc. */
.step-card__tag {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    font-size    : .75rem;
    font-weight  : 600;
    color        : var(--text-2);
    margin-top   : auto;
}
.step-card--blue   .step-card__tag { color: #60a5fa; }
.step-card--purple .step-card__tag { color: #a78bfa; }
.step-card--red    .step-card__tag { color: var(--accent); }

@media (max-width: 768px) {
    .steps-grid  { flex-direction: column; gap: 12px; }
    .step-arrow  { transform: rotate(90deg); padding: 4px 0; margin-top: 0; }
}

/* ════════════════════════════════════════════════════════
   DASHBOARD WELCOME — tags / status dot
════════════════════════════════════════════════════════ */
.dash-welcome__avatar {
    position     : relative;
    flex-shrink  : 0;
}
.dash-welcome__avatar-status {
    position     : absolute;
    bottom       : 3px;
    right        : 3px;
    width        : 12px;
    height       : 12px;
    background   : #4ade80;
    border-radius: 50%;
    border       : 2px solid var(--bg-2);
    box-shadow   : 0 0 6px rgba(74,222,128,.5);
}
.dash-welcome__tags {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 6px;
    margin-top   : 8px;
}
.dash-welcome__tag {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    padding      : 3px 9px;
    background   : rgba(255,255,255,.04);
    border       : 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    font-size    : .72rem;
    font-weight  : 600;
    color        : var(--text-2);
    font-family  : var(--font-mono);
}
.dash-welcome__tag--green {
    background   : rgba(34,197,94,.08);
    border-color : rgba(34,197,94,.18);
    color        : #4ade80;
    font-family  : var(--font);
}

/* ════════════════════════════════════════════════════════
   COPY BUTTON — wallet
════════════════════════════════════════════════════════ */
.crypto-addr-box__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 4px;
}
.copy-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 4px 10px;
    background   : rgba(255,255,255,.05);
    border       : 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius-sm);
    font-size    : .72rem;
    font-weight  : 600;
    color        : var(--text-1);
    cursor       : pointer;
    transition   : background var(--transition), color var(--transition), border-color var(--transition);
    font-family  : var(--font);
}
.copy-btn:hover {
    background   : rgba(88, 101, 242, .1);
    border-color : rgba(88, 101, 242, .2);
    color        : var(--accent);
}
.copy-btn--copied {
    background   : rgba(34,197,94,.1) !important;
    border-color : rgba(34,197,94,.2) !important;
    color        : #4ade80 !important;
}

/* ════════════════════════════════════════════════════════
   ADMIN PANEL — header amélioré
════════════════════════════════════════════════════════ */
.dashboard-header {
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    gap              : 16px;
    margin-bottom    : 28px;
    padding-bottom   : 24px;
    border-bottom    : 1px solid var(--border);
}
.dashboard-title::after {
    content          : '';
    display          : block;
    width            : 32px;
    height           : 3px;
    background       : var(--gradient-brand);
    border-radius    : 2px;
    margin-top       : 8px;
}

/* ════════════════════════════════════════════════════════
   EMPTY STATE — amélioré avec icône
════════════════════════════════════════════════════════ */
.empty-state {
    padding          : 60px 32px;
}
.empty-state::before {
    content          : '';
    display          : block;
    width            : 48px;
    height           : 48px;
    background       : var(--accent-dim);
    border           : 1px solid var(--accent-border);
    border-radius    : var(--radius-lg);
    margin           : 0 auto 16px;
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF1500' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ════════════════════════════════════════════════════════
   FEATURE CARD — lien en bas
════════════════════════════════════════════════════════ */
.feature-card {
    display          : flex;
    flex-direction   : column;
}
.feature-card__commands {
    margin-top       : auto;
}

/* ════════════════════════════════════════════════════════
   FOOTER — social icons row
════════════════════════════════════════════════════════ */
.footer__bottom {
    display         : flex;
    flex-direction  : column;
    gap             : 0;
}
.footer__bottom-inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 20px 0;
    gap             : 16px;
    flex-wrap       : wrap;
}
.footer__bottom p { text-align: left; }
.footer__social {
    display         : flex;
    gap             : 8px;
    align-items     : center;
}
.footer__social-link {
    width           : 32px;
    height          : 32px;
    border-radius   : var(--radius-sm);
    background      : rgba(255,255,255,.04);
    border          : 1px solid rgba(255,255,255,.07);
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--text-2);
    transition      : background var(--transition), color var(--transition), border-color var(--transition);
}
.footer__social-link:hover {
    background      : var(--accent-dim);
    border-color    : var(--accent-border);
    color           : var(--accent);
}

/* ════════════════════════════════════════════════════════
   FORMS — labels with required indicator
════════════════════════════════════════════════════════ */
.form-label {
    display         : flex;
    align-items     : center;
    gap             : 4px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE mobile stats bar v2
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .stat { padding: 8px 20px; gap: 10px; }
    .stat__icon { width: 30px; height: 30px; }
    .steps-section { padding: 40px 0; }
}
@media (max-width: 480px) {
    .stats-bar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .stat-divider     { display: none; }
    .stat             { padding: 12px 16px; border: 1px solid var(--border); }
    .stat:nth-child(1){ border-radius: var(--radius-md) 0 0 0; }
    .stat:nth-child(3){ border-radius: 0 0 0 var(--radius-md); }
    .stat:nth-child(5){ border-radius: 0 var(--radius-md) 0 0; }
    .stat:nth-child(7){ border-radius: 0 0 var(--radius-md) 0; }
}

/* ============================================================
   NAVBAR — USER PILL + DROPDOWN
   ============================================================ */
.navbar__admin-badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 4px 11px;
    background   : rgba(88, 101, 242, .1);
    border       : 1px solid var(--accent-border);
    border-radius: 999px;
    font-size    : .72rem;
    font-weight  : 700;
    color        : var(--accent);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition   : background var(--transition);
}
.navbar__admin-badge:hover { background: rgba(88, 101, 242, .18); }

.navbar__user {
    position : relative;
}

.navbar__user-pill {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 5px 12px 5px 6px;
    background   : var(--bg-3);
    border       : 1px solid var(--border-strong);
    border-radius: 999px;
    cursor       : pointer;
    transition   : background var(--transition), border-color var(--transition);
    user-select  : none;
}
.navbar__user-pill:hover,
.navbar__user--open .navbar__user-pill {
    background   : var(--bg-4);
    border-color : rgba(255,255,255,.18);
}

.navbar__user-avatar-wrap {
    position     : relative;
    flex-shrink  : 0;
}
.navbar__user-avatar {
    width        : 36px;
    height       : 36px;
    border-radius: 50%;
    object-fit   : cover;
    display      : block;
}
.navbar__user-avatar--placeholder {
    width          : 36px;
    height         : 36px;
    border-radius  : 50%;
    background     : linear-gradient(135deg, #3b82f6, #6366f1);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : .75rem;
    font-weight    : 800;
    color          : #fff;
}
.navbar__user-status {
    position     : absolute;
    bottom       : 1px;
    right        : 1px;
    width        : 10px;
    height       : 10px;
    background   : #4ade80;
    border-radius: 50%;
    border       : 1.5px solid var(--bg-1);
    box-shadow   : 0 0 6px rgba(74,222,128,.6);
}

.navbar__user-info {
    display        : flex;
    flex-direction : column;
    line-height    : 1.2;
}
.navbar__user-name {
    font-size   : .8125rem;
    font-weight : 700;
    color       : var(--text-0);
}
.navbar__user-balance {
    font-size   : .68rem;
    font-weight : 600;
    color       : #4ade80;
}

.navbar__user-chevron {
    color       : var(--text-2);
    transition  : transform 200ms ease;
    flex-shrink : 0;
}
.navbar__user--open .navbar__user-chevron {
    transform : rotate(180deg);
}

/* Dropdown */
.navbar__dropdown {
    position     : absolute;
    top          : calc(100% + 8px);
    right        : 0;
    min-width    : 220px;
    background   : var(--bg-3);
    border       : 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding      : 6px;
    box-shadow   : var(--shadow-lg);
    opacity      : 0;
    visibility   : hidden;
    transform    : translateY(-6px) scale(.98);
    transform-origin: top right;
    transition   : opacity 180ms ease, transform 180ms ease, visibility 180ms;
    z-index      : 200;
}
.navbar__user--open .navbar__dropdown {
    opacity    : 1;
    visibility : visible;
    transform  : translateY(0) scale(1);
}

.navbar__dropdown-header {
    padding    : 10px 12px 8px;
    display    : flex;
    flex-direction: column;
    gap        : 2px;
}
.navbar__dropdown-name {
    font-size  : .9rem;
    font-weight: 700;
    color      : var(--text-0);
}
.navbar__dropdown-tag {
    font-size  : .72rem;
    color      : var(--text-2);
}

.navbar__dropdown-sep {
    height     : 1px;
    background : var(--border);
    margin     : 4px 6px;
}

.navbar__dropdown-item {
    display     : flex;
    align-items : center;
    gap         : 9px;
    width       : 100%;
    padding     : 9px 12px;
    font-size   : .875rem;
    font-weight : 500;
    color       : var(--text-1);
    border-radius: var(--radius-sm);
    transition  : background var(--transition), color var(--transition);
    border      : none;
    background  : none;
    font-family : inherit;
    cursor      : pointer;
    text-align  : left;
    white-space : nowrap;
}
.navbar__dropdown-item:hover {
    background : var(--bg-4);
    color      : var(--text-0);
}
.navbar__dropdown-item svg { flex-shrink: 0; opacity: .65; }
.navbar__dropdown-item:hover svg { opacity: 1; }

.navbar__dropdown-item--danger { color: #f87171; }
.navbar__dropdown-item--danger:hover {
    background : rgba(239,68,68,.1);
    color      : #f87171;
}
.navbar__dropdown-item--danger svg { opacity: 1; }


/* ============================================================
   RED SEMANTIC OVERRIDES — keep intentional red colors
   ============================================================ */
:root {
    --transition-slow : 280ms ease;
    --gradient-brand  : linear-gradient(135deg, #5865F2, #8b5cf6);
    --red             : #ff4d4d;
    --red-dim         : rgba(255, 77, 77, 0.12);
    --red-border      : rgba(255, 77, 77, 0.28);
}

/* Stat card — red variant stays red */
.stat__icon--red        { background: rgba(255,60,0,.1)  !important; color: #ff5555 !important; }
.stat-card__icon--red   { background: rgba(255,60,0,.12) !important; color: #ff5555 !important; }
.stat-card__bar--red    { background: linear-gradient(90deg, #ff5555, transparent) !important; }
.hero__mockup-icon--red { background: rgba(255,60,0,.12) !important; color: #ff5555 !important; }

/* Feature cards — 1st color stays red */
.feature-card:nth-child(6n+1) { border-top: 2px solid rgba(255,60,0,.35) !important; }
.feature-card:nth-child(6n+1) .feature-card__icon { background: rgba(255,60,0,.12) !important; color: #ff5040 !important; }

/* Step card — red step stays red */
.step-card--red { border-top: 2px solid #ff4d4d !important; }
.step-card--red:hover {
    border-color : rgba(255,77,77,.6) !important;
    box-shadow   : 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,77,77,.06) inset !important;
}
.step-card--red .step-card__badge {
    background   : rgba(255,60,0,.1)  !important;
    color        : #ff5555 !important;
    border-color : rgba(255,77,77,.25) !important;
}
.step-card--red .step-card__icon-wrap {
    background   : rgba(255,60,0,.12) !important;
    color        : #ff5555 !important;
    border-color : rgba(255,77,77,.2)  !important;
}
.step-card--red .step-card__tag { color: #ff5555 !important; }

/* ============================================================
   HERO — Discord blue glow instead of red
   ============================================================ */
.hero__glow {
    background : radial-gradient(ellipse at 50% 0%,
                   rgba(88,101,242,.13) 0%,
                   rgba(139,92,246,.06) 40%,
                   transparent 70%) !important;
    width      : 900px !important;
    height     : 600px !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section {
    background : var(--bg-1);
    border-top : 1px solid var(--border);
}

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

.testimonial-card {
    background    : var(--bg-2);
    border        : 1px solid var(--border);
    border-radius : var(--radius-xl);
    padding       : 28px;
    position      : relative;
    overflow      : hidden;
    transition    : border-color 220ms ease, transform 220ms ease;
}
.testimonial-card:hover {
    border-color : var(--border-strong);
    transform    : translateY(-3px);
}
.testimonial-card--featured {
    border-color : var(--accent-border);
    background   : linear-gradient(145deg, var(--bg-3), var(--bg-2));
    box-shadow   : 0 0 40px rgba(88,101,242,.08);
}
.testimonial-card--featured:hover {
    border-color : rgba(88,101,242,.5);
}

.testimonial-card__quote {
    position    : absolute;
    top         : 16px;
    right       : 20px;
    font-size   : 5rem;
    line-height : 1;
    color       : var(--accent-dim);
    font-family : Georgia, serif;
    font-weight : 900;
    user-select : none;
    pointer-events: none;
}

.testimonial-stars {
    color        : #fbbf24;
    font-size    : .9rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.testimonial-text {
    font-size    : .9375rem;
    color        : var(--text-1);
    line-height  : 1.75;
    margin-bottom: 20px;
    font-style   : italic;
    position     : relative;
    z-index      : 1;
}

.testimonial-author {
    display     : flex;
    align-items : center;
    gap         : 12px;
    margin-top  : auto;
}

.testimonial-avatar {
    width          : 40px;
    height         : 40px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : .9rem;
    font-weight    : 800;
    flex-shrink    : 0;
    border         : 2px solid var(--border-strong);
}
.testimonial-card:nth-child(1) .testimonial-avatar { background: linear-gradient(135deg, #5865F2, #8b5cf6); color: #fff; }
.testimonial-card:nth-child(2) .testimonial-avatar { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: #fff; }
.testimonial-card:nth-child(3) .testimonial-avatar { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }

.testimonial-name { font-size: .875rem; font-weight: 700; color: var(--text-0); }
.testimonial-role { font-size: .75rem; color: var(--text-2); margin-top: 2px; }

.testimonial-card--featured .testimonial-name { color: var(--accent); }

/* Social proof row in hero */
.hero__social-proof {
    display     : flex;
    align-items : center;
    gap         : 12px;
    margin-top  : 28px;
    flex-wrap   : wrap;
}
.hero__sp-avatars {
    display  : flex;
    align-items: center;
}
.hero__sp-avatar {
    width        : 28px;
    height       : 28px;
    border-radius: 50%;
    border       : 2px solid var(--bg-1);
    margin-left  : -8px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : .65rem;
    font-weight  : 800;
    color        : #fff;
    flex-shrink  : 0;
}
.hero__sp-avatars .hero__sp-avatar:first-child { margin-left: 0; }
.hero__sp-avatar--1 { background: linear-gradient(135deg, #5865F2, #7c83f5); }
.hero__sp-avatar--2 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.hero__sp-avatar--3 { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.hero__sp-avatar--4 { background: linear-gradient(135deg, #06b6d4, #38bdf8); }
.hero__sp-text {
    font-size  : .825rem;
    color      : var(--text-2);
    line-height: 1.4;
}
.hero__sp-text strong { color: var(--text-0); }

@media (max-width: 768px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
}