/* Connexfy — camada custom sobre o Tailwind (design system) */
:root{
  --brand:#6366F1; --brand-600:#4F46E5; --violet:#A855F7;
  --deep:#0A0E1A; --grad:linear-gradient(120deg,#6366F1 0%,#A855F7 100%);
}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* marca (logo mark) */
.cx-mark{ background:var(--grad); box-shadow:0 6px 16px -8px rgba(99,102,241,.9); }

/* texto em gradiente — assinatura, uso escasso */
.cx-grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* botões */
.cx-btn-primary{
  display:inline-flex; align-items:center; gap:8px; color:#fff; background:var(--brand);
  transition:transform .12s ease, background .2s ease;
}
.cx-btn-primary:hover{ background:var(--brand-600); transform:translateY(-1px); }
.cx-btn-ghost{
  display:inline-flex; align-items:center; gap:8px; color:var(--ink,#0F172A);
  border:1px solid #E7E9F2; background:#fff; transition:border-color .2s, background .2s;
}
.cx-btn-ghost:hover{ border-color:#c9cee0; }
.cx-btn-light{
  display:inline-flex; align-items:center; gap:8px; color:#1E1B4B; background:#fff;
  transition:transform .12s ease;
}
.cx-btn-light:hover{ transform:translateY(-1px); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* seções DEEP — glow + dot-grid */
.cx-deep{ position:relative; background:var(--deep); color:#EBEDF7; overflow:hidden; }
.cx-deep::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 78%);
}
.cx-glow{
  position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:860px; height:560px; pointer-events:none; filter:blur(22px);
  background:
    radial-gradient(closest-side at 42% 12%, rgba(124,92,246,.55), transparent 66%),
    radial-gradient(closest-side at 72% 58%, rgba(99,102,241,.34), transparent 62%);
}

/* profundidade em camadas nos mockups */
.cx-mock{ box-shadow:0 2px 4px rgba(15,23,42,.04), 0 24px 50px -30px rgba(20,26,54,.30); }

/* seção Problema — ferramentas soltas (o caos) que se juntam no hover */
.cx-scatter{ position:absolute; display:flex; align-items:center; gap:8px; padding:11px 15px;
  background:#fff; border:1px dashed #CBD5E1; border-radius:12px;
  box-shadow:0 12px 26px -18px rgba(20,26,54,.28);
  color:#94A3B8; font-size:.85rem; font-weight:500; white-space:nowrap;
  transform:rotate(var(--rot,0deg)); will-change:transform;
  transition:transform .6s cubic-bezier(.2,.75,.2,1), border-color .4s ease, color .4s ease, box-shadow .4s ease; }
.cx-scatter svg{ color:#B4BBCB; flex:none; transition:color .4s ease; }
/* hover na área: cards deslizam pro centro, endireitam e "acendem" */
.cx-scatterwrap:hover .cx-scatter{
  transform:translate(var(--hx,0), var(--hy,0)) rotate(0deg);
  border-color:#C7CBF5; color:#6366F1; box-shadow:0 16px 32px -18px rgba(99,102,241,.4); }
.cx-scatterwrap:hover .cx-scatter svg{ color:#6366F1; }
@media (prefers-reduced-motion:reduce){
  .cx-scatter{ transition:none; }
  .cx-scatterwrap:hover .cx-scatter{ transform:rotate(var(--rot,0deg)); }
}

/* menu mobile (hambúrguer ↔ X) */
.cx-navbtn .ic-x{ display:none; }
.cx-navbtn.is-open .ic-menu{ display:none; }
.cx-navbtn.is-open .ic-x{ display:block; }

/* drawer lateral (direita) + overlay */
.cx-drawer{
  position:fixed; top:0; right:0; height:100dvh; width:82%; max-width:320px; z-index:60;
  background:#fff; box-shadow:-24px 0 60px -24px rgba(15,23,42,.4);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.cx-drawer.is-open{ transform:translateX(0); }
.cx-overlay{
  position:fixed; inset:0; z-index:55; background:rgba(10,14,26,.45);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cx-overlay.is-open{ opacity:1; visibility:visible; }
.cx-noscroll{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .cx-drawer{ transition:none; } .cx-overlay{ transition:none; }
}

/* acordeon suave (FAQ) */
.cx-acc-a{ height:0; overflow:hidden; transition:height .38s cubic-bezier(.3,.75,.3,1); }
.cx-acc-q{ cursor:pointer; }
.cx-acc-chev{ transition:transform .3s ease; }
.cx-acc.is-open .cx-acc-chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .cx-acc-a{ transition:none; } }

/* dropdown de idioma */
.cx-langdd summary{ list-style:none; }
.cx-langdd summary::-webkit-details-marker{ display:none; }
.cx-langdd .cx-chev-sm{ transition:transform .2s; }
.cx-langdd[open] .cx-chev-sm{ transform:rotate(180deg); }

/* hero — camadas flutuantes + parallax + tilt */
.cx-chip{ position:absolute; z-index:20; background:#fff; border:1px solid #E7E9F2;
  border-radius:12px; box-shadow:0 16px 36px -18px rgba(20,26,54,.42); }
.cx-parallax{ transition:transform .3s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.cx-tiltwrap{ perspective:1000px; }
.cx-tilt{ transition:transform .22s ease-out; will-change:transform; }
@media (prefers-reduced-motion:reduce){ .cx-parallax, .cx-tilt{ transition:none; transform:none !important; } }

/* card com barra de topo em gradiente */
.cx-topbar{ position:relative; overflow:hidden; }
.cx-topbar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad);
}

/* reveal suave no load */
.cx-reveal{ opacity:0; transform:translateY(14px); animation:cxUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.cx-r2{ animation-delay:.08s; } .cx-r3{ animation-delay:.16s; } .cx-r4{ animation-delay:.24s; }
@keyframes cxUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .cx-reveal{ animation:none; opacity:1; transform:none; } }

/* detalhes de FAQ nativos */
details.cx-faq{ border-bottom:1px solid #E7E9F2; }
details.cx-faq summary{ list-style:none; cursor:pointer; }
details.cx-faq summary::-webkit-details-marker{ display:none; }
details.cx-faq .cx-chev{ transition:transform .2s; }
details.cx-faq[open] .cx-chev{ transform:rotate(180deg); }

/* ===== Premium pass ===== */

/* rede neural no fundo do hero */
.cx-neural{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* aurora ambiente no hero — sutil, lenta */
.cx-hero-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.cx-hero-aurora::before, .cx-hero-aurora::after{ content:""; position:absolute; border-radius:50%; filter:blur(72px); }
.cx-hero-aurora::before{
  width:540px; height:540px; top:-180px; left:-90px;
  background:radial-gradient(circle, rgba(99,102,241,.26), transparent 70%);
  animation:cxAuroraA 26s ease-in-out infinite alternate;
}
.cx-hero-aurora::after{
  width:460px; height:460px; top:-90px; right:-70px;
  background:radial-gradient(circle, rgba(168,85,247,.20), transparent 70%);
  animation:cxAuroraB 30s ease-in-out infinite alternate;
}
@keyframes cxAuroraA{ to{ transform:translate(70px,50px) scale(1.12); } }
@keyframes cxAuroraB{ to{ transform:translate(-60px,70px) scale(1.09); } }

/* float sutil no mock do produto */
.cx-float{ animation:cxFloat 6.5s ease-in-out infinite; }
@keyframes cxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* aurora lenta também nas seções Deep */
.cx-deep .cx-glow{ animation:cxDrift 30s ease-in-out infinite alternate; }
@keyframes cxDrift{ to{ transform:translateX(-50%) translateY(30px) scale(1.08); } }

/* scroll reveal */
.cx-rv{ opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.cx-rv.is-in{ opacity:1; transform:none; }

/* hover premium nos cards */
.cx-topbar, .cx-lift{ transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
.cx-topbar{ box-shadow:0 1px 2px rgba(15,23,42,.03); }
.cx-topbar:hover, .cx-lift:hover{
  transform:translateY(-3px); border-color:#d9dcec;
  box-shadow:0 20px 44px -26px rgba(79,70,229,.38);
}

/* nav ganha profundidade ao rolar */
header{ transition:box-shadow .25s ease; }
.cx-nav-scrolled{ box-shadow:0 1px 0 rgba(15,23,42,.04), 0 10px 28px -20px rgba(15,23,42,.22); }

@media (prefers-reduced-motion:reduce){
  .cx-hero-aurora::before, .cx-hero-aurora::after, .cx-float, .cx-deep .cx-glow{ animation:none; }
  .cx-rv{ opacity:1; transform:none; transition:none; }
}