.brand img{width:34px;height:34px;object-fit:cover;border-radius:8px;box-shadow:0 0 24px #4f7cff38}

/* The hero uses a purpose-built, transparent dimensional construction of the
   approved mark. Header and footer retain the canonical raster asset. */
.artifact-symbol {
  position: relative;
  z-index: 2;
  width: 73%;
  height: 78%;
  overflow: visible;
  transform: rotateY(-12deg) rotateX(5deg);
  animation: symbol-float 8s ease-in-out infinite;
}

.symbol-edge { fill: url(#edge); stroke: #5477c2; stroke-width: 1; }
.symbol-face { stroke: #b9cbff; stroke-width: 1.25; stroke-linejoin: round; }
.symbol-face-a { fill: url(#face-a); }
.symbol-face-b { fill: url(#face-b); }
.symbol-highlight { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .5; }

@keyframes symbol-float {
  0%, 100% { transform: rotateY(-12deg) rotateX(5deg) translateY(0); }
  50% { transform: rotateY(-7deg) rotateX(2deg) translateY(-16px); }
}

@media (max-width: 760px) {
  .hero { padding-top: 108px; }
  h1 { font-size: clamp(3.8rem,17vw,5.2rem); }
  .artifact { width: 250px; margin: 12px auto 0; justify-self: center; opacity: 1; }
  .artifact-symbol { width: 75%; height: 82%; }
  .artifact-glow { width: 65%; height: 65%; filter: blur(45px); }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-symbol { animation: none; }
}