/*
 * ListDome Coming Soon V2 — visual fidelity pass
 * Scope: Elementor Library template #22081 only (enqueued by PHP guard).
 * Intent: premium static hero artwork, larger category pills/socials, no animated hero UI recreation.
 */

/* Hero typography: closer to the approved mockup proportions. */
.ldx-title {
    max-width: 570px !important;
    font-size: clamp(38px, 3vw, 50px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
}

.ldx-sub {
    max-width: 590px !important;
    font-size: 14px !important;
    line-height: 1.52 !important;
}

/*
 * Right hero artwork.
 * The visual is intentionally static and non-interactive: fidelity + first-impression quality
 * take priority over CSS-built animation here.
 */
.ldx-visual {
    position: relative !important;
    min-height: 0 !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background-image: url('https://www.listdome.com/wp-content/uploads/2026/10/neon-bg-hq.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    box-shadow:
        0 18px 48px rgba(0,0,0,.30),
        0 0 34px rgba(56,182,255,.10) !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Remove the old CSS-built orbit/globe/cards completely. */
.ldx-visual::before,
.ldx-visual::after,
.ldx-horizon,
.ldx-horizon-line,
.ldx-float-card,
.ldx-core,
.ldx-symbol,
.ldx-spark {
    display: none !important;
}

/* Soft left-edge blend so the artwork feels integrated, not pasted in. */
.ldx-visual {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.76) 0%, #000 12%, #000 100%) !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.76) 0%, #000 12%, #000 100%) !important;
}

/* Keep the real Launching Soon badge independent from the artwork. */
.ldx-status {
    min-height: 42px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-color: rgba(167,55,255,.74) !important;
    background: rgba(7,17,38,.94) !important;
    box-shadow:
        0 0 0 1px rgba(56,182,255,.08),
        0 0 24px rgba(167,55,255,.13) !important;
}

.ldx-status i {
    width: 9px !important;
    height: 9px !important;
    background: #31D58B !important;
    box-shadow: 0 0 8px rgba(49,213,139,.95), 0 0 16px rgba(49,213,139,.50) !important;
    animation: ldx-live-dot 1.65s ease-in-out infinite !important;
}

@keyframes ldx-live-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.82); }
}

/* Category pills: larger, clearer, less blue-on-blue. */
.ldx-categories {
    padding: 14px 16px !important;
    background: rgba(4,11,27,.96) !important;
    border-color: rgba(56,182,255,.54) !important;
    box-shadow:
        0 0 0 1px rgba(167,55,255,.13),
        inset 0 0 26px rgba(125,75,226,.035) !important;
}

.ldx-pill-row {
    gap: 10px !important;
    row-gap: 11px !important;
}

.ldx-pill {
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    color: #f7f9ff !important;
    background: rgba(12,21,43,.97) !important;
    border-color: rgba(158,170,255,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.ldx-pill::before {
    width: 7px !important;
    height: 7px !important;
    box-shadow: 0 0 10px rgba(56,182,255,.52) !important;
}

/* Socials: deliberately visible, but still compact. */
.ldx-socials {
    gap: 10px !important;
    margin-top: 13px !important;
}

.ldx-socials span {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    background: linear-gradient(145deg,#11264b,#0a1730) !important;
    border-color: rgba(93,130,255,.30) !important;
    box-shadow:
        0 0 16px rgba(56,182,255,.10),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Footer is informational on pre-launch: no outbound navigation treatment. */
.ldx-footer a,
.ldx-bottom a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

@media (max-width: 1100px) {
    .ldx-hero {
        grid-template-columns: minmax(0,1fr) minmax(420px,.95fr) !important;
    }
    .ldx-title {
        font-size: clamp(36px, 4vw, 48px) !important;
    }
}

@media (max-width: 850px) {
    .ldx-hero {
        grid-template-columns: 1fr !important;
    }
    .ldx-visual {
        width: min(760px,100%) !important;
        margin: 4px auto 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

@media (max-width: 640px) {
    .ldx-title {
        font-size: clamp(33px, 10vw, 42px) !important;
    }
    .ldx-pill {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }
    .ldx-socials span {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ldx-status i { animation: none !important; }
}