/* ============================================================
   STATES BOOK PUBLISHING — PREMIUM LUXURY THEME
   Dark ink + gold foil · liquid glass · 3D motion
   Loaded AFTER styles.css — overrides + new lx- components
   ============================================================ */

:root {
    --lx-ink: #070E1D;
    --lx-ink-2: #0B1830;
    --lx-ink-3: #12233F;
    --lx-navy: #1A2F4B;
    --lx-gold: #D4AF37;
    --lx-gold-soft: #F0DA8B;
    --lx-gold-deep: #9A7B1E;
    --lx-cream: #FAF6EC;
    --lx-paper: #FDFCF8;
    --lx-text: #E9EEF7;
    --lx-muted: #93A5BF;
    --lx-line: rgba(212, 175, 55, 0.22);
    --lx-glass: rgba(255, 255, 255, 0.055);
    --lx-glass-strong: rgba(13, 26, 48, 0.72);
    --lx-radius: 22px;
    --lx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lx-font-display: 'Bodoni Moda', 'Cormorant Garamond', serif;
    --lx-font-body: 'Jost', 'Montserrat', sans-serif;
}

/* ---------- Global typography upgrade (site-wide) ---------- */
body {
    font-family: var(--lx-font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-title, .hero-title, .cta-title, .appointment-title, .form-title {
    font-family: var(--lx-font-display) !important;
}

::selection { background: var(--lx-gold); color: var(--lx-ink); }

html { overflow-x: clip; }

/* Lenis smooth-scroll required resets (scroll-behavior:smooth breaks it) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--lx-ink); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--lx-gold), var(--lx-gold-deep));
    border-radius: 8px;
}

/* ============================================================
   NAVBAR — dark liquid glass (site-wide)
   ============================================================ */
.navbar {
    background: linear-gradient(180deg, rgba(7, 14, 29, 0.92), rgba(7, 14, 29, 0.78)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--lx-line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: background 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease);
}

.navbar .nav-link {
    color: var(--lx-text) !important;
    font-family: var(--lx-font-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--lx-gold), var(--lx-gold-soft));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--lx-ease);
}

.navbar .nav-link:hover { color: var(--lx-gold-soft) !important; }
.navbar .nav-link:hover::after { transform: scaleX(1); }

.navbar .nav-phone {
    color: var(--lx-gold-soft) !important;
    font-weight: 600;
}

.navbar .dropdown-menu {
    background: var(--lx-glass-strong) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--lx-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.navbar .dropdown-item {
    color: var(--lx-text) !important;
    transition: all 0.25s ease;
}

.navbar .dropdown-item:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    color: var(--lx-gold-soft) !important;
    padding-left: 26px;
}

.navbar .btn-nav-publish {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft)) !important;
    color: var(--lx-ink) !important;
    font-weight: 700;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35);
    transition: transform 0.3s var(--lx-ease), box-shadow 0.3s var(--lx-ease);
}

.navbar .btn-nav-publish:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5);
}

.mobile-menu-toggle span { background: var(--lx-gold) !important; }

/* Mobile nav panel — styles.css never re-enables display on mobile, fix it here */
@media (max-width: 1023px) {
    .nav-links {
        display: flex !important;
        background: var(--lx-glass-strong) !important;
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--lx-line);
        top: 92px !important;
        max-height: calc(100vh - 92px) !important;
    }

    /* compact mobile header; logo PNG has huge transparent margins so it must be
       set large for the actual mark to read at a good size */
    .nav-container { height: 92px !important; padding-top: 0; padding-bottom: 0; }
    .nav-logo-img {
        height: 158px !important;
        max-width: 270px !important;
    }

    /* push every hero clear of the fixed 92px navbar so text/buttons aren't glued to it */
    .lx-hero { padding-top: 132px !important; }
    .hero-section { padding-top: 132px !important; }
    .about-hero-section { padding-top: 124px !important; }
    .contact-hero-section { padding-top: 124px !important; }
}

/* Desktop: drop the About-Us + Contact banner text clear of the fixed header */
@media (min-width: 1024px) {
    .about-hero-section { padding-top: 190px !important; padding-bottom: 96px !important; }
    .contact-hero-section { padding-top: 180px !important; padding-bottom: 90px !important; }
}

/* ============================================================
   BUTTONS (site-wide)
   ============================================================ */
.btn-start-publishing,
.form-submit-btn,
.form-submit-appointment {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft)) !important;
    color: var(--lx-ink) !important;
    font-family: var(--lx-font-body);
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 36px !important;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.32);
    transition: transform 0.35s var(--lx-ease), box-shadow 0.35s var(--lx-ease);
}

.btn-start-publishing::before,
.form-submit-btn::before,
.form-submit-appointment::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--lx-ease);
}

.btn-start-publishing:hover,
.form-submit-btn:hover,
.form-submit-appointment:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 44px rgba(212, 175, 55, 0.5);
}

.btn-start-publishing:hover::before,
.form-submit-btn:hover::before,
.form-submit-appointment:hover::before { left: 130%; }

.btn-live-chat {
    background: transparent !important;
    color: var(--lx-gold-soft) !important;
    border: 1.5px solid var(--lx-line) !important;
    border-radius: 999px !important;
    padding: 16px 36px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: all 0.35s var(--lx-ease);
}

.btn-live-chat:hover {
    border-color: var(--lx-gold) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    transform: translateY(-3px);
}

/* Light sections need a visible outline button */
.lx-light .btn-live-chat {
    color: var(--lx-navy) !important;
    border-color: rgba(26, 47, 75, 0.35) !important;
}
.lx-light .btn-live-chat:hover {
    border-color: var(--lx-gold) !important;
    color: var(--lx-gold-deep) !important;
}

/* ============================================================
   HERO — cinematic 3D
   ============================================================ */
.lx-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(1100px 600px at 78% -10%, rgba(212, 175, 55, 0.16), transparent 60%),
        radial-gradient(900px 700px at -10% 110%, rgba(6, 78, 59, 0.35), transparent 55%),
        radial-gradient(700px 500px at 50% 120%, rgba(26, 47, 75, 0.8), transparent 70%),
        linear-gradient(165deg, var(--lx-ink) 0%, var(--lx-ink-2) 55%, #0A1526 100%);
    overflow: hidden;
    padding: 140px 0 90px;
}

.lx-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---------- THREE.js BOOK COSMOS (full hero background) ---------- */
.lx-three {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.lx-hero-canvas { width: 100%; height: 100%; }

/* legacy shell kept for safety */
.lx-magic {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 720px;
    height: 560px;
    z-index: 1;
    pointer-events: none;
    perspective: 1100px;
    will-change: transform;
}

/* open book — two angled pages seen in 3D */
.lx-mbook {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 480px;
    height: 200px;
    margin-left: -240px;
    transform-style: preserve-3d;
    transform: rotateX(52deg);
    will-change: transform;
}

.mpage {
    position: absolute;
    bottom: 0;
    width: 236px;
    height: 196px;
    background:
        radial-gradient(220px 120px at 100% 50%, rgba(212, 175, 55, 0.25), transparent 70%),
        linear-gradient(100deg, #F7F1DE 0%, #EFE6C8 55%, #E4D7B2 100%);
    box-shadow: inset 0 0 34px rgba(154, 123, 30, 0.35), 0 18px 50px rgba(0, 0, 0, 0.45);
    will-change: transform;
}

.mpage::after {
    content: '';
    position: absolute;
    inset: 14% 12%;
    background: repeating-linear-gradient(180deg, rgba(110, 90, 50, 0.3) 0 2px, transparent 2px 11px);
}

.mpage.left {
    right: 50%;
    border-radius: 14px 3px 3px 24px;
    transform-origin: right center;
    transform: rotateY(26deg);
    animation: mpageL 5.5s ease-in-out infinite;
}

.mpage.right {
    left: 50%;
    border-radius: 3px 14px 24px 3px;
    transform-origin: left center;
    transform: rotateY(-26deg);
    background:
        radial-gradient(220px 120px at 0% 50%, rgba(212, 175, 55, 0.25), transparent 70%),
        linear-gradient(80deg, #E4D7B2 0%, #EFE6C8 45%, #F7F1DE 100%);
    animation: mpageR 5.5s ease-in-out infinite;
}

@keyframes mpageL { 0%,100% { transform: rotateY(26deg); } 50% { transform: rotateY(18deg); } }
@keyframes mpageR { 0%,100% { transform: rotateY(-26deg); } 50% { transform: rotateY(-18deg); } }

/* glowing spine */
.mspine {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 6px;
    height: 200px;
    margin-left: -3px;
    background: linear-gradient(180deg, var(--lx-gold-soft), var(--lx-gold));
    filter: blur(2px);
    box-shadow: 0 0 26px 8px rgba(240, 218, 139, 0.65);
    animation: mspineGlow 3s ease-in-out infinite;
}

@keyframes mspineGlow {
    0%, 100% { box-shadow: 0 0 26px 8px rgba(240, 218, 139, 0.65); }
    50% { box-shadow: 0 0 44px 14px rgba(240, 218, 139, 0.95); }
}

/* stacked page-block under the open pages */
.medge {
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 470px;
    height: 16px;
    margin-left: -235px;
    border-radius: 4px 4px 10px 10px;
    background: repeating-linear-gradient(180deg, #EDE4C6 0 2px, #CFC29A 2px 4px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5);
    transform: translateZ(-12px);
}

/* rising light beam */
.lx-mbeam {
    position: absolute;
    left: 50%;
    bottom: 150px;
    width: 460px;
    height: 400px;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(240, 218, 139, 0.5), rgba(240, 218, 139, 0.14) 55%, transparent);
    clip-path: polygon(41% 100%, 59% 100%, 96% 0%, 4% 0%);
    filter: blur(16px);
    mix-blend-mode: screen;
    animation: mbeam 4s ease-in-out infinite;
    will-change: opacity, transform;
}

@keyframes mbeam {
    0%, 100% { opacity: 0.65; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.12); }
}

/* floor glow */
.lx-mglow {
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 640px;
    height: 130px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 0.12) 55%, transparent 75%);
    filter: blur(22px);
    animation: mbeam 4s ease-in-out infinite;
}

/* halo rings rising from the book */
.lx-mrings span {
    position: absolute;
    left: 50%;
    bottom: 140px;
    width: 220px;
    height: 70px;
    margin-left: -110px;
    border: 1px solid rgba(240, 218, 139, 0.5);
    border-radius: 50%;
    opacity: 0;
    animation: mring 5s linear infinite;
}

.lx-mrings span:nth-child(2) { animation-delay: 2.5s; }

@keyframes mring {
    0% { transform: translateY(0) scale(0.55); opacity: 0; }
    18% { opacity: 0.7; }
    100% { transform: translateY(-300px) scale(1.5); opacity: 0; }
}

/* glowing letters container (JS fills) */
.lx-mletters { position: absolute; inset: 0; z-index: 2; }

.lx-mletter {
    position: absolute;
    left: 50%;
    bottom: 170px;
    font-family: var(--lx-font-display);
    font-style: italic;
    color: var(--lx-gold-soft);
    text-shadow: 0 0 14px rgba(240, 218, 139, 0.9), 0 0 34px rgba(212, 175, 55, 0.5);
    opacity: 0;
    will-change: transform, opacity;
}

/* readability veil — feather-light, the wave stays vivid */
.lx-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 14, 29, 0.25) 0%, transparent 45%, rgba(7, 14, 29, 0.38) 100%);
}

@media (max-width: 900px) {
    .lx-magic { transform: translateX(-50%) scale(0.62); transform-origin: bottom center; bottom: -50px; }
}

/* slow-breathing aurora blobs */
.lx-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    z-index: 0;
    animation: lxAurora 14s ease-in-out infinite alternate;
}
.lx-aurora.a1 { width: 560px; height: 560px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(212,175,55,0.32), transparent 65%); }
.lx-aurora.a2 { width: 500px; height: 500px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(16,120,90,0.4), transparent 65%); animation-delay: -7s; }

@keyframes lxAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(40px, 30px, 0) scale(1.15); }
}

.lx-hero-grid {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.15fr 0.62fr 0.85fr;
    gap: 36px;
    align-items: center;
    width: 100%;
}

/* --- left: copy --- */
.lx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--lx-line);
    background: var(--lx-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--lx-gold-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.lx-hero-badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lx-gold);
    box-shadow: 0 0 12px var(--lx-gold);
    animation: lxPulse 2.2s ease-in-out infinite;
}

@keyframes lxPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.6; }
}

.lx-hero-title {
    font-family: var(--lx-font-display);
    font-size: clamp(44px, 5.2vw, 76px);
    font-weight: 600;
    line-height: 1.06;
    color: var(--lx-text);
    margin-bottom: 26px;
    perspective: 600px;
}

.lx-hero-title .lx-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lx-hero-title .lx-word > span { display: inline-block; will-change: transform; }

.lx-hero-title em {
    font-style: italic;
    background: linear-gradient(100deg, var(--lx-gold-deep) 0%, var(--lx-gold) 35%, var(--lx-gold-soft) 55%, var(--lx-gold) 75%, var(--lx-gold-deep) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lxShimmer 5s linear infinite;
}

@keyframes lxShimmer {
    to { background-position: 200% center; }
}

.lx-hero-desc {
    color: var(--lx-muted);
    font-size: 18px;
    line-height: 1.85;
    font-weight: 300;
    max-width: 480px;
    margin-bottom: 34px;
}

.lx-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }

.lx-hero-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 26px;
    max-width: 500px;
}

.lx-stat { flex: 1; padding-right: 18px; }

.lx-stat + .lx-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 18px;
}

.lx-stat-num {
    font-family: var(--lx-font-display);
    font-size: 34px;
    font-weight: 600;
    color: var(--lx-gold-soft);
    line-height: 1.1;
}

.lx-stat-label {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-top: 6px;
}

/* --- center: 3D book --- */
.lx-book-stage {
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
}

.lx-book-float { animation: lxFloat 7s ease-in-out infinite; will-change: transform; }

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

.lx-book {
    position: relative;
    width: 210px;
    height: 315px;
    transform-style: preserve-3d;
    transform: rotateY(-28deg) rotateX(4deg);
    will-change: transform;
}

.lx-book-face { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; }

.lx-book-front {
    background:
        radial-gradient(140px 200px at 70% 20%, rgba(212, 175, 55, 0.25), transparent 70%),
        linear-gradient(150deg, #16294a 0%, #0d1b34 55%, #091326 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
    transform: translateZ(21px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px 20px;
    overflow: hidden;
}

.lx-book-front::after {
    content: '';
    position: absolute;
    top: 0; left: 10px;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, rgba(212,175,55,0.6), rgba(212,175,55,0.15));
}

.lx-book-front .bk-kicker {
    font-size: 9px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--lx-gold);
    text-align: center;
}

.lx-book-front .bk-title {
    font-family: var(--lx-font-display);
    font-size: 26px;
    line-height: 1.25;
    text-align: center;
    color: var(--lx-cream);
}

.lx-book-front .bk-title em { color: var(--lx-gold-soft); font-style: italic; }

.lx-book-front .bk-orn {
    width: 46px; height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--lx-gold), transparent);
    position: relative;
}

.lx-book-front .bk-orn::after {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    width: 7px; height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--lx-gold);
}

.lx-book-front .bk-author {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lx-muted);
    text-align: center;
}

.lx-book-back {
    background: linear-gradient(150deg, #0d1b34, #091326);
    border: 1px solid rgba(212, 175, 55, 0.2);
    transform: translateZ(-21px) rotateY(180deg);
}

.lx-book-spine {
    width: 42px; height: 100%;
    left: -21px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, #071023, #10203c 60%, #0a1730);
    border: 1px solid rgba(212, 175, 55, 0.3);
    transform: rotateY(-90deg);
    transform-origin: center;
    left: 0;
    margin-left: -21px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lx-book-spine span {
    writing-mode: vertical-rl;
    font-family: var(--lx-font-display);
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--lx-gold-soft);
    text-transform: uppercase;
}

.lx-book-pages {
    width: 40px; height: calc(100% - 12px);
    top: 6px;
    right: 0;
    margin-right: -20px;
    border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(90deg, #ece5d3 0px, #fbf7ea 2px, #d9d0b8 3px);
    transform: rotateY(90deg);
    box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.15);
}

.lx-book-top {
    width: calc(100% - 20px); height: 40px;
    top: 0; left: 10px;
    margin-top: -20px;
    background: repeating-linear-gradient(0deg, #ece5d3 0px, #fbf7ea 2px, #d9d0b8 3px);
    transform: rotateX(90deg);
    border-radius: 2px;
}

.lx-book-glow {
    position: absolute;
    width: 260px; height: 60px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.35), transparent 70%);
    filter: blur(18px);
    animation: lxGlow 7s ease-in-out infinite;
}

@keyframes lxGlow {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
    50% { opacity: 0.45; transform: translateX(-50%) scaleX(0.78); }
}

/* small floating decor books */
.lx-mini-book {
    position: absolute;
    border-radius: 3px;
    background: linear-gradient(140deg, #14263f, #0a1526);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 2;
    opacity: 0.85;
    will-change: transform;
}

.lx-mini-book::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(7, 14, 29, 0.35), transparent 40%);
}

.lx-mini-book.m1 { width: 90px; height: 135px; top: 16%; left: 42%; transform: rotate(-14deg); background: url('covers/cover-14.jpg') center/cover; }
.lx-mini-book.m2 { width: 64px; height: 96px; bottom: 14%; left: 36%; transform: rotate(10deg); opacity: 0.6; background: url('covers/cover-07.jpg') center/cover; }
.lx-mini-book.m3 { width: 74px; height: 111px; top: 22%; right: 4%; transform: rotate(12deg); opacity: 0.7; background: url('covers/cover-01.jpg') center/cover; }

/* --- right: glass form --- */
.lx-form-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: var(--lx-radius);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: 30px 28px 24px;
    transform-style: preserve-3d;
    will-change: transform;
}

.lx-form-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(212,175,55,0.55), transparent 30%, transparent 70%, rgba(212,175,55,0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.lx-form-card .form-title {
    font-size: 26px;
    color: var(--lx-cream);
    text-align: center;
    margin-bottom: 4px;
}

.lx-form-sub {
    text-align: center;
    color: var(--lx-muted);
    font-size: 13px;
    margin-bottom: 20px;
    letter-spacing: 0.04em;
}

.lx-form-card .form-group { margin-bottom: 14px; }

.lx-form-card .form-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
    margin-bottom: 6px;
}

.lx-form-card .form-input {
    width: 100%;
    background: rgba(7, 14, 29, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: var(--lx-text);
    font-family: var(--lx-font-body);
    font-size: 14.5px;
    padding: 12px 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.lx-form-card .form-input::placeholder { color: rgba(147, 165, 191, 0.65); }

.lx-form-card .form-input:focus {
    outline: none;
    border-color: var(--lx-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
    background: rgba(7, 14, 29, 0.75);
}

.lx-form-card .form-textarea { min-height: 74px; resize: vertical; }

.lx-form-card .form-file-input { padding: 10px 12px; font-size: 12.5px; color: var(--lx-muted); }

.lx-form-card .form-submit-btn { width: 100%; margin-top: 6px; }

.lx-form-card .form-footer {
    margin-top: 14px;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lx-muted);
}

/* scroll cue */
.lx-scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--lx-muted);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.lx-scroll-cue .line {
    width: 1px; height: 44px;
    background: linear-gradient(180deg, var(--lx-gold), transparent);
    animation: lxCue 2s ease-in-out infinite;
    transform-origin: top;
}

@keyframes lxCue {
    0% { transform: scaleY(0); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.lx-marquee {
    background: linear-gradient(90deg, var(--lx-gold-deep), var(--lx-gold) 30%, var(--lx-gold-soft) 50%, var(--lx-gold) 70%, var(--lx-gold-deep));
    padding: 16px 0;
    overflow: hidden;
    position: relative;
    z-index: 5;
    box-shadow: 0 20px 60px rgba(212, 175, 55, 0.25);
}

.lx-marquee-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: lxMarquee 28s linear infinite;
    will-change: transform;
}

.lx-marquee span {
    font-family: var(--lx-font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lx-ink);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 48px;
}

.lx-marquee span::after { content: '✦'; font-size: 13px; }

@keyframes lxMarquee {
    to { transform: translateX(-50%); }
}

/* ============================================================
   3D COVERFLOW — real client covers spinning in a ring
   ============================================================ */
.lx-showcase {
    position: relative;
    padding: 90px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 50% 115%, rgba(212, 175, 55, 0.12), transparent 60%),
        linear-gradient(180deg, #0A1526 0%, var(--lx-ink) 55%, var(--lx-ink-2) 100%);
}

.lx-showcase .lx-showcase-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.lx-coverflow {
    position: relative;
    height: 480px;
    perspective: 1600px;
    margin-top: 16px;
    cursor: grab;
    touch-action: pan-y;
}

.lx-coverflow.drag { cursor: grabbing; }

.lx-cf-stage {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 240px;
    height: 360px;
    transform-style: preserve-3d;
    top: 10px;
    will-change: transform;
}

.lx-cf-item {
    position: absolute;
    width: 240px;
    height: 360px;
    left: 0; top: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    backface-visibility: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: var(--lx-ink-3);
}

.lx-cf-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.lx-cf-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent 16%, transparent 84%, rgba(255,255,255,0.14));
    pointer-events: none;
}

.lx-cf-floor {
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 620px;
    max-width: 90%;
    height: 70px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.28), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
}

.lx-cf-hint {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lx-muted);
    margin-top: 18px;
}

/* static fallback: no JS/GSAP or reduced motion → flat scrollable cover row */
html:not(.lx-anim) .lx-coverflow { height: auto; perspective: none; }
html:not(.lx-anim) .lx-cf-stage {
    position: static;
    width: auto; height: auto;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 20px 24px;
}
html:not(.lx-anim) .lx-cf-item { position: static; flex: 0 0 180px; height: 270px; }
html:not(.lx-anim) .lx-cf-floor, html:not(.lx-anim) .lx-cf-hint { display: none; }

@media (max-width: 700px) {
    .lx-coverflow { height: 360px; }
    .lx-cf-stage, .lx-cf-item { width: 160px; height: 240px; }
}

/* ============================================================
   POPUP MODAL — 3D entrance
   ============================================================ */
@keyframes lxModalIn {
    0% { opacity: 0; transform: perspective(900px) translateY(60px) rotateX(-14deg) scale(0.9); }
    100% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0) scale(1); }
}

.modal.show .modal-content {
    animation: lxModalIn 0.55s var(--lx-ease) both;
    transform-origin: center top;
}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.lx-dark {
    background:
        radial-gradient(900px 500px at 85% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
        linear-gradient(180deg, var(--lx-ink) 0%, var(--lx-ink-2) 100%);
    color: var(--lx-text);
    position: relative;
    overflow: hidden;
}

.lx-light {
    background:
        radial-gradient(800px 400px at 10% 0%, rgba(212, 175, 55, 0.07), transparent 60%),
        var(--lx-paper);
    position: relative;
    overflow: hidden;
}

.lx-section { padding: 110px 0; }

.lx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--lx-gold-deep);
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 18px;
}

.lx-kicker::before {
    content: '';
    width: 34px; height: 1px;
    background: var(--lx-gold);
}

.lx-dark .lx-kicker { color: var(--lx-gold-soft); }

.lx-h2 {
    font-family: var(--lx-font-display);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.14;
    color: var(--lx-navy);
    margin-bottom: 22px;
}

.lx-dark .lx-h2 { color: var(--lx-cream); }

.lx-h2 em {
    font-style: italic;
    background: linear-gradient(100deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lx-lead {
    font-size: 17.5px;
    line-height: 1.85;
    font-weight: 300;
    color: var(--slate-600, #475569);
    max-width: 560px;
}

.lx-dark .lx-lead { color: var(--lx-muted); }

/* ============================================================
   SERVICES — 3D tilt cards
   ============================================================ */
.lx-services-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.lx-services-head .lx-lead { margin: 0 auto; }
.lx-services-head .lx-kicker::after { content: ''; width: 34px; height: 1px; background: var(--lx-gold); }

.lx-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

.lx-card {
    position: relative;
    display: block;
    text-decoration: none !important;
    background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: var(--lx-radius);
    padding: 36px 30px;
    transform-style: preserve-3d;
    will-change: transform;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.lx-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, 0.14), transparent 45%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.lx-card:hover::before { opacity: 1; }

.lx-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.lx-card-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
    border: 1px solid rgba(212, 175, 55, 0.35);
    margin-bottom: 22px;
    transform: translateZ(30px);
}

.lx-card-icon svg { width: 28px; height: 28px; stroke: var(--lx-gold-soft); }

.lx-card-num {
    position: absolute;
    top: 24px; right: 26px;
    font-family: var(--lx-font-display);
    font-size: 44px;
    font-style: italic;
    color: rgba(212, 175, 55, 0.16);
    line-height: 1;
}

.lx-card h3 {
    font-family: var(--lx-font-display);
    font-size: 23px;
    color: var(--lx-cream);
    margin-bottom: 12px;
    transform: translateZ(20px);
}

.lx-card p {
    color: var(--lx-muted);
    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 20px;
    transform: translateZ(12px);
}

.lx-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lx-gold-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: translateZ(16px);
    transition: gap 0.3s ease;
}

.lx-card:hover .lx-card-link { gap: 14px; }

/* ============================================================
   SPLIT SECTIONS (why / choose)
   ============================================================ */
.lx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.lx-figure {
    position: relative;
    border-radius: var(--lx-radius);
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(10, 20, 40, 0.35);
}

.lx-figure::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: inherit;
    pointer-events: none;
}

.lx-figure img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
    will-change: transform;
    transform: scale(1.12);
}

/* collage/mockup images on light sections: show whole artwork on soft cream */
.lx-figure-light {
    background:
        radial-gradient(400px 300px at 70% 20%, rgba(212, 175, 55, 0.14), transparent 60%),
        linear-gradient(160deg, #FFFFFF, #F4EFE2);
}

.lx-figure-light img { object-fit: contain; padding: 26px; }

.lx-figure-dark {
    background:
        radial-gradient(400px 300px at 50% 30%, rgba(212, 175, 55, 0.12), transparent 65%),
        linear-gradient(165deg, var(--lx-ink-3), var(--lx-ink));
}

.lx-figure-dark img { object-fit: contain; padding: 30px 20px; }

/* ascending helix scene (methodology section) */
.lx-ascend-wrap {
    position: relative;
    border-radius: var(--lx-radius);
    overflow: hidden;
    background:
        radial-gradient(400px 300px at 50% 20%, rgba(212, 175, 55, 0.12), transparent 65%),
        linear-gradient(165deg, var(--lx-ink-3), var(--lx-ink));
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 40px 90px rgba(10, 20, 40, 0.35);
}

.lx-ascend-canvas {
    display: block;
    width: 100%;
    height: 580px;
}

@media (max-width: 900px) { .lx-ascend-canvas { height: 440px; } }

.lx-figure-tag {
    position: absolute;
    left: 22px; bottom: 22px;
    background: rgba(7, 14, 29, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    padding: 14px 20px;
    color: var(--lx-cream);
}

.lx-figure-tag .n { font-family: var(--lx-font-display); font-size: 26px; color: var(--lx-gold-soft); }
.lx-figure-tag .t { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lx-muted); }

.lx-frame {
    position: absolute;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--lx-radius);
    inset: -18px 18px 18px -18px;
    z-index: -1;
}

/* numbered features */
.lx-features { margin: 36px 0 40px; display: flex; flex-direction: column; gap: 8px; }

.lx-feature {
    display: flex;
    gap: 22px;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.4s var(--lx-ease);
}

.lx-light .lx-feature:hover {
    background: #fff;
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 50px rgba(26, 47, 75, 0.1);
    transform: translateX(8px);
}

.lx-dark .lx-feature:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(8px);
}

.lx-feature-num {
    font-family: var(--lx-font-display);
    font-style: italic;
    font-size: 30px;
    color: var(--lx-gold);
    line-height: 1;
    min-width: 46px;
}

.lx-feature h4 {
    font-family: var(--lx-font-body) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lx-navy);
    margin-bottom: 8px;
}

.lx-dark .lx-feature h4 { color: var(--lx-cream); }

.lx-feature p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--slate-600, #475569);
    font-weight: 300;
    margin: 0;
}

.lx-dark .lx-feature p { color: var(--lx-muted); }

/* ============================================================
   PROCESS TIMELINE (strategy)
   ============================================================ */
.lx-steps { position: relative; margin-top: 46px; display: flex; flex-direction: column; gap: 0; }

.lx-step {
    position: relative;
    display: flex;
    gap: 28px;
    padding: 26px 0 26px 0;
}

.lx-step-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
}

.lx-step-dot {
    width: 58px; height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lx-font-display);
    font-style: italic;
    font-size: 20px;
    color: var(--lx-gold-soft);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
    z-index: 1;
    transition: all 0.4s ease;
}

.lx-step:hover .lx-step-dot {
    background: var(--lx-gold);
    color: var(--lx-ink);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
}

.lx-step-rail::after {
    content: '';
    position: absolute;
    top: 58px; bottom: -26px;
    width: 1px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.45), rgba(212, 175, 55, 0.08));
}

.lx-step:last-child .lx-step-rail::after { display: none; }

.lx-step h4 {
    font-family: var(--lx-font-body) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lx-cream);
    margin: 8px 0 8px;
}

.lx-step p { color: var(--lx-muted); font-size: 14.5px; line-height: 1.75; font-weight: 300; margin: 0; max-width: 440px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.lx-testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
    margin-top: 60px;
}

.lx-testi {
    background: #fff;
    border: 1px solid rgba(26, 47, 75, 0.08);
    border-radius: var(--lx-radius);
    padding: 34px 30px;
    box-shadow: 0 24px 60px rgba(26, 47, 75, 0.08);
    position: relative;
    transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease);
    will-change: transform;
}

.lx-testi:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(26, 47, 75, 0.14);
}

.lx-testi .q {
    font-family: var(--lx-font-display);
    font-style: italic;
    font-size: 62px;
    line-height: 0.6;
    color: var(--lx-gold);
    display: block;
    margin-bottom: 20px;
}

.lx-testi .stars { color: var(--lx-gold); letter-spacing: 4px; font-size: 14px; margin-bottom: 14px; }

.lx-testi p { color: #3d4a5c; font-size: 15px; line-height: 1.85; font-weight: 300; margin-bottom: 22px; }

.lx-testi .who { display: flex; align-items: center; gap: 14px; }

.lx-testi .who .av {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--lx-navy), var(--lx-ink-3));
    color: var(--lx-gold-soft);
    font-family: var(--lx-font-display);
    font-size: 17px;
}

.lx-testi .who .nm { font-weight: 600; font-size: 14.5px; color: var(--lx-navy); }
.lx-testi .who .rl { font-size: 12px; color: var(--slate-500, #64748B); letter-spacing: 0.06em; }

/* ============================================================
   APPOINTMENT — dark glass
   ============================================================ */
.lx-appointment .lx-form-panel {
    max-width: 860px;
    margin: 54px auto 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(212, 175, 55, 0.26);
    border-radius: 26px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    padding: 46px;
}

.lx-appointment .form-input-appointment,
.lx-appointment .form-textarea-appointment {
    width: 100%;
    background: rgba(7, 14, 29, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: var(--lx-text) !important;
    font-family: var(--lx-font-body);
    font-size: 15px;
    padding: 16px 20px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lx-appointment .form-input-appointment::placeholder,
.lx-appointment .form-textarea-appointment::placeholder { color: rgba(147, 165, 191, 0.65); }

.lx-appointment .form-input-appointment:focus,
.lx-appointment .form-textarea-appointment:focus {
    outline: none;
    border-color: var(--lx-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.lx-appointment .form-row { display: flex; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.lx-appointment .form-group-appointment { flex: 1; min-width: 220px; }
.lx-appointment .form-submit-wrapper { text-align: center; margin-top: 10px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.lx-cta {
    position: relative;
    padding: 150px 0;
    text-align: center;
    background:
        linear-gradient(rgba(7, 14, 29, 0.82), rgba(7, 14, 29, 0.9)),
        url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?q=80&w=1800&auto=format&fit=crop') center/cover fixed;
    overflow: hidden;
}

.lx-cta .lx-h2 { color: var(--lx-cream); }
.lx-cta .lx-lead { margin: 0 auto 40px; }
.lx-cta .lx-hero-ctas { justify-content: center; margin-bottom: 0; }

.lx-cta-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 640px; height: 640px;
    margin: -320px 0 0 -320px;
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 50%;
    pointer-events: none;
    animation: lxSpin 40s linear infinite;
}

.lx-cta-ring::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--lx-gold);
    box-shadow: 0 0 16px var(--lx-gold);
}

.lx-cta-ring.r2 { width: 480px; height: 480px; margin: -240px 0 0 -240px; animation-direction: reverse; animation-duration: 30s; }

@keyframes lxSpin { to { transform: rotate(360deg); } }

/* ============================================================
   FOOTER — deep ink
   ============================================================ */
.footer {
    background:
        radial-gradient(700px 300px at 90% 0%, rgba(212, 175, 55, 0.06), transparent 60%),
        linear-gradient(180deg, #060c19, #04080f) !important;
    border-top: 1px solid var(--lx-line);
    color: var(--lx-muted) !important;
}

.footer .footer-heading {
    color: var(--lx-gold-soft) !important;
    font-family: var(--lx-font-display);
    letter-spacing: 0.1em;
}

.footer a { color: var(--lx-muted) !important; transition: color 0.3s ease, padding-left 0.3s ease; }
.footer a:hover { color: var(--lx-gold-soft) !important; text-decoration: none; }
.footer .footer-links a:hover { padding-left: 5px; }
.footer .footer-link-icon { color: var(--lx-gold) !important; font-size: 9px; }
.footer .footer-divider { border-color: rgba(212, 175, 55, 0.14) !important; }
.footer .disclaimer-heading { color: var(--lx-cream) !important; font-family: var(--lx-font-display); }
.footer .disclaimer-text, .footer .footer-copyright, .footer .contact-text { color: var(--lx-muted) !important; }
.footer .contact-icon { color: var(--lx-gold) !important; }

/* ============================================================
   POPUP MODAL polish
   ============================================================ */
.modal-content {
    background: linear-gradient(165deg, #0e1d38, #081120) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 22px !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65) !important;
    color: var(--lx-text);
}

.modal-content input, .modal-content textarea, .modal-content select {
    background: rgba(7, 14, 29, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--lx-text) !important;
    border-radius: 12px !important;
}

.modal-content input::placeholder, .modal-content textarea::placeholder { color: rgba(147, 165, 191, 0.6) !important; }

.modal-backdrop { background: rgba(4, 8, 15, 0.7) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* popup lead form — full luxury dark treatment (beats inline popupform styles) */
#exampleModal .bf_text_item {
    background: linear-gradient(165deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(212, 175, 55, 0.3);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5) !important;
    border-radius: 18px !important;
}

#exampleModal .bf_text_item h6 {
    color: var(--lx-cream) !important;
    font-family: var(--lx-font-display) !important;
}

#exampleModal .bf_text_item h6 span {
    color: var(--lx-gold-soft) !important;
    font-style: italic;
    text-shadow: none !important;
}

#exampleModal .bf_text_item h6 b {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: 0.08em;
}

#exampleModal .popup-file-input {
    background: rgba(7, 14, 29, 0.5) !important;
    border: 2px dashed rgba(212, 175, 55, 0.5) !important;
    color: var(--lx-muted) !important;
}

#exampleModal .bf_text_item label { color: var(--lx-muted) !important; }
#exampleModal .ptex-lab { color: var(--lx-muted) !important; }

#exampleModal form input[type="submit"] {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft)) !important;
    color: var(--lx-ink) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35) !important;
}

#exampleModal .close-btn {
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    color: var(--lx-gold-soft) !important;
}

#exampleModal .close-btn:hover {
    background: var(--lx-gold) !important;
    color: var(--lx-ink) !important;
    box-shadow: 0 5px 18px rgba(212, 175, 55, 0.45) !important;
}

/* compact popup — smaller width + height on every device */
#exampleModal .modal_weidth { max-width: 410px !important; }
#exampleModal .bf_text_item { padding: 20px 20px !important; margin: 8px !important; }
#exampleModal .bf_text_item h6 { font-size: 20px !important; margin-bottom: 2px !important; }
#exampleModal .bf_text_item h6 span { font-size: 23px !important; }
#exampleModal .bf_text_item h6 b { font-size: 14px !important; margin-top: 3px !important; }
#exampleModal form ul { margin-top: 12px !important; }
#exampleModal form ul li { margin-bottom: 8px !important; }
#exampleModal form input[type="text"],
#exampleModal form input[type="email"],
#exampleModal form input[type="tel"],
#exampleModal form textarea { padding: 8px 13px !important; font-size: 13.5px !important; }
#exampleModal form textarea { min-height: 50px !important; }
#exampleModal .bf_text_item label { font-size: 11.5px !important; margin-bottom: 3px !important; }
#exampleModal .popup-file-input { padding: 7px 11px !important; font-size: 12px !important; }
#exampleModal form input[type="submit"] { padding: 10px 20px !important; font-size: 13.5px !important; }
#exampleModal .ptex-lab { font-size: 11px !important; margin-top: 8px !important; }

/* ============================================================
   REVEAL STATES (JS-driven, guarded)
   ============================================================ */
.lx-anim [data-reveal] { opacity: 0; will-change: transform, opacity; }
.lx-anim .lx-hero-title .lx-word > span { transform: translateY(110%) rotateX(-40deg); opacity: 0; }

/* progress bar */
.lx-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    z-index: 2000;
    background: transparent;
    pointer-events: none;
}

.lx-progress .bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft));
    transform-origin: left;
    transform: scaleX(0);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
    .lx-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
    .lx-book-stage { display: none; }
}

@media (max-width: 900px) {
    .lx-hero { padding: 130px 0 70px; }
    .lx-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .lx-hero-desc { max-width: 100%; }
    .lx-split { grid-template-columns: 1fr; gap: 48px; }
    .lx-figure img { height: 420px; }
    .lx-section { padding: 80px 0; }
    .lx-cta { padding: 100px 0; background-attachment: scroll; }
    .lx-scroll-cue { display: none; }
    .lx-hero-stats { max-width: 100%; }
}

@media (max-width: 560px) {
    .lx-hero-title { font-size: 40px; }
    .lx-hero-stats { flex-direction: column; gap: 18px; }
    .lx-stat + .lx-stat { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; }
    .lx-form-card { padding: 24px 20px 20px; }
    .lx-appointment .lx-form-panel { padding: 28px 22px; }
    .lx-marquee span { font-size: 14px; }
}

/* ============================================================
   HERO v2 — 3D COVER GALAXY
   ============================================================ */
.lx-hero-grid.v2 { grid-template-columns: 1fr 1fr; gap: 40px; }

.lx-galaxy {
    position: relative;
    height: 560px;
    perspective: 1400px;
    transform-style: preserve-3d;
}

.lx-galaxy-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.gx-item {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(212, 175, 55, 0.08);
    will-change: transform;
    transform-style: preserve-3d;
    animation: gxFloat 7s ease-in-out infinite;
}

.gx-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.gx-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.18), transparent 30%, transparent 75%, rgba(212,175,55,0.12));
    pointer-events: none;
}

@keyframes gxFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -16px; }
}

/* six covers at layered depths — depth drives parallax via data-depth */
.gx-item.g1 { width: 250px; height: 375px; left: 50%; top: 50%; margin-left: -125px; margin-top: -187px !important; z-index: 6; animation: none; }
.gx-item.g2 { width: 150px; height: 225px; left: 4%;  top: 6%;  z-index: 5; animation-delay: -1.2s; }
.gx-item.g3 { width: 130px; height: 195px; right: 2%; top: 12%; z-index: 4; animation-delay: -2.8s; }
.gx-item.g4 { width: 120px; height: 180px; left: 0;   bottom: 8%; z-index: 3; animation-delay: -4.1s; }
.gx-item.g5 { width: 140px; height: 210px; right: 5%; bottom: 4%; z-index: 5; animation-delay: -5.3s; }
.gx-item.g6 { width: 96px;  height: 144px; right: 30%; top: 0;  z-index: 2; animation-delay: -3.5s; opacity: 0.85; }

/* the center hero cover gets its own slow breathing tilt */
.gx-item.g1 { animation: gxHero 9s ease-in-out infinite; }
@keyframes gxHero {
    0%, 100% { transform: rotateY(-14deg) rotateX(4deg) translateZ(90px); }
    50% { transform: rotateY(-8deg) rotateX(2deg) translateZ(110px); }
}

/* orbit rings behind the galaxy */
.lx-orbit {
    position: absolute;
    left: 50%; top: 50%;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.lx-orbit.o1 { width: 500px; height: 500px; margin: -250px 0 0 -250px; transform: rotateX(72deg); animation: orbitSpin 26s linear infinite; }
.lx-orbit.o2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; transform: rotateX(72deg) rotateZ(40deg); animation: orbitSpin 18s linear infinite reverse; border-color: rgba(212, 175, 55, 0.14); }

.lx-orbit .spark {
    position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lx-gold);
    box-shadow: 0 0 14px var(--lx-gold);
}

@keyframes orbitSpin {
    from { transform: rotateX(72deg) rotateZ(0); }
    to { transform: rotateX(72deg) rotateZ(360deg); }
}

.lx-orbit.o2 { animation-name: orbitSpin2; }
@keyframes orbitSpin2 {
    from { transform: rotateX(72deg) rotateZ(40deg); }
    to { transform: rotateX(72deg) rotateZ(400deg); }
}

.lx-galaxy-glow {
    position: absolute;
    left: 50%; bottom: -10px;
    width: 420px; height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.3), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

/* compact hero form — small, tidy, premium */
.lx-form-hero { max-width: 460px; width: 100%; justify-self: end; padding: 18px 20px 12px; border-radius: 18px; }
.lx-form-hero .form-title { font-size: 19px; margin-bottom: 2px; }
.lx-form-hero .lx-form-sub { margin-bottom: 10px; font-size: 12px; }
.lx-form-hero .form-group { margin-bottom: 8px; }
.lx-form-hero .form-input { padding: 8px 12px; font-size: 13.5px; border-radius: 10px; }
.lx-form-hero .form-textarea { min-height: 40px; }
.lx-form-hero .form-label { margin-bottom: 3px; font-size: 9.5px; }
.lx-form-hero .form-file-input { padding: 7px 10px; font-size: 11.5px; }
.lx-form-hero .form-submit-btn { padding: 11px 26px !important; font-size: 13px; }
.lx-form-hero .form-footer { margin-top: 8px; font-size: 9.5px; }

/* galaxy on light sections (Strategic Visibility) */
.lx-light .lx-galaxy { height: 520px; }
.lx-light .gx-item { box-shadow: 0 34px 70px rgba(26, 47, 75, 0.35), 0 0 34px rgba(212, 175, 55, 0.1); }
.lx-light .lx-orbit { border-color: rgba(154, 123, 30, 0.3); }
.lx-light .lx-orbit.o2 { border-color: rgba(154, 123, 30, 0.18); }

@media (max-width: 1180px) {
    .lx-hero-grid.v2 { grid-template-columns: 1fr; }
    .lx-form-hero { justify-self: stretch; max-width: 640px; margin: 0 auto; }
    .lx-galaxy { height: 460px; max-width: 560px; margin: 0 auto; width: 100%; }
}

@media (max-width: 560px) {
    .lx-galaxy { height: 380px; }
    .gx-item.g1 { width: 180px; height: 270px; margin-left: -90px; margin-top: -135px !important; }
    .gx-item.g2 { width: 100px; height: 150px; }
    .gx-item.g3 { width: 90px; height: 135px; }
    .gx-item.g4 { width: 84px; height: 126px; }
    .gx-item.g5 { width: 96px; height: 144px; }
    .gx-item.g6 { display: none; }
    .lx-orbit.o1 { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
    .lx-orbit.o2 { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
}

/* ============================================================
   CLAIM — 35% OFF lead capture (form's new home)
   ============================================================ */
.lx-claim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.lx-claim-art { position: relative; text-align: center; }

.lx-claim-canvas {
    display: block;
    width: 100%;
    height: 540px;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 900px) { .lx-claim-canvas { height: 420px; } }

.lx-off-badge {
    position: absolute;
    top: -6px; right: 8%;
    width: 118px; height: 118px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 120deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft), var(--lx-gold), var(--lx-gold-deep));
    color: var(--lx-ink);
    font-weight: 800;
    box-shadow: 0 16px 40px rgba(212, 175, 55, 0.4);
    animation: lxBadgeSpin 12s linear infinite;
    z-index: 3;
}

.lx-off-badge > div { animation: lxBadgeSpinR 12s linear infinite; text-align: center; }
.lx-off-badge .pct { font-size: 30px; line-height: 1; font-family: var(--lx-font-display); }
.lx-off-badge .lbl { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; }

@keyframes lxBadgeSpin { to { transform: rotate(360deg); } }
@keyframes lxBadgeSpinR { to { transform: rotate(-360deg); } }

@media (max-width: 900px) {
    .lx-claim-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ============================================================
   PLATFORMS — distribution logo marquee (light)
   ============================================================ */
.lx-platforms { padding: 64px 0 58px; }

.lx-platforms .lx-plat-head {
    text-align: center;
    margin-bottom: 34px;
}

.lx-plat-track-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lx-plat-track {
    display: flex;
    align-items: center;
    gap: 70px;
    width: max-content;
    animation: lxMarquee 26s linear infinite;
    will-change: transform;
}

.lx-plat-track img {
    height: 44px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(35%);
    transition: all 0.35s ease;
}

.lx-plat-track img:hover { opacity: 1; filter: none; transform: scale(1.1); }

/* ============================================================
   GENRES — 3D genre shelf (Three.js) + gold chips
   ============================================================ */
/* canvas paints the WHOLE section background; stage just reserves shelf space */
.lx-genres-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.lx-genres-content { position: relative; z-index: 2; }

.lx-genre-stage { height: 560px; margin-top: 10px; }

.lx-genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

.lx-gchip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(255, 255, 255, 0.04);
    color: var(--lx-text);
    font-family: var(--lx-font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s var(--lx-ease);
}

.lx-gchip span {
    font-size: 8.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
    font-weight: 600;
}

.lx-gchip:hover { border-color: rgba(212, 175, 55, 0.65); transform: translateY(-2px); }

.lx-gchip.active {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft));
    color: var(--lx-ink);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35);
}

.lx-gchip.active span { color: rgba(7, 14, 29, 0.65); }

@media (max-width: 700px) {
    .lx-genre-stage { height: 430px; }
    .lx-gchip { padding: 8px 16px; font-size: 12px; }
}

/* ============================================================
   GENRES — 3D cover-backed genre cards (dark)
   ============================================================ */
.lx-genres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 60px;
}

.lx-genre-card {
    position: relative;
    height: 340px;
    border-radius: var(--lx-radius);
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.lx-genre-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--lx-ease);
}

.lx-genre-card:hover img { transform: scale(1.09); }

.lx-genre-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,14,29,0.15) 0%, rgba(7,14,29,0.05) 45%, rgba(7,14,29,0.92) 100%);
    pointer-events: none;
}

.lx-genre-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.12);
}

.lx-genre-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 24px;
    z-index: 2;
}

.lx-genre-meta .g-kicker {
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
}

.lx-genre-meta h3 {
    font-family: var(--lx-font-display);
    font-size: 24px;
    color: var(--lx-cream);
    margin: 6px 0 0;
}

@media (max-width: 900px) { .lx-genres-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lx-genres-grid { grid-template-columns: 1fr; } .lx-genre-card { height: 300px; } }

/* ============================================================
   TRAILERS — cinematic book trailer cards (light)
   ============================================================ */
.lx-trailers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 60px;
}

.lx-trailer {
    position: relative;
    border-radius: var(--lx-radius);
    overflow: hidden;
    background: var(--lx-ink);
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 30px 70px rgba(26, 47, 75, 0.25);
    aspect-ratio: 16 / 10;
    will-change: transform;
    transition: box-shadow 0.4s ease;
}

.lx-trailer video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.lx-trailer .tr-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(300px 200px at 50% 45%, rgba(212, 175, 55, 0.16), transparent 70%),
        linear-gradient(160deg, rgba(11, 24, 48, 0.9), rgba(7, 14, 29, 0.95));
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.4s ease;
}

.lx-trailer.playing .tr-cover { opacity: 0; pointer-events: none; }

.lx-trailer .tr-play {
    width: 74px; height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--lx-gold-deep), var(--lx-gold) 55%, var(--lx-gold-soft));
    box-shadow: 0 14px 40px rgba(212, 175, 55, 0.45);
    transition: transform 0.35s var(--lx-ease);
}

.lx-trailer .tr-cover:hover .tr-play { transform: scale(1.12); }

.lx-trailer .tr-play svg { width: 26px; height: 26px; fill: var(--lx-ink); margin-left: 4px; }

.lx-trailer .tr-label {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
}

.lx-trailer .tr-ring {
    position: absolute;
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.5);
    animation: trPulse 2.4s ease-out infinite;
}

@keyframes trPulse {
    0% { transform: scale(0.86); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 900px) { .lx-trailers-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INNER PAGES — legacy template reskin (service/about/contact)
   Upgrades .hero-section / .strategy-section / etc. site-wide
   ============================================================ */

/* ---------- Service page hero → dark cinematic ---------- */
.hero-section {
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(212, 175, 55, 0.15), transparent 60%),
        radial-gradient(900px 700px at -10% 110%, rgba(6, 78, 59, 0.32), transparent 55%),
        linear-gradient(165deg, var(--lx-ink) 0%, var(--lx-ink-2) 55%, #0A1526 100%) !important;
}

.hero-section .hero-background { display: none; }
.hero-section .hero-overlay { background: linear-gradient(165deg, rgba(7,14,29,0.6), rgba(7,14,29,0.85)) !important; }

.hero-section .hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--lx-line);
    background: var(--lx-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--lx-gold-soft) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.hero-section .hero-title {
    color: var(--lx-text) !important;
    font-weight: 600;
    line-height: 1.12;
    font-size: clamp(33px, 3.4vw, 47px) !important;  /* bigger than before, still 2 rows on longest title */
    letter-spacing: -0.01em;
}

.hero-section .hero-title-accent {
    font-style: italic;
    background: linear-gradient(100deg, var(--lx-gold-deep) 0%, var(--lx-gold) 35%, var(--lx-gold-soft) 55%, var(--lx-gold) 75%, var(--lx-gold-deep) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lxShimmer 5s linear infinite;
}

.hero-section .hero-description { color: var(--lx-muted) !important; font-weight: 300; }

/* glass lead form on inner heroes */
.hero-section .hero-form {
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
    border-radius: var(--lx-radius) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    will-change: transform;
}

.hero-section .form-title { color: var(--lx-cream) !important; }

.hero-section .form-label {
    color: var(--lx-gold-soft) !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-section .form-input {
    background: rgba(7, 14, 29, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: var(--lx-text) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-section .form-input::placeholder { color: rgba(147, 165, 191, 0.65) !important; }

.hero-section .form-input:focus {
    outline: none;
    border-color: var(--lx-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
}

.hero-section .form-footer { color: var(--lx-muted) !important; }

/* content LEFT, form RIGHT on desktop (all inner service pages) */
@media (min-width: 969px) {
    .hero-section .hero-container {
        grid-template-columns: 1.08fr 0.92fr !important;
        gap: 56px;
        align-items: center;
    }
    .hero-section .hero-content { order: -1; }
    .hero-section .hero-form { justify-self: end; }
}

/* hero content always above the cosmos canvas */
.hero-section .hero-container { position: relative; z-index: 3; }

/* inner hero forms — same compact size as the homepage form */
.hero-section .hero-form {
    max-width: 460px;
    width: 100%;
    padding: 18px 20px 12px !important;
    border-radius: 18px !important;
}
.hero-section .hero-form .form-title { font-size: 19px !important; margin-bottom: 8px; }
.hero-section .hero-form .form-group { margin-bottom: 8px; }
.hero-section .hero-form .form-input { padding: 8px 12px !important; font-size: 13.5px !important; border-radius: 10px !important; }
.hero-section .hero-form textarea.form-input { min-height: 40px; }
.hero-section .hero-form .form-label { margin-bottom: 3px; font-size: 9.5px !important; }
.hero-section .hero-form .form-submit-btn { padding: 11px 26px !important; font-size: 13px !important; }
.hero-section .hero-form .form-footer { margin-top: 8px !important; font-size: 9.5px !important; }

/* JS-injected 3D decor for inner-page heroes */
.lx-hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.lx-decor-cover {
    position: absolute;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    opacity: 0.5;
    will-change: transform;
    animation: gxFloat 8s ease-in-out infinite;
}

.lx-decor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lx-decor-cover.dc1 { width: 110px; height: 165px; top: 14%; right: 4%; transform: rotate(10deg); animation-delay: -2s; }
.lx-decor-cover.dc2 { width: 84px; height: 126px; bottom: 12%; right: 14%; transform: rotate(-8deg); opacity: 0.4; animation-delay: -4.5s; }
.lx-decor-cover.dc3 { width: 70px; height: 105px; top: 10%; left: 38%; transform: rotate(-14deg); opacity: 0.3; animation-delay: -6s; }

@media (max-width: 968px) { .lx-decor-cover { display: none; } }

/* ---------- per-page identity: each service gets its own tint ---------- */
body { --lx-tint: 212, 175, 55; } /* default: gold */
body.pg-book-publishing          { --lx-tint: 16, 145, 100; }  /* emerald  */
body.pg-book-cover-design        { --lx-tint: 139, 92, 246; }  /* violet   */
body.pg-book-editing             { --lx-tint: 225, 82, 95; }   /* crimson  */
body.pg-book-marketing           { --lx-tint: 20, 165, 150; }  /* teal     */
body.pg-childern-book-illustration { --lx-tint: 240, 130, 40; }/* warm orange */
body.pg-audio-book               { --lx-tint: 120, 90, 235; }  /* deep violet */
body.pg-author-website-design    { --lx-tint: 45, 140, 220; }  /* sky blue */
body.pg-about-us                 { --lx-tint: 200, 150, 90; }  /* bronze   */
body.pg-contactus                { --lx-tint: 30, 150, 170; }  /* cyan     */

/* tint flows into the hero atmosphere + accents (gold stays primary) */
body[class*="pg-"] .hero-section {
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(var(--lx-tint), 0.22), transparent 60%),
        radial-gradient(900px 700px at -10% 110%, rgba(var(--lx-tint), 0.16), transparent 55%),
        linear-gradient(165deg, var(--lx-ink) 0%, var(--lx-ink-2) 55%, #0A1526 100%) !important;
}

body[class*="pg-"] .lx-aurora.a2 { background: radial-gradient(circle, rgba(var(--lx-tint), 0.4), transparent 65%); }

body[class*="pg-"] .strategy-section {
    background:
        radial-gradient(900px 500px at 85% 0%, rgba(var(--lx-tint), 0.14), transparent 60%),
        linear-gradient(180deg, var(--lx-ink) 0%, var(--lx-ink-2) 100%) !important;
}

body[class*="pg-"] .appointment-section {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(var(--lx-tint), 0.13), transparent 60%),
        linear-gradient(180deg, var(--lx-ink-2) 0%, var(--lx-ink) 100%) !important;
}

body[class*="pg-"] .why-marketing-section {
    background:
        radial-gradient(800px 400px at 10% 0%, rgba(var(--lx-tint), 0.10), transparent 60%),
        var(--beige, #FDFCF8) !important;
}

body[class*="pg-"] .feature-number { color: rgb(var(--lx-tint)) !important; }
body[class*="pg-"] .step-number { box-shadow: 0 0 30px rgba(var(--lx-tint), 0.3); }
body[class*="pg-"] .advantage-bar { box-shadow: 0 0 18px rgba(var(--lx-tint), 0.5); }

/* ---------- service images float free — no panel box behind them ---------- */
.image-wrapper.img-panel {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.image-wrapper.img-panel::after { display: none; }

/* ---------- extra sections: deliverables checklist (light) ---------- */
.lx-deliver-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 54px;
}

.lx-deliver {
    display: flex;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(26, 47, 75, 0.08);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 16px 40px rgba(26, 47, 75, 0.07);
    transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease), border-color 0.4s ease;
}

.lx-deliver:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 26px 60px rgba(26, 47, 75, 0.13);
}

.dv-check {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--lx-gold-deep), var(--lx-gold) 55%, var(--lx-gold-soft));
    color: var(--lx-ink);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.lx-deliver h4 {
    font-family: var(--lx-font-body) !important;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lx-navy);
    margin: 2px 0 6px;
}

.lx-deliver p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--slate-600, #475569);
    font-weight: 300;
    margin: 0;
}

@media (max-width: 900px) { .lx-deliver-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lx-deliver-grid { grid-template-columns: 1fr; } }

/* ---------- extra sections: FAQ on dark ---------- */
.lx-faq-dark .lx-faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.22);
    box-shadow: none;
}

.lx-faq-dark .lx-faq-item.open { border-color: rgba(212, 175, 55, 0.55); }
.lx-faq-dark .lx-faq-q { color: var(--lx-cream); }
.lx-faq-dark .lx-faq-a p { color: var(--lx-muted); }

/* inner-page 3D scenes (replace section images via JS) */
.lx-inner-scene {
    display: block;
    width: 100%;
    height: 600px;
}

/* full-bleed variant: the scene paints the WHOLE dark section background */
.lx-inner-scene.lx-scene-bg {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.lx-scene-content { position: relative; z-index: 2; }

.lx-scene-spacer { height: 560px; }

@media (max-width: 968px) {
    .lx-scene-spacer { height: 460px; }

    /* single-column: pin the scene to the bottom band (the spacer zone)
       so books never float over the text above */
    .lx-inner-scene.lx-scene-bg {
        top: auto;
        bottom: 0;
        height: 540px;
    }
}

.why-marketing-image .decorative-frame { display: none; }

@media (max-width: 700px) { .lx-inner-scene { height: 460px; } }

.image-wrapper.img-panel img {
    object-fit: contain !important;
    padding: 0;
    max-height: 520px;
    border-radius: 14px;
    filter: drop-shadow(0 34px 55px rgba(10, 20, 40, 0.35));
    transform: none !important;
}

/* ---------- alternating section layouts (odd-slug pages mirror) ---------- */
@media (min-width: 969px) {
    body.lx-flip .why-marketing-image { order: 2; }
    body.lx-flip .strategy-image { order: -1; }
    body.lx-flip .why-choose-image { order: -1; }
}

/* ---------- badges & imagery (light sections) ---------- */
.section-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    width: auto !important;
    align-self: flex-start;
    background: transparent !important;   /* kill Bootstrap .badge-light white bar */
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--lx-gold-deep) !important;
    letter-spacing: 0.32em !important;
}

.section-badge:not(:empty)::before {
    content: '';
    width: 34px; height: 1px;
    background: var(--lx-gold);
    flex: 0 0 auto;
}

.section-badge.badge-light { color: var(--lx-gold-soft) !important; background: transparent !important; }

.image-wrapper {
    border-radius: var(--lx-radius);
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(10, 20, 40, 0.3);
    position: relative;
}

.image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: inherit;
    pointer-events: none;
}

.image-wrapper img { will-change: transform; }

.decorative-frame { border-color: rgba(212, 175, 55, 0.45) !important; border-radius: var(--lx-radius); }

.feature-number {
    font-family: var(--lx-font-display) !important;
    font-style: italic;
    color: var(--lx-gold) !important;
    font-size: 30px !important;
    background: none !important;
}

.feature-item {
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.4s var(--lx-ease);
    padding: 16px 18px;
}

.feature-item:hover {
    background: #fff;
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 50px rgba(26, 47, 75, 0.1);
    transform: translateX(8px);
}

/* ---------- strategy → dark ink ---------- */
.strategy-section {
    background:
        radial-gradient(900px 500px at 85% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
        linear-gradient(180deg, var(--lx-ink) 0%, var(--lx-ink-2) 100%) !important;
}

.strategy-section .strategy-pattern { opacity: 0.05; }

.strategy-section .step-number {
    width: 56px; height: 56px;
    min-width: 56px;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--lx-font-display) !important;
    font-style: italic;
    color: var(--lx-gold-soft) !important;
    background: rgba(212, 175, 55, 0.08) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
    transition: all 0.4s ease;
}

.strategy-step:hover .step-number {
    background: var(--lx-gold) !important;
    color: var(--lx-ink) !important;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
}

.strategy-section .step-title { color: var(--lx-cream) !important; }
.strategy-section .step-desc { color: var(--lx-muted) !important; }

/* ---------- why choose → gold bars ---------- */
.why-choose-section { overflow: hidden; }

.advantage-bar {
    background: linear-gradient(180deg, var(--lx-gold), var(--lx-gold-deep)) !important;
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.advantage-item {
    border-radius: 16px;
    transition: transform 0.4s var(--lx-ease);
}

.advantage-item:hover { transform: translateX(8px); }

.blur-circle { opacity: 0.35 !important; }

/* ---------- appointment → dark glass ---------- */
.appointment-section {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
        linear-gradient(180deg, var(--lx-ink-2) 0%, var(--lx-ink) 100%) !important;
}

.appointment-title { color: var(--lx-cream) !important; }

.appointment-highlight {
    font-style: italic;
    background: linear-gradient(100deg, var(--lx-gold-deep), var(--lx-gold), var(--lx-gold-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.appointment-subtitle { color: var(--lx-muted) !important; }

.appointment-form-wrapper {
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(212, 175, 55, 0.26);
    border-radius: 26px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    padding: 46px;
    max-width: 860px;
    margin: 0 auto;
}

.form-input-appointment,
.form-textarea-appointment {
    background: rgba(7, 14, 29, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: var(--lx-text) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input-appointment::placeholder,
.form-textarea-appointment::placeholder { color: rgba(147, 165, 191, 0.65) !important; }

.form-input-appointment:focus,
.form-textarea-appointment:focus {
    outline: none;
    border-color: var(--lx-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
}

@media (max-width: 560px) {
    .appointment-form-wrapper { padding: 28px 22px; }
}

/* ---------- CTA → deep ink over image ---------- */
/* CTA banner background — static cover-fit, no janky parallax/zoom */
.cta-section .cta-background {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
    transition: none !important;
    transform: none !important;
}
.cta-section:hover .cta-background { transform: none !important; }

.cta-section .cta-overlay {
    background: linear-gradient(rgba(7, 14, 29, 0.82), rgba(7, 14, 29, 0.9)) !important;
}

.cta-title { color: var(--lx-cream) !important; }
.cta-description { color: var(--lx-muted) !important; }

/* ============================================================
   VIDEO TESTIMONIALS — auto-sliding author videos
   ============================================================ */
.lx-vt-mask {
    overflow: hidden;
    margin-top: 52px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lx-vt-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: lxPfScroll 48s linear infinite;
    will-change: transform;
}

.lx-vt-mask:hover .lx-vt-track, .lx-vt-track.paused { animation-play-state: paused; }

.lx-vt-card {
    flex: 0 0 auto;
    width: 300px;
    aspect-ratio: 9 / 13;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 24px 55px rgba(26, 47, 75, 0.25);
    background: var(--lx-ink);
    transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
}

.lx-vt-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 34px 70px rgba(26, 47, 75, 0.35), 0 0 26px rgba(212, 175, 55, 0.18);
}

.lx-vt-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

.lx-vt-card .vt-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 22px;
    background: linear-gradient(180deg, transparent 40%, rgba(7, 14, 29, 0.82));
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.35s ease;
}

.lx-vt-card.playing .vt-cover { opacity: 0; pointer-events: none; }

.lx-vt-card .vt-play {
    width: 58px; height: 58px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--lx-gold-deep), var(--lx-gold) 55%, var(--lx-gold-soft));
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.45);
    transition: transform 0.3s var(--lx-ease);
}

.lx-vt-card .vt-cover:hover .vt-play { transform: scale(1.12); }
.lx-vt-card .vt-play svg { width: 20px; height: 20px; fill: var(--lx-ink); margin-left: 3px; }

.lx-vt-card .vt-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
}

@media (max-width: 700px) { .lx-vt-card { width: 230px; } }

/* video testimonial lightbox */
.lx-vlb {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 8, 15, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lx-vlb.open { opacity: 1; visibility: visible; }

.lx-vlb-inner {
    position: relative;
    max-width: 460px;
    width: 100%;
    transform: scale(0.94);
    transition: transform 0.35s var(--lx-ease);
}

.lx-vlb.open .lx-vlb-inner { transform: scale(1); }

.lx-vlb-video {
    width: 100%;
    max-height: 82vh;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    background: #000;
    display: block;
}

.lx-vlb-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.15);
    color: var(--lx-gold-soft);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lx-vlb-close:hover { background: var(--lx-gold); color: var(--lx-ink); transform: rotate(90deg); }

@media (max-width: 560px) { .lx-vlb-close { top: -44px; } }

/* ============================================================
   BOOK FAIR — smooth photo slider (dark)
   ============================================================ */
.lx-fair-mask {
    overflow: hidden;
    margin-top: 52px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.lx-fair-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: lxPfScrollR 58s linear infinite;
    will-change: transform;
}

.lx-fair-mask:hover .lx-fair-track { animation-play-state: paused; }

.lx-fair-card {
    flex: 0 0 auto;
    width: 380px;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease);
}

.lx-fair-card img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }

.lx-fair-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.1), transparent 30%);
    pointer-events: none;
}

.lx-fair-card:hover {
    transform: translateY(-8px) scale(1.04) rotate(-0.8deg);
    box-shadow: 0 36px 80px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.2);
    z-index: 2;
}

@media (max-width: 700px) { .lx-fair-card { width: 280px; height: 190px; } }

/* ============================================================
   BEFORE & AFTER — cover transformations (light)
   ============================================================ */
.lx-ba-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin-top: 56px;
}

.lx-ba-card {
    background: #fff;
    border: 1px solid rgba(26, 47, 75, 0.08);
    border-radius: var(--lx-radius);
    padding: 30px;
    box-shadow: 0 24px 60px rgba(26, 47, 75, 0.1);
    transform-style: preserve-3d;
    will-change: transform;
}

.lx-ba-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.lx-ba-pair figure { margin: 0; text-align: center; flex: 1; max-width: 190px; }

.lx-ba-pair img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(26, 47, 75, 0.25);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.lx-ba-pair figcaption {
    margin-top: 12px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--slate-500, #64748B);
    font-weight: 600;
}

.lx-ba-pair figure.after figcaption { color: var(--lx-gold-deep); }

.lx-ba-arrow {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--lx-gold-deep), var(--lx-gold) 55%, var(--lx-gold-soft));
    color: var(--lx-ink);
    box-shadow: 0 10px 26px rgba(212, 175, 55, 0.4);
    animation: baPulse 2.4s ease-in-out infinite;
}

@keyframes baPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.lx-ba-card h3 {
    font-family: var(--lx-font-display);
    font-size: 22px;
    color: var(--lx-navy);
    text-align: center;
    margin: 24px 0 4px;
}

.lx-ba-card .ba-genre {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--slate-500, #64748B);
}

/* ============================================================
   QUICK QUOTE — inline gold form banner
   ============================================================ */
.lx-quote {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 40%, var(--lx-gold-soft) 60%, var(--lx-gold));
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.lx-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 85% 20%, rgba(255, 255, 255, 0.35), transparent 60%);
    pointer-events: none;
}

.lx-quote h2 {
    font-family: var(--lx-font-display);
    font-size: clamp(26px, 3.2vw, 40px);
    color: var(--lx-ink);
    margin-bottom: 6px;
}

.lx-quote p { color: rgba(7, 14, 29, 0.75); font-size: 15px; margin-bottom: 26px; }

.lx-quote-form {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.lx-quote-form input {
    flex: 1 1 200px;
    background: rgba(7, 14, 29, 0.88);
    border: 1px solid rgba(7, 14, 29, 0.4);
    border-radius: 999px;
    color: var(--lx-text);
    font-family: var(--lx-font-body);
    font-size: 14px;
    padding: 14px 22px;
    transition: box-shadow 0.3s ease;
}

.lx-quote-form input::placeholder { color: rgba(233, 238, 247, 0.55); }
.lx-quote-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(7, 14, 29, 0.35); }

.lx-quote-form button {
    flex: 0 0 auto;
    background: var(--lx-ink) !important;
    color: var(--lx-gold-soft) !important;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 13px;
    padding: 14px 34px;
    cursor: pointer;
    transition: transform 0.3s var(--lx-ease), box-shadow 0.3s var(--lx-ease);
}

.lx-quote-form button:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(7, 14, 29, 0.4); }

/* ============================================================
   FAQ — gold accordion (light)
   ============================================================ */
.lx-faq { max-width: 820px; margin: 52px auto 0; }

.lx-faq-item {
    background: #fff;
    border: 1px solid rgba(26, 47, 75, 0.08);
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 10px 30px rgba(26, 47, 75, 0.06);
    overflow: hidden;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.lx-faq-item.open { border-color: rgba(212, 175, 55, 0.45); box-shadow: 0 20px 45px rgba(26, 47, 75, 0.12); }

.lx-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 24px;
    cursor: pointer;
    font-family: var(--lx-font-body);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--lx-navy);
}

.lx-faq-q .fq-icon {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212, 175, 55, 0.14);
    color: var(--lx-gold-deep);
    font-size: 18px;
    font-weight: 400;
    transition: transform 0.35s var(--lx-ease), background 0.35s ease;
}

.lx-faq-item.open .fq-icon { transform: rotate(45deg); background: var(--lx-gold); color: var(--lx-ink); }

.lx-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--lx-ease);
}

.lx-faq-a p {
    padding: 0 24px 20px;
    margin: 0;
    color: var(--slate-600, #475569);
    font-size: 14.5px;
    line-height: 1.8;
    font-weight: 300;
}

/* ============================================================
   PORTFOLIO — dual-row auto book cover slider
   ============================================================ */
.lx-pf-rows { display: flex; flex-direction: column; gap: 26px; margin-top: 56px; }

.lx-pf-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lx-pf-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: lxPfScroll 55s linear infinite;
    will-change: transform;
}

.lx-pf-track.reverse { animation: lxPfScrollR 62s linear infinite; }

@keyframes lxPfScroll { to { transform: translateX(-50%); } }
@keyframes lxPfScrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.lx-pf-card {
    flex: 0 0 auto;
    width: 172px;
    height: 258px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: transform 0.45s var(--lx-ease), box-shadow 0.45s var(--lx-ease), border-color 0.45s ease;
}

.lx-pf-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}

.lx-pf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.14), transparent 35%);
    pointer-events: none;
}

.lx-pf-card:hover {
    transform: translateY(-10px) scale(1.05) rotate(-1.2deg);
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.2);
    z-index: 2;
}

/* keep it silky on hover — just slow down, never stop dead */
.lx-pf-mask:hover .lx-pf-track { animation-play-state: paused; }

@media (max-width: 700px) {
    .lx-pf-card { width: 128px; height: 192px; }
    .lx-pf-track { gap: 16px; animation-duration: 40s; }
    .lx-pf-track.reverse { animation-duration: 46s; }
}

/* ============================================================
   PACKAGES — pricing plans, screenshot layout (dark + gold + emerald)
   ============================================================ */
.lx-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 66px;
    align-items: center;
}

.lx-pkg-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 22px;
    padding: 34px 28px 30px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.4s var(--lx-ease), box-shadow 0.4s var(--lx-ease), border-color 0.4s ease;
    will-change: transform;
}

.lx-pkg-card:not(.featured):hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,0.5);
    box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}

/* featured — gold-tinted dark glass, elevated, gold badge (site theme) */
.lx-pkg-card.featured {
    background: linear-gradient(160deg, rgba(212,175,55,0.16) 0%, rgba(212,175,55,0.05) 55%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(212,175,55,0.6);
    padding: 48px 30px 34px;
    z-index: 2;
    box-shadow: 0 42px 92px rgba(0,0,0,0.55), 0 0 44px rgba(212,175,55,0.22);
}

.lx-pkg-badge {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft));
    color: var(--lx-ink);
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    white-space: nowrap;
}

.pkg-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lx-gold-deep);
    margin-bottom: 12px;
}
.featured .pkg-eyebrow { color: var(--lx-gold-soft); }

.pkg-name {
    font-family: var(--lx-font-display);
    font-size: 27px;
    color: var(--lx-cream);
    margin: 0 0 12px;
    line-height: 1.12;
}

.pkg-intro {
    color: var(--lx-muted);
    font-size: 13.5px;
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}

.pkg-divider {
    height: 1px; border: none; margin: 22px 0;
    background: rgba(212,175,55,0.22);
}

.pkg-plus {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--lx-gold-soft);
    margin: 0 0 14px;
}
.featured .pkg-plus { color: var(--lx-gold-soft); }

/* scrollable inner body — the detailed "What's Included" list */
.pkg-body {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 12px;
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--lx-gold-deep) transparent;
}

.pkg-body::-webkit-scrollbar { width: 6px; }
.pkg-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 6px; }
.pkg-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--lx-gold), var(--lx-gold-deep));
    border-radius: 6px;
}

.pkg-group { margin-bottom: 16px; }
.pkg-group:last-child { margin-bottom: 0; }

.pkg-group h5 {
    font-family: var(--lx-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
    margin: 0 0 9px;
}

.pkg-group ul { list-style: none; margin: 0; padding: 0; }

.pkg-group li {
    position: relative;
    padding-left: 26px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--lx-muted);
    margin-bottom: 9px;
}

.pkg-group li::before {
    content: '';
    position: absolute;
    left: 0; top: 1px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--lx-gold-soft), var(--lx-gold-deep));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3Cpath d='M7 12l3.5 3.5L17 8' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3Cpath d='M7 12l3.5 3.5L17 8' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pkg-best {
    font-size: 12px;
    line-height: 1.6;
    font-style: italic;
    color: var(--lx-muted);
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed rgba(212,175,55,0.25);
}

.pkg-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--lx-gold-soft);
    margin: 2px 0 16px;
}
.pkg-scroll-hint svg { width: 13px; height: 13px; animation: pkgBob 1.8s ease-in-out infinite; }
@keyframes pkgBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.pkg-foot { margin-top: auto; }

.pkg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12.5px;
    padding: 15px 22px;
    cursor: pointer;
    transition: transform 0.3s var(--lx-ease), box-shadow 0.3s var(--lx-ease);
}
.pkg-cta svg { width: 15px; height: 15px; }

/* all CTAs gold (site button theme); side cards subtle outline, featured solid */
.lx-pkg-card:not(.featured) .pkg-cta {
    background: transparent !important;
    color: var(--lx-gold-soft) !important;
    border: 1.5px solid rgba(212,175,55,0.5) !important;
}
.lx-pkg-card:not(.featured) .pkg-cta:hover {
    transform: translateY(-3px);
    background: rgba(212,175,55,0.12) !important;
    border-color: var(--lx-gold) !important;
}

.featured .pkg-cta {
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft)) !important;
    color: var(--lx-ink) !important;
    box-shadow: 0 10px 28px rgba(212,175,55,0.4);
}
.featured .pkg-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(212,175,55,0.5); }

@media (max-width: 968px) {
    .lx-pkg-grid { grid-template-columns: 1fr; max-width: 430px; margin-left: auto; margin-right: auto; }
    .lx-pkg-card.featured { padding-top: 44px; }
}

/* ============================================================
   SPACING FIX — tighter subheading→points rhythm, clear CTA gap
   (applies to every section on every page)
   ============================================================ */

/* homepage lx- sections */
.lx-features { margin: 20px 0 6px; gap: 4px; }
.lx-feature { padding: 12px 16px; gap: 16px; }
.lx-feature h4 { margin-bottom: 5px; }
.lx-steps { margin-top: 26px; }
.lx-step { padding: 16px 0; }
.lx-step-rail::after { bottom: -16px; }
.lx-h2 { margin-bottom: 16px; }
.lx-lead { margin-bottom: 0; }

/* buttons never stick to the last point */
.lx-section .lx-hero-ctas { margin: 30px 0 0; }
.lx-section .lx-steps + .lx-hero-ctas,
.lx-section .lx-features + .lx-hero-ctas { margin-top: 34px; }

/* inner pages (legacy template) */
.features-list { gap: 14px !important; padding-top: 8px !important; }
.feature-item { padding: 10px 14px; }
.feature-item .feature-title { margin-bottom: 4px; }
.strategy-steps { gap: 26px !important; }
.advantages-list { gap: 18px !important; padding-top: 8px !important; }
.section-title { margin-bottom: 16px !important; }
.section-description { margin-bottom: 0 !important; }

/* CTA rows inside legacy lists get clear separation */
.features-list .why-marketing-buttons,
.strategy-steps .why-marketing-buttons,
.advantages-list .why-marketing-buttons { margin-top: 18px !important; }
.why-marketing-buttons { margin-top: 30px; }

/* ============================================================
   THANK YOU PAGE — centered card (site dark + gold theme)
   ============================================================ */
.lx-ty {
    position: relative;
    min-height: 76vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(212, 175, 55, 0.12), transparent 62%),
        linear-gradient(165deg, var(--lx-ink) 0%, var(--lx-ink-2) 55%, #0A1526 100%);
}

.lx-ty .section-container { position: relative; z-index: 2; }

.lx-ty-card {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 24px;
    padding: 54px 44px 48px;
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: tyRise 0.7s var(--lx-ease) both;
}

@keyframes tyRise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

.lx-ty-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.lx-ty-check {
    flex: 0 0 auto;
    width: 66px; height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--lx-gold-deep), var(--lx-gold) 55%, var(--lx-gold-soft));
    box-shadow: 0 0 0 7px rgba(212, 175, 55, 0.13), 0 14px 36px rgba(212, 175, 55, 0.4);
    animation: tyPop 0.55s var(--lx-ease) 0.25s both;
}

@keyframes tyPop { from { transform: scale(0); } to { transform: scale(1); } }

.lx-ty-check svg {
    width: 34px; height: 34px;
    stroke: var(--lx-ink);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lx-ty-badge {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lx-gold-soft);
}

.lx-ty-title {
    font-family: var(--lx-font-display);
    font-size: clamp(31px, 4.1vw, 48px);
    font-weight: 600;
    color: var(--lx-cream);
    line-height: 1.16;
    margin: 0 0 20px;
}

.lx-ty-text {
    color: var(--lx-muted);
    font-size: 16px;
    line-height: 1.85;
    font-weight: 300;
    margin: 0 0 34px;
}

.lx-ty-btn {
    display: inline-block;
    background: linear-gradient(120deg, var(--lx-gold-deep), var(--lx-gold) 45%, var(--lx-gold-soft));
    color: var(--lx-ink) !important;
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 14.5px;
    padding: 15px 42px;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.35);
    transition: transform 0.3s var(--lx-ease), box-shadow 0.3s var(--lx-ease);
}

.lx-ty-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(212, 175, 55, 0.5); }

@media (max-width: 1023px) { .lx-ty { padding: 150px 0 80px; } }
@media (max-width: 560px) {
    .lx-ty-card { padding: 40px 24px 36px; }
    .lx-ty-head { flex-direction: column; gap: 12px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .lx-anim [data-reveal],
    .lx-anim .lx-hero-title .lx-word > span { opacity: 1; transform: none; }
}