Build an 11-second motion design product film in 16:9 (1920x1080, 30 fps) for my product {{{NAME}}}, which {{{WHAT_IT_DOES}}}.
Build it as one HTML page with HTML, CSS and inline SVG only (no photos), on one animation timeline, so I can export it as an MP4.

Look: a warm map seen from above. Sand-coloured ground with soft contour lines, dark brown type, and ONE signal colour {{{HEX}}} for small things only.

Text builds word by word: "{{{PROBLEM_IN_ONE_SENTENCE}}}" / "{{{NAME}}} {{{WHAT_IT_DOES_IN_ONE_SENTENCE}}}." / "{{{CLAIM}}}."
Scene 1: low, angled view of the map while the problem appears.
Scene 2: the camera rises to a top view in the same place. Areas light up one after another.
Scene 3: one camera move to a second place. A dark panel shows the result: {{{RESULT}}}.
Scene 4: one area turns into the logo. Name and claim appear.

Rules: only one camera travel in the whole film. Words grow up from their baseline. Nothing moves linearly.