design: move the get-started video to the top of the page

The video opens with the install itself ("docker run ..."), so it is the
whole page's journey — install, connect, first query — not just the
connect panel's. It now sits directly under the page header, above the
fold: watch 70 seconds first, then follow the steps. The connect panel
keeps its written steps and links.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: cevheri

src/components/sections/GetStartedSection.astro

@@ -56,6 +56,18 @@ const copyText = (s: Step) =>
 <div class="mx-auto max-w-6xl">
   <SectionHeader title="Get started in minutes" subtitle="Up and running with three simple steps." />
 
+  <!-- The whole journey in motion, before the steps (click-to-load facade) -->
+  <div class="mb-8 max-w-3xl">
+    <PromoVideo
+      videoId="KazHTclbiSQ"
+      title="Connect Your Own Database in LibreDB Studio"
+      poster="/video/connect-poster.jpg"
+    />
+    <p class="mt-2 text-[13px] leading-relaxed">
+      <span class="sql-com">-- 70s: install → connect your database → first query. the steps below, in motion.</span>
+    </p>
+  </div>
+
   <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
     {
       steps.map((s) => (
@@ -167,18 +179,6 @@ const copyText = (s: Step) =>
       </li>
     </ol>
 
-    <!-- The same flow in motion (click-to-load facade — no third-party bytes until play) -->
-    <div class="mt-6 max-w-2xl">
-      <PromoVideo
-        videoId="KazHTclbiSQ"
-        title="Connect Your Own Database in LibreDB Studio"
-        poster="/video/connect-poster.jpg"
-      />
-      <p class="mt-2 text-[13px] leading-relaxed">
-        <span class="sql-com">-- 70s: the whole flow, from New Connection to first result.</span>
-      </p>
-    </div>
-
     <div class="mt-5 flex flex-wrap gap-4 text-[13px]">
       <a
         href="https://github.com/libredb/libredb-studio/blob/main/docs/SEED_CONNECTIONS.md"