/* ==========================================================================
   NÚCLEO PARCEIRO (NP) — Camada visual moderna · BLOG
   Registo escuro, cinematográfico e tecnológico, construído SOBRE np-brand.css
   (que permanece intacto). Expressa os pilares Tecnologia (azul) e Branding
   (dourado). Carregar sempre DEPOIS de np-brand.css.
   ========================================================================== */

:root {
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --edge: rgba(226, 202, 58, .18);        /* hairline dourada */
  --edge-blue: rgba(127, 180, 222, .22);  /* hairline azul */
  --glow-gold: 0 0 60px rgba(226, 202, 58, .22);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Tipografia com ligeiro refinamento de kerning para leitura de elite */
h1, h2, h3 { text-wrap: balance; }
.article-body p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   1. CABEÇALHO — pílula flutuante em vidro (destacada do topo)
-------------------------------------------------------------------------- */
.np-header {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 28px);
  justify-content: center; z-index: 60; gap: 1.7rem;
  padding: .8rem .8rem .8rem 1.45rem;
  border: 1px solid rgba(226, 202, 58, .26);
  border-radius: 999px;
  background: rgba(12, 18, 30, .64);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
          backdrop-filter: blur(16px) saturate(165%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.np-header.is-scrolled {
  background: rgba(9, 13, 20, .84);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* texto sempre claro sobre a pílula escura */
.np-header .np-brand b { color: #EEF3FA; }
.np-nav a { color: #B7C6DC; }
.np-nav a:hover { color: var(--np-gold-soft); }
/* logótipo real (lockup branco) na pílula */
.np-brand { gap: 0; }
.np-brand img.np-lockup { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .np-brand img.np-lockup { height: 24px; } }

/* CTA dourado no cabeçalho */
.np-nav .np-nav-cta {
  color: var(--np-night); font-weight: 600; font-size: .85rem;
  padding: .5rem 1.05rem; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, var(--np-gold-soft), var(--np-gold));
  box-shadow: 0 6px 18px rgba(226, 202, 58, .24);
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.np-nav .np-nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: var(--np-night); }

/* tema como ícone compacto */
.np-theme-toggle {
  font-size: .95rem; line-height: 1; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #C6D2E2; background: rgba(255, 255, 255, .05); cursor: pointer;
  border: 1px solid rgba(127, 180, 222, .22); border-radius: 999px;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.np-theme-toggle:hover { color: var(--np-gold-soft); border-color: rgba(226, 202, 58, .4);
  background: rgba(226, 202, 58, .08); }

/* Espaço para a pílula fixa não tapar o conteúdo */
main.container { padding-top: clamp(94px, 11vh, 112px); }

/* --------------------------------------------------------------------------
   1b. MENU DE CONTACTO (WhatsApp + Email)
-------------------------------------------------------------------------- */
.np-modal { position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 1.2rem; }
.np-modal.is-open { display: flex; animation: npFade .2s var(--ease); }
.np-modal__backdrop { position: absolute; inset: 0;
  background: rgba(6, 10, 16, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.np-modal__card {
  position: relative; z-index: 1; width: min(430px, 100%);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(49,85,138,.28), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(204,184,3,.16), transparent 55%),
    linear-gradient(160deg, #141f34, #0b1119);
  border: 1px solid var(--edge); border-radius: 20px;
  padding: 1.7rem 1.6rem 1.5rem; color: #EAF1FB;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: npRise .28s var(--ease); }
.np-modal__x { position: absolute; top: .9rem; right: 1rem; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.06); color: #A9B6C8;
  font-size: 1.2rem; line-height: 1; cursor: pointer; transition: all .2s var(--ease); }
.np-modal__x:hover { background: rgba(255,255,255,.12); color: #fff; }
.np-modal__eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--np-gold-soft); margin: 0 0 .5rem; }
.np-modal__title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1;
  color: #F4F8FF; margin: 0 0 .4rem; }
.np-modal__sub { color: #A9B6C8; font-size: .95rem; margin: 0 0 1.3rem; }

.np-choice { display: flex; align-items: center; gap: .95rem; text-decoration: none;
  border: 1px solid rgba(127,180,222,.18); border-radius: 14px; padding: .9rem 1rem;
  margin-bottom: .7rem; color: #EAF1FB; background: rgba(255,255,255,.02);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
.np-choice:last-of-type { margin-bottom: 0; }
/* texto sempre claro (anula a:hover global do np-brand) */
.np-choice, .np-choice:hover, .np-choice:focus, .np-choice:visited { color: #EAF1FB; border-bottom: 0; }
.np-choice b { color: inherit; }
.np-choice:hover { border-color: color-mix(in srgb, var(--np-gold) 60%, transparent);
  background: rgba(226,202,58,.10); transform: translateY(-1px); }
.np-choice:hover .np-choice__t i { color: #C6D2E2; }
.np-choice:focus-visible { outline: 2px solid var(--np-gold); outline-offset: 2px; }
.np-choice__ic { flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; }
.np-choice__ic--wa { background: rgba(37,211,102,.14); color: #25D366; }
.np-choice__ic--mail { background: rgba(127,180,222,.14); color: #7FB4DE; }
.np-choice__t { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.np-choice__t b { font-weight: 600; font-size: 1rem; }
.np-choice__t i { font-style: normal; font-size: .84rem; color: #93A3B8; }
.np-choice__go { color: var(--np-gold-soft); font-size: 1.1rem; transition: transform .2s var(--ease); }
.np-choice:hover .np-choice__go { transform: translateX(3px); }

@keyframes npFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes npRise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .np-modal.is-open, .np-modal__card { animation: none; }
}

@media (max-width: 560px) {
  .np-header { padding-left: 1rem; gap: .5rem; }
  .np-nav { gap: .8rem; }
  .np-nav a:not(.np-nav-cta) { display: none; }   /* em ecrã pequeno fica marca + CTA + tema */
}

/* --------------------------------------------------------------------------
   2. EYEBROW / RÓTULOS TECH — monospace com marcador
-------------------------------------------------------------------------- */
.eyebrow, .cat, .section-label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; letter-spacing: .2em; }
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--np-gold));
}

/* --------------------------------------------------------------------------
   3. HERO CINEMATOGRÁFICO (full-bleed, escuro sempre)
-------------------------------------------------------------------------- */
.np-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 0; padding-top: clamp(30px, 5vh, 56px);   /* a pílula é fixa e flutua por cima */
  background:
    radial-gradient(62% 108% at -4% 42%, rgba(49,85,138,.55) 0%, rgba(34,49,93,.28) 34%, transparent 66%),   /* NÉVOA AZUL — esquerda */
    radial-gradient(60% 104% at 104% 56%, rgba(204,184,3,.36) 0%, rgba(226,202,58,.16) 32%, transparent 62%), /* NÉVOA DOURADA — direita */
    radial-gradient(120% 90% at 50% -12%, #14254733 0%, transparent 56%),
    linear-gradient(162deg, #0C1322 0%, #080B12 74%);
  color: #EAF1FB;
  border-bottom: 1px solid var(--edge);
}
.np-hero .container { position: relative; z-index: 2; }
.np-hero::before {                                /* grelha tecnológica */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(127,180,222,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,180,222,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(110% 100% at 70% 20%, #000 25%, transparent 75%);
          mask-image: radial-gradient(110% 100% at 70% 20%, #000 25%, transparent 75%);
}
.np-hero::after {                                 /* brilho dourado difuso */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 42vw; height: 42vw; right: 6%; top: 8%;
  background: radial-gradient(circle, rgba(226,202,58,.16), transparent 62%);
  filter: blur(10px);
}
.np-hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}
.np-hero__eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--np-gold-soft);
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem;
}
.np-hero__eyebrow::before { content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--np-gold)); }
.np-hero h1 {
  color: #F4F8FF; margin: 0 0 1.2rem; max-width: 16ch;
  font-size: clamp(2.3rem, 1.5rem + 4vw, 4.1rem); line-height: 1.04;
  letter-spacing: -0.02em;
}
.np-hero h1 .alt { color: var(--np-gold-soft); }
.np-hero__lead {
  color: #B7C6DC; max-width: 52ch; font-size: clamp(1.02rem, 1rem + .4vw, 1.22rem);
  line-height: 1.7; margin: 0 0 2rem;
}
.np-hero__cta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.np-hero__cta .np-cta--ghost { color: var(--np-gold-soft);
  border-color: rgba(226,202,58,.4); }
.np-hero__cta .np-cta--ghost:hover { color: #0A0E13;
  background: var(--np-gold-soft); border-color: var(--np-gold-soft); }
.np-hero__meta {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  color: #6E86A8; margin-top: 2.2rem; display: flex; gap: 1.4rem; flex-wrap: wrap;
}
.np-hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.np-hero__meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--np-gold); box-shadow: 0 0 8px var(--np-gold); }

/* Palco da marca (arte à direita) */
.np-hero__stage { position: relative; aspect-ratio: 1/1; width: 100%;
  max-width: 460px; margin-inline: auto; display: grid; place-items: center; }
.np-hero__art { width: 100%; height: 100%; }

@media (max-width: 860px) {
  .np-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .np-hero__stage { max-width: 320px; order: -1; }
  .np-hero h1 { max-width: 20ch; }
}

/* --------------------------------------------------------------------------
   4. ETIQUETAS DE SECÇÃO com índice tech
-------------------------------------------------------------------------- */
.section-label {
  display: flex; align-items: center; gap: .8rem;
  letter-spacing: .18em !important; font-size: .72rem !important;
  border-bottom: 0 !important; padding-bottom: 0 !important;
}
.section-label::before {
  content: attr(data-idx); font-family: var(--font-mono); color: var(--np-gold);
  font-size: .72rem; opacity: .9;
}
.section-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* --------------------------------------------------------------------------
   5. CARTÕES elevados + capas de marca
-------------------------------------------------------------------------- */
.post-card, .feature {
  position: relative; background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, transparent),
                    color-mix(in srgb, var(--surface) 100%, transparent));
  border-color: var(--line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.post-card::after, .feature::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); opacity: 0; transition: opacity .35s;
}
.post-card:hover, .feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--np-gold) 55%, var(--line));
  box-shadow: 0 18px 50px rgba(15, 22, 35, .16), var(--glow-gold);
}
.post-card .cover, .feature-cover { position: relative; overflow: hidden; }
.post-card .cover { aspect-ratio: 16/10; }

/* Capa de marca (fundo tech + linework + símbolo). Fundo em CSS, linework em SVG
   solido/currentColor — sem IDs de gradiente para evitar colisões entre SVGs. */
.npx-cover {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background:
    radial-gradient(130% 120% at 82% 12%, #22386a 0%, transparent 52%),
    radial-gradient(90% 120% at 8% 105%, #16233d 0%, transparent 55%),
    linear-gradient(158deg, #14223c 0%, #0A0E13 78%);
}
.npx-cover::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(127,180,222,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,180,222,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(110% 100% at 75% 15%, #000 20%, transparent 72%);
          mask-image: radial-gradient(110% 100% at 75% 15%, #000 20%, transparent 72%);
}
.npx-cover svg, .npx-cover-lg svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.npx-cover .accent, .npx-cover-lg .accent { color: var(--cvr, #E2CA3A); }
.npx-cover .mk, .npx-cover-lg .mk { opacity: .92; }

/* Capas fotográficas de marca (renders reais) */
.npx-cover-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: 1;
  transition: transform .6s var(--ease); }
.post-card:hover .npx-cover-img, .feature:hover .npx-cover-img { transform: scale(1.045); }

/* barra dourada superior que revela no hover */
.post-card .body { position: relative; }
.post-card .body::before {
  content: ""; position: absolute; top: 0; left: 1.65rem; right: 1.65rem; height: 2px;
  background: linear-gradient(90deg, var(--np-gold), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.post-card:hover .body::before { transform: scaleX(1); }
.post-card h3 { transition: color .25s var(--ease); }
.post-card:hover h3 { color: var(--gold-txt); }

/* Respiração e ritmo dentro dos cartões */
.post-grid { gap: 1.9rem; }
.post-card .body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 1.55rem 1.65rem 1.5rem;
}
.post-card .cat { display: block; margin-bottom: .85rem; letter-spacing: .16em; }
.post-card h3 { margin: 0 0 .8rem; font-size: 1.38rem; line-height: 1.22; letter-spacing: -0.005em; }
.post-card p { margin: 0 0 1.5rem; line-height: 1.68; color: var(--fg-soft); }
.post-card .meta {
  margin-top: auto; padding-top: 1rem; font-size: .78rem;
  border-top: 1px solid var(--line); letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   6. CAPA DE ARTIGO (branded, cinematográfica)
-------------------------------------------------------------------------- */
.npx-cover-lg { position: relative; width: 100%; aspect-ratio: 2/1;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--edge);
  box-shadow: 0 20px 60px rgba(10, 14, 19, .28);
  background:
    radial-gradient(120% 130% at 82% 8%, #23396c 0%, transparent 52%),
    radial-gradient(90% 130% at 6% 108%, #16233d 0%, transparent 55%),
    linear-gradient(155deg, #14223c 0%, #0A0E13 80%); }
.npx-cover-lg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(127,180,222,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,180,222,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(120% 100% at 78% 12%, #000 22%, transparent 74%);
          mask-image: radial-gradient(120% 100% at 78% 12%, #000 22%, transparent 74%); }

/* Cores de acento por categoria (herdadas pelo SVG via currentColor) */
.acc-percecao   { --cvr: #7FB4DE; }
.acc-ativo      { --cvr: #E2CA3A; }
.acc-metodo     { --cvr: #568CC1; }
.acc-autoridade { --cvr: #EBD465; }
.acc-escuta     { --cvr: #7FB4DE; }
.acc-posicao    { --cvr: #CCB803; }
.npx-cover .accent, .npx-cover-lg .accent { color: var(--cvr, #E2CA3A); }

/* --------------------------------------------------------------------------
   7. FAIXA DE CONVITE (mais tech)
-------------------------------------------------------------------------- */
.invite-in { position: relative; overflow: hidden; border: 1px solid var(--edge); }
.invite-in::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(127,180,222,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,180,222,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
          mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
}
.invite-in > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   8. MICROLINHA "código" (assinatura discreta)
-------------------------------------------------------------------------- */
.np-signal {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--fg-faint); display: inline-flex; align-items: center; gap: .55rem;
}
.np-signal::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--np-gold); box-shadow: 0 0 10px var(--np-gold);
  animation: np-pulse 2.6s var(--ease) infinite; }

@keyframes np-pulse { 0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); } }
@keyframes np-drift { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes np-spin  { to { transform: rotate(360deg); } }
@keyframes np-spin-r{ to { transform: rotate(-360deg); } }
@keyframes np-twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* elementos animados do hero (origem definida inline no SVG: 200 200) */
.np-orbit-a { animation: np-spin 46s linear infinite; }
.np-orbit-b { animation: np-spin-r 64s linear infinite; }
.np-mark-float { transform-box: fill-box; transform-origin: center;
  animation: np-drift 5s var(--ease) infinite alternate; }
.np-node { animation: np-twinkle 4s var(--ease) infinite; }
.np-node:nth-of-type(2n) { animation-delay: 1.1s; }
.np-node:nth-of-type(3n) { animation-delay: 2.2s; }

/* --------------------------------------------------------------------------
   9. NÉVOA BICOLOR VIVA — assinatura própria (azul à esquerda, dourada à direita)
   Blobs de luz suaves que derivam e respiram. Não é o bio: é a nossa linguagem.
-------------------------------------------------------------------------- */
.np-fog { position: absolute; inset: -12% -6%; z-index: 0; pointer-events: none; overflow: hidden; }
.np-fog span { position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); will-change: transform; mix-blend-mode: screen; }
.np-fog__blue {
  width: 66vw; height: 66vw; max-width: 900px; max-height: 900px; left: -18vw; top: -16vw;
  background: radial-gradient(circle at 50% 50%, rgba(72,122,182,.92), rgba(49,85,138,.44) 40%, transparent 72%);
  animation: fogBlue 17s var(--ease) infinite alternate;
}
.np-fog__gold {
  width: 58vw; height: 58vw; max-width: 800px; max-height: 800px; right: -16vw; top: 0vw;
  background: radial-gradient(circle at 50% 50%, rgba(224,200,30,.66), rgba(204,184,3,.26) 42%, transparent 70%);
  animation: fogGold 21s var(--ease) infinite alternate;
}
.np-fog__spark {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px; left: 38%; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, rgba(127,180,222,.42), transparent 68%);
  animation: fogSpark 14s var(--ease) infinite alternate;
}
@keyframes fogBlue { from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(5vw,3vw,0) scale(1.14); } }
@keyframes fogGold { from { transform: translate3d(0,0,0) scale(1.04); }
  to { transform: translate3d(-4vw,-2vw,0) scale(1.2); } }
@keyframes fogSpark { from { transform: translate3d(0,0,0) scale(.9); opacity:.5; }
  to { transform: translate3d(-3vw,-4vw,0) scale(1.1); opacity:.9; } }

/* Névoa de topo dos ARTIGOS — bicolor por trás do título, esvai-se antes do corpo.
   Fica atrás do conteúdo (main sobe para z-index:1) e some com máscara vertical. */
body > main { position: relative; z-index: 1; }
.np-topfog {
  position: absolute; top: 0; left: 0; right: 0; height: 660px; z-index: 0;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}
.np-topfog span { position: absolute; display: block; border-radius: 50%;
  filter: blur(72px); will-change: transform; }
.np-topfog .b {
  width: 48vw; height: 48vw; max-width: 680px; max-height: 680px; left: -14vw; top: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(49,85,138,.42), rgba(34,49,93,.14) 46%, transparent 70%);
  animation: fogBlue 18s var(--ease) infinite alternate;
}
.np-topfog .g {
  width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; right: -12vw; top: -8vw;
  background: radial-gradient(circle at 50% 50%, rgba(204,184,3,.38), rgba(226,202,58,.12) 46%, transparent 70%);
  animation: fogGold 22s var(--ease) infinite alternate;
}
/* No tema escuro a névoa de topo pode brilhar mais (screen soma a luz) */
:root[data-theme="dark"] .np-topfog span { mix-blend-mode: screen; }
:root[data-theme="dark"] .np-topfog .b {
  background: radial-gradient(circle at 50% 50%, rgba(72,122,182,.7), rgba(49,85,138,.3) 44%, transparent 72%); }
:root[data-theme="dark"] .np-topfog .g {
  background: radial-gradient(circle at 50% 50%, rgba(224,200,30,.5), rgba(204,184,3,.2) 44%, transparent 70%); }
@media (prefers-reduced-motion: reduce) { .np-topfog span { animation: none; } }

/* Título do hero com fio de luz (branco -> azul claro), acento dourado preservado */
.np-hero h1 {
  background: linear-gradient(176deg, #FFFFFF 6%, #C4DBF2 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.np-hero h1 .alt { -webkit-text-fill-color: var(--np-gold-soft); color: var(--np-gold-soft); }

@media (prefers-reduced-motion: reduce) {
  .np-orbit-a, .np-orbit-b, .np-mark-float, .np-node, .np-signal::before,
  .np-fog span { animation: none; }
}