/* Homepage product scenes. Keep motion within the interface, not the device. */
.hero-section.hero-studio {
    background: radial-gradient(ellipse at 85% 15%, #42464b, transparent 60%), #25292d;
    min-height: 0;
    padding: 0;
}
.hero-section.hero-studio .hero-circle-pattern {
    display: block;
    width: 900px;
    height: 900px;
    opacity: .75;
    pointer-events: none;
}
.hero-section.hero-studio .hero-slide { min-height: 610px; padding: 64px 0 44px; }
.hero-studio .hero-content { align-items: center; }
.hero-studio .hero-content > div { min-width: 0; }
.hero-studio .hero-text { padding-right: 28px; }
.hero-studio .hero-text h1 {
    color: #fff;
    font-size: clamp(32px, 3vw, 43px);
    font-weight: 650;
    line-height: 1.13;
    text-transform: none;
    text-shadow: none;
    letter-spacing: -.035em;
    margin: 0 0 22px;
}
.hero-section.hero-studio .hero-text .hero-eyebrow {
    color: #ff969b;
    font-size: 11px !important;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero-studio .hero-text > p:not(.hero-eyebrow) { color: #d4d7da; font-size: 15px; line-height: 1.75; margin-bottom: 24px; }
.hero-studio .hero-features { margin-bottom: 28px; }
.hero-studio .hero-features li { color: #e5e7e9; font-size: 13px; margin-bottom: 10px; }
.hero-studio .hero-features li i { color: #ff858c; font-size: 14px; }
.hero-studio .hero-btn { min-height: 46px; padding: 12px 22px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.hero-studio .hero-btn.secondary { background: #ffffff05; border: 1px solid #72777d; color: #fff; }
.hero-studio .hero-btn.secondary:hover { border-color: #fff; background: #ffffff12; }
.hero-scene { width: 100%; max-width: 640px; margin: auto; border-radius: 18px; box-shadow: 0 24px 55px #0003; }
.hero-scene svg { width: 100%; height: auto; display: block; border-radius: 18px; font-family: var(--font-ui); font-size: 12px; }
.scene-title { font-size: 25px; font-weight: 650; letter-spacing: -.6px; fill: #272b2f; }
.scene-label { font-size: 12px; font-weight: 600; }
.scene-muted { fill: #6b737a; }
.scene-small { font-size: 9px; letter-spacing: .2px; }
.scene-number { font-size: 26px; font-weight: 650; fill: #292d31; letter-spacing: -.7px; }
.scene-red { fill: #ed1c24; }
.scene-card { fill: #fff; stroke: #e5e7e9; }

.hero-slider .animated { animation-duration: .45s; }
.studio-fade-out { animation: studioFadeOut .45s ease both; }
.studio-fade-in { animation: studioFadeIn .45s ease both; }
.hero-studio .owl-item.active .scene-chart-line { stroke-dasharray: 1; animation: studioDraw 1.7s .25s ease both; }
.hero-studio .owl-item.active .scene-progress { stroke-dasharray: 1; animation: studioDraw 1.5s .55s ease both; }
.hero-studio .owl-item.active .scene-step { animation: studioReveal .6s ease both; }
.hero-studio .owl-item.active .scene-step-one { animation-delay: .15s; }
.hero-studio .owl-item.active .scene-step-two { animation-delay: .55s; }
.hero-studio .owl-item.active .scene-step-three { animation-delay: .95s; }
.hero-studio .owl-item.active .scene-scan { animation: studioScan 1.2s .1s ease both; }
@keyframes studioDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes studioReveal { from { opacity: .2; } to { opacity: 1; } }
@keyframes studioScan { 0% { transform: translateY(-13px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(13px); opacity: 0; } }
@keyframes studioFadeOut { to { opacity: 0; } }
@keyframes studioFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 991px) {
    .hero-section.hero-studio .hero-slide { padding: 42px 0 32px; min-height: 0; }
    .hero-section.hero-studio .hero-text { max-width: 620px; padding: 0; }
    .hero-section.hero-studio .hero-text h1 { font-size: clamp(28px, 4.5vw, 38px) !important; }
    .hero-studio .hero-visual-column { margin-top: 32px; }
    .hero-studio .hero-scene { max-width: 540px; }
    .hero-studio .hero-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; text-align: left; max-width: 560px; margin: 0 auto 24px; }
    .hero-section.hero-studio .hero-features li { justify-content: flex-start; margin: 0; }
}
@media (max-width: 600px) {
    .hero-section.hero-studio .hero-slide { padding-top: 32px; }
    .hero-studio .hero-features { grid-template-columns: 1fr; gap: 8px; }
    .hero-scene, .hero-scene svg { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-studio *, .hero-studio *::before, .hero-studio *::after { animation: none !important; transition: none !important; }
    .hero-studio .scene-chart-line, .hero-studio .scene-progress { stroke-dashoffset: 0; }
    .hero-studio .scene-scan { display: none; }
}