* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --tinta: #f3f3fb;
  --suave: #a4a7c0;
  --linha: rgba(255,255,255,.09);
  --fundo: #08080f;
  --painel: #12121e;
  --painel2: #181828;
  --azul: #3d7bff;
  --roxo: #7c5cff;
  --rosa: #ff4d8d;
  --laranja: #ff8a3d;
  --verde: #22c55e;
  --grad: linear-gradient(120deg, var(--azul), var(--roxo) 45%, var(--rosa));
}

html { scroll-behavior: smooth; background: var(--fundo); }

body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
svg { display: block; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(8,8,15,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; }
.logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad); color: #fff; font-size: 13px; font-weight: 800;
}
.topo nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; color: var(--suave); }
.topo nav a:hover { color: var(--tinta); }

/* botões */
.btn, .btn-sm, .btn-ghost {
  display: inline-block; border-radius: 999px; font-weight: 700; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.btn {
  background: var(--grad); color: #fff; padding: 15px 30px;
  box-shadow: 0 10px 34px -8px rgba(124,92,255,.7);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(255,77,141,.7); }
.btn-ghost { background: rgba(255,255,255,.04); border: 1.5px solid var(--linha); padding: 14px 28px; }
.btn-ghost:hover { border-color: var(--roxo); }
.topo nav .btn-sm { background: var(--grad); color: #fff; padding: 9px 18px; }
.topo nav .btn-sm:hover { transform: translateY(-1px); }

/* hero */
.hero {
  position: relative; overflow: hidden; padding: 96px 0 110px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0 / 28px 28px,
    var(--fundo);
}
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.b1 { width: 460px; height: 460px; background: var(--roxo); top: -140px; right: -100px; }
.b2 { width: 380px; height: 380px; background: var(--rosa); bottom: -180px; left: -120px; opacity: .35; }

.hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.tag {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #b9a8ff; background: rgba(124,92,255,.15); border: 1px solid rgba(124,92,255,.3);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 19px; color: var(--suave); max-width: 560px; margin: 24px 0 36px; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* ilustração do hero */
.hero-art { position: relative; padding: 30px 10px; }
.painel {
  background: var(--painel); border: 1px solid var(--linha); border-radius: 22px; padding: 18px 20px 22px;
  box-shadow: 0 40px 80px -30px rgba(124,92,255,.55);
  transform: rotate(-2deg);
}
.painel-topo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); font-weight: 600; margin-bottom: 14px; }
.painel-topo i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.painel-topo i:nth-child(2) { background: #febc2e; }
.painel-topo i:nth-child(3) { background: #28c840; margin-right: 8px; }
.grafico { width: 100%; height: auto; }
.barras { display: flex; align-items: flex-end; gap: 10px; height: 70px; margin-top: 16px; }
.barras span { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--rosa), var(--laranja)); opacity: .9; }
.barras span:nth-child(odd) { background: linear-gradient(180deg, var(--azul), var(--roxo)); }

.chip {
  position: absolute; display: flex; align-items: center; gap: 8px;
  background: var(--painel2); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 14px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.8);
  animation: flutua 5s ease-in-out infinite;
}
.chip svg { width: 18px; height: 18px; fill: none; stroke: var(--roxo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.c1 { top: 4px; left: -14px; }
.c2 { bottom: 0; right: -10px; animation-delay: -2s; }
.c3 { top: 46%; right: -26px; animation-delay: -3.5s; }
.c3 svg { stroke: var(--rosa); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.verde { background: var(--verde); box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
@keyframes flutua { 50% { transform: translateY(-8px); } }

/* blocos */
.bloco { padding: 100px 0; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin-bottom: 20px; }
h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.bloco p { color: var(--suave); }
.bloco p + p { margin-top: 16px; }

/* sobre */
.sobre { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: center; }
.avatar {
  position: relative; aspect-ratio: 1; border-radius: 32px; background: var(--grad); padding: 6px;
  box-shadow: 0 30px 80px -30px rgba(255,77,141,.6);
}
.avatar-in {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 27px;
  object-fit: cover; object-position: 40% 30%;
}
.selo {
  position: absolute; bottom: -18px; right: -18px; background: var(--painel2); color: var(--tinta);
  font-size: 14px; font-weight: 800; line-height: 1.25; padding: 14px 18px; border-radius: 16px;
  border: 1px solid var(--linha); border-left: 5px solid var(--laranja);
  box-shadow: 0 16px 34px -12px rgba(0,0,0,.8);
}
.pilares { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pilares li {
  font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  background: rgba(61,123,255,.15); color: #7fa7ff;
}
.pilares li:nth-child(2) { background: rgba(255,77,141,.15); color: #ff86b0; }
.pilares li:nth-child(3) { background: rgba(255,138,61,.15); color: #ffad72; }

/* serviços */
.servicos {
  background: linear-gradient(180deg, var(--fundo), #0e0c1c 30%, #0e0c1c 70%, var(--fundo));
}
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 12px; }
.card {
  position: relative; background: var(--painel); border-radius: 20px; padding: 30px 26px; border: 1px solid var(--linha);
  overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c);
}
.card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 24px 50px -24px var(--c); }
.ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--c); box-shadow: 0 10px 24px -8px var(--c);
}
.ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.azul { --c: var(--azul); }
.roxo { --c: var(--roxo); }
.rosa { --c: var(--rosa); }
.laranja { --c: var(--laranja); }

/* processo */
.passos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 12px; position: relative; }
.passos::before {
  content: ""; position: absolute; top: 28px; left: 28px; right: 28px; height: 3px;
  background: var(--grad); opacity: .4; border-radius: 3px;
}
.passos li { position: relative; }
.passos span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 18px;
  box-shadow: 0 0 0 8px var(--fundo), 0 10px 30px -6px rgba(124,92,255,.8);
}

/* contato / cta */
.cta { padding: 0 0 100px; }
.cta-in {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  background: var(--grad); color: #fff; border-radius: 32px; padding: 64px;
  overflow: hidden; max-width: 1092px;
  box-shadow: 0 40px 100px -40px rgba(124,92,255,.8);
}
.cta-in::after {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: rgba(255,255,255,.12); right: -120px; top: -160px; pointer-events: none;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.88); font-size: 18px; }
.contatos { display: grid; gap: 14px; position: relative; z-index: 1; }
.contatos > * {
  display: flex; align-items: center; gap: 16px; background: rgba(8,8,15,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
  border-radius: 18px; padding: 18px 22px; transition: transform .15s, background .15s;
}
.contatos a:hover { transform: translateX(4px); background: rgba(8,8,15,.75); }
.contatos svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 12px; }
.whats svg { background: #25d366; fill: #fff; }
.local svg { background: var(--laranja); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mail svg { background: var(--roxo); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contatos span { display: flex; flex-direction: column; min-width: 0; }
.contatos small { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.contatos strong { font-size: 17px; word-break: break-word; }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 32px 0; font-size: 14px; color: var(--suave); }
.rodape-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape nav { display: flex; gap: 24px; }
.rodape a:hover { color: var(--tinta); }

/* páginas legais */
.legal {
  padding: 72px 0 96px;
  background: radial-gradient(ellipse 80% 340px at 50% 0, rgba(124,92,255,.22), transparent);
}
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 40px; letter-spacing: -.03em; font-weight: 800; margin-bottom: 8px; }
.legal .data { color: var(--suave); margin-bottom: 40px; }
.legal h2 { font-size: 21px; margin: 36px 0 12px; }
.legal p, .legal li { color: #c4c6d8; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin-top: 8px; }
.legal li { margin-top: 6px; }
.legal a strong { color: #b9a8ff; }
.voltar { display: inline-block; margin-bottom: 32px; color: #b9a8ff; font-weight: 600; font-size: 15px; }

/* responsivo */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { max-width: 480px; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .passos::before { display: none; }
  .sobre { grid-template-columns: 1fr; gap: 48px; }
  .avatar { max-width: 320px; }
  .cta-in { grid-template-columns: 1fr; padding: 44px 32px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .topo nav a:not(.btn-sm) { display: none; }
  .hero { padding: 56px 0 72px; }
  .hero h1 br { display: none; }
  .hero-art { padding: 30px 14px; }
  .c3 { display: none; }
  .bloco { padding: 72px 0; }
  .grade, .passos { grid-template-columns: 1fr; }
  .selo { right: -6px; }
  .cta { padding-bottom: 64px; }
  .cta-in { border-radius: 24px; padding: 36px 22px; }
}