/* LupaPay enhancement layer v1. Vive fora do root React (#main), seguro contra re-render.
   Marca: #4455bb (indigo). Tudo aqui e aditivo: apagar este arquivo devolve o site original. */

html { color-scheme: dark; scroll-behavior: smooth; scrollbar-color: #26262c #000; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* selecao de texto na cor da marca */
::selection { background: rgba(68, 85, 187, .6); color: #fff; }

/* scrollbar escura discreta (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #26262c; border-radius: 8px; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #4455bb; }

/* foco de teclado visivel e na marca (acessibilidade moderna) */
:focus-visible { outline: 2px solid rgba(99, 116, 224, .9); outline-offset: 3px; border-radius: 4px; }

/* hairlines respiram no hover: a borda sobe de branco 10-15% para indigo claro */
[data-border="true"]::after { transition: border-color .3s ease !important; }
[data-border="true"]:hover { --border-color: rgba(129, 146, 255, .38) !important; }

/* cards de feature: brilho ambiente indigo no hover, sem mexer em transform (nao briga com as appear animations) */
[data-framer-name="Card"],
[data-framer-name^="AI Kit/Feature"] { transition: box-shadow .35s ease, filter .35s ease; }
[data-framer-name="Card"]:hover,
[data-framer-name^="AI Kit/Feature"]:hover {
  filter: saturate(1.08) brightness(1.04);
  box-shadow: 0 0 0 1px rgba(99, 116, 224, .22), 0 18px 60px -24px rgba(68, 85, 187, .55);
}

/* botoes e pills: resposta tatil de hover/press via brilho e sombra */
#main button[type="submit"],
#main a[data-border="true"] { transition: filter .18s ease, box-shadow .25s ease; }
#main button[type="submit"]:hover,
#main a[data-border="true"]:hover { filter: brightness(1.1); box-shadow: 0 6px 28px -10px rgba(68, 85, 187, .65); }
#main button[type="submit"]:active,
#main a[data-border="true"]:active { filter: brightness(.92); }

/* campo de email: anel de foco da marca */
#main input.framer-form-input { transition: box-shadow .2s ease; }
#main input.framer-form-input:focus { box-shadow: 0 0 0 1px rgba(99, 116, 224, .7), 0 0 0 5px rgba(68, 85, 187, .18) !important; }

/* titulos com gradiente respiram de leve. So via filter: mexer no background
   (size/position) reacende wordmarks decorativos que o design esconde pela posicao
   do gradiente, e foi isso que quebrou o logo. A classe lp-ready (posta pelo JS
   2s depois do load) garante que a entrada do Framer ja acabou. */
@media (prefers-reduced-motion: no-preference) {
  html.lp-ready [data-text-fill="true"] { animation: lp-breathe 9s ease-in-out infinite; }
}
@keyframes lp-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

/* ── Risk Monitoring title: center-align on desktop to match other cards ── */
.framer-O3ZrU .framer-2ydefy,
.framer-O3ZrU .framer-2ydefy h6.framer-text,
.framer-O3ZrU .framer-tlff42,
.framer-O3ZrU .framer-tlff42 h6.framer-text,
.framer-O3ZrU .framer-12oa25a,
.framer-O3ZrU .framer-12oa25a h6.framer-text {
  text-align: center !important;
  --framer-text-alignment: center !important;
}
.framer-O3ZrU .framer-12oa25a,
.framer-O3ZrU .framer-1ngp2ha {
  align-items: center !important;
}

/* ===== v2 ===== */

/* shine sweep nos botoes primarios */
button[type="submit"][data-framer-name="Form Button"] { position: relative; overflow: hidden; }
button[type="submit"][data-framer-name="Form Button"]::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .5s ease; pointer-events: none;
}
button[type="submit"][data-framer-name="Form Button"]:hover::after { left: 120%; }

/* caret e placeholder do campo de email na identidade */
#main input.framer-form-input { caret-color: rgb(140, 155, 255); }
#main input.framer-form-input::placeholder { color: rgba(255, 255, 255, .35); }

/* spotlight dos cards (overlay criado pelo enhance.js) */
.lp-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: screen;
  background: radial-gradient(220px circle at var(--lp-mx, 50%) var(--lp-my, 50%), rgba(99,116,224,.28), transparent 70%);
}
[data-framer-name="Card"]:hover .lp-spot { opacity: 1; }

/* rodape legal entra com fade sutil. O estado escondido (.lp-prep) so e aplicado
   pelo JS, entao sem JS o disclaimer fica sempre visivel (e compliance). */
#site-disclaimer { transition: opacity .7s ease, transform .7s ease; }
#site-disclaimer.lp-prep { opacity: 0; transform: translateY(10px); }

/* Hero title two-line fix: desktop variant (.framer-cxeoh7) is Montserrat 82px capped
   at 600px — too narrow for two-word lines. Widen to 900px so "Payment Infrastructure"
   and "for Modern Businesses." each sit on exactly one line. */
@media (min-width: 980px) {
  .framer-cxeoh7 {
    max-width: min(900px, 90vw) !important;
  }
}

/* ── Logo centering ──────────────────────────────────────────────────────────
   The LupaPay wordmark containers are absolutely positioned at the top-left
   of the hero: framer-4x0mx3-container (desktop, left:42px) and
   framer-1mbz3ch-container (mobile/tablet, left:25px). Center them
   horizontally on all breakpoints. */
.framer-O3ZrU .framer-4x0mx3-container,
.framer-O3ZrU .framer-1mbz3ch-container {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* ── Mobile layout: prevent hero/below-section overlap ───────────────────────
   On mobile (≤979px) the Framer canvas can overlap sections due to
   absolutely-positioned decorative layers and rigid flex ordering.
   Force proper stacking and clear overflow. */
@media (max-width: 979px) {
  /* Hide only the "Global Transactions, Simplified" heading on mobile,
     keep the cards/content below it visible */
  .framer-O3ZrU .framer-l6ixrc {
    display: none !important;
  }

  /* Clip the mobile hero so the dashboard mockup doesn't bleed
     into the next section (Framer sets overflow:visible by default) */
  .framer-O3ZrU .framer-f4emxb {
    overflow: hidden !important;
  }

  /* Push the pill ("LupaPay is Live") header down so it doesn't
     crowd the absolutely-positioned logo above it */
  .framer-O3ZrU .framer-f4emxb .framer-1jcse4y {
    margin-top: 80px !important;
  }

  /* Canvas flows as a standard flex column */
  .framer-O3ZrU.framer-jjudrd {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  /* Every direct child section gets relative positioning so it sits in flow */
  .framer-O3ZrU.framer-jjudrd > * {
    position: relative !important;
    flex-shrink: 0 !important;
  }
  /* Keep decorative absolute layers inside their own section */
  .framer-1jrkwvp {
    pointer-events: none;
  }
  /* Give hero section a sensible min-height on mobile */
  .framer-O3ZrU .framer-kwjZH {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Prevent the CTA / "Get Early Access" section from overflowing on mobile */
  .framer-O3ZrU .framer-13kxl6w {
    height: auto !important;
    min-height: unset !important;
    padding: 60px 24px !important;
  }
}

/* Globe fallback is handled in the Framer bundle: when WebGL is
   unavailable, a static /assets/images/globe-fallback.png is injected
   in place of the canvas. */