히어로 영상 full-bleed 배경 전환 (vidraft 패턴)

- 박스 임베드(.hero-video) → 전체 배경(.hero-bg) 재설계
- .hero: full-bleed (100vw, calc(50% - 50vw) 네거티브 마진, nav 아래까지 차오름)
- .hero-bg: position absolute, video object-fit cover로 섹션 전체 채움
- .hero-overlay: 듀얼 그라데이션(상하 다크 + 중앙 라디얼) — 텍스트 가독성
- .hero-content z-index 2 래퍼, max-width 820px
- h1/p 텍스트 그림자 추가 (영상 위 대비)
- 모바일 오버라이드: margin-top -180px, padding-top 220px, min-height 640px
- min-height 760px (데스크탑) / 640px (모바일)

index.html

@@ -165,8 +165,49 @@
 
         /* ============ HERO ============ */
         .hero {
+            position: relative;
+            margin: -110px calc(50% - 50vw) 0;
+            width: 100vw;
+            padding: 160px 24px 100px;
+            min-height: 760px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
             text-align: center;
-            padding: 60px 0 40px;
+            overflow: hidden;
+        }
+        .hero-bg {
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+            overflow: hidden;
+            background: var(--bg-deep);
+        }
+        .hero-bg video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+        .hero-overlay {
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            background:
+                linear-gradient(180deg,
+                    rgba(11, 20, 55, 0.55) 0%,
+                    rgba(11, 20, 55, 0.40) 40%,
+                    rgba(11, 20, 55, 0.85) 92%,
+                    var(--bg-deep) 100%),
+                radial-gradient(ellipse at center, transparent 0%, rgba(11, 20, 55, 0.45) 100%);
+            pointer-events: none;
+        }
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            max-width: 820px;
+            width: 100%;
         }
         .hero-badge {
             display: inline-flex;
@@ -188,6 +229,7 @@
             line-height: 1.15;
             letter-spacing: -1.5px;
             margin-bottom: 20px;
+            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.50);
         }
         .hero h1 .accent {
             background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 50%, #A78BFA 100%);
@@ -201,35 +243,7 @@
             max-width: 720px;
             margin: 0 auto 36px;
             line-height: 1.7;
-        }
-        .hero-video {
-            position: relative;
-            max-width: 960px;
-            margin: 0 auto 44px;
-            aspect-ratio: 16 / 9;
-            border-radius: 22px;
-            overflow: hidden;
-            background: var(--bg-mid);
-            border: 1px solid var(--border);
-            box-shadow:
-                0 24px 70px rgba(0, 217, 255, 0.14),
-                0 0 0 1px rgba(167, 139, 250, 0.22),
-                inset 0 0 0 1px rgba(255, 255, 255, 0.04);
-        }
-        .hero-video video {
-            width: 100%;
-            height: 100%;
-            display: block;
-            object-fit: cover;
-        }
-        .hero-video::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: 22px;
-            background: linear-gradient(135deg, rgba(0, 217, 255, 0.05) 0%, transparent 45%, rgba(167, 139, 250, 0.06) 100%);
-            pointer-events: none;
-            mix-blend-mode: screen;
+            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
         }
         .hero-stats {
             display: grid;
@@ -676,6 +690,7 @@
             .nav-left { flex-direction: column; gap: 10px; width: 100%; }
             .tabs { flex-wrap: wrap; justify-content: center; }
             .container { padding-top: 180px; }
+            .hero { margin-top: -180px; padding: 220px 20px 60px; min-height: 640px; }
             .pricing-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
             .pricing-row.head { display: none; }
             .pricing-row .price { font-size: 20px; }
@@ -718,18 +733,19 @@
         <!-- ============ HOME ============ -->
         <div id="home" class="tab-content active">
             <section class="hero">
+                <div class="hero-bg" aria-hidden="true">
+                    <video autoplay muted loop playsinline preload="auto" poster="logo-stacked.png">
+                        <source src="hero-v1.mp4" type="video/mp4">
+                    </video>
+                    <div class="hero-overlay"></div>
+                </div>
+                <div class="hero-content">
                 <div class="hero-badge">⚡ 2026.04 — 과기정통부·NIA + NIPA 동시 공인</div>
                 <h1>AI 전환의 모든 순간을,<br><span class="accent">한국어로.</span></h1>
                 <p>
                     진단(<strong>AX 종합병원</strong>) · 시뮬레이션(<strong>인공사회</strong>) · 생성(<strong>허그와트 바나나</strong>).<br>
                     한국 기업·정부·시민의 AI 전환을 떠받치는 세 개의 기둥.
                 </p>
-                <div class="hero-video" aria-label="GiniGen AI 히어로 영상">
-                    <video autoplay muted loop playsinline preload="auto" poster="logo-stacked.png">
-                        <source src="hero-v1.mp4" type="video/mp4">
-                        브라우저가 이 영상을 지원하지 않습니다.
-                    </video>
-                </div>
                 <div class="hero-stats">
                     <div class="hero-stat">
                         <div class="num">2위·5위</div>
@@ -744,6 +760,7 @@
                         <div class="label">HuggingFace 월간 활성 사용자</div>
                     </div>
                 </div>
+                </div><!-- /.hero-content -->
             </section>
 
             <!-- 3 PILLARS -->