/* =====================================================================================================
   Aurora · site do GoCode Projetos (body.ps). Abre no escuro (data-tema-padrao) e tem o mesmo desenho no claro.
   Por cima de landing.css e site.css: redefine as cores (--lp-*) para os dois modos e traz os blocos novos da
   página inicial (x-*): capa com auroras, chão em perspectiva e o sistema em 3D, faixa que corre, grade "bento",
   números que contam, passos com trilho de luz e o fechamento com feixe de luz.
   ===================================================================================================== */

body.ps {
  --x-p: var(--lp, #6d4cff);
  --x-s: #22d3ee;
  --x-v: #a855f7;
  /* assinatura Aurora: a cor da marca passando pelo violeta até o ciano */
  --x-grad: linear-gradient(120deg, var(--x-p) 0%, color-mix(in srgb, var(--x-p) 35%, var(--x-v)) 45%, var(--x-s) 100%);
  --x-ease: cubic-bezier(.2, .8, .2, 1);
  --x-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --x-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  /* claro */
  --x-bg: #f7f7fb; --x-bg-2: #eef0f7; --x-surface: rgba(255, 255, 255, .78); --x-solid: #fff;
  --x-line: rgba(16, 18, 45, .09); --x-line-2: rgba(16, 18, 45, .16);
  --x-ink: #0b0c1a; --x-txt: #4a4d66; --x-mut: #777a95;
  --x-sh: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 50px -24px rgba(16, 18, 45, .25);
  --x-glow-op: .5; --x-grid: rgba(16, 18, 45, .07);
  --lp-ink: var(--x-ink); --lp-txt: var(--x-txt); --lp-mut: var(--x-mut); --lp-line: var(--x-line); --lp-bg: var(--x-bg-2);
  --lp-soft: color-mix(in srgb, var(--x-p) 12%, transparent); --lp-sh: var(--x-sh); --lp-sh-lg: 0 40px 90px -30px rgba(16, 18, 45, .35);
  --ps-noite: var(--x-bg); --ps-noite-2: var(--x-bg-2);
  background: var(--x-bg); color: var(--x-txt); font-family: var(--x-font); letter-spacing: -.008em;
}
[data-bs-theme=dark] body.ps {
  --x-bg: #04040a; --x-bg-2: #0a0a14; --x-surface: rgba(255, 255, 255, .035); --x-solid: #0c0c17;
  --x-line: rgba(255, 255, 255, .08); --x-line-2: rgba(255, 255, 255, .16);
  --x-ink: #f5f5fb; --x-txt: #b8bace; --x-mut: #7e8099;
  --x-sh: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 70px -30px rgba(0, 0, 0, .9);
  --x-glow-op: .9; --x-grid: rgba(255, 255, 255, .06);
  --lp-sh-lg: 0 50px 120px -40px rgba(0, 0, 0, 1);
}
body.ps h1, body.ps h2, body.ps h3, body.ps h4 { color: var(--x-ink); letter-spacing: -.03em; }
body.ps .text-gray-900 { color: var(--x-ink) !important; }
body.ps .text-muted { color: var(--x-mut) !important; }
body.ps ::selection { background: color-mix(in srgb, var(--x-p) 35%, transparent); color: var(--x-ink); }
body.ps code, body.ps kbd { font-family: var(--x-mono); }

/* ---------------------------------------------------------------- topo: cápsula de vidro flutuante */
body.ps .lp-nav.ps-nav { position: sticky; top: 12px; z-index: 80; background: transparent; border: 0; backdrop-filter: none; padding: 0 12px; }
body.ps .lp-nav.ps-nav > .lp-wrap {
  max-width: 1180px; min-height: 60px; padding: 0 10px 0 18px; border-radius: 20px; border: 1px solid var(--x-line);
  background: color-mix(in srgb, var(--x-solid) 62%, transparent); box-shadow: var(--x-sh);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); transition: background .3s, box-shadow .3s;
}
body.ps.a-rolou .lp-nav.ps-nav > .lp-wrap { background: color-mix(in srgb, var(--x-solid) 84%, transparent); }
body.ps .ps-marca, body.ps .ps-marca .marca { color: var(--x-ink); font-weight: 700; letter-spacing: -.035em; }
body.ps .ps-logo { background: var(--x-grad); background-size: 200% 200%; animation: x-mexe 6s ease-in-out infinite; box-shadow: 0 8px 24px -8px var(--x-p), inset 0 1px 0 rgba(255, 255, 255, .35); }
body.ps .ps-links a { color: var(--x-mut); font-weight: 500; font-size: 14.5px; border-radius: 12px; }
body.ps .ps-links a:hover, body.ps .ps-links a.on { color: var(--x-ink); background: color-mix(in srgb, var(--x-p) 10%, transparent); }
body.ps .ps-burger { border-color: var(--x-line); color: var(--x-ink); }
body.ps .ps-menu-cel { margin: 8px 12px 0; border-radius: 18px; border: 1px solid var(--x-line); background: color-mix(in srgb, var(--x-solid) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.ps .ps-menu-cel a:not(.lp-b) { color: var(--x-ink); border-color: var(--x-line); }
body.ps .x-tema { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--x-line); background: transparent; color: var(--x-ink); display: grid; place-items: center; }
body.ps .x-tema .tema-claro, [data-bs-theme=dark] body.ps .x-tema .tema-escuro { display: none; }
[data-bs-theme=dark] body.ps .x-tema .tema-claro { display: inline; }

/* ---------------------------------------------------------------- botões */
body.ps .lp-b { border-radius: 14px; font-weight: 600; letter-spacing: -.01em; transition: transform .25s var(--x-ease), box-shadow .3s var(--x-ease), background .3s, border-color .3s; }
body.ps .lp-b.pri { background: var(--x-grad); background-size: 160% 160%; color: #fff; position: relative; overflow: hidden; border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 14px 36px -12px var(--x-p); }
body.ps .lp-b.pri::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: x-brilho 3.6s ease-in-out infinite; }
body.ps .lp-b.pri:hover { color: #fff; filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 20px 50px -14px var(--x-p); background-position: 100% 0; }
body.ps .lp-b.line, body.ps .lp-b.ghost, body.ps .lp-b.soft { background: var(--x-surface); color: var(--x-ink); border: 1px solid var(--x-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.ps .lp-b.line:hover, body.ps .lp-b.ghost:hover, body.ps .lp-b.soft:hover { border-color: var(--x-line-2); color: var(--x-ink); background: color-mix(in srgb, var(--x-p) 8%, var(--x-surface)); }
body.ps .lp-b.light { background: #fff; color: #0b0c1a; }
@keyframes x-brilho { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes x-mexe { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------------------------------------------------------------- blocos comuns (todas as páginas do site) */
body.ps .lp-sec { position: relative; }
body.ps .lp-sec.cinza { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--x-p) 4%, transparent) 50%, transparent); }
body.ps .lp-card, body.ps .ps-tec, body.ps .ps-num, body.ps .ps-visual, body.ps .lp-plano, body.ps .ps-mod, body.ps .lp-faq details {
  background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 22px; box-shadow: var(--x-sh); position: relative; isolation: isolate;
  transition: transform .35s var(--x-ease), border-color .3s, box-shadow .35s;
}
body.ps .lp-card::before, body.ps .x-tile::before, body.ps .ps-tec::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--x-p) 14%, transparent), transparent 45%);
}
body.ps .lp-card:hover::before, body.ps .x-tile:hover::before, body.ps .ps-tec:hover::before { opacity: 1; }
body.ps .lp-card:hover, body.ps .ps-tec:hover { border-color: color-mix(in srgb, var(--x-p) 30%, var(--x-line)); transform: translateY(-3px); }
body.ps .lp-eyebrow { color: var(--x-p); font-family: var(--x-mono); font-size: 12px; letter-spacing: .14em; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
body.ps .lp-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--x-grad); box-shadow: 0 0 10px var(--x-p); }
body.ps .lp-tit h2, body.ps .ps-bloco h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.04; font-weight: 700; letter-spacing: -.045em; }
body.ps .ps-check i, body.ps .bi-check2, body.ps .bi-check-circle-fill { color: var(--x-p); }
body.ps .ps-visual { padding: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--x-p) 10%, var(--x-surface)), var(--x-surface)); }
body.ps .ps-escuro { background: transparent; color: var(--x-txt); }
body.ps .ps-escuro::before { background: radial-gradient(700px 360px at 80% 0, color-mix(in srgb, var(--x-p) 22%, transparent), transparent 70%); }
body.ps .ps-escuro h2, body.ps .ps-escuro h3 { color: var(--x-ink); }
body.ps .ps-escuro .lp-tit p { color: var(--x-txt); }
body.ps .ps-tec { padding: 26px; }
body.ps .ps-tec i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--x-grad); box-shadow: 0 10px 26px -10px var(--x-p); margin-bottom: 16px; }
body.ps .ps-tec h3 { color: var(--x-ink); }
body.ps .ps-tec p { color: var(--x-txt); }
body.ps .ps-num b { background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: -.05em; }
body.ps .lp-faq details { padding: 4px 22px; margin-bottom: 10px; box-shadow: none; }
body.ps .lp-faq summary { color: var(--x-ink); font-weight: 600; }
body.ps .lp-faq .r { color: var(--x-txt); }
body.ps .badge { border-radius: 999px; }
body.ps .form-control, body.ps .form-select { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 14px; color: var(--x-ink); }
body.ps .form-control:focus, body.ps .form-select:focus { border-color: color-mix(in srgb, var(--x-p) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--x-p) 18%, transparent); background: var(--x-solid); color: var(--x-ink); }
body.ps .form-label { color: var(--x-ink); }
/* capas das páginas internas (Recursos, Preços...) */
body.ps .ps-hero, body.ps .lp-hero { background: transparent; color: var(--x-ink); }
body.ps .ps-hero::before { opacity: var(--x-glow-op); }
body.ps .ps-hero::after { opacity: .7; background-image: linear-gradient(var(--x-grid) 1px, transparent 1px), linear-gradient(90deg, var(--x-grid) 1px, transparent 1px); }
body.ps .ps-hero h1, body.ps .lp-hero h1 { color: var(--x-ink); font-weight: 700; letter-spacing: -.05em; }
body.ps .ps-hero .lead, body.ps .lp-hero .lead { color: var(--x-txt); }
body.ps .ps-selo { background: var(--x-surface); border-color: var(--x-line); color: var(--x-ink); }
body.ps .ps-selo b { background: var(--x-grad); }
body.ps .ps-garantias span { color: var(--x-txt); }
body.ps .ps-faixa { background: transparent; border-color: var(--x-line); }
body.ps .ps-chips a { background: var(--x-surface); border: 1px solid var(--x-line); color: var(--x-ink); }
/* fechamento e rodapé */
body.ps .ps-final-box { background: var(--x-solid); border: 1px solid var(--x-line); position: relative; overflow: hidden; isolation: isolate; color: var(--x-txt); }
body.ps .ps-final-box::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--x-p) 60%, transparent), var(--x-s), transparent 90%); animation: x-gira 9s linear infinite; opacity: .55; }
body.ps .ps-final-box::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: var(--x-solid); }
body.ps .ps-final-box h2 { color: var(--x-ink); }
body.ps .ps-final-box .lp-b.light { background: var(--x-grad); color: #fff; }
body.ps .ps-rodape { background: transparent; border-top: 1px solid var(--x-line); color: var(--x-mut); }
body.ps .ps-rodape h4 { color: var(--x-ink); font-family: var(--x-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
body.ps .ps-rodape a { color: var(--x-txt); }
body.ps .ps-rodape a:hover { color: var(--x-ink); }
body.ps .ps-rodape-fim { border-color: var(--x-line); }
@keyframes x-gira { to { transform: rotate(1turn); } }

/* revelação ao rolar (sobe, desfoca e aparece) */
body.ps [data-revela], body.ps.ps-js .ps-revela { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--x-ease), transform .9s var(--x-ease), filter .9s var(--x-ease); }
body.ps [data-revela].visto, body.ps.ps-js .ps-revela.visto, html.ps-js body.ps .ps-revela.visto { opacity: 1; transform: none; filter: none; }
body.ps [data-revela="2"] { transition-delay: .08s; } body.ps [data-revela="3"] { transition-delay: .16s; } body.ps [data-revela="4"] { transition-delay: .24s; }

/* =====================================================================================================
   PÁGINA INICIAL (x-*)
   ===================================================================================================== */
.x-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(118px, 13vw, 168px) 0 0; margin-top: -76px; }
.x-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.x-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--x-glow-op); will-change: transform; }
.x-blob.a { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: color-mix(in srgb, var(--x-p) 70%, transparent); animation: x-flutua 18s ease-in-out infinite alternate; }
.x-blob.b { width: 38vw; height: 38vw; right: -8vw; top: -10vw; background: color-mix(in srgb, var(--x-s) 55%, transparent); animation: x-flutua 22s ease-in-out infinite alternate-reverse; }
.x-blob.c { width: 30vw; height: 30vw; left: 35vw; top: 18vw; background: color-mix(in srgb, #ec4899 35%, var(--x-p)); opacity: calc(var(--x-glow-op) * .45); animation: x-flutua 26s ease-in-out infinite alternate; }
@keyframes x-flutua { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(6vw, 4vw, 0) scale(1.15); } }
.x-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform: perspective(700px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(var(--x-grid) 1px, transparent 1px), linear-gradient(90deg, var(--x-grid) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%); mask-image: linear-gradient(to top, #000 10%, transparent 75%); animation: x-chao 14s linear infinite; }
@keyframes x-chao { to { background-position: 0 64px, 0 0; } }
.x-stars { position: absolute; inset: 0; opacity: calc(var(--x-glow-op) * .7);
  background-image: radial-gradient(1px 1px at 12% 18%, var(--x-ink), transparent), radial-gradient(1px 1px at 72% 12%, var(--x-ink), transparent), radial-gradient(1.5px 1.5px at 38% 36%, var(--x-ink), transparent),
    radial-gradient(1px 1px at 88% 44%, var(--x-ink), transparent), radial-gradient(1px 1px at 56% 8%, var(--x-ink), transparent), radial-gradient(1.5px 1.5px at 22% 52%, var(--x-ink), transparent), radial-gradient(1px 1px at 64% 58%, var(--x-ink), transparent);
  animation: x-pisca 5s ease-in-out infinite alternate; }
@keyframes x-pisca { from { opacity: calc(var(--x-glow-op) * .3); } to { opacity: calc(var(--x-glow-op) * .8); } }
.x-hero-in { text-align: center; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.x-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--x-ink);
  background: var(--x-surface); border: 1px solid var(--x-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: relative; overflow: hidden; text-decoration: none; }
.x-pill b { background: var(--x-grad); color: #fff; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.x-pill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--x-p) 25%, transparent) 50%, transparent 65%); animation: x-brilho 4.5s ease-in-out infinite; }
.x-display { font-size: clamp(38px, 6.4vw, 86px); line-height: .96; letter-spacing: -.06em; font-weight: 700; margin: 26px 0 22px; color: var(--x-ink); text-wrap: balance; }
.x-grad { background: var(--x-grad); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: x-mexe 7s ease-in-out infinite; }
.x-lead { font-size: clamp(16.5px, 2vw, 21px); line-height: 1.55; color: var(--x-txt); max-width: 720px; margin: 0 auto 34px; text-wrap: pretty; }
.x-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.x-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; color: var(--x-mut); font-size: 14px; }
.x-trust i { color: var(--x-p); margin-right: 4px; }

/* o sistema em 3D */
.x-stage { perspective: 1600px; margin: clamp(48px, 7vw, 84px) auto 0; max-width: 1120px; padding: 0 20px; position: relative; }
.x-stage::before { content: ''; position: absolute; left: 10%; right: 10%; top: 12%; bottom: -8%; z-index: -1; background: var(--x-grad); filter: blur(90px); opacity: calc(var(--x-glow-op) * .55); border-radius: 50%; }
.x-app { border-radius: 22px; border: 1px solid var(--x-line-2); background: color-mix(in srgb, var(--x-solid) 88%, transparent); box-shadow: var(--lp-sh-lg), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  overflow: hidden; transform: rotateX(14deg) scale(.97); transform-origin: top center; transition: transform .6s var(--x-ease); text-align: left; position: relative; }
.x-stage.visto .x-app, .x-app:hover { transform: rotateX(0) scale(1); }
.x-app-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--x-line); }
.x-app-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--x-line-2); }
.x-app-bar span:nth-child(1) { background: #ff5f57; } .x-app-bar span:nth-child(2) { background: #febc2e; } .x-app-bar span:nth-child(3) { background: #28c840; }
.x-app-bar .x-url { margin-left: 14px; flex: 1; max-width: 380px; height: 26px; border-radius: 8px; background: var(--x-bg-2); font: 500 12px var(--x-mono); color: var(--x-mut); display: flex; align-items: center; padding: 0 10px; gap: 6px; }
.x-app-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
.x-side { border-right: 1px solid var(--x-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.x-side a { font-size: 13px; color: var(--x-txt); padding: 7px 10px; border-radius: 10px; display: flex; gap: 8px; align-items: center; }
.x-side a.on { background: var(--x-grad); color: #fff; box-shadow: 0 8px 22px -10px var(--x-p); }
.x-main { padding: 18px; overflow: hidden; }
.x-main-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.x-main-top h4 { margin: 0; font-size: 16px; }
.x-chip { font: 600 11px var(--x-mono); padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--x-p) 14%, transparent); color: var(--x-p); }
.x-kanban { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.x-col { background: var(--x-bg-2); border: 1px solid var(--x-line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.x-col h5 { font-size: 12px; margin: 0 0 4px; color: var(--x-ink); display: flex; align-items: center; gap: 6px; }
.x-col h5 i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.x-card { background: var(--x-solid); border: 1px solid var(--x-line); border-radius: 11px; padding: 9px 10px; font-size: 12.5px; color: var(--x-ink); line-height: 1.3; }
.x-card small { display: flex; justify-content: space-between; align-items: center; font: 500 10.5px var(--x-mono); color: var(--x-mut); margin-bottom: 5px; }
.x-card .av { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.x-card.move { animation: x-anda 7s var(--x-ease) infinite; position: relative; z-index: 2; box-shadow: 0 16px 34px -14px var(--x-p); border-color: color-mix(in srgb, var(--x-p) 45%, var(--x-line)); }
@keyframes x-anda { 0%, 18% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(40%, -12px) rotate(3deg); } 45%, 68% { transform: translate(calc(100% + 12px), 0) rotate(0); } 80% { transform: translate(60%, -10px) rotate(-2deg); } 95%, 100% { transform: translate(0, 0); } }
.x-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--x-ink);
  background: color-mix(in srgb, var(--x-solid) 80%, transparent); border: 1px solid var(--x-line-2); box-shadow: var(--lp-sh-lg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: x-boia 6s ease-in-out infinite; white-space: nowrap; }
.x-float i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 15px; }
.x-float.a { left: -8px; top: 34%; } .x-float.a i { background: linear-gradient(135deg, #10b981, #34d399); }
.x-float.b { right: -6px; top: 14%; animation-delay: -2s; } .x-float.b i { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.x-float.c { right: 6%; bottom: -18px; animation-delay: -4s; } .x-float.c i { background: var(--x-grad); }
@keyframes x-boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.x-tempo { font-family: var(--x-mono); font-variant-numeric: tabular-nums; }

/* faixa que corre (segmentos) */
.x-marquee { position: relative; overflow: hidden; padding: 34px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.x-marquee p { text-align: center; color: var(--x-mut); font: 500 12px var(--x-mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.x-trilho { display: flex; gap: 12px; width: max-content; animation: x-corre 40s linear infinite; }
.x-marquee:hover .x-trilho { animation-play-state: paused; }
.x-trilho a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink); font-weight: 500; font-size: 14.5px; white-space: nowrap; transition: border-color .3s, color .3s; }
.x-trilho a:hover { border-color: color-mix(in srgb, var(--x-p) 50%, var(--x-line)); color: var(--x-p); }
@keyframes x-corre { to { transform: translateX(-50%); } }

/* vídeo */
.x-video { position: relative; border-radius: 26px; padding: 1px; background: linear-gradient(140deg, color-mix(in srgb, var(--x-p) 70%, transparent), var(--x-line), color-mix(in srgb, var(--x-s) 60%, transparent)); box-shadow: 0 40px 120px -40px var(--x-p); }
.x-video > div { border-radius: 25px; overflow: hidden; background: #05050c; aspect-ratio: 16 / 9; }
.x-video video { width: 100%; height: 100%; display: block; }

/* grade bento */
.x-cab { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); }
.x-cab h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.02; letter-spacing: -.05em; font-weight: 700; margin: 12px 0 14px; text-wrap: balance; }
.x-cab p { font-size: clamp(15.5px, 1.8vw, 19px); color: var(--x-txt); text-wrap: pretty; }
.x-bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
.x-tile { grid-column: span 2; position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; border: 1px solid var(--x-line); background: var(--x-surface); box-shadow: var(--x-sh);
  padding: 24px; display: flex; flex-direction: column; transition: transform .45s var(--x-ease), border-color .3s; }
.x-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--x-p) 32%, var(--x-line)); }
.x-tile.w3 { grid-column: span 3; } .x-tile.w4 { grid-column: span 4; } .x-tile.h2 { grid-row: span 2; }
.x-tile h3 { font-size: 21px; letter-spacing: -.03em; margin: 0 0 6px; }
.x-tile p { font-size: 14.5px; line-height: 1.55; color: var(--x-txt); margin: 0; }
.x-tile .x-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--x-grad); box-shadow: 0 10px 24px -10px var(--x-p); margin-bottom: 16px; font-size: 18px; }
.x-viz { margin-top: auto; padding-top: 20px; }
@media (max-width: 991.98px) { .x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-tile, .x-tile.w3, .x-tile.w4 { grid-column: span 2; } .x-tile.h2 { grid-row: span 1; } }
@media (min-width: 640px) and (max-width: 991.98px) { .x-tile { grid-column: span 1; } }
/* mini burndown */
.x-burn { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.x-burn span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, color-mix(in srgb, var(--x-p) 30%, transparent), var(--x-p)); transform-origin: bottom; animation: x-sobe 1.2s var(--x-ease) both; box-shadow: 0 0 18px -6px var(--x-p); }
@keyframes x-sobe { from { transform: scaleY(0); } }
/* mini gantt */
.x-gantt { display: grid; gap: 8px; }
.x-gantt div { height: 12px; border-radius: 6px; background: var(--x-grad); opacity: .9; box-shadow: 0 0 16px -6px var(--x-p); }
.x-gantt div:nth-child(2) { margin-left: 18%; width: 52%; opacity: .7; } .x-gantt div:nth-child(1) { width: 34%; }
.x-gantt div:nth-child(3) { margin-left: 44%; width: 40%; opacity: .55; } .x-gantt div:nth-child(4) { margin-left: 70%; width: 26%; opacity: .4; }
/* aprovações do portal */
.x-aprov { display: grid; gap: 10px; }
.x-aprov div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 14px; background: var(--x-bg-2); border: 1px solid var(--x-line); font-size: 13.5px; color: var(--x-ink); font-weight: 500; }
.x-aprov em { font-style: normal; font: 600 11px var(--x-mono); padding: 3px 9px; border-radius: 999px; }
.x-aprov .ok { color: #10b981; background: rgba(16, 185, 129, .12); } .x-aprov .aj { color: #f59e0b; background: rgba(245, 158, 11, .12); } .x-aprov .and { color: var(--x-p); background: color-mix(in srgb, var(--x-p) 14%, transparent); }
/* anel de margem */
.x-anel { --v: 68; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: conic-gradient(var(--x-p) calc(var(--v) * 1%), color-mix(in srgb, var(--x-p) 12%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--x-p) 60%, transparent)); }
.x-anel-num { text-align: center; margin-top: -78px; margin-bottom: 40px; font: 700 26px var(--x-font); color: var(--x-ink); letter-spacing: -.04em; }
/* terminal do git */
.x-term { font: 500 12.5px/1.7 var(--x-mono); background: #05050c; color: #c9cbe0; border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .08); }
.x-term b { color: #34d399; font-weight: 500; } .x-term i { color: #a78bfa; font-style: normal; } .x-term u { color: #fbbf24; text-decoration: none; }
.x-cursor { display: inline-block; width: 7px; height: 14px; background: #c9cbe0; vertical-align: -2px; animation: x-pisca-c 1s steps(1) infinite; }
@keyframes x-pisca-c { 50% { opacity: 0; } }
/* barra de comando */
.x-cmd { border-radius: 14px; border: 1px solid var(--x-line-2); background: var(--x-solid); box-shadow: 0 20px 50px -24px var(--x-p); overflow: hidden; font-size: 13px; }
.x-cmd .q { padding: 11px 14px; border-bottom: 1px solid var(--x-line); color: var(--x-ink); display: flex; gap: 8px; align-items: center; }
.x-cmd .q kbd { margin-left: auto; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--x-bg-2); color: var(--x-mut); border: 1px solid var(--x-line); }
.x-cmd .r { padding: 9px 14px; color: var(--x-txt); display: flex; gap: 8px; align-items: center; } .x-cmd .r.on { background: color-mix(in srgb, var(--x-p) 12%, transparent); color: var(--x-ink); }
/* fluxo proposta -> projeto -> financeiro */
.x-fluxo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.x-fluxo span { padding: 10px 14px; border-radius: 14px; background: var(--x-bg-2); border: 1px solid var(--x-line); font-weight: 600; font-size: 13.5px; color: var(--x-ink); display: inline-flex; gap: 8px; align-items: center; }
.x-fluxo span i { color: var(--x-p); }
.x-fluxo .seta { flex: 1; min-width: 24px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: linear-gradient(90deg, var(--x-p), var(--x-s)); position: relative; overflow: hidden; }
.x-fluxo .seta::after { content: ''; position: absolute; top: -3px; width: 30%; height: 8px; border-radius: 8px; background: #fff; filter: blur(3px); animation: x-pulso 2.2s linear infinite; }
@keyframes x-pulso { from { left: -30%; } to { left: 100%; } }

/* números */
.x-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--x-line); border-radius: 26px; background: var(--x-surface); overflow: hidden; }
.x-stats > div { padding: clamp(22px, 3vw, 36px); border-right: 1px solid var(--x-line); }
.x-stats > div:last-child { border-right: 0; }
.x-stats b { display: block; font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -.06em; line-height: 1; background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.x-stats span { display: block; margin-top: 10px; color: var(--x-txt); font-size: 14.5px; }
@media (max-width: 767.98px) { .x-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x-stats > div:nth-child(2) { border-right: 0; } .x-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--x-line); } }

/* passos com trilho de luz */
.x-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; counter-reset: passo; }
.x-passos::before { content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 1px; background: linear-gradient(90deg, transparent, var(--x-p), var(--x-s), transparent); box-shadow: 0 0 14px var(--x-p); }
.x-passo { position: relative; padding: 0 6px; text-align: center; }
.x-passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); width: 54px; height: 54px; border-radius: 18px; margin: 0 auto 18px; display: grid; place-items: center; font: 600 15px var(--x-mono);
  color: #fff; background: var(--x-grad); box-shadow: 0 0 0 6px var(--x-bg), 0 14px 34px -12px var(--x-p); position: relative; }
.x-passo h3 { font-size: 19px; margin-bottom: 6px; }
.x-passo p { color: var(--x-txt); font-size: 14.5px; margin: 0; }
@media (max-width: 767.98px) { .x-passos { grid-template-columns: 1fr; gap: 26px; } .x-passos::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } }

/* celular: o sistema 3D vira só o quadro */
@media (max-width: 767.98px) {
  .x-app-body { grid-template-columns: 1fr; min-height: 0; }
  .x-side { display: none; }
  .x-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-kanban .x-col:nth-child(n+3) { display: none; }
  .x-col { min-height: 230px; }
  .x-float { font-size: 12px; padding: 8px 11px; } .x-float i { width: 26px; height: 26px; }
  .x-float.a { left: 6px; top: auto; bottom: 22%; } .x-float.b { right: 6px; top: -14px; } .x-float.c { display: none; }
  .x-card.move { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .x-blob, .x-floor, .x-stars, .x-trilho, .x-card.move, .x-float, .x-grad, .x-pill::after, body.ps .lp-b.pri::after, body.ps .ps-final-box::before, .x-fluxo .seta::after, body.ps .ps-logo { animation: none !important; }
  body.ps [data-revela], body.ps .ps-revela { opacity: 1 !important; transform: none !important; filter: none !important; }
  .x-app { transform: none; }
}

/* topo: nada quebra linha */
body.ps .ps-marca, body.ps .ps-marca .marca, body.ps .ps-links a { white-space: nowrap; }
body.ps .ps-links { gap: 2px; margin-left: 18px; }
@media (min-width: 1100px) and (max-width: 1279.98px) { body.ps .ps-links a { padding: 8px 9px; font-size: 13.5px; } }
@media (max-width: 575.98px) {
  body.ps .x-pill { font-size: 12.5px; max-width: calc(100% - 24px); } body.ps .x-pill > i { display: none; }
  body.ps .x-pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .x-display { letter-spacing: -.055em; }
  body.ps .lp-nav.ps-nav > .lp-wrap { padding: 0 8px 0 12px; }
}

/* o dark.css antigo (escrito para as páginas públicas) não pode ganhar do Aurora no site */
[data-bs-theme=dark] body.ps.lp {
  --lp-ink: var(--x-ink); --lp-txt: var(--x-txt); --lp-mut: var(--x-mut); --lp-line: var(--x-line); --lp-bg: var(--x-bg-2);
  --lp-soft: color-mix(in srgb, var(--x-p) 14%, transparent);
  background: var(--x-bg); color: var(--x-txt);
}
[data-bs-theme=dark] body.ps .lp-card, [data-bs-theme=dark] body.ps .lp-faq details, [data-bs-theme=dark] body.ps .lp-b.line { background-color: var(--x-surface); color: var(--x-ink); }
[data-bs-theme=dark] body.ps .lp-card { color: var(--x-txt); }
[data-bs-theme=dark] body.ps .lp-nav { background: transparent; }
[data-bs-theme=dark] body.ps .lp-sec.cinza { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--x-p) 5%, transparent) 50%, transparent); }
/* capas das páginas internas (Recursos, Preços, Segurança...) nos dois modos */
body.ps .ps-pag { background: transparent; color: var(--x-txt); padding-top: clamp(92px, 11vw, 140px); margin-top: -76px; }
body.ps .ps-pag::before { opacity: var(--x-glow-op); }
body.ps .ps-pag::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--x-grid) 1px, transparent 1px), linear-gradient(90deg, var(--x-grid) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 30% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 0%, #000 20%, transparent 70%); }
body.ps .ps-pag h1 { color: var(--x-ink); font-weight: 700; letter-spacing: -.05em; font-size: clamp(34px, 5.4vw, 64px); }
body.ps .ps-pag p, body.ps .ps-pag .lead { color: var(--x-txt); }
/* rodapé: o ícone da marca não herda o "span em bloco" dos textos */
body.ps .ps-rodape .ps-logo { display: grid; margin: 0; }
body.ps .ps-rodape .ps-marca span.marca { display: inline; margin: 0; color: var(--x-ink); }
/* fechamento: o feixe aparece mais */
body.ps .ps-final-box::after { inset: 2px; }
body.ps .ps-final-box::before { opacity: .9; }
body.ps .lp-ico { background: var(--x-grad); color: #fff; box-shadow: 0 10px 24px -10px var(--x-p); }
body.ps .lp-ico .bi { color: #fff; }
body.ps .ps-pag::before, body.ps .ps-hero::before { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.x-hero { padding-bottom: 64px; }