/* Illustrations and motion for the public landing. All content remains readable without JS. */
.hero-art { position: relative; overflow: hidden; min-width: 0; background: radial-gradient(ellipse at 52% 48%, #303b30 0, #1c2420 45%, #121916 85%); color: #ecefe1; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(#e5efbd09 1px, transparent 1px), linear-gradient(90deg,#e5efbd09 1px,transparent 1px); background-size: 70px 70px; mask-image: radial-gradient(ellipse,black,transparent 85%); }
.art-top, .art-bottom { position: absolute; z-index: 2; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; letter-spacing: .1em; }
.art-top { top: 22px; }
.art-bottom { bottom: 25px; border-top: 1px solid #b1bd9633; padding-top: 18px; color: #cad1bc; font-size: 13px; letter-spacing: .01em; }
.art-bottom .icon-arrow { width: 15px; height: 15px; margin-inline: 3px; transform: rotate(45deg); }
.art-cross { font-size: 24px; font-weight: 400; }
.voice-scene { position: absolute; inset: 0; }
.voice-scene canvas { position: absolute; width: 100%; height: 100%; display: block; }
.signal-fallback { position: absolute; inset: 12% 5%; background: url("./version-2-signal.svg") center / contain no-repeat; }
.voice-scene[data-ready="true"] .signal-fallback { display: none; }
.outcome-art { height: 190px; position: relative; margin: 12px 0 24px; perspective: 700px; }
.bars-art { display: flex; justify-content: center; align-items: flex-end; gap: 13px; padding-bottom: 24px; transform: rotate(-7deg); }
.bars-art i { width: 37px; height: 48px; background: linear-gradient(100deg,#858d3e,#e2ed96 55%,#b1bc59); box-shadow: 8px 8px 0 #818843, 15px 18px 22px #636d4029; position: relative; transform: skewY(-14deg); border: 1px solid #c7d374; }
.bars-art i:nth-child(2) { height: 75px; }
.bars-art i:nth-child(3) { height: 105px; }
.bars-art i:nth-child(4) { height: 143px; }
.bars-art i::before { content: ''; position: absolute; top: -8px; left: 0; width: 100%; height: 8px; background: #e8f0b1; transform-origin: bottom; transform: skewX(45deg); }
.orbit-line { position: absolute; width: 200px; height: 140px; border: 1px solid #7f884652; border-radius: 50%; transform: rotate(-32deg); bottom: 18px; z-index: -1; }
.checklist-art { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; transform: rotate(-9deg) rotateY(-12deg); }
.checklist-art > div { width: 205px; height: 42px; display: flex; gap: 18px; align-items: center; padding: 0 15px; border: 1px solid #fafbf5; background: linear-gradient(120deg,#f3f5e8f0,#cdd1c3); box-shadow: 5px 7px 0 #b5bbab, 8px 16px 24px #27312612; }
.checklist-art span { width: 20px; height: 20px; border-radius: 50%; text-align: center; font-size: 13px; line-height: 20px; background: #9aa981; color: #1e3020; }
.checklist-art i { width: 118px; height: 5px; background: #a8b19a; border-radius: 8px; }
.checklist-art > :last-child { transform: translateX(12px); background: #e6ebb7; }
.checklist-art > :last-child span { background: #cfac62; }
.shield-art { display: flex; align-items: center; justify-content: center; transform: rotate(-9deg); }
.shield-front, .shield-back { position: absolute; width: 126px; height: 146px; clip-path: polygon(50% 0,100% 18%,94% 68%,80% 87%,50% 100%,20% 87%,6% 68%,0 18%); }
.shield-back { transform: translate(12px,10px); background: #58614b; }
.shield-front { display: grid; place-items: center; border-top: 1px solid #fcffcc; background: linear-gradient(120deg,#f1f6c2 0,#9ca97b 38%,#c2d394 50%,#6a8050 100%); }
.shield-front .icon-arrow { width: 60px; height: 60px; }
.shield-front span { font-size: 64px; transform: rotate(9deg); color: #354632; text-shadow: 1px 1px #f2f7cf; }
.shield-art > i { width: 220px; height: 65px; border: 1px solid #9eaf7777; border-radius: 50%; transform: rotate(-30deg); z-index: 1; }
.voice-track { height: 56px; margin-top: 24px; display: flex; gap: 3px; align-items: center; overflow: hidden; border-block: 1px solid #dde0d1; }
.voice-track i { flex: 1; min-width: 1px; height: 100%; transform: scaleY(var(--bar)); background: #a7b688; border-radius: 2px; }
.voice-track i:nth-child(n+25):nth-child(-n+39) { background: #526f40; }
.reveal-enter { animation: reveal-in .85s var(--ease) both; }
.analysis-copy.reveal-enter, .pilot-card.reveal-enter { animation-name: reveal-fade; }
.outcome:nth-child(2).reveal-enter { animation-delay: .1s; }
.outcome:nth-child(3).reveal-enter { animation-delay: .2s; }
.demo-panel.panel-enter { animation: panel-in .4s var(--ease) both; }
@keyframes reveal-in { from { opacity: .25; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-fade { from { opacity: .25; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: .35; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1050px) { .outcome-art { height: 160px; } .bars-art { scale: .9; } .checklist-art { scale: .87; } .shield-art { scale: .9; } }
@media (max-width: 760px) {
    .hero-art { height: 470px; }
    .art-top, .art-bottom { left: 22px; right: 22px; }
    .outcome-art { height: 170px; margin-block: 18px 26px; }
    .bars-art, .checklist-art, .shield-art { scale: 1; }
}