/* ============================================================
   DARK THEME — Complete Site Override
   ============================================================ */

:root {
    --bg-body: #07070f;
    --bg-nav: rgba(7, 7, 15, 0.92);
    --bg-section-soft: #0d0d1c;
    --bg-section-accent: rgba(137, 74, 129, 0.06);
    --bg-footer: #030308;

    --text-dark: rgba(255, 255, 255, 0.92);
    --text-gray: rgba(255, 255, 255, 0.52);
    --text-muted: rgba(255, 255, 255, 0.32);
    --text-light: #FEFEFE;

    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-opaque: rgba(255, 255, 255, 0.12);

    --shadow-glass: 0 0 40px rgba(137, 74, 129, 0.1), 0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-premium: 0 25px 50px rgba(0, 0, 0, 0.45), 0 0 80px rgba(137, 74, 129, 0.12);
    --shadow-dark: 0 25px 45px rgba(0, 0, 0, 0.5);
    --gradient-surface: linear-gradient(135deg, #07070f 0%, #0d0d1c 100%);

    --glow-primary: 0 0 30px rgba(137, 74, 129, 0.4);
    --glow-soft: 0 0 60px rgba(137, 74, 129, 0.15);
    --border-glow: rgba(137, 74, 129, 0.35);
}

/* ---- Body ---- */
body {
    background-color: var(--bg-body) !important;
    background-image:
        radial-gradient(ellipse 900px at 10% 15%, rgba(108, 59, 170, 0.1) 0%, transparent 65%),
        radial-gradient(ellipse 700px at 88% 50%, rgba(137, 74, 129, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 600px at 45% 90%, rgba(59, 74, 170, 0.07) 0%, transparent 65%) !important;
    background-attachment: fixed !important;
    color: var(--text-dark) !important;
}

@media (max-width: 1024px) {
    body {
        background-attachment: scroll !important;
    }
}

/* ---- Header scrolled — stays dark ---- */
.header--scrolled {
    background: rgba(7, 7, 15, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4) !important;
}

.header--scrolled .logo-desktop {
    filter: brightness(0) invert(0.9) !important;
}

.header--scrolled .line {
    stroke: rgba(255, 255, 255, 0.85) !important;
}

.header--scrolled .nav__link {
    color: rgba(255, 255, 255, 0.72) !important;
}

.header--scrolled .nav__link:hover {
    color: var(--color-white) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.header--scrolled .nav__item--active .nav__link {
    color: var(--color-primary-light) !important;
}

.header--scrolled .nav__item--button {
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

.header--scrolled .nav__item--button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: var(--color-white) !important;
}

.header--scrolled .nav__sublist {
    background: rgba(10, 10, 20, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

.header--scrolled .nav__sublist::before {
    background: rgba(10, 10, 20, 0.97) !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.header--scrolled .nav__subitem:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.header--scrolled .nav__sublink {
    color: rgba(255, 255, 255, 0.65) !important;
}

.header--scrolled .nav__sublink:hover {
    color: var(--color-white) !important;
}

@media (max-width: 1140px) {
    .header--scrolled {
        background: rgba(7, 7, 15, 0.96) !important;
    }

    .header--scrolled .logo-desktop {
        filter: brightness(0) invert(0.9) !important;
    }

    .header--scrolled .nav__link,
    .header--scrolled .nav__sublink,
    .header--scrolled .nav__item span.nav__link {
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .header--scrolled .nav__item--button {
        border-color: rgba(137, 74, 129, 0.4) !important;
        color: var(--color-white) !important;
    }
}

/* ---- Hero ---- */
.main__hero-overlay {
    background-color: #04040d !important;
}

/* ---- Section titles ---- */
.section-title h2 {
    color: var(--color-white) !important;
}

.section-title h2 i {
    filter: drop-shadow(0 0 14px rgba(137, 74, 129, 0.7)) !important;
}

.new-release h2,
.coming-soon h2 {
    color: var(--color-white) !important;
}

/* ---- About section ---- */
.about-us__content {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: var(--shadow-glass) !important;
}

.about-us__content:hover {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: var(--border-glow) !important;
    box-shadow: var(--glow-soft) !important;
    transform: translateY(-4px) !important;
}

.main__about-us__title {
    color: var(--color-white) !important;
}

.main__about-us__description {
    color: rgba(255, 255, 255, 0.52) !important;
}

.main__about-us__description b {
    color: rgba(255, 255, 255, 0.88) !important;
}

.highlight-text {
    color: var(--color-primary-light) !important;
}

.carousel {
    background-color: #0a0a16 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 0 0 1px rgba(137, 74, 129, 0.18),
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(108, 59, 170, 0.18) !important;
    position: relative !important;
}

.carousel::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1px !important;
    background: linear-gradient(135deg, rgba(166, 91, 161, 0.55), rgba(108, 59, 170, 0.15) 40%, transparent 70%, rgba(196, 69, 126, 0.4)) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.carousel::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at top, rgba(137, 74, 129, 0.18), transparent 60%),
        linear-gradient(to top, rgba(7, 7, 15, 0.55), transparent 45%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    border-radius: inherit !important;
}

.carousel-item img {
    filter: brightness(0.92) contrast(1.05) saturate(1.05) !important;
}

.carousel-caption {
    background: linear-gradient(to bottom, rgba(7, 7, 15, 0.85), transparent) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.carousel-control {
    background: rgba(15, 15, 30, 0.6) !important;
    border: 1px solid rgba(166, 91, 161, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.carousel-control:hover {
    background: rgba(137, 74, 129, 0.4) !important;
    border-color: rgba(166, 91, 161, 0.7) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(166, 91, 161, 0.45) !important;
}

.carousel-indicators button {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.carousel-indicators button.active {
    background: #a65ba1 !important;
    box-shadow: 0 0 12px rgba(166, 91, 161, 0.7) !important;
}

/* ---- Fortis ---- */
.fortis__panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

.fortis__panel:hover {
    border-color: var(--border-glow) !important;
    box-shadow: 0 0 60px rgba(137, 74, 129, 0.1) !important;
}

.fortis__panel-img-wrapper {
    background:
        radial-gradient(ellipse at center, rgba(137, 74, 129, 0.24) 0%, transparent 70%),
        rgba(255, 255, 255, 0.035) !important;
}

.fortis__panel-title {
    color: var(--color-white) !important;
}

.fortis__panel-desc {
    color: rgba(255, 255, 255, 0.48) !important;
}

.fortis__specs li {
    background: rgba(137, 74, 129, 0.08) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    border-left-color: var(--color-primary-light) !important;
}

.fortis__tabs {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.fortis__tab {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.fortis__tab:hover {
    background: rgba(137, 74, 129, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(137, 74, 129, 0.2) !important;
}

.fortis__main-title {
    color: var(--color-white) !important;
}

.fortis__subtitle {
    color: rgba(255, 255, 255, 0.42) !important;
}

.fortis__specs-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ---- Motus-R ---- */
.motus-r__info-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

.motus-r__title {
    color: var(--color-white) !important;
}

.motus-r__subtitle {
    color: rgba(255, 255, 255, 0.42) !important;
}

.motus-r__description {
    color: rgba(255, 255, 255, 0.5) !important;
}

.motus-r__description strong {
    color: rgba(255, 255, 255, 0.88) !important;
}

.motus-r__attributes {
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
}

.motus-r__attr-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.motus-r__attr-card.is-open {
    background: rgba(137, 74, 129, 0.06) !important;
}

.motus-r__attr-card:not(.is-open) .motus-r__attr-trigger:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.motus-r__attr-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

.motus-r__attr-body p {
    color: rgba(255, 255, 255, 0.48) !important;
}

/* ---- Pillars ---- */
.pillar-card {
    background:
        linear-gradient(180deg, rgba(23, 20, 34, 0.96) 0%, rgba(15, 13, 24, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 40px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.pillar-card:hover {
    background:
        linear-gradient(180deg, rgba(31, 24, 43, 0.98) 0%, rgba(18, 14, 29, 0.99) 100%) !important;
    border-color: rgba(196, 69, 126, 0.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 54px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(137, 74, 129, 0.12) !important;
}

.pillar-card:nth-child(1) {
    background:
        radial-gradient(circle at top left, rgba(196, 69, 126, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(23, 20, 34, 0.96) 0%, rgba(15, 13, 24, 0.98) 100%) !important;
}

.pillar-card:nth-child(2) {
    background:
        radial-gradient(circle at top left, rgba(166, 91, 161, 0.09), transparent 36%),
        linear-gradient(180deg, rgba(23, 20, 34, 0.96) 0%, rgba(15, 13, 24, 0.98) 100%) !important;
}

.pillar-card:nth-child(3) {
    background:
        radial-gradient(circle at top left, rgba(108, 59, 170, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(23, 20, 34, 0.96) 0%, rgba(15, 13, 24, 0.98) 100%) !important;
}

.pillar-card:nth-child(4) {
    background:
        radial-gradient(circle at top left, rgba(196, 69, 126, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(23, 20, 34, 0.96) 0%, rgba(15, 13, 24, 0.98) 100%) !important;
}

.pillar-title {
    color: rgba(255, 255, 255, 0.96) !important;
}

.pillar-desc {
    color: rgba(255, 255, 255, 0.64) !important;
}

/* ---- Stats (legacy) ---- */
.stat-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.stat-card:hover {
    background: rgba(137, 74, 129, 0.07) !important;
    border-color: rgba(137, 74, 129, 0.28) !important;
    box-shadow: 0 0 40px rgba(137, 74, 129, 0.1) !important;
}

.stat-label {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ---- Marquee ---- */
.marquee-track img {
    opacity: 0.92 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease !important;
}

.marquee-track a:hover img {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: scale(1.08) !important;
}