/* Four small, independent art directions. Labels retain their existing sizing. */
.hero-tile--raumwerk { --tile-width: clamp(144px, 13vw, 190px); --tile-rotation: 10deg; }
.hero-tile--brand { --tile-width: clamp(145px, 13vw, 188px); --tile-rotation: -12deg; }
.hero-tile--spark { --tile-width: clamp(140px, 12.5vw, 180px); --tile-rotation: 9deg; }
.hero-tile--chat { --tile-width: clamp(190px, 17vw, 242px); --tile-rotation: -7deg; }
.tile-room, .tile-brand, .tile-social, .chat-scene { container-type: inline-size; text-align: left; }

.tile-room { background: #d7cbb4; }
.tile-room > img { object-position: 50% 58%; }
.tile-room::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#251c185c, transparent 45%, #251c1854); }
.tile-room__wordmark { position: absolute; z-index: 1; left: 12%; top: 13%; color: #fff9ea; font: 500 12cqw/.95 Georgia, serif; letter-spacing: -.06em; }
.tile-room__wordmark > span { display: block; margin-top: 7%; font: 500 4.8cqw/1.4 var(--font-sans); letter-spacing: -.02em; }
.tile-room__index { position: absolute; z-index: 1; left: 12%; bottom: 10%; color: #fff9ea; font: 500 4cqw/1 var(--font-sans); letter-spacing: .12em; }

.tile-brand { background: #edd7bd; }
.tile-brand > img { object-fit: cover; object-position: 50% 50%; }

.tile-social { background: #f7e8a8; color: #822f24; }
.tile-social > img { object-fit: cover; }
.tile-social__headline { position: absolute; top: 9%; left: 11%; font: 800 16cqw/.86 "TFA Condensed", Impact, sans-serif; letter-spacing: -.035em; }
.tile-social__signature { position: absolute; left: 12%; bottom: 8%; font: 750 4.5cqw/1 "Avenir Next", Avenir, sans-serif; letter-spacing: .13em; }

.chat-scene { background: #f7f3ff; border-color: #e5d9ff; border-radius: 20%; color: #382651; }
.chat-scene__header { position: absolute; inset: 0 0 auto; height: 27%; display: flex; align-items: center; gap: 5cqw; padding: 0 10%; border-bottom: 1px solid #dfd5ed; font: 700 6.2cqw/1.1 "Avenir Next", Avenir, sans-serif; }
.chat-scene__header small { display: flex; align-items: center; gap: 2cqw; margin-top: 2cqw; font-size: 3.9cqw; font-weight: 500; color: #82748f; }
.chat-scene__header small i { width: 2.2cqw; height: 2.2cqw; background: #64a282; border-radius: 50%; }
.chat-scene__avatar { display: flex; align-items: center; justify-content: center; gap: 2.7cqw; width: 14cqw; height: 14cqw; flex-shrink: 0; border-radius: 5cqw; background: #7c56cc; box-shadow: inset 0 -2cqw 3cqw #59399f35; }
.chat-scene__avatar i { width: 2.3cqw; height: 3.5cqw; border-radius: 2cqw; background: #fff5ef; }
.chat-scene__conversation { position: absolute; inset: 32% 9% 17%; }
.chat-scene__message { position: absolute; max-width: 87%; padding: 6% 8%; font: 500 6cqw/1.32 "Avenir Next", Avenir, sans-serif; letter-spacing: -.015em; }
.chat-scene__message--question { top: 0; right: 0; background: #7854c8; color: #fff; border-radius: 6cqw 6cqw 1.5cqw 6cqw; animation: chat-question 10s ease infinite; }
.chat-scene__message--answer { top: 53%; left: 0; background: #e7dff2; color: #382651; border-radius: 6cqw 6cqw 6cqw 1.5cqw; animation: chat-answer 10s ease infinite; }
.chat-scene__typing { position: absolute; top: 55%; left: 0; display: flex; align-items: center; gap: 2cqw; padding: 5cqw 6cqw; border-radius: 6cqw 6cqw 6cqw 1.5cqw; background: #e7dff2; animation: chat-typing 10s ease infinite; }
.chat-scene__typing i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #9878c5; animation: chat-dot .9s ease-in-out infinite alternate; }
.chat-scene__typing i:nth-child(2) { animation-delay: .15s; }
.chat-scene__typing i:nth-child(3) { animation-delay: .3s; }
.chat-scene__input { position: absolute; inset: auto 10% 6%; display: flex; align-items: center; justify-content: space-between; padding: 3% 5%; border: 1px solid #e6ddee; border-radius: 5cqw; color: #a194b0; font: 400 4.5cqw/1 var(--font-sans); }
.chat-scene__input > span { color: #8868b5; letter-spacing: .1em; }
.chat-scene.is-chat-paused * { animation-play-state: paused; }
@keyframes chat-question { 0%, 5% { opacity: 0; transform: translateY(7cqw) scale(.94); } 13%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-3cqw); } }
@keyframes chat-typing { 0%, 21% { opacity: 0; transform: translateY(3cqw); } 27%, 40% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: none; } }
@keyframes chat-answer { 0%, 43% { opacity: 0; transform: translateY(6cqw) scale(.95); } 51%, 89% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-3cqw); } }
@keyframes chat-dot { to { transform: translateY(-1.8cqw); opacity: .45; } }

@media (max-width: 960px) {
  .hero-tile--raumwerk { --tile-width: 128px; }
  .hero-tile--brand, .hero-tile--spark { --tile-width: 128px; }
  .hero-tile--chat { --tile-width: 180px; }
}
@media (max-width: 600px) {
  .hero-tile--raumwerk { --tile-width: 112px; }
  .hero-tile--brand, .hero-tile--spark { --tile-width: 112px; }
  .hero-tile--chat { --tile-width: 156px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-scene * { animation: none !important; }
  .chat-scene__typing { display: none; }
  .chat-scene__message { opacity: 1; transform: none; }
}