/* ═══════════════════════════════════════════════════════════════════
   BeepMi Landing Page — cinematic dark + 3D
   Palette herdada do app + extensões pra glow/aurora.
═══════════════════════════════════════════════════════════════════ */

:root {
    --lp-bg-deep:    #07080c;
    --lp-bg:         #0f1217;
    --lp-bg-soft:    #161a21;
    --lp-bg-glass:   rgba(22, 26, 33, 0.6);
    --lp-border:     rgba(255, 255, 255, 0.08);
    --lp-border-strong: rgba(255, 255, 255, 0.16);
    --lp-text:       #e4e4e7;
    --lp-text-soft:  #a1a1aa;
    --lp-text-mute:  #71717a;
    /* BRAND MIGRATION 12/05/2026 — landing migrada de indigo→azul BeepMi.
       Mantém var names "--lp-indigo*" pra compat com 74 usos pelo CSS
       (apenas o VALOR mudou). Pra reverter: git revert <esse commit>. */
    --lp-indigo:     #58a6ff;   /* azul BeepMi (era #58a6ff indigo) */
    --lp-indigo-soft:#79b8ff;   /* azul claro (era #818cf8) */
    --lp-indigo-deep:#2563eb;   /* azul deep (era #4338ca) */
    /* C3 BRAND 12/05/2026 — purple eliminado, yellow vira accent secundário
       (signature do logo amplificada). Var names "--lp-purple*" mantidos
       pra compat com 9+19 referências (apenas valor mudou).
       Pra reverter: git revert <esse commit>. */
    --lp-purple:     #fcd34d;   /* yellow-amber (era purple #a371f7 — pré-C3) */
    --lp-purple-soft:#fde047;   /* yellow-bright (era purple-soft #c084fc) */
    --lp-yellow:     #fff000;
    --lp-yellow-soft:#fde047;
    --lp-green:      #3fb950;
    --lp-red:        #f85149;
    --lp-shadow-glow: 0 0 80px rgba(88, 166, 255, .25);   /* glow azul */
    --lp-shadow-card: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
    --lp-radius:     14px;
    --lp-radius-sm:  10px;
    --lp-radius-pill:999px;
    --lp-easing:     cubic-bezier(.2, .9, .35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

.lp-body {
    background: var(--lp-bg-deep);
    color: var(--lp-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ─── Cosmic background ────────────────────────────────────────── */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Aurora — gradient mesh animado.
   FIX 12/05/2026: boost blue alpha (.35→.55, .20→.32) pra trazer
   vivacidade. Reduce yellow (.25→.07) pra evitar wash amber. */
.lp-bg-aurora {
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 20% 30%, rgba(88, 166, 255, .55) 0%, transparent 42%),
        radial-gradient(circle at 80% 60%, rgba(252, 211, 77, .07) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(88, 166, 255, .32) 0%, transparent 50%);
    filter: blur(60px);
    animation: lpAurora 24s ease-in-out infinite alternate;
}
@keyframes lpAurora {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(-3%, 2%) rotate(2deg); }
    100% { transform: translate(2%, -3%) rotate(-2deg); }
}

/* Grid sutil sobreposto */
.lp-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
}

/* Pequenas estrelas */
.lp-bg-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 25% 30%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 85% 20%, rgba(255, 255, 255, .9), transparent),
        radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 75% 85%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 45% 15%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255, 240, 0, .8), transparent);
    background-size: 600px 600px;
    opacity: .6;
    animation: lpStars 60s linear infinite;
}
@keyframes lpStars {
    from { background-position: 0 0; }
    to   { background-position: 600px 600px; }
}

/* Glow orbs */
.lp-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
/* FIX 12/05/2026: glow orbs ajustados pra vivacidade.
   Blue boosted (.35→.48). Yellow strongly reduced (.3→.08) pra
   ser accent, não wash. */
.lp-bg-glow-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(88, 166, 255, .48), transparent 70%);
    top: -200px;
    right: -100px;
    animation: lpFloat 20s ease-in-out infinite;
}
.lp-bg-glow-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(252, 211, 77, .08), transparent 70%);
    bottom: 10%;
    left: -150px;
    animation: lpFloat 26s ease-in-out infinite reverse;
}
@keyframes lpFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(40px, -30px); }
}

/* ─── Mesh gradient que respira ─────────────────────────────── */
/* FIX 12/05/2026: blue boosted (.18→.28). Yellow soft (.15→.05).
   Leftover indigo-soft (129,140,248) → blue (#79b8ff = 121,184,255). */
.lp-bg-mesh {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 60% 40% at 30% 30%, rgba(88, 166, 255, .28), transparent 60%),
        radial-gradient(ellipse 50% 50% at 75% 70%, rgba(252, 211, 77, .05), transparent 55%),
        radial-gradient(ellipse 45% 35% at 50% 100%, rgba(121, 184, 255, .18), transparent 60%);
    filter: blur(40px);
    animation: lpMeshBreathe 16s ease-in-out infinite;
}
@keyframes lpMeshBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
    50%      { transform: scale(1.1) rotate(2deg); opacity: 1; }
}

/* ─── Floating brand logos (TikTok, Meta, Instagram, etc) ───── */
.lp-bg-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
}
.lp-particle {
    position: absolute;
    bottom: -80px;
    width: 36px;
    height: 36px;
    opacity: 0;
    animation: lpParticleUp linear infinite;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.lp-particle svg { width: 65%; height: 65%; }
/* Cards-style logos (com border + bg) */
.lp-particle.is-tiktok {
    background: rgba(0, 0, 0, .6);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 0, 80, .25);
}
.lp-particle.is-tiktok svg { width: 70%; height: 70%; }
.lp-particle.is-meta {
    background: linear-gradient(135deg, #0866ff, #0052cc);
    border: 1px solid rgba(8, 102, 255, .4);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(8, 102, 255, .35);
}
.lp-particle.is-instagram {
    background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    border: 1px solid rgba(220, 39, 67, .4);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(220, 39, 67, .35);
}
.lp-particle.is-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border: 1px solid rgba(37, 211, 102, .4);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 20px rgba(37, 211, 102, .35);
}
.lp-particle.is-beepmi {
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 240, 0, .35);
    color: #fff000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 240, 0, .35);
}
.lp-particle.is-chart {
    background: rgba(15, 18, 23, .85);
    border: 1px solid rgba(63, 185, 80, .35);
    color: var(--lp-green);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(63, 185, 80, .35);
}

@keyframes lpParticleUp {
    0%   {
        transform: translateY(0) translateX(0) rotateY(0deg) rotateX(0deg) scale(.5);
        opacity: 0;
    }
    8%   { opacity: .85; }
    25%  {
        transform: translateY(-25vh) translateX(20px) rotateY(90deg) rotateX(5deg) scale(.95);
        opacity: .9;
    }
    50%  {
        transform: translateY(-50vh) translateX(-15px) rotateY(180deg) rotateX(-3deg) scale(1);
        opacity: .75;
    }
    75%  {
        transform: translateY(-75vh) translateX(25px) rotateY(270deg) rotateX(4deg) scale(.92);
        opacity: .55;
    }
    92%  { opacity: .25; }
    100% {
        transform: translateY(-115vh) translateX(0) rotateY(360deg) rotateX(0deg) scale(.6);
        opacity: 0;
    }
}

/* ─── Constelação SVG (nodes + linhas) ──────────────────────── */
.lp-bg-constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.lp-const-line {
    stroke: url(#lpLineGrad);
    stroke-width: 1;
    fill: none;
    opacity: 0;
    animation: lpLinePulse 4s ease-in-out infinite;
}
@keyframes lpLinePulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: .55; }
}
.lp-const-node {
    fill: url(#lpNodeGlow);
    animation: lpNodePulse 3s ease-in-out infinite;
}
@keyframes lpNodePulse {
    0%, 100% { transform: scale(1); opacity: .65; }
    50%      { transform: scale(1.4); opacity: 1; }
}

/* (CSS SVG-era do mascote removido — agora usamos PNG; rules ativas no
   bloco "MASCOTE BEEPMI 3D" mais abaixo com .lp-mascot-img + variantes) */

/* ═══════════════════════════════════════════════════════════════
   SEÇÃO VS — VOCÊ SEM BEEPMI x VOCÊ COM BEEPMI
═══════════════════════════════════════════════════════════════ */
.lp-vs {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}
.lp-vs-strike {
    position: relative;
    color: var(--lp-text-mute);
}
.lp-vs-strike::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    top: 52%;
    height: 3px;
    background: linear-gradient(90deg, var(--lp-red), #ff8a80);
    transform: rotate(-3deg);
    box-shadow: 0 0 10px rgba(248, 81, 73, .6);
}
.lp-vs-vs {
    color: var(--lp-text-mute);
    font-weight: 700;
    margin: 0 8px;
}

.lp-vs-stage {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 0;
    margin-top: 60px;
    align-items: stretch;
}

/* Side panels (bad/good) */
.lp-vs-side {
    padding: 44px 36px;
    border-radius: 24px;
    position: relative;
    /* sem overflow:hidden — boss extende ligeiramente além do wrapper interno */
    transition: transform .35s var(--lp-easing), box-shadow .35s var(--lp-easing);
}
.lp-vs-side:hover { transform: translateY(-6px); }

/* SEM BEEPMI (sad) */
.lp-vs-bad {
    background: linear-gradient(135deg, rgba(75, 50, 50, .35), rgba(40, 25, 25, .25));
    border: 1px solid rgba(248, 81, 73, .25);
    box-shadow: 0 20px 60px -20px rgba(248, 81, 73, .25), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.lp-vs-bad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(248, 81, 73, .15), transparent 60%);
    pointer-events: none;
}

/* COM BEEPMI (happy) */
.lp-vs-good {
    background: linear-gradient(135deg, rgba(88, 166, 255, .15), rgba(255, 240, 0, .04));
    border: 1px solid rgba(88, 166, 255, .3);
    box-shadow: 0 20px 60px -20px rgba(88, 166, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 80px rgba(255, 240, 0, .08);
}
.lp-vs-good::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(88, 166, 255, .2), transparent 60%);
    pointer-events: none;
}

.lp-vs-side-head {
    text-align: center;
    margin-bottom: 18px;
}
.lp-vs-side-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
}
.lp-vs-tag-bad {
    background: rgba(248, 81, 73, .15);
    border: 1px solid rgba(248, 81, 73, .35);
    color: var(--lp-red);
}
.lp-vs-tag-good {
    background: linear-gradient(135deg, rgba(88, 166, 255, .2), rgba(255, 240, 0, .12));
    border: 1px solid rgba(88, 166, 255, .4);
    color: var(--lp-yellow-soft);
    box-shadow: 0 0 20px rgba(88, 166, 255, .25);
}

/* (Mascot CSS legacy SVG-era removido — usa-se .lp-mascot-img + variantes
   no bloco MASCOTE BEEPMI 3D mais abaixo) */

/* CHAOS SIDE (sad) — tabs empilhados (legíveis, com chaos sutil) */
.lp-vs-chaos {
    position: relative;
    height: 200px;
    margin-bottom: 32px;
}
.lp-vs-tab {
    position: absolute;
    background:
        linear-gradient(135deg, rgba(60, 32, 32, .92), rgba(38, 22, 22, .88));
    border: 1px solid rgba(248, 81, 73, .32);
    border-radius: 10px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--lp-text-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    width: calc(100% - 16px);
    will-change: transform;
}
/* Espaçamento generoso (sem overlap) + rotações sutis */
.lp-vs-tab-1 {
    top: 0;     left: 0;
    --rot: -1.5deg;
    transform: rotate(-1.5deg);
    animation: lpTabShake1 4.4s ease-in-out infinite;
    z-index: 4;
}
.lp-vs-tab-2 {
    top: 50px;  left: 14px;
    --rot: 1deg;
    transform: rotate(1deg);
    animation: lpTabShake2 4.4s ease-in-out infinite .9s;
    z-index: 3;
}
.lp-vs-tab-3 {
    top: 100px; left: -6px;
    --rot: -0.8deg;
    transform: rotate(-0.8deg);
    animation: lpTabShake3 4.4s ease-in-out infinite 1.7s;
    z-index: 2;
}
.lp-vs-tab-4 {
    top: 150px; left: 6px;
    --rot: 1.5deg;
    transform: rotate(1.5deg);
    animation: lpTabShake4 4.4s ease-in-out infinite 2.5s;
    z-index: 1;
}
/* Cada tab tem seu próprio keyframe pra preservar a rotação base */
@keyframes lpTabShake1 {
    0%, 100% { transform: rotate(-1.5deg) translate(0, 0); }
    50%      { transform: rotate(-1deg)   translate(.5px, .5px); }
}
@keyframes lpTabShake2 {
    0%, 100% { transform: rotate(1deg)    translate(0, 0); }
    50%      { transform: rotate(1.5deg)  translate(-.5px, .5px); }
}
@keyframes lpTabShake3 {
    0%, 100% { transform: rotate(-.8deg)  translate(0, 0); }
    50%      { transform: rotate(-1.3deg) translate(.5px, -.5px); }
}
@keyframes lpTabShake4 {
    0%, 100% { transform: rotate(1.5deg)  translate(0, 0); }
    50%      { transform: rotate(1deg)    translate(-.5px, -.5px); }
}
.lp-vs-tab-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lp-text-mute);
    flex-shrink: 0;
}
.lp-vs-tab-dot-r {
    background: var(--lp-red);
    box-shadow: 0 0 6px rgba(248, 81, 73, .6);
    animation: lpDotPulse 1s ease-in-out infinite;
}
@keyframes lpDotPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
}
.lp-vs-tab-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-vs-tab-spinner {
    width: 12px; height: 12px;
    border: 2px solid rgba(255, 255, 255, .15);
    border-top-color: var(--lp-red);
    border-radius: 50%;
    animation: lpSpin 1s linear infinite;
    flex-shrink: 0;
}
@keyframes lpSpin { to { transform: rotate(360deg); } }
.lp-vs-tab-err {
    color: #fbbf24;
    font-weight: 700;
    flex-shrink: 0;
}

/* FLOW SIDE (happy) — cards que aparecem em cascata (alinha com chaos h=200) */
.lp-vs-flow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
    min-height: 200px;
    justify-content: center;
}
.lp-vs-flow-card {
    background: rgba(88, 166, 255, .08);
    border: 1px solid rgba(88, 166, 255, .25);
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--lp-text);
    box-shadow: 0 2px 12px rgba(88, 166, 255, .15);
    animation: lpFlowCardIn .6s var(--lp-easing) backwards;
    transition: transform .2s, box-shadow .2s;
}
.lp-vs-flow-card:nth-child(1) { animation-delay: .2s; }
.lp-vs-flow-card:nth-child(2) { animation-delay: .5s; }
.lp-vs-flow-card:nth-child(3) { animation-delay: .8s; }
.lp-vs-flow-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(88, 166, 255, .3);
}
@keyframes lpFlowCardIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lp-vs-flow-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px -2px rgba(88, 166, 255, .5);
    flex-shrink: 0;
}
.lp-vs-flow-text { flex: 1; }
.lp-vs-flow-text b { color: var(--lp-yellow-soft); font-weight: 700; }
.lp-vs-flow-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 10px var(--lp-green);
    flex-shrink: 0;
    animation: lpCheckPop .5s var(--lp-easing) 1.2s backwards;
}

/* Stats list (ambos lados) */
.lp-vs-stats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px dashed var(--lp-border);
}
.lp-vs-stats li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
}
.lp-vs-stat-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    min-width: 70px;
    font-family: ui-monospace, monospace;
}
.lp-vs-num-bad {
    color: var(--lp-red);
    text-shadow: 0 0 12px rgba(248, 81, 73, .35);
}
.lp-vs-num-good {
    background: linear-gradient(135deg, var(--lp-yellow), var(--lp-indigo-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 16px rgba(255, 240, 0, .25);
}
.lp-vs-stat-label {
    font-size: 13px;
    color: var(--lp-text-soft);
}

/* VS DIVIDER central — pill glassmorphism elegante (no yellow bolt) */
.lp-vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    min-height: 100%;
}
/* Linha vertical fina com gradient indigo/yellow nas pontas */
.lp-vs-divider::before,
.lp-vs-divider::after {
    content: '';
    flex: 1;
    width: 1.5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(248, 81, 73, .35) 35%,
        rgba(88, 166, 255, .55) 50%,
        rgba(255, 240, 0, .35) 65%,
        transparent 100%);
    min-height: 60px;
}
.lp-vs-divider::before {
    background: linear-gradient(180deg, transparent 0%, rgba(248, 81, 73, .45) 80%, rgba(248, 81, 73, .6) 100%);
}
.lp-vs-divider::after {
    background: linear-gradient(180deg, rgba(88, 166, 255, .6) 0%, rgba(88, 166, 255, .45) 20%, transparent 100%);
}
/* Pill VS — glass + gradient stroke */
.lp-vs-pill {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
        rgba(7, 8, 12, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 8px 24px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    position: relative;
    z-index: 3;
    margin: 14px 0;
    isolation: isolate;
}
/* Gradient ring sutil indigo/red (cada metade alude a um lado) */
.lp-vs-pill::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(
        from 90deg,
        rgba(248, 81, 73, .55) 0deg,
        rgba(248, 81, 73, .35) 60deg,
        rgba(88, 166, 255, .25) 180deg,
        rgba(88, 166, 255, .55) 240deg,
        rgba(88, 166, 255, .35) 360deg);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: lpVsPillRing 14s linear infinite;
}
/* Soft halo (sem ser ofuscante) */
.lp-vs-pill::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(88, 166, 255, .25) 0%,
        rgba(88, 166, 255, .08) 45%,
        transparent 75%);
    z-index: -1;
    pointer-events: none;
    animation: lpVsPillHalo 5s ease-in-out infinite;
}
@keyframes lpVsPillRing { to { transform: rotate(360deg); } }
@keyframes lpVsPillHalo {
    0%, 100% { opacity: .6; transform: scale(.95); }
    50%      { opacity: 1;  transform: scale(1.06); }
}
.lp-vs-pill-text {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2.5px;
    background: linear-gradient(135deg, #ffffff 0%, #c7c8d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

/* Responsive */
@media (max-width: 980px) {
    .lp-vs-stage { grid-template-columns: 1fr; gap: 24px; }
    .lp-vs-divider { flex-direction: row; padding: 12px 0; min-height: auto; }
    .lp-vs-divider::before,
    .lp-vs-divider::after {
        width: auto;
        height: 1.5px;
        min-height: auto;
        min-width: 60px;
    }
    .lp-vs-divider::before { background: linear-gradient(90deg, transparent, rgba(248, 81, 73, .55) 100%); }
    .lp-vs-divider::after  { background: linear-gradient(90deg, rgba(88, 166, 255, .55) 0%, transparent); }
    .lp-vs-pill { margin: 0 14px; }
}

/* Linhas horizontais passando pelo fundo (tipo dataflow) */
.lp-bg-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.lp-bg-line {
    position: absolute;
    left: -300px;
    height: 1px;
    width: 280px;
    background: linear-gradient(90deg, transparent, var(--lp-indigo-soft), transparent);
    opacity: 0;
    animation: lpLineSweep linear infinite;
    box-shadow: 0 0 8px rgba(121, 184, 255, .6);   /* azul claro — era indigo-soft */
}
.lp-bg-line:nth-child(1) { top: 18%; animation-duration: 8s; animation-delay: 0s; }
.lp-bg-line:nth-child(2) { top: 42%; animation-duration: 11s; animation-delay: 2.5s; }
.lp-bg-line:nth-child(3) { top: 67%; animation-duration: 9s; animation-delay: 4s; }
.lp-bg-line:nth-child(4) { top: 88%; animation-duration: 13s; animation-delay: 6s; }
@keyframes lpLineSweep {
    0%   { left: -300px; opacity: 0; }
    20%  { opacity: .8; }
    80%  { opacity: .8; }
    100% { left: 110vw; opacity: 0; }
}

/* Live counter (Lucro hoje) no chrome do hero mockup */
.lp-live-counter {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: var(--lp-radius-pill);
    background: rgba(63, 185, 80, .12);
    border: 1px solid rgba(63, 185, 80, .3);
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-text-soft);
    font-family: ui-monospace, monospace;
}
.lp-live-counter strong {
    color: var(--lp-green);
    font-weight: 700;
    min-width: 70px;
    text-align: right;
}
.lp-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 8px var(--lp-green);
    animation: lpPulse 1.6s ease-in-out infinite;
}

/* Spawn area: tags +R$ X que voam da dashboard pra cima */
.lp-mock-spawn {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}
.lp-spawn-tag {
    position: absolute;
    padding: 6px 12px;
    border-radius: var(--lp-radius-pill);
    background: rgba(63, 185, 80, .18);
    border: 1px solid rgba(63, 185, 80, .5);
    color: var(--lp-green);
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(63, 185, 80, .3);
    animation: lpSpawnFly 2.4s var(--lp-easing) forwards;
    will-change: transform, opacity;
    white-space: nowrap;
}
@keyframes lpSpawnFly {
    0%   { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
    15%  { opacity: 1; transform: translateY(-10px) rotate(-4deg) scale(1.1); }
    30%  { transform: translateY(-30px) rotate(2deg) scale(1); }
    100% { transform: translateY(-180px) rotate(8deg) scale(.85); opacity: 0; }
}

/* Pulse highlight nas rows quando uma metrica atualiza */
.lp-mock-row.lp-row-pulse {
    background: linear-gradient(90deg, rgba(88, 166, 255, .12), transparent);
    animation: lpRowPulse .8s var(--lp-easing);
}
@keyframes lpRowPulse {
    0%, 100% { background: linear-gradient(90deg, rgba(88, 166, 255, 0), transparent); }
    50%      { background: linear-gradient(90deg, rgba(88, 166, 255, .18), transparent); }
}

/* Cell que acabou de mudar — flash verde */
.lp-cell-flash {
    color: var(--lp-yellow) !important;
    text-shadow: 0 0 10px rgba(255, 240, 0, .6);
    animation: lpCellFlash .8s var(--lp-easing);
}
@keyframes lpCellFlash {
    0%   { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ─── Top nav ───────────────────────────────────────────────── */
.lp-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(7, 8, 12, 0.6);
    border-bottom: 1px solid var(--lp-border);
    transition: padding .2s, background .2s;
}
.lp-nav.scrolled {
    background: rgba(7, 8, 12, 0.85);
}
.lp-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
}
.lp-logo { flex-shrink: 0; }
.lp-logo img { height: 26px; }
.lp-nav-links {
    display: flex;
    gap: 28px;
    flex: 1;
    margin-left: 16px;
}
.lp-nav-links a {
    color: var(--lp-text-soft);
    font-size: 14px;
    font-weight: 500;
    transition: color .15s;
}
.lp-nav-links a:hover { color: var(--lp-text); }
.lp-nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Language toggle (PT ⇄ EN) — discreto na navbar */
.lp-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--lp-radius-pill, 999px);
    color: var(--lp-text-soft, #a8a8b3);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    line-height: 1;
}
.lp-lang-toggle:hover {
    color: var(--lp-text, #fff);
    border-color: var(--lp-border, rgba(255,255,255,.1));
    background: rgba(255, 255, 255, .03);
}
.lp-lang-toggle-label {
    letter-spacing: .03em;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--lp-radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all .15s var(--lp-easing);
    white-space: nowrap;
}
/* FIX 12/05/2026: CTA mais punchy — gradient tem azul claro no topo
   (1px brilho interno) + glow ampliado pra "pop". */
.lp-btn-primary {
    background: linear-gradient(135deg, #79b8ff 0%, var(--lp-indigo) 35%, var(--lp-indigo-deep) 100%);
    color: #fff;
    box-shadow:
        0 6px 24px -2px rgba(88, 166, 255, .55),
        0 2px 6px rgba(88, 166, 255, .25),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 36px -2px rgba(88, 166, 255, .72),
        0 4px 12px rgba(88, 166, 255, .4),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.lp-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--lp-text);
    border-color: var(--lp-border-strong);
    backdrop-filter: blur(10px);
}
.lp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--lp-indigo-soft);
}
.lp-btn-lg {
    padding: 14px 24px;
    font-size: 15px;
    border-radius: var(--lp-radius);
}
.lp-btn-xl {
    padding: 18px 32px;
    font-size: 16px;
    border-radius: var(--lp-radius);
}
.lp-btn svg { transition: transform .15s var(--lp-easing); }
.lp-btn:hover svg { transform: translateX(3px); }

/* ─── HERO ─────────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    z-index: 1;
    padding: 140px 32px 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.lp-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.lp-hero-text { max-width: 580px; }

.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--lp-radius-pill);
    background: rgba(88, 166, 255, 0.1);
    border: 1px solid rgba(88, 166, 255, 0.25);
    color: var(--lp-indigo-soft);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}
.lp-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-indigo-soft);
    box-shadow: 0 0 8px var(--lp-indigo-soft);
    animation: lpPulse 2s ease-in-out infinite;
}
@keyframes lpPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

.lp-h1 {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: var(--lp-text);
}
.lp-strike {
    position: relative;
    display: inline-block;
    color: var(--lp-text-mute);
}
.lp-strike::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    top: 52%;
    height: 4px;
    background: linear-gradient(90deg, var(--lp-red), #ff8a80);
    transform: rotate(-3deg);
    box-shadow: 0 0 12px rgba(248, 81, 73, .6);
    animation: lpStrike .8s var(--lp-easing) .4s both;
    transform-origin: left;
}
@keyframes lpStrike {
    from { transform: rotate(-3deg) scaleX(0); }
    to   { transform: rotate(-3deg) scaleX(1); }
}

/* FIX 12/05/2026: --lp-purple-soft virou yellow (C3), o que fez o gradient
   ficar yellow→yellow (no contraste). Hardcoded azul→azul→yellow signature
   pra restaurar punch visual. */
.lp-grad-text {
    background: linear-gradient(135deg, #79b8ff 0%, #58a6ff 45%, #fff000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: lpShimmer 6s ease-in-out infinite;
}
@keyframes lpShimmer {
    0%, 100% { background-position: 0% center; }
    50%      { background-position: 100% center; }
}

.lp-subhead {
    font-size: 18px;
    color: var(--lp-text-soft);
    margin-bottom: 32px;
    max-width: 560px;
}
.lp-subhead b { color: var(--lp-text); font-weight: 600; }

.lp-cta-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.lp-cta-row-center { justify-content: center; }

.lp-trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--lp-text-mute);
    font-size: 13px;
}
.lp-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-trust svg { color: var(--lp-green); }

/* ─── 3D Mockup stage ─────────────────────────────────────────── */
.lp-hero-stage {
    position: relative;
    perspective: 1600px;
    perspective-origin: 50% 50%;
    height: 540px;
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   MASCOTE POINTER — debaixo do dashboard apontando pra cima
   Pose com dois dedos indicador apontando pra cima ("look at this!")
   Posicionado bottom-center do hero stage, parte inferior do corpo
   estende abaixo do stage (overflow visível).
═══════════════════════════════════════════════════════════════ */
.lp-pointer {
    position: absolute;
    bottom: -45%;                        /* desce mais (de -35% pra -45%) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;                          /* à frente do dashboard pra dedos visíveis */
    height: 70%;                         /* presença mas não dominante */
    aspect-ratio: 1145 / 1200;
    pointer-events: none;
    will-change: transform;
    animation: lpPointerFloat 4.5s ease-in-out infinite;
}
.lp-pointer picture { display: contents; }
.lp-pointer-img {
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    /* Multi-layer drop-shadow + glow indigo + glow yellow */
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, .4))
        drop-shadow(0 22px 32px rgba(0, 0, 0, .55))
        drop-shadow(0 0 50px rgba(88, 166, 255, .55))
        drop-shadow(0 0 22px rgba(255, 240, 0, .15));
    animation: lpPointerBreath 4.5s ease-in-out infinite;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
}
/* Aura indigo pulsante atrás */
.lp-pointer-aura {
    position: absolute;
    inset: 8% 4% 14% 4%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(88, 166, 255, .55) 0%,
        rgba(88, 166, 255, .22) 38%,
        rgba(88, 166, 255, 0) 72%);
    filter: blur(36px);
    z-index: -1;
    pointer-events: none;
    animation: lpPointerAura 4.5s ease-in-out infinite;
}
@keyframes lpPointerFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-10px); }
}
@keyframes lpPointerBreath {
    0%, 100% { transform: scale(1)     rotateZ(-1deg); }
    50%      { transform: scale(1.018) rotateZ(1deg); }
}
@keyframes lpPointerAura {
    0%, 100% { opacity: .65; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
@media (max-width: 980px) {
    .lp-pointer { height: 48%; bottom: -16%; }
}

.lp-mock-tilt {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-15deg) rotateX(8deg);
    transition: transform .3s var(--lp-easing);
    will-change: transform;
}

/* Main mock card */
.lp-mock {
    background: rgba(15, 18, 23, 0.85);
    border: 1px solid var(--lp-border-strong);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(88, 166, 255, .15),
        0 0 60px rgba(88, 166, 255, .12);
}
.lp-mock-main {
    width: 760px;
    transform: translateZ(0);
}
/* V2 mockup: cresce conforme conteudo (5 rows + footer + actions) */
.lp-mock-v2 { width: 780px; }
.lp-mock-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--lp-border);
}
.lp-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}
.lp-dot-r { background: #ff5f57; }
.lp-dot-y { background: #febc2e; }
.lp-dot-g { background: #28c840; }
.lp-mock-url {
    margin-left: 14px;
    color: var(--lp-text-mute);
    font-size: 11px;
    font-family: ui-monospace, monospace;
}

.lp-mock-tabs {
    display: flex;
    border-bottom: 1px solid var(--lp-border);
}
.lp-mock-tabs span {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-text-mute);
    border-right: 1px solid var(--lp-border);
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: color .2s;
}
.lp-mock-tabs span:last-child { border-right: none; }
.lp-mock-tabs span.active {
    color: var(--lp-indigo-soft);
    background: rgba(88, 166, 255, 0.05);
    position: relative;
}
.lp-mock-tabs span.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lp-indigo);
}

.lp-mock-thead, .lp-mock-thead-wide {
    display: grid;
    grid-template-columns: 70px 1.6fr 80px 60px 60px;
    padding: 8px 14px;
    font-size: 9px;
    font-weight: 700;
    color: var(--lp-text-mute);
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--lp-border);
}
.lp-mock-thead-wide {
    grid-template-columns: 70px 1.6fr 80px 80px 60px 60px 80px;
}

.lp-mock-rows {
    display: flex;
    flex-direction: column;
}
.lp-mock-row {
    display: grid;
    grid-template-columns: 70px 1.6fr 80px 60px 60px;
    padding: 11px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--lp-border);
    align-items: center;
    color: var(--lp-text);
    opacity: 0;
    transform: translateY(8px);
    animation: lpRowIn .5s var(--lp-easing) calc(.5s + var(--d) * .08s) forwards;
}
.lp-mock-row:last-child { border-bottom: none; }
.lp-mock-row-wide {
    grid-template-columns: 70px 1.6fr 80px 80px 60px 60px 80px;
}
@keyframes lpRowIn {
    to { opacity: 1; transform: translateY(0); }
}

.lp-mock-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lp-text-soft);
}

.lp-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--lp-radius-pill);
    font-size: 10px;
    font-weight: 600;
}
.lp-pill-green {
    background: rgba(63, 185, 80, .15);
    color: var(--lp-green);
    border: 1px solid rgba(63, 185, 80, .3);
}
.lp-pill-yellow {
    background: rgba(210, 153, 34, .15);
    color: #fbbf24;
    border: 1px solid rgba(210, 153, 34, .3);
}

.lp-mock-roas-up { color: var(--lp-green); font-weight: 600; }
.lp-mock-roas-down { color: var(--lp-red); font-weight: 600; }
.lp-mock-profit-up { color: var(--lp-green); font-weight: 600; }
.lp-mock-profit-down { color: var(--lp-red); font-weight: 600; }

/* Floating accent cards */
.lp-float-card {
    position: absolute;
    background: rgba(22, 26, 33, 0.92);
    border: 1px solid var(--lp-border-strong);
    backdrop-filter: blur(18px);
    border-radius: var(--lp-radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    animation: lpFloatCard 5s ease-in-out infinite;
    transform-style: preserve-3d;
}
@keyframes lpFloatCard {
    0%, 100% { transform: translateY(0) translateZ(60px); }
    50%      { transform: translateY(-10px) translateZ(60px); }
}
.lp-float-1 {
    top: 12%;
    right: -8%;
    transform: translateZ(80px);
    animation-delay: .5s;
}
.lp-float-2 {
    bottom: 12%;
    left: -10%;
    transform: translateZ(60px);
    animation-delay: 1.2s;
}
.lp-float-3 {
    top: 50%;
    right: -14%;
    transform: translateZ(40px);
    animation-delay: 2s;
}
.lp-float-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(88, 166, 255, .4);
}
.lp-float-arrow {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(63, 185, 80, .15);
    color: var(--lp-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-float-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lp-yellow);
    box-shadow: 0 0 12px var(--lp-yellow);
    animation: lpPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.lp-float-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--lp-text);
    line-height: 1;
}
.lp-float-num-sm {
    font-size: 18px;
    font-weight: 800;
    color: var(--lp-green);
    line-height: 1;
}
.lp-float-num-xs {
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-yellow);
    font-family: ui-monospace, monospace;
    margin-top: 4px;
}
.lp-float-label {
    font-size: 11px;
    color: var(--lp-text-mute);
    margin-top: 2px;
}
.lp-float-label b { color: var(--lp-yellow); }

/* Scroll hint */
.lp-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    opacity: .5;
    animation: lpFadeUp 2s ease-in-out infinite;
}
.lp-scroll-mouse {
    display: block;
    width: 22px;
    height: 36px;
    border: 1.5px solid var(--lp-text-soft);
    border-radius: 12px;
    position: relative;
}
.lp-scroll-wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 6px;
    background: var(--lp-text-soft);
    border-radius: 2px;
    animation: lpWheel 1.6s ease-in-out infinite;
}
@keyframes lpWheel {
    0%, 100% { top: 8px; opacity: 1; }
    100%     { top: 18px; opacity: 0; }
}
@keyframes lpFadeUp {
    0%, 100% { opacity: .3; transform: translateX(-50%) translateY(0); }
    50%      { opacity: .7; transform: translateX(-50%) translateY(-4px); }
}

/* ─── Modelo 2 V2 mockup (replica fiel do app) ────────────────── */
.lp-mock-v2-tabs {
    display: flex;
    border-bottom: 1px solid var(--lp-border);
}
.lp-mock-v2-tabs span {
    flex: 1;
    text-align: center;
    padding: 11px 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--lp-text-mute);
    border-right: 1px solid var(--lp-border);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.lp-mock-v2-tabs span svg { opacity: .65; }
.lp-mock-v2-tabs span:last-child { border-right: none; }
.lp-mock-v2-tabs span.active {
    color: var(--lp-indigo-soft);
    background: rgba(88, 166, 255, .07);
    position: relative;
}
.lp-mock-v2-tabs span.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--lp-indigo);
}
.lp-mock-v2-tabs span.active svg { opacity: 1; }

/* Action row */
.lp-mock-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .015);
    border-bottom: 1px solid var(--lp-border-soft, var(--lp-border));
    font-size: 10px;
}
.lp-mock-pill-sel {
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-mock-chev { color: var(--lp-text-mute); font-size: 9px; }
.lp-mock-trackbadge {
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(63, 185, 80, .12);
    border: 1px solid rgba(63, 185, 80, .3);
    color: var(--lp-green);
    font-size: 9px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-mock-updated {
    margin-left: auto;
    color: var(--lp-text-mute);
    font-size: 10px;
}
.lp-mock-sync-btn {
    padding: 6px 12px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    border: none;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px -1px rgba(88, 166, 255, .5);
}

/* V2 Tabela (11 colunas) */
.lp-mock-v2-table { font-size: 10px; }
.lp-mock-v2-thead {
    display: grid;
    grid-template-columns: 24px 64px 50px 1.5fr 60px 60px 30px 50px 56px 50px 80px;
    padding: 8px 12px;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--lp-text-mute);
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--lp-border);
    align-items: center;
    gap: 4px;
}
.lp-mock-v2-thead span { text-align: center; }

.lp-mock-v2-row {
    display: grid;
    grid-template-columns: 24px 64px 50px 1.5fr 60px 60px 30px 50px 56px 50px 80px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--lp-border);
    align-items: center;
    color: var(--lp-text-soft);
    gap: 4px;
    opacity: 0;
    transform: translateY(8px);
    animation: lpRowIn .5s var(--lp-easing) calc(.4s + var(--d) * .08s) forwards;
    font-size: 10px;
}
.lp-mock-v2-row > span { text-align: center; }
.lp-mock-v2-row > span:nth-child(4) { text-align: left; }
.lp-mock-v2-row:last-of-type { border-bottom: none; }

.lp-mock-status-cell {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--lp-text-soft);
    justify-content: center;
}
.lp-mock-dot-g {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 5px var(--lp-green);
    flex-shrink: 0;
}
.lp-mock-dot-r {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lp-red);
    flex-shrink: 0;
}

/* Toggle ON/OFF visual */
.lp-mock-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.lp-mock-toggle-on,
.lp-mock-toggle-off {
    width: 26px; height: 14px;
    border-radius: 7px;
    position: relative;
    transition: all .2s;
}
.lp-mock-toggle-on {
    background: var(--lp-green);
    box-shadow: 0 0 6px rgba(63, 185, 80, .5);
}
.lp-mock-toggle-on::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
}
.lp-mock-toggle-off {
    background: rgba(255, 255, 255, .15);
}
.lp-mock-toggle-off::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--lp-text-mute);
}

/* Cell de NOME (multi-linha) */
.lp-mock-name-cell {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    text-align: left !important;
}
.lp-mock-name-cell small {
    font-size: 8.5px;
    color: var(--lp-text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, monospace;
}
.lp-mock-name-cell b {
    font-size: 10px;
    color: var(--lp-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cell de orcamento (valor + Diário/Total) */
.lp-mock-budget {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}
.lp-mock-budget b { font-size: 10px; color: var(--lp-text); font-weight: 600; }
.lp-mock-budget small { font-size: 8.5px; color: var(--lp-text-mute); }

/* Footer total */
.lp-mock-v2-tfoot {
    display: grid;
    grid-template-columns: 24px 64px 50px 1.5fr 60px 60px 30px 50px 56px 50px 80px;
    padding: 10px 12px;
    background: rgba(88, 166, 255, .05);
    border-top: 1px solid rgba(88, 166, 255, .2);
    font-size: 10px;
    align-items: center;
    gap: 4px;
}
.lp-mock-v2-tfoot span { text-align: center; color: var(--lp-text-soft); }
.lp-mock-v2-tfoot b { color: var(--lp-text); font-weight: 700; font-size: 10px; }

/* ─── POWER EDITOR mockup (replica fiel do modal) ─────────────── */
.pe-mock {
    background: rgba(15, 18, 23, 0.92);
    border: 1px solid var(--lp-border-strong);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: var(--lp-shadow-card), 0 0 80px rgba(88, 166, 255, .12);
}
.pe-mock-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--lp-border);
}
.pe-mock-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-text);
}
.pe-mock-acct {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .3);
    color: var(--lp-indigo-soft);
    font-size: 11px;
    font-weight: 600;
}
.pe-mock-tabs-mini {
    margin-left: auto;
    font-size: 11px;
    color: var(--lp-text-mute);
    letter-spacing: .3px;
}
.pe-mock-tabs-mini b { color: var(--lp-yellow); font-weight: 700; }

.pe-mock-body {
    padding: 24px 28px;
    text-align: left;
}
.pe-mock-section-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pe-mock-section-head small {
    font-size: 11px;
    color: var(--lp-text-mute);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Type cards (Catálogo / Normal) */
.pe-mock-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
/* Single card centralizado (Pane 1 — apenas Normal, estilo print 3) */
.pe-mock-type-single {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.pe-mock-type-single .pe-mock-type-card {
    width: 100%;
    max-width: 360px;
}
/* Icon azul indigo (igual print 3 — sem yellow gradient) */
.pe-mock-type-icon-blue {
    background: rgba(88, 166, 255, 0.15) !important;
    color: var(--lp-indigo-soft) !important;
    border: 1px solid rgba(88, 166, 255, 0.25);
    box-shadow: 0 0 16px rgba(88, 166, 255, .2);
}
.pe-mock-type-card {
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--lp-border);
    background: rgba(255, 255, 255, .02);
    text-align: center;
    position: relative;
    transition: all .2s;
}
.pe-mock-type-active {
    border-color: var(--lp-indigo);
    background: linear-gradient(135deg, rgba(88, 166, 255, .12), rgba(252, 211, 77, .06));
    box-shadow: 0 0 30px rgba(88, 166, 255, .25);
}
.pe-mock-type-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.pe-mock-type-title { font-size: 16px; font-weight: 700; color: var(--lp-text); margin-bottom: 4px; }
.pe-mock-type-desc { font-size: 11px; color: var(--lp-text-mute); }
.pe-mock-check {
    position: absolute;
    top: 10px; right: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lp-indigo);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px var(--lp-indigo);
}

/* Mode cards (Manual / Smart+) */
.pe-mock-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pe-mock-mode-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--lp-border);
    background: rgba(255, 255, 255, .02);
    position: relative;
    transition: all .2s;
}
.pe-mock-mode-active {
    border-color: var(--lp-indigo);
    background: linear-gradient(135deg, rgba(88, 166, 255, .1), rgba(255, 240, 0, .03));
    box-shadow: 0 0 20px rgba(88, 166, 255, .15);
}
.pe-mock-mode-card > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pe-mock-mode-card b { font-size: 13px; color: var(--lp-text); }
.pe-mock-mode-card small { font-size: 11px; color: var(--lp-text-mute); }
.pe-mock-mode-card > svg { flex-shrink: 0; }

/* Grid 4/2 e fields */
.pe-mock-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.pe-mock-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pe-mock-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pe-mock-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-text-soft);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pe-mock-input,
.pe-mock-select {
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-border);
    color: var(--lp-text);
    font-size: 13px;
    font-weight: 600;
    font-family: ui-monospace, monospace;
}
.pe-mock-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: default;
}
.pe-mock-input-money {
    color: var(--lp-yellow);
    background: linear-gradient(135deg, rgba(255, 240, 0, .08), rgba(0, 0, 0, .25));
    border-color: rgba(255, 240, 0, .3);
}
.pe-mock-divider {
    height: 1px;
    background: var(--lp-border);
    margin: 18px 0;
}

/* Toggle row */
.pe-mock-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--lp-border);
}
.pe-mock-toggle-row:last-child { border-bottom: none; }
.pe-mock-toggle {
    width: 32px; height: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.pe-mock-toggle span {
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--lp-text-mute);
    transition: all .2s;
}
.pe-mock-toggle-on { background: var(--lp-green); box-shadow: 0 0 10px rgba(63, 185, 80, .4); }
.pe-mock-toggle-on span { left: auto; right: 2px; background: #fff; }
.pe-mock-toggle-label { font-size: 12px; color: var(--lp-text); font-weight: 500; flex: 1; }
.pe-mock-toggle-hint { font-size: 11px; color: var(--lp-text-mute); }

/* Países (flag chips) */
.pe-mock-flag-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pe-mock-flag {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 12px;
    font-weight: 500;
}
.pe-mock-flag-on {
    background: linear-gradient(135deg, rgba(88, 166, 255, .15), rgba(252, 211, 77, .08));
    border-color: var(--lp-indigo);
    color: var(--lp-text);
    box-shadow: 0 0 10px rgba(88, 166, 255, .25);
}

/* Estados grid */
.pe-mock-states {
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    padding: 14px;
}
.pe-mock-states-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--lp-text-soft);
    font-weight: 600;
}
.pe-mock-states-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(88, 166, 255, .15);
    color: var(--lp-indigo-soft);
    font-size: 10px;
}
.pe-mock-states-grid {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.pe-mock-state {
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, monospace;
}
.pe-mock-state-on {
    background: var(--lp-indigo);
    border-color: var(--lp-indigo);
    color: #fff;
    box-shadow: 0 0 8px rgba(88, 166, 255, .4);
}

/* Criativo (Spark/Upload) */
.pe-mock-creative-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, .25);
    border-radius: 10px;
    border: 1px solid var(--lp-border);
    margin-bottom: 14px;
}
.pe-mock-creative-tab {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-text-soft);
}
.pe-mock-creative-tab-on {
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(88, 166, 255, .4);
}
.pe-mock-vid-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 4px;
}
.pe-mock-vid {
    aspect-ratio: 9/16;
    border-radius: 10px;
    border: 1px solid var(--lp-border-strong);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
}
.pe-mock-vid-1 { background: linear-gradient(135deg, #ff0050, #25f4ee); }
.pe-mock-vid-2 { background: linear-gradient(135deg, #58a6ff, #fcd34d); }
.pe-mock-vid-3 { background: linear-gradient(135deg, #fff000, #f59e0b); }
.pe-mock-vid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .8));
}
.pe-mock-vid-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding-left: 2px;
    box-shadow: 0 0 16px rgba(255, 255, 255, .3);
    animation: lpPlayPulse 2s ease-in-out infinite;
}
.pe-mock-vid-label {
    position: relative;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.pe-mock-vid-add {
    background: rgba(255, 255, 255, .03) !important;
    border-style: dashed !important;
    align-items: center;
    justify-content: center;
    color: var(--lp-text-mute);
    font-size: 10px;
}
.pe-mock-vid-add::before { display: none; }
.pe-mock-vid-plus { font-size: 28px; font-weight: 300; color: var(--lp-text-soft); }

/* ─── Creative MODE cards (Normal / Spark Ads) — replica real ─── */
.pe-cr-mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.pe-cr-mode-card {
    background: rgba(255, 255, 255, .02);
    border: 1.5px solid var(--lp-border);
    border-radius: 14px;
    padding: 24px 18px;
    text-align: center;
    cursor: pointer;
    transition: all .3s var(--lp-easing);
    color: var(--lp-text);
    font-family: inherit;
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}
.pe-cr-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(88, 166, 255, .15), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.pe-cr-mode-card:hover {
    transform: translateY(-3px);
    border-color: rgba(88, 166, 255, .35);
}
.pe-cr-mode-card:hover::before { opacity: 1; }
.pe-cr-mode-active {
    background: linear-gradient(135deg, rgba(88, 166, 255, .12), rgba(252, 211, 77, .04));
    border-color: var(--lp-indigo);
    box-shadow: 0 0 40px rgba(88, 166, 255, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pe-cr-mode-active::before { opacity: 1; }
.pe-cr-mode-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: transform .3s var(--lp-easing);
}
.pe-cr-mode-card:hover .pe-cr-mode-icon { transform: scale(1.08) rotate(-3deg); }
.pe-cr-mode-icon-spark {
    background: linear-gradient(135deg, rgba(252, 211, 77, .25), rgba(88, 166, 255, .15));
    color: var(--lp-purple-soft);
    box-shadow: 0 0 20px rgba(252, 211, 77, .3);
}
.pe-cr-mode-card b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.pe-cr-mode-card small { display: block; font-size: 11px; color: var(--lp-text-mute); }
.pe-cr-mode-active b { color: var(--lp-text); }

/* Section subtitle (smaller heading) */
.pe-mock-section-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text);
    margin: 18px 0 10px;
}

/* Spark validated card (real-style — Maisa) */
.pe-mock-spark-list {
    margin-top: 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(88, 166, 255, .25);
    background: linear-gradient(135deg, rgba(88, 166, 255, .06), rgba(252, 211, 77, .02));
    padding: 12px;
    box-shadow: 0 0 30px rgba(88, 166, 255, .08);
}
.pe-mock-spark-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* Vertical video thumbnail (1080x1920 mock) com gradient + animacao */
.pe-mock-spark-vid {
    width: 78px;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.pe-mock-spark-vid-1 {
    background:
        linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .8)),
        radial-gradient(circle at 35% 40%, #ffd1a3, #c87a5a 50%, #5a2a1a 100%);
}
.pe-mock-spark-vid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: lpThumbShine 4s ease-in-out infinite;
}
@keyframes lpThumbShine {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}
.pe-mock-spark-resol {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 8px;
    font-family: ui-monospace, monospace;
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 2;
}
.pe-mock-spark-dur {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}
.pe-mock-spark-pulse {
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--lp-red);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(248, 81, 73, .8);
    animation: lpLivePulse 1.6s ease-in-out infinite;
    z-index: 2;
}
@keyframes lpLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(248, 81, 73, .7); }
    70%  { box-shadow: 0 0 0 14px rgba(248, 81, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0); }
}
.pe-mock-spark-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pe-mock-spark-creator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-text);
}
.pe-mock-spark-emoji { font-size: 16px; }
.pe-mock-spark-code-sm {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--lp-text-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.pe-mock-spark-x {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--lp-text-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    cursor: pointer;
}

/* Identity verified card (verde) */
.pe-mock-identity-verified {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--lp-border);
    margin-top: 12px;
}
.pe-mock-identity-check {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--lp-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(63, 185, 80, .5);
    flex-shrink: 0;
}
.pe-mock-identity-verified b {
    display: block;
    font-size: 14px;
    color: var(--lp-text);
    font-weight: 700;
}
.pe-mock-identity-verified small {
    display: block;
    font-size: 10px;
    color: var(--lp-text-mute);
    font-family: ui-monospace, monospace;
    margin-top: 2px;
}

/* Display Cards row + buttons */
.pe-mock-dc-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.pe-mock-dc-create {
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lp-indigo-soft), var(--lp-indigo));
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(88, 166, 255, .4);
}
.pe-mock-dc-gallery {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* Display Time input + grid 2 tight */
.pe-mock-grid-2-tight {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    margin-top: 12px;
}
.pe-mock-input-time {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pe-mock-input-time small {
    font-size: 10px;
    color: var(--lp-text-mute);
    font-weight: 400;
}

/* Vídeo Library (search + buttons + grid) */
.pe-mock-vidlib-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.pe-mock-vidlib-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-mute);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pe-mock-vidlib-btn {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.pe-mock-vidlib-btn-blue {
    background: var(--lp-indigo);
    border-color: var(--lp-indigo);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(88, 166, 255, .4);
}
.pe-mock-vidlib-counter {
    color: var(--lp-indigo-soft);
    font-size: 11px;
    font-weight: 700;
}
.pe-mock-vidlib-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pe-mock-vidlib-card {
    aspect-ratio: 16 / 11;
    border-radius: 10px;
    border: 2px solid var(--lp-border);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all .25s var(--lp-easing);
}
.pe-mock-vidlib-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--lp-indigo-soft);
}
.pe-mock-vidlib-on {
    border-color: var(--lp-indigo);
    box-shadow: 0 0 18px rgba(88, 166, 255, .35);
}
.pe-mock-vidlib-1 { background: linear-gradient(135deg, #4a8b7a, #2c5d4f), radial-gradient(circle at 30% 40%, #7ac8a8, transparent 50%); }
.pe-mock-vidlib-2 { background: linear-gradient(135deg, #6b8294, #3e5266), radial-gradient(circle at 60% 50%, #9bb3c4, transparent 50%); }
.pe-mock-vidlib-3 { background: linear-gradient(135deg, #8a6a4e, #5c4632), radial-gradient(circle at 50% 40%, #c2a07a, transparent 60%); }
.pe-mock-vidlib-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7));
    pointer-events: none;
}
.pe-mock-vidlib-check {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--lp-indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 10px var(--lp-indigo);
    z-index: 2;
    animation: lpCheckPop .4s var(--lp-easing);
}
.pe-mock-vidlib-dur {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 2;
}
.pe-mock-vidlib-name {
    position: absolute;
    bottom: 6px; left: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-family: ui-monospace, monospace;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    z-index: 2;
}

/* Resumo (collapsible summary) */
.pe-mock-resumo {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 4px;
}
.pe-mock-resumo-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-text);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.pe-mock-resumo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--lp-text-soft);
    margin-bottom: 8px;
}
.pe-mock-resumo-grid b { color: var(--lp-text); font-weight: 700; }
.pe-mock-resumo-total {
    padding-top: 10px;
    border-top: 1px dashed var(--lp-border);
    background: rgba(88, 166, 255, .04);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--lp-text-soft);
}
.pe-mock-resumo-total b { color: var(--lp-indigo); font-weight: 700; }   /* azul (era yellow) */

/* Creative content panes (Spark / Upload toggle) */
.pe-mock-creative-tabs button { cursor: pointer; border: none; font-family: inherit; }
.pe-mock-creative-content { animation: lpFadeIn .3s var(--lp-easing); }
.pe-mock-creative-content[hidden] { display: none; }
@keyframes lpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spark code input row */
.pe-mock-spark-input-row {
    display: flex;
    gap: 8px;
}
.pe-mock-spark-code {
    flex: 1;
    color: var(--lp-text-soft) !important;
    font-family: ui-monospace, monospace !important;
    font-size: 12px !important;
}
.pe-mock-spark-add {
    padding: 9px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px -2px rgba(88, 166, 255, .4);
    flex-shrink: 0;
}
.pe-mock-counter {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .25);
    color: var(--lp-indigo-soft);
    font-size: 10px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}
.pe-mock-hint {
    font-size: 10px;
    color: var(--lp-text-mute);
    margin-top: 6px;
    display: block;
}

/* Spark cards list (criadores validados) */
.pe-mock-spark-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.pe-mock-spark-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--lp-border);
}
.pe-mock-spark-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.pe-mock-spark-thumb-1 { background: linear-gradient(135deg, #ff0050, #25f4ee); }
.pe-mock-spark-thumb-2 { background: linear-gradient(135deg, #58a6ff, #fcd34d); }
.pe-mock-spark-thumb-3 { background: linear-gradient(135deg, #fff000, #f59e0b); }
.pe-mock-spark-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    padding-left: 1px;
}
.pe-mock-spark-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pe-mock-spark-info b { font-size: 12px; color: var(--lp-text); font-weight: 600; }
.pe-mock-spark-info small { font-size: 10px; color: var(--lp-text-mute); }
.pe-mock-spark-validated {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(63, 185, 80, .15);
    border: 1px solid rgba(63, 185, 80, .35);
    color: var(--lp-green);
    font-size: 10px;
    font-weight: 600;
}

/* Input URL & text variants */
.pe-mock-input-url {
    color: var(--lp-indigo-soft) !important;
    font-family: ui-monospace, monospace !important;
    font-size: 11px !important;
}
.pe-mock-input-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

/* UTM strip */
.pe-mock-utm {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pe-mock-utm-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-text-soft);
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pe-mock-utm-tag {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 240, 0, .06);
    border: 1px solid rgba(255, 240, 0, .2);
    color: var(--lp-yellow-soft);
    font-size: 10px;
    font-family: ui-monospace, monospace;
}

/* Identity chips (Upload tab) */
.pe-mock-identity-chips {
    display: flex;
    gap: 6px;
}
.pe-mock-identity-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 12px;
    font-weight: 500;
}
.pe-mock-identity-chip-on {
    background: var(--lp-indigo);
    border-color: var(--lp-indigo);
    color: #fff;
    box-shadow: 0 0 12px rgba(88, 166, 255, .4);
}
.pe-mock-identity-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(88, 166, 255, .08), rgba(252, 211, 77, .03));
    border: 1px solid rgba(88, 166, 255, .25);
    margin-top: 12px;
}
.pe-mock-identity-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff0050, #fff000);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(255, 0, 80, .3);
}
.pe-mock-identity-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pe-mock-identity-info b { font-size: 13px; color: var(--lp-text); }
.pe-mock-identity-info small { font-size: 10px; color: var(--lp-text-mute); font-family: ui-monospace, monospace; }
.pe-mock-identity-x {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--lp-text-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

/* Source toggle (Upload / Biblioteca dentro do video) */
.pe-mock-source-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-border);
    margin-left: auto;
    font-size: 10px;
}
.pe-mock-source-toggle span {
    padding: 4px 10px;
    border-radius: 5px;
    color: var(--lp-text-soft);
    font-weight: 600;
}
.pe-mock-source-toggle .pe-mock-source-on {
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    color: #fff;
}

/* Dropzone */
.pe-mock-dropzone {
    border: 2px dashed var(--lp-border-strong);
    border-radius: 12px;
    padding: 28px 16px;
    background: rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--lp-text-soft);
    transition: border-color .2s, background .2s;
    margin-top: 8px;
}
.pe-mock-dropzone:hover {
    border-color: var(--lp-indigo-soft);
    background: rgba(88, 166, 255, .04);
}
.pe-mock-dropzone-main { font-size: 13px; font-weight: 600; color: var(--lp-text); }
.pe-mock-dropzone-formats { font-size: 10px; color: var(--lp-text-mute); }

/* Field label que tem source toggle inline */
.pe-mock-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Launch button */
.pe-mock-launch {
    width: 100%;
    margin-top: 18px;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 12px 30px -8px rgba(88, 166, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .15);
    position: relative;
    overflow: hidden;
}
.pe-mock-launch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: translateX(-100%);
    animation: lpLaunchShine 3s ease-in-out infinite;
}
.pe-mock-launch-icon { font-size: 20px; }
.pe-mock-launch-time {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--lp-yellow);
}

/* ─── Section common ───────────────────────────────────────────── */
.lp-section-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
    position: relative;
}
.lp-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lp-indigo-soft);
    margin-bottom: 14px;
}
.lp-h2 {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 18px;
    color: var(--lp-text);
}
.lp-lead {
    font-size: 17px;
    color: var(--lp-text-soft);
    max-width: 720px;
    margin: 0 auto 48px;
}
.lp-lead b { color: var(--lp-text); font-weight: 600; }

/* ─── STATS ────────────────────────────────────────────────────── */
.lp-stats {
    position: relative;
    z-index: 1;
    padding: 60px 32px 100px;
}
.lp-stats-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    background: var(--lp-bg-glass);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    padding: 32px;
    backdrop-filter: blur(20px);
    box-shadow: var(--lp-shadow-card);
}
.lp-stat {
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid var(--lp-border);
}
.lp-stat:last-child { border-right: none; }
.lp-stat-num {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--lp-indigo-soft), var(--lp-purple-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.lp-stat-suffix {
    font-size: 0.6em;
    margin-left: 2px;
    -webkit-text-fill-color: var(--lp-yellow);
    color: var(--lp-yellow);
}
.lp-stat-label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--lp-text-mute);
}
.lp-stats-disclaimer {
    text-align: center;
    color: var(--lp-text-mute);
    font-size: 11px;
    margin-top: 14px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── PAIN ─────────────────────────────────────────────────────── */
.lp-pain {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}
.lp-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
    text-align: left;
}
.lp-compare-col {
    padding: 32px;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-glass);
    backdrop-filter: blur(20px);
}
.lp-compare-bad { opacity: .85; }
.lp-compare-good {
    border-color: rgba(88, 166, 255, .4);
    box-shadow: 0 0 60px rgba(88, 166, 255, .15);
    background: linear-gradient(135deg, rgba(88, 166, 255, .08), rgba(252, 211, 77, .04)), var(--lp-bg-glass);
}
.lp-compare-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--lp-border);
}
.lp-compare-tag {
    padding: 4px 10px;
    border-radius: var(--lp-radius-pill);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lp-tag-red { background: rgba(248, 81, 73, .15); color: var(--lp-red); }
.lp-tag-green { background: rgba(88, 166, 255, .15); color: var(--lp-indigo-soft); }
.lp-compare ul { list-style: none; }
.lp-compare li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    color: var(--lp-text-soft);
    font-size: 14px;
    border-bottom: 1px dashed var(--lp-border);
}
.lp-compare li:last-child { border-bottom: none; }
.lp-x {
    color: var(--lp-red);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}
.lp-check {
    color: var(--lp-green);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── FEATURES grid ───────────────────────────────────────────── */
.lp-features {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
    text-align: left;
}
.lp-feat-card {
    padding: 28px;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-glass);
    backdrop-filter: blur(20px);
    transition: transform .3s var(--lp-easing), border-color .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
}
.lp-feat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(88, 166, 255, .12), transparent 50%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.lp-feat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(88, 166, 255, .35);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5), 0 0 60px rgba(88, 166, 255, .12);
}
.lp-feat-card:hover::before { opacity: 1; }
.lp-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px -4px rgba(88, 166, 255, .5);
}
.lp-feat-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--lp-text);
}
.lp-feat-card p {
    font-size: 14px;
    color: var(--lp-text-soft);
    margin-bottom: 16px;
}
.lp-feat-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--lp-radius-pill);
    background: rgba(255, 240, 0, .08);
    border: 1px solid rgba(255, 240, 0, .2);
    color: var(--lp-yellow-soft);
    font-size: 11px;
    font-weight: 600;
}

/* Different gradient per feature card icon (optional flavor) */
.lp-feat-2 .lp-feat-icon { background: linear-gradient(135deg, #fcd34d, #58a6ff); }
.lp-feat-3 .lp-feat-icon { background: linear-gradient(135deg, #3fb950, #14b8a6); }
.lp-feat-4 .lp-feat-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lp-feat-5 .lp-feat-icon { background: linear-gradient(135deg, #fff000, #d29922); color: #1a1a1a; }
.lp-feat-6 .lp-feat-icon { background: linear-gradient(135deg, #25D366, #128C7E); }

/* ─── POWER EDITOR FLOW (4 passos) ────────────────────────────── */
.lp-flow {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}

.lp-flow-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 56px 0 40px;
    flex-wrap: wrap;
}
.lp-flow-step {
    background: var(--lp-bg-glass);
    border: 1px solid var(--lp-border);
    backdrop-filter: blur(12px);
    border-radius: var(--lp-radius);
    padding: 14px 22px;
    color: var(--lp-text-mute);
    cursor: pointer;
    transition: all .25s var(--lp-easing);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 160px;
}
.lp-flow-num {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-text-mute);
    letter-spacing: 1px;
    transition: color .25s;
}
.lp-flow-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text-soft);
    transition: color .25s;
}
.lp-flow-step:hover {
    border-color: var(--lp-indigo-soft);
    color: var(--lp-text);
}
.lp-flow-step.active {
    background: linear-gradient(135deg, rgba(88, 166, 255, .15), rgba(252, 211, 77, .1));
    border-color: var(--lp-indigo);
    box-shadow: 0 8px 30px -8px rgba(88, 166, 255, .5);
}
.lp-flow-step.active .lp-flow-num { color: var(--lp-yellow); }
.lp-flow-step.active .lp-flow-name { color: var(--lp-text); }

.lp-flow-line {
    width: 60px;
    height: 1px;
    background: var(--lp-border);
    position: relative;
    overflow: hidden;
}
.lp-flow-line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--lp-indigo), var(--lp-purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--lp-easing);
    box-shadow: 0 0 8px var(--lp-indigo-soft);
}
.lp-flow-line.is-done .lp-flow-line-fill { transform: scaleX(1); }

/* Stage com panes empilhadas — PANE ATIVA é position:relative (entra no
   fluxo e dita altura), inativas são position:absolute (out of flow,
   sem ocupar espaço). Resultado: stage = altura da pane ATIVA, não
   da maior. Sem gap quando step pequeno está ativo, sem overflow
   quando step grande está ativo. */
.lp-flow-stage {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}
.lp-flow-pane {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(30px) scale(.97);
    pointer-events: none;
    transition: opacity .45s var(--lp-easing), transform .5s var(--lp-easing);
    visibility: hidden;
}
.lp-flow-pane.active {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}

.lp-flow-card {
    background: var(--lp-bg-glass);
    border: 1px solid var(--lp-border-strong);
    border-radius: 18px;
    padding: 36px;
    backdrop-filter: blur(24px);
    box-shadow: var(--lp-shadow-card), 0 0 80px rgba(88, 166, 255, .12);
    text-align: left;
    position: relative;
    overflow: hidden;
}
.lp-flow-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-indigo-soft), var(--lp-purple-soft), transparent);
    opacity: .6;
}
.lp-flow-card-head {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--lp-text-mute);
    margin-bottom: 24px;
}

/* Chips do Tipo de campanha (passo 1) */
.lp-flow-chips {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-flow-chips-2 {
    flex-direction: row;
}
.lp-flow-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    transition: all .25s var(--lp-easing);
    position: relative;
    cursor: default;
}
.lp-flow-chip:hover {
    background: rgba(255, 255, 255, .05);
    border-color: var(--lp-indigo-soft);
    transform: translateX(4px);
}
.lp-flow-chip-active {
    background: linear-gradient(135deg, rgba(88, 166, 255, .12), rgba(252, 211, 77, .06));
    border-color: var(--lp-indigo);
    box-shadow: 0 8px 24px -8px rgba(88, 166, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-flow-chip-emoji {
    font-size: 28px;
    flex-shrink: 0;
}
.lp-flow-chip > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-flow-chip b {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-text);
}
.lp-flow-chip small {
    font-size: 13px;
    color: var(--lp-text-soft);
}
.lp-flow-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lp-indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 12px var(--lp-indigo);
    flex-shrink: 0;
    animation: lpCheckPop .4s var(--lp-easing);
}
@keyframes lpCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Chip "big" (passo 2 ABO/CBO) */
.lp-flow-chip-big {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
    padding: 24px;
    gap: 8px;
}
.lp-flow-chip-big > div { display: contents; }
.lp-flow-chip-big .lp-flow-chip-emoji { font-size: 32px; }
.lp-flow-chip-big b { font-size: 22px; }
.lp-flow-chip-big small { font-size: 13px; }
.lp-flow-chip-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-yellow);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lp-flow-chip-detail {
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: var(--lp-radius-sm);
    background: rgba(0, 0, 0, .25);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--lp-yellow-soft);
    border: 1px solid rgba(255, 240, 0, .15);
}

/* Passo 3: Criativo (Spark/Upload) */
.lp-flow-creative {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lp-flow-creative-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, .25);
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    width: fit-content;
}
.lp-flow-creative-tabs span {
    padding: 8px 18px;
    border-radius: var(--lp-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-text-soft);
    cursor: default;
    transition: all .2s;
}
.lp-flow-creative-tabs span.active {
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(88, 166, 255, .4);
}
.lp-flow-creative-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.lp-flow-vid {
    aspect-ratio: 9 / 16;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border-strong);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    cursor: default;
    transition: transform .25s var(--lp-easing), border-color .25s;
}
.lp-flow-vid:hover {
    transform: translateY(-4px);
    border-color: var(--lp-indigo-soft);
}
.lp-flow-vid-1 { background: linear-gradient(135deg, #ff0050, #25f4ee), #1a1a2e; }
.lp-flow-vid-2 { background: linear-gradient(135deg, #58a6ff, #fcd34d), #1a1a2e; }
.lp-flow-vid-3 { background: linear-gradient(135deg, #fff000, #f59e0b), #1a1a2e; }
.lp-flow-vid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .8));
    pointer-events: none;
}
.lp-flow-vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    padding-left: 3px;
    box-shadow: 0 0 20px rgba(255, 255, 255, .3);
    animation: lpPlayPulse 2s ease-in-out infinite;
}
@keyframes lpPlayPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.08); }
}
.lp-flow-vid-label {
    position: relative;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.lp-flow-vid-add {
    background: rgba(255, 255, 255, .03) !important;
    border-style: dashed !important;
    align-items: center;
    justify-content: center;
    color: var(--lp-text-mute);
}
.lp-flow-vid-add::before { display: none; }
.lp-flow-vid-plus {
    font-size: 36px;
    font-weight: 300;
    color: var(--lp-text-soft);
    margin-bottom: 4px;
}

/* Passo 4: Targeting + Lançar */
.lp-flow-target {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}
.lp-flow-target-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--lp-border);
    flex-wrap: wrap;
}
.lp-flow-target-row:last-child { border-bottom: none; }
.lp-flow-target-label {
    width: 110px;
    font-size: 13px;
    color: var(--lp-text-mute);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.lp-flow-target-pill {
    padding: 5px 12px;
    border-radius: var(--lp-radius-pill);
    background: rgba(88, 166, 255, .1);
    border: 1px solid rgba(88, 166, 255, .25);
    color: var(--lp-indigo-soft);
    font-size: 12px;
    font-weight: 600;
}
.lp-flow-target-pill-hi {
    background: linear-gradient(135deg, rgba(255, 240, 0, .15), rgba(245, 158, 11, .1));
    border-color: rgba(255, 240, 0, .4);
    color: var(--lp-yellow-soft);
    font-weight: 700;
    box-shadow: 0 0 16px rgba(255, 240, 0, .15);
}

.lp-flow-launch {
    width: 100%;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-purple));
    border: none;
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--lp-radius);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-shadow: 0 12px 32px -8px rgba(88, 166, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
    transition: all .2s var(--lp-easing);
    position: relative;
    overflow: hidden;
}
.lp-flow-launch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: translateX(-100%);
    animation: lpLaunchShine 3s ease-in-out infinite;
}
@keyframes lpLaunchShine {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}
.lp-flow-launch:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(88, 166, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.lp-flow-launch-icon { font-size: 22px; }
.lp-flow-launch-time {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: var(--lp-radius-pill);
    background: rgba(0, 0, 0, .25);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--lp-yellow);
}

/* ─── MODELOS showcase ─────────────────────────────────────────── */
.lp-modelos {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}
.lp-modelos-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    padding: 4px;
    margin: 28px 0 48px;
    backdrop-filter: blur(10px);
}
.lp-modelo-tab {
    background: transparent;
    border: none;
    padding: 10px 22px;
    color: var(--lp-text-soft);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--lp-radius-pill);
    transition: all .2s var(--lp-easing);
}
.lp-modelo-tab.active {
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    color: #fff;
    box-shadow: 0 4px 16px -2px rgba(88, 166, 255, .5);
}
.lp-modelo-tab:hover:not(.active) { color: var(--lp-text); }

.lp-modelos-stage {
    perspective: 1800px;
    perspective-origin: 50% 50%;
    position: relative;
    /* Sem min-height fixo — auto-ajusta ao mockup ativo, evitando gap
       quando mockup é menor que 540px ou overflow quando é maior. */
}
.lp-modelo {
    /* Inativo = não ocupa espaço (display:none).
       Ativo = position relative, ajusta naturalmente à altura do mockup. */
    display: none;
    position: relative;
    margin: 0 auto;
    transform: rotateX(8deg) rotateY(0deg);
    transform-style: preserve-3d;
    width: 100%;
    max-width: 980px;
    opacity: 0;
    transition: opacity .35s var(--lp-easing), transform .5s var(--lp-easing);
}
.lp-modelo.active {
    display: block;
    opacity: 1;
    transform: rotateX(4deg) rotateY(0deg);
    animation: lpModeloFadeIn .4s var(--lp-easing);
}
@keyframes lpModeloFadeIn {
    from { opacity: 0; transform: rotateX(8deg) translateY(8px); }
    to   { opacity: 1; transform: rotateX(4deg) translateY(0); }
}
.lp-mock-wide {
    width: 100%;
}

/* Modelo 2 specific: tabs 4 columns */
.lp-mock-tabs-4 span { padding: 14px 8px; font-size: 12px; }

.lp-mock-filters {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--lp-border);
    background: rgba(255, 255, 255, .015);
}
.lp-filter-pill {
    padding: 5px 12px;
    border-radius: var(--lp-radius-sm);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    font-size: 11px;
    color: var(--lp-text-soft);
}
.lp-filter-green {
    background: rgba(63, 185, 80, .1);
    border-color: rgba(63, 185, 80, .3);
    color: var(--lp-green);
}

/* Modelo 1 specific: hierarchical view */
.lp-mock-hier {
    padding: 12px;
}
.lp-mock-acc {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
    transition: background .2s;
}
.lp-mock-acc-open {
    background: rgba(88, 166, 255, .05);
    border-color: rgba(88, 166, 255, .25);
}
.lp-mock-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 13px;
}
.lp-mock-chev {
    color: var(--lp-text-mute);
    font-size: 10px;
    width: 12px;
}
.lp-mock-chev-sm {
    color: var(--lp-text-mute);
    font-size: 9px;
    width: 10px;
}
.lp-mock-acc-spend {
    margin-left: auto;
    color: var(--lp-text-soft);
    font-size: 12px;
}
.lp-mock-camp-list {
    border-top: 1px solid var(--lp-border);
    padding: 6px 14px 10px 36px;
}
.lp-mock-camp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--lp-border);
}
.lp-mock-camp:last-child { border-bottom: none; }
.lp-mock-name-sm {
    flex: 1;
    color: var(--lp-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-mock-spend-sm { color: var(--lp-text); margin-right: 12px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   MODELO 1 (Hierárquico) — replica fiel do app real
═══════════════════════════════════════════════════════════════ */
.lp-m1-mock {
    width: 100%;
    max-width: 1080px;
    font-size: 11px;
}

/* Breadcrumb header */
.lp-m1-bread {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-border);
    font-size: 12px;
}
.lp-m1-bread-link { color: var(--lp-text-mute); }
.lp-m1-bread-sep { color: var(--lp-text-mute); }
.lp-m1-bread b { color: var(--lp-text); font-weight: 700; }
.lp-m1-bread-stats {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
}

/* Filter row 1 */
.lp-m1-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--lp-border);
    background: rgba(255, 255, 255, .015);
}
.lp-m1-pill {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-m1-chev { color: var(--lp-text-mute); font-size: 9px; }
.lp-m1-sync {
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(63, 185, 80, .15);
    border: 1px solid rgba(63, 185, 80, .35);
    color: var(--lp-green);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.lp-m1-counter {
    margin-left: auto;
    color: var(--lp-text-mute);
    font-size: 11px;
}

/* Search row */
.lp-m1-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--lp-border);
}
.lp-m1-search {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-mute);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lp-m1-pill-sm {
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Loading bar */
.lp-m1-loadbar {
    height: 18px;
    background: rgba(88, 166, 255, .04);
    border-bottom: 1px solid var(--lp-border);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 18px;
    overflow: hidden;
}
.lp-m1-loadbar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--lp-indigo), var(--lp-purple));
    box-shadow: 0 0 8px var(--lp-indigo);
    width: 60%;
    animation: lpM1Loadbar 3s ease-in-out infinite;
}
@keyframes lpM1Loadbar {
    0%, 100% { width: 30%; }
    50%      { width: 95%; }
}
.lp-m1-loadbar-text {
    margin-left: auto;
    color: var(--lp-text-mute);
    font-size: 10px;
    font-family: ui-monospace, monospace;
}

/* Table head — 10 col */
.lp-m1-thead, .lp-m1-acc-row, .lp-m1-camp-row {
    display: grid;
    grid-template-columns: 22px 26px 2.4fr 70px 80px 40px 50px 70px 50px 70px;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 10.5px;
}
.lp-m1-thead {
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--lp-border);
    color: var(--lp-text-mute);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 8.5px;
    letter-spacing: .8px;
    padding: 8px 14px;
}
.lp-m1-thead small {
    font-size: 8px;
    margin-left: 3px;
    opacity: .6;
}
.lp-m1-thead > span:nth-child(3) { text-align: left; }
.lp-m1-thead > span { text-align: center; }

/* Account row (parent) */
.lp-m1-acc-row {
    border-bottom: 1px solid var(--lp-border);
    transition: background .2s;
    color: var(--lp-text-soft);
}
.lp-m1-acc-row:hover { background: rgba(88, 166, 255, .04); }
.lp-m1-acc-row > span { text-align: center; }
.lp-m1-acc-row > span:nth-child(3) { text-align: left; }
.lp-m1-acc-open {
    background: linear-gradient(90deg, rgba(88, 166, 255, .06), transparent);
}
.lp-m1-chev-cell {
    color: var(--lp-text-mute);
    font-size: 12px;
    cursor: pointer;
    transition: transform .2s var(--lp-easing), color .2s;
    display: inline-block;
}
.lp-m1-chev-open {
    color: var(--lp-indigo-soft);
    transform: rotate(0deg);
}
.lp-m1-acc-name {
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-align: left !important;
    overflow: hidden;
}
.lp-m1-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.lp-m1-status-g {
    background: rgba(63, 185, 80, .12);
    border: 1px solid rgba(63, 185, 80, .3);
    color: var(--lp-green);
}
.lp-m1-status-r {
    background: rgba(248, 81, 73, .12);
    border: 1px solid rgba(248, 81, 73, .3);
    color: var(--lp-red);
}
.lp-m1-dot-g {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 5px var(--lp-green);
}
.lp-m1-dot-r {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lp-red);
}
.lp-m1-acc-info {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.lp-m1-acc-info b {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-m1-acc-info small {
    font-size: 9.5px;
    color: var(--lp-text-mute);
    font-family: ui-monospace, monospace;
}
.lp-m1-mute { color: var(--lp-text-mute); }
.lp-m1-strong { color: var(--lp-text); font-weight: 600; }

/* Campaign row (child, indentado) */
.lp-m1-camp-row {
    border-bottom: 1px solid var(--lp-border);
    background: rgba(0, 0, 0, .15);
    color: var(--lp-text-soft);
    transition: background .2s;
    animation: lpM1CampIn .4s var(--lp-easing) backwards;
}
@keyframes lpM1CampIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.lp-m1-camp-row:hover { background: rgba(0, 0, 0, .25); }
.lp-m1-camp-row > span { text-align: center; }
.lp-m1-camp-row > span:nth-child(3) { text-align: left; }
.lp-m1-camp-name {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-m1-camp-icon {
    color: var(--lp-indigo-soft);
    flex-shrink: 0;
    font-size: 11px;
}
.lp-m1-camp-active {
    background: linear-gradient(90deg, rgba(88, 166, 255, .08), transparent);
}

/* Toggle ON/OFF visual (compartilhado por M1 e M2) */
.lp-m1-toggle-on, .lp-m1-toggle-off,
.lp-m2-toggle-on, .lp-m2-toggle-off {
    width: 22px; height: 12px;
    border-radius: 7px;
    position: relative;
    display: inline-block;
}
.lp-m1-toggle-on, .lp-m2-toggle-on {
    background: var(--lp-green);
    box-shadow: 0 0 5px rgba(63, 185, 80, .5);
}
.lp-m1-toggle-on::after, .lp-m2-toggle-on::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
}
.lp-m1-toggle-off, .lp-m2-toggle-off {
    background: rgba(255, 255, 255, .15);
}
.lp-m1-toggle-off::after, .lp-m2-toggle-off::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--lp-text-mute);
}

/* ═══════════════════════════════════════════════════════════════
   MODELO 2 (Tabs / V2) — replica fiel do app real
═══════════════════════════════════════════════════════════════ */
.lp-m2-mock {
    width: 100%;
    max-width: 1080px;
    font-size: 11px;
}

/* Tabs com icones */
.lp-m2-tabs {
    display: flex;
    border-bottom: 1px solid var(--lp-border);
}
.lp-m2-tabs span {
    flex: 1;
    text-align: center;
    padding: 12px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--lp-text-mute);
    border-right: 1px solid var(--lp-border);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .2s, background .2s;
    cursor: pointer;
}
.lp-m2-tabs span:hover { color: var(--lp-text); }
.lp-m2-tabs span:last-child { border-right: none; }
.lp-m2-tabs span.active {
    color: var(--lp-indigo-soft);
    background: rgba(88, 166, 255, .06);
    position: relative;
}
.lp-m2-tabs span.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--lp-indigo);
}

/* Action row */
.lp-m2-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .015);
    border-bottom: 1px solid var(--lp-border);
}
.lp-m2-pill {
    padding: 5px 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-m2-chev { color: var(--lp-text-mute); font-size: 9px; }
.lp-m2-trackbadge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(63, 185, 80, .12);
    border: 1px solid rgba(63, 185, 80, .3);
    color: var(--lp-green);
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-m2-updated {
    margin-left: auto;
    color: var(--lp-text-mute);
    font-size: 11px;
}
.lp-m2-sync {
    padding: 6px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--lp-indigo), var(--lp-indigo-deep));
    border: none;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px -1px rgba(88, 166, 255, .5);
    cursor: pointer;
}

/* Filter row 2 (Nome + Status) */
.lp-m2-filter2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .015);
    border-bottom: 1px solid var(--lp-border);
}
.lp-m2-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-m2-filter-field small {
    font-size: 9.5px;
    color: var(--lp-text-mute);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.lp-m2-filter-input {
    padding: 7px 11px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-border);
    color: var(--lp-text-mute);
    font-size: 11px;
}
.lp-m2-filter-select {
    color: var(--lp-text-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Loading progress bar */
.lp-m2-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(88, 166, 255, .04);
    border-bottom: 1px solid var(--lp-border);
}
.lp-m2-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.lp-m2-progress-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, var(--lp-indigo), var(--lp-purple));
    border-radius: 999px;
    box-shadow: 0 0 8px var(--lp-indigo);
    animation: lpM2Loadbar 3s ease-in-out infinite;
}
@keyframes lpM2Loadbar {
    0%, 100% { width: 26%; }
    50%      { width: 92%; }
}
.lp-m2-progress-text {
    color: var(--lp-text-mute);
    font-size: 10.5px;
    font-family: ui-monospace, monospace;
    flex-shrink: 0;
}

/* Table */
.lp-m2-table { font-size: 10.5px; }
.lp-m2-thead, .lp-m2-row, .lp-m2-tfoot {
    display: grid;
    grid-template-columns: 22px 70px 50px 1.6fr 70px 70px 50px 56px 88px;
    gap: 4px;
    align-items: center;
    padding: 9px 14px;
}
.lp-m2-thead {
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--lp-border);
    color: var(--lp-text-mute);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 8.5px;
    letter-spacing: .8px;
    padding: 8px 14px;
}
.lp-m2-thead > span { text-align: center; }
.lp-m2-thead > span:nth-child(4) { text-align: left; }
.lp-m2-thead small {
    font-size: 8px;
    margin-left: 3px;
    opacity: .55;
    cursor: pointer;
}
.lp-m2-thead small:hover { opacity: 1; color: var(--lp-indigo-soft); }

/* Row */
.lp-m2-row {
    border-bottom: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    transition: background .2s;
    opacity: 0;
    transform: translateY(6px);
    animation: lpRowIn .4s var(--lp-easing) calc(var(--d) * .08s) forwards;
}
.lp-m2-row:hover { background: rgba(88, 166, 255, .05); }
.lp-m2-row > span { text-align: center; }
.lp-m2-row > span:nth-child(4) { text-align: left; }

.lp-m2-status {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
.lp-m2-dot-g {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lp-green);
    box-shadow: 0 0 5px var(--lp-green);
}
.lp-m2-dot-r {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lp-red);
}
.lp-m2-name-cell {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    text-align: left !important;
    overflow: hidden;
}
.lp-m2-name-cell small {
    font-size: 8.5px;
    color: var(--lp-text-mute);
    font-family: ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-m2-name-cell b {
    font-size: 11px;
    color: var(--lp-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-m2-row > span > b {
    display: block;
    font-size: 11px;
    color: var(--lp-text);
    line-height: 1.1;
}
.lp-m2-row > span > small {
    display: block;
    font-size: 8.5px;
    color: var(--lp-text-mute);
    font-weight: 400;
}

/* Footer total */
.lp-m2-tfoot {
    background: rgba(88, 166, 255, .06);
    border-top: 1px solid rgba(88, 166, 255, .22);
    padding: 10px 14px;
    color: var(--lp-text-soft);
}
.lp-m2-tfoot > span { text-align: center; }
.lp-m2-tfoot b { color: var(--lp-text); font-weight: 700; }

/* ─── HOW (steps) ──────────────────────────────────────────────── */
.lp-how {
    position: relative;
    z-index: 1;
    padding: 100px 32px;
}
.lp-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 18px;
    margin-top: 56px;
    flex-wrap: wrap;
}
.lp-step {
    flex: 1;
    min-width: 240px;
    max-width: 320px;
    padding: 28px;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-glass);
    backdrop-filter: blur(20px);
    text-align: left;
    position: relative;
    transition: transform .3s, border-color .3s;
}
.lp-step:hover {
    transform: translateY(-4px);
    border-color: rgba(88, 166, 255, .3);
}
.lp-step-num {
    font-size: 14px;
    font-weight: 800;
    color: var(--lp-indigo-soft);
    margin-bottom: 12px;
    font-family: ui-monospace, monospace;
    letter-spacing: 1px;
}
.lp-step h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--lp-text);
}
.lp-step p {
    font-size: 14px;
    color: var(--lp-text-soft);
}
.lp-step-arrow {
    display: flex;
    align-items: center;
    color: var(--lp-text-mute);
    flex-shrink: 0;
    opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING — GROWTH · SCALE · DOMINATE
   3 cards glassmorphism com 3D parallax tilt, animated borders,
   reveal stagger, animated price counters.
═══════════════════════════════════════════════════════════════ */
.lp-pricing {
    position: relative;
    z-index: 1;
    padding: 120px 32px 100px;
    overflow: hidden;
}
.lp-pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(88, 166, 255, .12), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 240, 0, .06), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.lp-price-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;       /* tier do meio levemente maior */
    gap: 24px;
    margin-top: 60px;
    align-items: stretch;
    perspective: 1400px;
}

/* ── Card base ── */
.lp-price-card {
    position: relative;
    padding: 36px 30px 32px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
        rgba(15, 18, 27, .55);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .04) inset,
        0 24px 60px -20px rgba(0, 0, 0, .55);
    transition: transform .35s var(--lp-easing), box-shadow .35s var(--lp-easing), border-color .35s var(--lp-easing);
    transform-style: preserve-3d;
    will-change: transform;
    display: flex;
    flex-direction: column;
}
.lp-price-card-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.lp-price-card-bg::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(88, 166, 255, .15), transparent 40%);
    opacity: 0;
    transition: opacity .3s;
}
.lp-price-card:hover .lp-price-card-bg::before { opacity: 1; }
.lp-price-card:hover {
    transform: translateY(-8px);
    border-color: rgba(88, 166, 255, .3);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 36px 80px -20px rgba(0, 0, 0, .65),
        0 0 60px rgba(88, 166, 255, .15);
}

.lp-price-card > * { position: relative; z-index: 1; }

/* ── Featured (SCALE) ── */
.lp-price-featured {
    transform: translateY(-16px);
    border: 1px solid rgba(88, 166, 255, .45);
    background:
        linear-gradient(135deg, rgba(88, 166, 255, .14), rgba(255, 240, 0, .03)),
        rgba(15, 18, 27, .65);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 36px 80px -16px rgba(88, 166, 255, .45),
        0 0 100px rgba(255, 240, 0, .08);
    z-index: 2;
}
.lp-price-featured:hover {
    transform: translateY(-24px);
    border-color: rgba(88, 166, 255, .65);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .1) inset,
        0 48px 100px -16px rgba(88, 166, 255, .55),
        0 0 140px rgba(255, 240, 0, .15);
}
/* Glow halo SOFT ao redor do featured (sem rotação RGB gamer) */
.lp-price-card-glow {
    position: absolute;
    inset: -32px;
    border-radius: 36px;
    background: radial-gradient(ellipse at 50% 30%,
        rgba(88, 166, 255, .28) 0%,
        rgba(88, 166, 255, .12) 40%,
        transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    z-index: -1;
    animation: lpPriceHalo 5.6s ease-in-out infinite;
}
@keyframes lpPriceHalo {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50%      { opacity: .9;  transform: scale(1.04); }
}

/* Badge "MAIS POPULAR" */
.lp-price-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #1a1a1a;
    background: linear-gradient(135deg, #fff000, #f59e0b);
    box-shadow:
        0 0 24px rgba(255, 240, 0, .55),
        0 8px 16px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .5);
    z-index: 3;
    white-space: nowrap;
}

/* ── Header (icon + name + tagline) ── */
.lp-price-head {
    text-align: center;
    margin-bottom: 28px;
}
/* Icon container — sem background colored quadrado, apenas SVG livre */
.lp-price-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s var(--lp-easing);
    position: relative;
}
.lp-price-icon::before {
    /* halo radial sutil atrás do SVG (não box quadrado) */
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    z-index: -1;
    opacity: .8;
    transition: opacity .35s, transform .35s;
}
.lp-price-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)) drop-shadow(0 12px 22px rgba(0, 0, 0, .25));
}
.lp-price-card:hover .lp-price-icon {
    transform: rotateY(12deg) rotateX(-6deg) scale(1.08);
}
.lp-price-card:hover .lp-price-icon::before { opacity: 1; transform: scale(1.1); }

.lp-price-icon-growth::before {
    background: radial-gradient(circle, rgba(167, 139, 250, .35), transparent 65%);
    filter: blur(14px);
}
.lp-price-icon-scale::before {
    background: radial-gradient(circle, rgba(255, 240, 0, .45), rgba(245, 158, 11, .18) 45%, transparent 70%);
    filter: blur(18px);
}
.lp-price-icon-dominate::before {
    background: radial-gradient(circle, rgba(255, 240, 0, .25), rgba(167, 139, 250, .35) 50%, transparent 75%);
    filter: blur(16px);
}

.lp-price-name {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #c7c8d6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-price-featured .lp-price-name {
    background: linear-gradient(135deg, #ffffff 0%, #fff000 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.lp-price-tagline {
    font-size: 13px;
    color: var(--lp-text-mute);
    line-height: 1.4;
}

/* ── Price amount ── */
.lp-price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lp-price-currency {
    font-size: 22px;
    font-weight: 700;
    color: var(--lp-text-soft);
    margin-right: 2px;
}
.lp-price-num {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.lp-price-featured .lp-price-num {
    background: linear-gradient(135deg, #ffffff 0%, #fff000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-price-period {
    font-size: 16px;
    font-weight: 600;
    color: var(--lp-text-mute);
    margin-left: 4px;
}

/* ── Features list ── */
.lp-price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-price-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lp-text-soft);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s var(--lp-easing), transform .4s var(--lp-easing);
}
.lp-price-features li b { color: var(--lp-text); font-weight: 700; }

.lp-price-card.lp-revealed .lp-price-features li {
    opacity: 1;
    transform: translateX(0);
}
.lp-price-card.lp-revealed .lp-price-features li:nth-child(1) { transition-delay: .15s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(2) { transition-delay: .22s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(3) { transition-delay: .29s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(4) { transition-delay: .36s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(5) { transition-delay: .43s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(6) { transition-delay: .50s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(7) { transition-delay: .57s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(8) { transition-delay: .64s; }
.lp-price-card.lp-revealed .lp-price-features li:nth-child(9) { transition-delay: .71s; }

/* Custom checkmark com glow */
.lp-price-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(88, 166, 255, .22), rgba(88, 166, 255, .08));
    border: 1px solid rgba(88, 166, 255, .35);
    position: relative;
    margin-top: 1px;
}
.lp-price-check::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 5px;
    border-left: 2px solid #58a6ff;
    border-bottom: 2px solid #58a6ff;
    transform: translate(-50%, -65%) rotate(-45deg);
}
.lp-price-featured .lp-price-check {
    background: linear-gradient(135deg, rgba(255, 240, 0, .25), rgba(255, 240, 0, .08));
    border-color: rgba(255, 240, 0, .45);
    box-shadow: 0 0 8px rgba(255, 240, 0, .3);
}
.lp-price-featured .lp-price-check::after {
    border-left-color: #fff000;
    border-bottom-color: #fff000;
}

/* ── CTA ── */
.lp-price-cta {
    width: 100%;
    justify-content: center;
}
.lp-price-cta-gold {
    background: rgba(255, 240, 0, .04);
    border: 1px solid rgba(255, 240, 0, .35);
    color: #fff000;
    transition: all .3s var(--lp-easing);
}
.lp-price-cta-gold:hover {
    background: rgba(255, 240, 0, .12);
    border-color: rgba(255, 240, 0, .65);
    box-shadow: 0 0 24px rgba(255, 240, 0, .25);
    transform: translateY(-2px);
}

/* ── Footnote ── */
.lp-price-footnote {
    text-align: center;
    margin-top: 40px;
    color: var(--lp-text-mute);
    font-size: 13px;
    line-height: 1.6;
}
.lp-price-footnote b { color: var(--lp-text-soft); }

/* ── Responsive ── */
@media (max-width: 980px) {
    .lp-price-grid { grid-template-columns: 1fr; gap: 32px; max-width: 460px; margin-left: auto; margin-right: auto; }
    .lp-price-featured { transform: translateY(0); }
    .lp-price-featured:hover { transform: translateY(-6px); }
}

/* ─── CTA final ────────────────────────────────────────────────── */
.lp-cta-final {
    position: relative;
    z-index: 1;
    padding: 120px 32px;
    text-align: center;
}
.lp-cta-final .lp-section-inner {
    background: linear-gradient(135deg, rgba(88, 166, 255, .12), rgba(252, 211, 77, .08));
    border: 1px solid rgba(88, 166, 255, .25);
    border-radius: 24px;
    padding: 80px 40px;
    backdrop-filter: blur(30px);
    overflow: hidden;
}
.lp-cta-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(88, 166, 255, .35), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
}
.lp-cta-final .lp-h2 { margin-bottom: 14px; }
.lp-cta-final .lp-lead { margin-bottom: 32px; }

/* ─── Footer ───────────────────────────────────────────────────── */
.lp-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--lp-border);
    background: rgba(7, 8, 12, 0.6);
    backdrop-filter: blur(20px);
    padding: 60px 32px 24px;
    margin-top: 60px;
}
.lp-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    margin-bottom: 40px;
}
.lp-footer-brand img { margin-bottom: 14px; }
.lp-footer-brand p {
    color: var(--lp-text-mute);
    font-size: 13px;
}
.lp-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lp-footer-cols h5 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lp-text);
    margin-bottom: 14px;
}
.lp-footer-cols a {
    display: block;
    color: var(--lp-text-mute);
    font-size: 13px;
    padding: 4px 0;
    transition: color .15s;
}
.lp-footer-cols a:hover { color: var(--lp-indigo-soft); }
.lp-footer-bottom {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid var(--lp-border);
    display: flex;
    justify-content: space-between;
    color: var(--lp-text-mute);
    font-size: 12px;
}
.lp-footer-bottom a { color: var(--lp-text-soft); }
.lp-footer-bottom a:hover { color: var(--lp-indigo-soft); }

/* ─── Reveal-on-scroll ─────────────────────────────────────────── */
.lp-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--lp-easing), transform .8s var(--lp-easing);
}
.lp-reveal.lp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
    .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .lp-hero-stage { height: 540px; }
    .lp-mock-main { width: 100%; max-width: 720px; }
    .lp-mock-v2 { width: 100%; max-width: 720px; }
    .pe-mock-vid-grid { grid-template-columns: repeat(3, 1fr); }
    .pe-mock-vid-add { display: none; }
    .pe-mock-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pe-mock-type-cards { grid-template-columns: 1fr; }
    .pe-mock-mode-cards { grid-template-columns: 1fr; }
    .pe-cr-mode-cards { grid-template-columns: 1fr; }
    .pe-mock-vidlib-grid { grid-template-columns: repeat(2, 1fr); }
    /* Modelo 1 + 2 em mobile/tablet: scroll horizontal pra preservar layout */
    .lp-m1-mock, .lp-m2-mock { font-size: 10px; }
    .lp-m1-thead, .lp-m1-acc-row, .lp-m1-camp-row {
        grid-template-columns: 22px 26px 2fr 60px 70px 36px 44px 60px 44px 60px;
    }
    .lp-m2-thead, .lp-m2-row, .lp-m2-tfoot {
        grid-template-columns: 22px 60px 44px 1.4fr 60px 60px 44px 50px 76px;
    }
    .lp-m1-bread-stats { display: none; }
    .lp-m1-counter { display: none; }
    .lp-m2-updated { display: none; }
    .lp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-stats-inner { grid-template-columns: repeat(2, 1fr); }
    .lp-stat:nth-child(2) { border-right: none; }
    .lp-compare { grid-template-columns: 1fr; }
    .lp-footer-inner { grid-template-columns: 1fr; }
    .lp-step-arrow { display: none; }
    .lp-nav-links { display: none; }
}

@media (max-width: 980px) {
    .lp-flow-creative-grid { grid-template-columns: repeat(3, 1fr); }
    .lp-flow-vid:nth-child(4) { display: none; }
    .lp-flow-chips-2 { flex-direction: column; }
    .lp-flow-line { width: 24px; }
}

@media (max-width: 640px) {
    .lp-nav-inner { padding: 14px 20px; gap: 12px; }
    .lp-nav-cta .lp-btn { padding: 8px 14px; font-size: 13px; }
    .lp-hero { padding-top: 110px; }
    .lp-features-grid { grid-template-columns: 1fr; }
    .lp-stats-inner { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
    .lp-stat { border-right: none; border-bottom: 1px solid var(--lp-border); padding-bottom: 16px; }
    .lp-stat:last-child { border-bottom: none; }
    .lp-cta-final .lp-section-inner { padding: 50px 24px; }
    .lp-float-card { display: none; }
    .lp-flow-steps { gap: 8px; }
    .lp-flow-step { min-width: 130px; padding: 10px 14px; }
    .lp-flow-line { display: none; }
    .lp-flow-creative-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-flow-vid:nth-child(4) { display: none; }
    .lp-live-counter { display: none; }
    .pe-mock-body { padding: 18px; }
    .pe-mock-vid-grid { grid-template-columns: repeat(2, 1fr); }
    .pe-mock-tabs-mini { display: none; }
    /* M1/M2 ocultam colunas menos importantes em mobile pra cabarem */
    .lp-m1-thead > span:nth-child(8),
    .lp-m1-thead > span:nth-child(9),
    .lp-m1-thead > span:nth-child(10),
    .lp-m1-acc-row > span:nth-child(8),
    .lp-m1-acc-row > span:nth-child(9),
    .lp-m1-acc-row > span:nth-child(10),
    .lp-m1-camp-row > span:nth-child(8),
    .lp-m1-camp-row > span:nth-child(9),
    .lp-m1-camp-row > span:nth-child(10) { display: none; }
    .lp-m1-thead, .lp-m1-acc-row, .lp-m1-camp-row {
        grid-template-columns: 22px 26px 2.2fr 60px 70px 36px 44px;
    }
    .lp-m2-thead > span:nth-child(7),
    .lp-m2-thead > span:nth-child(8),
    .lp-m2-thead > span:nth-child(9),
    .lp-m2-row > span:nth-child(7),
    .lp-m2-row > span:nth-child(8),
    .lp-m2-row > span:nth-child(9),
    .lp-m2-tfoot > span:nth-child(7),
    .lp-m2-tfoot > span:nth-child(8),
    .lp-m2-tfoot > span:nth-child(9) { display: none; }
    .lp-m2-thead, .lp-m2-row, .lp-m2-tfoot {
        grid-template-columns: 22px 60px 44px 1.6fr 60px 60px;
    }
}

/* ─── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-bg-aurora, .lp-bg-stars, .lp-bg-glow, .lp-float-card, .lp-pulse,
    .lp-grad-text, .lp-mock-row, .lp-strike::after, .lp-particle, .lp-bg-line,
    .lp-spawn-tag, .lp-live-dot, .lp-flow-launch::before, .lp-flow-vid-play { animation: none; }
    .lp-reveal { transition: none; opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   MASCOTE BEEPMI 3D — base img class (usada pelo VS section)
   Estratégia de sizing: wrapper define ALTURA fixa; img usa
   height: 100% + width: auto. Boss (mais largo) extende além do
   wrapper horizontalmente — wrapper tem overflow: visible. Assim
   ambos mascotes renderizam com a MESMA altura visual.
═══════════════════════════════════════════════════════════════ */
/* <picture> com display: contents pra que o <img> seja o flex item direto
   do .lp-vs-mascot — assim height: 100% resolve contra o wrapper (320px)
   e não contra o <picture> auto-sized (que seria a altura natural do PNG) */
.lp-vs-mascot picture {
    display: contents;
}
.lp-mascot-img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* ── VS section wrappers — altura fixa, largura flexível, overflow visible ── */
.lp-vs-mascot {
    width: 100%;
    max-width: 360px;
    height: 320px;
    margin: 0 auto 24px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 1200px;
    isolation: isolate;
    overflow: visible;
}
/* Halo radial atrás de cada variante VS */
.lp-vs-mascot::before {
    content: '';
    position: absolute;
    inset: 12% 6% 18% 6%;
    border-radius: 50%;
    filter: blur(36px);
    z-index: -1;
    pointer-events: none;
}
/* Pedestal sombra ground */
.lp-vs-mascot::after {
    content: '';
    position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    height: 24px;
    border-radius: 50%;
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

/* ── SAD: Beep clean filtrado (cinza/triste) + lágrimas + halo vermelho ── */
.lp-vs-mascot-sad {
    animation: lpSadSlumpImg 4.4s ease-in-out infinite;
}
.lp-vs-mascot-sad::before {
    background: radial-gradient(ellipse,
        rgba(248, 81, 73, .35) 0%,
        rgba(120, 30, 30, .2) 40%,
        transparent 75%);
    animation: lpSadAuraDim 4.4s ease-in-out infinite;
}
.lp-vs-mascot-sad::after {
    background: radial-gradient(ellipse, rgba(0, 0, 0, .6) 0%, transparent 75%);
    opacity: .6;
}
.lp-mascot-img-sad {
    /* Imagem já tem lágrimas + roupa rasgada built-in — sem filter cinza */
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, .45))
        drop-shadow(0 18px 26px rgba(0, 0, 0, .55))
        drop-shadow(0 0 24px rgba(248, 81, 73, .22));
    transform: rotate(-2deg);
    transition: filter .4s var(--lp-easing);
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
}
@keyframes lpSadSlumpImg {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(4px) rotate(1deg); }
}
@keyframes lpSadAuraDim {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50%      { opacity: .8;  transform: scale(1); }
}

/* ── HAPPY: Beep boss (correntes + Rolex) + sparkles + halo dourado ── */
.lp-vs-mascot-happy {
    animation: lpHappyBounceImg 2.6s ease-in-out infinite;
}
.lp-vs-mascot-happy::before {
    background: radial-gradient(ellipse,
        rgba(255, 240, 0, .45) 0%,
        rgba(88, 166, 255, .35) 40%,
        transparent 75%);
    animation: lpHappyAuraGlow 2.6s ease-in-out infinite;
}
.lp-vs-mascot-happy::after {
    background: radial-gradient(ellipse, rgba(88, 166, 255, .6) 0%, rgba(0, 0, 0, .35) 40%, transparent 75%);
    opacity: .8;
    animation: lpHappyPedestal 2.6s ease-in-out infinite;
}
.lp-mascot-img-happy {
    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, .35))
        drop-shadow(0 18px 26px rgba(0, 0, 0, .45))
        drop-shadow(0 0 38px rgba(88, 166, 255, .6))
        drop-shadow(0 0 24px rgba(255, 240, 0, .4));
    transition: filter .35s var(--lp-easing), transform .35s var(--lp-easing);
    transform-style: preserve-3d;
}
.lp-vs-mascot-happy:hover .lp-mascot-img-happy {
    transform: scale(1.05) rotateY(6deg);
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, .45))
        drop-shadow(0 24px 32px rgba(0, 0, 0, .55))
        drop-shadow(0 0 56px rgba(88, 166, 255, .8))
        drop-shadow(0 0 36px rgba(255, 240, 0, .55));
}
@keyframes lpHappyBounceImg {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes lpHappyAuraGlow {
    0%, 100% { opacity: .65; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes lpHappyPedestal {
    0%, 100% { opacity: .8; transform: translateX(-50%) scaleX(1); }
    50%      { opacity: .55; transform: translateX(-50%) scaleX(.75); }
}

/* Sparkles amarelos rotacionando ao redor */
.lp-mascot-sparkle {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 4;
    background:
        linear-gradient(0deg, transparent 45%, #fff000 47%, #fff000 53%, transparent 55%),
        linear-gradient(90deg, transparent 45%, #fff000 47%, #fff000 53%, transparent 55%);
    filter: drop-shadow(0 0 8px rgba(255, 240, 0, .9));
    animation: lpSparklePulse 2.4s ease-in-out infinite;
}
.lp-mascot-sparkle-1 { top: 12%;  left: 6%;   animation-delay: 0s;   }
.lp-mascot-sparkle-2 { top: 20%;  right: 4%;  animation-delay: .8s; width: 18px; height: 18px; }
.lp-mascot-sparkle-3 { bottom: 18%; right: 10%; animation-delay: 1.6s; width: 14px; height: 14px; }
@keyframes lpSparklePulse {
    0%, 100% { opacity: 0;  transform: scale(.4) rotate(0deg); }
    50%      { opacity: 1;  transform: scale(1.2) rotate(180deg); }
}

@media (max-width: 980px) {
    .lp-vs-mascot { max-width: 280px; height: 240px; }
}

/* ════════════════════════════════════════════════════════════════════
   TRUST STRIP — tech stack badges após stats
   Credibilidade via integrações oficiais (TikTok, Meta, Stripe, etc)
   ════════════════════════════════════════════════════════════════════ */
.lp-trust-strip {
    margin-top: 32px;
    padding: 22px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.lp-trust-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.45);
}
.lp-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 36px;
    align-items: center;
}
.lp-trust-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: default;
}
.lp-trust-logo:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}
.lp-trust-logo svg {
    color: rgba(252, 211, 77, 0.85);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .lp-trust-strip { padding: 18px 16px; }
    .lp-trust-logos { gap: 14px 22px; }
    .lp-trust-logo { font-size: 12px; gap: 6px; }
    .lp-trust-logo svg { width: 16px; height: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   "SOON" / "IN DEVELOPMENT" TAG — used on features not ready yet
   Subtle amber pill, uppercase, low visual weight
   ════════════════════════════════════════════════════════════════════ */
/* FIX 12/05/2026: pill estava com display:inline-flex + line-height 1.4 +
   vertical-align: middle = misalignment em parents com diferentes line-heights
   (parecia tortinha/desalinhada). Agora display:inline-block + line-height
   ajustado + translateY -1px nudge garante baseline visual perfeito. */
.lp-soon-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 999px;
    line-height: 1.3;
    vertical-align: baseline;
    transform: translateY(-1px);
    white-space: nowrap;
}

/* FIX 13/05/2026: pills dentro de <p> descriptions criavam linha extra +
   altura inconsistente entre cards. Solução: corner badge absoluto top-right
   no card (padrão SaaS pra "status: coming soon"). Card height fica
   consistente independente do badge. */
.lp-feat-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-block;
    padding: 3px 9px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.32);
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.lp-trust-logo .lp-soon-tag { font-size: 8px; padding: 1px 6px; }
.lp-trust-logo.lp-trust-soon { opacity: 0.55; }
.lp-trust-logo.lp-trust-soon svg { color: rgba(252, 211, 77, 0.5); }

/* ════════════════════════════════════════════════════════════════════
   FOUNDER LETTER — manifesto anônimo antes do pricing
   Humaniza sem precisar foto/nome, builds trust pra cold traffic
   ════════════════════════════════════════════════════════════════════ */
.lp-letter {
    padding: 96px 24px 80px;
    position: relative;
    overflow: hidden;
}
.lp-letter::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 30% 30%, rgba(88, 166, 255, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 70% 70%, rgba(252, 211, 77, 0.08), transparent 55%);
    pointer-events: none;
}
.lp-letter-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.lp-letter-card {
    background: linear-gradient(135deg,
        rgba(20, 24, 38, 0.92),
        rgba(15, 18, 28, 0.88));
    border: 1px solid rgba(88, 166, 255, 0.18);
    border-radius: 18px;
    padding: 48px 52px 42px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(12px);
}
.lp-letter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(252, 211, 77, 0.14);
    border: 1px solid rgba(252, 211, 77, 0.30);
    border-radius: 100px;
    color: rgb(216, 180, 254);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
}
.lp-letter-body {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(232, 234, 240, 0.92);
}
.lp-letter-body p {
    margin: 0 0 18px;
}
.lp-letter-body p:last-child {
    margin: 0;
}
.lp-letter-body strong {
    color: #fff;
    font-weight: 700;
}
.lp-letter-body em {
    color: rgb(168, 85, 247);
    font-style: italic;
}
.lp-letter-strike {
    text-decoration: line-through;
    color: rgba(232, 234, 240, 0.5);
    text-decoration-color: rgba(239, 68, 68, 0.6);
    text-decoration-thickness: 2px;
}
.lp-letter-sig {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-letter-sig-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgb(99, 102, 241), rgb(168, 85, 247));
    border-radius: 2px;
}
.lp-letter-sig-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-letter-sig-text strong {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.lp-letter-sig-text span {
    color: rgba(232, 234, 240, 0.55);
    font-size: 13px;
    font-style: italic;
}
@media (max-width: 768px) {
    .lp-letter { padding: 60px 16px 50px; }
    .lp-letter-card { padding: 32px 26px 28px; border-radius: 14px; }
    .lp-letter-body { font-size: 15px; }
}