/* ============================================================================
   SELLI.AI — Camada UNIFICADA (variação em teste)
   - Funde clínicas + gestores (pop-up de persona + troca no topbar)
   - Reskin VERDE (escopado em .lp-uni)
   - Hero estilo "flaber" (cabe acima da dobra, dashboard SVG)
   Carrega DEPOIS de lp-tokens.css + lp-system.css.
   ========================================================================== */

/* ---------- 1) RESKIN VERDE (override de tokens, escopado) ---------- */
.lp-uni {
  --g-green:        #16A34A;
  --g-green-bright: #22C55E;
  --g-green-deep:   #15803D;
  --g-brand-blue:   #2563EB; /* azul da marca (logo SELLI.AI, igual ao login) */
  --g-emerald:      #10B981;
  --g-line:         #E5E5E5;
  --g-surface:      #F9FAFB;
  --g-ink:          #0A0A0A;
  --g-ink-2:        #374151;
  --g-ink-3:        #4B5563;
  --g-gray-500:     #737373;
  --g-ink-4:        #9CA3AF;

  --accent:        var(--g-green);
  --accent-hover:  var(--g-green-deep);
  --accent-press:  #136a33;
  --accent-glow:   rgba(22, 163, 74, 0.42);
  --accent-2:      var(--g-emerald);
  --grad-brand:    linear-gradient(120deg, #16A34A 0%, #10B981 100%);
  --grad-cta:      linear-gradient(120deg, #16A34A 0%, #15803D 60%, #10B981 100%);
  --c-accent-tint: rgba(22, 163, 74, 0.10);
  --c-accent-line: rgba(22, 163, 74, 0.24);
}
.lp-uni .band-dark {
  --c-accent-tint: rgba(22, 163, 74, 0.16);
  --c-accent-line: rgba(22, 163, 74, 0.42);
}
.lp-uni .band-dark .aura {
  background:
    radial-gradient(40% 50% at 18% 12%, rgba(22,163,74,0.22), transparent 70%),
    radial-gradient(42% 48% at 82% 0%, rgba(16,185,129,0.14), transparent 72%),
    radial-gradient(36% 40% at 60% 100%, rgba(34,197,94,0.10), transparent 72%);
}

/* ---------- 2) SHELL: alternância de personas ---------- */
.lp-uni .site { display: none; }
.lp-uni .site.is-active { display: block; }
.lp-uni .site > .uni-injected > .nav,
.lp-uni .site .nav { display: none !important; }
/* esconde o hero original de cada LP injetada — usamos o hero novo */
.lp-uni .uni-injected > header.hero,
.lp-uni .uni-injected .band.hero { display: none !important; }
/* esconde o rodapé interno da LP injetada — usamos o rodapé unificado */
.lp-uni .uni-injected .footer { display: none !important; }

/* ---------- 3) TOPBAR UNIFICADO ---------- */
.lp-uni .uni-nav {
  position: sticky; top: 0; z-index: 70;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.lp-uni .uni-nav.scrolled { border-bottom-color: var(--g-line); box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.lp-uni .uni-nav-in {
  max-width: 1200px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; gap: 18px;
}
.lp-uni .uni-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.lp-uni .uni-brand .mk { width: 27px; height: 27px; border-radius: 8px; }
.lp-uni .uni-brand .tx { font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--g-ink); }
.lp-uni .uni-brand .tx .ai { color: var(--g-brand-blue); }

/* Wordmark "SELLI.AI" (imagem) — branco transparente. Por padrão fica em
   contexto CLARO (nav/modal): invertemos pra renderizar quase preto. A variante
   --light é pra fundo ESCURO (rodapé): mantém o branco original. */
.lp-uni .uni-wordmark { height: 21px; width: auto; display: block; user-select: none; filter: invert(1); }
.lp-uni .uni-wordmark--light { filter: none; }
.lp-uni .uni-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.lp-uni .uni-links a {
  font-size: 14px; font-weight: 500; color: var(--g-ink-2);
  padding: 8px 11px; border-radius: 8px; cursor: pointer;
  transition: color .12s, background .12s;
}
.lp-uni .uni-links a:hover { color: var(--g-ink); background: var(--g-surface); }
.lp-uni .uni-spacer { flex: 1; }
.lp-uni .persona-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--g-surface); border: 1px solid var(--g-line);
}
.lp-uni .persona-switch button {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: none; background: none; color: var(--g-gray-500);
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.lp-uni .persona-switch button.active {
  color: #fff; background: var(--g-green);
  box-shadow: 0 4px 12px -4px var(--accent-glow);
}
/* Badge de perfil — réplica exata do flaber (bem menor que o CTA, pílula justa) */
.lp-uni .profile-badge {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #F5F5F5; border: 1px solid #E5E5E5; border-radius: 999px;
  font: inherit; font-weight: 500; font-size: 12px; line-height: 1; color: #374151;
  padding: 5px 11px; transition: border-color .15s, background .15s;
}
.lp-uni .profile-badge:hover { border-color: #D4D4D4; background: #EFEFEF; }
.lp-uni .profile-badge .uicon { width: 14px; height: 14px; }
/* Topbar CTA: preto sólido (sem o gradiente "dupla cor") */
.lp-uni .uni-cta .btn-primary { background: #0A0A0A; color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.lp-uni .uni-cta .btn-primary:hover { background: #1C1C1C; filter: none; }

/* Rodapé unificado (dark, multi-coluna) */
.lp-uni .uni-footer { background: #070708; border-top: 1px solid rgba(255,255,255,.08); padding: 64px 0 34px; }
.lp-uni .uni-footer-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-uni .uf-grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 40px; }
.lp-uni .uni-footer-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.lp-uni .uni-footer-brand .mk { width: 26px; height: 26px; border-radius: 7px; }
.lp-uni .uni-footer-brand .ai { color: var(--g-brand-blue); }
.lp-uni .uni-footer-brand .uni-wordmark { height: 22px; }
.lp-uni .uf-tagline { margin: 16px 0 0; max-width: 300px; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.5); }
.lp-uni .uf-col h4 { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; }
.lp-uni .uf-col a, .lp-uni .uf-col .uf-muted { display: block; font-size: 13.5px; color: rgba(255,255,255,.6); padding: 5px 0; cursor: pointer; transition: color .15s; }
.lp-uni .uf-col a:hover { color: #fff; }
.lp-uni .uf-col .uf-muted { cursor: default; }
.lp-uni .uf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.lp-uni .uf-copy { font-size: 12.5px; color: rgba(255,255,255,.5); }
.lp-uni .uf-legal { display: flex; gap: 22px; }
.lp-uni .uf-legal a { font-size: 12.5px; color: rgba(255,255,255,.55); transition: color .15s; }
.lp-uni .uf-legal a:hover { color: #fff; }
.lp-uni .uf-disclaimer { margin: 18px 0 0; font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,.3); max-width: 920px; }
@media (max-width: 860px) { .lp-uni .uf-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .lp-uni .uf-grid { grid-template-columns: 1fr; } .lp-uni .uf-bottom { flex-direction: column; align-items: flex-start; } }

/* Último bloco (CTA final) — estilo flaber: headline serif + watermark "SELLI" serif */
.lp-uni .final, .lp-uni #final-cta { position: relative; overflow: hidden; }
.lp-uni .final h2, .lp-uni #final-cta h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  letter-spacing: 0; line-height: 1.08;
}
.lp-uni .final .grad-text, .lp-uni #final-cta .grad-text { font-weight: 400; }
/* mata o separador padrão entre seções no bloco final (sem linha no topo) */
.lp-uni .band.final::before, .lp-uni #final-cta::before { content: none !important; }
/* watermark "SELLI" como elemento real (igual .ghost-word do flaber), bem no alto */
.lp-uni .uni-ghost {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(72px, 17vw, 200px); line-height: 1; letter-spacing: .02em;
  color: rgba(255,255,255,.05); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; max-width: 100%;
}
/* CTA do bloco de oferta (gestor): movido pra coluna da direita, full-width (estilo clínica) */
.lp-uni .offer-cta { align-items: center; text-align: center; }
.lp-uni #site-gestores .offer-cta { width: 100%; margin-top: 20px; }
.lp-uni #site-gestores .offer-cta .btn { width: 100%; }
.lp-uni .final .wrap, .lp-uni #final-cta .wrap { position: relative; z-index: 1; }
/* Divisor entre o CTA e o P.S. (igual ao .fc-sep do flaber) */
.lp-uni .uni-fcsep { border-top: 1px solid rgba(255,255,255,.12); max-width: 600px; margin: 40px auto 0; position: relative; z-index: 1; }

/* Bloco 1 — variante VÍDEO (dashboard.mp4) */
.lp-uni .umock--vid { padding: 0; }
.lp-uni .uhero-vid { display: block; width: 100%; aspect-ratio: 1364 / 628; object-fit: cover; background: #0b0b0f; }
.lp-uni .uhero--video .uhero-in { grid-template-columns: 0.92fr 1.08fr; }
@media (max-width: 980px) { .lp-uni .uhero--video .uhero-in { grid-template-columns: 1fr; } }

.lp-uni .uni-cta { display: inline-flex; gap: 10px; align-items: center; }
.lp-uni .uni-cta .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 940px) { .lp-uni .uni-links { display: none; } }
@media (max-width: 560px) { .lp-uni .persona-switch button { padding: 6px 9px; font-size: 11.5px; } .lp-uni .uni-cta { display: none; } }

/* ---------- 4) POP-UP DE PERSONA — CLARO ---------- */
.lp-uni .uni-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 12, 16, 0.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.lp-uni .uni-modal-overlay.open { opacity: 1; pointer-events: auto; }
.lp-uni .uni-modal {
  width: 100%; max-width: 540px;
  background: #fff; color: var(--g-ink);
  border-radius: 18px; padding: 40px;
  box-shadow: 0 40px 100px -24px rgba(0,0,0,0.4);
  transform: scale(.94) translateY(8px); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.lp-uni .uni-modal-overlay.open .uni-modal { transform: none; }
.lp-uni .uni-modal .um-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.lp-uni .uni-modal .um-brand .mk { width: 26px; height: 26px; border-radius: 8px; }
.lp-uni .uni-modal .um-brand .tx { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--g-ink); }
.lp-uni .uni-modal .um-brand .ai { color: var(--g-brand-blue); }
.lp-uni .uni-modal .um-brand .uni-wordmark { height: 20px; }
.lp-uni .uni-modal h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--g-ink); }
.lp-uni .uni-modal .um-sub { font-size: 14px; color: var(--g-gray-500); margin: 8px 0 28px; }
.lp-uni .pcard {
  width: 100%; text-align: left; display: flex; gap: 15px; align-items: flex-start;
  background: #fff; border: 2px solid var(--g-line);
  border-radius: 12px; padding: 18px; margin-bottom: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lp-uni .pcard:hover { border-color: var(--g-ink); background: #F5F5F5; }
.lp-uni .pcard[aria-pressed="true"] { border-color: var(--g-green); background: #F0FDF4; }
.lp-uni .pcard .pc-ic {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--g-ink);
  background: #F5F5F5;
}
.lp-uni .pcard[aria-pressed="true"] .pc-ic { background: #fff; color: var(--g-green); }
.lp-uni .pcard h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 4px; color: var(--g-ink); }
.lp-uni .pcard p { font-size: 13px; color: var(--g-gray-500); line-height: 1.5; margin: 0; }
.lp-uni .uni-modal .um-continue {
  width: 100%; justify-content: center; margin-top: 8px;
  padding: 14px 24px; font-size: 15px;
  background: #0A0A0A; color: #fff; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45);
}
.lp-uni .uni-modal .um-continue:hover { background: #1C1C1C; filter: none; }
.lp-uni .uni-modal .um-continue[disabled] { opacity: .4; cursor: not-allowed; }
.lp-uni .uni-modal .um-micro { text-align: center; font-size: 12.5px; color: var(--g-ink-4); margin-top: 16px; }

/* ============================================================================
   5) HERO ESTILO FLABER — claro, denso, cabe acima da dobra
   Classes prefixadas (u…) pra não colidir com lp-system.css
   ========================================================================== */
.lp-uni .uhero {
  position: relative; overflow: hidden;
  min-height: calc(100vh - 58px);
  display: flex; align-items: center;
  padding: clamp(36px,5vw,64px) 0 clamp(44px,5vw,72px);
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
  background-size: 40px 40px;
  background-color: #fff;
}
.lp-uni .uhero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #fff 0%, rgba(255,255,255,0) 100%);
}
.lp-uni .uhero-in {
  position: relative; z-index: 1; width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 58fr 42fr; gap: clamp(32px,4vw,60px); align-items: center;
}
.lp-uni .uicon { width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.lp-uni .uicon-xs { width:16px;height:16px; }

.lp-uni .uhero-eyebrow {
  display:inline-block; background:#F5F5F5; color:var(--g-gray-500);
  font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.lp-uni .uhero h1 {
  font-family: var(--font-ui), system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.08; letter-spacing: -.022em; color: var(--g-ink);
}
.lp-uni .uhero h1 em { font-style: normal; color: var(--g-green); font-weight: 800; }
.lp-uni .uhero-lede { font-size:1.08rem; line-height:1.7; color:var(--g-ink-2); margin-top:22px; max-width:520px; }
.lp-uni .uhero-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:30px; }
.lp-uni .uhero-ctas .btn { font-size: 15px; }
.lp-uni .ubtn-ghost {
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;
  color:var(--g-ink-2); padding:14px 8px; cursor:pointer; background:none; border:none;
}
.lp-uni .ubtn-ghost:hover { color:var(--g-ink); }
.lp-uni .uhero-micro { font-size:.8rem; color:var(--g-ink-4); margin-top:14px; }
.lp-uni .uhero-proof { display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.lp-uni .ustars { display:flex; gap:2px; }
.lp-uni .ustars svg { width:16px;height:16px; fill:#FACC15; stroke:none; }
.lp-uni .uvline { width:1px; height:20px; background:var(--g-line); }
.lp-uni .uproof-text { font-weight:500; font-size:.85rem; color:var(--g-ink-2); }

/* Dashboard mockup */
.lp-uni .uhero-visual { position: relative; }
.lp-uni .umock {
  background:#fff; border:1px solid var(--g-line); border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.12); overflow:hidden;
}
.lp-uni .umock-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--g-line); }
.lp-uni .umock-bar .dot { width:10px;height:10px;border-radius:50%; }
.lp-uni .umock-bar .dot--r{background:#F87171} .lp-uni .umock-bar .dot--y{background:#FBBF24} .lp-uni .umock-bar .dot--g{background:#34D399}
.lp-uni .umock-bar .umock-title { font-weight:500; font-size:.75rem; color:var(--g-gray-500); margin-left:6px; }
.lp-uni .umock-body { background:var(--g-surface); padding:16px; }
.lp-uni .ukpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lp-uni .ukpi { background:#fff; border:1px solid var(--g-line); border-radius:8px; padding:12px; }
.lp-uni .ukpi .k-label { font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-4); line-height:1.4; }
.lp-uni .ukpi .k-value { font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-size:1.05rem; margin-top:4px; color:var(--g-ink); }
.lp-uni .ukpi .k-delta { display:inline-flex; align-items:center; gap:3px; font-size:.65rem; font-weight:600; margin-top:4px; color:var(--g-green); }
.lp-uni .ukpi .k-delta svg { width:10px;height:10px;stroke-width:2.5; }
.lp-uni .umc { background:#fff; border:1px solid var(--g-line); border-radius:8px; padding:12px; margin-top:10px; }
.lp-uni .umc .mc-title { font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g-ink-4); margin-bottom:8px; }
.lp-uni .umflow { margin-top:10px; background:#fff; border:1px solid var(--g-line); border-radius:8px; padding:14px 12px 10px; }

/* Flow (mock pequeno) */
.lp-uni .uflow { display:flex; align-items:flex-start; justify-content:space-between; }
.lp-uni .uflow-node { display:flex; flex-direction:column; align-items:center; text-align:center; flex:0 0 auto; position:relative; z-index:1; }
.lp-uni .ufn-circle { width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--g-line);box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;color:var(--g-ink); }
.lp-uni .ufn-circle .uicon { width:18px;height:18px; }
.lp-uni .ufn-label { font-weight:500; font-size:.6rem; color:var(--g-ink-2); margin-top:6px; line-height:1.3; }
.lp-uni .uflow-link { flex:1 1 auto; height:44px; display:flex; align-items:center; min-width:16px; }
.lp-uni .uflow-link svg { width:100%; height:8px; overflow:visible; }
.lp-uni .uflow-link .fl-path { stroke:var(--g-line); stroke-width:2; stroke-dasharray:6 4; fill:none; }

/* Float cards */
.lp-uni .ufloat {
  position:absolute; z-index:2; background:#fff; border-radius:12px; padding:13px 17px;
  box-shadow:0 8px 32px rgba(0,0,0,.12); display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.lp-uni .ufloat-1 { top:0; right:0; transform:translate(18%,-30%); }
.lp-uni .ufloat-2 { bottom:0; left:0; transform:translate(-16%,24%); }
.lp-uni .ufc-dot { width:8px;height:8px;border-radius:50%;background:var(--g-green);flex-shrink:0; }
.lp-uni .ufc-label { font-weight:700; font-size:.78rem; color:var(--g-green); }
.lp-uni .ufc-value { font-weight:700; font-size:.88rem; color:var(--g-ink); }

@media (max-width: 980px) {
  .lp-uni .uhero { min-height: 0; }
  .lp-uni .uhero-in { grid-template-columns: 1fr; gap: 56px; }
  .lp-uni .uhero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
  .lp-uni .ufloat-1 { transform: translate(4%,-38%); }
  .lp-uni .ufloat-2 { transform: translate(-2%,32%); }
  .lp-uni .ufloat { padding:10px 13px; }
  .lp-uni .ufc-label, .lp-uni .ufc-value { font-size:.72rem; }
}

/* Animações (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  .lp-uni .ufloat { animation: ufloatCard 4s ease-in-out infinite; }
  .lp-uni .ufloat-2 { animation-delay: 2s; }
  @keyframes ufloatCard { 0%,100%{ margin-top:0 } 50%{ margin-top:-8px } }
  .lp-uni .ufc-dot { animation: ublink 1.6s ease-in-out infinite; }
  @keyframes ublink { 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
  .lp-uni .uflow-link .fl-path { stroke-dashoffset:200; animation: udraw 3s ease-in-out infinite; }
  @keyframes udraw { 0%{ stroke-dashoffset:200 } 70%,100%{ stroke-dashoffset:0 } }
  .lp-uni .uflow-node--last .ufn-circle { animation: upulse 3s ease-in-out infinite; }
  @keyframes upulse {
    0%,60%{ box-shadow:0 2px 8px rgba(0,0,0,.05); border-color:var(--g-line); }
    75%{ box-shadow:0 0 0 8px rgba(22,163,74,.15); border-color:var(--g-green); }
    90%,100%{ box-shadow:0 2px 8px rgba(0,0,0,.05); border-color:var(--g-line); }
  }
}

/* ============================================================================
   6) "COMO FUNCIONA" — FLUXO ANIMADO VIBRANTE (substitui emoji+texto)
   Ícones em verde sólido + glow, anel pulsando, e ponto de luz percorrendo a linha.
   Usa tokens -> adapta a band clara (clínicas) e escura (gestores)
   ========================================================================== */
.lp-uni .ucomo { display: flex; align-items: flex-start; gap: 0; margin-top: 8px; }
.lp-uni .ucomo-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; }
.lp-uni .ucomo-badge {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); background: var(--c-accent-tint);
  border: 1px solid var(--c-accent-line); padding: 3px 11px; border-radius: 999px; margin-bottom: 16px;
}
.lp-uni .ucomo-ic {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-cta); color: #fff;
  box-shadow: 0 16px 32px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4);
  margin-bottom: 20px; position: relative;
}
.lp-uni .ucomo-ic::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: .45;
}
.lp-uni .ucomo-ic .uicon { width: 31px; height: 31px; color: #fff; stroke-width: 2; }
.lp-uni .ucomo-node h3 { font-size: 17.5px; font-weight: 700; color: var(--c-text); margin: 0 0 8px; letter-spacing: -.01em; }
.lp-uni .ucomo-node p { font-size: 14px; line-height: 1.55; color: var(--c-text-muted); margin: 0; max-width: 240px; }

.lp-uni .ucomo-conn { flex: 0 0 auto; width: clamp(24px, 6vw, 100px); height: 74px; position: relative; margin-top: 37px; }
.lp-uni .ucomo-conn::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%);
  border-radius: 99px; opacity: .6;
  background: linear-gradient(90deg, var(--c-accent-line), var(--accent), var(--c-accent-line));
}
.lp-uni .ucomo-spark {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--g-green-bright); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 4px rgba(34,197,94,.2), 0 0 14px 2px var(--accent-glow);
}
@media (max-width: 760px) {
  .lp-uni .ucomo { flex-direction: column; align-items: center; }
  .lp-uni .ucomo-node { flex: none; max-width: 360px; }
  .lp-uni .ucomo-conn { width: 3px; height: 42px; margin: 6px 0; }
  .lp-uni .ucomo-conn::before { top: 0; bottom: 0; left: 50%; right: auto; width: 3px; height: auto; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--c-accent-line), var(--accent), var(--c-accent-line)); }
  .lp-uni .ucomo-spark { left: 50%; top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-uni .ucomo-spark { animation: usparkX 2.4s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes usparkX { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  .lp-uni .ucomo-ic { animation: ucomoFloat 3.6s ease-in-out infinite; }
  .lp-uni .ucomo-node:nth-child(3) .ucomo-ic { animation-delay: .4s; }
  .lp-uni .ucomo-node:nth-child(5) .ucomo-ic { animation-delay: .8s; }
  @keyframes ucomoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .lp-uni .ucomo-ic::after { animation: ucomoRing 3.6s ease-in-out infinite; }
  @keyframes ucomoRing { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.14); opacity: 0; } }
  @media (max-width: 760px) {
    .lp-uni .ucomo-spark { animation: usparkY 2.4s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes usparkY { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  }
}