/**
 * Lebawi Digital Marketing — cyan growth studio (extends creative editorial system).
 */
@import url('creative-platform-premium.css');

.lb-xp-body--marketing {
    background: #0a1218;
}

.lb-dm.lb-cv[data-product="marketing"] {
    --xp-bg: #0a1218;
    --xp-bg-elevated: #0f1a24;
    --xp-text: #f0f9ff;
    --xp-muted: rgba(240, 249, 255, 0.55);
    --xp-faint: rgba(34, 211, 238, 0.08);
    --xp-accent: #22d3ee;
    --xp-accent-bright: #67e8f9;
    --xp-accent-glow: rgba(34, 211, 238, 0.22);
    --xp-line: rgba(103, 232, 249, 0.14);
    --cv-gold: #38bdf8;
    --cv-cream: #e0f2fe;
}

.lb-dm .lb-cv-ambient__blob--a {
    background: rgba(34, 211, 238, 0.18);
}

.lb-dm .lb-cv-ambient__blob--b {
    background: rgba(56, 189, 248, 0.1);
}

.lb-dm .lb-cv-ambient__blob--c {
    background: rgba(129, 140, 248, 0.12);
}

.lb-dm .lb-cv-watermark {
    color: var(--xp-accent-bright);
}

.lb-dm .lb-cv-btn--fill {
    background: linear-gradient(135deg, #0891b2, #22d3ee) !important;
}

.lb-dm .lb-cv-package--focus {
    border-color: var(--xp-accent);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.12), var(--xp-bg-elevated));
    box-shadow: 0 20px 50px var(--xp-accent-glow);
}

/* Funnel hero panel */
.lb-dm-funnel__frame {
    border-radius: 24px;
    border: 1px solid var(--xp-line);
    background: linear-gradient(145deg, rgba(15, 26, 36, 0.95), rgba(10, 18, 24, 0.98));
    padding: 1.25rem;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), 0 0 60px var(--xp-accent-glow);
}

.lb-dm-funnel__tag {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xp-muted);
}

.lb-dm-funnel__bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.lb-dm-funnel__row {
    display: grid;
    grid-template-columns: 5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: var(--xp-muted);
}

.lb-dm-funnel__track {
    height: 8px;
    border-radius: 999px;
    background: var(--xp-faint);
    overflow: hidden;
}

.lb-dm-funnel__fill {
    height: 100%;
    width: var(--dm-funnel-w, 50%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dm-funnel-c, var(--xp-accent)), var(--xp-accent-bright));
    box-shadow: 0 0 12px var(--xp-accent-glow);
}

.lb-dm-funnel__pct {
    text-align: right;
    color: var(--xp-accent-bright);
    font-weight: 600;
}

.lb-dm-funnel__kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--xp-line);
}

.lb-dm-funnel__kpi strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--xp-accent-bright);
    line-height: 1;
}

.lb-dm-funnel__kpi span {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--xp-muted);
}

/* Case studies */
.lb-dm-cases {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.lb-dm-cases__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

.lb-dm-case {
    padding: 1.25rem 1.35rem;
    border-radius: 18px;
    border: 1px solid var(--xp-line);
    background: linear-gradient(160deg, var(--xp-faint), transparent);
    transition: transform 0.3s, border-color 0.3s;
}

.lb-dm-case:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--xp-accent) 40%, var(--xp-line));
}

.lb-dm-case__company {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--xp-accent-bright);
}

.lb-dm-case h3 {
    margin: 0.3rem 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 500;
}

.lb-dm-case p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--xp-muted);
}

.lb-dm-case__result {
    display: inline-block;
    margin-top: 0.65rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.65rem;
    background: rgba(34, 211, 238, 0.12);
    color: var(--xp-accent-bright);
}

@media (max-width: 767px) {
    .lb-dm-cases__grid {
        grid-template-columns: 1fr;
    }
}