/* Demo site polish: artwork, product images, logo, demo label */
.brand-logo { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); font-weight: 800; font-size: 22px; letter-spacing: -1px; color: #fff; font-family: Georgia, "Times New Roman", serif; }

.hero-art { width: 100%; max-width: 640px; aspect-ratio: 16 / 10; margin: 0 auto 28px; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .18); }
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-art.wide { max-width: 900px; aspect-ratio: 16 / 7; }

.art-tile { position: relative; overflow: hidden; padding: 0 !important; display: block !important; color: #fff !important; }
.art-tile .art-svg, .art-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-tile:hover .art-svg { transform: scale(1.05); }
.art-tile .art-svg { transition: transform .6s ease; }
.art-cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 20px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); }

.art-map { position: relative; overflow: hidden; padding: 0 !important; min-height: 240px; }
.map-card { position: relative; height: 240px; border-radius: 18px; overflow: hidden; margin-top: 22px; border: 1px solid var(--border, #ddd); }

.prod-img { position: relative; height: 120px; margin: -1px -1px 14px; border-radius: 14px; overflow: hidden; }
.prod-img .art-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .5s ease; }
.product-card:hover .prod-img .art-svg { transform: scale(1.06); }
.prod-ic { position: absolute; right: 12px; bottom: 10px; width: 50px; height: 50px; border-radius: 14px; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }

.demo-ribbon { position: fixed; left: 12px; bottom: 12px; z-index: 999; padding: 8px 14px; border-radius: 30px; background: rgba(17, 24, 39, .88); color: #fff !important; font: 600 12px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.demo-ribbon b { color: #fcd34d; }

.rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .art-tile .art-svg, .prod-img .art-svg { transition: none; } }