/* Avatar in the hero; interactive examples live in their own section below. */
.marketing .hero { min-height: 570px; padding-block: 48px 64px; }
.hero-avatar { --tile-size: clamp(260px,24vw,400px); --tile-depth: 14px; display: grid; place-items: center; padding: 50px 35px; min-width: 0; perspective: 1200px; perspective-origin: 50% 45%; }
.hero-tile { position: relative; width: var(--tile-size); height: var(--tile-size); transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-24deg) rotateZ(-3deg); animation: sunset-tile-turn 24s linear infinite; }
.hero-tile-grip { width: var(--tile-size); height: var(--tile-size); transform-style: preserve-3d; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 14px; }
.hero-tile-grip.is-dragging { cursor: grabbing; }
.hero-tile-grip img { -webkit-user-drag: none; user-select: none; }
.tile-face { position: absolute; inset: 0; border-radius: 14px; background: #29202b; backface-visibility: hidden; overflow: hidden; border: 0; }
.tile-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; animation: none; }
.tile-face-front { transform: translateZ(calc(var(--tile-depth)/2)); }
.tile-face-back { transform: rotateY(180deg) translateZ(calc(var(--tile-depth)/2)); }
/* Side wall follows the same rounded perimeter as the front/back, including corners. */
.tile-edge { position: absolute; left: var(--rim-x); top: var(--rim-y); width: var(--rim-width); height: var(--tile-depth); backface-visibility: hidden; background: var(--rim-color,#3b2935); border: 0; border-radius: 0; transform: translate(-50%,-50%) rotateZ(var(--rim-angle)) rotateX(90deg); }
@keyframes sunset-tile-turn { from { transform: rotateX(-10deg) rotateY(-24deg) rotateZ(-3deg); } to { transform: rotateX(-10deg) rotateY(336deg) rotateZ(-3deg); } }
.demo-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 75px; padding-block: 10px 70px; }
.demo-intro h2 { font-size: clamp(30px,3vw,42px); font-weight: 600; line-height: 1.2; letter-spacing: -1px; margin: 0 0 22px; max-width: 550px; }
.demo-intro p { font-size: 18px; color: #aaaab8; line-height: 1.8; margin: 0 0 28px; max-width: 530px; }
.marketing .demo-section .product-preview { width: 100%; max-width: 780px; justify-self: end; }
.marketing .faq-section { padding-bottom: 40px; }
@media(max-width:800px) { .marketing .hero { min-height: 0; padding-block: 36px 45px; gap: 20px; } .hero-avatar { --tile-size: min(280px,70vw); --tile-depth: 10px; padding: 35px 20px; } .demo-section { grid-template-columns: 1fr; gap: 28px; padding-bottom: 45px; } .demo-intro p { font-size: 17px; } .marketing .demo-section .product-preview { justify-self: center; max-width: 540px; } }
@media(prefers-reduced-motion:reduce) { .hero-tile { animation: none; } }