/* ===========================================================
   Frame Link — CSS adicional (formulário + páginas legais)

   Escrito à mão de propósito: o CSS principal é build do Tailwind
   com purge, então classe utilitária nova NÃO existe no bundle.
   Aqui só usamos as custom properties que já vêm do bundle:
     --bg-deep --bg-card --primary-neon --secondary-cyan
     --text-main --text-muted --cyber-gradient
     --font-display (Orbitron) --font-body (Inter)
   =========================================================== */

/* ===========================================================
   FUNDO — gradiente roxo/azul + estrelas
   ===========================================================
   O bundle do Astro põe um grid quadriculado em body::before
   (linhas de 60px em rgba(46,46,255,.06)). Aqui ele é substituído.

   Mapa das camadas (todas fixed, pointer-events none):
     body::before   z-index -2   gradiente diagonal roxo -> azul
     body::after    z-index -1   vinheta radial (vem do bundle, mantida)
     html::before   z-index -3   estrelas, duas densidades, deriva lenta
     html::after    z-index -3   estrelas grandes que piscam

   O gradiente usa o mesmo par de cores do .text-gradient
   (--cyber-gradient: 135deg, #BC13FE -> #2E2EFF), com alpha baixo
   para não comer o contraste do texto sobre o #050505.
   =========================================================== */

body::before {
  background-image:
    /* brilho roxo no canto superior esquerdo */
    radial-gradient(1100px 780px at 12% 8%, rgba(188, 19, 254, .17), transparent 62%),
    /* brilho azul no canto inferior direito */
    radial-gradient(1000px 720px at 88% 92%, rgba(46, 46, 255, .19), transparent 60%),
    /* a diagonal, igual à do logo */
    linear-gradient(135deg, rgba(188, 19, 254, .13) 0%, rgba(96, 34, 236, .07) 48%, rgba(46, 46, 255, .15) 100%) !important;
  background-size: auto !important;   /* zera o 60px 60px do grid */
  background-repeat: no-repeat !important;
}

/* ---------- estrelas ---------- */
/* Cada radial-gradient é uma estrela. São dois tiles de tamanhos
   diferentes, então o padrão não fica visivelmente repetido. */

html::before,
html::after {
  content: "";
  position: fixed;
  inset: -10% -10% -10% -10%;   /* folga para a deriva não mostrar borda */
  z-index: -3;
  pointer-events: none;
}

html::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,  rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.1px 1.1px at 27% 62%,  rgba(214,222,255,.70), transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 31%,  rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1.0px 1.0px at 56% 78%,  rgba(228,205,255,.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 12%,  rgba(255,255,255,.80), transparent 100%),
    radial-gradient(1.1px 1.1px at 79% 55%,  rgba(205,214,255,.60), transparent 100%),
    radial-gradient(1.3px 1.3px at 91% 84%,  rgba(255,255,255,.70), transparent 100%),
    radial-gradient(1.0px 1.0px at 8%  88%,  rgba(232,210,255,.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 95%,  rgba(255,255,255,.60), transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 44%,  rgba(210,218,255,.65), transparent 100%),
    radial-gradient(1.0px 1.0px at 86% 27%,  rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 19% 41%,  rgba(224,208,255,.60), transparent 100%);
  background-size: 620px 620px;
  animation: fl-drift 190s linear infinite;
}

html::after {
  background-image:
    radial-gradient(2.1px 2.1px at 22% 34%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.8px 1.8px at 58% 17%, rgba(226,206,255,.85), transparent 100%),
    radial-gradient(2.3px 2.3px at 74% 71%, rgba(255,255,255,.90), transparent 100%),
    radial-gradient(1.9px 1.9px at 37% 82%, rgba(200,212,255,.80), transparent 100%),
    radial-gradient(2.0px 2.0px at 90% 42%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.7px 1.7px at 6%  60%, rgba(232,212,255,.75), transparent 100%);
  background-size: 900px 900px;
  animation: fl-drift 300s linear infinite reverse, fl-twinkle 5.5s ease-in-out infinite;
}

/* deriva: translate em vez de background-position, para rodar na GPU */
@keyframes fl-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-620px, -310px, 0); }
}

@keyframes fl-twinkle {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* Respeita quem pediu menos movimento: estrelas ficam, param de andar. */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none !important; }
}

/* Em tela pequena as estrelas grandes atrapalham mais do que ajudam,
   e piscar consome bateria. Fica só a camada fina, parada. */
@media (max-width: 620px) {
  html::after { display: none; }
  html::before { animation-duration: 300s; }
}

/* ===========================================================
   MARQUEE DO STACK TECNOLÓGICO
   ===========================================================
   Dois problemas corrigidos aqui.

   1) O "pulo" a cada volta.
      A trilha tem 30 itens (15 duplicados) e animava para -50%.
      Com gap no container, 30 itens têm 29 gaps. Então:
        largura W        = soma(30 itens) + 29*gap
        translate(-50%)  = soma(15 itens) + 14,5*gap
        o correto seria  = soma(15 itens) + 15*gap
      Faltava meio gap (16px) por ciclo — daí o salto mecânico.
      Solução: zerar o gap do container e pôr o espaçamento como
      margin-right em cada item. Assim cada item carrega o próprio
      espaço, e -50% passa a ser exatamente um conjunto. Sem emenda.

   2) As manchas pretas fixas.
      Eram dois divs com gradiente saindo de #050505. Funcionavam
      quando o fundo era preto chapado; com o gradiente roxo/azul
      viraram dois retângulos escuros. Foram removidos do HTML e
      trocados por mask-image, que desvanece para transparente
      independente do que estiver atrás.
   =========================================================== */

.animate-marquee { gap: 0 !important; }
.animate-marquee > * { margin-right: 2rem; }

.fl-marquee-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* a animação é decorativa: sem ela a lista continua legível */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none !important; }
  .fl-marquee-wrap { overflow-x: auto; }
}


/* ===========================================================
   RÓTULOS DE SEÇÃO (eyebrow)
   ===========================================================
   Eram text-xs (0.75rem) — pequenos demais para o peso que têm
   na página: "Stack Tecnológico", "Depoimentos", "O que fazemos",
   "Processo", "Pronto para começar?".

   O tracking cai de .3em para .2em: espaçamento que funciona em
   texto miúdo fica arejado demais quando a fonte cresce.
   =========================================================== */

.fl-eyebrow {
  font-size: clamp(1rem, 2.4vw, 1.3rem) !important;
  letter-spacing: .2em !important;
  line-height: 1.35;
}


/* ===========================================================
   PASSOS DO "COMO TRABALHAMOS"
   ===========================================================
   Antes: círculo de 96px com ícone + badge do número por fora.
   Agora: número grande no gradiente da marca, título e texto —
   alinhados à esquerda, que é como se lê uma sequência numerada.
   =========================================================== */

.fl-step { text-align: left; }

.fl-step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: .95;
  margin-bottom: .7rem;
  background: var(--cyber-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.fl-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-main);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: .65rem;
}

.fl-step-desc {
  color: var(--text-muted);
  font-size: 1.03rem;
  line-height: 1.72;
}

/* filete sob o número, dá estrutura sem voltar ao círculo */
.fl-step-num::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: .5rem;
  background: var(--cyber-gradient);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .fl-step { text-align: left; }
  .fl-step-num { font-size: 2.4rem; }
}


/* ---------- FORMULÁRIO ---------- */

.fl-form{
  display:grid;gap:20px;
  background:rgba(15,15,25,.72);
  border:1px solid rgba(188,19,254,.16);
  border-radius:16px;
  padding:34px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  text-align:left;
  position:relative;
  overflow:hidden;
}
/* filete de gradiente no topo do card */
.fl-form::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--cyber-gradient);opacity:.55;
}

.fl-row{display:grid;gap:20px}
@media(min-width:640px){ .fl-row-2{grid-template-columns:1fr 1fr} }

.fl-field{display:flex;flex-direction:column;gap:8px;position:relative}

.fl-field label{
  font-family:var(--font-display);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);
}
.fl-field label .req{color:var(--primary-neon);margin-left:3px}

.fl-field input,
.fl-field select,
.fl-field textarea{
  width:100%;
  font-family:var(--font-body);font-size:15px;
  color:var(--text-main);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:13px 15px;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
  appearance:none;-webkit-appearance:none;
}
.fl-field textarea{resize:vertical;min-height:120px;line-height:1.6}

.fl-field input::placeholder,
.fl-field textarea::placeholder{color:rgba(184,184,192,.42)}

.fl-field input:hover,
.fl-field select:hover,
.fl-field textarea:hover{border-color:rgba(255,255,255,.18)}

.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus{
  outline:none;
  border-color:var(--primary-neon);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(188,19,254,.14),0 0 18px -4px rgba(188,19,254,.4);
}

/* seta customizada do select (appearance:none tira a nativa) */
.fl-field select{
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8c0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px;
}
/* o menu aberto é renderizado pelo SO: precisa de fundo escuro explícito */
.fl-field select option{background:#0F0F19;color:var(--text-main)}

/* estado de erro */
.fl-field[data-invalid="true"] input,
.fl-field[data-invalid="true"] select,
.fl-field[data-invalid="true"] textarea{
  border-color:#FF4D6D;box-shadow:0 0 0 3px rgba(255,77,109,.12);
}
.fl-error{
  font-size:12.5px;color:#FF7A90;display:none;align-items:center;gap:6px;
  font-family:var(--font-body);
}
.fl-field[data-invalid="true"] .fl-error{display:flex}

/* consentimento LGPD */
.fl-consent{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13px;line-height:1.55;color:var(--text-muted);
  cursor:pointer;
}
.fl-consent input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex-shrink:0;margin-top:1px;
  border:1px solid rgba(255,255,255,.22);border-radius:5px;
  background:rgba(255,255,255,.035);cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
  position:relative;
}
.fl-consent input:checked{background:var(--cyber-gradient);border-color:transparent}
.fl-consent input:checked::after{
  content:"";position:absolute;left:5px;top:1.5px;
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.fl-consent input:focus-visible{outline:2px solid var(--primary-neon);outline-offset:2px}
.fl-consent a{color:var(--primary-neon);text-decoration:underline;text-underline-offset:2px}
.fl-consent[data-invalid="true"]{color:#FF7A90}
.fl-consent[data-invalid="true"] input{border-color:#FF4D6D}

/* botão de envio */
.fl-submit{
  font-family:var(--font-display);
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--cyber-gradient);
  border:0;border-radius:999px;padding:16px 30px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 14px 32px -14px rgba(188,19,254,.65);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,filter .22s ease;
  position:relative;overflow:hidden;
}
.fl-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 42px -14px rgba(188,19,254,.8);filter:brightness(1.08)}
.fl-submit:active:not(:disabled){transform:translateY(0)}
.fl-submit:disabled{opacity:.6;cursor:not-allowed}
.fl-submit svg{width:16px;height:16px;flex-shrink:0}

/* spinner do estado "enviando" */
.fl-submit .fl-spin{display:none;width:15px;height:15px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:fl-rot .7s linear infinite}
.fl-form[data-state="sending"] .fl-spin{display:block}
.fl-form[data-state="sending"] .fl-submit-ico{display:none}
@keyframes fl-rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .fl-submit .fl-spin{animation-duration:1.6s}
  .fl-submit:hover:not(:disabled){transform:none}
}

/* nota de rodapé do form */
.fl-note{
  font-size:12.5px;color:var(--text-muted);opacity:.8;
  display:flex;align-items:center;gap:7px;line-height:1.5;
}
.fl-note svg{width:14px;height:14px;flex-shrink:0;opacity:.7}

/* mensagem de retorno */
.fl-result{
  display:none;gap:13px;align-items:flex-start;
  border-radius:12px;padding:18px 20px;font-size:14.5px;line-height:1.6;
}
.fl-result svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.fl-form[data-state="done"] .fl-result-ok{display:flex}
.fl-form[data-state="error"] .fl-result-err{display:flex}
.fl-result-ok{
  background:rgba(46,46,255,.1);border:1px solid rgba(46,46,255,.35);color:#D8D8FF;
}
.fl-result-ok svg{stroke:var(--secondary-cyan)}
.fl-result-err{
  background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.32);color:#FFC2CD;
}
.fl-result-err svg{stroke:#FF7A90}
/* ao concluir, esconde os campos e deixa só o resultado */
.fl-form[data-state="done"] .fl-hide-on-done{display:none}

/* separador "ou" entre form e whatsapp */
.fl-or{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-muted);opacity:.6;
  margin:26px 0;
}
.fl-or::before,.fl-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}


/* ---------- PÁGINAS LEGAIS ---------- */

.legal{max-width:820px;margin:0 auto;padding:56px 0 24px}
.legal .legal-kicker{
  font-family:var(--font-display);font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--primary-neon);
}
.legal h1{
  font-family:var(--font-display);font-weight:900;color:var(--text-main);
  font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.1;margin:14px 0 0;
}
.legal .legal-date{
  font-family:var(--font-body);font-size:13.5px;color:var(--text-muted);
  margin-top:14px;padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.legal h2{
  font-family:var(--font-display);font-weight:700;color:var(--text-main);
  font-size:1.12rem;letter-spacing:.02em;
  margin:44px 0 14px;display:flex;gap:12px;align-items:baseline;
}
.legal h2 .num{
  font-size:.78rem;color:var(--primary-neon);flex-shrink:0;
  font-weight:600;letter-spacing:.1em;
}
.legal h3{
  font-family:var(--font-body);font-weight:600;color:var(--text-main);
  font-size:1rem;margin:26px 0 10px;
}
.legal p,.legal li{
  font-family:var(--font-body);font-size:15.5px;line-height:1.78;color:var(--text-muted);
}
.legal p{margin-bottom:15px}
.legal strong{color:var(--text-main);font-weight:600}
.legal a{color:var(--primary-neon);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--secondary-cyan)}
.legal ul,.legal ol{margin:0 0 18px;padding-left:0;list-style:none}
.legal ul li{position:relative;padding-left:22px;margin-bottom:10px}
.legal ul li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--primary-neon);opacity:.75;
}
.legal ol{counter-reset:l}
.legal ol li{position:relative;padding-left:28px;margin-bottom:10px;counter-increment:l}
.legal ol li::before{
  content:counter(l) ".";position:absolute;left:0;top:0;
  font-family:var(--font-display);font-size:.78rem;color:var(--primary-neon);
}

/* caixa de destaque */
.legal .legal-box{
  background:rgba(188,19,254,.055);
  border:1px solid rgba(188,19,254,.2);
  border-left:2px solid var(--primary-neon);
  border-radius:12px;padding:22px 24px;margin:26px 0;
}
.legal .legal-box p:last-child{margin-bottom:0}

/* tabela de dados */
.legal-table{width:100%;border-collapse:collapse;margin:20px 0 26px;font-family:var(--font-body)}
.legal-table th,.legal-table td{
  text-align:left;padding:13px 16px;font-size:14.5px;
  border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top;
}
.legal-table th{
  font-family:var(--font-display);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
  background:rgba(255,255,255,.025);
}
.legal-table td{color:var(--text-muted)}
.legal-table td:first-child{color:var(--text-main);font-weight:500;white-space:nowrap}
.legal-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:620px){
  .legal{padding:36px 0 16px}
  .legal h2{margin:34px 0 12px}
  .fl-form{padding:24px 20px}
}