:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
.teaser { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: #0a1718; }
.backdrop, .veil { position: absolute; inset: 0; z-index: -2; }
.scene { position: absolute; inset: 0; background-position: center; background-size: cover; filter: brightness(1.22) contrast(1.06); opacity: 0; transition: opacity 1.2s ease; }
.scene-active { opacity: 1; }
.veil { z-index: -1; background: linear-gradient(90deg, rgba(4,19,19,.14), rgba(4,19,19,.08) 49%, rgba(4,19,19,.14)), linear-gradient(0deg, rgba(0,9,10,.28), transparent 26%, transparent 78%, rgba(0,9,10,.1)); }
.brand { margin: 0; padding: 1.5rem; }
.brand img { display: block; width: clamp(250px,34vw,515px); height: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.65)); }
.status { position: absolute; right: clamp(1.4rem,4.5vw,4.5rem); bottom: clamp(1.4rem,3.5vw,3rem); margin: 0; color: rgba(255,255,255,.58); font: 400 .86rem/1.4 Arial, Helvetica, sans-serif; letter-spacing: .015em; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
@media (max-width: 640px) {
  .scene { background-position: 60% center; }
  .brand img { width: min(72vw,370px); }
  .status { right: 1.5rem; left: 1.5rem; bottom: 1.7rem; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
}