/*
Theme Name:  Fusion Lab
Theme URI:   https://fusionlab.com.br
Author:      Fusion Lab – Marketing Digital
Author URI:  https://fusionlab.com.br
Description: Tema oficial da Fusion Lab – Marketing Digital. Design moderno com partículas animadas, totalmente compatível com Elementor. Paleta amarelo, preto e laranja.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fusionlab
Tags:        marketing, one-page, full-width-template, custom-colors, custom-logo, elementor, dark
*/

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:   #fdcb03;
  --dark:    #0d0d0d;
  --orange:  #ff8c00;
  --gray:    #6b6b6b;
  --white:   #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 2px; }

/* === GRADIENT TEXT === */
.gradient-text {
  background: linear-gradient(90deg, #fdcb03 0%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === BUTTON GLOW === */
.btn-glow {
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(253,203,3,.55);
}
.btn-glow::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.btn-glow:hover::after { transform: translateX(100%); }

/* === NAVBAR === */
#fl-navbar { transition: background .35s, box-shadow .35s; }
#fl-navbar.scrolled {
  background: rgba(13,13,13,.97) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4);
}
#fl-mobile-menu { display: none; }
#fl-mobile-menu.open { display: flex; }

/* === HERO === */
#fl-particles { position: absolute; inset: 0; z-index: 0; }
.fl-grid-lines {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(253,203,3,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253,203,3,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.fl-noise {
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
.fl-scroll-dot { animation: flScrollDown 1.8s ease-in-out infinite; }
@keyframes flScrollDown {
  0%,100% { opacity:1; transform: translateY(0); }
  50%      { opacity:.3; transform: translateY(8px); }
}

/* === MARQUEE === */
.fl-marquee-track {
  display: flex; gap: 60px;
  animation: flMarquee 22s linear infinite;
  white-space: nowrap;
}
@keyframes flMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === SERVICE CARDS === */
.fl-svc-card {
  background: #141414;
  border: 1px solid #222;
  border-radius: .75rem;
  padding: 2rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.fl-svc-card:hover {
  border-color: var(--brand);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(253,203,3,.15);
}
.fl-svc-icon {
  width: 48px; height: 48px;
  border: 1px solid #333; border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1.5rem;
  color: var(--brand);
  transition: background .3s, color .3s;
}
.fl-svc-card:hover .fl-svc-icon { background: var(--brand); color: var(--dark); }

/* === STAT CARDS === */
.fl-stat-card {
  border: 1px solid #222; border-radius: .75rem;
  padding: 2rem; text-align: center;
  background: #0d0d0d;
  transition: border-color .3s, box-shadow .3s;
}
.fl-stat-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 28px rgba(253,203,3,.12);
}

/* === TESTIMONIALS === */
.fl-testimonial {
  background: #111; border: 1px solid #222; border-radius: .75rem;
  padding: 2rem;
  transition: border-color .3s;
}
.fl-testimonial:hover { border-color: var(--brand); }

/* === FORM === */
.fl-input {
  width: 100%; background: #111;
  border: 1px solid #333; color: #fff;
  border-radius: .5rem; padding: .75rem 1rem; font-size: .875rem;
  outline: none; transition: border-color .2s;
  font-family: 'Inter', sans-serif;
}
.fl-input:focus { border-color: var(--brand); }
.fl-input::placeholder { color: #444; }

/* === ANIMATIONS === */
@keyframes flFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.fl-fade-up  { animation: flFadeUp  .7s ease both; }
.fl-fade-in  { animation: flFadeIn  .6s ease both; }
.fl-delay-1  { animation-delay: .1s; }
.fl-delay-2  { animation-delay: .25s; }
.fl-delay-3  { animation-delay: .4s; }

/* === LOGO GLITCH === */
.fl-logo:hover { animation: flGlitch .4s steps(2) both; }
@keyframes flGlitch {
  0%   { clip-path: inset(0 0 90% 0); transform: translateX(-4px); }
  25%  { clip-path: inset(40% 0 40% 0); transform: translateX(4px); }
  50%  { clip-path: inset(80% 0 0 0); transform: translateX(-4px); }
  100% { clip-path: none; transform: none; }
}

/* === PROCESS CONNECTOR === */
.fl-process-line {
  display: none;
}
@media (min-width: 768px) {
  .fl-process-line {
    display: block;
    position: absolute;
    top: 28px; left: 12.5%; right: 12.5%;
    height: 1px;
    background: linear-gradient(90deg, rgba(253,203,3,.3), rgba(255,140,0,.5), rgba(253,203,3,.3));
  }
}