/*
  Shared luxury layer for secondary Nercia pages.
  Scoped by .site-luxury-page so legacy/test pages stay untouched.
*/

:root {
    --lux-bg: #000;
    --lux-ink: #f7f1df;
    --lux-muted: rgba(247, 241, 223, 0.68);
    --lux-faint: rgba(247, 241, 223, 0.42);
    --lux-gold: #d7b46a;
    --lux-gold-soft: rgba(215, 180, 106, 0.22);
    --lux-gold-faint: rgba(215, 180, 106, 0.1);
    --lux-panel: rgba(13, 13, 11, 0.78);
    --lux-panel-strong: rgba(18, 17, 13, 0.92);
    --lux-line: rgba(215, 180, 106, 0.24);
}

.site-luxury-page {
    position: relative;
    overflow-x: hidden;
    color: var(--lux-ink);
    background:
        linear-gradient(rgba(215, 180, 106, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215, 180, 106, 0.012) 1px, transparent 1px),
        radial-gradient(ellipse at 12% 0%, rgba(215, 180, 106, 0.05), transparent 30%),
        radial-gradient(ellipse at 88% 10%, rgba(215, 180, 106, 0.03), transparent 28%),
        #000 !important;
    background-size: 48px 48px, 48px 48px, auto, auto, auto !important;
}

.site-luxury-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.85)),
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.7) 76%);
}

.site-luxury-page *,
.site-luxury-page *::before,
.site-luxury-page *::after {
    letter-spacing: 0 !important;
}

.site-luxury-page :where(a) {
    color: var(--lux-gold);
}

.site-luxury-page :where(.hero, .ad-hero, .cb-hero, .about-hero, .rw-hero, .reg-header, .site-header) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.site-luxury-page :where(.hero, .ad-hero, .cb-hero, .about-hero, .rw-hero, .reg-header, .site-header)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(720px, 78vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(242, 216, 137, 0.8), transparent);
    box-shadow: 0 0 24px rgba(215, 180, 106, 0.28);
    pointer-events: none;
}

.site-luxury-page :where(.container, .ad-container, .invoice-container) {
    position: relative;
    z-index: 1;
}

.site-luxury-page :where(
    .feature-card,
    .ps-card,
    .service-card,
    .stat-card,
    .cb-card,
    .cb-compare-card,
    .cb-details-card,
    .about-card,
    .ct-card,
    .rule-card,
    .reward-card,
    .stopped-card,
    .waitlist-card,
    .faq-item,
    .rw-showcase-card,
    .rw-item-card,
    .rw-rule-card,
    .step-section,
    .info-box,
    .success-card,
    .manual-card,
    .card
) {
    border-color: var(--lux-line) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 30%),
        linear-gradient(180deg, var(--lux-panel-strong), rgba(7, 7, 6, 0.78)) !important;
    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.site-luxury-page :where(.feature-card, .ps-card, .service-card, .stat-card, .cb-card, .about-card, .rw-showcase-card, .waitlist-card) {
    transition:
        transform 520ms cubic-bezier(.16, 1, .3, 1),
        border-color 520ms ease,
        box-shadow 520ms ease;
}

.site-luxury-page :where(.feature-card, .ps-card, .service-card, .stat-card, .cb-card, .about-card, .rw-showcase-card, .waitlist-card):hover {
    transform: translateY(-4px);
    border-color: rgba(242, 216, 137, 0.48) !important;
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.52),
        0 0 42px rgba(215, 180, 106, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.site-luxury-page :where(h1, h2, h3, .hero-title, .section-title, .cb-section-title, .about-section-title, .rw-section-title) {
    color: var(--lux-ink);
    text-shadow: 0 18px 54px rgba(215, 180, 106, 0.2);
}

.site-luxury-page :where(p, li, td, th, .note, .sub, .desc) {
    line-height: 1.85;
}

.site-luxury-page :where(.section-label, .step-badge, .cb-hero-badge, .about-hero-badge, .rw-hero-eyebrow, .hero-brand) {
    border-color: var(--lux-gold-soft) !important;
    color: var(--lux-gold) !important;
    background: linear-gradient(135deg, rgba(215, 180, 106, 0.14), rgba(255, 255, 255, 0.025)) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-luxury-page :where(.btn, .cta-btn, .share-btn, .back-btn, .waitlist-btn, .btn-gold, button[type="submit"], input[type="submit"]) {
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 16px 46px rgba(215, 180, 106, 0.14) !important;
    transition:
        transform 420ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

.site-luxury-page :where(.btn-gold, .btn-gold:visited) {
    color: #080805 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.site-luxury-page :where(.btn, .cta-btn, .share-btn, .back-btn, .waitlist-btn, .btn-gold, button[type="submit"], input[type="submit"]):hover {
    transform: translateY(-2px);
    border-color: rgba(242, 216, 137, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 22px 64px rgba(215, 180, 106, 0.22) !important;
}

.site-luxury-page :where(table) {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--lux-line) !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.28);
}

.site-luxury-page :where(th) {
    background: linear-gradient(135deg, rgba(215, 180, 106, 0.22), rgba(215, 180, 106, 0.08)) !important;
    color: var(--lux-gold) !important;
}

.site-luxury-page :where(input, select, textarea) {
    border-color: rgba(247, 241, 223, 0.16) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)) !important;
    color: var(--lux-ink) !important;
}

.site-luxury-page :where(input, select, textarea):focus {
    border-color: var(--lux-gold) !important;
    box-shadow: 0 0 0 3px rgba(215, 180, 106, 0.12) !important;
    outline: none !important;
}

.site-luxury-page > .container,
.site-luxury-page > main > .container,
.site-luxury-page .invoice-container {
    border-color: var(--lux-line) !important;
}

.site-luxury-page:has(> .container) > .container {
    margin-top: 34px;
    margin-bottom: 34px;
    border: 1px solid var(--lux-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 30%),
        rgba(10, 10, 9, 0.78);
    box-shadow: 0 28px 92px rgba(0, 0, 0, 0.48);
}

.site-luxury-page :where(.scroll-reveal, .reveal, .fade-up) {
    animation-duration: 880ms !important;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

@media (max-width: 760px) {
    .site-luxury-page {
        background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
    }

    .site-luxury-page :where(.hero, .ad-hero, .cb-hero, .about-hero, .rw-hero, .reg-header, .site-header) {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .site-luxury-page:has(> .container) > .container {
        width: min(100% - 24px, 920px);
        margin-top: 18px;
        margin-bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-luxury-page *,
    .site-luxury-page *::before,
    .site-luxury-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}