/* Keep the product readable: scale the phone, not its surrounding controls. */
.home #main { scroll-margin-top:90px; }
.home .hero-copy { max-width:610px; }
.home .hero h1 { font-size:clamp(44px,4.85vw,70px); letter-spacing:-.055em; }
.home .hero-description { max-width:455px; line-height:1.8; }
.home .hero-buttons { flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
.home .hero-buttons .button { min-height:54px; padding-inline:24px; font-size:13px; gap:16px; }
.home .hero-buttons .text-link { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 17px; border:1px solid var(--q-border); border-radius:12px; font-size:12px; gap:9px; background:var(--q-surface); color:var(--q-text); transition:background .2s,border-color .2s; }
.home .hero-buttons .text-link:hover { background:var(--q-variant); border-color:color-mix(in srgb,var(--q-primary) 35%,var(--q-border)); }
.home .hero-buttons .text-link .icon { width:16px; height:16px; }
.home .browser-note { margin-top:18px; font-size:11px; }
.home .floating-note { display:flex; align-items:center; gap:10px; min-height:42px; max-width:218px; padding:10px 14px; font-size:11px; line-height:16px; }
.home .floating-note .tiny-dot { flex-shrink:0; }
.home .floating-note [data-scene-note] { min-width:0; }
.home .floating-brand>span { white-space:nowrap; }
.home .hero-stage .hero-art { width:100%; margin-inline:0; }
.home .art-orbit:before { display:none; }
.home .art-star { opacity:.65; }
.home .demo-controls { gap:9px; margin-top:12px; }
.home .demo-scenarios { padding:4px; min-width:0; box-shadow:none; background:var(--q-surface); border-color:var(--q-border); }
.home .demo-scenarios button { min-height:40px; padding-inline:12px; font-size:11px; gap:6px; }
.home .demo-scenarios button .icon { width:15px; height:15px; }
.home .motion-toggle { width:50px; height:50px; flex:0 0 50px; border-radius:50%; display:grid; place-items:center; transform:none; }
.home .motion-toggle:hover { transform:none; }
.home .motion-toggle>span { width:18px; height:18px; }
.home .demo-caption { font-size:9px; line-height:16px; margin-top:12px; }
.home .demo-disclaimer { font-size:8px; margin-top:3px; }
.home .features { padding-top:28px; }
.home .features .section-heading { padding-top:28px; border-top:1px solid var(--q-border); }
@media(min-width:701px) and (max-width:1100px) {
 .home .hero { grid-template-columns:1.08fr 1fr; gap:16px; padding-top:30px; padding-bottom:54px; }
 .home .hero-copy { padding-bottom:48px; }
 .home .hero h1 { font-size:clamp(40px,4.85vw,52px); }
 .home .hero-description { font-size:15px; margin-top:26px; }
 .home .hero-stage .hero-art { height:590px; transform:none; }
 .home .hero-stage .device-rig { scale:.93; }
 .home .floating-note { left:-4px; top:5px; font-size:10px; max-width:190px; }
 .home .floating-brand { left:0; bottom:43px; }
 .home .floating-brand img { width:50px; height:50px; border-radius:16px; }
 .home .floating-brand>span { font-size:10px; padding:9px 11px; }
 .home .art-star { font-size:44px; right:0; top:56px; }
 .home .demo-scenarios button { font-size:10px; padding-inline:9px; gap:5px; }
 .home .hero-buttons .button { padding-inline:19px; }
 .home .hero-buttons .text-link { padding-inline:13px; font-size:11px; }
}
@media(max-width:700px) {
 .home .hero { padding-top:36px; padding-bottom:35px; }
 .home .hero h1 { font-size:clamp(37px,7.6vw,54px); }
 .home .hero-buttons { gap:10px; }
 .home .hero-buttons .button { min-height:52px; padding-inline:21px; font-size:12px; }
 .home .hero-buttons .text-link { min-height:52px; padding-inline:13px; font-size:11px; }
 .home .hero-stage .hero-art { margin-top:22px; }
 .home .floating-note { font-size:10px; padding:9px 12px; max-width:205px; }
 .home .demo-controls { gap:8px; }
 .home .demo-scenarios button { padding-inline:9px; font-size:10px; gap:5px; }
 .home .demo-scenarios button .icon { width:14px; height:14px; }
 .home .features .section-heading { padding-top:25px; }
}
@media(max-width:370px) {
 .home .hero h1 { font-size:35px; }
 .home .hero-buttons { display:grid; grid-template-columns:1fr; gap:5px; }
 .home .hero-buttons .button { width:100%; min-height:52px; }
 .home .hero-buttons .text-link { min-height:44px; border-color:transparent; background:transparent; }
 .home .floating-note { font-size:9px; max-width:180px; }
 .home .demo-controls { gap:6px; }
 .home .demo-scenarios button { padding-inline:7px; font-size:9px; gap:4px; }
 .home .motion-toggle { width:50px; height:50px; flex-basis:50px; }
 .home .demo-caption { max-width:230px; margin-inline:auto; }
}
@media(prefers-reduced-motion:reduce) {
 .home .hero-buttons .text-link { transition:none; }
}