/* DonXtraBoost public homepage premium tech redesign
   Scope: deep_blue public theme only. No admin, user dashboard, payment, API, or route logic touched. */
:root {
    --donx-bg: #05071f;
    --donx-bg-2: #0a0630;
    --donx-panel: rgba(11, 16, 48, 0.72);
    --donx-panel-strong: rgba(13, 18, 58, 0.92);
    --donx-border: rgba(151, 178, 255, 0.18);
    --donx-border-hot: rgba(151, 85, 255, 0.34);
    --donx-blue: #26b7ff;
    --donx-blue-2: #1b75ff;
    --donx-purple: #8b3dff;
    --donx-violet: #c844ff;
    --donx-green: #32e6a4;
    --donx-text: #ffffff;
    --donx-muted: #c8d0ee;
    --donx-soft: #8d98c7;
    --donx-shadow: 0 26px 80px rgba(0, 0, 0, 0.46);
    --donx-radius: 22px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(circle at 8% 8%, rgba(38, 183, 255, 0.12), transparent 30%),
        radial-gradient(circle at 90% 6%, rgba(139, 61, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #03051a 0%, #070626 42%, #05071f 100%) !important;
}

/* Header */
.deep-blue-header.donx-public-nav {
    background: transparent !important;
    padding: 18px 0;
    transition: padding .25s ease, background .25s ease, box-shadow .25s ease;
    z-index: 1030;
}

.navbar.active.deep-blue-header.donx-public-nav,
.deep-blue-header.donx-public-nav.active {
    background: rgba(4, 6, 28, 0.74) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    padding: 12px 0;
}

.deep-blue-header .donx-nav-shell {
    min-height: 74px;
    padding: 0 22px;
    border: 1px solid rgba(151, 178, 255, 0.16);
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(11, 15, 50, 0.82), rgba(13, 9, 51, 0.78)),
        radial-gradient(circle at 12% 0%, rgba(38, 183, 255, .18), transparent 28%),
        radial-gradient(circle at 96% 0%, rgba(139, 61, 255, .20), transparent 30%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px);
}

.deep-blue-header .donx-nav-logo img,
.footer-section .navbar-brand img {
    max-height: 48px;
    width: auto;
    filter: drop-shadow(0 0 18px rgba(38, 183, 255, .45));
}

.deep-blue-header .navbar-nav {
    gap: 6px;
}

.deep-blue-header .navbar-nav .nav-item {
    margin: 0 3px;
}

.deep-blue-header .nav-item .nav-link,
.deep-blue-header .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: capitalize !important;
    padding: 10px 14px;
    border-radius: 999px;
    position: relative;
}

.deep-blue-header .nav-item .nav-link.active,
.deep-blue-header .nav-item .nav-link:hover,
.deep-blue-header .navbar-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(139, 61, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(169, 139, 250, .15);
}

.deep-blue-header .nav-item .nav-link.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 3px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--donx-violet), var(--donx-blue));
    box-shadow: 0 0 12px rgba(139, 61, 255, .65);
}

.deep-blue-header .donx-currency-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deep-blue-header .donx-currency-box {
    min-width: 96px;
    height: 42px;
    border: 1px solid rgba(151, 178, 255, .16);
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.deep-blue-header .donx-currency-box i {
    color: var(--donx-blue);
    margin-right: 4px;
}

.deep-blue-header .donx-currency-box .form-select {
    background-color: transparent;
    border: 0;
    color: #fff;
    height: 38px;
    min-width: 64px;
    padding: 0 22px 0 6px;
    font-weight: 700;
    box-shadow: none;
}

.deep-blue-header .donx-currency-box .form-select option {
    background: #09082a;
    color: #fff;
}

.deep-blue-header .navbar-text .btn-smm,
.deep-blue-header .btn-smm {
    height: 46px;
    min-width: 116px;
    width: auto;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
    font-weight: 800;
}

.deep-blue-header .donx-shop-btn {
    background: linear-gradient(135deg, rgba(139, 61, 255, .95), rgba(81, 33, 169, .95));
    color: #fff;
}

.deep-blue-header .donx-login-btn,
.deep-blue-header .donx-order-btn {
    background: linear-gradient(135deg, var(--donx-violet), var(--donx-purple) 45%, var(--donx-blue));
    color: #fff;
    box-shadow: 0 0 28px rgba(91, 112, 255, .46), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.deep-blue-header .btn-smm:hover {
    transform: translateY(-2px);
    color: #fff;
    filter: brightness(1.12);
}

.deep-blue-header .donx-logout-link {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 10px 18px !important;
}

.deep-blue-header .donx-navbar-toggler {
    background: linear-gradient(135deg, var(--donx-purple), var(--donx-blue)) !important;
    box-shadow: 0 0 24px rgba(38, 183, 255, .30);
}

/* Hero */
.home-section.donx-premium-home {
    min-height: 100vh;
    height: auto;
    padding: 145px 0 84px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 83% 31%, rgba(38, 183, 255, .20), transparent 24%),
        radial-gradient(circle at 72% 72%, rgba(139, 61, 255, .28), transparent 28%),
        radial-gradient(circle at 5% 28%, rgba(124, 58, 237, .18), transparent 30%),
        linear-gradient(130deg, #04061d 0%, #08062a 46%, #030415 100%) !important;
}

.donx-premium-home::before,
.donx-premium-home::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.donx-premium-home::before {
    width: 620px;
    height: 620px;
    left: -330px;
    top: 130px;
    border: 1px solid rgba(38, 183, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 110px rgba(38, 183, 255, .16);
}

.donx-premium-home::after {
    width: 760px;
    height: 760px;
    right: -390px;
    top: 60px;
    border: 1px solid rgba(139, 61, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 120px rgba(139, 61, 255, .22);
}

.donx-hero-bg,
.donx-hero-bg span {
    position: absolute;
    pointer-events: none;
}

.donx-orb {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .48;
}

.donx-orb-one {
    background: #1ab7ff;
    left: 4%;
    top: 12%;
}

.donx-orb-two {
    background: #8b3dff;
    right: 10%;
    bottom: 6%;
}

.donx-grid-glow {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at 76% 48%, black, transparent 63%);
    opacity: .28;
}

.donx-premium-home .overlay {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

.donx-hero-copy {
    max-width: 670px;
}

.donx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 22px;
    border: 1px solid rgba(38, 183, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: var(--donx-blue);
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 28px rgba(38, 183, 255, .11);
}

.donx-hero-badge i {
    color: var(--donx-blue);
}

.home-section.donx-premium-home .text-box h1 {
    max-width: 690px;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(42px, 5.2vw, 76px);
    line-height: 1.03;
    letter-spacing: -0.045em;
    text-transform: none;
    text-shadow: 0 18px 60px rgba(0, 0, 0, .42);
}

.donx-gradient-word {
    display: inline-block;
    background: linear-gradient(100deg, #34c9ff 0%, #1d7dff 35%, #8a4bff 68%, #d846ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(81, 121, 255, .34));
}

.home-section.donx-premium-home .text-box p {
    max-width: 610px;
    margin-bottom: 0;
    color: var(--donx-muted);
    font-size: 18px;
    line-height: 1.68;
}

.donx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0 30px;
}

.home-section.donx-premium-home .btn-smm {
    margin: 0;
    height: 58px;
    width: auto;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 26px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    font-weight: 900;
    text-transform: capitalize;
}

.donx-primary-cta {
    background: linear-gradient(135deg, #9b35ff 0%, #5a49ff 48%, #18bdff 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(71, 91, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.donx-secondary-cta {
    background: rgba(255, 255, 255, .055) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.donx-primary-cta:hover,
.donx-secondary-cta:hover {
    transform: translateY(-3px);
    color: #fff !important;
    filter: brightness(1.10);
}

.donx-trust-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 690px;
}

.donx-stat-item {
    min-height: 86px;
    padding: 15px 12px;
    border: 1px solid rgba(151, 178, 255, .14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.donx-stat-item i {
    display: block;
    color: var(--donx-blue);
    font-size: 22px;
    margin-bottom: 8px;
}

.donx-stat-item strong {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 5px;
}

.donx-stat-item span {
    display: block;
    color: var(--donx-soft);
    font-size: 12px;
    line-height: 1.2;
}

/* Hero visual */
.donx-hero-visual {
    position: relative;
    min-height: 640px;
    max-width: 710px;
    margin-left: auto;
    perspective: 1200px;
}

.donx-energy-ring {
    position: absolute;
    left: 50%;
    bottom: 54px;
    width: 480px;
    height: 140px;
    transform: translateX(-50%);
    border: 2px solid rgba(38, 183, 255, .34);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(38, 183, 255, .22), rgba(139, 61, 255, .12) 34%, transparent 70%);
    box-shadow: 0 0 42px rgba(38, 183, 255, .34), inset 0 0 34px rgba(139, 61, 255, .22);
}

.donx-energy-ring::before,
.donx-energy-ring::after {
    content: "";
    position: absolute;
    inset: 18px 34px;
    border: 1px solid rgba(139, 61, 255, .28);
    border-radius: 50%;
}

.donx-energy-ring::after {
    inset: 36px 76px;
    border-color: rgba(38, 183, 255, .25);
}

.donx-laptop-wrap {
    position: absolute;
    left: 50%;
    bottom: 84px;
    width: min(520px, 78vw);
    transform: translateX(-50%) rotateX(3deg) rotateY(-7deg);
    transform-style: preserve-3d;
    z-index: 4;
}

.donx-laptop-screen {
    position: relative;
    height: 330px;
    border: 2px solid rgba(117, 146, 255, .38);
    border-radius: 24px 24px 12px 12px;
    padding: 14px;
    background: linear-gradient(145deg, rgba(15, 23, 65, .98), rgba(5, 8, 30, .98));
    box-shadow: 0 40px 90px rgba(0, 0, 0, .50), 0 0 48px rgba(38, 183, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: hidden;
}

.donx-laptop-screen::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(139, 61, 255, .34), transparent 63%);
    filter: blur(12px);
}

.donx-dashboard-topbar {
    position: relative;
    z-index: 2;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
}

.donx-dashboard-topbar .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

.donx-dashboard-topbar img {
    max-height: 34px;
    margin-left: auto;
    filter: drop-shadow(0 0 14px rgba(38, 183, 255, .45));
}

.donx-dashboard-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding-top: 14px;
}

.donx-dashboard-body aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px;
    min-height: 240px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .07);
}

.donx-dashboard-body aside span {
    display: block;
    height: 12px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(38, 183, 255, .72), rgba(139, 61, 255, .35));
    opacity: .72;
}

.donx-dashboard-body aside span:nth-child(even) {
    width: 70%;
    opacity: .38;
}

.donx-dashboard-body main {
    min-width: 0;
}

.donx-dashboard-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.donx-dashboard-heading span,
.dash-card span {
    display: block;
    color: #98a6dd;
    font-size: 11px;
    line-height: 1.2;
}

.donx-dashboard-heading strong,
.dash-card strong {
    display: block;
    color: #fff;
    font-size: 20px;
    line-height: 1.1;
}

.donx-dashboard-heading i {
    color: var(--donx-blue);
    padding: 10px;
    border-radius: 14px;
    background: rgba(38, 183, 255, .10);
}

.donx-dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 12px;
}

.dash-card {
    min-height: 80px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dash-card.wide {
    min-height: 95px;
}

.dash-card.positive strong {
    color: var(--donx-green);
}

.mini-chart,
.bar-chart {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 28px;
    margin-top: 10px;
}

.mini-chart i {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--donx-blue), var(--donx-purple));
    transform: translateY(calc(var(--i, 1) * -1px));
}

.mini-chart i:nth-child(1) { height: 6px; }
.mini-chart i:nth-child(2) { height: 13px; }
.mini-chart i:nth-child(3) { height: 10px; }
.mini-chart i:nth-child(4) { height: 22px; }
.mini-chart i:nth-child(5) { height: 18px; }

.bar-chart i {
    width: 12px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--donx-blue), var(--donx-purple));
}

.bar-chart i:nth-child(1) { height: 10px; }
.bar-chart i:nth-child(2) { height: 16px; }
.bar-chart i:nth-child(3) { height: 20px; }
.bar-chart i:nth-child(4) { height: 26px; }
.bar-chart i:nth-child(5) { height: 32px; }
.bar-chart i:nth-child(6) { height: 38px; }

.donx-laptop-base {
    height: 34px;
    width: 112%;
    margin-left: -6%;
    border-radius: 0 0 48px 48px;
    background: linear-gradient(180deg, #4f5ea2, #171936 65%, #0a0d24);
    box-shadow: 0 26px 56px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.donx-laptop-base::after {
    content: "";
    display: block;
    width: 120px;
    height: 8px;
    margin: 0 auto;
    border-radius: 0 0 12px 12px;
    background: rgba(255, 255, 255, .18);
}

.donx-laptop-shadow {
    width: 84%;
    height: 44px;
    margin: -6px auto 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    filter: blur(16px);
}

.donx-floating-card {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 214px;
    min-height: 82px;
    padding: 14px 15px;
    border: 1px solid rgba(151, 178, 255, .24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15, 22, 61, .82), rgba(13, 7, 48, .72));
    box-shadow: 0 18px 54px rgba(0, 0, 0, .32), 0 0 24px rgba(139, 61, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .10);
    backdrop-filter: blur(18px);
    animation: donxFloat 5.5s ease-in-out infinite;
}

.donx-floating-card i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 61, 255, .95), rgba(38, 183, 255, .82));
    box-shadow: 0 0 22px rgba(38, 183, 255, .22);
}

.donx-floating-card strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.donx-floating-card span {
    display: block;
    color: #aab4e1;
    font-size: 10.5px;
    line-height: 1.35;
}

.card-youtube { left: 0; top: 32px; }
.card-tiktok { left: -36px; top: 178px; animation-delay: .6s; }
.card-web { left: 2px; bottom: 134px; animation-delay: 1.1s; }
.card-instagram { right: -10px; top: 56px; animation-delay: 1.4s; }
.card-music { right: -36px; top: 224px; animation-delay: .9s; }
.card-order { right: 14px; bottom: 108px; animation-delay: 1.8s; }

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

/* Feature, service and payment cards */
.feature-section,
.service-section,
.payment-gateway {
    position: relative;
    background: transparent !important;
}

.feature-section {
    padding: 56px 0 100px;
}

.feature-section .feature-box,
.service-section .service-box {
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: left;
    border-radius: var(--donx-radius);
    border: 1px solid rgba(151, 178, 255, .15);
    background:
        radial-gradient(circle at 15% 0%, rgba(38, 183, 255, .12), transparent 34%),
        linear-gradient(145deg, rgba(19, 24, 66, .72), rgba(9, 10, 38, .76));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(14px);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.feature-section .feature-box::before,
.service-section .service-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(38, 183, 255, .22), transparent 34%, rgba(139, 61, 255, .22));
    opacity: 0;
    transition: opacity .26s ease;
    pointer-events: none;
}

.feature-section .feature-box:hover,
.service-section .service-box:hover {
    transform: translateY(-8px);
    border-color: rgba(70, 186, 255, .30);
    box-shadow: 0 28px 78px rgba(0, 0, 0, .38), 0 0 36px rgba(38, 183, 255, .12);
}

.feature-section .feature-box:hover::before,
.service-section .service-box:hover::before {
    opacity: 1;
}

.feature-section .feature-box {
    padding: 34px 30px;
}

.feature-section .feature-box .icon-box,
.service-section .service-box .icon-box {
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(139, 61, 255, .96), rgba(38, 183, 255, .78)) !important;
    box-shadow: 0 0 32px rgba(38, 183, 255, .22);
}

.feature-section .feature-box .icon-box img,
.service-section .service-box .icon-box img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.feature-section .feature-box h4,
.service-section .service-box h4 {
    position: relative;
    color: #fff;
    font-size: 21px;
    margin-bottom: 12px;
}

.feature-section .feature-box p,
.service-section .service-box p,
.service-section .header-text p {
    position: relative;
    color: var(--donx-muted);
    line-height: 1.65;
}

.service-section {
    padding: 100px 0;
}

.service-section::before,
.payment-gateway::before,
.footer-section::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: min(1120px, calc(100% - 30px));
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(151, 178, 255, .20), transparent);
}

.service-section .header-text h5,
.payment-gateway .header-text h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--donx-blue) !important;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(38, 183, 255, .08);
    border: 1px solid rgba(38, 183, 255, .16);
}

.service-section .header-text h3 {
    max-width: 760px;
    margin: 14px auto 0;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.service-section .service-box {
    padding: 34px 30px;
}

.service-section .service-box .read-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #79d8ff;
    font-weight: 800;
    transition: color .2s ease, gap .2s ease;
}

.service-section .service-box .read-more:hover {
    color: #fff;
    gap: 12px;
}

.payment-gateway {
    padding: 82px 0 100px;
}

.payment-gateway .gateways {
    margin-top: 26px;
    padding: 24px;
    border-radius: var(--donx-radius);
    border: 1px solid rgba(151, 178, 255, .14);
    background: linear-gradient(145deg, rgba(19, 24, 66, .54), rgba(9, 10, 38, .66));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 60px rgba(0,0,0,.24);
}

.payment-gateway img {
    max-height: 54px;
    object-fit: contain;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

/* Footer */
.footer-section.donx-premium-footer {
    position: relative;
    overflow: hidden;
    padding-top: 106px;
    background:
        radial-gradient(circle at 86% 12%, rgba(139, 61, 255, .22), transparent 32%),
        radial-gradient(circle at 7% 0%, rgba(38, 183, 255, .13), transparent 28%),
        linear-gradient(180deg, rgba(4, 5, 22, .82), #030414 100%) !important;
}

.footer-section.donx-premium-footer .overlay {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

.donx-footer-glow {
    position: absolute;
    right: -120px;
    top: 28px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(139, 61, 255, .20);
    filter: blur(54px);
    pointer-events: none;
}

.footer-section .box .navbar-brand {
    margin-bottom: 22px;
}

.footer-section .box p {
    color: var(--donx-muted);
    line-height: 1.65;
}

.footer-section.donx-premium-footer .box h5 {
    color: #fff;
    margin-bottom: 22px;
    font-size: 18px;
}

.footer-section.donx-premium-footer .box h5::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--donx-blue), var(--donx-purple));
}

.footer-section.donx-premium-footer .box .links li {
    margin-bottom: 11px;
}

.footer-section.donx-premium-footer .box .links li a,
.footer-section.donx-premium-footer .box .links li .widget-link {
    color: #b7c0e8;
}

.footer-section.donx-premium-footer .box .links li a:hover,
.footer-section.donx-premium-footer .box .links li .widget-link:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-section.donx-premium-footer .box .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-section.donx-premium-footer .box .social-links a {
    margin-right: 0;
    color: #fff;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(151, 178, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.footer-section.donx-premium-footer .box .social-links a:hover {
    background: linear-gradient(135deg, var(--donx-purple), var(--donx-blue));
    transform: translateY(-3px);
}

.footer-section.donx-premium-footer .box .input-group {
    height: 54px;
    padding: 6px;
    border: 1px solid rgba(151, 178, 255, .15);
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
}

.footer-section.donx-premium-footer .box .input-group .form-control {
    height: 40px;
    margin-right: 8px;
    padding-left: 14px;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
}

.footer-section.donx-premium-footer .box .input-group button {
    width: 44px;
    height: 40px;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--donx-purple), var(--donx-blue));
    box-shadow: 0 0 24px rgba(38, 183, 255, .20);
}

.donx-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.donx-trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #d9e2ff;
    font-size: 11px;
    line-height: 1;
    border: 1px solid rgba(151, 178, 255, .14);
    background: rgba(255, 255, 255, .055);
}

.donx-trust-badges i {
    color: var(--donx-blue);
}

.footer-section.donx-premium-footer .copyright {
    margin-top: 58px;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(151, 178, 255, .12);
}

.footer-section.donx-premium-footer .copyright span,
.footer-section.donx-premium-footer .copyright a {
    color: #aeb8e4;
}

.footer-section.donx-premium-footer .copyright a:hover {
    color: #fff;
}

.donx-footer-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.donx-footer-languages .language {
    margin: 0 !important;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(151, 178, 255, .12);
    background: rgba(255, 255, 255, .04);
}

.scroll-up {
    background: linear-gradient(135deg, var(--donx-purple), var(--donx-blue)) !important;
    box-shadow: 0 0 30px rgba(38, 183, 255, .28);
}

@media (max-width: 1199px) {
    .donx-hero-visual {
        min-height: 560px;
    }

    .donx-floating-card {
        width: 194px;
    }

    .card-tiktok,
    .card-music {
        display: none;
    }

    .donx-trust-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .deep-blue-header.donx-public-nav {
        padding: 12px 0;
    }

    .deep-blue-header .donx-nav-shell {
        border-radius: 18px;
        padding: 10px 14px;
    }

    .deep-blue-header .navbar-collapse {
        margin-top: 14px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(151, 178, 255, .16);
        background: rgba(6, 8, 32, .96);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    }

    .deep-blue-header .navbar-nav {
        align-items: stretch;
    }

    .deep-blue-header .nav-item .nav-link,
    .deep-blue-header .navbar-nav .nav-link {
        text-align: left;
    }

    .deep-blue-header .donx-currency-box {
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }

    .home-section.donx-premium-home {
        padding: 128px 0 64px;
    }

    .donx-hero-copy {
        text-align: center;
        margin: 0 auto;
    }

    .donx-hero-copy p,
    .donx-hero-actions,
    .donx-trust-stats {
        margin-left: auto;
        margin-right: auto;
    }

    .donx-hero-actions {
        justify-content: center;
    }

    .donx-hero-visual {
        min-height: 520px;
        margin: 10px auto 0;
    }

    .card-youtube { left: 2%; top: 30px; }
    .card-instagram { right: 2%; top: 46px; }
    .card-web { left: 3%; bottom: 106px; }
    .card-order { right: 3%; bottom: 92px; }

    .footer-section.donx-premium-footer {
        padding-top: 80px;
    }
}

@media (max-width: 767px) {
    .deep-blue-header .donx-nav-logo img,
    .footer-section .navbar-brand img {
        max-height: 42px;
    }

    .home-section.donx-premium-home {
        padding-top: 116px;
    }

    .home-section.donx-premium-home .text-box h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .home-section.donx-premium-home .text-box p {
        font-size: 16px;
    }

    .donx-hero-actions {
        gap: 12px;
    }

    .home-section.donx-premium-home .btn-smm {
        width: 100%;
        min-width: 0;
    }

    .donx-trust-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .donx-stat-item {
        min-height: 78px;
        padding: 12px 10px;
    }

    .donx-hero-visual {
        min-height: 450px;
    }

    .donx-laptop-wrap {
        width: min(420px, 92vw);
        bottom: 82px;
        transform: translateX(-50%) rotateX(0) rotateY(0);
    }

    .donx-laptop-screen {
        height: 286px;
        padding: 10px;
    }

    .donx-dashboard-body {
        grid-template-columns: 52px 1fr;
        gap: 10px;
    }

    .donx-dashboard-body aside {
        min-height: 204px;
        padding: 12px 9px;
    }

    .donx-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .dash-card {
        min-height: 60px;
        padding: 10px;
    }

    .dash-card.wide:nth-of-type(3),
    .card-web,
    .card-order {
        display: none;
    }

    .donx-dashboard-heading strong,
    .dash-card strong {
        font-size: 16px;
    }

    .donx-energy-ring {
        width: 350px;
        height: 112px;
        bottom: 48px;
    }

    .donx-floating-card {
        width: 168px;
        min-height: 70px;
        padding: 11px;
        gap: 9px;
    }

    .donx-floating-card i {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .donx-floating-card strong {
        font-size: 11.5px;
    }

    .donx-floating-card span {
        font-size: 9.5px;
    }

    .card-youtube { left: 0; top: 16px; }
    .card-instagram { right: 0; top: 60px; }

    .feature-section,
    .service-section,
    .payment-gateway {
        padding: 66px 0;
    }

    .feature-section .feature-box,
    .service-section .service-box {
        padding: 28px 24px;
    }

    .footer-section.donx-premium-footer .copyright {
        text-align: center;
        justify-content: center !important;
    }

    .donx-footer-languages {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 430px) {
    .deep-blue-header .donx-nav-shell {
        padding: 9px 10px;
    }

    .deep-blue-header .navbar-text.ps-2,
    .deep-blue-header .navbar-text.ps-4 {
        padding-left: .35rem !important;
    }

    .deep-blue-header .navbar-text .btn-smm.icon-width {
        min-width: 42px;
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .donx-trust-stats {
        grid-template-columns: 1fr;
    }

    .donx-hero-visual {
        min-height: 420px;
    }

    .donx-floating-card {
        display: none;
    }
}

/* =========================================================
   DonXtraBoost Homepage Upgrade Wave 2
   Improves hero hover states + about + how it works + counter + testimonial
   ========================================================= */

/* Shared premium motion */
.donx-floating-card,
.donx-about-card,
.donx-work-card,
.donx-counter-card,
.donx-review-box {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
    will-change: transform;
}

.donx-floating-card:hover,
.donx-about-card:hover,
.donx-work-card:hover,
.donx-counter-card:hover,
.donx-review-box:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(90, 170, 255, .42);
    box-shadow: 0 22px 65px rgba(0, 0, 0, .38), 0 0 36px rgba(109, 105, 255, .18);
}

/* Hero visual enhancement */
.donx-hero-visual:hover .donx-laptop-wrap {
    transform: translateX(-50%) translateY(-8px) rotateX(4deg) rotateY(-8deg);
    transition: transform .45s ease;
}

.donx-energy-ring {
    border-color: rgba(58, 208, 255, .45);
    background: radial-gradient(ellipse at center, rgba(38, 183, 255, .34), rgba(139, 61, 255, .20) 38%, transparent 73%);
    box-shadow: 0 0 55px rgba(38, 183, 255, .42), inset 0 0 38px rgba(139, 61, 255, .26);
}

.donx-energy-ring::before {
    box-shadow: 0 0 24px rgba(139, 61, 255, .14);
}

.donx-laptop-wrap {
    transition: transform .45s ease;
}

.donx-laptop-screen {
    box-shadow: 0 28px 60px rgba(0, 0, 0, .38), 0 0 38px rgba(38, 183, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.donx-laptop-base {
    position: relative;
    overflow: hidden;
    height: 36px;
    background: linear-gradient(180deg, #6d7de0 0%, #394784 24%, #171936 68%, #080b1b 100%);
    box-shadow: 0 26px 56px rgba(0, 0, 0, .50), 0 0 36px rgba(58, 208, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.donx-laptop-base::before {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: 4px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(38, 183, 255, .08), rgba(255, 255, 255, .50), rgba(139, 61, 255, .18));
    filter: blur(1px);
}

.donx-laptop-base::after {
    width: 135px;
    height: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .35), rgba(255, 255, 255, .14));
    box-shadow: 0 0 22px rgba(38, 183, 255, .15);
}

.donx-laptop-shadow {
    width: 88%;
    height: 52px;
    background: radial-gradient(ellipse at center, rgba(58, 208, 255, .16), rgba(139, 61, 255, .16) 38%, rgba(0, 0, 0, .36) 70%);
    filter: blur(20px);
}

.donx-floating-card:hover {
    animation-play-state: paused;
}

.donx-floating-card:hover i {
    transform: scale(1.08);
    box-shadow: 0 0 28px rgba(38, 183, 255, .28);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* General section heading tone */
.donx-section-heading h5 {
    color: #ad59ff;
    text-transform: none;
    letter-spacing: .02em;
    margin-bottom: 14px;
}

.donx-section-heading h3 {
    margin-bottom: 14px;
}

/* About section upgrade */
.about-section.donx-about-upgrade {
    padding: 112px 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(43, 116, 255, .10), transparent 26%),
        radial-gradient(circle at 82% 72%, rgba(139, 61, 255, .12), transparent 24%),
        linear-gradient(180deg, rgba(5, 7, 24, .96), rgba(9, 7, 33, .98));
}

.about-section.donx-about-upgrade::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, .9) 36%, transparent 90%);
    opacity: .18;
}

.donx-about-media {
    position: relative;
}

.donx-about-frame {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(118, 147, 255, .18);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(16, 20, 58, .86), rgba(7, 9, 31, .84));
    box-shadow: 0 26px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}

.donx-about-image-shell {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at center, rgba(38, 183, 255, .12), transparent 32%),
        radial-gradient(circle at 70% 35%, rgba(139, 61, 255, .16), transparent 24%),
        linear-gradient(160deg, rgba(17, 25, 70, .95), rgba(6, 9, 31, .96));
    border: 1px solid rgba(255, 255, 255, .06);
}

.donx-about-image-shell::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 22px;
    border: 1px solid rgba(103, 132, 255, .12);
}

.donx-about-image-shell img {
    position: relative;
    z-index: 1;
    max-width: min(100%, 430px);
    max-height: 320px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(38, 183, 255, .28)) drop-shadow(0 0 34px rgba(139, 61, 255, .12));
}

.donx-about-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(109, 105, 255, .18);
    pointer-events: none;
}

.donx-about-orbit-one {
    width: 460px;
    height: 460px;
    left: -110px;
    bottom: -140px;
    box-shadow: 0 0 60px rgba(38, 183, 255, .10);
}

.donx-about-orbit-two {
    width: 320px;
    height: 320px;
    right: -95px;
    top: -90px;
    border-color: rgba(139, 61, 255, .18);
}

.donx-about-copy {
    position: relative;
    z-index: 1;
}

.donx-about-list {
    display: grid;
    gap: 18px;
}

.donx-about-card {
    margin-top: 0 !important;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(115, 144, 255, .14);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(18, 23, 67, .82), rgba(9, 11, 34, .82));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.donx-about-card .icon-box {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(105, 46, 244, .30), rgba(38, 183, 255, .18));
    border: 1px solid rgba(143, 168, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.donx-about-card .icon-box img {
    width: 26px;
}

.donx-about-card .text {
    width: calc(100% - 80px);
}

.donx-about-card h5 {
    margin-bottom: 8px;
}

.donx-about-card p {
    margin-bottom: 0;
    color: #b6c0e6;
}

/* How it works upgrade */
.how-it-works.donx-how-upgrade {
    padding: 112px 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(38, 183, 255, .10), transparent 20%),
        radial-gradient(circle at 16% 75%, rgba(139, 61, 255, .10), transparent 28%),
        linear-gradient(180deg, rgba(7, 8, 29, .98), rgba(5, 7, 24, .98));
}

.donx-how-copy {
    padding-right: 12px;
}

.donx-how-steps {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.donx-step-line {
    position: relative;
    padding-left: 28px;
}

.rtl .donx-step-line {
    padding-left: 0;
    padding-right: 28px;
}

.donx-step-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: -22px;
    width: 2px;
    background: linear-gradient(180deg, rgba(38, 183, 255, .9), rgba(139, 61, 255, .0));
}

.rtl .donx-step-line::before {
    left: auto;
    right: 0;
}

.donx-step-line::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--donx-blue), var(--donx-purple));
    box-shadow: 0 0 20px rgba(38, 183, 255, .38);
}

.rtl .donx-step-line::after {
    left: auto;
    right: -5px;
}

.donx-step-line:last-child::before {
    display: none;
}

.donx-step-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 61, 255, .24), rgba(38, 183, 255, .18));
    border: 1px solid rgba(136, 161, 255, .14);
}

.donx-step-line h5 {
    margin-bottom: 8px;
}

.donx-step-line p {
    margin-bottom: 0;
    color: #b6c0e6;
}

.donx-work-grid-wrap {
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(16, 20, 58, .88), rgba(7, 9, 31, .84));
    border: 1px solid rgba(117, 146, 255, .15);
    box-shadow: 0 26px 76px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.donx-work-grid-wrap .shape {
    position: absolute;
    inset: 14% 14%;
    border: 1px dashed rgba(120, 147, 255, .12);
    border-radius: 26px;
    opacity: .65;
    pointer-events: none;
}

.donx-work-card {
    position: relative;
    min-height: 220px;
    height: 100%;
    padding: 30px 24px 24px;
    border-radius: 22px;
    border: 1px solid rgba(122, 151, 255, .14);
    background: linear-gradient(145deg, rgba(22, 19, 72, .88), rgba(12, 12, 41, .86));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.donx-work-card .icon-box {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(139, 61, 255, .32), rgba(38, 183, 255, .18));
    border: 1px solid rgba(122, 151, 255, .16);
}

.donx-work-card .icon-box i {
    font-size: 28px;
    color: #b029ff;
}

.donx-card-step {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .42);
}

.rtl .donx-card-step {
    right: auto;
    left: 18px;
}

.donx-work-card h5 {
    margin-bottom: 10px;
}

.donx-work-card p {
    margin-bottom: 0;
    color: #b6c0e6;
}

/* Counter upgrade */
.achievement-section.donx-counter-upgrade {
    padding: 112px 0;
    position: relative;
    background: none !important;
}

.achievement-section.donx-counter-upgrade::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 22%, rgba(38, 183, 255, .08), transparent 24%),
        radial-gradient(circle at 82% 68%, rgba(139, 61, 255, .10), transparent 24%),
        linear-gradient(180deg, rgba(5, 7, 24, .99), rgba(7, 7, 29, .99));
}

.achievement-section.donx-counter-upgrade .container {
    position: relative;
    z-index: 1;
}

.donx-counter-shell {
    position: relative;
    padding: 42px 28px;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(13, 18, 52, .88), rgba(7, 9, 30, .90));
    border: 1px solid rgba(122, 151, 255, .14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}

.donx-counter-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .16;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, .75) 26%, transparent 84%);
    pointer-events: none;
}

.donx-counter-card {
    position: relative;
    height: 100%;
    text-align: center;
    padding: 30px 22px 24px;
    border-radius: 24px;
    border: 1px solid rgba(122, 151, 255, .12);
    background: linear-gradient(145deg, rgba(20, 19, 70, .82), rgba(9, 10, 35, .84));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.donx-counter-index {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .38);
}

.rtl .donx-counter-index {
    right: auto;
    left: 18px;
}

.donx-counter-card .icon-box {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(139, 61, 255, .28), rgba(38, 183, 255, .16));
    border: 1px solid rgba(122, 151, 255, .16);
}

.donx-counter-card .icon-box img {
    width: 34px;
    filter: drop-shadow(0 0 16px rgba(38, 183, 255, .20));
}

.donx-counter-card h4 {
    margin-bottom: 12px;
}

.donx-counter-card p {
    margin-bottom: 0;
    color: #b6c0e6;
}

/* Testimonial upgrade */
.testimonial-section.donx-testimonial-upgrade {
    padding: 112px 0;
    position: relative;
    background:
        radial-gradient(circle at 18% 28%, rgba(38, 183, 255, .08), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(139, 61, 255, .10), transparent 24%),
        linear-gradient(180deg, rgba(7, 7, 29, .99), rgba(4, 6, 20, .99));
}

.donx-review-box {
    position: relative;
    min-height: 275px;
    padding: 30px 28px;
    border-radius: 24px;
    border: 1px solid rgba(122, 151, 255, .14);
    background: linear-gradient(145deg, rgba(20, 19, 70, .86), rgba(10, 10, 35, .86));
    box-shadow: 0 22px 54px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.donx-quote-mark {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 61, 255, .28), rgba(38, 183, 255, .20));
    border: 1px solid rgba(122, 151, 255, .14);
}

.rtl .donx-quote-mark {
    right: auto;
    left: 22px;
}

.donx-review-box p {
    min-height: 110px;
    padding-right: 46px;
    margin-bottom: 28px;
    color: #c0c8ec;
}

.rtl .donx-review-box p {
    padding-right: 0;
    padding-left: 46px;
}

.donx-review-box h5 {
    margin-bottom: 8px;
}

.donx-review-box .title {
    color: #b029ff;
}

.donx-review-avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--donx-purple), var(--donx-blue));
    box-shadow: 0 0 24px rgba(38, 183, 255, .16);
}

.donx-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-section .testimonials .owl-stage-outer {
    padding: 6px 0 16px;
}

.testimonial-section .owl-dots .owl-dot span {
    width: 14px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
}

.testimonial-section .owl-dots .owl-dot.active span {
    width: 24px;
    background: linear-gradient(90deg, var(--donx-purple), var(--donx-blue));
}

/* Responsive */
@media (max-width: 1199px) {
    .donx-about-image-shell {
        min-height: 360px;
    }

    .donx-how-copy {
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    .about-section.donx-about-upgrade,
    .how-it-works.donx-how-upgrade,
    .achievement-section.donx-counter-upgrade,
    .testimonial-section.donx-testimonial-upgrade {
        padding: 84px 0;
    }

    .donx-about-frame,
    .donx-work-grid-wrap,
    .donx-counter-shell {
        padding: 20px;
    }

    .donx-about-image-shell {
        min-height: 320px;
    }

    .donx-review-box p {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .donx-about-card,
    .donx-work-card,
    .donx-counter-card,
    .donx-review-box {
        transform: none !important;
    }

    .donx-about-image-shell {
        min-height: 260px;
        padding: 24px;
    }

    .donx-about-image-shell img {
        max-height: 220px;
    }

    .donx-step-line {
        padding-left: 22px;
    }

    .rtl .donx-step-line {
        padding-right: 22px;
    }

    .donx-review-box {
        padding: 24px 20px;
    }

    .donx-review-box p {
        padding-right: 0;
        padding-left: 0;
        margin-top: 40px;
    }

    .donx-quote-mark,
    .rtl .donx-quote-mark {
        left: 20px;
        right: auto;
    }
}



/* =========================================================
   DonXtraBoost Homepage Upgrade Wave 3
   Fixes duplicate How It Works content, adds selective 3D pointer effects,
   stronger separators, and more premium dynamic service/feature cards.
   ========================================================= */

/* Stronger premium separators between public homepage sections */
.donx-premium-home,
.about-section.donx-about-upgrade,
.feature-section,
.service-section,
.how-it-works.donx-how-upgrade,
.achievement-section.donx-counter-upgrade,
.testimonial-section.donx-testimonial-upgrade,
.payment-partner-section,
.footer-section.donx-premium-footer {
    position: relative;
}

.donx-premium-home::after,
.about-section.donx-about-upgrade::after,
.feature-section::after,
.service-section::after,
.how-it-works.donx-how-upgrade::after,
.achievement-section.donx-counter-upgrade::after,
.testimonial-section.donx-testimonial-upgrade::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1120px, calc(100% - 36px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(38, 183, 255, .32), rgba(139, 61, 255, .32), transparent);
    box-shadow: 0 0 24px rgba(38, 183, 255, .12);
    pointer-events: none;
}

/* Selective hero 3D effect: only hero brand word, laptop, buttons and floating cards */
.donx-gradient-word,
.donx-floating-card,
.donx-laptop-screen,
.donx-primary-cta,
.donx-secondary-cta {
    transform-style: preserve-3d;
    transform-origin: center;
}

.donx-gradient-word {
    display: inline-block;
    transition: transform .28s ease, filter .28s ease, text-shadow .28s ease;
}

.donx-gradient-word:hover {
    transform: translateY(-4px) translateZ(38px) scale(1.035);
    filter: brightness(1.13);
    text-shadow: 0 0 22px rgba(38, 183, 255, .25), 0 0 34px rgba(139, 61, 255, .18);
}

.donx-tilt-active {
    transition: transform .12s ease-out, box-shadow .25s ease, filter .25s ease;
}

.donx-tilt-reset {
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}

/* Add depth layers for hero cards */
.donx-floating-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(38, 183, 255, .22), transparent 38%, rgba(139, 61, 255, .22));
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.donx-floating-card:hover::before {
    opacity: 1;
}

.donx-floating-card > * {
    position: relative;
    z-index: 1;
}

.donx-laptop-screen:hover,
.donx-floating-card:hover {
    filter: brightness(1.08);
}

/* How It Works v3: no duplicate generated timeline on the left.
   The left side now styles only the admin editable title/description content. */
.how-it-works.donx-how-v3 {
    overflow: hidden;
}

.donx-how-v3 .donx-how-copy {
    position: relative;
    z-index: 2;
    padding: 28px;
    border: 1px solid rgba(122, 151, 255, .13);
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 4%, rgba(38, 183, 255, .10), transparent 32%),
        linear-gradient(145deg, rgba(16, 20, 58, .56), rgba(7, 9, 31, .50));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.donx-how-v3 .donx-how-admin-block {
    margin-bottom: 0;
}

.donx-how-v3 .donx-how-admin-content {
    color: #b9c3e8;
    font-size: 15px;
    line-height: 1.72;
}

.donx-how-v3 .donx-how-admin-content p {
    color: #b9c3e8;
    line-height: 1.72;
    margin-bottom: 14px;
}

.donx-how-v3 .donx-how-admin-content p:last-child {
    margin-bottom: 0;
}

.donx-how-v3 .donx-how-admin-content h1,
.donx-how-v3 .donx-how-admin-content h2,
.donx-how-v3 .donx-how-admin-content h3,
.donx-how-v3 .donx-how-admin-content h4,
.donx-how-v3 .donx-how-admin-content h5,
.donx-how-v3 .donx-how-admin-content h6,
.donx-how-v3 .donx-how-admin-content strong {
    color: #fff;
}

.donx-how-v3 .donx-how-admin-content h1,
.donx-how-v3 .donx-how-admin-content h2,
.donx-how-v3 .donx-how-admin-content h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.15;
    margin: 18px 0 8px;
}

.donx-how-v3 .donx-how-admin-content h4,
.donx-how-v3 .donx-how-admin-content h5,
.donx-how-v3 .donx-how-admin-content h6 {
    font-size: 16px;
    margin: 14px 0 7px;
}

.donx-how-v3 .donx-how-admin-content ul,
.donx-how-v3 .donx-how-admin-content ol {
    margin: 14px 0 0;
    padding-left: 20px;
}

.rtl .donx-how-v3 .donx-how-admin-content ul,
.rtl .donx-how-v3 .donx-how-admin-content ol {
    padding-left: 0;
    padding-right: 20px;
}

.donx-how-v3 .donx-how-admin-content li {
    margin-bottom: 8px;
}

.donx-how-v3 .donx-work-grid-wrap {
    overflow: hidden;
}

.donx-how-v3 .donx-work-grid-wrap::before,
.donx-how-v3 .donx-work-grid-wrap::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.donx-how-v3 .donx-work-grid-wrap::before {
    width: 280px;
    height: 280px;
    right: -100px;
    top: -120px;
    background: radial-gradient(circle, rgba(38, 183, 255, .18), transparent 65%);
}

.donx-how-v3 .donx-work-grid-wrap::after {
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(139, 61, 255, .18), transparent 65%);
}

.donx-how-v3 .donx-work-card {
    overflow: hidden;
}

.donx-how-v3 .donx-work-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 50%), rgba(38, 183, 255, .14), transparent 32%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.donx-how-v3 .donx-work-card:hover::before {
    opacity: 1;
}

.donx-how-v3 .donx-work-card > * {
    position: relative;
    z-index: 1;
}

/* Dynamic feature cards below hero: styles existing admin editable feature content */
.feature-section {
    padding: 104px 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(38, 183, 255, .09), transparent 24%),
        radial-gradient(circle at 86% 74%, rgba(139, 61, 255, .10), transparent 28%),
        linear-gradient(180deg, rgba(4, 6, 22, .99), rgba(7, 7, 29, .99));
    overflow: hidden;
}

.feature-section .feature-box {
    position: relative;
    min-height: 100%;
    padding: 34px 26px;
    border-radius: 26px;
    border: 1px solid rgba(122, 151, 255, .14);
    background:
        radial-gradient(circle at 16% 0%, rgba(38, 183, 255, .10), transparent 30%),
        linear-gradient(145deg, rgba(20, 20, 70, .84), rgba(8, 10, 34, .86));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.feature-section .feature-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(38, 183, 255, .15), transparent 35%, rgba(139, 61, 255, .12));
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.feature-section .feature-box:hover {
    transform: translateY(-12px);
    border-color: rgba(38, 183, 255, .28);
    box-shadow: 0 30px 78px rgba(0, 0, 0, .32), 0 0 36px rgba(38, 183, 255, .12);
}

.feature-section .feature-box:hover::before {
    opacity: 1;
}

.feature-section .feature-box .icon-box {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 78px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(139, 61, 255, .34), rgba(38, 183, 255, .18)) !important;
    border: 1px solid rgba(122, 151, 255, .17);
    box-shadow: 0 0 28px rgba(38, 183, 255, .10);
}

.feature-section .feature-box .icon-box img {
    width: 32px;
    filter: drop-shadow(0 0 16px rgba(38, 183, 255, .20));
}

.feature-section .feature-box h4,
.feature-section .feature-box p {
    position: relative;
    z-index: 1;
}

.feature-section .feature-box p {
    color: #b9c3e8;
}

/* Dynamic service cards: premium style using existing editable admin service data */
.service-section {
    padding: 112px 0;
    background:
        radial-gradient(circle at 90% 16%, rgba(38, 183, 255, .08), transparent 22%),
        radial-gradient(circle at 10% 80%, rgba(139, 61, 255, .11), transparent 26%),
        linear-gradient(180deg, rgba(7, 7, 29, .99), rgba(5, 7, 24, .99));
    overflow: hidden;
}

.service-section .header-text {
    position: relative;
    z-index: 1;
}

.service-section .header-text h5 {
    color: #ad59ff;
}

.service-section .service-box {
    position: relative;
    height: 100%;
    padding: 32px 26px;
    border-radius: 26px;
    border: 1px solid rgba(122, 151, 255, .14);
    background:
        radial-gradient(circle at 20% 4%, rgba(38, 183, 255, .10), transparent 28%),
        linear-gradient(145deg, rgba(20, 19, 70, .86), rgba(9, 10, 35, .86));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-section .service-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 20%), rgba(38, 183, 255, .14), transparent 32%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.service-section .service-box:hover {
    transform: translateY(-12px);
    border-color: rgba(151, 85, 255, .32);
    box-shadow: 0 30px 78px rgba(0, 0, 0, .32), 0 0 36px rgba(139, 61, 255, .12);
}

.service-section .service-box:hover::before {
    opacity: 1;
}

.service-section .service-box .icon-box,
.service-section .service-box h4,
.service-section .service-box p,
.service-section .service-box .read-more {
    position: relative;
    z-index: 1;
}

.service-section .service-box .icon-box {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(139, 61, 255, .34), rgba(38, 183, 255, .16));
    border: 1px solid rgba(122, 151, 255, .16);
}

.service-section .service-box .icon-box img {
    width: 34px;
    filter: drop-shadow(0 0 16px rgba(38, 183, 255, .18));
}

.service-section .service-box h4 {
    margin-top: 22px;
}

.service-section .service-box p {
    color: #b9c3e8;
}

.service-section .service-box .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 800;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(122, 151, 255, .12);
}

.service-section .service-box .read-more:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(139, 61, 255, .72), rgba(38, 183, 255, .60));
}

/* Touch/mobile: keep it clean and avoid heavy pointer/hover transforms */
@media (hover: none), (pointer: coarse) {
    .donx-gradient-word:hover,
    .donx-floating-card:hover,
    .donx-laptop-screen:hover,
    .feature-section .feature-box:hover,
    .service-section .service-box:hover {
        transform: none !important;
        filter: none;
    }
}

@media (max-width: 991px) {
    .donx-how-v3 .donx-how-copy {
        padding: 24px;
    }

    .feature-section,
    .service-section {
        padding: 84px 0;
    }
}

@media (max-width: 767px) {
    .donx-how-v3 .donx-how-copy {
        padding: 20px;
        border-radius: 22px;
    }

    .donx-how-v3 .donx-how-admin-content {
        font-size: 14px;
        line-height: 1.65;
    }

    .feature-section .feature-box,
    .service-section .service-box {
        padding: 28px 22px;
        border-radius: 22px;
    }
}

/* =========================================================
   DonXtraBoost Public Frontend Phase 4
   Shared premium system for banner, contact, services and shop pages.
   Frontend only: no admin/dashboard/payment/order logic.
   ========================================================= */
.banner-section {
    position: relative;
    overflow: hidden;
    padding: 158px 0 76px !important;
    background:
        radial-gradient(circle at 15% 30%, rgba(38, 183, 255, .13), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(139, 61, 255, .18), transparent 30%),
        linear-gradient(180deg, #04051b 0%, #080629 100%) !important;
}

.banner-section::before,
.banner-section::after,
.service-page::before,
.shop-page::before,
.shop-show-page::before,
.contact-section::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.banner-section::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 86%);
    opacity: .25;
}

.banner-section::after {
    left: 50%;
    bottom: 0;
    width: min(1160px, calc(100% - 30px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(38,183,255,.38), rgba(139,61,255,.32), transparent);
}

.banner-section .container,
.service-page .container,
.shop-page .container,
.shop-show-page .container,
.contact-section .container {
    position: relative;
    z-index: 1;
}

.banner-section .header-text h3 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(34px, 5vw, 62px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em;
    text-shadow: 0 0 30px rgba(38,183,255,.18);
}

.contact-section {
    position: relative;
    overflow: hidden;
    padding: 112px 0 !important;
    background:
        radial-gradient(circle at 12% 24%, rgba(38,183,255,.09), transparent 24%),
        radial-gradient(circle at 88% 72%, rgba(139,61,255,.13), transparent 28%),
        linear-gradient(180deg, rgba(6,7,26,.99), rgba(4,6,20,.99)) !important;
}

.contact-section::before {
    left: 50%;
    top: 0;
    width: min(1160px, calc(100% - 30px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(151,178,255,.22), transparent);
}

.contact-section .text-box,
.contact-section form {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 30px;
    border: 1px solid rgba(122,151,255,.14);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 0%, rgba(38,183,255,.10), transparent 30%),
        linear-gradient(145deg, rgba(17,21,62,.76), rgba(8,10,34,.82));
    box-shadow: 0 26px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
}

.contact-section .text-box::after,
.contact-section form::after,
.services-topbar-card::after,
.shop-top-card::after,
.shop-show-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 0%), rgba(38,183,255,.12), transparent 32%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.contact-section .text-box:hover::after,
.contact-section form:hover::after,
.services-topbar-card:hover::after,
.shop-top-card:hover::after,
.shop-show-card:hover::after {
    opacity: 1;
}

.contact-section .header-text,
.contact-section .info-box,
.contact-section form > * {
    position: relative;
    z-index: 1;
}

.contact-section .header-text h5,
.services-topbar-head .services-topbar-badge,
.shop-top-kicker,
.shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #80dcff !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(38,183,255,.08) !important;
    border: 1px solid rgba(38,183,255,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.contact-section .header-text h3,
.shop-top-card h4 {
    color: #fff !important;
    font-size: clamp(30px, 3.6vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em;
}

.contact-section .header-text p,
.contact-section .text p,
.contact-section form h4 + .row,
.shop-top-card p,
.shop-card p,
.shop-state,
.shop-related-item .inner,
.shop-show-card p,
.shop-show-card .opacity-75,
.shop-show-card .opacity-85 {
    color: #b9c3e8 !important;
}

.contact-section .info-box {
    margin-top: 18px !important;
    padding: 18px !important;
    border-radius: 22px;
    border: 1px solid rgba(122,151,255,.12);
    background: rgba(255,255,255,.045);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.contact-section .info-box:hover {
    transform: translateY(-6px);
    border-color: rgba(38,183,255,.28);
    background: rgba(255,255,255,.065);
}

.contact-section .info-box .icon-box {
    width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(139,61,255,.34), rgba(38,183,255,.18)) !important;
    border: 1px solid rgba(122,151,255,.16);
}

.contact-section .info-box .icon-box img {
    width: 25px;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(38,183,255,.22));
}

.contact-section form h4 {
    color: #fff !important;
    margin-bottom: 22px !important;
}

.contact-section .form-control,
.service-page .form-control,
.service-page .form-select,
.shop-search .form-control,
.shop-show-page .form-control {
    color: #fff !important;
    border: 1px solid rgba(122,151,255,.16) !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: none !important;
}

.contact-section .form-control::placeholder,
.service-page .form-control::placeholder,
.shop-search .form-control::placeholder,
.shop-show-page .form-control::placeholder {
    color: #8e9ac9 !important;
    opacity: 1;
}

.contact-section .form-control:focus,
.service-page .form-control:focus,
.service-page .form-select:focus,
.shop-search .form-control:focus,
.shop-show-page .form-control:focus {
    border-color: rgba(38,183,255,.42) !important;
    box-shadow: 0 0 0 4px rgba(38,183,255,.10) !important;
}

.contact-section .btn-smm,
.service-page .btn-primary,
.shop-page .btn-primary,
.shop-show-page .btn-primary {
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--donx-violet), var(--donx-purple) 46%, var(--donx-blue)) !important;
    box-shadow: 0 16px 38px rgba(38,183,255,.18), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.service-page,
.shop-page,
.shop-show-page {
    position: relative;
    overflow: hidden;
    padding: 58px 0 104px !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(38,183,255,.10), transparent 24%),
        radial-gradient(circle at 92% 26%, rgba(139,61,255,.14), transparent 28%),
        linear-gradient(180deg, #070626 0%, #05071f 100%) !important;
}

.service-page::before,
.shop-page::before,
.shop-show-page::before {
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .13;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}

.services-topbar-card,
.shop-top-card,
.shop-show-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(122,151,255,.16) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(38,183,255,.13), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(139,61,255,.14), transparent 28%),
        linear-gradient(145deg, rgba(17,21,62,.88), rgba(8,10,34,.90)) !important;
    box-shadow: 0 30px 82px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(16px);
}

.services-topbar-card > *,
.shop-top-card > *,
.shop-show-card > * {
    position: relative;
    z-index: 1;
}

.services-topbar-head h5 {
    color: #fff !important;
    font-size: clamp(24px, 2.8vw, 36px) !important;
    letter-spacing: -.03em;
}

.services-topbar-head p,
.service-results-meta p {
    color: #b9c3e8 !important;
}

.services-filter-grid .filter-label,
.shop-show-page .form-label {
    color: #e6ebff !important;
}

.services-filter-grid .btn-outline-light,
.shop-page .btn-outline-light,
.shop-show-page .btn-outline-light,
.shop-card .btn-outline-light,
.shop-related-item .btn-outline-light {
    color: #fff !important;
    border-color: rgba(122,151,255,.22) !important;
    background: rgba(255,255,255,.06) !important;
}

.services-filter-grid .btn-outline-light:hover,
.shop-page .btn-outline-light:hover,
.shop-show-page .btn-outline-light:hover,
.shop-card .btn-outline-light:hover,
.shop-related-item .btn-outline-light:hover {
    border-color: rgba(38,183,255,.40) !important;
    background: rgba(38,183,255,.12) !important;
}

.services-active-chip {
    color: #dfe7ff !important;
    border: 1px solid rgba(122,151,255,.18) !important;
    background: rgba(255,255,255,.055) !important;
}

.service-page .accordion-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(122,151,255,.14) !important;
    background: linear-gradient(145deg, rgba(18,22,64,.82), rgba(8,10,34,.86)) !important;
    box-shadow: 0 22px 56px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.service-page .accordion-item:hover {
    transform: translateY(-4px);
    border-color: rgba(38,183,255,.26) !important;
    box-shadow: 0 28px 68px rgba(0,0,0,.28), 0 0 34px rgba(38,183,255,.08);
}

.service-page .accordion-button {
    color: #fff !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: none !important;
}

.service-page .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(139,61,255,.22), rgba(38,183,255,.10)) !important;
}

.service-page .accordion-button::after {
    filter: brightness(0) invert(1);
}

.service-page .table-parent {
    background: rgba(3,5,18,.26);
}

.service-page .table {
    color: #dfe7ff !important;
    margin-bottom: 0;
    border-color: rgba(122,151,255,.10) !important;
}

.service-page .table thead th {
    color: #80dcff !important;
    background: rgba(38,183,255,.07) !important;
    border-color: rgba(122,151,255,.12) !important;
}

.service-page .table tbody td {
    color: #dfe7ff !important;
    border-color: rgba(122,151,255,.08) !important;
}

.service-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: #dfe7ff !important;
    background-color: rgba(255,255,255,.025) !important;
}

.service-page .td-quick-view .details,
.service-page .action-btn-primary.details {
    background: linear-gradient(135deg, rgba(139,61,255,.94), rgba(38,183,255,.82)) !important;
    box-shadow: 0 0 22px rgba(38,183,255,.18);
}

.service-page .modal-content,
.shop-show-page .modal-content {
    color: #fff !important;
    border: 1px solid rgba(122,151,255,.16) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(18,22,64,.96), rgba(8,10,34,.98)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.46) !important;
}

.service-page .modal-header,
.service-page .modal-footer,
.shop-show-page .modal-header,
.shop-show-page .modal-footer {
    border-color: rgba(122,151,255,.10) !important;
}

.shop-top-card h4 {
    margin-bottom: 12px !important;
}

.shop-card,
.shop-related-item,
.shop-buy-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(122,151,255,.14) !important;
    background:
        radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 0%), rgba(38,183,255,.10), transparent 32%),
        linear-gradient(145deg, rgba(18,22,64,.80), rgba(8,10,34,.86)) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.shop-card:hover,
.shop-related-item:hover,
.shop-buy-card:hover {
    transform: translateY(-8px);
    border-color: rgba(38,183,255,.30) !important;
    box-shadow: 0 30px 74px rgba(0,0,0,.32), 0 0 34px rgba(38,183,255,.10);
}

.shop-card-image,
.shop-show-image,
.shop-related-item img {
    background: rgba(3,5,18,.35) !important;
}

.shop-card-image img,
.shop-show-image img,
.shop-related-item img {
    transition: transform .45s ease, filter .45s ease;
}

.shop-card:hover .shop-card-image img,
.shop-related-item:hover img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.04);
}

.shop-card h5 a,
.shop-related-item h6 a,
.shop-show-title,
.shop-show-price,
.shop-price {
    color: #fff !important;
}

.shop-price,
.shop-show-price {
    text-shadow: 0 0 24px rgba(38,183,255,.16);
}

.shop-stock-badge.in {
    background: rgba(50,230,164,.12) !important;
    color: #baf3d2 !important;
    border-color: rgba(50,230,164,.24) !important;
}

.shop-stock-badge.out {
    background: rgba(255,83,112,.13) !important;
    color: #ffb3be !important;
    border-color: rgba(255,83,112,.24) !important;
}

.shop-empty,
.service-page .empty_state > div {
    color: #dfe7ff;
    border: 1px solid rgba(122,151,255,.14) !important;
    background: linear-gradient(145deg, rgba(18,22,64,.76), rgba(8,10,34,.82)) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.24);
}

.shop-confirm-list li {
    border-color: rgba(122,151,255,.12) !important;
}

.pagination-section .pagination,
.shop-page .pagination {
    gap: 8px;
    justify-content: center;
}

.pagination-section .page-link,
.shop-page .page-link {
    color: #dfe7ff !important;
    border: 1px solid rgba(122,151,255,.14) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.055) !important;
}

.pagination-section .page-item.active .page-link,
.shop-page .page-item.active .page-link,
.pagination-section .page-link:hover,
.shop-page .page-link:hover {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(139,61,255,.82), rgba(38,183,255,.68)) !important;
}

@media (hover: none), (pointer: coarse) {
    .contact-section .info-box:hover,
    .service-page .accordion-item:hover,
    .shop-card:hover,
    .shop-related-item:hover,
    .shop-buy-card:hover {
        transform: none !important;
    }

    .shop-card:hover .shop-card-image img,
    .shop-related-item:hover img {
        transform: none !important;
        filter: none !important;
    }
}

@media (max-width: 991px) {
    .banner-section {
        padding: 132px 0 56px !important;
    }

    .contact-section,
    .service-page,
    .shop-page,
    .shop-show-page {
        padding-top: 78px !important;
        padding-bottom: 84px !important;
    }

    .contact-section .text-box,
    .contact-section form {
        padding: 24px;
        border-radius: 24px;
    }
}

@media (max-width: 767px) {
    .banner-section {
        padding: 118px 0 44px !important;
    }

    .contact-section,
    .service-page,
    .shop-page,
    .shop-show-page {
        padding-top: 62px !important;
        padding-bottom: 70px !important;
    }

    .contact-section .text-box,
    .contact-section form,
    .services-topbar-card,
    .shop-top-card,
    .shop-show-card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .contact-section .info-box {
        padding: 15px !important;
        border-radius: 18px;
    }

    .services-topbar-head h5,
    .shop-top-card h4 {
        font-size: 1.35rem !important;
    }
}


/* Phase 5 premium polish: inner banners, how-it-works cleanup, services/shop/contact refinement */
.donx-inner-banner {
    padding: 132px 0 42px !important;
}

.donx-banner-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 26px 26px 22px;
    border: 1px solid rgba(122, 151, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 0%, rgba(38, 183, 255, .12), transparent 36%),
        radial-gradient(circle at 88% 0%, rgba(139, 61, 255, .16), transparent 38%),
        linear-gradient(145deg, rgba(14, 19, 57, .74), rgba(7, 9, 31, .78));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
}

.donx-banner-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 1px solid rgba(38, 183, 255, .18);
    background: rgba(38, 183, 255, .08);
    color: #86dfff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.banner-section .header-text {
    margin-bottom: 0;
}

.banner-section .header-text h3 {
    max-width: 680px;
    margin: 0 auto;
}

.donx-how-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(38, 183, 255, .08);
    border: 1px solid rgba(38, 183, 255, .18);
    color: #89e4ff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.donx-how-chip i {
    color: #89e4ff;
}

.donx-how-v3 .donx-how-copy .title {
    margin-bottom: 10px;
}

.donx-how-v3 .donx-how-copy h3 {
    margin-bottom: 16px;
    color: #ffffff;
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.06;
    letter-spacing: -.03em;
}

.donx-how-v3 .donx-how-admin-content {
    max-width: 520px;
}

.donx-how-v3 .donx-how-admin-content > *:first-child {
    margin-top: 0;
}

.donx-how-v3 .donx-how-admin-content > *:last-child {
    margin-bottom: 0;
}

.donx-how-v3 .donx-work-card {
    min-height: 100%;
    padding-top: 32px;
}

.donx-how-v3 .donx-work-card .icon-box {
    width: 74px;
    height: 74px;
    margin-bottom: 22px;
}

.donx-work-card .icon-box i {
    font-size: 26px;
    color: #cb7bff;
}

.donx-card-step {
    top: 16px;
    right: 16px;
    min-width: 42px;
    min-height: 42px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(122, 151, 255, .14);
    color: rgba(255, 255, 255, .82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.donx-work-card h5 {
    font-size: 1.1rem;
    line-height: 1.3;
}

.donx-work-card p {
    color: #b9c3e8;
    line-height: 1.62;
}

.services-topbar-card {
    border-radius: 28px !important;
    padding: 26px !important;
}

.services-topbar-head {
    gap: 18px;
    margin-bottom: 20px !important;
}

.services-filter-grid {
    gap: 16px !important;
}

.services-filter-grid .input-box,
.services-filter-grid > div {
    min-width: 0;
}

.services-filter-grid .form-select,
.services-filter-grid .form-control,
.services-filter-grid .btn {
    border-radius: 16px !important;
}

.service-results-meta {
    padding: 0 4px;
    margin-bottom: 22px !important;
}

.service-page .accordion-button {
    padding-right: 54px !important;
}

.service-page .table td span {
    display: inline-block;
    margin-right: 6px;
}

.shop-top-card {
    border-radius: 30px !important;
    padding: 28px !important;
    margin-bottom: 30px !important;
}

.shop-grid {
    gap: 24px !important;
}

.shop-search .input-group {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(122, 151, 255, .14);
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.shop-search .form-control {
    min-height: 56px;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
}

.shop-search .btn {
    min-width: 126px;
    border-radius: 0 !important;
}

.shop-card {
    border-radius: 22px !important;
}

.shop-card-image {
    aspect-ratio: 1 / 0.84;
}

.shop-card-body {
    padding: 20px !important;
    gap: 14px !important;
}

.shop-card h5 {
    font-size: 1.04rem;
    line-height: 1.35;
    margin-bottom: 8px !important;
}

.shop-card h5 a,
.shop-related-item h6 a {
    text-decoration: none;
}

.shop-card p {
    line-height: 1.58;
}

.shop-meta {
    align-items: center;
    font-size: .86rem !important;
}

.shop-price,
.shop-show-price {
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

.shop-empty {
    padding: 60px 26px !important;
    border-radius: 24px !important;
}

.shop-show-card {
    border-radius: 30px !important;
    padding: 28px !important;
}

.shop-show-image {
    border-radius: 24px !important;
}

.shop-show-title {
    max-width: 720px;
}

.shop-buy-card {
    border-radius: 22px !important;
    padding: 20px !important;
}

.shop-related {
    margin-top: 38px !important;
}

.shop-related > h4 {
    color: #fff;
    margin-bottom: 18px !important;
}

.shop-related-item {
    border-radius: 20px !important;
}

.shop-related-item .inner {
    padding: 16px !important;
}

.contact-section {
    padding-top: 74px !important;
}

.contact-section .text-box,
.contact-section form {
    border-radius: 32px;
    padding: 32px;
}

.contact-section .header-text h3 {
    max-width: 540px;
    margin-bottom: 14px;
}

.contact-section .info-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-section .info-box .text h5 {
    margin-bottom: 6px;
    color: #fff;
}

.contact-section .info-box .text p {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.contact-section textarea.form-control {
    min-height: 132px;
    resize: vertical;
}

@media (max-width: 991px) {
    .donx-inner-banner {
        padding: 124px 0 34px !important;
    }

    .donx-banner-shell {
        padding: 22px 20px 18px;
        border-radius: 24px;
    }

    .donx-how-v3 .donx-how-copy h3 {
        font-size: clamp(26px, 4.2vw, 40px);
    }

    .services-topbar-card,
    .shop-top-card,
    .shop-show-card,
    .contact-section .text-box,
    .contact-section form {
        border-radius: 26px !important;
    }
}

@media (max-width: 767px) {
    .donx-inner-banner {
        padding: 112px 0 28px !important;
    }

    .donx-banner-shell {
        padding: 18px 16px 16px;
        border-radius: 22px;
    }

    .donx-banner-kicker,
    .donx-how-chip {
        font-size: .72rem;
        padding: 7px 12px;
    }

    .banner-section .header-text h3,
    .contact-section .header-text h3,
    .shop-top-card h4,
    .services-topbar-head h5,
    .donx-how-v3 .donx-how-copy h3 {
        font-size: 1.9rem !important;
        line-height: 1.1 !important;
    }

    .services-topbar-card,
    .shop-top-card,
    .shop-show-card,
    .contact-section .text-box,
    .contact-section form {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .donx-how-v3 .donx-how-copy {
        padding: 20px;
        border-radius: 22px;
    }

    .donx-card-step {
        min-width: 38px;
        min-height: 38px;
        border-radius: 12px;
        font-size: 11px;
    }

    .donx-how-v3 .donx-work-card {
        padding-top: 28px;
    }

    .shop-card-body {
        padding: 16px !important;
    }

    .shop-search .input-group {
        border-radius: 16px;
    }

    .shop-search .form-control,
    .shop-search .btn {
        min-height: 48px;
    }

    .contact-section .info-box {
        gap: 12px;
        padding: 14px !important;
        border-radius: 18px;
    }
}


/* Phase 6 electric glass polish for inner/public pages */
.donx-banner-shell,
.services-topbar-card,
.shop-top-card,
.shop-show-card,
.contact-section .text-box,
.contact-section form,
.donx-about-frame,
.feature-section .feature-box,
.service-section .service-box,
.service-page .accordion-item,
.shop-card,
.shop-related-item,
.shop-buy-card,
.footer-section.donx-premium-footer .box {
    position: relative;
}

.donx-banner-shell::before,
.services-topbar-card::before,
.shop-top-card::before,
.shop-show-card::before,
.contact-section .text-box::before,
.contact-section form::before,
.donx-about-frame::before,
.feature-section .feature-box::after,
.service-section .service-box::after,
.service-page .accordion-item::before,
.shop-card::before,
.shop-related-item::before,
.shop-buy-card::before,
.footer-section.donx-premium-footer .box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.donx-banner-shell::before,
.services-topbar-card::before,
.shop-top-card::before,
.shop-show-card::before,
.contact-section .text-box::before,
.contact-section form::before,
.donx-about-frame::before,
.service-page .accordion-item::before,
.shop-card::before,
.shop-related-item::before,
.shop-buy-card::before,
.footer-section.donx-premium-footer .box::before {
    padding: 1px;
    background: linear-gradient(135deg, rgba(38,183,255,.34), rgba(255,255,255,.06) 36%, rgba(139,61,255,.28));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .85;
}

.donx-banner-shell::after,
.services-topbar-card .services-electric-line,
.shop-top-card .shop-electric-line,
.shop-show-card .shop-electric-line,
.donx-about-frame .about-electric-line,
.footer-section.donx-premium-footer .box .footer-electric-line {
    content: "";
    position: absolute;
    pointer-events: none;
}

.donx-banner-shell::after {
    left: 30px;
    right: 30px;
    bottom: 14px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(38,183,255,.92), rgba(139,61,255,.88), transparent);
    box-shadow: 0 0 18px rgba(38,183,255,.22);
    opacity: .92;
}

.services-topbar-card,
.shop-top-card,
.shop-show-card,
.contact-section .text-box,
.contact-section form,
.donx-about-frame,
.footer-section.donx-premium-footer .box {
    isolation: isolate;
}

.services-topbar-card {
    background:
        linear-gradient(115deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 34%, rgba(255,255,255,.00) 48%),
        radial-gradient(circle at 10% 0%, rgba(38,183,255,.16), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(139,61,255,.18), transparent 32%),
        linear-gradient(145deg, rgba(17,21,62,.88), rgba(8,10,34,.92)) !important;
}

.services-topbar-head {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(122,151,255,.10);
}

.service-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.service-page .accordion-item::after,
.shop-card::after,
.shop-related-item::after,
.shop-buy-card::after,
.footer-section.donx-premium-footer .box::after,
.donx-about-card::after,
.feature-section .feature-box::after,
.service-section .service-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, rgba(255,255,255,.10), transparent 24%, transparent 72%, rgba(255,255,255,.03));
    pointer-events: none;
}

.donx-about-frame {
    background:
        linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 15% 0%, rgba(38,183,255,.16), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(139,61,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(16,20,58,.88), rgba(7,9,31,.88));
}

.donx-about-image-shell {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(122,151,255,.05);
}

.donx-about-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%),
        radial-gradient(circle at 0% 0%, rgba(38,183,255,.13), transparent 28%),
        linear-gradient(145deg, rgba(18,23,67,.84), rgba(9,11,34,.86));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.donx-about-card:hover {
    transform: translateY(-8px);
    border-color: rgba(38,183,255,.28);
    box-shadow: 0 24px 56px rgba(0,0,0,.28), 0 0 26px rgba(38,183,255,.10);
}

.feature-section .feature-box,
.service-section .service-box,
.shop-card,
.shop-related-item,
.shop-buy-card {
    backdrop-filter: blur(14px);
}

.feature-section .feature-box {
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0) 32%),
        radial-gradient(circle at 16% 0%, rgba(38,183,255,.12), transparent 32%),
        linear-gradient(145deg, rgba(20,20,70,.84), rgba(8,10,34,.88));
}

.service-section .header-text {
    max-width: 760px;
    margin-inline: auto;
    padding: 0 10px 10px;
}

.service-section .header-text h3 {
    text-shadow: 0 0 24px rgba(38,183,255,.12);
}

.service-section .service-box {
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 20% 4%, rgba(38,183,255,.12), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(139,61,255,.12), transparent 30%),
        linear-gradient(145deg, rgba(20,19,70,.88), rgba(9,10,35,.88));
}

.service-section .service-box .read-more {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.16);
}

.service-page .accordion-item {
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0) 28%),
        radial-gradient(circle at 0% 0%, rgba(38,183,255,.10), transparent 28%),
        linear-gradient(145deg, rgba(18,22,64,.84), rgba(8,10,34,.88)) !important;
}

.service-page .accordion-button {
    backdrop-filter: blur(8px);
}

.service-page .table-parent {
    border-radius: 18px;
    border: 1px solid rgba(122,151,255,.10);
    overflow: hidden;
}

.shop-top-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 14% 0%, rgba(38,183,255,.14), transparent 32%),
        radial-gradient(circle at 92% 0%, rgba(139,61,255,.16), transparent 34%),
        linear-gradient(145deg, rgba(17,21,62,.90), rgba(8,10,34,.92)) !important;
}

.shop-top-card .d-flex.flex-wrap.align-items-center.gap-2 {
    margin-top: 10px;
}

.shop-card,
.shop-related-item,
.shop-buy-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 36%),
        radial-gradient(circle at var(--donx-x,50%) var(--donx-y,0%), rgba(38,183,255,.10), transparent 34%),
        linear-gradient(145deg, rgba(18,22,64,.82), rgba(8,10,34,.88)) !important;
}

.shop-card-image,
.shop-show-image,
.shop-related-item img {
    position: relative;
}

.shop-card-image::after,
.shop-show-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 46%, rgba(6,8,26,.06), rgba(6,8,26,.38));
    pointer-events: none;
}

.shop-card-body {
    position: relative;
}

.shop-meta {
    padding-top: 6px;
    border-top: 1px solid rgba(122,151,255,.08);
}

.shop-show-card {
    background:
        linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 12% 0%, rgba(38,183,255,.14), transparent 32%),
        radial-gradient(circle at 96% 4%, rgba(139,61,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(17,21,62,.90), rgba(8,10,34,.94)) !important;
}

.shop-buy-card {
    box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}

.contact-section .text-box,
.contact-section form {
    background:
        linear-gradient(118deg, rgba(255,255,255,.05), rgba(255,255,255,0) 36%),
        radial-gradient(circle at 12% 0%, rgba(38,183,255,.12), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(139,61,255,.14), transparent 32%),
        linear-gradient(145deg, rgba(17,21,62,.80), rgba(8,10,34,.84));
}

.contact-section .info-box {
    background:
        linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,0) 32%),
        rgba(255,255,255,.045);
}

.footer-section.donx-premium-footer .box {
    padding: 22px 18px;
    border-radius: 24px;
    border: 1px solid rgba(122,151,255,.12);
    background:
        linear-gradient(118deg, rgba(255,255,255,.045), rgba(255,255,255,0) 38%),
        radial-gradient(circle at 10% 0%, rgba(38,183,255,.11), transparent 32%),
        linear-gradient(145deg, rgba(11,15,46,.72), rgba(5,6,24,.76));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    height: 100%;
}

.footer-section.donx-premium-footer .box.donx-footer-brand,
.footer-section.donx-premium-footer .box.donx-newsletter-box,
.footer-section.donx-premium-footer .box.donx-popular-services {
    backdrop-filter: blur(12px);
}

.footer-section.donx-premium-footer .box .links {
    margin-bottom: 0;
}

.footer-section.donx-premium-footer .box .links li:last-child {
    margin-bottom: 0;
}

@media (hover: none), (pointer: coarse) {
    .donx-about-card:hover {
        transform: none !important;
    }
}

@media (max-width: 991px) {
    .footer-section.donx-premium-footer .box {
        padding: 20px 16px;
        border-radius: 22px;
        height: auto;
    }
}

@media (max-width: 767px) {
    .services-topbar-head {
        padding-bottom: 12px;
    }

    .service-results-meta {
        align-items: flex-start;
    }

    .footer-section.donx-premium-footer .box {
        padding: 18px 14px;
        border-radius: 20px;
    }
}


/* Phase 7 hero fidelity + services pagination/mobile polish */
.home-section.donx-premium-home {
    overflow: hidden;
}

.home-section.donx-premium-home::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 74% 44%, rgba(92, 70, 255, .22), transparent 22%),
        radial-gradient(circle at 62% 56%, rgba(24, 189, 255, .14), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(199, 72, 255, .10), transparent 16%);
    pointer-events: none;
    z-index: 1;
}

.donx-hero-visual {
    min-height: 700px;
    max-width: 760px;
}

.donx-light-trail {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    opacity: .8;
    filter: blur(2px);
    z-index: 1;
}

.donx-light-trail::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(126,96,255,.88), rgba(34,192,255,.90), transparent);
    box-shadow: 0 0 30px rgba(34,192,255,.28);
}

.donx-light-trail-left {
    width: 300px;
    height: 2px;
    left: -88px;
    top: 136px;
    transform: rotate(-24deg);
}

.donx-light-trail-right {
    width: 260px;
    height: 2px;
    right: -36px;
    top: 138px;
    transform: rotate(16deg);
}

.donx-light-trail-bottom {
    width: 360px;
    height: 2px;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%);
}

.donx-pedestal {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 560px;
    height: 190px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.donx-pedestal-ring,
.donx-pedestal-core {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.donx-pedestal-ring {
    border: 2px solid rgba(48, 196, 255, .30);
    box-shadow: 0 0 30px rgba(48, 196, 255, .20), inset 0 0 26px rgba(139, 61, 255, .12);
    background: radial-gradient(ellipse at center, rgba(12,18,58,.68), rgba(8,9,30,0) 72%);
}

.donx-pedestal .ring-outer {
    bottom: 0;
    width: 540px;
    height: 150px;
}

.donx-pedestal .ring-mid {
    bottom: 18px;
    width: 430px;
    height: 116px;
    border-color: rgba(153, 90, 255, .28);
}

.donx-pedestal .ring-inner {
    bottom: 34px;
    width: 308px;
    height: 82px;
}

.donx-pedestal-core {
    bottom: 28px;
    width: 280px;
    height: 78px;
    background: radial-gradient(ellipse at center, rgba(23, 223, 255, .25), rgba(111, 77, 255, .18) 52%, rgba(8,9,29,0) 76%);
    filter: blur(4px);
}

.donx-energy-ring {
    left: 50%;
    bottom: 58px;
    width: 500px;
    height: 148px;
    border-color: rgba(38, 183, 255, .42);
    background: radial-gradient(ellipse at center, rgba(38, 183, 255, .20), rgba(139, 61, 255, .14) 36%, transparent 72%);
    box-shadow: 0 0 54px rgba(38, 183, 255, .34), inset 0 0 34px rgba(139, 61, 255, .24);
    z-index: 2;
}

.donx-laptop-wrap {
    width: min(560px, 82vw);
    bottom: 92px;
    transform: translateX(-50%) rotateX(7deg) rotateY(-14deg) rotateZ(-1.2deg);
    z-index: 5;
}

.donx-laptop-screen {
    height: 368px;
    border-radius: 26px 26px 14px 14px;
    border: 1px solid rgba(140, 168, 255, .32);
    background:
        linear-gradient(160deg, rgba(18, 25, 75, .99), rgba(6, 9, 30, .99)),
        radial-gradient(circle at 18% 0%, rgba(22, 197, 255, .10), transparent 28%);
    box-shadow: 0 44px 110px rgba(0, 0, 0, .52), 0 0 58px rgba(38, 183, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.donx-laptop-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 28%, transparent 66%, rgba(255,255,255,.03));
    pointer-events: none;
}

.donx-dashboard-topbar {
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
}

.donx-dashboard-body {
    grid-template-columns: 66px 1fr;
    gap: 16px;
}

.donx-dashboard-body aside {
    padding: 14px 10px;
}

.donx-dashboard-body aside span {
    height: 18px;
    border-radius: 12px;
}

.donx-dashboard-body aside span:nth-child(1) { width: 100%; }
.donx-dashboard-body aside span:nth-child(2) { width: 84%; }
.donx-dashboard-body aside span:nth-child(3) { width: 76%; }
.donx-dashboard-body aside span:nth-child(4) { width: 92%; }

.donx-dashboard-heading {
    margin-bottom: 14px;
}

.donx-dashboard-heading strong,
.dash-card strong {
    letter-spacing: -.03em;
}

.dash-chart-panel {
    position: relative;
    margin-bottom: 12px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
    overflow: hidden;
}

.dash-chart-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .35;
    pointer-events: none;
}

.dash-chart-head,
.dash-chart-axis,
.dash-chart-canvas {
    position: relative;
    z-index: 1;
}

.dash-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.dash-chart-head strong {
    display: block;
    font-size: 26px;
    line-height: 1;
    color: #74ffa9;
}

.dash-chart-head small {
    color: #9faadf;
    font-size: 11px;
}

.dash-chart-canvas {
    height: 110px;
}

.dash-chart-canvas svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 16px rgba(61,213,255,.16));
}

.dash-chart-axis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.dash-chart-axis span {
    color: #8e98c6;
    font-size: 10px;
}

.donx-dashboard-grid {
    grid-template-columns: 1.08fr .92fr;
}

.dash-card.success strong,
.dash-card.positive strong {
    color: #ffffff;
}

.dash-card.success {
    background: linear-gradient(145deg, rgba(29, 184, 118, .16), rgba(255,255,255,.04));
    border-color: rgba(82, 220, 166, .18);
}

.donx-laptop-base {
    height: 38px;
    width: 114%;
    margin-left: -7%;
    border-radius: 0 0 56px 56px;
    background: linear-gradient(180deg, #6b78b6, #2a315f 36%, #0b0d25 82%);
    position: relative;
}

.donx-laptop-base::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    width: 160px;
    height: 12px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
}

.donx-laptop-base::after {
    width: 126px;
    height: 10px;
    margin-top: 1px;
}

.donx-laptop-shadow {
    width: 90%;
    height: 52px;
    margin-top: -2px;
    background: rgba(0, 0, 0, .52);
    filter: blur(18px);
}

.donx-floating-card {
    width: 228px;
    min-height: 96px;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(14, 20, 58, .78), rgba(10, 11, 42, .62));
    border-color: rgba(142, 168, 255, .22);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .38), 0 0 26px rgba(139, 61, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .11);
    backdrop-filter: blur(20px);
}

.donx-floating-card > div {
    min-width: 0;
}

.donx-card-wave {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 16px;
    margin-top: 8px;
}

.donx-card-wave i {
    display: block;
    width: 18px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(61,213,255,.95), rgba(169,77,255,.95));
    box-shadow: none;
}

.donx-card-wave i:nth-child(1) { height: 4px; width: 20px; }
.donx-card-wave i:nth-child(2) { height: 7px; width: 28px; }
.donx-card-wave i:nth-child(3) { height: 5px; width: 22px; }
.donx-card-wave i:nth-child(4) { height: 8px; width: 30px; }

.card-youtube { left: 8px; top: 28px; }
.card-tiktok { left: -24px; top: 188px; }
.card-web { left: 8px; bottom: 132px; }
.card-instagram { right: -12px; top: 48px; }
.card-music { right: -34px; top: 228px; }
.card-order { right: 18px; bottom: 112px; }

.pagination-section .page-item.disabled .page-link,
.shop-page .page-item.disabled .page-link {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 1199px) {
    .donx-hero-visual {
        min-height: 640px;
    }

    .donx-laptop-wrap {
        width: min(500px, 82vw);
        bottom: 98px;
    }

    .donx-floating-card {
        width: 204px;
    }

    .card-youtube { left: 0; }
    .card-instagram { right: -4px; }
    .card-music { right: -18px; }
}

@media (max-width: 991px) {
    .donx-hero-visual {
        min-height: 580px;
        margin-inline: auto;
    }

    .donx-light-trail-left,
    .donx-light-trail-right {
        width: 180px;
    }

    .donx-pedestal {
        width: 460px;
        height: 170px;
        bottom: 18px;
    }

    .donx-pedestal .ring-outer { width: 440px; height: 132px; }
    .donx-pedestal .ring-mid { width: 350px; height: 100px; }
    .donx-pedestal .ring-inner { width: 250px; height: 72px; }
    .donx-pedestal-core { width: 226px; height: 68px; }

    .donx-energy-ring {
        width: 420px;
        height: 124px;
        bottom: 70px;
    }

    .donx-laptop-wrap {
        width: min(460px, 86vw);
        transform: translateX(-50%) rotateX(5deg) rotateY(-10deg);
    }

    .donx-laptop-screen {
        height: 332px;
    }

    .donx-floating-card {
        width: 188px;
        min-height: 88px;
        padding: 12px 13px;
    }

    .donx-floating-card strong { font-size: 12px; }
    .donx-floating-card span { font-size: 10px; }
    .card-tiktok { left: -8px; top: 184px; }
    .card-music { right: -8px; top: 214px; }
    .card-web { bottom: 112px; }
    .card-order { bottom: 104px; }
}

@media (max-width: 767px) {
    .home-section.donx-premium-home .text-box h1 {
        font-size: clamp(36px, 10vw, 52px);
    }

    .home-section.donx-premium-home .text-box p {
        font-size: 16px;
        line-height: 1.58;
    }

    .donx-trust-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .donx-hero-visual {
        min-height: 484px;
    }

    .donx-light-trail,
    .card-order,
    .card-music {
        display: none;
    }

    .donx-pedestal {
        width: 352px;
        height: 136px;
        bottom: 14px;
    }

    .donx-pedestal .ring-outer { width: 340px; height: 102px; }
    .donx-pedestal .ring-mid { width: 274px; height: 80px; bottom: 16px; }
    .donx-pedestal .ring-inner { width: 190px; height: 58px; bottom: 28px; }
    .donx-pedestal-core { width: 176px; height: 54px; bottom: 24px; }

    .donx-energy-ring {
        width: 320px;
        height: 94px;
        bottom: 50px;
    }

    .donx-laptop-wrap {
        width: min(360px, 92vw);
        bottom: 70px;
        transform: translateX(-50%) rotateX(3deg) rotateY(-8deg);
    }

    .donx-laptop-screen {
        height: 256px;
        padding: 10px;
    }

    .donx-dashboard-topbar {
        height: 38px;
        padding: 0 10px;
    }

    .donx-dashboard-topbar img {
        max-height: 24px;
    }

    .donx-dashboard-body {
        grid-template-columns: 48px 1fr;
        gap: 10px;
        padding-top: 10px;
    }

    .donx-dashboard-body aside {
        min-height: 182px;
        padding: 10px 8px;
        gap: 8px;
        border-radius: 14px;
    }

    .donx-dashboard-heading strong,
    .dash-card strong {
        font-size: 15px;
    }

    .dash-chart-panel {
        padding: 10px 10px 8px;
        border-radius: 14px;
    }

    .dash-chart-head strong {
        font-size: 18px;
    }

    .dash-chart-canvas {
        height: 74px;
    }

    .dash-chart-axis span,
    .donx-dashboard-heading span,
    .dash-card span,
    .dash-chart-head small {
        font-size: 9px;
    }

    .donx-dashboard-grid {
        gap: 8px;
    }

    .dash-card {
        min-height: 64px;
        padding: 10px;
        border-radius: 13px;
    }

    .mini-chart,
    .bar-chart {
        gap: 4px;
        height: 20px;
        margin-top: 7px;
    }

    .bar-chart i {
        width: 8px;
    }

    .donx-laptop-base {
        height: 28px;
    }

    .donx-laptop-base::before {
        width: 92px;
        height: 8px;
    }

    .donx-laptop-base::after {
        width: 82px;
        height: 7px;
    }

    .donx-laptop-shadow {
        height: 34px;
        width: 84%;
    }

    .donx-floating-card {
        width: 148px;
        min-height: 68px;
        padding: 10px;
        border-radius: 16px;
    }

    .donx-floating-card i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 12px;
        font-size: 14px;
    }

    .donx-floating-card strong {
        font-size: 10.5px;
    }

    .donx-floating-card span {
        font-size: 8.8px;
    }

    .donx-card-wave {
        height: 12px;
        margin-top: 6px;
    }

    .donx-card-wave i:nth-child(1) { width: 12px; }
    .donx-card-wave i:nth-child(2) { width: 18px; }
    .donx-card-wave i:nth-child(3) { width: 14px; }
    .donx-card-wave i:nth-child(4) { width: 18px; }

    .card-youtube { left: 0; top: 8px; }
    .card-tiktok { left: -2px; top: 130px; }
    .card-instagram { right: 0; top: 14px; }
    .card-web { left: 8px; bottom: 76px; }
}


/* Phase 8 final public polish */
.donx-hero-visual {
    overflow: visible;
    isolation: isolate;
}

.donx-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--donx-x, 58%) var(--donx-y, 36%), rgba(56, 206, 255, .14), transparent 24%),
        radial-gradient(circle at 50% 78%, rgba(147, 74, 255, .12), transparent 26%);
    opacity: .95;
    z-index: 0;
    pointer-events: none;
}

.donx-hero-visual > * {
    position: relative;
    z-index: 1;
}

.donx-laptop-wrap {
    animation: donxFloatHero 6.8s ease-in-out infinite;
    will-change: transform;
}

.donx-laptop-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 70%;
    height: 110px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(42, 209, 255, .24), rgba(145, 81, 255, .18) 44%, rgba(0, 0, 0, 0) 72%);
    filter: blur(24px);
    pointer-events: none;
    z-index: -1;
}

.donx-laptop-screen {
    box-shadow: 0 46px 120px rgba(0, 0, 0, .54), 0 0 70px rgba(52, 189, 255, .26), 0 0 130px rgba(140, 78, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.donx-laptop-screen::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(154, 183, 255, .12);
    pointer-events: none;
}

.donx-dashboard-topbar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.03);
}

.donx-dashboard-body {
    grid-template-columns: 94px 1fr;
    align-items: start;
}

.donx-dashboard-sidebar {
    min-height: 260px;
    gap: 8px;
    padding: 14px 10px;
}

.donx-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 6px 8px;
    border-radius: 12px;
    color: #9ea7d4;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    background: rgba(255, 255, 255, .02);
    border: 1px solid transparent;
    transition: .25s ease;
}

.donx-sidebar-item i {
    width: 14px;
    text-align: center;
    color: #bcd7ff;
    font-size: 11px;
}

.donx-sidebar-item span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.donx-sidebar-item.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(116, 224, 255, .12), rgba(161, 84, 255, .12));
    border-color: rgba(138, 173, 255, .20);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18), 0 0 18px rgba(58, 193, 255, .08);
}

.donx-sidebar-item.active i {
    color: #7ee1ff;
}

.donx-pedestal .ring-outer,
.donx-pedestal .ring-mid,
.donx-pedestal .ring-inner {
    animation: donxPulseRing 4.8s ease-in-out infinite;
}

.donx-pedestal .ring-mid { animation-delay: .35s; }
.donx-pedestal .ring-inner { animation-delay: .7s; }

.donx-energy-ring {
    animation: donxPulseRing 3.8s ease-in-out infinite;
}

.donx-floating-card {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.card-youtube, .card-web, .card-instagram { animation: donxFloatCardA 7s ease-in-out infinite; }
.card-tiktok, .card-music, .card-order { animation: donxFloatCardB 8s ease-in-out infinite; }
.card-tiktok { animation-delay: .4s; }
.card-instagram { animation-delay: .7s; }
.card-web { animation-delay: 1s; }
.card-music { animation-delay: 1.2s; }
.card-order { animation-delay: 1.5s; }

@keyframes donxFloatHero {
    0%, 100% { transform: translateX(-50%) rotateX(7deg) rotateY(-14deg) rotateZ(-1.2deg) translateY(0); }
    50% { transform: translateX(-50%) rotateX(7deg) rotateY(-14deg) rotateZ(-1.2deg) translateY(-10px); }
}

@keyframes donxPulseRing {
    0%, 100% { opacity: .92; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.03); }
}

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

@keyframes donxFloatCardB {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.achievement-section.donx-counter-upgrade .container {
    background: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.donx-counter-shell {
    padding: 52px 30px 34px;
    background:
        linear-gradient(180deg, rgba(13, 17, 52, .92), rgba(6, 8, 28, .94)),
        radial-gradient(circle at 50% 10%, rgba(147, 74, 255, .10), transparent 24%);
}

.donx-counter-shell::before {
    background:
        radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 8%), rgba(47, 208, 255, .12), transparent 26%),
        radial-gradient(circle at 82% 16%, rgba(147, 74, 255, .10), transparent 22%),
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: auto, auto, 20px 20px, 20px 20px;
    mask-image: none;
    opacity: 1;
}

.donx-counter-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 12, 36, 0) 0%, rgba(8, 12, 36, .06) 24%, rgba(8, 12, 36, .38) 72%, rgba(8, 12, 36, .82) 100%),
        url(../img/map2.png) center 44px / 82% auto no-repeat;
    opacity: .26;
    pointer-events: none;
}

.donx-counter-shell > * {
    position: relative;
    z-index: 1;
}

.donx-counter-card {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.shop-top-card,
.shop-show-card,
.shop-buy-card,
.shop-card,
.shop-related-item {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.shop-card,
.shop-related-item {
    border-radius: 22px !important;
    border: 1px solid rgba(132, 155, 255, .16) !important;
    box-shadow: 0 24px 68px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.025) inset, 0 0 34px rgba(60,190,255,.06);
}

.shop-card::before,
.shop-related-item::before {
    opacity: 1 !important;
    background:
        linear-gradient(118deg, rgba(255,255,255,.09), rgba(255,255,255,0) 26%),
        radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 0%), rgba(46,204,255,.12), transparent 36%);
}

.shop-card::after,
.shop-related-item::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.03);
    pointer-events: none;
}

.shop-card:hover,
.shop-related-item:hover {
    border-color: rgba(87, 220, 255, .34) !important;
    box-shadow: 0 30px 84px rgba(0,0,0,.34), 0 0 42px rgba(60,190,255,.10), 0 0 56px rgba(149,79,255,.08);
}

.shop-card-image,
.shop-show-image {
    background: radial-gradient(circle at 50% 16%, rgba(255,255,255,.06), rgba(255,255,255,0) 48%), rgba(10,8,36,.72) !important;
}

.shop-card-image::after,
.shop-show-image::after {
    opacity: .9;
}

.shop-card-body {
    padding: 20px !important;
    gap: 14px !important;
}

.shop-card h5 a,
.shop-related-item h6 a {
    color: #fff !important;
}

.shop-card p,
.shop-related-item p {
    color: #c1caec !important;
}

.shop-price,
.shop-show-price {
    color: #fff !important;
    text-shadow: 0 0 18px rgba(68, 203, 255, .12);
}

.shop-stock-badge,
.shop-badge {
    border-color: rgba(138, 173, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.login-section {
    position: relative;
    overflow: hidden;
}

.login-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(47,208,255,.08), transparent 24%),
        radial-gradient(circle at 80% 16%, rgba(147,74,255,.08), transparent 22%);
    pointer-events: none;
}

.login-section .container {
    position: relative;
    z-index: 1;
}

.login-section .text-box,
.login-section .form-content {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(122,151,255,.14);
    background:
        radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 0%), rgba(38,183,255,.10), transparent 34%),
        linear-gradient(145deg, rgba(18,22,64,.84), rgba(8,10,34,.90)) !important;
    box-shadow: 0 28px 78px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.login-section .text-box::after,
.login-section .form-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--donx-x, 50%) var(--donx-y, 0%), rgba(38,183,255,.12), transparent 32%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.login-section .text-box:hover::after,
.login-section .form-content:hover::after {
    opacity: 1;
}

.login-section .text-box > *,
.login-section .form-content > * {
    position: relative;
    z-index: 1;
}

.login-section .text-box {
    padding: 38px !important;
}

.login-section .form-content {
    padding: 28px !important;
}

@media (hover: none), (pointer: coarse) {
    .donx-laptop-wrap,
    .card-youtube, .card-tiktok, .card-instagram, .card-web, .card-music, .card-order,
    .donx-pedestal .ring-outer, .donx-pedestal .ring-mid, .donx-pedestal .ring-inner,
    .donx-energy-ring {
        animation: none !important;
    }
}

@media (max-width: 991px) {
    .donx-laptop-wrap {
        animation-duration: 6s;
    }
}

@media (max-width: 767px) {
    .donx-dashboard-body {
        grid-template-columns: 62px 1fr;
    }

    .donx-dashboard-sidebar {
        min-height: 180px;
        padding: 10px 7px;
        gap: 6px;
    }

    .donx-sidebar-item {
        justify-content: center;
        min-height: 22px;
        padding: 5px;
    }

    .donx-sidebar-item span {
        display: none;
    }

    .donx-counter-shell {
        padding: 34px 18px 22px;
    }

    .donx-counter-shell::after {
        background:
            linear-gradient(180deg, rgba(8, 12, 36, .08) 0%, rgba(8, 12, 36, .16) 35%, rgba(8, 12, 36, .52) 72%, rgba(8, 12, 36, .84) 100%),
            url(../img/map2.png) center 26px / 112% auto no-repeat;
        opacity: .16;
    }

    .shop-card,
    .shop-related-item {
        border-radius: 18px !important;
    }

    .shop-card-body,
    .shop-show-card,
    .shop-buy-card,
    .shop-top-card,
    .login-section .text-box,
    .login-section .form-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* DonXtraBoost hero rebuild patch - reference laptop layout */
.home-section.donx-premium-home.donx-reference-home{min-height:auto!important;height:auto!important;padding:114px 0 34px!important;overflow:hidden!important}.donx-reference-home .donx-reference-overlay,.donx-reference-home .container,.donx-reference-home .donx-reference-row{height:auto!important;min-height:0!important}.donx-reference-home .donx-reference-row{position:relative;z-index:3}.donx-reference-home .donx-reference-copy{max-width:620px;padding:0!important;margin:0!important}.donx-reference-home .donx-hero-badge{margin-bottom:16px}.donx-reference-home .text-box h1{max-width:660px;font-size:clamp(42px,4.75vw,70px)!important;line-height:1.03!important;margin-bottom:18px!important}.donx-reference-home .text-box p{max-width:600px;font-size:17px!important;line-height:1.58!important}.donx-reference-home .donx-hero-actions{margin:24px 0 24px!important}.donx-reference-home .donx-trust-stats{margin-top:0!important}.donx-reference-visual{position:relative;width:min(760px,100%);min-height:535px;margin-left:auto;perspective:1200px;transform-style:preserve-3d;isolation:isolate}.donx-ref-glow,.donx-ref-wire,.donx-reference-visual:before,.donx-reference-visual:after{position:absolute;content:"";pointer-events:none}.donx-reference-visual:before{inset:0;background:radial-gradient(circle at 54% 42%,rgba(61,213,255,.18),transparent 26%),radial-gradient(circle at 52% 66%,rgba(139,61,255,.20),transparent 30%);filter:blur(3px);opacity:.95;z-index:0}.donx-reference-visual:after{left:50%;bottom:24px;width:590px;height:158px;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(39,199,255,.35);background:radial-gradient(ellipse at center,rgba(45,210,255,.18),rgba(139,61,255,.16) 42%,transparent 73%);box-shadow:0 0 46px rgba(39,199,255,.22),inset 0 0 36px rgba(139,61,255,.22);z-index:1}.donx-ref-glow-one{width:260px;height:260px;right:22%;top:4%;border-radius:50%;background:rgba(38,183,255,.20);filter:blur(54px);z-index:0}.donx-ref-glow-two{width:340px;height:340px;right:2%;bottom:0;border-radius:50%;background:rgba(139,61,255,.22);filter:blur(64px);z-index:0}.donx-ref-wire{height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(89,220,255,.82),rgba(176,64,255,.80),transparent);box-shadow:0 0 28px rgba(57,203,255,.28);opacity:.68;z-index:2}.wire-left{width:275px;left:52px;top:132px;transform:rotate(-24deg)}.wire-right{width:310px;right:18px;top:155px;transform:rotate(17deg)}.wire-low{width:430px;left:50%;bottom:84px;transform:translateX(-50%);opacity:.45}.donx-ref-laptop{position:absolute;left:50%;top:116px;width:min(575px,76vw);transform:translateX(-48%) rotateX(6deg) rotateY(-13deg) rotateZ(-1deg);transform-style:preserve-3d;z-index:5;animation:donxRefLaptopFloat 6.8s ease-in-out infinite}.donx-ref-screen{position:relative;min-height:344px;padding:14px;overflow:hidden;border-radius:26px 26px 15px 15px;border:1px solid rgba(147,172,255,.36);background:linear-gradient(155deg,rgba(15,22,63,.99),rgba(7,10,31,.99)),radial-gradient(circle at 23% 0%,rgba(63,214,255,.14),transparent 33%);box-shadow:0 48px 108px rgba(0,0,0,.54),0 0 62px rgba(55,201,255,.24),inset 0 1px 0 rgba(255,255,255,.13)}.donx-ref-screen:before{content:"";position:absolute;inset:-36% -22% auto auto;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(154,75,255,.32),transparent 67%);filter:blur(10px)}.donx-ref-screen:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 26%,transparent 68%,rgba(255,255,255,.035));pointer-events:none}.donx-ref-topbar,.donx-ref-dashboard,.donx-ref-dashboard main,.donx-ref-dashboard aside,.donx-ref-headline,.donx-ref-metrics,.donx-ref-chart,.donx-ref-mini-grid{position:relative;z-index:2}.donx-ref-topbar{height:48px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.donx-ref-topbar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.36)}.donx-ref-topbar img{max-height:35px;margin-left:auto;filter:drop-shadow(0 0 14px rgba(45,206,255,.52))}.donx-ref-topbar small{color:#a9b6f1;font-size:10px;font-weight:800}.donx-ref-dashboard{display:grid;grid-template-columns:88px 1fr;gap:14px;padding-top:14px}.donx-ref-dashboard aside{display:flex;flex-direction:column;gap:9px;min-height:246px;padding:12px 9px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.donx-ref-dashboard aside div{display:flex;align-items:center;gap:6px;min-height:28px;padding:0 7px;border-radius:10px;color:#9aa8dc;font-size:9px;font-weight:800}.donx-ref-dashboard aside div.active{color:#fff;background:linear-gradient(90deg,rgba(39,200,255,.15),rgba(139,61,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.donx-ref-dashboard aside i{color:#54d6ff;font-size:11px}.donx-ref-headline{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.donx-ref-headline span,.donx-ref-metrics span,.donx-ref-chart span,.donx-ref-mini-grid span{display:block;color:#9ca8df;font-size:11px;line-height:1.2}.donx-ref-headline strong{display:block;color:#fff;font-size:23px;line-height:1.05}.donx-ref-headline i{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#35d5ff;background:rgba(38,183,255,.10)}.donx-ref-metrics,.donx-ref-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.donx-ref-metrics div,.donx-ref-mini-grid div,.donx-ref-chart{border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.026));box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}.donx-ref-metrics div,.donx-ref-mini-grid div{min-height:70px;padding:12px;border-radius:15px}.donx-ref-metrics strong,.donx-ref-mini-grid strong{display:block;margin-top:4px;color:#fff;font-size:20px;line-height:1}.donx-ref-metrics div:nth-child(2) strong{color:#71ffaa}.donx-ref-chart{position:relative;overflow:hidden;margin:10px 0;padding:12px 12px 8px;border-radius:16px}.donx-ref-chart:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:34px 34px;opacity:.45;pointer-events:none}.donx-ref-chart .chart-title{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.donx-ref-chart .chart-title strong{color:#fff;font-size:15px}.donx-ref-chart svg{position:relative;z-index:2;width:100%;height:118px;margin-top:2px;filter:drop-shadow(0 0 16px rgba(63,210,255,.18))}.donx-ref-base{position:relative;width:114%;height:38px;margin-left:-7%;border-radius:0 0 58px 58px;background:linear-gradient(180deg,#7281c4,#2b3263 38%,#0a0d25 84%);box-shadow:0 26px 58px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.20);z-index:4}.donx-ref-base:before{content:"";position:absolute;left:50%;top:6px;width:158px;height:12px;transform:translateX(-50%);border-radius:0 0 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03))}.donx-ref-platform{position:absolute;left:50%;bottom:-54px;width:575px;height:142px;transform:translateX(-50%) rotateX(64deg);transform-style:preserve-3d;z-index:-1}.donx-ref-platform span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(52,207,255,.38);box-shadow:0 0 30px rgba(52,207,255,.24),inset 0 0 28px rgba(139,61,255,.20)}.donx-ref-platform span:nth-child(2){inset:22px 58px;border-color:rgba(155,83,255,.30)}.donx-ref-platform span:nth-child(3){inset:42px 122px;border-color:rgba(66,218,255,.28)}.donx-ref-shadow{width:86%;height:48px;margin:-6px auto 0;border-radius:50%;background:rgba(0,0,0,.48);filter:blur(17px)}.donx-ref-card{position:absolute;z-index:8;display:flex;align-items:center;gap:12px;width:216px;min-height:86px;padding:13px 14px;border-radius:20px;border:1px solid rgba(152,176,255,.26);background:linear-gradient(145deg,rgba(15,21,59,.82),rgba(12,8,45,.68));box-shadow:0 22px 62px rgba(0,0,0,.36),0 0 30px rgba(139,61,255,.15),inset 0 1px 0 rgba(255,255,255,.11);backdrop-filter:blur(20px);animation:donxRefCardFloat 5.8s ease-in-out infinite;transform-style:preserve-3d}.donx-ref-card i{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:15px;color:#fff;font-size:18px;background:linear-gradient(135deg,rgba(139,61,255,.96),rgba(38,183,255,.84));box-shadow:0 0 24px rgba(38,183,255,.24)}.donx-ref-card strong{display:block;color:#fff;font-size:13px;line-height:1.18;margin-bottom:4px}.donx-ref-card span{display:block;color:#aab4e5;font-size:10.5px;line-height:1.34}.donx-ref-card em{display:flex;align-items:end;gap:4px;height:15px;margin-top:8px;font-style:normal}.donx-ref-card em b{display:block;width:20px;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(61,213,255,.95),rgba(169,77,255,.95))}.donx-ref-card em b:nth-child(2){width:28px;height:7px}.donx-ref-card em b:nth-child(3){width:22px;height:5px}.donx-ref-card em b:nth-child(4){width:30px;height:8px}.ref-youtube{left:60px;top:22px;transform:rotate(-7deg)}.ref-tiktok{left:24px;top:154px;transform:rotate(3deg);animation-delay:.45s}.ref-web{left:8px;top:292px;transform:rotate(-2deg);animation-delay:.9s}.ref-instagram{right:-6px;top:42px;transform:rotate(-8deg);animation-delay:1.15s}.ref-music{right:0;top:190px;transform:rotate(2deg);animation-delay:.7s}.ref-order{right:22px;top:342px;transform:rotate(4deg);animation-delay:1.55s}.ref-youtube i{background:linear-gradient(135deg,#ff174c,#ff6b5f)}.ref-tiktok i{background:linear-gradient(135deg,#111827,#2dd4ff 48%,#f348ff)}.ref-instagram i{background:linear-gradient(135deg,#ffb703,#ff386d 46%,#804cff)}.ref-order i{background:linear-gradient(135deg,#2ad982,#21b5ff)}@keyframes donxRefLaptopFloat{0%,100%{transform:translateX(-48%) rotateX(6deg) rotateY(-13deg) rotateZ(-1deg) translateY(0)}50%{transform:translateX(-48%) rotateX(6deg) rotateY(-13deg) rotateZ(-1deg) translateY(-8px)}}@keyframes donxRefCardFloat{0%,100%{translate:0 0}50%{translate:0 -13px}}.donx-reference-visual:hover .donx-ref-laptop{animation-play-state:paused;filter:brightness(1.05)}.donx-reference-visual:hover .donx-ref-card{filter:brightness(1.06)}
@media (min-width:1400px){.donx-reference-visual{min-height:548px}.donx-ref-laptop{width:600px;top:112px}}
@media (max-width:1199px){.home-section.donx-premium-home.donx-reference-home{padding-top:108px!important}.donx-reference-visual{min-height:510px}.donx-ref-laptop{width:min(500px,78vw);top:122px}.donx-ref-screen{min-height:322px}.donx-ref-card{width:190px;min-height:78px}.ref-instagram{right:-2px}.ref-music{right:-2px}.ref-order{right:16px;top:326px}}
@media (max-width:991px){.home-section.donx-premium-home.donx-reference-home{padding:105px 0 52px!important}.donx-reference-home .donx-reference-copy{text-align:center;margin-inline:auto!important}.donx-reference-home .text-box h1,.donx-reference-home .text-box p{margin-left:auto;margin-right:auto}.donx-reference-home .donx-hero-actions{justify-content:center}.donx-reference-home .donx-trust-stats{margin-left:auto;margin-right:auto}.donx-reference-visual{min-height:560px;margin:8px auto 0;width:min(680px,100%)}.donx-ref-laptop{width:min(500px,82vw);top:120px}.ref-youtube{left:44px;top:14px}.ref-tiktok{left:20px;top:150px}.ref-web{left:30px;top:306px}.ref-instagram{right:36px;top:22px}.ref-music{right:26px;top:176px}.ref-order{right:36px;top:330px}}
@media (max-width:767px){.home-section.donx-premium-home.donx-reference-home{padding:92px 0 38px!important}.donx-reference-home .text-box h1{font-size:clamp(36px,10.3vw,52px)!important}.donx-reference-home .text-box p{font-size:15.5px!important;line-height:1.55!important}.donx-reference-visual{min-height:468px;width:100%;overflow:visible}.donx-reference-visual:after{width:355px;height:104px;bottom:22px}.donx-ref-wire,.ref-music,.ref-order{display:none}.donx-ref-laptop{width:min(355px,91vw);top:118px;transform:translateX(-50%) rotateX(4deg) rotateY(-8deg) rotateZ(-.6deg)}@keyframes donxRefLaptopFloat{0%,100%{transform:translateX(-50%) rotateX(4deg) rotateY(-8deg) rotateZ(-.6deg) translateY(0)}50%{transform:translateX(-50%) rotateX(4deg) rotateY(-8deg) rotateZ(-.6deg) translateY(-7px)}}.donx-ref-screen{min-height:246px;padding:10px;border-radius:20px 20px 12px 12px}.donx-ref-topbar{height:36px;padding:0 10px;border-radius:13px}.donx-ref-topbar span{width:7px;height:7px}.donx-ref-topbar img{max-height:25px}.donx-ref-topbar small{display:none}.donx-ref-dashboard{grid-template-columns:44px 1fr;gap:9px;padding-top:9px}.donx-ref-dashboard aside{min-height:186px;gap:7px;padding:9px 6px;border-radius:13px}.donx-ref-dashboard aside div{min-height:22px;justify-content:center;padding:0}.donx-ref-dashboard aside span{display:none}.donx-ref-headline{margin-bottom:8px}.donx-ref-headline span,.donx-ref-metrics span,.donx-ref-chart span,.donx-ref-mini-grid span{font-size:8.5px}.donx-ref-headline strong{font-size:15px}.donx-ref-headline i{width:31px;height:31px;border-radius:11px;font-size:11px}.donx-ref-metrics,.donx-ref-mini-grid{gap:7px}.donx-ref-metrics div,.donx-ref-mini-grid div{min-height:52px;padding:8px;border-radius:11px}.donx-ref-metrics strong,.donx-ref-mini-grid strong{font-size:13px}.donx-ref-chart{margin:7px 0;padding:8px;border-radius:12px}.donx-ref-chart .chart-title strong{font-size:10px}.donx-ref-chart svg{height:64px}.donx-ref-base{height:28px;border-radius:0 0 36px 36px}.donx-ref-base:before{width:92px;height:8px}.donx-ref-platform{width:350px;height:92px;bottom:-38px}.donx-ref-card{width:148px;min-height:66px;padding:9px;border-radius:15px;gap:8px}.donx-ref-card i{flex-basis:33px;width:33px;height:33px;border-radius:11px;font-size:14px}.donx-ref-card strong{font-size:10px;margin-bottom:2px}.donx-ref-card span{font-size:8.3px}.donx-ref-card em{height:10px;margin-top:5px;gap:3px}.donx-ref-card em b{width:12px;height:3px}.donx-ref-card em b:nth-child(2){width:16px;height:5px}.donx-ref-card em b:nth-child(3){width:14px;height:4px}.donx-ref-card em b:nth-child(4){width:17px;height:5px}.ref-youtube{left:2px;top:18px}.ref-instagram{right:0;top:22px}.ref-tiktok{left:0;top:230px}.ref-web{right:8px;left:auto;top:286px}}
@media (max-width:420px){.donx-reference-visual{min-height:440px}.donx-ref-laptop{width:min(320px,92vw);top:116px}.donx-ref-screen{min-height:226px}.donx-ref-card{width:138px}.ref-web{top:276px}}


/* ===== Luxe laptop hero rebuild (isolated / no old laptop classes) ===== */
.home-section.donx-premium-home.donx-luxe-hero-shell {
    min-height: auto;
    padding: 136px 0 58px;
    overflow: hidden;
}

.home-section.donx-premium-home.donx-luxe-hero-shell > .overlay,
.home-section.donx-premium-home.donx-luxe-hero-shell > .overlay > .container,
.home-section.donx-premium-home.donx-luxe-hero-shell > .overlay > .container > .row {
    height: auto !important;
    min-height: 0 !important;
}

.home-section.donx-premium-home.donx-luxe-hero-shell > .overlay > .container > .row {
    align-items: center !important;
}

.donx-luxe-hero-shell .donx-hero-copy {
    position: relative;
    z-index: 3;
}

.donx-luxe-scene {
    position: relative;
    min-height: 620px;
    max-width: 760px;
    margin-left: auto;
    isolation: isolate;
    perspective: 1400px;
}

.donx-luxe-scene::before,
.donx-luxe-scene::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.donx-luxe-scene::before {
    inset: 3% -2% 2% 3%;
    background:
        radial-gradient(circle at 53% 36%, rgba(160, 72, 255, .24), transparent 28%),
        radial-gradient(circle at 66% 57%, rgba(43, 205, 255, .18), transparent 25%),
        radial-gradient(circle at 50% 82%, rgba(54, 223, 255, .16), transparent 31%);
    filter: blur(6px);
}

.donx-luxe-scene::after {
    right: -8%;
    top: 8%;
    width: 610px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 55, 255, .14), rgba(14, 10, 45, 0) 68%);
    filter: blur(24px);
}

.donx-luxe-smoke {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(134, 76, 255, .24), rgba(36, 199, 255, .10) 34%, transparent 70%);
    filter: blur(18px);
    opacity: .68;
    z-index: 1;
    animation: donxLuxeSmoke 9s ease-in-out infinite;
}

.donx-luxe-smoke.smoke-a { width: 430px; height: 160px; left: 92px; bottom: 82px; transform: rotate(-4deg); }
.donx-luxe-smoke.smoke-b { width: 330px; height: 130px; right: 28px; top: 138px; animation-delay: 1.4s; }

.donx-luxe-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #93ebff;
    box-shadow: 0 0 18px #47d8ff, 0 0 32px rgba(174, 77, 255, .52);
    z-index: 1;
    animation: donxLuxeSpark 4.8s ease-in-out infinite;
}

.spark-a { left: 24%; top: 8%; }
.spark-b { right: 12%; top: 18%; animation-delay: 1.2s; }
.spark-c { right: 26%; bottom: 18%; animation-delay: 2.2s; }

.donx-luxe-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: .82;
}

.donx-luxe-links path {
    fill: none;
    stroke: url(#donxLuxeLink);
    stroke-width: 2;
    filter: drop-shadow(0 0 9px rgba(69, 213, 255, .46));
    stroke-dasharray: 9 14;
    animation: donxLuxeDash 8s linear infinite;
}

.donx-luxe-platform {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 610px;
    height: 190px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.donx-luxe-platform .ring,
.donx-luxe-platform .ring-core {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.donx-luxe-platform .ring {
    border: 2px solid rgba(52, 210, 255, .32);
    background: radial-gradient(ellipse at center, rgba(14, 22, 68, .68), rgba(6, 8, 31, 0) 72%);
    box-shadow: 0 0 32px rgba(53, 210, 255, .20), inset 0 0 24px rgba(143, 75, 255, .16);
    animation: donxLuxePulse 4.8s ease-in-out infinite;
}

.donx-luxe-platform .ring-outer { bottom: 0; width: 590px; height: 150px; }
.donx-luxe-platform .ring-mid { bottom: 22px; width: 460px; height: 116px; border-color: rgba(160, 76, 255, .30); animation-delay: .3s; }
.donx-luxe-platform .ring-inner { bottom: 44px; width: 320px; height: 78px; animation-delay: .65s; }
.donx-luxe-platform .ring-core {
    bottom: 34px;
    width: 330px;
    height: 86px;
    background: radial-gradient(ellipse at center, rgba(44, 217, 255, .36), rgba(145, 73, 255, .22) 48%, transparent 74%);
    filter: blur(5px);
}

.donx-luxe-laptop {
    position: absolute;
    left: 50%;
    bottom: 96px;
    width: min(570px, 86vw);
    transform: translateX(-50%) rotateX(8deg) rotateY(-15deg) rotateZ(-1deg);
    transform-style: preserve-3d;
    z-index: 4;
    animation: donxLuxeFloat 7s ease-in-out infinite;
}

.donx-luxe-screen-shell {
    position: relative;
    height: 352px;
    border-radius: 28px 28px 16px 16px;
    padding: 13px;
    background: linear-gradient(145deg, rgba(33, 39, 82, .92), rgba(5, 8, 29, .98));
    border: 1px solid rgba(155, 178, 255, .32);
    box-shadow:
        0 44px 110px rgba(0,0,0,.56),
        0 0 54px rgba(56, 209, 255, .22),
        0 0 110px rgba(142, 75, 255, .20),
        inset 0 1px 0 rgba(255,255,255,.13);
    overflow: hidden;
}

.donx-luxe-screen-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(122deg, rgba(255,255,255,.12), transparent 28%, transparent 62%, rgba(255,255,255,.04));
    pointer-events: none;
    z-index: 3;
}

.donx-luxe-screen-glow {
    position: absolute;
    right: -60px;
    top: -70px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(166, 76, 255, .34), transparent 66%);
    filter: blur(10px);
    z-index: 0;
}

.donx-luxe-screen {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: 20px 20px 10px 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 8%, rgba(142, 75, 255, .18), transparent 34%),
        linear-gradient(160deg, rgba(12, 18, 55, .98), rgba(5, 8, 30, .98));
    border: 1px solid rgba(255,255,255,.06);
}

.donx-luxe-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.035);
}

.donx-luxe-topbar img {
    max-height: 42px;
    filter: drop-shadow(0 0 14px rgba(58, 211, 255, .42));
}

.donx-luxe-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c7d1ff;
    font-size: 11px;
    font-weight: 700;
}

.donx-luxe-user span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #43ddff, #ad4dff);
    box-shadow: 0 0 18px rgba(67, 221, 255, .32);
}

.donx-luxe-dashboard {
    display: grid;
    grid-template-columns: 100px 1fr;
    height: calc(100% - 64px);
}

.donx-luxe-dashboard aside {
    padding: 14px 10px;
    border-right: 1px solid rgba(255,255,255,.06);
    background: rgba(4, 7, 29, .36);
}

.donx-luxe-dashboard aside b {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    padding: 6px 7px;
    margin-bottom: 6px;
    border-radius: 10px;
    color: #9ea9db;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.donx-luxe-dashboard aside b:first-child {
    color: #fff;
    background: linear-gradient(135deg, rgba(49, 211, 255, .13), rgba(169, 77, 255, .13));
    border: 1px solid rgba(149, 177, 255, .16);
}

.donx-luxe-dashboard aside i {
    width: 12px;
    text-align: center;
    color: #84e3ff;
    flex: 0 0 12px;
}

.donx-luxe-dashboard aside span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donx-luxe-dashboard main {
    padding: 16px;
    min-width: 0;
}

.donx-luxe-dash-title span,
.metric-card span {
    display: block;
    color: #9aa8dd;
    font-size: 11px;
    line-height: 1.2;
}

.donx-luxe-dash-title strong,
.metric-card strong {
    display: block;
    color: #fff;
    line-height: 1;
    letter-spacing: -.03em;
}

.donx-luxe-dash-title strong {
    font-size: 20px;
    margin-top: 4px;
}

.donx-luxe-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.metric-card,
.chart-card {
    min-height: 64px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.metric-card {
    padding: 11px 12px;
}

.metric-card strong {
    font-size: 22px;
    margin-top: 7px;
}

.metric-card.growth strong { color: #54f49f; }
.metric-card.rate strong { color: #9df0dc; }
.metric-card.time strong { color: #93eaff; }

.chart-card {
    grid-column: span 2;
    height: 92px;
    position: relative;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    background-size: 24px 24px, 24px 24px, auto;
}

.chart-card svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
}

.donx-luxe-keyboard {
    position: relative;
    height: 92px;
    margin: -2px auto 0;
    width: 96%;
    border-radius: 0 0 34px 34px;
    background:
        linear-gradient(180deg, rgba(79, 79, 132, .92), rgba(22, 23, 60, .98) 42%, rgba(8, 8, 31, .98)),
        radial-gradient(ellipse at 50% 0%, rgba(116, 80, 255, .38), transparent 68%);
    border: 1px solid rgba(155, 178, 255, .20);
    border-top: 0;
    box-shadow: 0 28px 68px rgba(0,0,0,.46), 0 14px 32px rgba(44, 210, 255, .13);
    transform: rotateX(64deg) translateY(-6px);
    transform-origin: top center;
    overflow: hidden;
}

.donx-luxe-keyboard::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 16px;
    height: 32px;
    border-radius: 10px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 18px, rgba(255,255,255,.03) 18px 24px),
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    opacity: .58;
}

.donx-luxe-keyboard .trackpad {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 126px;
    height: 26px;
    transform: translateX(-50%);
    border-radius: 9px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.donx-luxe-front-lip {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 104%;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 0 0 50% 50%;
    background: linear-gradient(180deg, rgba(82, 91, 165, .95), rgba(14, 16, 54, .98));
    box-shadow: 0 20px 45px rgba(0,0,0,.45), 0 0 24px rgba(68, 218, 255, .18);
}

.donx-luxe-card {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 204px;
    min-height: 82px;
    padding: 14px 15px;
    border: 1px solid rgba(159, 181, 255, .24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(12, 19, 58, .82), rgba(11, 7, 44, .72));
    box-shadow: 0 18px 54px rgba(0,0,0,.34), 0 0 24px rgba(142, 75, 255, .15), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.donx-luxe-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 218, 255, .42), rgba(171, 77, 255, .36), rgba(59, 218, 255, .16));
    opacity: .38;
    z-index: -1;
    filter: blur(1px);
}

.donx-luxe-card i {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex: 0 0 42px;
    background: linear-gradient(135deg, #8c4cff, #36d5ff);
    box-shadow: 0 10px 26px rgba(53, 213, 255, .22);
}

.donx-luxe-card.card-yt i { background: linear-gradient(135deg, #ff2f38, #9a2fff); }
.donx-luxe-card.card-ig i { background: radial-gradient(circle at 32% 28%, #ffdf75, #ff4cb9 42%, #734dff 78%); }
.donx-luxe-card.card-order i { background: linear-gradient(135deg, #38e898, #26a5ff); }
.donx-luxe-card.card-music i { background: linear-gradient(135deg, #e04fff, #7a4dff); }

.donx-luxe-card strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.donx-luxe-card span,
.donx-luxe-card small {
    display: block;
    color: #aeb8e5;
    font-size: 10.5px;
    line-height: 1.35;
}

.donx-luxe-card em {
    display: block;
    width: 112px;
    height: 14px;
    margin-top: 8px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #35d9ff 0 30%, transparent 30% 38%, #a34dff 38% 62%, transparent 62% 70%, #35d9ff 70% 100%);
    filter: drop-shadow(0 0 7px rgba(55, 217, 255, .35));
    opacity: .9;
}

.donx-luxe-card.card-yt { left: 40px; top: 44px; animation: donxLuxeCardA 7.1s ease-in-out infinite; }
.donx-luxe-card.card-tt { left: 10px; top: 184px; animation: donxLuxeCardB 7.8s ease-in-out infinite .35s; }
.donx-luxe-card.card-web { left: 38px; top: 334px; animation: donxLuxeCardA 8s ease-in-out infinite .7s; }
.donx-luxe-card.card-ig { right: 18px; top: 66px; animation: donxLuxeCardB 7.4s ease-in-out infinite .55s; }
.donx-luxe-card.card-music { right: 4px; top: 228px; animation: donxLuxeCardA 7.9s ease-in-out infinite .85s; }
.donx-luxe-card.card-order { right: 34px; top: 388px; animation: donxLuxeCardB 8.4s ease-in-out infinite 1.1s; }

@keyframes donxLuxeFloat {
    0%, 100% { transform: translateX(-50%) rotateX(8deg) rotateY(-15deg) rotateZ(-1deg) translateY(0); }
    50% { transform: translateX(-50%) rotateX(8deg) rotateY(-15deg) rotateZ(-1deg) translateY(-10px); }
}

@keyframes donxLuxePulse {
    0%, 100% { opacity: .88; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.035); }
}

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

@keyframes donxLuxeCardB {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

@keyframes donxLuxeSmoke {
    0%, 100% { opacity: .55; transform: translateY(0) scale(1); }
    50% { opacity: .82; transform: translateY(-10px) scale(1.04); }
}

@keyframes donxLuxeSpark {
    0%, 100% { opacity: .25; transform: translateY(0) scale(.8); }
    50% { opacity: 1; transform: translateY(-16px) scale(1.15); }
}

@keyframes donxLuxeDash {
    to { stroke-dashoffset: -180; }
}

@media (max-width: 1199px) {
    .donx-luxe-scene {
        min-height: 590px;
        max-width: 680px;
    }

    .donx-luxe-laptop {
        width: min(520px, 84vw);
    }

    .donx-luxe-card {
        width: 184px;
        min-height: 76px;
        padding: 12px 13px;
    }

    .donx-luxe-card.card-yt { left: 18px; }
    .donx-luxe-card.card-tt { left: 0; }
    .donx-luxe-card.card-web { left: 18px; }
    .donx-luxe-card.card-ig { right: 6px; }
    .donx-luxe-card.card-music { right: 0; }
    .donx-luxe-card.card-order { right: 18px; }
}

@media (max-width: 991px) {
    .home-section.donx-premium-home.donx-luxe-hero-shell {
        padding: 124px 0 62px;
    }

    .donx-luxe-scene {
        min-height: 560px;
        margin: 12px auto 0;
    }

    .donx-luxe-laptop {
        width: min(540px, 90vw);
        bottom: 92px;
    }

    .donx-luxe-card.card-yt { left: 8px; top: 26px; }
    .donx-luxe-card.card-ig { right: 8px; top: 38px; }
    .donx-luxe-card.card-tt { left: 8px; top: 170px; }
    .donx-luxe-card.card-music { right: 8px; top: 184px; }
    .donx-luxe-card.card-web { left: 20px; top: auto; bottom: 98px; }
    .donx-luxe-card.card-order { right: 20px; top: auto; bottom: 86px; }
}

@media (max-width: 767px) {
    .home-section.donx-premium-home.donx-luxe-hero-shell {
        padding: 116px 0 54px;
    }

    .donx-luxe-scene {
        min-height: 455px;
    }

    .donx-luxe-laptop {
        width: min(430px, 98vw);
        bottom: 62px;
        transform: translateX(-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    .donx-luxe-screen-shell {
        height: 282px;
        border-radius: 22px 22px 12px 12px;
        padding: 9px;
    }

    .donx-luxe-topbar {
        height: 48px;
        padding: 0 12px;
    }

    .donx-luxe-topbar img {
        max-height: 32px;
    }

    .donx-luxe-user strong {
        display: none;
    }

    .donx-luxe-dashboard {
        grid-template-columns: 58px 1fr;
        height: calc(100% - 48px);
    }

    .donx-luxe-dashboard aside {
        padding: 9px 7px;
    }

    .donx-luxe-dashboard aside b {
        justify-content: center;
        min-height: 24px;
        padding: 6px;
        margin-bottom: 5px;
    }

    .donx-luxe-dashboard aside span {
        display: none;
    }

    .donx-luxe-dashboard main {
        padding: 10px;
    }

    .donx-luxe-dash-title strong {
        font-size: 16px;
    }

    .donx-luxe-dash-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-top: 8px;
    }

    .metric-card {
        min-height: 48px;
        padding: 8px;
    }

    .metric-card strong {
        font-size: 16px;
        margin-top: 5px;
    }

    .metric-card.followers,
    .metric-card.time {
        display: none;
    }

    .chart-card {
        height: 76px;
    }

    .donx-luxe-keyboard {
        height: 68px;
    }

    .donx-luxe-platform {
        width: 390px;
        height: 126px;
        bottom: 16px;
    }

    .donx-luxe-platform .ring-outer { width: 380px; height: 102px; }
    .donx-luxe-platform .ring-mid { width: 302px; height: 76px; bottom: 16px; }
    .donx-luxe-platform .ring-inner { width: 220px; height: 52px; bottom: 28px; }
    .donx-luxe-platform .ring-core { width: 228px; height: 58px; bottom: 24px; }

    .donx-luxe-card {
        width: 152px;
        min-height: 64px;
        padding: 10px;
        gap: 9px;
        border-radius: 15px;
    }

    .donx-luxe-card i {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 16px;
        border-radius: 12px;
    }

    .donx-luxe-card strong { font-size: 11px; }
    .donx-luxe-card span, .donx-luxe-card small { font-size: 8.8px; }
    .donx-luxe-card em { width: 78px; height: 10px; margin-top: 5px; }

    .donx-luxe-card.card-yt { left: 0; top: 0; }
    .donx-luxe-card.card-ig { right: 0; top: 4px; }
    .donx-luxe-card.card-tt { left: 0; top: 116px; }
    .donx-luxe-card.card-music { right: 0; top: 120px; }
    .donx-luxe-card.card-web,
    .donx-luxe-card.card-order,
    .donx-luxe-links,
    .donx-luxe-smoke.smoke-b,
    .donx-luxe-spark {
        display: none;
    }
}

/* ===== Final priority layer: reference-style laptop sizing ===== */
.donx-luxe-scene {
    min-height: 690px;
    max-width: 875px;
    width: min(875px, 58vw);
    margin: -14px -58px -22px auto;
    overflow: visible;
    perspective: 1600px;
}

.donx-luxe-scene::before {
    inset: -5% -11% -2% -4%;
    background:
        radial-gradient(circle at 55% 37%, rgba(154, 67, 255, .34), transparent 25%),
        radial-gradient(circle at 58% 63%, rgba(31, 202, 255, .24), transparent 27%),
        radial-gradient(ellipse at 53% 81%, rgba(0, 192, 255, .25), transparent 38%),
        linear-gradient(118deg, transparent 0 44%, rgba(112, 55, 255, .11) 47% 54%, transparent 59% 100%);
    filter: blur(4px);
    animation: donxLuxeAura 10s ease-in-out infinite;
}

.donx-luxe-platform {
    width: 720px;
    height: 218px;
    bottom: 28px;
    transform: translateX(-50%) rotateX(58deg);
}

.donx-luxe-platform::before,
.donx-luxe-platform::after {
    content: "";
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.donx-luxe-platform::before {
    bottom: 24px;
    width: 650px;
    height: 108px;
    background: radial-gradient(ellipse at center, rgba(39, 220, 255, .28), rgba(123, 72, 255, .16) 48%, transparent 72%);
    filter: blur(18px);
}

.donx-luxe-platform::after {
    bottom: 58px;
    width: 330px;
    height: 42px;
    background: linear-gradient(90deg, transparent, rgba(57, 225, 255, .95), rgba(150, 77, 255, .82), transparent);
    box-shadow: 0 0 30px rgba(56, 220, 255, .55), 0 0 70px rgba(148, 77, 255, .36);
    opacity: .86;
}

.donx-luxe-platform .ring {
    border-width: 3px;
    box-shadow: 0 0 38px rgba(53, 210, 255, .34), 0 0 82px rgba(143, 75, 255, .20), inset 0 0 30px rgba(143, 75, 255, .24);
}

.donx-luxe-platform .ring-outer { width: 700px; height: 176px; bottom: 0; }
.donx-luxe-platform .ring-mid { width: 540px; height: 132px; bottom: 26px; }
.donx-luxe-platform .ring-inner { width: 370px; height: 86px; bottom: 50px; }
.donx-luxe-platform .ring-core { width: 390px; height: 96px; bottom: 44px; filter: blur(7px); }

.donx-luxe-laptop {
    bottom: 138px;
    width: min(645px, 43vw);
    transform: translateX(-50%) rotateX(6deg) rotateY(-13deg) rotateZ(-1.2deg);
    filter: drop-shadow(0 34px 70px rgba(0, 0, 0, .56));
}

.donx-luxe-laptop::before {
    content: "";
    position: absolute;
    inset: -22px -18px 70px;
    border-radius: 34px;
    background: radial-gradient(ellipse at center, rgba(40, 215, 255, .18), rgba(143, 75, 255, .13) 42%, transparent 72%);
    filter: blur(18px);
    z-index: -1;
}

.donx-luxe-screen-shell {
    height: 392px;
    border-radius: 30px 30px 15px 15px;
    padding: 15px;
    border-color: rgba(121, 199, 255, .42);
    box-shadow: 0 50px 120px rgba(0,0,0,.62), 0 0 42px rgba(56, 213, 255, .34), 0 0 118px rgba(142, 75, 255, .28), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(167, 104, 255, .14);
}

.donx-luxe-topbar {
    height: 68px;
    padding: 0 22px;
}

.donx-luxe-topbar img {
    max-height: 46px;
}

.donx-luxe-dashboard {
    grid-template-columns: 118px 1fr;
    height: calc(100% - 68px);
}

.donx-luxe-dashboard aside {
    padding: 16px 11px;
}

.donx-luxe-dashboard aside b {
    min-height: 26px;
    font-size: 9.8px;
    margin-bottom: 5px;
}

.donx-luxe-dashboard main {
    padding: 17px 18px;
}

.donx-luxe-dash-grid {
    grid-template-columns: .9fr .9fr 1.2fr;
    gap: 10px;
}

.chart-card {
    grid-column: span 3;
    height: 104px;
}

.metric-card {
    min-height: 67px;
}

.metric-card.followers strong {
    font-size: 18px;
}

.metric-card.bars div {
    height: 32px;
    margin-top: 7px;
    display: flex;
    align-items: end;
    gap: 5px;
}

.metric-card.bars b {
    display: block;
    flex: 1;
    min-width: 5px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #39dbff, #884dff);
    box-shadow: 0 0 12px rgba(60, 220, 255, .26);
}

.metric-card.bars b:nth-child(1) { height: 12px; }
.metric-card.bars b:nth-child(2) { height: 19px; }
.metric-card.bars b:nth-child(3) { height: 24px; }
.metric-card.bars b:nth-child(4) { height: 17px; }
.metric-card.bars b:nth-child(5) { height: 28px; }
.metric-card.bars b:nth-child(6) { height: 32px; }

.donx-luxe-keyboard {
    height: 112px;
    width: 104%;
    transform: rotateX(66deg) translateY(-9px);
}

.donx-luxe-keyboard .trackpad {
    width: 148px;
    height: 30px;
    bottom: 18px;
}

.donx-luxe-front-lip {
    bottom: -7px;
    width: 112%;
    height: 34px;
}

.donx-luxe-card {
    width: 224px;
    min-height: 92px;
    padding: 15px 16px;
    border-color: rgba(137, 203, 255, .32);
}

.donx-luxe-card i {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 21px;
}

.donx-luxe-card.card-yt { left: 36px; top: 52px; }
.donx-luxe-card.card-tt { left: -4px; top: 216px; }
.donx-luxe-card.card-web { left: 32px; top: 386px; }
.donx-luxe-card.card-ig { right: 0; top: 76px; }
.donx-luxe-card.card-music { right: -14px; top: 265px; }
.donx-luxe-card.card-order { right: 24px; top: 456px; }

@keyframes donxLuxeFloat {
    0%, 100% { transform: translateX(-50%) rotateX(6deg) rotateY(-13deg) rotateZ(-1.2deg) translateY(0); }
    50% { transform: translateX(-50%) rotateX(6deg) rotateY(-13deg) rotateZ(-1.2deg) translateY(-13px); }
}

@keyframes donxLuxeAura {
    0%, 100% { opacity: .72; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.025); }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 900px;
        max-width: 900px;
        margin-right: -88px;
    }

    .donx-luxe-laptop {
        width: 675px;
    }
}

/* ===== Interactive glow pass: readable screen, animated borders, pop-out cards ===== */
.donx-luxe-card {
    cursor: pointer;
    will-change: transform, filter, box-shadow;
    transition:
        transform .42s cubic-bezier(.2, .8, .2, 1),
        filter .42s ease,
        box-shadow .42s ease,
        border-color .42s ease;
}

.donx-luxe-card:hover,
.donx-luxe-card:focus-within {
    transform: translate3d(0, -18px, 90px) scale(1.08);
    filter: brightness(1.18) saturate(1.16);
    border-color: rgba(91, 230, 255, .72);
    box-shadow:
        0 34px 74px rgba(0,0,0,.48),
        0 0 34px rgba(55, 225, 255, .50),
        0 0 72px rgba(169, 77, 255, .38),
        inset 0 1px 0 rgba(255,255,255,.22);
    z-index: 12;
}

.donx-luxe-card:hover i,
.donx-luxe-card:focus-within i {
    animation: donxIconPop .68s ease both;
}

.donx-luxe-card:hover em,
.donx-luxe-card:focus-within em {
    animation-duration: 1.1s;
}

@media (min-width: 992px) {
    .donx-luxe-scene {
        width: min(720px, 48vw);
        max-width: 720px;
        transform: translateX(-18px);
    }

    .donx-luxe-laptop {
        width: min(600px, 39vw);
        bottom: 114px;
    }

    .donx-luxe-screen-shell {
        overflow: visible;
        border-color: rgba(118, 218, 255, .62);
        animation: donxLaptopRim 4.6s ease-in-out infinite;
    }

    .donx-luxe-screen-shell::before {
        border-radius: inherit;
        box-shadow:
            inset 0 0 0 1px rgba(89, 229, 255, .16),
            inset 0 0 34px rgba(124, 77, 255, .12);
    }

    .donx-luxe-screen-shell::after {
        box-shadow:
            0 0 24px rgba(58, 225, 255, .36),
            0 0 46px rgba(169, 78, 255, .18);
    }

    .donx-luxe-screen {
        overflow: hidden;
        box-shadow:
            inset 0 0 0 1px rgba(76, 224, 255, .10),
            inset 0 0 44px rgba(2, 5, 22, .78),
            0 0 26px rgba(64, 224, 255, .15);
    }

    .donx-luxe-screen::before,
    .donx-luxe-screen::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 4;
    }

    .donx-luxe-screen::before {
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(90deg, transparent, rgba(61, 226, 255, .20), transparent);
        transform: translateX(-80%);
        animation: donxScreenSweep 5.2s ease-in-out infinite;
        mix-blend-mode: screen;
    }

    .donx-luxe-screen::after {
        left: 12px;
        right: 12px;
        bottom: 10px;
        height: 2px;
        border-radius: 99px;
        background: linear-gradient(90deg, transparent, rgba(55, 226, 255, .95), rgba(174, 77, 255, .72), transparent);
        box-shadow: 0 0 16px rgba(55, 226, 255, .55);
        opacity: .72;
    }

    .donx-luxe-keyboard {
        border-color: rgba(117, 220, 255, .36);
        animation: donxKeyboardGlow 5.6s ease-in-out infinite;
    }

    .donx-luxe-keyboard .key-row b {
        animation: donxKeyBreath 3.8s ease-in-out infinite;
    }

    .donx-luxe-keyboard .key-row b:nth-child(2n) { animation-delay: .35s; }
    .donx-luxe-keyboard .key-row b:nth-child(3n) { animation-delay: .7s; }

    .donx-luxe-platform .ring {
        animation: donxLuxePulse 3.8s ease-in-out infinite, donxRingGlow 6.5s linear infinite;
    }

    .donx-luxe-card {
        width: 178px;
        min-height: 78px;
        padding: 12px 13px;
    }

    .donx-luxe-card.card-yt {
        left: 52px;
        top: 66px;
    }

    .donx-luxe-card.card-tt {
        left: 28px;
        top: 226px;
    }

    .donx-luxe-card.card-ig {
        right: 18px;
        top: 90px;
    }

    .donx-luxe-card.card-music {
        right: 8px;
        top: 286px;
    }

    .donx-luxe-card.card-order {
        right: 44px;
        top: 458px;
    }

    .donx-luxe-card.card-yt:hover { transform: translate3d(-26px, -30px, 120px) rotate(-5deg) scale(1.1); }
    .donx-luxe-card.card-tt:hover { transform: translate3d(-34px, -10px, 120px) rotate(-4deg) scale(1.1); }
    .donx-luxe-card.card-ig:hover { transform: translate3d(28px, -28px, 120px) rotate(5deg) scale(1.1); }
    .donx-luxe-card.card-music:hover { transform: translate3d(34px, -10px, 120px) rotate(4deg) scale(1.1); }
    .donx-luxe-card.card-order:hover { transform: translate3d(22px, 18px, 120px) rotate(3deg) scale(1.1); }

    .donx-luxe-links path {
        stroke-width: 3;
        animation-duration: 3.7s;
        filter:
            drop-shadow(0 0 10px rgba(67, 226, 255, .64))
            drop-shadow(0 0 22px rgba(169, 77, 255, .42));
    }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 735px;
        max-width: 735px;
        transform: translateX(-12px);
    }

    .donx-luxe-laptop {
        width: 620px;
    }
}

@keyframes donxLaptopRim {
    0%, 100% {
        box-shadow:
            0 34px 86px rgba(0,0,0,.58),
            0 0 34px rgba(58, 221, 255, .32),
            0 0 92px rgba(156, 75, 255, .26),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 0 0 1px rgba(169, 104, 255, .18);
    }
    50% {
        box-shadow:
            0 38px 94px rgba(0,0,0,.62),
            0 0 52px rgba(58, 225, 255, .54),
            0 0 126px rgba(177, 82, 255, .40),
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 0 0 1px rgba(89, 229, 255, .26);
    }
}

@keyframes donxKeyboardGlow {
    0%, 100% {
        box-shadow:
            0 42px 70px rgba(0,0,0,.54),
            0 22px 40px rgba(33, 214, 255, .18),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 -28px 50px rgba(1, 3, 18, .58);
    }
    50% {
        box-shadow:
            0 44px 78px rgba(0,0,0,.56),
            0 25px 52px rgba(45, 225, 255, .30),
            inset 0 1px 0 rgba(255,255,255,.28),
            inset 0 -28px 50px rgba(1, 3, 18, .58);
    }
}

@keyframes donxKeyBreath {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.42); }
}

@keyframes donxScreenSweep {
    0%, 42%, 100% { transform: translateX(-86%); opacity: 0; }
    55% { opacity: .72; }
    72% { transform: translateX(86%); opacity: 0; }
}

@keyframes donxRingGlow {
    to { filter: hue-rotate(28deg); }
}

@keyframes donxIconPop {
    0% { transform: translateZ(0) scale(1); }
    45% { transform: translateZ(30px) scale(1.18); }
    100% { transform: translateZ(0) scale(1); }
}

/* ===== v7 spacing pass: purple neon cards pulled outward from screen ===== */
@media (min-width: 992px) {
    .donx-luxe-scene {
        width: min(760px, 50vw);
        max-width: 760px;
        transform: translateX(-26px);
    }

    .donx-luxe-card {
        border-color: rgba(190, 87, 255, .48);
        background:
            radial-gradient(circle at 0% 0%, rgba(190, 78, 255, .24), transparent 40%),
            radial-gradient(circle at 100% 100%, rgba(68, 218, 255, .13), transparent 42%),
            linear-gradient(145deg, rgba(21, 14, 66, .90), rgba(10, 7, 44, .82));
        box-shadow:
            0 24px 64px rgba(0,0,0,.44),
            0 0 34px rgba(187, 78, 255, .30),
            0 0 58px rgba(103, 65, 255, .22),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .donx-luxe-card::before {
        background: linear-gradient(135deg, rgba(204, 86, 255, .58), rgba(117, 69, 255, .36), rgba(59, 218, 255, .18));
        opacity: .52;
    }

    .donx-luxe-card::after {
        background: linear-gradient(90deg, transparent, rgba(207, 83, 255, .70), rgba(72, 224, 255, .38), transparent);
    }

    .donx-luxe-card:hover,
    .donx-luxe-card:focus-within {
        border-color: rgba(214, 96, 255, .82);
        box-shadow:
            0 34px 74px rgba(0,0,0,.48),
            0 0 42px rgba(204, 83, 255, .58),
            0 0 86px rgba(126, 74, 255, .44),
            inset 0 1px 0 rgba(255,255,255,.22);
    }

    .donx-luxe-links path {
        stroke-width: 3.1;
        filter:
            drop-shadow(0 0 12px rgba(205, 78, 255, .72))
            drop-shadow(0 0 28px rgba(115, 68, 255, .52));
    }

    .donx-luxe-screen-shell {
        border-color: rgba(199, 92, 255, .58);
    }

    .donx-luxe-platform .ring {
        border-color: rgba(197, 86, 255, .42);
        box-shadow:
            0 0 42px rgba(184, 77, 255, .40),
            0 0 98px rgba(74, 218, 255, .20),
            inset 0 0 34px rgba(164, 75, 255, .34);
    }

    .donx-luxe-card.card-yt {
        left: -6px;
        top: 68px;
    }

    .donx-luxe-card.card-tt {
        left: -28px;
        top: 222px;
    }

    .donx-luxe-card.card-ig {
        right: -42px;
        top: 92px;
    }

    .donx-luxe-card.card-music {
        right: -58px;
        top: 286px;
    }

    .donx-luxe-card.card-order {
        right: -18px;
        top: 456px;
    }

    .donx-luxe-card.card-yt:hover { transform: translate3d(-34px, -30px, 120px) rotate(-5deg) scale(1.1); }
    .donx-luxe-card.card-tt:hover { transform: translate3d(-42px, -10px, 120px) rotate(-4deg) scale(1.1); }
    .donx-luxe-card.card-ig:hover { transform: translate3d(36px, -28px, 120px) rotate(5deg) scale(1.1); }
    .donx-luxe-card.card-music:hover { transform: translate3d(44px, -10px, 120px) rotate(4deg) scale(1.1); }
    .donx-luxe-card.card-order:hover { transform: translate3d(34px, 18px, 120px) rotate(3deg) scale(1.1); }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 785px;
        max-width: 785px;
        transform: translateX(-18px);
    }

    .donx-luxe-card.card-ig { right: -52px; }
    .donx-luxe-card.card-music { right: -70px; }
    .donx-luxe-card.card-order { right: -28px; }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .donx-luxe-scene {
        width: min(700px, 100%);
        transform: translateX(-6px);
    }

    .donx-luxe-card.card-yt { left: 4px; }
    .donx-luxe-card.card-tt { left: -8px; }
    .donx-luxe-card.card-ig { right: -10px; }
    .donx-luxe-card.card-music { right: -16px; }
    .donx-luxe-card.card-order { right: 4px; }
}

/* ===== v8 Luxe detail overhaul: cyan/purple glow, stronger 3D, data sparks ===== */
@media (min-width: 992px) {
    .donx-luxe-scene {
        --luxe-cyan: #00f2ff;
        --luxe-purple: #bc13fe;
        width: min(750px, 49vw);
        max-width: 750px;
        transform: translateX(-46px);
    }

    .donx-luxe-laptop {
        width: min(610px, 39vw);
        bottom: 114px;
        transform: translateX(-50%) rotateX(2deg) rotateY(-19deg) rotateZ(-1.4deg);
        animation: donxLuxeFloatSoft 8.5s ease-in-out infinite;
    }

    .donx-luxe-platform,
    .donx-luxe-links {
        animation: donxLuxeFloatSoftNoX 8.5s ease-in-out infinite;
    }

    .donx-luxe-screen-shell {
        transform: perspective(1150px) rotateX(-11deg) rotateY(2deg);
        border-color: rgba(188, 19, 254, .72);
        background:
            radial-gradient(circle at 12% 0%, rgba(0, 242, 255, .34), transparent 28%),
            radial-gradient(circle at 92% 8%, rgba(188, 19, 254, .42), transparent 34%),
            linear-gradient(145deg, rgba(60, 65, 137, .94), rgba(5, 8, 31, .99) 40%, rgba(1, 2, 14, .99));
        box-shadow:
            0 38px 92px rgba(0,0,0,.62),
            0 0 42px rgba(0, 242, 255, .40),
            0 0 126px rgba(188, 19, 254, .42),
            inset 0 1px 0 rgba(255,255,255,.24),
            inset 0 0 0 1px rgba(188, 19, 254, .25);
    }

    .donx-luxe-screen-shell::after {
        background: linear-gradient(180deg, rgba(85, 95, 184, .96), rgba(9, 11, 42, .98));
        box-shadow: 0 0 26px rgba(0, 242, 255, .42), 0 0 50px rgba(188, 19, 254, .32);
    }

    .donx-luxe-screen {
        background:
            linear-gradient(rgba(255,255,255,.036) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
            radial-gradient(circle at 76% 12%, rgba(188, 19, 254, .28), transparent 30%),
            radial-gradient(circle at 30% 88%, rgba(0, 242, 255, .16), transparent 34%),
            linear-gradient(155deg, rgba(5, 12, 42, .99), rgba(2, 5, 25, .99));
        background-size: 28px 28px, 28px 28px, auto, auto, auto;
    }

    .metric-card,
    .chart-card {
        background:
            radial-gradient(circle at 100% 0%, rgba(0, 242, 255, .18), transparent 36%),
            radial-gradient(circle at 0 100%, rgba(188, 19, 254, .13), transparent 42%),
            linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.034));
        border-color: rgba(0, 242, 255, .16);
        backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 20px rgba(0, 242, 255, .10);
    }

    .metric-card.orders strong,
    .metric-card.followers strong {
        color: #00f2ff;
        text-shadow: 0 0 14px rgba(0, 242, 255, .42);
    }

    .metric-card.growth strong,
    .metric-card.rate strong,
    .metric-card.time strong,
    .chart-label strong,
    .donx-luxe-dash-title em {
        color: #46ff9a;
        text-shadow: 0 0 14px rgba(70, 255, 154, .48);
    }

    .donx-luxe-keyboard {
        transform: perspective(900px) rotateX(60deg) translateY(-20px);
        background:
            radial-gradient(ellipse at 50% 8%, rgba(0, 242, 255, .45), transparent 52%),
            radial-gradient(ellipse at 88% 28%, rgba(188, 19, 254, .28), transparent 45%),
            linear-gradient(180deg, #5c67bb 0%, #232970 31%, #0d123b 66%, #040620 100%);
        border-color: rgba(0, 242, 255, .44);
        border-top-color: rgba(188, 19, 254, .60);
    }

    .donx-luxe-keyboard .key-row b {
        height: 18px;
        border: 1px solid rgba(0, 242, 255, .34);
        background:
            linear-gradient(180deg, rgba(216, 244, 255, .24), rgba(88, 105, 188, .10)),
            rgba(5, 10, 39, .82);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.24),
            inset 0 -2px 6px rgba(0, 242, 255, .14),
            0 4px 8px rgba(0,0,0,.28),
            0 0 11px rgba(0, 242, 255, .34),
            0 0 18px rgba(188, 19, 254, .13);
    }

    .donx-luxe-keyboard .key-row b:nth-child(3n) {
        border-color: rgba(188, 19, 254, .42);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.24),
            inset 0 -2px 6px rgba(188, 19, 254, .16),
            0 4px 8px rgba(0,0,0,.28),
            0 0 10px rgba(188, 19, 254, .40),
            0 0 16px rgba(0, 242, 255, .12);
    }

    .donx-luxe-keyboard .trackpad {
        border-color: rgba(0, 242, 255, .34);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.22),
            0 0 18px rgba(0, 242, 255, .24),
            0 0 28px rgba(188, 19, 254, .12);
    }

    .donx-luxe-front-lip {
        box-shadow:
            0 30px 52px rgba(0,0,0,.54),
            0 0 34px rgba(0, 242, 255, .30),
            0 0 56px rgba(188, 19, 254, .24),
            inset 0 1px 0 rgba(255,255,255,.20);
    }

    .donx-luxe-platform {
        width: 630px;
        bottom: 4px;
    }

    .donx-luxe-platform .ring {
        border-color: rgba(0, 242, 255, .42);
        animation: donxLuxePlatformPulse 3s ease-out infinite;
        box-shadow:
            0 0 34px rgba(0, 242, 255, .52),
            0 0 90px rgba(188, 19, 254, .34),
            inset 0 0 34px rgba(188, 19, 254, .30);
    }

    .donx-luxe-platform .ring-mid {
        animation-delay: .45s;
        border-color: rgba(188, 19, 254, .52);
    }

    .donx-luxe-platform .ring-inner {
        animation-delay: .9s;
    }

    .donx-luxe-platform .ring-scan {
        border-color: rgba(188, 19, 254, .62);
        animation: donxLuxeScan 5.8s linear infinite;
    }

    .donx-luxe-links path {
        stroke: #bc13fe;
        stroke-width: 2.2;
        stroke-dasharray: 5 16;
        opacity: .72;
        filter:
            drop-shadow(0 0 8px rgba(188, 19, 254, .84))
            drop-shadow(0 0 20px rgba(0, 242, 255, .28));
    }

    .donx-link-spark {
        fill: #00f2ff;
        filter:
            drop-shadow(0 0 8px rgba(0, 242, 255, .95))
            drop-shadow(0 0 18px rgba(188, 19, 254, .75));
    }

    .donx-link-spark.spark-two,
    .donx-link-spark.spark-four {
        fill: #bc13fe;
    }

    .donx-luxe-card {
        border-color: rgba(188, 19, 254, .56);
        box-shadow:
            0 24px 64px rgba(0,0,0,.44),
            0 0 36px rgba(188, 19, 254, .34),
            0 0 58px rgba(0, 242, 255, .14),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .donx-luxe-card.card-ig {
        right: -28px;
    }

    .donx-luxe-card.card-music {
        right: -42px;
    }

    .donx-luxe-card.card-order {
        right: -6px;
    }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 780px;
        max-width: 780px;
        transform: translateX(-40px);
    }

    .donx-luxe-laptop {
        width: 635px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .donx-luxe-scene {
        width: min(700px, 100%);
        transform: translateX(-16px);
    }

    .donx-luxe-laptop {
        width: min(580px, 78vw);
    }

    .donx-luxe-card.card-ig,
    .donx-luxe-card.card-music,
    .donx-luxe-card.card-order {
        right: 2px;
    }
}

@keyframes donxLuxeFloatSoft {
    0%, 100% { transform: translateX(-50%) rotateX(2deg) rotateY(-19deg) rotateZ(-1.4deg) translateY(0); }
    50% { transform: translateX(-50%) rotateX(2deg) rotateY(-19deg) rotateZ(-1.4deg) translateY(-5px); }
}

@keyframes donxLuxeFloatSoftNoX {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes donxLuxePlatformPulse {
    0% {
        opacity: .92;
        transform: translateX(-50%) scale(.96);
    }
    70% {
        opacity: .55;
        transform: translateX(-50%) scale(1.08);
    }
    100% {
        opacity: .92;
        transform: translateX(-50%) scale(.96);
    }
}

@media (max-width: 1199px) {
    .donx-luxe-scene {
        width: min(760px, 100%);
        min-height: 650px;
        margin: 0 auto -14px;
    }

    .donx-luxe-laptop {
        width: min(590px, 78vw);
    }

    .donx-luxe-card {
        width: 205px;
    }
}

@media (max-width: 991px) {
    .donx-luxe-scene {
        width: min(760px, 100%);
        min-height: 640px;
        margin-top: 8px;
    }

    .donx-luxe-laptop {
        width: min(610px, 82vw);
        bottom: 126px;
    }

    .donx-luxe-platform {
        width: 660px;
        bottom: 18px;
    }
}

@media (max-width: 767px) {
    .donx-luxe-scene {
        width: 100%;
        min-height: 520px;
        margin: 18px auto 0;
    }

    .donx-luxe-laptop {
        width: min(455px, 96vw);
        bottom: 82px;
        transform: translateX(-50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    .donx-luxe-screen-shell {
        height: 292px;
    }

    .donx-luxe-platform {
        width: 430px;
        height: 136px;
        bottom: 15px;
    }

    .donx-luxe-platform .ring-outer { width: 420px; height: 108px; }
    .donx-luxe-platform .ring-mid { width: 330px; height: 82px; bottom: 18px; }
    .donx-luxe-platform .ring-inner { width: 230px; height: 54px; bottom: 33px; }

    .donx-luxe-card {
        width: 158px;
        min-height: 66px;
        padding: 10px;
    }
}

/* ===== Cinematic laptop detail pass: glow, dashboard, plasma, orbit cards ===== */
.donx-luxe-scene {
    min-height: 720px;
    max-width: 930px;
    width: min(930px, 60vw);
    margin: -22px -96px -26px auto;
}

.donx-luxe-scene::before {
    inset: -9% -16% -5% -8%;
    background:
        radial-gradient(circle at 58% 33%, rgba(183, 67, 255, .38), transparent 24%),
        radial-gradient(circle at 58% 60%, rgba(34, 214, 255, .30), transparent 25%),
        radial-gradient(ellipse at 56% 82%, rgba(25, 196, 255, .30), transparent 40%),
        conic-gradient(from 228deg at 57% 55%, transparent 0 18%, rgba(71, 210, 255, .12) 20%, transparent 24% 54%, rgba(168, 74, 255, .14) 58%, transparent 64% 100%);
    filter: blur(5px);
}

.donx-luxe-scene::after {
    right: -18%;
    top: 2%;
    width: 820px;
    height: 620px;
    background:
        repeating-radial-gradient(ellipse at center, rgba(70, 205, 255, .10) 0 1px, transparent 1px 30px),
        radial-gradient(circle at 45% 42%, rgba(40, 214, 255, .16), transparent 28%),
        radial-gradient(circle, rgba(139, 61, 255, .24), rgba(14, 10, 45, 0) 69%);
    filter: blur(20px);
}

.donx-luxe-smoke {
    mix-blend-mode: screen;
}

.donx-luxe-smoke.smoke-a {
    width: 680px;
    height: 250px;
    left: 112px;
    bottom: 52px;
    background: radial-gradient(ellipse at center, rgba(138, 73, 255, .38), rgba(36, 218, 255, .18) 36%, transparent 73%);
}

.donx-luxe-smoke.smoke-b {
    width: 470px;
    height: 190px;
    right: 48px;
    top: 120px;
    background: radial-gradient(ellipse at center, rgba(174, 74, 255, .32), rgba(48, 204, 255, .12) 42%, transparent 72%);
}

.donx-luxe-smoke.smoke-c {
    width: 420px;
    height: 145px;
    left: 248px;
    top: 248px;
    opacity: .46;
    background: radial-gradient(ellipse at center, rgba(60, 219, 255, .20), rgba(174, 74, 255, .14) 44%, transparent 74%);
    animation-delay: 2.1s;
}

.donx-luxe-beam {
    position: absolute;
    height: 2px;
    border-radius: 99px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(59, 221, 255, .72), rgba(167, 77, 255, .75), transparent);
    box-shadow: 0 0 18px rgba(67, 219, 255, .42), 0 0 34px rgba(167, 77, 255, .28);
    opacity: .55;
    animation: donxLuxeBeam 5.8s ease-in-out infinite;
}

.beam-a {
    width: 360px;
    left: 198px;
    top: 162px;
    transform: rotate(15deg);
}

.beam-b {
    width: 330px;
    right: 122px;
    top: 318px;
    transform: rotate(-9deg);
    animation-delay: 1.1s;
}

.beam-c {
    width: 250px;
    left: 294px;
    bottom: 148px;
    transform: rotate(-18deg);
    animation-delay: 2s;
}

.spark-d { left: 42%; top: 27%; animation-delay: 1.7s; }
.spark-e { right: 18%; bottom: 31%; animation-delay: 2.8s; }

.donx-luxe-links {
    opacity: 1;
}

.donx-luxe-links path {
    stroke-width: 2.7;
    stroke-dasharray: 2 13;
    animation-duration: 5.4s;
}

.donx-luxe-platform {
    width: 780px;
    height: 230px;
    bottom: 14px;
    transform: translateX(-50%) rotateX(61deg);
}

.donx-luxe-platform .platform-haze {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 740px;
    height: 170px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(52, 222, 255, .30), rgba(131, 70, 255, .21) 42%, transparent 73%);
    filter: blur(18px);
    animation: donxLuxePulse 4.2s ease-in-out infinite;
}

.donx-luxe-platform::before {
    width: 720px;
    height: 112px;
    bottom: 28px;
    background: radial-gradient(ellipse at center, rgba(62, 229, 255, .34), rgba(128, 73, 255, .22) 46%, transparent 72%);
}

.donx-luxe-platform::after {
    bottom: 62px;
    width: 430px;
    height: 46px;
    background: linear-gradient(90deg, transparent, rgba(56, 226, 255, .95), rgba(165, 77, 255, .92), rgba(56, 226, 255, .76), transparent);
}

.donx-luxe-platform .ring {
    border-width: 3px;
    background:
        radial-gradient(ellipse at center, rgba(53, 225, 255, .18), transparent 42%),
        linear-gradient(90deg, rgba(32, 213, 255, .18), transparent 35%, rgba(168, 72, 255, .18));
    box-shadow:
        0 0 42px rgba(54, 217, 255, .44),
        0 0 98px rgba(143, 75, 255, .28),
        inset 0 0 34px rgba(143, 75, 255, .28);
}

.donx-luxe-platform .ring-outer { width: 760px; height: 186px; bottom: 0; }
.donx-luxe-platform .ring-mid { width: 585px; height: 142px; bottom: 28px; }
.donx-luxe-platform .ring-inner { width: 410px; height: 96px; bottom: 54px; }
.donx-luxe-platform .ring-core { width: 450px; height: 110px; bottom: 44px; background: radial-gradient(ellipse at center, rgba(57, 229, 255, .46), rgba(156, 73, 255, .28) 46%, transparent 74%); }
.donx-luxe-platform .ring-scan {
    width: 260px;
    height: 58px;
    bottom: 72px;
    border-color: rgba(255, 255, 255, .35);
    border-style: dashed;
    animation: donxLuxeScan 6s linear infinite;
}

.donx-luxe-laptop {
    bottom: 134px;
    width: min(700px, 45vw);
}

.donx-luxe-laptop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -44px;
    width: 76%;
    height: 54px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(20, 218, 255, .22);
    filter: blur(18px);
    z-index: -2;
}

.donx-luxe-screen-shell {
    height: 420px;
    padding: 16px;
    background:
        linear-gradient(145deg, rgba(89, 96, 167, .92), rgba(8, 10, 34, .99) 38%, rgba(1, 3, 17, .99)),
        radial-gradient(circle at 14% 0%, rgba(55, 221, 255, .38), transparent 30%),
        radial-gradient(circle at 92% 7%, rgba(169, 76, 255, .36), transparent 31%);
    border: 1px solid rgba(127, 211, 255, .48);
    box-shadow:
        0 56px 136px rgba(0,0,0,.68),
        0 0 52px rgba(58, 221, 255, .42),
        0 0 132px rgba(156, 75, 255, .35),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 0 0 1px rgba(169, 104, 255, .18);
}

.donx-luxe-screen-shell::before {
    background:
        linear-gradient(115deg, rgba(255,255,255,.18), transparent 22%, transparent 66%, rgba(73, 218, 255, .08)),
        linear-gradient(90deg, rgba(69, 219, 255, .16), transparent 18% 80%, rgba(174, 77, 255, .14));
}

.donx-luxe-screen-glow {
    right: -80px;
    top: -85px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(173, 76, 255, .43), rgba(46, 216, 255, .14) 38%, transparent 68%);
}

.donx-luxe-screen {
    background:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
        radial-gradient(circle at 72% 16%, rgba(156, 76, 255, .26), transparent 30%),
        radial-gradient(circle at 34% 86%, rgba(39, 212, 255, .16), transparent 34%),
        linear-gradient(155deg, rgba(10, 17, 54, .99), rgba(3, 7, 28, .99));
    background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

.donx-luxe-topbar {
    height: 70px;
    background:
        radial-gradient(circle at 50% 0%, rgba(64, 224, 255, .16), transparent 48%),
        linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,255,255,.026));
}

.donx-luxe-screen-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

.donx-luxe-screen-tabs span {
    width: 36px;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(52, 220, 255, .42), rgba(160, 77, 255, .32));
    box-shadow: 0 0 10px rgba(52, 220, 255, .18);
}

.donx-luxe-screen-tabs span:nth-child(2) { width: 24px; opacity: .6; }
.donx-luxe-screen-tabs span:nth-child(3) { width: 18px; opacity: .42; }

.donx-luxe-dashboard {
    grid-template-columns: 126px 1fr;
    height: calc(100% - 70px);
}

.donx-luxe-dashboard aside {
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        rgba(4, 7, 29, .50);
}

.donx-luxe-dashboard aside b {
    min-height: 27px;
    border: 1px solid rgba(255,255,255,.045);
}

.donx-luxe-dashboard aside b:nth-child(2),
.donx-luxe-dashboard aside b:nth-child(5) {
    background: rgba(60, 219, 255, .045);
}

.donx-luxe-dash-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.donx-luxe-dash-title em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 27px;
    border-radius: 999px;
    color: #68ffb0;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    background: rgba(50, 230, 164, .10);
    border: 1px solid rgba(78, 255, 181, .22);
    box-shadow: 0 0 16px rgba(58, 230, 170, .18);
}

.donx-luxe-dash-grid {
    grid-template-columns: .82fr .82fr 1.04fr;
    gap: 11px;
}

.metric-card,
.chart-card {
    position: relative;
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 220, 255, .16), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.086), rgba(255,255,255,.028));
    border-color: rgba(155, 192, 255, .12);
}

.metric-card::after,
.chart-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(65, 220, 255, .10);
    pointer-events: none;
}

.metric-card i {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 15px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, rgba(61, 221, 255, .72), transparent);
    filter: drop-shadow(0 0 8px rgba(61, 221, 255, .35));
}

.chart-card {
    height: 118px;
}

.chart-label {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
}

.chart-label span {
    display: block;
    color: #94a7dc;
    font-size: 10px;
    line-height: 1;
}

.chart-label strong {
    display: block;
    margin-top: 4px;
    color: #64ffb3;
    font-size: 17px;
    line-height: 1;
}

.chart-card svg {
    padding: 18px 10px 9px;
}

.donx-luxe-keyboard {
    height: 122px;
    width: 108%;
    background:
        linear-gradient(180deg, rgba(113, 120, 194, .95), rgba(25, 27, 72, .99) 36%, rgba(6, 7, 28, .99)),
        radial-gradient(ellipse at 50% 0%, rgba(49, 224, 255, .34), transparent 62%);
}

.donx-luxe-keyboard::before {
    height: 47px;
    top: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(185, 220, 255, .16) 0 15px, rgba(255,255,255,.035) 15px 22px),
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(0,0,0,.15) 11px 14px),
        linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.035));
}

.donx-luxe-keyboard .trackpad {
    width: 162px;
    height: 32px;
    border-color: rgba(94, 221, 255, .22);
}

.donx-luxe-front-lip {
    height: 38px;
    background:
        linear-gradient(90deg, transparent, rgba(61, 225, 255, .28), transparent),
        linear-gradient(180deg, rgba(108, 117, 199, .98), rgba(13, 16, 55, .99));
}

.donx-luxe-card {
    width: 236px;
    min-height: 98px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, rgba(64, 223, 255, .18), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(169, 77, 255, .12), transparent 42%),
        linear-gradient(145deg, rgba(12, 20, 61, .88), rgba(9, 6, 43, .78));
    border-color: rgba(154, 211, 255, .36);
    box-shadow:
        0 24px 64px rgba(0,0,0,.44),
        0 0 34px rgba(56, 214, 255, .20),
        0 0 54px rgba(142, 75, 255, .18),
        inset 0 1px 0 rgba(255,255,255,.14);
}

.donx-luxe-card::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 221, 255, .55), rgba(172, 76, 255, .55), transparent);
}

.donx-luxe-card i {
    box-shadow: 0 12px 28px rgba(53, 213, 255, .28), inset 0 1px 0 rgba(255,255,255,.20);
}

.donx-luxe-card strong {
    font-size: 14px;
}

.donx-luxe-card em {
    opacity: 1;
    animation: donxLuxeWave 3.4s ease-in-out infinite;
}

.donx-luxe-card.card-yt { left: 14px; top: 48px; }
.donx-luxe-card.card-tt { left: -32px; top: 222px; }
.donx-luxe-card.card-web { left: 18px; top: 406px; }
.donx-luxe-card.card-ig { right: -22px; top: 80px; }
.donx-luxe-card.card-music { right: -42px; top: 278px; }
.donx-luxe-card.card-order { right: 12px; top: 482px; }

@keyframes donxLuxeBeam {
    0%, 100% { opacity: .22; filter: blur(.2px); }
    50% { opacity: .82; filter: blur(0); }
}

@keyframes donxLuxeScan {
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes donxLuxeWave {
    0%, 100% { transform: translateX(0); filter: drop-shadow(0 0 7px rgba(55, 217, 255, .35)); }
    50% { transform: translateX(7px); filter: drop-shadow(0 0 12px rgba(174, 77, 255, .48)); }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 970px;
        max-width: 970px;
        margin-right: -142px;
    }

    .donx-luxe-laptop {
        width: 735px;
    }
}

@media (max-width: 1199px) {
    .donx-luxe-scene {
        width: min(815px, 100%);
        min-height: 690px;
        margin: 0 auto -18px;
    }

    .donx-luxe-laptop {
        width: min(660px, 82vw);
    }

    .donx-luxe-card {
        width: 214px;
    }
}

@media (max-width: 991px) {
    .donx-luxe-scene {
        width: min(780px, 100%);
        min-height: 675px;
    }

    .donx-luxe-laptop {
        width: min(630px, 86vw);
        bottom: 130px;
    }

    .donx-luxe-platform {
        width: 690px;
    }
}

@media (max-width: 767px) {
    .donx-luxe-scene {
        min-height: 548px;
        width: 100%;
        margin: 18px auto 0;
    }

    .donx-luxe-laptop {
        width: min(470px, 98vw);
        bottom: 86px;
    }

    .donx-luxe-screen-shell {
        height: 305px;
        padding: 10px;
    }

    .donx-luxe-screen-tabs,
    .donx-luxe-beam,
    .donx-luxe-smoke.smoke-c {
        display: none;
    }

    .donx-luxe-dashboard {
        grid-template-columns: 58px 1fr;
    }

    .chart-card {
        height: 82px;
    }

    .metric-card.bars,
    .metric-card.time {
        display: none;
    }

    .donx-luxe-card {
        width: 162px;
        min-height: 68px;
    }

    .donx-luxe-card.card-yt { left: 0; top: 0; }
    .donx-luxe-card.card-ig { right: 0; top: 8px; }
    .donx-luxe-card.card-tt { left: 0; top: 132px; }
    .donx-luxe-card.card-music { right: 0; top: 140px; }
}

/* ===== Laptop composition fix: open keyboard + keep hero inside viewport ===== */
@media (min-width: 992px) {
    .donx-luxe-scene {
        width: min(735px, 48vw);
        max-width: 735px;
        min-height: 660px;
        margin: -8px 0 -12px auto;
        transform: translateX(-8px);
    }

    .donx-luxe-laptop {
        width: min(575px, 38vw);
        bottom: 132px;
        transform: translateX(-50%) rotateX(2deg) rotateY(-10deg) rotateZ(-1deg);
    }

    .donx-luxe-screen-shell {
        height: 345px;
        transform: rotateX(-3deg);
        transform-origin: bottom center;
    }

    .donx-luxe-keyboard {
        width: 116%;
        height: 150px;
        margin-top: -4px;
        transform: rotateX(50deg) translateY(-6px);
        transform-origin: top center;
        border-radius: 0 0 48px 48px;
        background:
            radial-gradient(ellipse at 50% 12%, rgba(55, 226, 255, .30), transparent 55%),
            linear-gradient(180deg, rgba(116, 124, 205, .96), rgba(27, 30, 78, .99) 38%, rgba(7, 8, 31, .99));
    }

    .donx-luxe-keyboard::before {
        left: 7%;
        right: 7%;
        top: 18px;
        height: 62px;
        border-radius: 12px;
        background:
            repeating-linear-gradient(90deg, rgba(195, 224, 255, .18) 0 16px, rgba(255,255,255,.045) 16px 24px),
            repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.18) 12px 16px),
            linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.035));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(55, 225, 255, .12);
    }

    .donx-luxe-keyboard::after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 92px;
        height: 18px;
        border-radius: 8px;
        background:
            repeating-linear-gradient(90deg, rgba(195, 224, 255, .15) 0 28px, rgba(255,255,255,.04) 28px 38px),
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
        opacity: .8;
    }

    .donx-luxe-keyboard .trackpad {
        width: 150px;
        height: 31px;
        bottom: 18px;
    }

    .donx-luxe-front-lip {
        bottom: -10px;
        height: 42px;
        width: 120%;
    }

    .donx-luxe-platform {
        width: 620px;
        height: 190px;
        bottom: 20px;
    }

    .donx-luxe-platform .platform-haze {
        width: 610px;
        height: 140px;
    }

    .donx-luxe-platform .ring-outer { width: 610px; height: 154px; }
    .donx-luxe-platform .ring-mid { width: 470px; height: 116px; }
    .donx-luxe-platform .ring-inner { width: 325px; height: 76px; }
    .donx-luxe-platform .ring-core { width: 350px; height: 86px; }

    .donx-luxe-card {
        width: 196px;
        min-height: 84px;
        padding: 13px 14px;
    }

    .donx-luxe-card i {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 18px;
    }

    .donx-luxe-card strong {
        font-size: 12.5px;
    }

    .donx-luxe-card span,
    .donx-luxe-card small {
        font-size: 9.7px;
    }

    .donx-luxe-card.card-yt { left: 34px; top: 52px; }
    .donx-luxe-card.card-tt { left: -8px; top: 198px; }
    .donx-luxe-card.card-web { left: 22px; top: 360px; }
    .donx-luxe-card.card-ig { right: 16px; top: 78px; }
    .donx-luxe-card.card-music { right: 8px; top: 252px; }
    .donx-luxe-card.card-order { right: 22px; top: 432px; }

    .donx-luxe-links {
        transform: scale(.92);
        transform-origin: center;
    }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 760px;
        max-width: 760px;
        margin-right: 0;
        transform: translateX(-18px);
    }

    .donx-luxe-laptop {
        width: 595px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .donx-luxe-scene {
        width: min(690px, 100%);
        transform: none;
    }

    .donx-luxe-laptop {
        width: min(540px, 74vw);
    }

    .donx-luxe-card {
        width: 184px;
    }

    .donx-luxe-card.card-ig,
    .donx-luxe-card.card-music,
    .donx-luxe-card.card-order {
        right: 0;
    }
}

/* ===== Prompt-locked cinematic containment pass ===== */
.home-section.donx-premium-home.donx-luxe-hero-shell {
    overflow-x: clip;
}

.home-section.donx-premium-home.donx-luxe-hero-shell::before {
    background:
        radial-gradient(ellipse at 18% 46%, rgba(35, 168, 255, .18), transparent 52%),
        linear-gradient(110deg, transparent 0 20%, rgba(30, 184, 255, .10) 28%, transparent 45%);
    box-shadow: 0 0 120px rgba(31, 178, 255, .18);
}

@media (min-width: 992px) {
    .donx-luxe-scene {
        width: min(700px, 47vw);
        max-width: 700px;
        min-height: 640px;
        margin: -4px 0 -4px auto;
        transform: translateX(-14px);
        overflow: visible;
    }

    .donx-luxe-laptop {
        width: min(585px, 38vw);
        bottom: 116px;
        transform: translateX(-50%) rotateX(0deg) rotateY(-15deg) rotateZ(-1.2deg);
    }

    .donx-luxe-screen-shell {
        height: 350px;
        transform: perspective(1150px) rotateX(-8deg) rotateY(1deg);
        transform-origin: bottom center;
    }

    .donx-luxe-keyboard {
        width: 120%;
        height: 166px;
        margin-left: -10%;
        transform: perspective(900px) rotateX(56deg) translateY(-18px);
    }

    .donx-luxe-platform {
        width: 610px;
        height: 178px;
        bottom: 8px;
    }

    .donx-luxe-platform .platform-haze {
        width: 590px;
        height: 132px;
    }

    .donx-luxe-platform .ring-outer { width: 600px; height: 146px; }
    .donx-luxe-platform .ring-mid { width: 458px; height: 108px; }
    .donx-luxe-platform .ring-inner { width: 318px; height: 74px; }
    .donx-luxe-platform .ring-core { width: 340px; height: 82px; }

    .donx-luxe-card.card-web {
        display: none;
    }

    .donx-luxe-card {
        width: 188px;
        min-height: 82px;
    }

    .donx-luxe-card.card-yt { left: 42px; top: 76px; }
    .donx-luxe-card.card-tt { left: 10px; top: 220px; }
    .donx-luxe-card.card-ig { right: 28px; top: 98px; }
    .donx-luxe-card.card-music { right: 22px; top: 276px; }
    .donx-luxe-card.card-order { right: 40px; top: 438px; }

    .donx-luxe-links {
        clip-path: inset(0 0 0 0);
        transform: scale(.88);
        transform-origin: center;
    }

    .donx-luxe-smoke.smoke-a {
        width: 560px;
        height: 210px;
        left: 104px;
        bottom: 48px;
    }

    .donx-luxe-smoke.smoke-b {
        width: 390px;
        right: 64px;
        top: 112px;
    }
}

@media (min-width: 1400px) {
    .donx-luxe-scene {
        width: 720px;
        max-width: 720px;
        transform: translateX(-8px);
    }

    .donx-luxe-laptop {
        width: 605px;
    }
}

/* ===== Real 3D open laptop pass: visible keys, hinge, deck depth ===== */
@media (min-width: 992px) {
    .donx-luxe-laptop {
        bottom: 118px;
        width: min(615px, 40vw);
        transform: translateX(-50%) rotateX(0deg) rotateY(-12deg) rotateZ(-1deg);
        transform-style: preserve-3d;
    }

    .donx-luxe-screen-shell {
        height: 368px;
        padding: 14px;
        border-radius: 30px 30px 13px 13px;
        transform: perspective(1100px) rotateX(-6deg);
        transform-origin: bottom center;
        box-shadow:
            0 34px 86px rgba(0,0,0,.58),
            0 0 38px rgba(58, 221, 255, .40),
            0 0 112px rgba(156, 75, 255, .34),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 0 0 1px rgba(169, 104, 255, .18);
    }

    .donx-luxe-screen-shell::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 36%;
        height: 15px;
        transform: translateX(-50%);
        border-radius: 0 0 18px 18px;
        background: linear-gradient(180deg, rgba(91, 103, 180, .96), rgba(13, 16, 48, .98));
        box-shadow: 0 0 22px rgba(58, 221, 255, .22);
        z-index: 5;
    }

    .donx-luxe-screen {
        border-radius: 20px 20px 8px 8px;
    }

    .donx-luxe-topbar {
        height: 62px;
    }

    .donx-luxe-dashboard {
        height: calc(100% - 62px);
    }

    .donx-luxe-keyboard {
        position: relative;
        width: 122%;
        height: 176px;
        margin: -2px 0 0 -11%;
        transform: perspective(900px) rotateX(58deg) translateY(-18px);
        transform-origin: top center;
        border-radius: 8px 8px 44px 44px;
        overflow: hidden;
        background:
            radial-gradient(ellipse at 50% 6%, rgba(82, 231, 255, .38), transparent 52%),
            linear-gradient(180deg, #5965b4 0%, #252b74 30%, #111642 66%, #060825 100%);
        border: 1px solid rgba(137, 197, 255, .28);
        border-top: 2px solid rgba(96, 224, 255, .42);
        box-shadow:
            0 42px 70px rgba(0,0,0,.54),
            0 22px 40px rgba(33, 214, 255, .18),
            inset 0 1px 0 rgba(255,255,255,.22),
            inset 0 -28px 50px rgba(1, 3, 18, .58);
    }

    .donx-luxe-keyboard::before {
        content: "";
        position: absolute;
        left: 5%;
        right: 5%;
        top: 8px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(59, 226, 255, .78), rgba(170, 82, 255, .64), transparent);
        box-shadow: 0 0 22px rgba(59, 226, 255, .46);
    }

    .donx-luxe-keyboard::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 7px;
        width: 94%;
        height: 18px;
        transform: translateX(-50%);
        border-radius: 0 0 40px 40px;
        background: linear-gradient(180deg, rgba(114, 124, 205, .72), rgba(4, 6, 26, .95));
        box-shadow: 0 12px 28px rgba(0,0,0,.42);
    }

    .donx-luxe-keyboard .keyboard-glow {
        position: absolute;
        left: 50%;
        top: 26px;
        width: 78%;
        height: 84px;
        transform: translateX(-50%);
        border-radius: 18px;
        background: radial-gradient(ellipse at center, rgba(70, 226, 255, .18), rgba(167, 84, 255, .10) 46%, transparent 74%);
        filter: blur(7px);
        pointer-events: none;
    }

    .donx-luxe-keyboard .key-row {
        position: absolute;
        left: 50%;
        display: grid;
        gap: 6px;
        transform: translateX(-50%);
        z-index: 2;
    }

    .donx-luxe-keyboard .row-one {
        top: 28px;
        width: 76%;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .donx-luxe-keyboard .row-two {
        top: 55px;
        width: 72%;
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    .donx-luxe-keyboard .row-three {
        top: 82px;
        width: 66%;
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    .donx-luxe-keyboard .row-four {
        top: 110px;
        width: 60%;
        grid-template-columns: .75fr .75fr .75fr .75fr 3.2fr .75fr .75fr .75fr;
    }

    .donx-luxe-keyboard .key-row b {
        display: block;
        height: 17px;
        border-radius: 5px;
        background:
            linear-gradient(180deg, rgba(200, 224, 255, .20), rgba(105, 121, 190, .08)),
            rgba(8, 13, 43, .72);
        border: 1px solid rgba(176, 209, 255, .12);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 3px 6px rgba(0,0,0,.24),
            0 0 8px rgba(49, 215, 255, .08);
    }

    .donx-luxe-keyboard .key-row b:nth-child(3n) {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 3px 6px rgba(0,0,0,.24),
            0 0 10px rgba(171, 82, 255, .14);
    }

    .donx-luxe-keyboard .key-row b.space {
        background:
            linear-gradient(180deg, rgba(210, 228, 255, .22), rgba(107, 126, 196, .09)),
            rgba(9, 15, 49, .78);
    }

    .donx-luxe-keyboard .trackpad {
        left: 50%;
        bottom: 23px;
        width: 152px;
        height: 34px;
        transform: translateX(-50%);
        border-radius: 11px;
        background: linear-gradient(180deg, rgba(210, 226, 255, .13), rgba(255,255,255,.045));
        border: 1px solid rgba(144, 199, 255, .20);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 0 18px rgba(56, 221, 255, .11);
        z-index: 3;
    }

    .donx-luxe-front-lip {
        bottom: -20px;
        width: 127%;
        height: 54px;
        border-radius: 0 0 54% 54%;
        background:
            linear-gradient(90deg, transparent, rgba(58, 226, 255, .34), transparent),
            linear-gradient(180deg, rgba(106, 119, 207, .98), rgba(15, 18, 60, .99) 48%, rgba(3, 5, 22, .99));
        box-shadow:
            0 30px 52px rgba(0,0,0,.54),
            0 0 34px rgba(62, 225, 255, .22),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .donx-luxe-platform {
        bottom: 4px;
    }

    .donx-luxe-card.card-web {
        top: 386px;
    }

    .donx-luxe-card.card-order {
        top: 454px;
    }
}

@media (min-width: 1400px) {
    .donx-luxe-laptop {
        width: 635px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .donx-luxe-laptop {
        width: min(565px, 76vw);
    }

    .donx-luxe-keyboard {
        height: 158px;
    }

    .donx-luxe-keyboard .key-row {
        gap: 5px;
    }
}
/* =========================================================
   DonXtraBoost - Premium Loading Screen Fix (Fast & Smooth)
   ========================================================= */
#preloader, .preloader, #loader-wrapper, .loader-wrapper, #loading, .loading, #loader, .loader {
    background-color: #030415 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
}

#preloader img, .preloader img, #loader-wrapper img, .loader-wrapper img, 
#loading img, .loading img, #loader img, .loader img, .spinner img, img.fa-spin {
    /* Kill the old spin animation completely */
    -webkit-animation: none !important;
    animation: none !important;
    
    /* Add the fast, smooth breathing effect */
    animation: donxPremiumPulse 2s ease-in-out infinite !important;
    filter: drop-shadow(0 0 25px rgba(0, 242, 255, 0.6)) !important;
    max-width: 140px !important;
    height: auto !important;
    
    /* Hardware acceleration for mobile speed */
    will-change: transform, opacity !important;
    transform: translateZ(0); 
}

@keyframes donxPremiumPulse {
    0% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.3; transform: scale(0.95); }
}