/* =============================================================================
   WebBot — Premium / Luxury design system (front-end)
   Palette: obsidian · metallic gold · ivory
   Type:    Noto Serif Thai (display) · Inter / Noto Sans Thai (body)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@500;600;700&display=swap');

:root {
    /* surfaces */
    --lux-obsidian: #08080c;
    --lux-ink: #0f0f16;
    --lux-panel: #15151f;
    --lux-panel-2: #1c1c27;
    --lux-ivory: #f7f3ea;
    --lux-ivory-2: #efe8da;
    --lux-paper: #fffdf8;

    /* metal */
    --lux-gold: #c9a227;
    --lux-gold-2: #e6c765;
    --lux-gold-3: #f7e6a8;
    --lux-gold-deep: #8a6a1d;
    --lux-gradient-gold: linear-gradient(135deg, #8a6a1d 0%, #d9b855 26%, #fdf3c8 50%, #d9b855 74%, #8a6a1d 100%);

    /* text */
    --lux-text: #14141b;
    --lux-muted: #6f6857;
    --lux-muted-dark: #a9a293;

    /* lines & shadows */
    --lux-line: rgba(201, 162, 39, 0.24);
    --lux-line-soft: rgba(20, 20, 27, 0.08);
    --lux-shadow-sm: 0 12px 26px -18px rgba(20, 16, 6, 0.45);
    --lux-shadow: 0 26px 60px -30px rgba(20, 16, 6, 0.55);
    --lux-shadow-gold: 0 18px 40px -18px rgba(201, 162, 39, 0.55);

    /* legacy aliases kept for older markup */
    --premium-bg: var(--lux-ivory);
    --premium-panel: var(--lux-paper);
    --premium-panel-alt: var(--lux-ivory-2);
    --premium-text: var(--lux-text);
    --premium-muted: var(--lux-muted);
    --premium-primary: var(--lux-gold-deep);
    --premium-primary-2: var(--lux-gold);
    --premium-accent: var(--lux-gold-2);
    --premium-dark: var(--lux-obsidian);
    --premium-border: var(--lux-line-soft);
    --premium-shadow: var(--lux-shadow);

    --lux-display: 'Noto Serif Thai', 'Playfair Display', Georgia, serif;
    --lux-body: 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
html {
    scroll-behavior: smooth;
}

body.premium-site {
    font-family: var(--lux-body);
    background:
        linear-gradient(180deg, #fbf8f1 0%, var(--lux-ivory) 40%, var(--lux-ivory-2) 100%);
    color: var(--lux-text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.premium-site a {
    text-decoration: none;
    transition: color .25s ease;
}

body.premium-site img {
    max-width: 100%;
}

body.premium-site .container {
    max-width: 1220px;
}

body.premium-site h1,
body.premium-site h2,
body.premium-site h3,
body.premium-site h4,
body.premium-site .display-4,
body.premium-site .display-5,
body.premium-site .section-title {
    font-family: var(--lux-display);
    letter-spacing: -0.01em;
    font-weight: 600;
}

body.premium-site p,
body.premium-site li {
    line-height: 1.85;
}

body.premium-site .lead {
    font-size: 1.06rem;
    line-height: 1.9;
    color: var(--lux-muted);
}

body.premium-site .text-muted {
    color: var(--lux-muted) !important;
}

body.premium-site .text-primary {
    color: var(--lux-gold-deep) !important;
}

body.premium-site section {
    padding: 5.5rem 0;
    position: relative;
}

body.premium-site section.py-5,
body.premium-site section.py-4 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* alternate (dark) sections */
body.premium-site .section-alt {
    background:
        linear-gradient(180deg, var(--lux-ivory-2), #f2ebdd);
}

body.premium-site .section-dark {
    background:
        radial-gradient(900px 420px at 82% -10%, rgba(201, 162, 39, 0.22), transparent 70%),
        linear-gradient(160deg, var(--lux-ink) 0%, var(--lux-obsidian) 100%);
    color: var(--lux-ivory);
    background-image:
        radial-gradient(900px 420px at 82% -10%, rgba(201, 162, 39, 0.22), transparent 70%),
        url('../images/pattern-lux.svg'),
        linear-gradient(160deg, var(--lux-ink) 0%, var(--lux-obsidian) 100%);
}

body.premium-site .section-dark h2,
body.premium-site .section-dark h3,
body.premium-site .section-dark .card-title {
    color: var(--lux-ivory);
}

body.premium-site .section-dark p,
body.premium-site .section-dark .text-muted {
    color: var(--lux-muted-dark) !important;
}

/* hairline separators between stacked sections */
body.premium-site section + section {
    border-top: 1px solid var(--lux-line-soft);
}

body.premium-site .section-dark + section,
body.premium-site section + .section-dark {
    border-top: none;
}

/* ------------------------------------------------------- section titles -- */
body.premium-site .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--lux-gold-deep);
    margin-bottom: .9rem;
}

body.premium-site .eyebrow::before,
body.premium-site .eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--lux-line);
}

body.premium-site .section-dark .eyebrow {
    color: var(--lux-gold-2);
}

body.premium-site .section-title {
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem);
    margin-bottom: .6rem;
    color: var(--lux-text);
}

body.premium-site .section-title::after {
    content: '';
    display: block;
    width: 240px;
    max-width: 70%;
    height: 22px;
    margin: 1.1rem auto 0;
    background: url('../images/divider-lux.svg') center/contain no-repeat;
    opacity: .9;
}

body.premium-site .section-dark .section-title {
    color: var(--lux-ivory);
}

body.premium-site .text-center > .section-title + p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------ navbar ----- */
body.premium-site .navbar {
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.92), rgba(8, 8, 12, 0.78)) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(201, 162, 39, 0.18);
    box-shadow: 0 22px 40px -28px rgba(8, 8, 12, 0.9);
    padding: 1rem 0;
    transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
}

body.premium-site .navbar.is-scrolled {
    padding: .55rem 0;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.97), rgba(8, 8, 12, 0.9)) !important;
    box-shadow: 0 26px 48px -30px rgba(8, 8, 12, 1);
}

body.premium-site .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--lux-ivory) !important;
    font-family: var(--lux-display);
    font-weight: 600;
    font-size: 1.32rem;
    letter-spacing: .01em;
}

body.premium-site .navbar-brand:hover {
    color: var(--lux-gold-3) !important;
}

body.premium-site .navbar-logo {
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

body.premium-site .nav-link {
    color: rgba(247, 243, 234, 0.78) !important;
    font-weight: 500;
    font-size: .95rem;
    padding: .55rem 1rem !important;
    position: relative;
    letter-spacing: .01em;
}

body.premium-site .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .28rem;
    height: 1px;
    background: var(--lux-gradient-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

body.premium-site .nav-link:hover,
body.premium-site .nav-link.active {
    color: #fff !important;
}

body.premium-site .nav-link:hover::after,
body.premium-site .nav-link.active::after {
    transform: scaleX(1);
}

body.premium-site .navbar-toggler {
    border: 1px solid var(--lux-line);
    border-radius: 10px;
    padding: .35rem .55rem;
}

body.premium-site .navbar-toggler-icon {
    background-image: linear-gradient(var(--lux-gold-2), var(--lux-gold-2)),
        linear-gradient(var(--lux-gold-2), var(--lux-gold-2)),
        linear-gradient(var(--lux-gold-2), var(--lux-gold-2));
    background-size: 20px 1.5px, 20px 1.5px, 20px 1.5px;
    background-position: center 6px, center center, center 14px;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

/* -------------------------------------------------------------- hero ----- */
body.premium-site .hero {
    position: relative;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    overflow: hidden;
}

body.premium-site .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1000px 520px at 78% 12%, rgba(201, 162, 39, 0.28), transparent 65%),
        linear-gradient(180deg, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.72) 45%, rgba(8, 8, 12, 0.95) 100%);
    z-index: -1;
}

body.premium-site .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/pattern-lux.svg');
    opacity: .5;
    z-index: -1;
}

body.premium-site .hero > .container {
    animation: luxFadeUp .9s cubic-bezier(.22, .61, .36, 1) both;
}

body.premium-site .hero h1 {
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.9rem);
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

body.premium-site .hero .lead {
    color: rgba(247, 243, 234, 0.78);
    max-width: 660px;
    margin-inline: auto;
}

body.premium-site .hero .badge,
body.premium-site .page-hero .badge {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.22), rgba(201, 162, 39, 0.06)) !important;
    border: 1px solid rgba(201, 162, 39, 0.45) !important;
    color: var(--lux-gold-3) !important;
    letter-spacing: .24em;
    font-size: .68rem;
    font-weight: 600;
    padding: .6rem 1.1rem !important;
}

body.premium-site .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 2.2rem;
    transform: translateX(-50%);
    color: rgba(247, 243, 234, 0.65);
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

body.premium-site .hero-scroll span {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, var(--lux-gold-2), transparent);
    animation: luxPulse 2.4s ease-in-out infinite;
}

/* ---------------------------------------------------------- page hero ---- */
body.premium-site .page-hero {
    position: relative;
    margin-top: 4.9rem;
    margin-bottom: 0;
    padding: 5.5rem 0 4.5rem;
    border-radius: 0;
    background:
        radial-gradient(760px 320px at 20% 0%, rgba(201, 162, 39, 0.24), transparent 68%),
        url('../images/pattern-lux.svg'),
        linear-gradient(140deg, var(--lux-ink) 0%, var(--lux-obsidian) 70%);
    border-bottom: 1px solid var(--lux-line);
    box-shadow: var(--lux-shadow);
    color: var(--lux-ivory);
}

body.premium-site .page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--lux-gradient-gold);
    opacity: .55;
}

body.premium-site .page-hero h1,
body.premium-site .page-hero .display-5 {
    color: #fff;
    font-size: clamp(1.9rem, 1.3rem + 1.9vw, 3.1rem);
    margin-bottom: .9rem;
}

body.premium-site .page-hero p {
    color: rgba(247, 243, 234, 0.72);
    max-width: 720px;
    margin-inline: auto;
}

/* ------------------------------------------------------------- buttons --- */
body.premium-site .btn {
    font-family: var(--lux-body);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .78rem 1.6rem;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .3s ease, background .3s ease, color .25s ease, border-color .25s ease;
}

body.premium-site .btn:focus-visible {
    outline: 2px solid var(--lux-gold-2);
    outline-offset: 3px;
}

body.premium-site .btn-primary {
    background: var(--lux-gradient-gold);
    background-size: 200% 200%;
    color: #1b1508;
    border-color: rgba(138, 106, 29, 0.6);
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .btn-primary:hover,
body.premium-site .btn-primary:focus {
    color: #120e04;
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 22px 46px -16px rgba(201, 162, 39, 0.7);
}

body.premium-site .btn-outline-primary {
    background: transparent;
    border-color: rgba(138, 106, 29, 0.45);
    color: var(--lux-gold-deep);
}

body.premium-site .btn-outline-primary:hover,
body.premium-site .btn-outline-primary:focus {
    background: var(--lux-gradient-gold);
    border-color: transparent;
    color: #1b1508;
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .btn-outline-light {
    background: transparent;
    border-color: rgba(247, 243, 234, 0.45);
    color: var(--lux-ivory);
}

body.premium-site .btn-outline-light:hover,
body.premium-site .btn-outline-light:focus {
    background: rgba(247, 243, 234, 0.96);
    border-color: transparent;
    color: var(--lux-ink);
    transform: translateY(-2px);
}

body.premium-site .btn-outline-success {
    background: transparent;
    border-color: rgba(6, 199, 85, 0.4);
    color: #06c755;
}

body.premium-site .btn-lg {
    padding: 1rem 2.2rem;
    font-size: 1rem;
}

body.premium-site .btn-sm {
    padding: .55rem 1.15rem;
    font-size: .82rem;
}

/* gold shine on primary buttons */
body.premium-site .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

body.premium-site .btn-primary:hover::after {
    left: 120%;
}

/* ------------------------------------------------------- brand buttons --- */
body.premium-site .btn-brand {
    --brand-bg: var(--lux-gradient-gold);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--brand-bg);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .7rem 1.35rem;
    font-weight: 600;
    font-size: .87rem;
    box-shadow: 0 16px 30px -18px rgba(8, 8, 12, 0.8);
    transition: transform .25s ease, box-shadow .3s ease, filter .3s ease;
}

body.premium-site .btn-brand i {
    font-size: 1.05rem;
}

body.premium-site .btn-brand:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 22px 38px -18px rgba(8, 8, 12, 0.9);
}

body.premium-site .btn-brand-facebook { --brand-bg: var(--lux-gradient-gold) !important; color: #1b1508 !important; }
body.premium-site .btn-brand-facebook:hover { color: #120e04 !important; }
body.premium-site .btn-brand-line { --brand-bg: var(--lux-gradient-gold) !important; color: #1b1508 !important; }
body.premium-site .btn-brand-line:hover { color: #120e04 !important; }
body.premium-site .btn-brand-instagram { --brand-bg: linear-gradient(135deg, #f9ce34, #ee2a7b 48%, #6228d7); }
body.premium-site .btn-brand-youtube { --brand-bg: linear-gradient(135deg, #ff0033, #c40022); }
body.premium-site .btn-brand-tiktok { --brand-bg: linear-gradient(135deg, #25f4ee, #000 45%, #fe2c55); }
body.premium-site .btn-brand-x { --brand-bg: linear-gradient(135deg, #1c1c1c, #000); }
body.premium-site .btn-brand-twitter { --brand-bg: linear-gradient(135deg, #1da1f2, #0d8ddb); }
body.premium-site .btn-brand-linkedin { --brand-bg: linear-gradient(135deg, #0a66c2, #084f96); }
body.premium-site .btn-brand-telegram { --brand-bg: linear-gradient(135deg, #229ed9, #1b7fae); }
body.premium-site .btn-brand-whatsapp { --brand-bg: linear-gradient(135deg, #25d366, #1da851); }
body.premium-site .btn-brand-email { --brand-bg: var(--lux-gradient-gold); color: #1b1508; }
body.premium-site .btn-brand-email:hover { color: #120e04; }
body.premium-site .btn-brand-phone { --brand-bg: linear-gradient(135deg, #2f3542, #111319); }
body.premium-site .btn-brand-website { --brand-bg: linear-gradient(135deg, #3d4451, #22262e); }

/* ------------------------------------------------------------- surfaces -- */
body.premium-site .card,
body.premium-site .info-card,
body.premium-site .service-card,
body.premium-site .service-item,
body.premium-site .staff-card,
body.premium-site .testimonial-card {
    background: linear-gradient(180deg, var(--lux-paper), var(--lux-ivory));
    border: 1px solid var(--lux-line-soft);
    border-radius: 20px;
    box-shadow: var(--lux-shadow-sm);
    position: relative;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

body.premium-site .card::before,
body.premium-site .info-card::before,
body.premium-site .service-card::before,
body.premium-site .service-item::before,
body.premium-site .staff-card::before,
body.premium-site .testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0), rgba(201, 162, 39, .55), rgba(201, 162, 39, 0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

body.premium-site .card:hover,
body.premium-site .info-card:hover,
body.premium-site .service-card:hover,
body.premium-site .service-item:hover,
body.premium-site .staff-card:hover,
body.premium-site .testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lux-shadow);
}

body.premium-site .card:hover::before,
body.premium-site .info-card:hover::before,
body.premium-site .service-card:hover::before,
body.premium-site .service-item:hover::before,
body.premium-site .staff-card:hover::before,
body.premium-site .testimonial-card:hover::before {
    opacity: 1;
}

body.premium-site .section-dark .card,
body.premium-site .section-dark .info-card,
body.premium-site .section-dark .service-card {
    background: linear-gradient(180deg, rgba(28, 28, 39, 0.92), rgba(15, 15, 22, 0.95));
    border-color: rgba(201, 162, 39, 0.22);
    color: var(--lux-ivory);
}

body.premium-site .card-body {
    padding: 1.9rem;
}

body.premium-site .card-title {
    font-family: var(--lux-display);
    font-size: 1.2rem;
}

body.premium-site .info-card {
    padding: 2.4rem;
}

body.premium-site .info-card p:last-child,
body.premium-site .card-text:last-child {
    margin-bottom: 0;
}

/* service cards */
body.premium-site .service-card,
body.premium-site .service-item {
    padding: 2.2rem 1.9rem;
    height: 100%;
}

body.premium-site .service-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lux-gradient-gold);
    color: #1b1508;
    font-size: 1.45rem;
    box-shadow: var(--lux-shadow-gold);
    margin-bottom: 1.2rem;
}

body.premium-site .service-card h3,
body.premium-site .service-item h3 {
    font-size: 1.28rem;
    margin-bottom: .7rem;
}

/* staff */
body.premium-site .staff-card {
    padding: 1.6rem .9rem;
}

body.premium-site .staff-card i {
    background: var(--lux-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.premium-site .staff-card h5 {
    font-family: var(--lux-display);
    font-size: 1rem;
    margin-bottom: .15rem;
}

/* --------------------------------------------------------- portfolio ----- */
body.premium-site .portfolio-card {
    overflow: hidden;
}

body.premium-site .portfolio-card .card-img-top {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(105%) contrast(102%);
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

body.premium-site .portfolio-card:hover .card-img-top {
    transform: scale(1.06);
}

body.premium-site .portfolio-card .card-body {
    position: relative;
}

body.premium-site .portfolio-card .card-text:first-of-type {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lux-gold-deep);
    border: 1px solid var(--lux-line);
    border-radius: 999px;
    padding: .25rem .75rem;
    margin-bottom: .7rem;
}

/* ------------------------------------------------------- testimonials ---- */
body.premium-site .testimonial-card blockquote {
    margin: 0;
    position: relative;
}

body.premium-site .testimonial-card blockquote::before {
    content: '\201C';
    position: absolute;
    top: -2.4rem;
    left: -0.4rem;
    font-family: var(--lux-display);
    font-size: 4.4rem;
    line-height: 1;
    color: rgba(201, 162, 39, 0.28);
}

body.premium-site .testimonial-card p {
    font-family: var(--lux-display);
    font-size: 1.04rem;
    color: #2a2820;
}

body.premium-site .blockquote-footer {
    color: var(--lux-muted);
    font-size: .85rem;
    margin-top: 1rem;
}

body.premium-site .blockquote-footer cite {
    color: var(--lux-gold-deep);
    font-style: normal;
}

body.premium-site .lux-stars {
    color: var(--lux-gold);
    letter-spacing: .18em;
    font-size: .8rem;
    margin-top: .5rem;
    display: block;
}

/* ------------------------------------------------------------- avatar ---- */
body.premium-site .lux-avatar,
body.premium-site .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lux-gradient-gold);
    color: #1b1508;
    font-family: var(--lux-display);
    font-weight: 700;
    flex: 0 0 auto;
}

body.premium-site .lux-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.15rem;
    box-shadow: var(--lux-shadow-gold);
    margin-bottom: .9rem;
}

/* -------------------------------------------------------- about image ---- */
.about-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 16px;
    box-shadow: var(--lux-shadow-gold);
    transition: transform .35s ease, box-shadow .35s ease;
}

.about-img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 36px rgba(201, 162, 39, 0.35);
}

/* -------------------------------------------------------- about text ---- */
.about-lead {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--body-color);
}

/* ------------------------------------------------------------- panel ----- */
.panel {
    background: linear-gradient(180deg, var(--paper), var(--ivory));
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0), rgba(201, 162, 39, 0.5), rgba(201, 162, 39, 0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.panel:hover::before {
    opacity: 1;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(253, 243, 200, 0.28), transparent);
}

.panel-header h2 {
    font-size: 1.06rem;
    margin: 0;
}

.panel-body {
    padding: 24px;
}

/* ----------------------------------------------------------- cta band ---- */
body.premium-site .lux-cta {
    position: relative;
    border-radius: 26px;
    padding: 3.4rem 2.6rem;
    text-align: center;
    color: var(--lux-ivory);
    background:
        radial-gradient(680px 320px at 12% 0%, rgba(201, 162, 39, 0.28), transparent 70%),
        url('../images/pattern-lux.svg'),
        linear-gradient(140deg, var(--lux-ink), var(--lux-obsidian));
    border: 1px solid var(--lux-line);
    box-shadow: var(--lux-shadow);
    overflow: hidden;
}

body.premium-site .lux-cta h2 {
    color: #fff;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
}

body.premium-site .lux-cta p {
    color: rgba(247, 243, 234, 0.72);
    max-width: 620px;
    margin: 0 auto 1.8rem;
}

body.premium-site .lux-cta .btn-group {
    display: inline-flex;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* --------------------------------------------------------- facts strip --- */
body.premium-site .lux-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--lux-line);
    border: 1px solid var(--lux-line);
    border-radius: 22px;
    overflow: hidden;
}

body.premium-site .lux-stat {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 243, 234, 0.96));
    padding: 2.1rem 1.4rem;
    text-align: center;
}

body.premium-site .lux-stat .value {
    font-family: var(--lux-display);
    font-size: clamp(1.8rem, 1.4rem + 1vw, 2.6rem);
    background: var(--lux-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

body.premium-site .lux-stat .label {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lux-muted);
}

body.premium-site .section-dark .lux-stat,
body.premium-site .section-dark .lux-stats {
    background: rgba(21, 21, 31, 0.7);
}

body.premium-site .section-dark .lux-stat {
    background: linear-gradient(180deg, rgba(28, 28, 39, 0.9), rgba(15, 15, 22, 0.92));
}

body.premium-site .section-dark .lux-stat .label {
    color: var(--lux-muted-dark);
}

/* --------------------------------------------------------------- forms --- */
body.premium-site .form-control {
    background: rgba(255, 253, 248, 0.95);
    border: 1px solid var(--lux-line-soft);
    border-radius: 14px;
    padding: .85rem 1.1rem;
    color: var(--lux-text);
    font-family: var(--lux-body);
    transition: border-color .25s ease, box-shadow .25s ease;
}

body.premium-site .form-control::placeholder {
    color: #a9a293;
}

body.premium-site .form-control:focus {
    border-color: rgba(201, 162, 39, 0.6);
    box-shadow: 0 0 0 .22rem rgba(201, 162, 39, 0.16);
    background: #fff;
}

body.premium-site .alert {
    border-radius: 16px;
    border: 1px solid var(--lux-line-soft);
    font-size: .92rem;
}

body.premium-site .alert-success {
    background: rgba(201, 162, 39, 0.1);
    border-color: rgba(201, 162, 39, 0.35);
    color: #6b5116;
}

/* address blocks (contact) */
body.premium-site address {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    color: var(--lux-muted);
    margin-bottom: 1rem;
    line-height: 1.75;
}

body.premium-site address i {
    color: var(--lux-gold);
    margin-top: .3rem;
}

/* -------------------------------------------------------------- social --- */
body.premium-site .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

/* ----------------------------------------------------------- articles ---- */
body.premium-site .article-card {
    overflow: hidden;
}

body.premium-site .article-card > a {
    display: block;
    overflow: hidden;
}

body.premium-site .article-card .article-cover {
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

body.premium-site .ratio-lux {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--lux-line-soft);
    box-shadow: var(--lux-shadow-sm);
}

body.premium-site .ratio-lux .article-cover {
    aspect-ratio: 16 / 9;
}

body.premium-site .article-card:hover .article-cover {
    transform: scale(1.05);
}

body.premium-site .article-card .card-title a {
    color: var(--lux-text);
}

body.premium-site .article-card .card-title a:hover {
    color: var(--lux-gold-deep);
}

body.premium-site .article-category {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: .7rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid var(--lux-line);
    color: var(--lux-gold-deep);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.premium-site .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    color: var(--lux-muted);
    font-size: .8rem;
    letter-spacing: .04em;
}

body.premium-site .article-meta i {
    color: var(--lux-gold);
}

body.premium-site .article-body {
    color: #26241d;
    font-size: 1.03rem;
    line-height: 1.95;
}

body.premium-site .article-body h2,
body.premium-site .article-body h3 {
    margin-top: 1.8rem;
    font-weight: 600;
}

body.premium-site .article-body img {
    border-radius: 16px;
    border: 1px solid var(--lux-line-soft);
}

body.premium-site .article-body p:last-child {
    margin-bottom: 0;
}

body.premium-site .pagination {
    gap: .35rem;
}

body.premium-site .pagination .page-link {
    border: 1px solid var(--lux-line);
    border-radius: 12px;
    padding: .55rem .95rem;
    color: var(--lux-gold-deep);
    background: transparent;
    font-weight: 600;
    font-size: .88rem;
}

body.premium-site .pagination .page-link:hover {
    background: rgba(201, 162, 39, 0.14);
    color: var(--lux-gold-deep);
}

body.premium-site .pagination .page-item.active .page-link {
    background: var(--lux-gradient-gold);
    border-color: transparent;
    color: #1b1508;
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .pagination .page-item.disabled .page-link {
    color: #b9b2a3;
    border-color: var(--lux-line-soft);
}

/* -------------------------------------------------- article sidebar ---- */
body.premium-site .article-sidebar {
    background: linear-gradient(180deg, var(--lux-paper), var(--lux-ivory));
    border: 1px solid var(--lux-line-soft);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: var(--lux-shadow-sm);
    position: sticky;
    top: 100px;
}

body.premium-site .article-sidebar .sidebar-title {
    font-family: var(--lux-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--lux-ink);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--lux-line-soft);
}

body.premium-site .article-sidebar .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.premium-site .article-sidebar .sidebar-menu li {
    margin-bottom: 0.35rem;
}

body.premium-site .article-sidebar .sidebar-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    color: var(--lux-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all .25s ease;
}

body.premium-site .article-sidebar .sidebar-menu li a:hover {
    background: rgba(201, 162, 39, 0.1);
    color: var(--lux-gold-deep);
}

body.premium-site .article-sidebar .sidebar-menu li a.active {
    background: var(--lux-gradient-gold);
    color: #1b1508;
    font-weight: 600;
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .article-sidebar .sidebar-menu li a .badge {
    font-size: 0.7rem;
    background: rgba(201, 162, 39, 0.15);
    color: var(--lux-gold-deep);
    font-weight: 600;
}

body.premium-site .article-sidebar .sidebar-menu li a.active .badge {
    background: rgba(27, 21, 8, 0.15);
}

/* -------------------------------------------------- article detail ---- */
body.premium-site .article-detail {
    background: linear-gradient(180deg, var(--lux-paper), var(--lux-ivory));
    border: 1px solid var(--lux-line-soft);
    border-radius: 22px;
    padding: 2rem 2.5rem;
    box-shadow: var(--lux-shadow-sm);
}

/* --------------------------------------------------------------- footer -- */
body.premium-site > footer {
    background:
        radial-gradient(720px 320px at 88% 0%, rgba(201, 162, 39, 0.18), transparent 70%),
        url('../images/pattern-lux.svg'),
        linear-gradient(180deg, var(--lux-ink) 0%, var(--lux-obsidian) 100%) !important;
    border-top: 1px solid var(--lux-line) !important;
    color: rgba(247, 243, 234, 0.72);
    padding: 4.2rem 0 1.6rem !important;
}

body.premium-site > footer h4,
body.premium-site > footer h5 {
    font-family: var(--lux-display);
    color: var(--lux-ivory);
    font-size: 1rem;
    letter-spacing: .06em;
    margin-bottom: 1.2rem;
}

body.premium-site > footer .footer-brand {
    font-family: var(--lux-display);
    font-size: 1.35rem;
    color: var(--lux-ivory);
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

body.premium-site > footer .footer-about {
    color: rgba(247, 243, 234, 0.62);
    font-size: .9rem;
    line-height: 1.85;
    max-width: 340px;
}

body.premium-site > footer a {
    color: rgba(247, 243, 234, 0.72);
}

body.premium-site > footer a:hover {
    color: var(--lux-gold-3);
}

body.premium-site > footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
    font-size: .9rem;
}

body.premium-site > footer .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

body.premium-site > footer .footer-links a::before {
    content: '';
    width: 6px;
    height: 1px;
    background: var(--lux-gold);
    opacity: .8;
}

body.premium-site > footer .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .8rem;
    font-size: .9rem;
}

body.premium-site > footer .footer-contact i {
    color: var(--lux-gold);
    width: 18px;
}

body.premium-site > footer .footer-bottom {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(201, 162, 39, 0.18);
    font-size: .82rem;
    color: rgba(247, 243, 234, 0.55);
}

body.premium-site > footer .footer-logo {
    max-height: 54px;
    width: auto;
    object-fit: contain;
}

/* ------------------------------------------------------ back to top ------ */
body.premium-site .lux-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.5);
    background: var(--lux-gradient-gold);
    color: #1b1508;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    box-shadow: var(--lux-shadow-gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
    cursor: pointer;
}

body.premium-site .lux-top i {
    font-size: .95rem;
}

body.premium-site .lux-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.premium-site .lux-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 46px -18px rgba(201, 162, 39, 0.75);
}

/* ------------------------------------------------------- animations ------ */
@keyframes luxFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

@keyframes luxPulse {
    0%, 100% { opacity: .25; transform: scaleY(.7); }
    50%      { opacity: 1; transform: scaleY(1); }
}

body.premium-site .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

body.premium-site .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.premium-site .reveal,
    body.premium-site .hero > .container,
    body.premium-site .hero-scroll span {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------ misc refinements - */
body.premium-site .list-unstyled li i.me-3 {
    color: var(--lux-gold);
}

body.premium-site .badge.rounded-pill.bg-white {
    background: transparent !important;
}

body.premium-site .text-white-50 {
    color: rgba(247, 243, 234, 0.68) !important;
}

body.premium-site hr {
    border-color: var(--lux-line);
    opacity: 1;
}

body.premium-site .section-dark .card-text,
body.premium-site .section-dark .lead {
    color: var(--lux-muted-dark);
}

body.premium-site .section-dark .service-icon {
    box-shadow: 0 18px 40px -18px rgba(201, 162, 39, 0.8);
}

/* ------------------------------------------------------------ responsive - */
@media (max-width: 991.98px) {
    body.premium-site .navbar {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    body.premium-site .navbar-collapse {
        background: rgba(8, 8, 12, 0.97);
        border: 1px solid var(--lux-line);
        border-radius: 16px;
        margin-top: .9rem;
        padding: .8rem .6rem 1rem;
    }

    body.premium-site .nav-link::after {
        display: none;
    }

    body.premium-site .hero {
        padding-top: 120px;
    }

    body.premium-site section {
        padding: 3.6rem 0;
    }

    body.premium-site .page-hero {
        margin-top: 4.2rem;
        padding: 3.6rem 0 3rem;
    }

    body.premium-site .info-card,
    body.premium-site .card-body {
        padding: 1.6rem;
    }

    body.premium-site .lux-top {
        right: 1rem;
        bottom: 1rem;
        width: 48px;
        height: 48px;
    }
}

/* =============================================================================
   Backlink service page (backlink.php)
   ============================================================================= */
body.premium-site section[id] {
    scroll-margin-top: 96px;
}

body.premium-site .text-start .section-title::after {
    margin-left: 0;
    margin-right: 0;
}

/* table of contents ------------------------------------------------------- */
body.premium-site .lux-toc {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 1.6rem 2.4rem;
    align-items: start;
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    box-shadow: var(--lux-shadow-sm);
}

body.premium-site .lux-toc-head {
    border-right: 1px dashed var(--lux-line);
    padding-right: 1.6rem;
}

body.premium-site .lux-toc-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .35rem 1rem;
}

body.premium-site .lux-toc-list a {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: .5rem .7rem;
    border-radius: 12px;
    color: var(--lux-text);
    font-weight: 500;
    line-height: 1.5;
}

body.premium-site .lux-toc-list a:hover {
    background: rgba(201, 162, 39, 0.1);
    color: var(--lux-gold-deep);
}

body.premium-site .lux-toc-list .num {
    font-family: var(--lux-display);
    font-weight: 700;
    color: var(--lux-gold);
    letter-spacing: .06em;
    flex: 0 0 auto;
}

/* generic panel / chips --------------------------------------------------- */
body.premium-site .lux-panel {
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-left: 3px solid var(--lux-gold);
    border-radius: 20px;
    padding: 2rem 2.2rem;
    box-shadow: var(--lux-shadow-sm);
}

body.premium-site .lux-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

body.premium-site .lux-chip {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--lux-line);
    background: rgba(201, 162, 39, 0.08);
    color: var(--lux-gold-deep);
    font-size: .92rem;
    font-weight: 500;
}

body.premium-site .lux-chip i {
    font-size: .75rem;
}

/* benefit cards ----------------------------------------------------------- */
body.premium-site .lux-benefit {
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-radius: 20px;
    padding: 1.8rem 1.4rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.premium-site .lux-benefit:hover {
    transform: translateY(-6px);
    border-color: var(--lux-line);
    box-shadow: var(--lux-shadow);
}

body.premium-site .lux-benefit-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--lux-gradient-gold);
    color: var(--lux-obsidian);
    font-size: 1.4rem;
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .lux-benefit h3 {
    margin-bottom: .5rem;
}

body.premium-site .lux-benefit p {
    color: var(--lux-muted);
}

/* bullet lists ------------------------------------------------------------ */
body.premium-site .lux-bullets {
    list-style: none;
    padding: 0;
}

body.premium-site .lux-bullets li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--lux-line-soft);
    line-height: 1.7;
}

body.premium-site .lux-bullets li:last-child {
    border-bottom: none;
}

body.premium-site .lux-bullets li i {
    color: var(--lux-gold);
    margin-top: .35rem;
    flex: 0 0 auto;
}

body.premium-site .section-dark .lux-bullets li {
    border-bottom-color: rgba(247, 243, 234, 0.12);
}

body.premium-site .lux-bullets-wide li {
    padding: .7rem 0;
}

/* results card ------------------------------------------------------------ */
body.premium-site .lux-result-card {
    background: rgba(247, 243, 234, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 22px;
    padding: 2rem 2.2rem;
}

body.premium-site .lux-result-tag {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--lux-gradient-gold);
    color: var(--lux-obsidian);
    font-weight: 600;
    font-size: .86rem;
    margin-bottom: 1rem;
}

/* comparison cards -------------------------------------------------------- */
body.premium-site .lux-compare {
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    position: relative;
    overflow: hidden;
}

body.premium-site .lux-compare::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--lux-gradient-gold);
}

body.premium-site .lux-compare-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

body.premium-site .lux-compare-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--lux-obsidian);
    color: var(--lux-gold-2);
    font-size: 1.3rem;
    flex: 0 0 auto;
}

body.premium-site .lux-compare-label {
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lux-gold-deep);
}

/* quality checklist ------------------------------------------------------- */
body.premium-site .lux-check {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    transition: border-color .3s ease, transform .3s ease;
}

body.premium-site .lux-check:hover {
    border-color: var(--lux-line);
    transform: translateY(-4px);
}

body.premium-site .lux-check-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--lux-line);
    background: rgba(201, 162, 39, 0.1);
    color: var(--lux-gold-deep);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

/* link building steps ----------------------------------------------------- */
body.premium-site .lux-steps {
    display: grid;
    gap: .9rem;
}

body.premium-site .lux-step {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: rgba(247, 243, 234, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 16px;
    padding: 1rem 1.3rem;
}

body.premium-site .lux-step-num {
    font-family: var(--lux-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--lux-gold-2);
    flex: 0 0 auto;
}

/* packages ---------------------------------------------------------------- */
body.premium-site .lux-price-tag {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.3rem;
    border-radius: 999px;
    background: var(--lux-obsidian);
    color: var(--lux-gold-2);
    font-weight: 600;
    border: 1px solid var(--lux-line);
}

body.premium-site .lux-package {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--lux-paper);
    border: 1px solid var(--lux-line-soft);
    border-radius: 24px;
    padding: 2.2rem 1.9rem;
    box-shadow: var(--lux-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

body.premium-site .lux-package:hover {
    transform: translateY(-8px);
    box-shadow: var(--lux-shadow);
}

body.premium-site .lux-package.is-featured {
    background:
        radial-gradient(600px 240px at 80% -10%, rgba(201, 162, 39, 0.28), transparent 70%),
        linear-gradient(160deg, var(--lux-ink) 0%, var(--lux-obsidian) 100%);
    border-color: rgba(201, 162, 39, 0.55);
    color: var(--lux-ivory);
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .lux-package.is-featured h3,
body.premium-site .lux-package.is-featured .lux-package-note {
    color: var(--lux-ivory);
}

body.premium-site .lux-package.is-featured .lux-bullets li {
    border-bottom-color: rgba(247, 243, 234, 0.12);
}

body.premium-site .lux-package-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: .35rem 1.1rem;
    border-radius: 999px;
    background: var(--lux-gradient-gold);
    color: var(--lux-obsidian);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
    box-shadow: var(--lux-shadow-gold);
}

body.premium-site .lux-package-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid var(--lux-line);
    color: var(--lux-gold-deep);
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
}

body.premium-site .lux-package.is-featured .lux-package-icon {
    background: rgba(201, 162, 39, 0.18);
    color: var(--lux-gold-2);
}

body.premium-site .lux-package .lux-bullets {
    flex-grow: 1;
}

body.premium-site .lux-package-note {
    font-size: .92rem;
    color: var(--lux-muted);
    background: rgba(201, 162, 39, 0.08);
    border-radius: 12px;
    padding: .8rem 1rem;
}

body.premium-site .lux-package.is-featured .lux-package-note {
    background: rgba(247, 243, 234, 0.08);
}

/* step cards with title + description ------------------------------------- */
body.premium-site .lux-step {
    align-items: flex-start;
}

body.premium-site .lux-step-body {
    flex: 1;
}

body.premium-site .lux-step-title {
    margin-bottom: .3rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--lux-ivory);
    line-height: 1.5;
}

body.premium-site .lux-step-body p {
    margin-bottom: 0;
    font-size: .93rem;
    line-height: 1.7;
    color: rgba(247, 243, 234, 0.72);
}

/* ------------------------------------------------------- responsive ----- */
@media (max-width: 991.98px) {
    body.premium-site .lux-toc {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    body.premium-site .lux-toc-head {
        border-right: none;
        border-bottom: 1px dashed var(--lux-line);
        padding-right: 0;
        padding-bottom: 1rem;
    }

    body.premium-site .lux-panel,
    body.premium-site .lux-compare,
    body.premium-site .lux-result-card {
        padding: 1.5rem;
    }
}

/* ------------------------------------------------- submenu / dropdown ----- */
/* Glassmorphism submenu panel: semi-transparent black + backdrop blur,
   faint gold border, smooth fade & slide when hovering the parent menu.  */

body.premium-site .navbar .nav-item.dropdown {
    position: relative;
}

body.premium-site .navbar .dropdown-menu {
    --lux-submenu-border: rgba(212, 175, 55, 0.3);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    width: max-content;
    min-width: 254px;
    max-width: min(90vw, 340px);
    margin-top: 0;
    padding: .5rem;
    color: var(--lux-ivory);
    font-size: .95rem;
    list-style: none;
    border: 1px solid var(--lux-submenu-border);
    border-radius: 16px;
    background: rgba(8, 8, 12, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}

body.premium-site .navbar .dropdown-menu.dropdown-menu-end {
    left: auto;
    right: 0;
}

body.premium-site .navbar .dropdown-item {
    display: block;
    width: 100%;
    padding: .64rem .9rem;
    border-radius: 10px;
    color: rgba(247, 243, 234, .8);
    font-size: .93rem;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: normal;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.premium-site .navbar .dropdown-item.active,
body.premium-site .navbar .dropdown-item:active {
    color: var(--lux-gold-2);
    background: rgba(212, 175, 55, .16);
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, .8);
    transform: translateX(4px);
}

body.premium-site .navbar .dropdown-item:hover,
body.premium-site .navbar .dropdown-item:focus-visible {
    color: #fff;
    background: linear-gradient(120deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .05));
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, .65);
    transform: translateX(4px);
}

body.premium-site .navbar .dropdown-item:focus-visible {
    outline: none;
}

body.premium-site .navbar .dropdown-divider {
    margin: .45rem .35rem;
    border-top: 1px solid rgba(212, 175, 55, .18);
}

body.premium-site .navbar .dropdown-toggle::after {
    border-top-color: var(--lux-gold-2);
    transition: transform .3s ease;
}

body.premium-site .navbar .nav-item.dropdown:hover > .dropdown-toggle::after,
body.premium-site .navbar .nav-item.dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* hover open: fade + slide down (desktop pointer devices only) ----------- */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {

    body.premium-site .navbar .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px) scale(.97);
        transform-origin: top left;
        pointer-events: none;
        transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
    }

    body.premium-site .navbar .dropdown-menu.dropdown-menu-end {
        transform-origin: top right;
    }

    body.premium-site .navbar .nav-item.dropdown:hover > .dropdown-menu,
    body.premium-site .navbar .nav-item.dropdown.show > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition: opacity .28s ease, transform .28s ease, visibility 0s linear 0s;
    }
}

/* collapsed navbar (mobile): submenu sits in the flow, opens via Bootstrap */
@media (max-width: 991.98px) {

    body.premium-site .navbar .dropdown-menu {
        position: static;
        width: auto;
        max-width: none;
        margin: .2rem 0 .5rem;
        padding: .45rem;
        transform: none;
    }

    body.premium-site .navbar .dropdown-menu.show {
        animation: luxSubmenuIn .28s ease both;
    }
}

@keyframes luxSubmenuIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    body.premium-site .navbar .dropdown-menu,
    body.premium-site .navbar .dropdown-item,
    body.premium-site .navbar .dropdown-toggle::after {
        transition: none !important;
        animation: none !important;
    }
}