/* Home, Atlas Shield: an isometric line illustration (one inline SVG, no images). Ink lines, white fills, one pale-blue accent on the plate and tags.
   Motion is subtle: three diamonds float +-4px over 6 s and a dot climbs the dashed line every 4 s. Reduce Motion: static. */
.sa { margin: 0 auto 8px; max-width: 1200px; }
.sa-panel { max-width: 520px; margin: 0 auto; padding: 28px 20px 24px; border-radius: 24px; background: var(--field); border: 1px solid var(--line); }
.sv { display: block; width: 100%; height: auto; overflow: visible; }
.sv text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; fill: var(--ink); }
.sv-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.sv-t { font-size: 11px; font-weight: 500; }
.sv-dot { opacity: 0; }
.shield-cap { max-width: 44em; margin: 20px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }
@media (max-width: 767px) { .sa-panel { max-width: none; padding: 20px 8px 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .sv-dia { animation: sv-float 6s ease-in-out infinite; }
  .sv-d2 { animation-delay: -2s; }
  .sv-d3 { animation-delay: -4s; }
  .sv-dot { animation: sv-climb 4s ease-in-out infinite; }
}
@keyframes sv-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes sv-climb { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-226px); } }