/* AFPM teaser: a small entry point to the AFPM lab for product pages and product sites.
   Pure HTML + SVG + CSS: no script, no external requests. The animation runs only when the
   visitor allows motion; otherwise the SVG is the static fallback (same picture, frozen at the
   moment the retry loop is visible). Copy this file and the markup in teaser.html; set the
   accent with .afpm-teaser--imperium or .afpm-teaser--observatory. */
.afpm-teaser{--t-accent:#58dcf8;--t-amber:#f2a93b;--t-ink:#e8eef7;--t-body:#b8c3d4;--t-muted:#8a98ad;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;
  margin:clamp(36px,6vh,64px) 0 0;padding:clamp(18px,2.4vw,28px);border-radius:16px;border:1px solid rgba(88,160,230,.24);
  background:radial-gradient(90% 120% at 100% 50%,rgba(16,58,110,.45),transparent 65%),rgba(6,13,30,.82);color:var(--t-ink);font-family:inherit}
.afpm-teaser--imperium{--t-accent:#eac557}
.afpm-teaser__kicker{margin:0 0 8px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--t-accent)}
.afpm-teaser__title{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.15;font-weight:500;letter-spacing:-.01em;color:var(--t-ink)}
.afpm-teaser__text{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--t-body)}
.afpm-teaser__note{margin:10px 0 0;font-size:12.5px;color:var(--t-muted)}
.afpm-teaser__cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #f0b246;
  background:linear-gradient(180deg,#f6bd4f,#e9a43a);color:#1b1206;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none}
.afpm-teaser__cta:hover{background:linear-gradient(180deg,#ffc95e,#f2ad42)}
.afpm-teaser__cta:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.afpm-teaser__art{position:relative;margin:0;aspect-ratio:300/200;border-radius:12px;border:1px solid rgba(88,160,230,.2);overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#0b2246,#050c1c)}
.afpm-teaser__art svg{display:block;width:100%;height:100%;max-width:none}
.afpm-teaser__tag{position:absolute;right:10px;top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.at-grid{stroke:rgba(60,110,180,.18);stroke-width:1}
.at-edge{fill:none;stroke:rgba(88,220,248,.5);stroke-width:1.6}
.at-edge--hot{stroke:var(--t-amber)}
.at-node rect{fill:rgba(14,40,80,.92);stroke:#58dcf8;stroke-width:1.4}
.at-node text{fill:#e8f4ff;font:600 11px Inter,system-ui,sans-serif}
.at-node--hot rect{fill:rgba(70,45,8,.95);stroke:var(--t-amber)}
.at-node--hot text{fill:#ffd08a}
.at-badge rect{fill:rgba(40,26,4,.95);stroke:var(--t-amber)}.at-badge text{fill:#ffd08a;font:600 9.5px Inter,system-ui,sans-serif}
.at-pkt,.at-still{fill:#bff3ff}
.at-pkt--hot,.at-still--hot{fill:#ffc867}
.at-pkt{display:none}
.at-cap{fill:none;stroke:var(--t-accent);stroke-width:1.4;stroke-dasharray:3 3}
.at-card rect{fill:rgba(6,14,32,.95);stroke:var(--t-accent)}.at-card text{fill:var(--t-ink);font:600 9.5px Inter,system-ui,sans-serif}.at-card .at-dim{fill:var(--t-muted);font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .at-pkt{display:inline}.at-still{display:none}
  .at-pkt{animation:at-move 3.2s linear infinite;offset-rotate:0deg}
  .at-pkt--a{offset-path:path('M150 44 L80 104')}
  .at-pkt--b{offset-path:path('M150 44 L150 104');animation-delay:.6s}
  .at-pkt--hot{offset-path:path('M150 120 L150 168');animation:at-retry 1.6s ease-in infinite}
  .at-node--hot rect{animation:at-glow 1.6s ease-in-out infinite}
  .at-cap{animation:at-dash 1.2s linear infinite}
  @keyframes at-move{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
  @keyframes at-retry{0%{offset-distance:0%;opacity:0}15%{opacity:1}80%{offset-distance:88%;opacity:1}100%{offset-distance:88%;opacity:0}}
  @keyframes at-glow{50%{stroke-width:2.6}}
  @keyframes at-dash{to{stroke-dashoffset:-12}}
}
@media (max-width:760px){.afpm-teaser{grid-template-columns:1fr}.afpm-teaser__art{order:-1}}