/* =========================
   0) TOKENS / RESET
========================= */
:root{
  --bg-1:#dbdedf;
  --bg-2:#c6cdd3;

  --primary:#2b4fee;
  --primary-2:#2c6dfa;

  --text:#0f172a;
  --muted:#475569;

  --card: rgba(255,255,255,.32);
  --card-2: rgba(255,255,255,.44);
  --stroke: rgba(0,0,0,.08);
  --stroke-2: rgba(0,0,0,.12);

  --shadow: 0 14px 34px rgba(0,0,0,.10);
  --shadow-2: 0 22px 54px rgba(0,0,0,.14);

  --radius: 16px;
  --radius-xl: 22px;

  --container: 1120px;

  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  --header-h: 84px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  font-family:"Exo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(to bottom, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

/* Acessibilidade: foco bonito */
:focus-visible{
  outline: 3px solid rgba(43,79,254,.35);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================
   1) BACKGROUND / LAYOUT
========================= */
#particles-js{
  position:fixed;
  inset:0;
  z-index:-1;
}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

/* =========================
   2) HEADER (mais clean + profissional)
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;

  height: var(--header-h);
  padding: 10px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  backdrop-filter: blur(14px);
  background: color-mix(in srgb, rgba(219,222,223,.78) 70%, rgba(255,255,255,.10));
  border-bottom: 1px solid rgba(0,0,0,.07);
}

.brand{
  display:flex;
  align-items:center;
}
.brand img{
  height:64px;
  width:auto;
  max-width:120px;
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}
.brand:hover img{
  transform: translateY(-1px) scale(1.03) rotate(1deg);
}

/* =========================
   3) NAV (hover melhor + underline animado)
========================= */
.nav{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}

.nav__toggle{
  display:none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.35);
  border-radius: 14px;
  padding:10px 12px;
  cursor:pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.50); }

.nav__list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding: 10px 14px;
}

/* Link com underline animado */
.nav__link{
  position:relative;
  text-decoration:none;
  color: #0b1220;
  font-weight:700;
  font-style: italic;
  opacity:.90;
  padding: 10px 8px;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  height:2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform var(--t) var(--ease);
  opacity:.9;
}
.nav__link:hover{
  opacity:1;
  transform: translateY(-1px);
}
.nav__link:hover::after{
  transform: scaleX(1);
}

/* =========================
   4) HEADER ACTIONS / BOTÕES (polido)
========================= */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.auth{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-family: inherit;
  font-weight:800;
  text-decoration:none;

  border:1px solid transparent;
  border-radius: 14px;
  padding:10px 14px;
  cursor:pointer;

  transform: translateZ(0);
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              filter var(--t) var(--ease);
  user-select:none;
}

/* estados padrão */
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn--primary{
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  color:#fff;
  box-shadow: 0 14px 30px rgba(43,79,254,.22);
}
.btn--primary:hover{
  box-shadow: 0 20px 44px rgba(43,79,254,.30);
  filter: brightness(1.03);
}

.btn--secondary,
.btn--ghost{
  background: rgba(255,255,255,.28);
  border-color: rgba(0,0,0,.10);
  color:#0b1220;
}
.btn--secondary:hover,
.btn--ghost:hover{
  background: rgba(255,255,255,.40);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.btn--cta{
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  color:#fff;
  padding:14px 18px;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(43,79,254,.22);
}
.btn--cta:hover{
  box-shadow: 0 22px 50px rgba(43,79,254,.32);
}

/* botão "pill" */
.btn--small{
  padding:10px 16px;
  border-radius: 999px;
}

/* Typing */
.btn--typing{ min-width: 150px; }
.cursor{
  display:inline-block;
  margin-left:2px;
  animation: blink .8s infinite;
  color:#fff;
}
@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

/* =========================
   5) HERO (melhor espaçamento + imagem com leve float)
========================= */
.hero{
  padding: 34px 0 14px;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
  padding: 22px 0;
}

.hero__left h1{
  margin:0 0 12px 0;
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 900;
  line-height: 1.05;

  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(14,29,170,.95) 0%, rgba(14,133,192,.55) 60%, rgba(7,136,241,.9) 110%),
    linear-gradient(135deg, #faf9f9 0%, #509BF5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__subtitle{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 58ch;
}

.hero__right img{
  width:100%;
  max-width: 520px;
  height:auto;
  margin-inline:auto;
  filter: drop-shadow(0 24px 45px rgba(0,0,0,.16));
  animation: float 5.5s var(--ease) infinite;
}

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* CTA arrow animada */
.arrow{
  display:inline-block;
  transform: translateY(0);
  animation: bounce 1.2s var(--ease) infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}

/* =========================
   6) TRUST LOGOS (acabamento + hover suave)
========================= */
.trust{
  padding: 10px 0 30px;
}

.trust__title{
  text-align:center;
  margin: 16px 0 16px;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 900;
  color: rgb(29, 51, 243);
}

/* ===== LOGO CAROUSEL (SEM BUG / SEM PULO) ===== */
.logo-bar{
  overflow:hidden;
  padding: 14px 0 28px;
  position: relative;
}

/* fade nas bordas */
.logo-bar::before,
.logo-bar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 90px;
  pointer-events:none;
  z-index:2;
}
.logo-bar::before{
  left:0;
  background: linear-gradient(to right, rgba(219,222,223,1), rgba(219,222,223,0));
}
.logo-bar::after{
  right:0;
  background: linear-gradient(to left, rgba(219,222,223,1), rgba(219,222,223,0));
}

/* O TRACK PRECISA SER DEFINIDO */
.logo-track{
  display:flex;
  align-items:center;
  gap: 28px;              /* controla espaço entre logos */
  width: max-content;
  padding-inline: 24px;

  /* performance */
  will-change: transform;
  transform: translate3d(0,0,0);

  /* animação */
  animation: logo-scroll 22s linear infinite;
}

/* pausa no hover (fica premium) */
.logo-bar:hover .logo-track{
  animation-play-state: paused;
}

/* Logos responsivas */
.logo-track img{
  width: clamp(90px, 18vw, 140px);
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;          /* evita “amassar” logo */
  margin: 0;

  filter: grayscale(40%);
  opacity: .92;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.logo-track img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

/*
  IMPORTANTÍSSIMO:
  -50% funciona só se o conteúdo estiver duplicado (você já duplicou no HTML)
  e o track realmente representar 2 sequências iguais.
*/
@keyframes logo-scroll{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* Mobile: ajusta espaçamento e velocidade */
@media (max-width: 720px){
  .logo-track{
    gap: 16px;
    animation-duration: 16s;
  }
  .logo-bar::before,
  .logo-bar::after{
    width: 55px;
  }
}

/* =========================
   7) SERVICES (cards mais premium + hover com brilho)
========================= */
.services-section{
  padding: 60px 0;
}

.section-title{
  text-align:center;
  margin-bottom: 28px;
}
.section-title h2{
  margin:0 0 10px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 900;
  color: rgb(29, 51, 243);
}
.section-title p{
  margin:0 auto;
  max-width: 68ch;
  color:#334155;
  font-size: 1.05rem;
  line-height: 1.65;
}

.services{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.service-card{
  position:relative;
  overflow:hidden;

  background: var(--card);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--radius-xl);
  padding: 22px 18px;
  text-align:center;
  box-shadow: var(--shadow);

  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.service-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 180px at 20% 10%, rgba(43,79,254,.18), transparent 60%),
    radial-gradient(380px 180px at 90% 0%, rgba(44,109,250,.12), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.service-card > *{ position:relative; z-index:1; }

.service-card i{
  color: var(--primary);
  margin-bottom: 10px;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

.service-card h3{
  margin: 10px 0 10px;
  font-size: 1.25rem;
  color:#1520bd;
}

.service-card p{
  margin: 0 0 16px;
  color:#475569;
  line-height:1.6;
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-2);
  border-color: rgba(0,0,0,.12);
  background: color-mix(in srgb, var(--card) 75%, rgba(255,255,255,.18));
}
.service-card:hover::before{ opacity: 1; }

.service-card:hover i{
  transform: scale(1.12) rotate(-2deg);
  color:#067ddf;
}

/* =========================
   8) CONTACT (mantém, mas mais elegante)
========================= */
.contact{
  padding: 34px 0 74px;
}

.contact__box{
  border:1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.32);
  border-radius: var(--radius-xl);
  padding: 26px 18px;
  box-shadow: var(--shadow);
}

.contact__box h2{
  margin:0 0 8px;
  font-weight: 900;
  letter-spacing: -.2px;
}
.contact__box p{
  margin:0 0 16px;
  color:#475569;
  line-height: 1.6;
}

.contact__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   9) SCROLL REVEAL (para animação ao rolar)
   - Não quebra nada: só anima se você adicionar "reveal" no HTML
========================= */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   10) RESPONSIVO (melhorado)
========================= */
@media (max-width: 980px){
  .services{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__subtitle{ max-width: 75ch; }
  :root{ --header-h: 78px; }
}

@media (max-width: 720px){
  .nav__toggle{ display:inline-flex; }

  .nav__list{
    display:none;
    position:absolute;
    top: calc(var(--header-h) - 6px);
    left:16px;
    right:16px;

    border-radius: 18px;
    padding: 14px;

    flex-direction:column;
    gap: 8px;

    background: rgba(255,255,255,.52);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
  }

  .nav__list.is-open{ display:flex; }

  .nav__link{
    padding: 12px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
  }
  .nav__link:hover{
    transform: translateY(0);
  }
  .nav__link::after{ display:none; }

  .site-header{ padding: 10px 12px; }
  .auth{ display:none; }
}

/* =========================
   MOBILE NAV FIX REAL
========================= */
@media (max-width:720px){

  .nav{
    position: static; /* impede bug de posição */
  }

  .nav__toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    padding:12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.12);
  }

  .nav__list{
    display:none;

    position: fixed;
    top: 78px;              /* abaixo do header */
    left: 16px;
    right: 16px;

    width:auto;
    flex-direction:column;
    gap:10px;

    padding:16px;

    border-radius:18px;
    background: rgba(255,255,255,.96);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.18);

    z-index:9999;
  }

  .nav__list.is-open{
    display:flex;
    animation: menuFade .25s ease;
  }

  .nav__link{
    display:block;
    width:100%;
    padding:14px;
    border-radius:14px;
    background:#f3f4f6;
    text-align:center;
    font-size:1.05rem;
  }

  .nav__link:hover{
    background:#e5e7eb;
    transform:none;
  }

  .auth{ display:none; } /* remove login/signup no mobile */
}

/* animação */
@keyframes menuFade{
  from{
    opacity:0;
    transform: translateY(-8px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}