/* =========================================================
   FANTASTIC — SISTEMA VISUAL UNIFICADO
   Carregado depois de site.css para organizar todo o projeto.
   ========================================================= */
:root {
  --f-bg: #f3f2ee;
  --f-paper: #fbfaf7;
  --f-card: #ffffff;
  --f-night: #0c0c10;
  --f-night-2: #15151b;
  --f-ink: #15151a;
  --f-muted: #68686f;
  --f-line: rgba(20, 20, 26, 0.11);
  --f-violet: #7650f6;
  --f-blue: #2c66f5;
  --f-gold: #e9b938;
  --f-green: #27a968;
  --f-orange: #f16f38;
  --f-accent: var(--f-blue);
  --f-accent-2: var(--f-violet);
  --f-accent-soft: color-mix(in srgb, var(--f-accent) 9%, white);
  --f-content: 1280px;
  --f-wide: 1600px;
  --f-radius-sm: 14px;
  --f-radius: 24px;
  --f-radius-lg: 38px;
  --f-shadow: 0 24px 70px rgba(14, 14, 22, 0.09);
}

body:has(.tint-blue) {
  --f-accent: var(--f-blue);
  --f-accent-2: #6890ff;
}
body:has(.tint-purple) {
  --f-accent: var(--f-violet);
  --f-accent-2: #ad74ff;
}
body:has(.tint-green) {
  --f-accent: var(--f-green);
  --f-accent-2: #72d49d;
}
body[data-page="solucoes"] {
  --f-accent: var(--f-orange);
  --f-accent-2: var(--f-gold);
}
body[data-page="portfolio"] {
  --f-accent: var(--f-violet);
  --f-accent-2: var(--f-gold);
}
body[data-page="empresa"] {
  --f-accent: var(--f-violet);
  --f-accent-2: var(--f-gold);
}
body[data-page="contato"] {
  --f-accent: var(--f-blue);
  --f-accent-2: var(--f-violet);
}

* {
  box-sizing: border-box;
}
html {
  background: var(--f-night);
}
body {
  overflow-x: hidden;
  background: var(--f-bg) !important;
  color: var(--f-ink);
}
main {
  position: relative;
}

/* O palco é limpo. Elementos antigos que competiam com o conteúdo saem. */
.energy-layer,
.marquee,
.scroll-cue {
  display: none !important;
}
.title-alive,
.title-pulse,
.card:nth-child(n),
.orbit {
  animation: none !important;
}
.hero::before,
.hero::after {
  display: none !important;
}

/* Cabeçalho */
.header {
  height: 90px !important;
  padding-inline: max(5vw, calc((100vw - var(--f-wide)) / 2)) !important;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(12, 12, 16, 0.93) !important;
  box-shadow: none;
  backdrop-filter: blur(22px);
}
.header .logo {
  width: 126px;
  height: 84px;
}
.header .logo img {
  width: 126px;
  height: 96px;
  object-fit: cover;
}
.nav {
  gap: clamp(18px, 1.75vw, 30px) !important;
}
.nav a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}
.nav a:hover,
.nav a.active {
  color: var(--f-gold) !important;
}
.nav-cta {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.04);
}
.nav-cta:hover {
  border-color: var(--f-gold) !important;
}

/* Navegação interna vira ponte entre as páginas, não uma faixa solta. */
.subnav {
  top: 90px !important;
  min-height: 60px;
  padding: 10px max(5vw, calc((100vw - var(--f-wide)) / 2)) !important;
  align-items: center;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: var(--f-night-2) !important;
}
.subnav a,
.portfolio-filter button {
  color: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: transparent !important;
}
.subnav a:hover,
.subnav a.active,
.portfolio-filter button:hover,
.portfolio-filter button.active {
  color: #111 !important;
  border-color: #fff !important;
  background: #fff !important;
}

/* Tipografia e microelementos */
.eyebrow {
  color: var(--f-accent-2) !important;
  letter-spacing: 0.16em;
}
.button {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding-inline: 22px;
  border-radius: 999px;
}
.button.primary {
  color: #fff;
  border-color: var(--f-ink);
  background: var(--f-ink);
}
.button.ghost {
  background: transparent;
}
.actions {
  align-items: center;
}

/* ABERTURAS — todas são capítulos do mesmo universo. */
.page-hero,
.premium-hero,
.portfolio-hero {
  position: relative;
  min-height: 560px !important;
  padding: clamp(105px, 11vw, 175px)
    max(6vw, calc((100vw - var(--f-content)) / 2)) clamp(95px, 9vw, 140px) !important;
  align-items: center !important;
  color: #fff !important;
  border: 0 !important;
  background:
    radial-gradient(
      circle at 84% 42%,
      color-mix(in srgb, var(--f-accent) 30%, transparent),
      transparent 25%
    ),
    radial-gradient(
      circle at 74% 70%,
      color-mix(in srgb, var(--f-accent-2) 16%, transparent),
      transparent 28%
    ),
    linear-gradient(125deg, var(--f-night), #12121a 62%, #0d0d13) !important;
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  z-index: -1;
  width: clamp(350px, 38vw, 680px) !important;
  height: auto !important;
  aspect-ratio: 1;
  top: 50% !important;
  right: max(2vw, calc((100vw - var(--f-wide)) / 2)) !important;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 80px rgba(255, 255, 255, 0.013),
    inset 0 0 0 81px rgba(255, 255, 255, 0.055),
    0 0 120px color-mix(in srgb, var(--f-accent) 14%, transparent) !important;
  animation: none !important;
}
.page-hero::after {
  content: "F!" !important;
  position: absolute;
  z-index: -1;
  right: max(6vw, calc((100vw - var(--f-wide)) / 2));
  bottom: -0.2em !important;
  color: rgba(255, 255, 255, 0.025) !important;
  font: 900 clamp(12rem, 24vw, 26rem)/1 Manrope !important;
  letter-spacing: -0.12em;
  animation: none !important;
}
.page-hero > div {
  max-width: 900px !important;
}
.page-hero h1 {
  max-width: 900px;
  color: #fff;
  font-size: clamp(3.4rem, 6.4vw, 6.8rem) !important;
}
.page-hero .lead {
  max-width: 760px;
  color: #b9b9c3 !important;
}
.page-hero .blue,
.page-hero .purple,
.page-hero .green,
.page-hero .orange {
  color: transparent !important;
  background: linear-gradient(100deg, var(--f-accent), var(--f-accent-2));
  background-clip: text;
  -webkit-background-clip: text;
}

/* A página se encaixa fisicamente na abertura. */
.page-hero + .page-section,
.subnav + main > .page-hero + .page-section {
  margin-top: -34px;
}
.page-section {
  position: relative;
  padding: clamp(82px, 8vw, 125px)
    max(6vw, calc((100vw - var(--f-content)) / 2)) !important;
  border: 0 !important;
  background: var(--f-paper) !important;
}
.page-section.white {
  z-index: 3;
  border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0;
  background:
    radial-gradient(circle at 90% 0, var(--f-accent-soft), transparent 24rem),
    var(--f-paper) !important;
  box-shadow: 0 -25px 70px rgba(0, 0, 0, 0.13);
}
.page-section.white + .page-section {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--f-accent) 4%, var(--f-bg)),
    var(--f-bg)
  ) !important;
}
.page-section > h2,
.section-head h2 {
  max-width: 840px;
}
.page-section h2::after,
.section h2::after {
  content: "";
  display: block;
  width: 86px !important;
  height: 4px !important;
  margin-top: 24px;
  border-radius: 9px;
  background: linear-gradient(
    90deg,
    var(--f-accent),
    var(--f-accent-2)
  ) !important;
}

/* Cards — uma família, não vários retângulos desconectados. */
.feature-grid,
.cards.three {
  counter-reset: unified-card;
  gap: 16px !important;
}
.feature-grid {
  margin-top: 52px !important;
}
.feature,
.project,
.card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 30px !important;
  border: 1px solid var(--f-line) !important;
  border-radius: var(--f-radius) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}
.feature::before,
.project::before {
  counter-increment: unified-card;
  content: "0" counter(unified-card);
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 34px;
  place-items: center;
  color: var(--f-accent);
  border-radius: 12px;
  background: var(--f-accent-soft);
  font: 900 0.67rem Inter;
}
.feature::after,
.project::after,
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  opacity: 0.7;
  background: linear-gradient(
    90deg,
    var(--f-accent),
    var(--f-accent-2),
    transparent
  );
}
.feature:hover,
.project:hover,
.card:hover {
  transform: translateY(-6px) !important;
  border-color: color-mix(
    in srgb,
    var(--f-accent) 35%,
    var(--f-line)
  ) !important;
  box-shadow: var(--f-shadow) !important;
}
.feature h3,
.project h3 {
  font-size: 1.42rem;
}
.feature p,
.project p {
  max-width: 560px;
}
.project .tag-row {
  margin-top: auto;
  padding-top: 28px;
}

/* Cards da home mantêm suas cores, mas obedecem à mesma geometria. */
.cards.three .card {
  min-height: 290px;
  border-top-width: 1px !important;
}
.cards.three .card > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--f-accent-soft);
}
.cards.three .accent-blue {
  --f-accent: var(--f-blue);
  --f-accent-2: #6c93ff;
}
.cards.three .accent-purple {
  --f-accent: var(--f-violet);
  --f-accent-2: #ae77ff;
}
.cards.three .accent-green {
  --f-accent: var(--f-green);
  --f-accent-2: #79d6a2;
}

/* O bloco escuro é a conclusão do grupo de cards. */
.wide-card {
  position: relative;
  margin-top: 18px !important;
  padding: clamp(42px, 5vw, 70px) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--f-radius-lg) !important;
  background:
    radial-gradient(
      circle at 85% 15%,
      color-mix(in srgb, var(--f-accent) 28%, transparent),
      transparent 27%
    ),
    linear-gradient(125deg, var(--f-night), var(--f-night-2)) !important;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.17) !important;
}
.wide-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 64px;
  width: 105px;
  height: 5px;
  background: linear-gradient(90deg, var(--f-accent), var(--f-accent-2));
  border-radius: 0 0 8px 8px;
}
.wide-card h2::after {
  display: none;
}
.wide-card .list li::before {
  color: var(--f-accent-2);
}

/* Provas e demonstrações continuam especiais, mas seguem o fluxo da seção. */
.gp-proof,
.automation-proof {
  margin-top: clamp(90px, 9vw, 140px) !important;
  padding-top: clamp(60px, 6vw, 90px) !important;
  border-top: 1px solid var(--f-line);
}
.gp-intro {
  position: relative;
  margin-bottom: 42px !important;
}
.gp-intro::before {
  content: "DEMONSTRAÇÃO INTERATIVA";
  position: absolute;
  left: 0;
  top: -38px;
  color: var(--f-accent);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.gp-shell {
  border-color: color-mix(in srgb, var(--f-accent) 17%, #dce9e3) !important;
  border-radius: var(--f-radius-lg) !important;
  box-shadow: var(--f-shadow) !important;
}

/* Home — hero, serviços e processo viram uma história contínua. */
body[data-page="inicio"] .hero {
  position: relative;
  min-height: calc(100vh - 90px);
  padding: clamp(100px, 10vw, 160px)
    max(6vw, calc((100vw - var(--f-content)) / 2)) clamp(120px, 12vw, 180px) !important;
  color: #fff;
  background:
    radial-gradient(
      circle at 78% 44%,
      rgba(44, 102, 245, 0.28),
      transparent 25%
    ),
    radial-gradient(
      circle at 86% 67%,
      rgba(118, 80, 246, 0.2),
      transparent 24%
    ),
    linear-gradient(125deg, var(--f-night), #12121a) !important;
}
body[data-page="inicio"] .hero h1 {
  color: #fff;
}
body[data-page="inicio"] .hero .lead {
  color: #b9b9c3;
}
body[data-page="inicio"] .hero .blue {
  color: transparent;
  background: linear-gradient(100deg, #6890ff, #b786ff, var(--f-gold));
  background-clip: text;
  -webkit-background-clip: text;
}
body[data-page="inicio"] .hero .ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
body[data-page="inicio"] .hero .proof {
  color: rgba(255, 255, 255, 0.63);
}
body[data-page="inicio"] .orbit {
  display: grid !important;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 110px rgba(44, 102, 245, 0.14);
}
body[data-page="inicio"] .orbit::before {
  border-color: rgba(255, 255, 255, 0.16);
}
body[data-page="inicio"] .orbit::after {
  border-top-color: var(--f-gold);
  border-right-color: rgba(118, 80, 246, 0.55);
}
body[data-page="inicio"] .orbit-core {
  background: #fff;
  color: var(--f-night);
}
body[data-page="inicio"] .section.white {
  position: relative;
  z-index: 3;
  margin-top: -38px;
  padding-top: clamp(100px, 10vw, 145px) !important;
  border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(118, 80, 246, 0.09),
      transparent 25rem
    ),
    var(--f-paper) !important;
  box-shadow: 0 -25px 70px rgba(0, 0, 0, 0.14);
}
body[data-page="inicio"] .section.split {
  padding: clamp(95px, 9vw, 140px)
    max(6vw, calc((100vw - var(--f-content)) / 2)) !important;
  border-top: 1px solid var(--f-line);
  background: linear-gradient(135deg, #eceaf7, var(--f-bg)) !important;
}
.steps {
  border-top: 0 !important;
  counter-reset: steps;
}
.steps li {
  position: relative;
  grid-template-columns: 62px 145px 1fr !important;
  align-items: center;
  padding: 22px 0 !important;
}
.steps li::before {
  counter-increment: steps;
  content: "0" counter(steps);
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: var(--f-violet);
  background: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  font: 900 0.68rem Inter;
}

/* Quem somos */
.capability-grid {
  border-top: 1px solid var(--f-line) !important;
}
.capability {
  padding: clamp(42px, 5vw, 70px) 0 !important;
}
.capability-number {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: var(--f-accent);
  border-radius: 15px;
  background: var(--f-accent-soft);
}
.capability .button {
  border-color: var(--f-line);
}
.project-lab {
  border-radius: 0 !important;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(118, 80, 246, 0.21),
      transparent 27%
    ),
    var(--f-night) !important;
}

/* Portfólio */
.portfolio-grid {
  gap: 20px !important;
}
.portfolio-item {
  overflow: hidden;
  border: 1px solid var(--f-line) !important;
  border-radius: var(--f-radius) !important;
  background: #fff;
  box-shadow: 0 12px 40px rgba(15, 15, 22, 0.06);
}
.portfolio-copy {
  padding: 32px !important;
}
.portfolio-copy h2::after {
  display: none;
}

/* Contato */
.contact-grid {
  align-items: start;
}
.contact-box {
  border: 1px solid var(--f-line) !important;
  border-radius: var(--f-radius) !important;
  box-shadow: var(--f-shadow);
}
.contact-box input,
.contact-box select,
.contact-box textarea {
  border-color: var(--f-line) !important;
  background: var(--f-bg) !important;
}

/* Fechamento comum a todas as páginas */
.cta,
.premium-cta {
  position: relative;
  margin: 0 max(2.5vw, calc((100vw - var(--f-wide)) / 2)) 48px !important;
  padding: clamp(85px, 9vw, 135px)
    max(6vw, calc((100vw - var(--f-content)) / 2)) !important;
  overflow: hidden;
  border-radius: var(--f-radius-lg) !important;
  color: #fff;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(118, 80, 246, 0.45),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(233, 185, 56, 0.18),
      transparent 24%
    ),
    linear-gradient(120deg, #15151d, #20203a) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16);
}
.cta h2 {
  max-width: 1050px;
  margin-inline: auto;
}
.cta h2 span {
  color: #cfc6ff !important;
}
.cta h2::after {
  display: none;
}
.cta .actions {
  justify-content: center;
}
.cta .button.light {
  color: var(--f-ink);
  background: #fff;
}
.cta .button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.footer {
  min-height: 135px;
  padding: 35px max(5vw, calc((100vw - var(--f-wide)) / 2)) !important;
  align-items: center;
  color: #8d8d98 !important;
  background: var(--f-night) !important;
}

/* Movimento pontual, nunca permanente. */
@media (prefers-reduced-motion: no-preference) {
  .feature,
  .project,
  .card,
  .portfolio-item,
  .button {
    transition:
      transform 0.24s ease,
      box-shadow 0.24s ease,
      border-color 0.24s ease;
  }
}

@media (max-width: 1000px) {
  .page-hero::before {
    right: -180px !important;
    opacity: 0.6;
  }
  body[data-page="inicio"] .hero {
    grid-template-columns: 1fr;
  }
  body[data-page="inicio"] .orbit {
    width: min(480px, 82vw);
    margin: 70px auto 0;
  }
  .steps li {
    grid-template-columns: 58px 1fr !important;
  }
  .steps li span {
    grid-column: 2;
  }
  .cta {
    margin-inline: 16px !important;
  }
}

@media (max-width: 900px) {
  .header {
    height: 76px !important;
  }
  .nav {
    top: 75px !important;
    background: var(--f-night) !important;
  }
  .subnav {
    top: 76px !important;
  }
  .page-hero {
    min-height: 490px !important;
  }
  .capability .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .header {
    height: 70px !important;
  }
  .nav {
    top: 69px !important;
  }
  .subnav {
    top: 70px !important;
  }
  .page-hero {
    min-height: 450px !important;
    padding-top: 90px !important;
  }
  .page-hero h1 {
    font-size: 2.85rem !important;
  }
  .page-hero::before {
    right: -210px !important;
  }
  .page-section.white,
  body[data-page="inicio"] .section.white {
    border-radius: 24px 24px 0 0;
  }
  .feature,
  .project,
  .card {
    min-height: 0;
    padding: 24px !important;
  }
  .wide-card {
    border-radius: 24px !important;
  }
  .wide-card::before {
    left: 30px;
  }
  .cta {
    margin: 0 10px 28px !important;
    border-radius: 24px !important;
  }
  .footer {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FANTASTIC MOBILE — composição nativa para telas de toque
   O desktop continua intacto acima de 767px.
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 20px;
    --mobile-radius: 26px;
    --mobile-paper: #f8f8fb;
    --mobile-paper-strong: #f0f0f6;
    --mobile-line: #e5e5ec;
  }

  body:has(.page-hero.tint-blue) {
    --mobile-paper: #f5f8ff;
    --mobile-paper-strong: #eaf1ff;
    --mobile-line: #dce7fb;
  }

  body:has(.page-hero.tint-purple),
  body[data-page="empresa"],
  body[data-page="portfolio"] {
    --mobile-paper: #f8f6ff;
    --mobile-paper-strong: #efebff;
    --mobile-line: #e4def8;
  }

  body:has(.page-hero.tint-green) {
    --mobile-paper: #f4faf7;
    --mobile-paper-strong: #e8f5ee;
    --mobile-line: #d8eae1;
  }

  body[data-page="solucoes"],
  body:has(.page-hero .orange) {
    --mobile-paper: #fcf8f3;
    --mobile-paper-strong: #f8eee3;
    --mobile-line: #eee1d4;
  }

  html {
    scroll-padding-top: 118px;
  }

  body {
    overflow-x: hidden;
    background: var(--mobile-paper);
  }

  body.menu-open {
    overflow: hidden;
  }

  /* Cabeçalho e menu: uma navegação própria de celular. */
  .header {
    height: 68px !important;
    padding: 0 max(var(--mobile-gutter), env(safe-area-inset-left)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(17, 17, 23, 0.92) !important;
    backdrop-filter: blur(18px);
  }

  .header .logo img {
    width: 103px !important;
    max-height: 48px !important;
    object-fit: contain;
  }

  .menu {
    position: relative;
    z-index: 102;
    display: inline-flex !important;
    min-width: 66px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    font-size: 0.67rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 101 !important;
    display: flex !important;
    height: 100svh !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: max(88px, calc(env(safe-area-inset-top) + 72px))
      max(var(--mobile-gutter), env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(var(--mobile-gutter), env(safe-area-inset-left)) !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    background:
      radial-gradient(
        circle at 88% 12%,
        rgba(118, 80, 246, 0.3),
        transparent 34%
      ),
      radial-gradient(
        circle at 5% 92%,
        rgba(43, 116, 255, 0.2),
        transparent 36%
      ),
      #111117 !important;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;
  }

  .nav.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav a {
    position: relative;
    display: flex !important;
    min-height: 62px;
    align-items: center;
    padding: 0 6px 0 42px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    font:
      800 clamp(1.35rem, 7vw, 1.8rem) Manrope,
      sans-serif !important;
    letter-spacing: -0.035em;
  }

  .nav a::before {
    position: absolute;
    left: 5px;
    color: rgba(255, 255, 255, 0.32);
    font:
      800 0.61rem Inter,
      sans-serif;
    letter-spacing: 0.08em;
  }

  .nav a:nth-child(1)::before {
    content: "01";
  }
  .nav a:nth-child(2)::before {
    content: "02";
  }
  .nav a:nth-child(3)::before {
    content: "03";
  }
  .nav a:nth-child(4)::before {
    content: "04";
  }
  .nav a:nth-child(5)::before {
    content: "05";
  }
  .nav a:nth-child(6)::before {
    content: "06";
  }

  .nav a.active,
  .nav a:hover {
    color: #fff !important;
  }

  .nav a.active::after {
    position: absolute;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--f-accent);
    box-shadow: 0 0 0 7px var(--f-accent-soft);
    content: "";
  }

  .nav .nav-cta {
    min-height: 52px;
    justify-content: center;
    margin-top: 22px;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #15151b !important;
    background: #fff !important;
    font-size: 1rem !important;
    letter-spacing: -0.01em;
  }

  .nav .nav-cta::before,
  .nav .nav-cta::after {
    display: none;
  }

  /* Navegação interna: faixa de toque horizontal, sem esmagar rótulos. */
  .subnav,
  .portfolio-filter {
    top: 68px !important;
    z-index: 80 !important;
    display: flex !important;
    width: 100%;
    height: 52px !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px var(--mobile-gutter) !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    background: rgba(250, 250, 252, 0.96) !important;
    backdrop-filter: blur(18px);
  }

  .subnav::-webkit-scrollbar,
  .portfolio-filter::-webkit-scrollbar,
  .mobile-snap::-webkit-scrollbar {
    display: none;
  }

  .subnav a,
  .portfolio-filter button {
    flex: 0 0 auto;
    min-width: max-content;
    height: 38px;
    padding: 0 17px !important;
    border: 1px solid #e5e5eb !important;
    border-radius: 999px !important;
    color: #5e5e69 !important;
    background: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
  }

  .subnav a.active,
  .portfolio-filter button.active {
    color: #fff !important;
    border-color: var(--f-night) !important;
    background: var(--f-night) !important;
    box-shadow: 0 8px 20px rgba(17, 17, 23, 0.16);
  }

  /* Heróis: conteúdo ancorado embaixo, leitura editorial e respiro real. */
  .page-hero,
  .page-hero.premium-hero,
  body[data-page="inicio"] .hero {
    display: flex !important;
    min-height: min(760px, calc(100svh - 68px)) !important;
    align-items: flex-end !important;
    padding: 112px var(--mobile-gutter) 76px !important;
    text-align: left !important;
  }

  body[data-page="servicos"] .subnav + main .page-hero {
    min-height: min(710px, calc(100svh - 120px)) !important;
    padding-top: 84px !important;
  }

  .page-hero > div,
  body[data-page="inicio"] .hero > div:first-child {
    width: 100%;
    max-width: none !important;
  }

  .page-hero::before {
    top: auto !important;
    right: -125px !important;
    bottom: -70px !important;
    width: 330px !important;
    height: 330px !important;
    opacity: 0.42 !important;
  }

  .page-hero::after {
    left: var(--mobile-gutter) !important;
    right: auto !important;
    bottom: 44px !important;
    width: 58px !important;
    height: 3px !important;
    border-radius: 3px;
    background: var(--f-accent) !important;
    content: "" !important;
  }

  .eyebrow {
    font-size: 0.64rem !important;
    letter-spacing: 0.13em !important;
  }

  .page-hero h1,
  body[data-page="inicio"] .hero h1 {
    max-width: 12ch;
    margin: 16px 0 20px !important;
    font-size: clamp(2.55rem, 12.6vw, 4.15rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.065em !important;
  }

  .page-hero .lead,
  body[data-page="inicio"] .hero .lead {
    max-width: 34rem !important;
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }

  .hero .actions,
  .page-hero .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .hero .actions .button,
  .page-hero .actions .button {
    width: 100%;
    min-height: 52px;
  }

  body[data-page="inicio"] .hero {
    flex-direction: column;
    justify-content: flex-end !important;
  }

  body[data-page="inicio"] .hero .proof {
    display: flex !important;
    gap: 8px 16px !important;
    margin-top: 24px !important;
    color: rgba(255, 255, 255, 0.6) !important;
  }

  body[data-page="inicio"] .hero .proof span {
    font-size: 0.68rem !important;
  }

  /* No celular a órbita vira uma central de atalhos tocável. */
  body[data-page="inicio"] .orbit {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 34px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body[data-page="inicio"] .orbit::before,
  body[data-page="inicio"] .orbit::after,
  body[data-page="inicio"] .orbit-core {
    display: none !important;
  }

  body[data-page="inicio"] .orbit .pill {
    position: static !important;
    display: flex !important;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    transform: none !important;
    font-size: 0.67rem !important;
    letter-spacing: 0.06em;
  }

  body[data-page="inicio"] .orbit .pill::after {
    color: var(--f-accent);
    content: "↗";
    font-size: 0.95rem;
  }

  /* Superfícies e ritmo: a página vira um fluxo contínuo. */
  .page-hero + .page-section,
  .page-section.white,
  body[data-page="inicio"] .section.white {
    margin-top: -30px !important;
    padding: 72px var(--mobile-gutter) 84px !important;
    border-radius: 30px 30px 0 0 !important;
    background: var(--mobile-paper) !important;
  }

  .page-section,
  .section {
    padding: 76px var(--mobile-gutter) !important;
    background: var(--mobile-paper) !important;
  }

  .section-head {
    margin-bottom: 34px !important;
  }

  .section h2,
  .page-section h2,
  .section-head h2 {
    font-size: clamp(2.05rem, 10vw, 3.2rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }

  .section-head p,
  .intro {
    font-size: 0.96rem !important;
    line-height: 1.7 !important;
  }

  /* Coleções viram trilhos: conteúdo grande, uma decisão por vez. */
  .cards.three,
  .feature-grid,
  .portfolio-grid {
    display: flex !important;
    width: calc(100% + var(--mobile-gutter)) !important;
    gap: 12px !important;
    margin-right: calc(var(--mobile-gutter) * -1) !important;
    padding: 2px var(--mobile-gutter) 24px 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--mobile-gutter);
    scrollbar-width: none;
  }

  .cards.three > .card,
  .feature-grid > .feature,
  .portfolio-grid > .portfolio-item {
    width: min(82vw, 330px) !important;
    min-width: min(82vw, 330px) !important;
    scroll-snap-align: start;
  }

  .feature,
  .project,
  .card {
    min-height: 245px !important;
    padding: 26px !important;
    border-radius: var(--mobile-radius) !important;
    border-color: var(--mobile-line) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 14px 38px rgba(19, 19, 28, 0.055) !important;
  }

  .feature h3,
  .project h3,
  .card h3 {
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
  }

  .feature p,
  .project p,
  .card p {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }

  .page-section.white > h2 + .feature-grid::after,
  .section-head + .cards.three::after {
    flex: 0 0 8px;
    content: "";
  }

  .page-section.white > h2::after,
  .section h2::after {
    width: 54px !important;
    margin-top: 22px !important;
  }

  .section.white > .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .section.white > .actions .button {
    width: 100%;
  }

  .wide-card {
    display: block !important;
    margin-top: 14px !important;
    padding: 34px 26px 28px !important;
    border-radius: var(--mobile-radius) !important;
    color: var(--f-ink) !important;
    border: 1px solid var(--mobile-line) !important;
    background:
      radial-gradient(circle at 90% 0, var(--f-accent-soft), transparent 45%),
      var(--mobile-paper-strong) !important;
    box-shadow: none !important;
  }

  .wide-card::before {
    background: var(--f-accent) !important;
  }

  .wide-card h2 {
    font-size: 2.25rem !important;
    color: var(--f-ink) !important;
  }

  .wide-card p,
  .wide-card .list li {
    color: var(--f-muted) !important;
  }

  .wide-card .list {
    margin-top: 25px;
    padding-top: 16px;
    border-top: 1px solid var(--mobile-line);
  }

  /* Processo da home: linha do tempo compacta. */
  body[data-page="inicio"] .section.split {
    display: block !important;
    padding: 80px var(--mobile-gutter) 92px !important;
    background: #f5f4fa !important;
  }

  body[data-page="inicio"] .section.split > div .actions {
    margin: 26px 0 42px !important;
  }

  .steps {
    position: relative;
    margin-top: 38px !important;
    padding-left: 0 !important;
  }

  .steps::before {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 19px;
    width: 1px;
    background: linear-gradient(var(--f-violet), rgba(118, 80, 246, 0.08));
    content: "";
  }

  .steps li {
    grid-template-columns: 40px 1fr !important;
    gap: 15px !important;
    padding: 19px 0 !important;
    border-bottom: 0 !important;
  }

  .steps li::before {
    position: relative;
    z-index: 1;
    width: 40px !important;
    height: 40px !important;
  }

  .steps li b {
    align-self: end;
    font-size: 1.08rem;
  }

  .steps li span {
    grid-column: 2 !important;
    font-size: 0.86rem !important;
    line-height: 1.55;
  }

  /* Quem somos: sequência editorial, sem quatro mini-sites empilhados. */
  .capability-grid {
    border-top: 0 !important;
  }

  .capability {
    position: relative;
    display: block !important;
    padding: 34px 0 44px 54px !important;
    border-top: 1px solid var(--f-line) !important;
  }

  .capability-number {
    position: absolute;
    top: 31px;
    left: 0;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 0.68rem;
  }

  .capability h3 {
    font-size: 1.55rem !important;
    line-height: 1.08 !important;
  }

  .capability p,
  .capability li {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  .capability ul {
    grid-template-columns: 1fr !important;
  }

  .capability .button {
    width: 100%;
    margin-top: 18px;
  }

  .project-lab {
    display: block !important;
    padding: 78px var(--mobile-gutter) !important;
    color: var(--f-ink) !important;
    background:
      radial-gradient(circle at 92% 8%, var(--f-accent-soft), transparent 32%),
      var(--mobile-paper-strong) !important;
  }

  .project-lab h2,
  .project-lab .intro {
    color: var(--f-ink) !important;
  }

  .project-lab .intro {
    opacity: 0.72;
  }

  .project-lab .tag {
    color: var(--f-violet) !important;
    border-color: var(--mobile-line) !important;
    background: rgba(255, 255, 255, 0.72) !important;
  }

  .project-lab .button.light {
    color: #fff !important;
    background: var(--f-night) !important;
  }

  .project-lab .system-preview {
    min-height: 270px;
    margin-top: 42px;
    transform: none !important;
  }

  .system-preview .preview-body {
    grid-template-columns: 38px 1fr !important;
  }

  /* Soluções e FAQ. */
  .page-section > .feature-grid:has(.project) {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .page-section > .feature-grid > .project {
    width: 100% !important;
    min-width: 0 !important;
  }

  .faq details {
    padding: 22px 0 !important;
  }

  .faq summary {
    padding-right: 26px;
    font-size: 1rem !important;
    line-height: 1.45;
  }

  /* Portfólio: cada projeto parece uma capa, não uma miniatura espremida. */
  .portfolio-grid > .portfolio-item {
    overflow: hidden;
    border-radius: var(--mobile-radius) !important;
  }

  .portfolio-visual {
    min-height: 225px !important;
  }

  .portfolio-copy {
    min-height: 255px;
    padding: 27px 24px !important;
  }

  .portfolio-copy h2 {
    font-size: 1.65rem !important;
  }

  .portfolio-copy p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }

  /* Contato: conversa primeiro, formulário como uma folha elevada. */
  .contact-grid {
    display: block !important;
  }

  .contact-grid > div:first-child {
    padding-bottom: 38px;
  }

  .contact-grid .tag-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .contact-grid .tag {
    flex: 0 0 auto;
  }

  .contact-box {
    margin: 0 -8px;
    padding: 27px 20px !important;
    border-radius: var(--mobile-radius) !important;
    box-shadow: 0 24px 60px rgba(15, 15, 22, 0.13) !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }

  .contact-box input,
  .contact-box select,
  .contact-box textarea {
    min-height: 52px;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .contact-box textarea {
    min-height: 135px;
  }

  .contact-box .button {
    min-height: 54px;
  }

  /* Gaspar: controles tocáveis e dados legíveis em camadas. */
  .gp-proof {
    margin: 72px 0 0 !important;
  }

  .gp-intro {
    gap: 16px !important;
    margin-bottom: 26px !important;
  }

  .gp-intro h2 {
    font-size: 2.55rem !important;
  }

  .gp-shell {
    margin-inline: -8px;
    border-radius: var(--mobile-radius) !important;
  }

  .gp-sidebar {
    display: flex !important;
    gap: 8px !important;
    padding: 14px 12px 16px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gp-sidebar > small,
  .gp-side-note {
    display: none !important;
  }

  .gp-scenario {
    flex: 0 0 116px;
    min-height: 72px;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  .gp-workspace {
    padding: 22px 14px !important;
  }

  .gp-table {
    overflow: hidden;
    border-radius: 16px !important;
  }

  .gp-summary {
    gap: 8px !important;
  }

  .gp-summary > div {
    padding: 14px !important;
  }

  .gp-result-banner {
    align-items: flex-start !important;
  }

  /* Fechamento: CTA em tela cheia e rodapé simples. */
  .cta,
  .premium-cta {
    margin: 0 !important;
    padding: 82px var(--mobile-gutter) 88px !important;
    border-radius: 32px 32px 0 0 !important;
    text-align: left !important;
    background:
      radial-gradient(circle at 92% 12%, var(--f-accent-soft), transparent 38%),
      linear-gradient(135deg, #15151d, #20203a) !important;
  }

  .cta h2 {
    margin-inline: 0 !important;
    font-size: clamp(2.1rem, 10vw, 3.15rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }

  .cta .button,
  .cta .actions,
  .cta .actions .button {
    width: 100% !important;
  }

  .cta .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .footer {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 44px var(--mobile-gutter) 36px !important;
    text-align: center;
    background: var(--f-night) !important;
  }

  .footer .logo {
    margin-inline: auto;
  }

  .footer p {
    margin: 0;
    font-size: 0.72rem !important;
  }

  .scroll-progress {
    height: 2px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 16px;
  }

  .page-hero h1,
  body[data-page="inicio"] .hero h1 {
    font-size: 2.45rem !important;
  }

  body[data-page="inicio"] .hero .proof {
    display: none !important;
  }

  .cards.three > .card,
  .feature-grid > .feature,
  .portfolio-grid > .portfolio-item {
    width: 84vw !important;
    min-width: 84vw !important;
  }
}


/* =========================================================
   FANTASTIC — PRODUCTION HARDENING 2026-08
   Última camada: consistência, responsividade e acessibilidade.
   ========================================================= */
html{scroll-behavior:smooth}body{min-width:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.header .logo,.footer .logo{display:flex!important;align-items:center!important;width:auto!important;height:auto!important;overflow:visible!important;background:transparent!important;border:0!important}.header .logo img,.footer .logo img{display:block!important;width:auto!important;height:44px!important;max-width:190px!important;object-fit:contain!important;object-position:left center!important;filter:none!important}.footer .logo img{height:48px!important}h1,h2,h3,p,.lead,.intro,.feature,.card,.project{overflow-wrap:break-word;word-break:normal}.section-head,.page-section>h2,.page-section>.intro{max-width:980px}.card,.feature,.project,.wide-card,.contact-box,.portfolio-item{isolation:isolate}.button,.nav a,.subnav a,.portfolio-filter button{touch-action:manipulation}.feature-kicker{display:inline-block;margin-bottom:18px;color:var(--f-accent);font-size:.68rem;font-weight:900;letter-spacing:.14em}.gaspar-demo-section{background:linear-gradient(180deg,#eff8f3 0%,#f7faf8 100%)!important}.gaspar-story{display:grid;grid-template-columns:minmax(0,.72fr) minmax(560px,1.28fr);gap:clamp(40px,6vw,92px);align-items:center;max-width:var(--f-content);margin:auto}.automation-flow{overflow:hidden;border:1px solid #d7e7de;border-radius:28px;background:#fff;box-shadow:0 30px 80px rgba(22,54,40,.12)}.flow-head,.flow-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px}.flow-head{color:#fff;background:#10251d}.flow-head>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.flow-head strong,.flow-head small{grid-column:2}.flow-head small{margin-top:2px;color:#a9cabb}.status-dot{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#55dda2;box-shadow:0 0 0 6px rgba(85,221,162,.14)}.automation-run{flex:0 0 auto;border-color:#55dda2!important;color:#10251d!important;background:#55dda2!important}.file-drop{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;margin:22px;padding:18px;border:1px dashed #bcd7ca;border-radius:18px;background:#f5faf7}.file-icon{display:grid;grid-row:1/3;width:42px;height:42px;place-items:center;border-radius:13px;color:#fff;background:#258a61;font-size:1.25rem;font-weight:900}.file-drop strong,.file-drop span{display:block}.file-drop>div:nth-child(2)>span{margin-top:3px;color:#64766e;font-size:.8rem}.file-chips{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.file-chips span,.output-files span{display:inline-flex;padding:7px 10px;border:1px solid #dce9e3;border-radius:999px;color:#466157;background:#fff;font-size:.7rem;font-weight:800}.automation-steps{display:grid;gap:0;margin:0;padding:0 22px;list-style:none}.automation-steps li{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:17px 0;border-top:1px solid #e7efeb}.automation-steps b{color:#258a61;font-size:.7rem}.automation-steps strong,.automation-steps span{display:block}.automation-steps span{margin-top:4px;color:#6a7b74;font-size:.77rem;line-height:1.45}.automation-steps em{min-width:86px;color:#87978f;font-size:.68rem;font-style:normal;font-weight:800;text-align:right}.automation-steps li.running em{color:#258a61}.automation-steps li.done em{color:#168653}.automation-steps li.done em::before{content:'✓ ';}.automation-output{margin:18px 22px 22px;padding:18px;border:1px solid #bde5cf;border-radius:18px;background:#effaf4}.automation-output>div:first-child{display:flex;gap:12px;align-items:center}.automation-output>div:first-child>span{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:#fff;background:#22945d;font-weight:900}.automation-output strong,.automation-output small{display:block}.automation-output small{margin-top:3px;color:#5e7469}.output-files{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.flow-foot{border-top:1px solid #e7efeb;color:#687a72;background:#fafcfb;font-size:.72rem}.flow-foot span:first-child{font-weight:800;color:#258a61}
@media (max-width:1000px){.gaspar-story{grid-template-columns:1fr}.gaspar-story>div:first-child{max-width:760px}.automation-flow{width:100%}}
@media (max-width:767px){html{scroll-behavior:auto}.header .logo img{height:34px!important;max-width:142px!important}.footer .logo img{height:42px!important;max-width:176px!important}.nav a:nth-child(1)::before{content:'01'}.nav a:nth-child(2)::before{content:'02'}.nav a:nth-child(3)::before{content:'03'}.nav a:nth-child(4)::before{content:'04'}.nav a:nth-child(5)::before{display:none}.page-hero h1,body[data-page="inicio"] .hero h1{max-width:100%!important}.cards.three,.feature-grid,.portfolio-grid{scroll-snap-stop:always}.gaspar-demo-section{padding-top:82px!important}.gaspar-story{display:block}.automation-flow{margin-top:34px;border-radius:22px}.flow-head{align-items:flex-start;flex-direction:column}.automation-run{width:100%}.file-drop{margin:14px}.automation-steps{padding:0 14px}.automation-steps li{grid-template-columns:30px 1fr;padding:16px 0}.automation-steps em{grid-column:2;min-width:0;margin-top:6px;text-align:left}.automation-output{margin:14px}.flow-foot{align-items:flex-start;flex-direction:column}.wide-card{overflow:hidden}.actions{flex-wrap:wrap}}
@media (max-width:420px){:root{--mobile-gutter:16px}.page-hero h1,body[data-page="inicio"] .hero h1{font-size:clamp(2.25rem,11.7vw,3.2rem)!important}.section h2,.page-section h2,.section-head h2{font-size:clamp(1.9rem,9.5vw,2.7rem)!important}.feature,.project,.card{padding:22px!important}.file-chips span:nth-child(3){display:none}}
@media (hover:none){.card:hover,.feature:hover,.project:hover{transform:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}


/* ===== V3 polish: header, portfolio and stable motion ===== */
.header{
  min-height:108px!important;height:108px!important;
  padding-inline:max(4vw,calc((100vw - var(--f-wide))/2))!important;
  background:linear-gradient(180deg,rgba(8,8,12,.98),rgba(13,13,19,.96))!important;
  border-bottom:1px solid rgba(245,197,80,.16)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(18px) saturate(125%);
}
.header::after{content:"";position:absolute;left:max(4vw,calc((100vw - var(--f-wide))/2));right:max(4vw,calc((100vw - var(--f-wide))/2));bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,197,80,.55),rgba(120,71,255,.45),transparent);pointer-events:none}
.header .logo{width:184px!important;height:96px!important;flex:0 0 184px!important;border-radius:14px!important;overflow:hidden!important;position:relative}
.header .logo img{width:184px!important;height:122px!important;max-width:none!important;object-fit:cover!important;object-position:center 53%!important;transform:scale(1.05);filter:none!important}
.subnav{top:108px!important}
.portfolio-hero .magic-text{display:inline!important;animation:none!important;background-size:100% 100%!important}
.portfolio-hero h1.reveal{transform:none!important}
.portfolio-filter{
  width:min(920px,calc(100% - 40px));margin:0 auto!important;top:108px!important;
  padding:8px!important;gap:6px!important;justify-content:stretch!important;
  border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important;
  background:rgba(15,15,21,.96)!important;box-shadow:0 18px 45px rgba(0,0,0,.18)!important;
}
.portfolio-filter button{
  min-width:0!important;flex:1 1 0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
  gap:3px!important;padding:12px 15px!important;border:1px solid transparent!important;border-radius:14px!important;
  color:rgba(255,255,255,.68)!important;background:transparent!important;text-align:left!important;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease!important;
}
.portfolio-filter button span{font:800 .78rem Inter,sans-serif;letter-spacing:.01em}
.portfolio-filter button small{font:600 .62rem Inter,sans-serif;color:rgba(255,255,255,.36);white-space:nowrap}
.portfolio-filter button:hover{transform:translateY(-1px);color:#fff!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.08)!important}
.portfolio-filter button.active{color:#111!important;background:#fff!important;border-color:#fff!important;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.portfolio-filter button.active small{color:#676772!important}
.tag-row .tag{min-width:max-content}
@media(max-width:767px){
  .header{min-height:82px!important;height:82px!important;padding-inline:18px!important}
  .header .logo{width:132px!important;height:74px!important;flex-basis:132px!important}
  .header .logo img{width:132px!important;height:88px!important;max-width:none!important;object-position:center 54%!important}
  .subnav{top:82px!important}
  .portfolio-filter{top:82px!important;width:calc(100% - 24px)!important;margin:0 12px!important;overflow-x:auto!important;justify-content:flex-start!important;border-radius:16px!important}
  .portfolio-filter button{flex:0 0 auto!important;min-width:132px!important;padding:10px 12px!important}
  .portfolio-filter button small{font-size:.58rem}
}

/* V5 */
.header{min-height:84px!important;height:84px!important;background:rgba(10,10,15,.97)!important;border-bottom:1px solid rgba(255,255,255,.075)!important;box-shadow:0 8px 28px rgba(0,0,0,.18)!important}.header::after{display:none!important}.header .logo{width:158px!important;height:58px!important;flex:0 0 158px!important;padding:0!important;margin:0!important;border-radius:0!important;overflow:hidden!important}.header .logo img{width:158px!important;height:76px!important;max-width:none!important;object-fit:cover!important;object-position:center 53%!important;transform:none!important}.subnav,.portfolio-filter{top:84px!important}.systems-examples{grid-template-columns:repeat(2,minmax(0,1fr))!important}.systems-examples .feature{min-height:245px}.systems-stack{margin-top:34px!important}@media(max-width:767px){.header{min-height:70px!important;height:70px!important;padding-inline:16px!important}.header .logo{width:124px!important;height:48px!important;flex-basis:124px!important}.header .logo img{width:124px!important;height:62px!important}.subnav,.portfolio-filter{top:70px!important}.systems-examples{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important}.systems-examples .feature{width:100%!important;min-width:0!important;min-height:0!important}}



/* ===== BRAND / HERO CLEAN RESET ===== */
/* One source of truth for header, footer, orbit and the portfolio color line. */
.header{
  min-height:86px!important;
  height:86px!important;
  padding:0 clamp(18px,4vw,58px)!important;
  background:#111117!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 8px 26px rgba(0,0,0,.16)!important;
}
.header::after{display:none!important}
.header .logo,.footer .logo{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:66px!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  line-height:1!important;
  text-decoration:none!important;
  transform:none!important;
  transition:opacity .18s ease!important;
}
.header .logo:hover,.footer .logo:hover{opacity:.92!important;transform:none!important;filter:none!important}
.logo .brand-hat{
  display:block!important;
  width:118px!important;
  height:auto!important;
  flex:0 0 auto!important;
  object-fit:contain!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
}
.logo .brand-word{
  display:inline-flex!important;
  align-items:center!important;
  white-space:nowrap!important;
  color:#f5f5f7!important;
  font-family:Manrope,Inter,Arial,sans-serif!important;
  font-size:20px!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
  line-height:1!important;
  text-shadow:0 2px 8px rgba(255,255,255,.12)!important;
}
.logo .brand-word .brand-a{
  position:relative!important;
  color:#f2b91e!important;
  margin-inline:-.01em .01em!important;
}
.logo .brand-word .brand-a::before{
  content:"✦";
  position:absolute;
  left:50%;
  top:-.72em;
  transform:translateX(-50%);
  font-size:.46em;
  color:#ffd45d;
  text-shadow:0 0 9px rgba(255,197,49,.55);
}
.footer .logo{height:auto!important;margin:0!important}
.footer .logo .brand-hat{width:132px!important}
.footer .logo .brand-word{font-size:22px!important}
.subnav,.portfolio-filter{top:86px!important}

/* Orbit uses only the previous/original symbol artwork. */
body[data-page="inicio"] .orbit-core{
  width:132px!important;
  height:132px!important;
  padding:0!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background:#111526!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 0 10px rgba(113,75,246,.04)!important;
}
body[data-page="inicio"] .orbit-core img{
  display:block!important;
  width:92%!important;
  height:92%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  animation:brand-orbit-breathe 3.6s ease-in-out infinite!important;
  transform-origin:center!important;
}
@keyframes brand-orbit-breathe{
  0%,100%{transform:scale(.95) rotate(-1deg)}
  50%{transform:scale(1.03) rotate(1deg)}
}

/* Portfolio: always visible; only the color itself moves. */
.portfolio-hero h1{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}
.portfolio-hero .magic-text{
  display:inline!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background-image:linear-gradient(90deg,#7448ff 0%,#2f76ff 18%,#2bc6ef 34%,#b14cff 50%,#ff4ba8 66%,#ffc83d 82%,#7448ff 100%)!important;
  background-size:260% 100%!important;
  background-position:0% 50%!important;
  background-clip:text!important;
  -webkit-background-clip:text!important;
  animation:magic-color-sweep 2.9s linear infinite!important;
  will-change:background-position!important;
}
@keyframes magic-color-sweep{
  from{background-position:0% 50%}
  to{background-position:260% 50%}
}

@media(max-width:900px){
  .header .logo{gap:6px!important}
  .logo .brand-hat{width:102px!important}
  .logo .brand-word{font-size:17px!important;letter-spacing:.14em!important}
}
@media(max-width:767px){
  .header{height:78px!important;min-height:78px!important;padding:0 12px!important}
  .header .logo{height:62px!important;gap:5px!important}
  .header .logo .brand-hat{width:108px!important}
  .header .logo .brand-word{font-size:17px!important;letter-spacing:.10em!important}
  .footer .logo{justify-content:center!important;margin-inline:auto!important}
  .footer .logo .brand-hat{width:118px!important}
  .footer .logo .brand-word{font-size:19px!important;letter-spacing:.12em!important}
  .subnav,.portfolio-filter{top:78px!important}
  body[data-page="inicio"] .orbit-core{width:116px!important;height:116px!important}
}
@media(max-width:390px){
  .header .logo .brand-hat{width:92px!important}
  .header .logo .brand-word{font-size:15px!important;letter-spacing:.08em!important}
}
@media(prefers-reduced-motion:reduce){
  .portfolio-hero .magic-text{animation:magic-color-sweep 5.5s linear infinite!important}
  body[data-page="inicio"] .orbit-core img{animation:none!important}
}

/* ===== V11 LOGO: supplied artwork, no reconstruction/crop ===== */
.header{height:90px!important;min-height:90px!important;padding:0 clamp(18px,4vw,64px)!important;align-items:center!important;overflow:visible!important}
.header .logo{display:block!important;width:clamp(300px,26vw,420px)!important;height:auto!important;flex:0 0 auto!important;padding:0!important;margin:0!important;line-height:0!important;overflow:visible!important;background:none!important;border:0!important;transform:none!important}
.header .logo:hover{transform:none!important}
.header .logo img{display:block!important;width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important;object-position:center!important;transform:none!important;filter:none!important}
.footer .logo,.site-footer .logo,.footer-logo{display:inline-block!important;width:min(420px,86vw)!important;height:auto!important;padding:0!important;line-height:0!important;overflow:visible!important;transform:none!important}
.footer .logo img,.site-footer .logo img,.footer-logo img{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;transform:none!important;filter:none!important}
.subnav,.portfolio-filter{top:90px!important}
@media(max-width:767px){.header{height:72px!important;min-height:72px!important;padding:0 14px!important}.header .logo{width:220px!important}.subnav,.portfolio-filter{top:72px!important}}


/* ===== V12 — HEADER REFINADO + FORMA E FUNÇÃO ANIMADO NO HTML ===== */
.header{
  height:76px!important;
  min-height:76px!important;
  padding:0 max(4vw,calc((100vw - var(--f-wide))/2))!important;
  display:flex!important;
  align-items:center!important;
  background:
    linear-gradient(180deg,rgba(20,20,27,.97) 0%,rgba(13,13,18,.985) 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overflow:visible!important;
}
.header::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:max(4vw,calc((100vw - var(--f-wide))/2))!important;
  right:max(4vw,calc((100vw - var(--f-wide))/2))!important;
  bottom:-1px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent 0%,rgba(121,67,255,.35) 24%,rgba(244,190,54,.55) 50%,rgba(121,67,255,.32) 76%,transparent 100%)!important;
  pointer-events:none!important;
}
.header .logo{
  width:230px!important;
  height:auto!important;
  flex:0 0 230px!important;
  display:block!important;
  line-height:0!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  border:0!important;
  overflow:visible!important;
  transform:none!important;
}
.header .logo img{
  display:block!important;
  width:230px!important;
  height:auto!important;
  max-width:230px!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
  filter:none!important;
}
.header .logo:hover{transform:none!important;opacity:.94!important}
.nav{align-items:center!important}
.nav a{padding-block:9px!important}
.nav-cta{padding:10px 17px!important;border-radius:999px!important}
.subnav,.portfolio-filter{top:76px!important}

/* A cor agora anima em cada letra REAL do HTML. */
.portfolio-hero .magic-text{
  display:inline-flex!important;
  align-items:baseline!important;
  white-space:nowrap!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  background:none!important;
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.portfolio-hero .magic-letter{
  display:inline-block!important;
  color:#7c4dff!important;
  -webkit-text-fill-color:currentColor!important;
  animation:fantastic-letter-color 3.4s ease-in-out infinite!important;
  will-change:color,text-shadow!important;
}
.portfolio-hero .magic-letter.space{width:.27em!important}
.portfolio-hero .magic-letter:nth-child(1){animation-delay:-0.00s!important}
.portfolio-hero .magic-letter:nth-child(2){animation-delay:-0.18s!important}
.portfolio-hero .magic-letter:nth-child(3){animation-delay:-0.36s!important}
.portfolio-hero .magic-letter:nth-child(4){animation-delay:-0.54s!important}
.portfolio-hero .magic-letter:nth-child(5){animation-delay:-0.72s!important}
.portfolio-hero .magic-letter:nth-child(6){animation-delay:-0.90s!important}
.portfolio-hero .magic-letter:nth-child(7){animation-delay:-1.08s!important}
.portfolio-hero .magic-letter:nth-child(8){animation-delay:-1.26s!important}
.portfolio-hero .magic-letter:nth-child(9){animation-delay:-1.44s!important}
.portfolio-hero .magic-letter:nth-child(10){animation-delay:-1.62s!important}
.portfolio-hero .magic-letter:nth-child(11){animation-delay:-1.80s!important}
.portfolio-hero .magic-letter:nth-child(12){animation-delay:-1.98s!important}
.portfolio-hero .magic-letter:nth-child(13){animation-delay:-2.16s!important}
.portfolio-hero .magic-letter:nth-child(14){animation-delay:-2.34s!important}
@keyframes fantastic-letter-color{
  0%,100%{color:#7648ff;text-shadow:0 0 0 rgba(118,72,255,0)}
  22%{color:#3287ff;text-shadow:0 0 18px rgba(50,135,255,.16)}
  45%{color:#cf48ed;text-shadow:0 0 18px rgba(207,72,237,.16)}
  68%{color:#ff5d9d;text-shadow:0 0 18px rgba(255,93,157,.14)}
  84%{color:#f5bd38;text-shadow:0 0 19px rgba(245,189,56,.18)}
}

@media(max-width:767px){
  .header{height:68px!important;min-height:68px!important;padding:0 14px!important}
  .header::after{left:14px!important;right:14px!important}
  .header .logo{width:185px!important;flex-basis:185px!important}
  .header .logo img{width:185px!important;max-width:185px!important}
  .subnav,.portfolio-filter{top:68px!important}
  .portfolio-hero .magic-text{white-space:normal!important;flex-wrap:wrap!important}
}


/* Identidade própria dos três serviços: ícones diferentes, sem repetir o mesmo quadrado numerado. */
.cards.three .service-card{padding-top:34px!important}
.cards.three .service-card>.service-icon{
  display:flex!important;width:72px!important;height:56px!important;margin:0 0 10px!important;
  align-items:center!important;justify-content:flex-start!important;border-radius:0!important;background:transparent!important;
  color:var(--f-accent)!important;
}
.cards.three .service-card>.service-icon svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cards.three .service-card>.service-number{display:block;margin:0 0 18px;color:var(--f-accent);font:900 .68rem/1 Inter;letter-spacing:.16em}
.cards.three .service-sites>.service-icon svg{width:58px}
.cards.three .service-sistemas>.service-icon svg{width:52px}
.cards.three .service-automacoes>.service-icon svg{width:56px}