PageSourceSearch

https://video-generator.ai/

html video-generator.ai collected 2026-10-02 17:47:46 UTC 368,681 bytes, 8,996 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <!-- ═══════════════════════════════════════════
6       META — CORE
7  ═══════════════════════════════════════════ -->
8  <meta charset="UTF-8" />
9  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
11
12  <!-- ═══════════════════════════════════════════
13       SEO
14  ═══════════════════════════════════════════ -->
15  <title>Free AI Video Generator - No Sign Up,Unlimited & Uncensored</title>
16  <meta name="description" content="Pixwith AI - Free AI video generator with no restrictions,no limits,and uncensored creation.Turn text,image into high-quality videos online instantly." />
17  <meta name="keywords" content="AI video generator free online" />
18  <meta name="author" content="video-generator.ai" />
19  <meta name="robots" content="index, follow" />
20  <link rel="canonical" href="https://video-generator.ai/" />
21  <link rel="alternate" hreflang="en" href="https://video-generator.ai/" />
22  <link rel="alternate" hreflang="es" href="https://video-generator.ai/es/" />
23  <link rel="alternate" hreflang="fr" href="https://video-generator.ai/fr/" />
24  <link rel="alternate" hreflang="de" href="https://video-generator.ai/de/" />
25  <link rel="alternate" hreflang="ja" href="https://video-generator.ai/ja/" />
26  <link rel="alternate" hreflang="hi" href="https://video-generator.ai/hi/" />
27  <link rel="alternate" hreflang="ru" href="https://video-generator.ai/ru/" />
28  <link rel="alternate" hreflang="ar" href="https://video-generator.ai/ar/" />
29  <link rel="alternate" hreflang="zh" href="https://video-generator.ai/zh/" />
30  <link rel="alternate" hreflang="pt" href="https://video-generator.ai/pt/" />
31  <link rel="alternate" hreflang="x-default" href="https://video-generator.ai/" />
32
33  <!-- ═══════════════════════════════════════════
34       OPEN GRAPH
35  ═══════════════════════════════════════════ -->
36  <meta property="og:type" content="website" />
37  <meta property="og:url" content="https://video-generator.ai/" />
38  <meta property="og:title" content="AI Video Generator — Turn Ideas Into Motion" />
39  <meta property="og:description" content="Generate videos from text or images using multiple AI models. Fast, flexible, creator-ready." />
40  <meta property="og:image" content="https://video-generator.ai/og-image.jpg" />
41  <meta property="og:site_name" content="video-generator.ai" />
42
43  <!-- ═══════════════════════════════════════════
44       TWITTER / X CARD
45  ═══════════════════════════════════════════ -->
46  <meta name="twitter:card" content="summary_large_image" />
47  <meta name="twitter:site" content="@videogeneratorai" />
48  <meta name="twitter:title" content="AI Video Generator — Turn Ideas Into Motion" />
49  <meta name="twitter:description" content="Generate videos from text or images using multiple AI models. Fast, flexible, creator-ready." />
50  <meta name="twitter:image" content="https://video-generator.ai/og-image.jpg" />
51
52  <!-- ═══════════════════════════════════════════
53       FAVICON
54  ═══════════════════════════════════════════ -->
55  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
56  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
57  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
58  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
59  <link rel="manifest" href="/site.webmanifest" />
60  <meta name="theme-color" content="#0a0a0a" />
61
62  <!-- ═══════════════════════════════════════════
63       FONTS — Google Fonts
64       Display : Bebas Neue  (cinematic, bold headers)
65       Body    : DM Sans     (clean, modern reading)
66       Mono    : JetBrains Mono (tech / code accents)
67  ═══════════════════════════════════════════ -->
68  
69  
70  <link rel="preconnect" href="https://ipapi.co" />
71  <style type="text/css">@font-face {font-family:'Bebas Neue';font-style:normal;font-weight:400;src:url(/cf-fonts/s/bebas-neue/5.2.7/latin-ext/400/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'Bebas Neue';font-style:normal;font-weight:400;src:url(/cf-fonts/s/bebas-neue/5.2.7/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:300;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:300;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:400;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:400;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:500;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:500;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:600;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:600;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/greek/wght/normal.woff2);
71unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/greek/wght/normal.woff2);unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}</style>
72
73  <!-- ═══════════════════════════════════════════
74       ANALYTICS — Google Tag Manager
75       gtag.js itself is ~159 KiB of general-purpose library code (mostly
76       unused on any single page), so instead of fetching it eagerly we
77       queue the config calls immediately (cheap, no network) and only
78       fetch the real script on first user interaction — or after a short
79       fallback timeout so non-interacting visitors are still tracked
80       before they'd typically navigate away.
81  ═══════════════════════════════════════════ -->
82  
82<script type="6c18279ba6d93a40249c492f-text/javascript">
83    
vendor: 141 bytes, lines 83-86
83window.dataLayer = window.dataLayer || [];
84    function gtag(){ dataLayer.push(arguments); }
85    gtag('js', new Date());
86    gtag('config', '
86G-9G3M9D2K5W
vendor: 9 bytes, lines 86-88
86');
87
88    
88(function () {
89      let loaded = false;
90      function loadGTM() {
91        if (loaded) return;
92        loaded = true;
93        const s = document.createElement('script');
94        s.async = true;
95        s.src = 'https://www.googletagmanager.com/gtag/js?id=G-9G3M9D2K5W';
96        document.head.appendChild(s);
97      }
98      ['scroll', 'mousemove', 'keydown', 'touchstart', 'click'].forEach(ev =>
99        window.addEventListener(ev, loadGTM, { passive: true, once: true })
100      );
101      setTimeout(loadGTM, 5000);
102    })();
103  </script>
103
104
105  <!-- ═══════════════════════════════════════════
106       BASE STYLES — Design Tokens + Reset
107  ═══════════════════════════════════════════ -->
108  <style>
109
110    /* ─────────────────────────────────────────
111       DESIGN TOKENS (CSS Variables)
112    ───────────────────────────────────────── */
113    :root {
114      /* Palette */
115      --c-bg:           #0a0a0a;
116      --c-bg-2:         #111111;
117      --c-bg-3:         #1a1a1a;
118      --c-surface:      #1e1e1e;
119      --c-border:       rgba(255, 255, 255, 0.08);
120      --c-border-hi:    rgba(255, 255, 255, 0.18);
121
122      --c-text:         #f0f0f0;
123      --c-text-muted:   #888888;
124      --c-text-dim:     #868686;
125
126      --c-accent:       #d4ff00;     /* electric lime — primary CTA */
127      --c-accent-2:     #ff4d00;     /* burnt orange — secondary */
128      --c-accent-3:     #00c2ff;     /* cyan — tertiary / info */
129
130      --c-white:        #ffffff;
131      --c-black:        #000000;
132
133      /* Typography */
134      --font-display:   'Bebas Neue', sans-serif;
135      --font-body:      'DM Sans', sans-serif;
136      --font-mono:      'JetBrains Mono', monospace;
137
138      /* Type Scale */
139      --text-xs:        0.75rem;
140      --text-sm:        0.875rem;
141      --text-base:      1rem;
142      --text-lg:        1.125rem;
143      --text-xl:        1.25rem;
144      --text-2xl:       1.5rem;
145      --text-3xl:       2rem;
146      --text-4xl:       3rem;
147      --text-5xl:       4.5rem;
148      --text-6xl:       7rem;
149      --text-7xl:       10rem;
150
151      /* Spacing */
152      --space-1:        0.25rem;
153      --space-2:        0.5rem;
154      --space-3:        0.75rem;
155      --space-4:        1rem;
156      --space-6:        1.5rem;
157      --space-8:        2rem;
158      --space-12:       3rem;
159      --space-16:       4rem;
160      --space-24:       6rem;
161      --space-32:       8rem;
162
163      /* Layout */
164      --max-w:          1280px;
165      --max-w-tight:    960px;
166      --gutter:         clamp(1.5rem, 4vw, 3rem);
167      --section-pad:    clamp(5rem, 10vw, 9rem);
168
169      /* Border Radius */
170      --r-sm:           4px;
171      --r-md:           8px;
172      --r-lg:           16px;
173      --r-xl:           24px;
174      --r-full:         9999px;
175
176      /* Shadows */
177      --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
178      --shadow-md:      0 4px 20px rgba(0,0,0,0.6);
179      --shadow-lg:      0 8px 40px rgba(0,0,0,0.8);
180      --shadow-glow:    0 0 40px rgba(212, 255, 0, 0.25);
181      --shadow-glow-2:  0 0 60px rgba(255, 77, 0, 0.2);
182
183      /* Motion */
184      --ease:           cubic-bezier(0.16, 1, 0.3, 1);
185      --ease-in:        cubic-bezier(0.4, 0, 1, 1);
186      --ease-out:       cubic-bezier(0, 0, 0.2, 1);
187      --t-fast:         150ms;
188      --t-base:         250ms;
189      --t-slow:         450ms;
190      --t-xl:           800ms;
191
192      /* Z-index layers */
193      --z-base:         1;
194      --z-above:        10;
195      --z-nav:          100;
196      --z-overlay:      200;
197      --z-modal:        300;
198      --z-toast:        400;
199    }
200
201    /* ─────────────────────────────────────────
202       RESET
203    ───────────────────────────────────────── */
204    *, *::before, *::after {
205      box-sizing: border-box;
206      margin: 0;
207      padding: 0;
208    }
209
210    html {
211      font-size: 16px;
212      scroll-behavior: smooth;
213      -webkit-text-size-adjust: 100%;
214      text-rendering: optimizeLegibility;
215      -webkit-font-smoothing: antialiased;
216      -moz-osx-font-smoothing: grayscale;
217    }
218
219    body {
220      background-color: var(--c-bg);
221      color: var(--c-text);
222      font-family: var(--font-body);
223      font-size: var(--text-base);
224      font-weight: 400;
225      line-height: 1.65;
226      overflow-x: hidden;
227      min-height: 100vh;
228    }
229
230    /* Text selection */
231    ::selection {
232      background: var(--c-accent);
233      color: var(--c-black);
234    }
235
236    /* Scrollbar */
237    ::-webkit-scrollbar            { width: 5px; }
238    ::-webkit-scrollbar-track      { background: var(--c-bg); }
239    ::-webkit-scrollbar-thumb      { background: var(--c-border-hi); border-radius: var(--r-full); }
240    ::-webkit-scrollbar-thumb:hover{ background: var(--c-text-muted); }
241
242    /* Elements */
243    a           { color: inherit; text-decoration: none; }
244    img, video  { display: block; max-width: 100%; }
245    ul, ol      { list-style: none; }
246    button      { cursor: pointer; border: none; background: none; font-family: inherit; }
247    input, textarea, select { font-family: inherit; font-size: inherit; }
248
249    /* ─────────────────────────────────────────
250       LAYOUT UTILITIES
251    ───────────────────────────────────────── */
252    .container {
253      width: 100%;
254      max-width: var(--max-w);
255      margin-inline: auto;
256      padding-inline: var(--gutter);
257    }
258
259    .container--tight {
260      max-width: var(--max-w-tight);
261    }
262
263    .section {
264      padding-block: var(--section-pad);
265    }
266
267    /* ─────────────────────────────────────────
268       TYPOGRAPHY UTILITIES
269    ───────────────────────────────────────── */
270    .display {
271      font-family: var(--font-display);
272      line-height: 0.92;
273      letter-spacing: 0.02em;
274      text-transform: uppercase;
275    }
276
277    .mono {
278      font-family: var(--font-mono);
279      font-size: var(--text-sm);
280      letter-spacing: 0.06em;
281    }
282
283    /* ─────────────────────────────────────────
284       GRAIN OVERLAY (subtle film grain)
285    ───────────────────────────────────────── */
286    body::after {
287      content: '';
288      position: fixed;
289      inset: 0;
290      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
291      opacity: 0.03;
292      pointer-events: none;
293      z-index: var(--z-toast);
294      mix-blend-mode: overlay;
295    }
296
297    /* ─────────────────────────────────────────
298       CUSTOM CURSOR
299    ───────────────────────────────────────── */
300    @media (pointer: fine) { * { cursor: none; } }
301
302    #cursor-dot {
303      position: fixed;
304      width: 8px;
305      height: 8px;
306      background: var(--c-accent);
307      border-radius: 50%;
308      pointer-events: none;
309      z-index: var(--z-toast);
310      transform: translate(-50%, -50%);
311      transition: width var(--t-base) var(--ease),
312                  height var(--t-base) var(--ease),
313                  background var(--t-base) var(--ease);
314      mix-blend-mode: difference;
315    }
316
317    #cursor-ring {
318      position: fixed;
319      width: 36px;
320      height: 36px;
321      border: 1.5px solid rgba(212,255,0,0.4);
322      border-radius: 50%;
323      pointer-events: none;
324      z-index: var(--z-toast);
325      transform: translate(-50%, -50%);
326      transition: width var(--t-slow) var(--ease),
327                  height var(--t-slow) var(--ease),
328                  border-color var(--t-slow) var(--ease),
329                  left 80ms linear,
330                  top 80ms linear;
331    }
332
333    #cursor-dot.is-hover  { width: 14px; height: 14px; }
334    #cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--c-accent); }
335
336
337    /* ═══════════════════════════════════════════
338       NAV
339    ═══════════════════════════════════════════ */
340    .nav {
341      position: fixed;
342      top: 0;
343      left: 0;
344      right: 0;
345      z-index: var(--z-nav);
346      padding: 1.25rem var(--gutter);
347      display: flex;
348      align-items: center;
349      justify-content: space-between;
350      transition: background var(--t-slow) var(--ease),
351                  backdrop-filter var(--t-slow) var(--ease),
352                  border-color var(--t-slow) var(--ease);
353      border-bottom: 1px solid transparent;
354    }
355
356    .nav.scrolled {
357      background: rgba(10, 10, 10, 0.82);
358      backdrop-filter: blur(18px) saturate(1.4);
359      -webkit-backdrop-filter: blur(18px) saturate(1.4);
360      border-color: var(--c-border);
361    }
362
363    .nav__logo {
364      display: flex;
365      align-items: center;
366      gap: 0.5rem;
367      font-family: var(--font-display);
368      font-size: 1.4rem;
369      letter-spacing: 0.06em;
370      text-transform: uppercase;
371      color: var(--c-white);
372    }
373
374    .nav__logo-icon {
375      width: 28px;
376      height: 28px;
377      background: var(--c-accent);
378      border-radius: 6px;
379      display: grid;
380      place-items: center;
381    }
382
383    .nav__logo-icon svg {
384      width: 16px;
385      height: 16px;
386    }
387
388    .nav__logo span { color: var(--c-accent); }
389
390    .nav__links {
391      display: flex;
392      align-items: center;
393      gap: 2rem;
394    }
395
396    .nav__links a {
397      font-size: var(--text-sm);
398      font-weight: 500;
399      color: var(--c-text-muted);
400      letter-spacing: 0.03em;
401      transition: color var(--t-fast);
402      position: relative;
403    }
404
405    .nav__links a::after {
406      content: '';
407      position: absolute;
408      bottom: -3px;
409      left: 0;
410      width: 0;
411      height: 1px;
412      background: var(--c-accent);
413      transition: width var(--t-base) var(--ease);
414    }
415
416    .nav__links a:hover { color: var(--c-white); }
417    .nav__links a:hover::after { width: 100%; }
418
419    .nav__actions {
420      display: flex;
421      align-items: center;
422      gap: 0.75rem;
423    }
424
425    .btn {
426      display: inline-flex;
427      align-items: center;
428      gap: 0.5rem;
429      padding: 0.6rem 1.25rem;
430      border-radius: var(--r-full);
431      font-size: var(--text-sm);
432      font-weight: 600;
433      letter-spacing: 0.03em;
434      transition: all var(--t-base) var(--ease);
435      white-space: nowrap;
436    }
437
438    .btn--ghost {
439      color: var(--c-text-muted);
440      border: 1px solid var(--c-border);
441    }
442
443    .btn--ghost:hover {
444      color: var(--c-white);
445      border-color: var(--c-border-hi);
446      background: rgba(255,255,255,0.05);
447    }
448
449    .btn--primary {
450      background: var(--c-accent);
451      color: var(--c-black);
452      font-weight: 700;
453    }
454
455    .btn--primary:hover {
456      background: #e8ff33;
457      box-shadow: var(--shadow-glow);
458      transform: translateY(-1px);
459    }
460
461    .btn--primary:active { transform: translateY(0); }
462
463    .nav__hamburger {
464      display: none;
465      flex-direction: column;
466      gap: 5px;
467      padding: 4px;
468      z-index: calc(var(--z-nav) + 1);
469      position: relative;
470    }
471
472    .nav__hamburger span {
473      display: block;
474      width: 22px;
475      height: 1.5px;
476      background: var(--c-text);
477      transition: all var(--t-base) var(--ease);
478      transform-origin: center;
479    }
480
481    /* Hamburger → X animation */
482    .nav__hamburger.is-open span:nth-child(1) {
483      transform: translateY(6.5px) rotate(45deg);
484    }
485    .nav__hamburger.is-open span:nth-child(2) {
486      opacity: 0;
487      transform: scaleX(0);
488    }
489    .nav__hamburger.is-open span:nth-child(3) {
490      transform: translateY(-6.5px) rotate(-45deg);
491    }
492
493    /* Mobile drawer overlay */
494    .nav__mobile-overlay {
495      display: none;
496      position: fixed;
497      inset: 0;
498      background: rgba(0, 0, 0, 0.6);
499      backdrop-filter: blur(4px);
500      z-index: calc(var(--z-nav) - 1);
501      opacity: 0;
502      pointer-events: none;
503      transition: opacity var(--t-slow) var(--ease);
504    }
505
506    .nav__mobile-overlay.is-open {
507      opacity: 1;
508      pointer-events: auto;
509    }
510
511    /* Mobile drawer panel */
512    .nav__mobile-drawer {
513      position: fixed;
514      top: 0;
515      right: 0;
516      bottom: 0;
517      width: min(320px, 85vw);
518      background: var(--c-bg-2);
519      border-left: 1px solid var(--c-border);
520      z-index: var(--z-nav);
521      display: flex;
522      flex-direction: column;
523      padding: 5rem 2rem 2.5rem;
524      transform: translateX(100%);
525      transition: transform var(--t-slow) var(--ease);
526      gap: 0.25rem;
527    }
528
529    .nav__mobile-drawer.is-open {
530      transform: translateX(0);
531    }
532
533    .nav__mobile-drawer a {
534      display: block;
535      font-size: var(--text-lg);
536      font-weight: 500;
537      color: var(--c-text-muted);
538      padding: 0.85rem 0;
539      border-bottom: 1px solid var(--c-border);
540      letter-spacing: 0.02em;
541      transition: color var(--t-fast), padding-left var(--t-fast);
542    }
543
544    .nav__mobile-drawer a:hover {
545      color: var(--c-white);
546      padding-left: 0.5rem;
547    }
548
549    .nav__mobile-drawer a:last-child {
550      border-bottom: none;
551    }
552
553    .nav__mobile-actions {
554      margin-top: auto;
555      display: flex;
556      flex-direction: column;
557      gap: 0.75rem;
558    }
559
560    .nav__mobile-actions .btn {
561      width: 100%;
562      justify-content: center;
563      padding: 0.85rem 1.5rem;
564      font-size: var(--text-base);
565    }
566
567    /* ═══════════════════════════════════════════
568       HERO
569    ═══════════════════════════════════════════ */
570    .hero {
571      position: relative;
572      min-height: 100vh;
573      display: flex;
574      flex-direction: column;
575      justify-content: center;
576      overflow: hidden;
577      padding-top: 5rem;
578    }
579
580    /* Background grid */
581    .hero__grid-bg {
582      position: absolute;
583      inset: 0;
584      background-image:
585        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
586        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
587      background-size: 60px 60px;
588      mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
589    }
590
591    /* Radial glow blobs */
592    .hero__glow {
593      position: absolute;
594      border-radius: 50%;
595      pointer-events: none;
596      filter: blur(80px);
597    }
598
599    .hero__glow--1 {
600      width: 700px;
601      height: 700px;
602      background: radial-gradient(circle, rgba(212,255,0,0.12) 0%, transparent 70%);
603      top: -200px;
604      left: -100px;
605      animation: glow-drift-1 12s ease-in-out infinite alternate;
606    }
607
608    .hero__glow--2 {
609      width: 500px;
610      height: 500px;
611      background: radial-gradient(circle, rgba(255,77,0,0.1) 0%, transparent 70%);
612      top: 100px;
613      right: -80px;
614      animation: glow-drift-2 15s ease-in-out infinite alternate;
615    }
616
617    .hero__glow--3 {
618      width: 400px;
619      height: 400px;
620      background: radial-gradient(circle, rgba(0,194,255,0.07) 0%, transparent 70%);
621      bottom: 0;
622      left: 40%;
623      animation: glow-drift-1 18s ease-in-out infinite alternate-reverse;
624    }
625
626    @keyframes glow-drift-1 {
627      from { transform: translate(0, 0) scale(1); }
628      to   { transform: translate(60px, 40px) scale(1.15); }
629    }
630    @keyframes glow-drift-2 {
631      from { transform: translate(0, 0) scale(1); }
632      to   { transform: translate(-40px, 60px) scale(1.2); }
633    }
634
635    /* Inner layout */
636    .hero__inner {
637      position: relative;
638      z-index: var(--z-base);
639      display: grid;
640      grid-template-columns: 1fr 1fr;
641      gap: clamp(3rem, 6vw, 6rem);
642      align-items: center;
643      padding-block: clamp(4rem, 8vh, 7rem);
644    }
645
646    /* LEFT col — text */
647    .hero__content {}
648
649    .hero__eyebrow {
650      display: inline-flex;
651      align-items: center;
652      gap: 0.5rem;
653      padding: 0.35rem 0.85rem;
654      border: 1px solid var(--c-border-hi);
655      border-radius: var(--r-full);
656      font-family: var(--font-mono);
657      font-size: var(--text-xs);
658      color: var(--c-text-muted);
659      letter-spacing: 0.1em;
660      text-transform: uppercase;
661      margin-bottom: 1.75rem;
662      opacity: 0;
663      transform: translateY(20px);
664      animation: fade-up 0.8s var(--ease) 0.02s forwards;
665    }
666
667    .hero__eyebrow-dot {
668      width: 6px;
669      height: 6px;
670      background: var(--c-accent);
671      border-radius: 50%;
672      animation: pulse 2s ease-in-out infinite;
673    }
674
675    @keyframes pulse {
676      0%, 100% { opacity: 1; transform: scale(1); }
677      50%       { opacity: 0.4; transform: scale(0.7); }
678    }
679
680    .hero__title {
681      font-family: var(--font-display);
682      font-size: clamp(3.8rem, 8vw, 7.5rem);
683      line-height: 0.9;
684      letter-spacing: 0.02em;
685      text-transform: uppercase;
686      color: var(--c-white);
687      margin-bottom: 1.5rem;
688      opacity: 0;
689      transform: translateY(30px);
690      animation: fade-up 0.9s var(--ease) 0.05s forwards;
691    }
692
693    .hero__title-line { display: block; }
694
695    .hero__title-line--accent {
696      color: var(--c-accent);
697      position: relative;
698      display: inline-block;
699    }
700
701    /* Underline scribble on accent word */
702    .hero__title-line--accent::after {
703      content: '';
704      position: absolute;
705      bottom: 6px;
706      left: 0;
707      right: 0;
708      height: 4px;
709      background: var(--c-accent-2);
710      border-radius: 2px;
711      transform: scaleX(0);
712      transform-origin: left;
713      animation: line-reveal 0.6s var(--ease) 1.1s forwards;
714    }
715
716    @keyframes line-reveal {
717      to { transform: scaleX(1); }
718    }
719
720    .hero__sub {
721      font-size: var(--text-lg);
722      color: var(--c-text-muted);
723      line-height: 1.6;
724      max-width: 460px;
725      margin-bottom: 2.5rem;
726      opacity: 0;
727      transform: translateY(20px);
728      animation: fade-up 0.8s var(--ease) 0.09s forwards;
729    }
730
731    .hero__sub strong { color: var(--c-text); font-weight: 500; }
732
733    .hero__ctas {
734      display: flex;
735      align-items: center;
736      flex-wrap: wrap;
737      gap: 1rem;
738      margin-bottom: 3rem;
739      opacity: 0;
740      transform: translateY(20px);
741      animation: fade-up 0.8s var(--ease) 0.12s forwards;
742    }
743
744    .btn--hero {
745      padding: 0.85rem 2rem;
746      font-size: var(--text-base);
747      border-radius: var(--r-full);
748    }
749
750    .btn--hero-outline {
751      display: inline-flex;
752      align-items: center;
753      gap: 0.5rem;
754      padding: 0.85rem 1.75rem;
755      border: 1px solid var(--c-border-hi);
756      border-radius: var(--r-full);
757      font-size: var(--text-base);
758      font-weight: 500;
759      color: var(--c-text-muted);
760      transition: all var(--t-base) var(--ease);
761    }
762
763    .btn--hero-outline:hover {
764      color: var(--c-white);
765      border-color: var(--c-white);
766      background: rgba(255,255,255,0.04);
767    }
768
769    .btn--hero-outline svg { transition: transform var(--t-base) var(--ease); }
770    .btn--hero-outline:hover svg { transform: translateX(4px); }
771
772    /* Stats row */
773    .hero__stats {
774      display: flex;
775      gap: 2.5rem;
776      opacity: 0;
777      transform: translateY(20px);
778      animation: fade-up 0.8s var(--ease) 0.15s forwards;
779    }
780
781    .hero__stat {}
782
783    .hero__stat-value {
784      font-family: var(--font-display);
785      font-size: var(--text-3xl);
786      color: var(--c-white);
787      line-height: 1;
788      letter-spacing: 0.02em;
789    }
790
791    .hero__stat-value span { color: var(--c-accent); }
792
793    .hero__stat-label {
794      font-size: var(--text-xs);
795      color: var(--c-text-dim);
796      text-transform: uppercase;
797      letter-spacing: 0.08em;
798      margin-top: 0.25rem;
799    }
800
801    /* RIGHT col — visual card */
802    .hero__visual {
803      position: relative;
804      opacity: 0;
805      transform: translateX(40px);
806      animation: fade-left 1s var(--ease) 0.4s forwards;
807    }
808
809    @keyframes fade-left {
810      to { opacity: 1; transform: translateX(0); }
811    }
812
813    /* Main card */
814    .hero__card {
815      position: relative;
816      background: var(--c-surface);
817      border: 1px solid var(--c-border-hi);
818      border-radius: var(--r-xl);
819      overflow: hidden;
820      aspect-ratio: 16/10;
821    }
822
823    .hero__card-video-placeholder {
824      width: 100%;
825      height: 100%;
826      background: linear-gradient(135deg, #111 0%, #1a1a1a 50%, #111 100%);
827      display: flex;
828      align-items: center;
829      justify-content: center;
830      position: relative;
831      overflow: hidden;
832    }
833
834    /* Animated gradient mesh in the card */
835    .hero__card-video-placeholder::before {
836      content: '';
837      position: absolute;
838      inset: -50%;
839      background: conic-gradient(
840        from 0deg at 30% 50%,
841        rgba(212,255,0,0.12),
842        rgba(255,77,0,0.08),
843        rgba(0,194,255,0.06),
844        rgba(212,255,0,0.12)
845      );
846      animation: rotate-mesh 10s linear infinite;
847    }
848
849    @keyframes rotate-mesh {
850      to { transform: rotate(360deg); }
851    }
852
853    /* Play button */
854    .hero__play {
855      position: relative;
856      z-index: 2;
857      width: 72px;
858      height: 72px;
859      background: var(--c-accent);
860      border-radius: 50%;
861      display: grid;
862      place-items: center;
863      transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
864    }
865
866    .hero__play:hover {
867      transform: scale(1.1);
868      box-shadow: 0 0 50px rgba(212,255,0,0.5);
869    }
870
871    .hero__play::before {
872      content: '';
873      position: absolute;
874      inset: -8px;
875      border: 1px solid rgba(212,255,0,0.3);
876      border-radius: 50%;
877      animation: ring-pulse 2s ease-in-out infinite;
878    }
879
880    @keyframes ring-pulse {
881      0%, 100% { transform: scale(1);   opacity: 0.6; }
882      50%       { transform: scale(1.2); opacity: 0; }
883    }
884
885    /* Card bottom bar */
886    .hero__card-bar {
887      position: absolute;
888      bottom: 0;
889      left: 0;
890      right: 0;
891      padding: 1rem 1.25rem;
892      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
893      display: flex;
894      align-items: center;
895      justify-content: space-between;
896    }
897
898    .hero__card-prompt {
899      font-family: var(--font-mono);
900      font-size: var(--text-xs);
901      color: rgba(255,255,255,0.6);
902    }
903
904    .hero__card-badge {
905      display: flex;
906      align-items: center;
907      gap: 0.4rem;
908      padding: 0.3rem 0.7rem;
909      background: rgba(212,255,0,0.15);
910      border: 1px solid rgba(212,255,0,0.3);
911      border-radius: var(--r-full);
912      font-family: var(--font-mono);
913      font-size: 0.65rem;
914      color: var(--c-accent);
915      letter-spacing: 0.06em;
916      text-transform: uppercase;
917    }
918
919    .hero__card-badge-dot {
920      width: 5px;
921      height: 5px;
922      background: var(--c-accent);
923      border-radius: 50%;
924      animation: pulse 1.5s ease-in-out infinite;
925    }
926
927    /* Floating tags */
928    .hero__tag {
929      position: absolute;
930      background: rgba(15,15,15,0.9);
931      border: 1px solid var(--c-border-hi);
932      border-radius: var(--r-md);
933      padding: 0.55rem 0.9rem;
934      font-size: var(--text-xs);
935      backdrop-filter: blur(12px);
936      white-space: nowrap;
937      animation: float 4s ease-in-out infinite;
938    }
939
940    .hero__tag--1 {
941      top: -3.5rem;
942      right: 2rem;
943      color: var(--c-accent);
944      font-family: var(--font-mono);
945      border-color: rgba(212,255,0,0.25);
946      animation-delay: 0s;
947    }
948
949    @keyframes float {
950      0%, 100% { transform: translateY(0px); }
951      50%       { transform: translateY(-10px); }
952    }
953
954    /* Model pills row below card */
955    .hero__models {
956      display: flex;
957      align-items: center;
958      gap: 0.6rem;
959      margin-top: 1.25rem;
960      flex-wrap: wrap;
961    }
962
963    .hero__models-label {
964      font-size: var(--text-xs);
965      color: var(--c-text-dim);
966      text-transform: uppercase;
967      letter-spacing: 0.08em;
968      margin-right: 0.25rem;
969    }
970
971    .hero__model-pill {
972      display: inline-flex;
973      align-items: center;
974      gap: 0.35rem;
975      padding: 0.3rem 0.75rem;
976      border: 1px solid var(--c-border);
977      border-radius: var(--r-full);
978      font-size: 0.7rem;
979      color: var(--c-text-muted);
980      font-family: var(--font-mono);
981      letter-spacing: 0.04em;
982      transition: all var(--t-fast);
983    }
984
985    .hero__model-pill:hover {
986      border-color: var(--c-border-hi);
987      color: var(--c-text);
988      background: rgba(255,255,255,0.04);
989    }
990
991    .hero__model-pill-dot {
992      width: 4px;
993      height: 4px;
994      border-radius: 50%;
995    }
996
997    /* Ticker / scrolling text bar */
998    .hero__ticker {
999      position: absolute;
1000      bottom: 0;
1001      left: 0;
1002      right: 0;
1003      border-top: 1px solid var(--c-border);
1004      background: var(--c-bg);
1005      overflow: hidden;
1006      padding: 0.75rem 0;
1007      z-index: var(--z-base);
1008    }
1009
1010    .hero__ticker-track {
1011      display: flex;
1012      gap: 4rem;
1013      width: max-content;
1014      animation: ticker 28s linear infinite;
1015    }
1016
1017    .hero__ticker-track:hover { animation-play-state: paused; }
1018
1019    @keyframes ticker {
1020      from { transform: translateX(0); }
1021      to   { transform: translateX(-50%); }
1022    }
1023
1024    .hero__ticker-item {
1025      display: flex;
1026      align-items: center;
1027      gap: 0.75rem;
1028      font-size: var(--text-xs);
1029      color: var(--c-text-dim);
1030      text-transform: uppercase;
1031      letter-spacing: 0.1em;
1032      white-space: nowrap;
1033    }
1034
1035    .hero__ticker-item-sep {
1036      width: 3px;
1037      height: 3px;
1038      background: var(--c-accent);
1039      border-radius: 50%;
1040    }
1041
1042    /* Scroll indicator */
1043    .hero__scroll {
1044      position: absolute;
1045      bottom: 3.5rem;
1046      left: 50%;
1047      transform: translateX(-50%);
1048      display: flex;
1049      flex-direction: column;
1050      align-items: center;
1051      gap: 0.5rem;
1052      opacity: 0;
1053      animation: fade-up 0.8s var(--ease) 0.28s forwards;
1054    }
1055
1056    .hero__scroll-label {
1057      font-family: var(--font-mono);
1058      font-size: 0.6rem;
1059      color: var(--c-text-dim);
1060      text-transform: uppercase;
1061      letter-spacing: 0.12em;
1062    }
1063
1064    .hero__scroll-line {
1065      width: 1px;
1066      height: 40px;
1067      background: linear-gradient(to bottom, var(--c-accent), transparent);
1068      animation: scroll-line 1.8s ease-in-out infinite;
1069    }
1070
1071    @keyframes scroll-line {
1072      0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
1073      50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
1074      51%  { transform: scaleY(1); transform-origin: bottom; }
1075      100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
1076    }
1077
1078    /* Shared fade-up keyframe */
1079    @keyframes fade-up {
1080      to { opacity: 1; transform: translateY(0); }
1081    }
1082
1083    /* ═══════════════════════════════════════════
1084       RESPONSIVE — NAV + HERO
1085    ═══════════════════════════════════════════ */
1086    /* Disable custom cursor on touch devices */
1087    @media (hover: none) and (pointer: coarse) {
1088      * { cursor: auto !important; }
1089      #cursor-dot, #cursor-ring { display: none !important; }
1090    }
1091
1092    @media (max-width: 900px) {
1093      .nav__links { display: none; }
1094      .nav__hamburger { display: flex; }
1095      /* Hide desktop CTA buttons so the navbar isn't cramped */
1096      .nav__actions .btn--ghost,
1097      .nav__actions .btn--primary { display: none; }
1098      /* Show the mobile overlay */
1099      .nav__mobile-overlay { display: block; }
1100
1101      .hero__inner {
1102        grid-template-columns: 1fr;
1103        text-align: center;
1104      }
1105
1106      .hero__sub { margin-inline: auto; }
1107      .hero__ctas { justify-content: center; }
1108      .hero__stats { justify-content: center; }
1109
1110      .hero__visual {
1111        max-width: 520px;
1112        margin-inline: auto;
1113        width: 100%;
1114      }
1115
1116      .hero__tag--2 { left: 0; }
1117      .hero__tag--3 { right: 0; }
1118    }
1119
1120    @media (max-width: 520px) {
1121      .hero__title { font-size: clamp(3rem, 14vw, 4.5rem); }
1122      .hero__stats { gap: 1.5rem; }
1123      .btn--hero { width: 100%; justify-content: center; }
1124      .hero__models { gap: 0.4rem; margin-top: 1rem; }
1125      .hero__models-label { font-size: 0.6rem; margin-right: 0.15rem; }
1126      .hero__model-pill { padding: 0.2rem 0.55rem; font-size: 0.6rem; gap: 0.25rem; }
1127      .hero__model-pill-dot { width: 3px; height: 3px; }
1128    }
1129
1130    /* Language picker active state (legacy, kept for compat) */
1131    [data-lang-btn].is-active {
1132      color: var(--c-accent) !important;
1133      border-color: var(--c-accent) !important;
1134      background: rgba(212,255,0,0.08) !important;
1135    }
1136
1137    /* ── Language Dropdown ─────────────────────────────────── */
1138    .lang-dropdown {
1139      position: relative;
1140    }
1141
1142    .lang-dropdown__trigger {
1143      display: flex;
1144      align-items: center;
1145      gap: 0.3rem;
1146      background: none;
1147      border: 1px solid rgba(255,255,255,0.12);
1148      color: var(--c-text-muted);
1149      padding: 0.3rem 0.55rem;
1150      border-radius: var(--r-sm);
1151      cursor: pointer;
1152      font-size: 0.7rem;
1153      font-family: var(--font-mono);
1154      letter-spacing: 0.06em;
1155      transition: color 0.2s, border-color 0.2s, background 0.2s;
1156      white-space: nowrap;
1157    }
1158
1159    .lang-dropdown__trigger:hover {
1160      color: var(--c-white);
1161      border-color: rgba(255,255,255,0.28);
1162      background: rgba(255,255,255,0.04);
1163    }
1164
1165    .lang-dropdown__trigger[aria-expanded="true"] {
1166      color: var(--c-accent);
1167      border-color: var(--c-accent);
1168      background: rgba(212,255,0,0.06);
1169    }
1170
1171    .lang-dropdown__globe { display: flex; align-items: center; opacity: 0.7; }
1172    .lang-dropdown__label { font-weight: 600; }
1173
1174    .lang-dropdown__caret {
1175      display: flex;
1176      align-items: center;
1177      opacity: 0.5;
1178      transition: transform 0.2s var(--ease);
1179    }
1180    .lang-dropdown__trigger[aria-expanded="true"] .lang-dropdown__caret {
1181      transform: rotate(180deg);
1182      opacity: 1;
1183    }
1184
1185    .lang-dropdown__menu {
1186      position: absolute;
1187      top: calc(100% + 6px);
1188      right: 0;
1189      min-width: 160px;
1190      background: var(--c-bg-2);
1191      border: 1px solid rgba(255,255,255,0.1);
1192      border-radius: var(--r-md);
1193      box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.3);
1194      list-style: none;
1195      padding: 0.3rem;
1196      z-index: calc(var(--z-nav) + 10);
1197      opacity: 0;
1198      transform: translateY(-6px) scale(0.97);
1199      pointer-events: none;
1200      transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
1201      transform-origin: top right;
1202    }
1203
1204    .lang-dropdown__menu.is-open {
1205      opacity: 1;
1206      transform: translateY(0) scale(1);
1207      pointer-events: auto;
1208    }
1209
1210    .lang-dropdown__item {
1211      display: flex;
1212      align-items: center;
1213      gap: 0.5rem;
1214      padding: 0.45rem 0.6rem;
1215      border-radius: 5px;
1216      cursor: pointer;
1217      font-size: 0.8rem;
1218      font-family: var(--font-body);
1219      color: var(--c-text-muted);
1220      transition: background 0.15s, color 0.15s;
1221      user-select: none;
1222    }
1223
1224    .lang-dropdown__item:hover {
1225      background: rgba(255,255,255,0.06);
1226      color: var(--c-white);
1227    }
1228
1229    .lang-dropdown__item.is-active {
1230      color: var(--c-accent);
1231      background: rgba(212,255,0,0.07);
1232    }
1233
1234    .lang-dropdown__flag { font-size: 1rem; line-height: 1; }
1235
1236    .lang-dropdown__code {
1237      margin-left: auto;
1238      font-family: var(--font-mono);
1239      font-size: 0.65rem;
1240      letter-spacing: 0.08em;
1241      opacity: 0.45;
1242    }
1243
1244    .lang-dropdown__item.is-active .lang-dropdown__code { opacity: 0.8; }
1245
1246    /* Mobile variant — menu opens upward */
1247    .lang-dropdown--mobile .lang-dropdown__menu {
1248      top: auto;
1249      bottom: calc(100% + 6px);
1250      transform-origin: bottom right;
1251      transform: translateY(6px) scale(0.97);
1252    }
1253    .lang-dropdown--mobile .lang-dropdown__menu.is-open {
1254      transform: translateY(0) scale(1);
1255    }
1256
1257  </style>
1258
1259  <!-- ═══════════════════════════════════════════
1260       STRUCTURED DATA — JSON-LD
1261  ═══════════════════════════════════════════ -->
1262  
1262<script type="application/ld+json">
1263  {
1264    "@context": "https://schema.org",
1265    "@type": "WebApplication",
1266    "name": "AI Video Generator",
1267    "url": "https://video-generator.ai",
1268    "description": "Create stunning AI videos from text or images. Multi-model AI video generator with cinematic control, style presets, and export-ready output.",
1269    "applicationCategory": "MultimediaApplication",
1270    "operatingSystem": "Web",
1271    "offers": {
1272      "@type": "Offer",
1273      "price": "0",
1274      "priceCurrency": "USD",
1275      "description": "Free tier available"
1276    },
1277    "provider": {
1278      "@type": "Organization",
1279      "name": "video-generator.ai",
1280      "url": "https://video-generator.ai"
1281    }
1282  }
1283  </script>
1283
1284
1285  <!-- ═══════════════════════════════════════════
1286       CURSOR SCRIPT
1287  ═══════════════════════════════════════════ -->
1288  
1288<script type="6c18279ba6d93a40249c492f-text/javascript">
1289    document.addEventListener('DOMContentLoaded', () => {
1290      const dot  = document.getElementById('cursor-dot');
1291      const ring = document.getElementById('cursor-ring');
1292
1293      let mx = 0, my = 0;
1294      let rx = 0, ry = 0;
1295
1296      document.addEventListener('mousemove', e => {
1297        mx = e.clientX;
1298        my = e.clientY;
1299        dot.style.left = mx + 'px';
1300        dot.style.top  = my + 'px';
1301      });
1302
1303      // Ring follows with slight lag via requestAnimationFrame
1304      (function lerp() {
1305        rx += (mx - rx) * 0.12;
1306        ry += (my - ry) * 0.12;
1307        ring.style.left = rx + 'px';
1308        ring.style.top  = ry + 'px';
1309        requestAnimationFrame(lerp);
1310      })();
1311
1312      // Hover states
1313      document.querySelectorAll('a, button, [data-hover]').forEach(el => {
1314        el.addEventListener('mouseenter', () => {
1315          dot.classList.add('is-hover');
1316          ring.classList.add('is-hover');
1317        });
1318        el.addEventListener('mouseleave', () => {
1319          dot.classList.remove('is-hover');
1320          ring.classList.remove('is-hover');
1321        });
1322      });
1323    });
1324  </script>
1324
1325
1326
1327  <!-- Page transition styles -->
1328  <style>
1329    #page-transition-overlay {
1330      position: fixed;
1331      inset: 0;
1332      background: #0a0a0a;
1333      z-index: 99999;
1334      pointer-events: none;
1335      opacity: 0;
1336      transition: opacity 220ms ease;
1337    }
1338    #page-transition-overlay.fade-out { opacity: 1; pointer-events: all; }
1339    body { animation: pageFadeIn 280ms ease forwards; }
1340    @keyframes pageFadeIn {
1341      from { opacity: 0; }
1342      to   { opacity: 1; }
1343    }
1344  </style>
1345</head>
1346
1347<body>
1348  <div id="page-transition-overlay"></div>
1349
1350  <!-- Custom cursor -->
1351  <div id="cursor-dot"></div>
1352  <div id="cursor-ring"></div>
1353
1354  <!-- ▼▼▼ SECTION 1 — NAV ▼▼▼ -->
1355  <nav class="nav" id="main-nav" role="navigation" aria-label="Main navigation">
1356    <a href="/" class="nav__logo" aria-label="video-generator.ai home">
1357      <div class="nav__logo-icon">
1358        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1359          <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/>
1360        </svg>
1361      </div>
1362      video<span>generator</span>ai
1363    </a>
1364
1365    <ul class="nav__links" role="list">
1366      <li><a href="#models" data-i18n="nav_models">Models</a></li>
1367      <li><a href="#features" data-i18n="nav_features">Features</a></li>
1368      <li><a href="#usecases" data-i18n="nav_usecases">Use Cases</a></li>
1369      <li><a href="#pricing" data-i18n="nav_pricing">Pricing</a></li>
1370      <li><a href="#faq" data-i18n="nav_faq">FAQ</a></li>
1371    </ul>
1372
1373    <div class="nav__actions">
1374      <div class="lang-dropdown" id="lang-dropdown-desktop">
1375        <button class="lang-dropdown__trigger" id="lang-trigger-desktop" aria-haspopup="listbox" aria-expanded="false">
1376          <span class="lang-dropdown__globe">
1377            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
1378          </span>
1379          <span class="lang-dropdown__label" id="lang-label-desktop">EN</span>
1380          <span class="lang-dropdown__caret">
1381            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
1382          </span>
1383        </button>
1384        <ul class="lang-dropdown__menu" role="listbox" aria-label="Select language">
1385          <li class="lang-dropdown__item" role="option" data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1386            <span class="lang-dropdown__flag">🇺🇸</span><span>English</span><span class="lang-dropdown__code">EN</span>
1387          </li>
1388          <li class="lang-dropdown__item" role="option" data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1389            <span class="lang-dropdown__flag">🇪🇸</span><span>Español</span><span class="lang-dropdown__code">ES</span>
1390          </li>
1391          <li class="lang-dropdown__item" role="option" data-lang-btn="fr" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('fr','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1392            <span class="lang-dropdown__flag">🇫🇷</span><span>Français</span><span class="lang-dropdown__code">FR</span>
1393          </li>
1394          <li class="lang-dropdown__item" role="option" data-lang-btn="de" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('de','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1395            <span class="lang-dropdown__flag">🇩🇪</span><span>Deutsch</span><span class="lang-dropdown__code">DE</span>
1396          </li>
1397          <li class="lang-dropdown__item" role="option" data-lang-btn="ja" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ja','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1398            <span class="lang-dropdown__flag">🇯🇵</span><span>日本語</span><span class="lang-dropdown__code">JA</span>
1399          </li>
1400          <li class="lang-dropdown__item" role="option" data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1401            <span class="lang-dropdown__flag">🇮🇳</span><span>हिन्दी</span><span class="lang-dropdown__code">HI</span>
1402          </li>
1403          <li class="lang-dropdown__item" role="option" data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1404            <span class="lang-dropdown__flag">🇷🇺</span><span>Русский</span><span class="lang-dropdown__code">RU</span>
1405          </li>
1406          <li class="lang-dropdown__item" role="option" data-lang-btn="ar" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ar','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1407            <span class="lang-dropdown__flag">🇸🇦</span><span>العربية</span><span class="lang-dropdown__code">AR</span>
1408          </li>
1409          <li class="lang-dropdown__item" role="option" data-lang-btn="zh" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('zh','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1410            <span class="lang-dropdown__flag">🇨🇳</span><span>中文</span><span class="lang-dropdown__code">ZH</span>
1411          </li>
1412          <li class="lang-dropdown__item" role="option" data-lang-btn="pt" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('pt','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1413            <span class="lang-dropdown__flag">🇧🇷</span><span>Português</span><span class="lang-dropdown__code">PT</span>
1414          </li>
1415        </ul>
1416      </div>
1417      <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="nav_signin">Sign in</a>
1418      <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" data-i18n="nav_start_free">Start Free</a>
1419      <button class="nav__hamburger" data-i18n-aria="nav_open_menu" aria-label="Open menu">
1420        <span></span><span></span><span></span>
1421      </button>
1422    </div>
1423  </nav>
1424
1425  <!-- Mobile nav overlay -->
1426  <div class="nav__mobile-overlay" id="nav-overlay" aria-hidden="true"></div>
1427
1428  <!-- Mobile nav drawer -->
1429  <div class="nav__mobile-drawer" id="nav-drawer" role="dialog" aria-label="Mobile navigation" aria-hidden="true">
1430    <a href="#models" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_models" data-cf-modified-6c18279ba6d93a40249c492f-="">Models</a>
1431    <a href="#features" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_features" data-cf-modified-6c18279ba6d93a40249c492f-="">Features</a>
1432    <a href="#usecases" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_usecases" data-cf-modified-6c18279ba6d93a40249c492f-="">Use Cases</a>
1433    <a href="#pricing" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_pricing" data-cf-modified-6c18279ba6d93a40249c492f-="">Pricing</a>
1434    <a href="#faq" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_faq" data-cf-modified-6c18279ba6d93a40249c492f-="">FAQ</a>
1435    <div class="nav__mobile-actions">
1436      <div class="lang-dropdown lang-dropdown--mobile" id="lang-dropdown-mobile">
1437        <button class="lang-dropdown__trigger" id="lang-trigger-mobile" aria-haspopup="listbox" aria-expanded="false">
1438          <span class="lang-dropdown__globe">
1439            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
1440          </span>
1441          <span class="lang-dropdown__label" id="lang-label-mobile">EN</span>
1442          <span class="lang-dropdown__caret">
1443            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
1444          </span>
1445        </button>
1446        <ul class="lang-dropdown__menu" role="listbox" aria-label="Select language">
1447          <li class="lang-dropdown__item" role="option" data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1448            <span class="lang-dropdown__flag">🇺🇸</span><span>English</span><span class="lang-dropdown__code">EN</span>
1449          </li>
1450          <li class="lang-dropdown__item" role="option" data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1451            <span class="lang-dropdown__flag">🇪🇸</span><span>Español</span><span class="lang-dropdown__code">ES</span>
1452          </li>
1453          <li class="lang-dropdown__item" role="option" data-lang-btn="fr" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('fr','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1454            <span class="lang-dropdown__flag">🇫🇷</span><span>Français</span><span class="lang-dropdown__code">FR</span>
1455          </li>
1456          <li class="lang-dropdown__item" role="option" data-lang-btn="de" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('de','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1457            <span class="lang-dropdown__flag">🇩🇪</span><span>Deutsch</span><span class="lang-dropdown__code">DE</span>
1458          </li>
1459          <li class="lang-dropdown__item" role="option" data-lang-btn="ja" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ja','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1460            <span class="lang-dropdown__flag">🇯🇵</span><span>日本語</span><span class="lang-dropdown__code">JA</span>
1461          </li>
1462          <li class="lang-dropdown__item" role="option" data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1463            <span class="lang-dropdown__flag">🇮🇳</span><span>हिन्दी</span><span class="lang-dropdown__code">HI</span>
1464          </li>
1465          <li class="lang-dropdown__item" role="option" data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1466            <span class="lang-dropdown__flag">🇷🇺</span><span>Русский</span><span class="lang-dropdown__code">RU</span>
1467          </li>
1468        </ul>
1469      </div>
1470      <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_signin" data-cf-modified-6c18279ba6d93a40249c492f-="">Sign in</a>
1471      <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_start_free" data-cf-modified-6c18279ba6d93a40249c492f-="">Start Free</a>
1472    </div>
1473  </div>
1474
1475  <!-- ▼▼▼ SECTION 2 — HERO ▼▼▼ -->
1476  <section class="hero" id="top" aria-label="Hero">
1477
1478    <!-- Background decorations -->
1479    <div class="hero__grid-bg" aria-hidden="true"></div>
1480    <div class="hero__glow hero__glow--1" aria-hidden="true"></div>
1481    <div class="hero__glow hero__glow--2" aria-hidden="true"></div>
1482    <div class="hero__glow hero__glow--3" aria-hidden="true"></div>
1483
1484    <div class="container">
1485      <div class="hero__inner">
1486
1487        <!-- LEFT — Copy -->
1488        <div class="hero__content">
1489
1490          <div class="hero__eyebrow" data-i18n="hero_eyebrow">
1491            <span class="hero__eyebrow-dot"></span>
1492            Multi-Model · Text to Video · Image to Video
1493          </div>
1494
1495          <h1 class="hero__title">
1496            <span class="hero__title-line" data-i18n="hero_title_line1">Free AI Video</span>
1497            <span class="hero__title-line" data-i18n="hero_title_line2">Generator That</span>
1498            <span class="hero__title-line--accent" data-i18n="hero_title_accent">Create Without</span>
1499            <span class="hero__title-line" data-i18n="hero_title_line4">Signing Up</span>
1500          </h1>
1501
1502          <p class="hero__sub" data-i18n="hero_sub">
1503            Create <strong>cinematic videos</strong> from text or images using multiple AI models.
1504            Fast generation, flexible styles, and creator-friendly controls — all in one place.
1505          </p>
1506
1507          <div class="hero__ctas">
1508            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="hero_cta_primary">
1509              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
1510                <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/>
1511              </svg>
1512              Generate a Video Free
1513            </a>
1514            <a href="https://pixwith.video-generator.ai/explore" target="_blank" rel="nofollow" class="btn--hero-outline" data-i18n="hero_cta_secondary">
1515              Browse Examples
1516              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
1517                <path d="M3 8H13M8 3l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1518              </svg>
1519            </a>
1520          </div>
1521
1522          <div class="hero__stats">
1523            <div class="hero__stat">
1524              <div class="hero__stat-value">6<span>+</span></div>
1525              <div class="hero__stat-label" data-i18n="hero_stat_models_label">AI Models</div>
1526            </div>
1527            <div class="hero__stat">
1528              <div class="hero__stat-value">4<span>K</span></div>
1529              <div class="hero__stat-label" data-i18n="hero_stat_resolution_label">Max Resolution</div>
1530            </div>
1531            <div class="hero__stat">
1532              <div class="hero__stat-value">3<span>s</span></div>
1533              <div class="hero__stat-label" data-i18n="hero_stat_speed_label">Avg. Generation</div>
1534            </div>
1535          </div>
1536
1537        </div>
1538
1539        <!-- RIGHT — Visual -->
1540        <div class="hero__visual" aria-hidden="true">
1541
1542          <!-- Floating tags -->
1543          <div class="hero__tag hero__tag--1">✦ Text → Video</div>
1544
1545          <!-- Video card -->
1546          <div class="hero__card">
1547            <div class="hero__card-video-placeholder">
1548              <button class="hero__play" data-i18n-aria="hero_play_label" aria-label="Play demo video">
1549                <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
1550                  <path d="M8 5.5L22 14L8 22.5V5.5Z" fill="#0a0a0a"/>
1551                </svg>
1552              </button>
1553            </div>
1554            <div class="hero__card-bar">
1555              <span class="hero__card-prompt" data-i18n="hero_card_prompt">"Neon city rain, cinematic, slow dolly-in…"</span>
1556              <span class="hero__card-badge">
1557                <span class="hero__card-badge-dot"></span>
1558                <span data-i18n="hero_card_badge">Generating</span>
1559              </span>
1560            </div>
1561          </div>
1562
1563          <!-- Model pills -->
1564          <div class="hero__models">
1565            <span class="hero__models-label" data-i18n="hero_models_label">Models:</span>
1566            <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#d4ff00"></span>Text→Video</span>
1567            <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#00c2ff"></span>Img→Video</span>
1568            <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#ff4d00"></span>Cinematic</span>
1569            <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#a78bfa"></span>Anime</span>
1570          </div>
1571
1572        </div>
1573      </div><!-- /.hero__inner -->
1574    </div><!-- /.container -->
1575
1576    <!-- Scroll indicator -->
1577    <div class="hero__scroll" aria-hidden="true">
1578      <span class="hero__scroll-label" data-i18n="hero_scroll_label">Scroll</span>
1579      <span class="hero__scroll-line"></span>
1580    </div>
1581
1582    <!-- Ticker bar -->
1583    <div class="hero__ticker" aria-hidden="true">
1584      <div class="hero__ticker-track">
1585        <!-- duplicate items for seamless loop -->
1586        <span class="hero__ticker-item">Text to Video <span class="hero__ticker-item-sep"></span></span>
1587        <span class="hero__ticker-item">Image to Video <span class="hero__ticker-item-sep"></span></span>
1588        <span class="hero__ticker-item">Character Consistency <span class="hero__ticker-item-sep"></span></span>
1589        <span class="hero__ticker-item">Cinematic Shots <span class="hero__ticker-item-sep"></span></span>
1590        <span class="hero__ticker-item">Style Presets <span class="hero__ticker-item-sep"></span></span>
1591        <span class="hero__ticker-item">Multi-Model AI <span class="hero__ticker-item-sep"></span></span>
1592        <span class="hero__ticker-item">Export Ready <span class="hero__ticker-item-sep"></span></span>
1593        <span class="hero__ticker-item">4K Output <span class="hero__ticker-item-sep"></span></span>
1594        <span class="hero__ticker-item">Text to Video <span class="hero__ticker-item-sep"></span></span>
1595        <span class="hero__ticker-item">Image to Video <span class="hero__ticker-item-sep"></span></span>
1596        <span class="hero__ticker-item">Character Consistency <span class="hero__ticker-item-sep"></span></span>
1597        <span class="hero__ticker-item">Cinematic Shots <span class="hero__ticker-item-sep"></span></span>
1598        <span class="hero__ticker-item">Style Presets <span class="hero__ticker-item-sep"></span></span>
1599        <span class="hero__ticker-item">Multi-Model AI <span class="hero__ticker-item-sep"></span></span>
1600        <span class="hero__ticker-item">Export Ready <span class="hero__ticker-item-sep"></span></span>
1601        <span class="hero__ticker-item">4K Output <span class="hero__ticker-item-sep"></span></span>
1602      </div>
1603    </div>
1604
1605  </section>
1606
1607  <!-- ▼▼▼ NEXT SECTIONS WILL BE ADDED HERE ▼▼▼ -->
1608
1609  <!-- ═══════════════════════════════════════════
1610       NAV SCROLL + HERO JS
1611  ═══════════════════════════════════════════ -->
1612  
1612<script type="6c18279ba6d93a40249c492f-text/javascript">
1613    // Nav sticky scroll effect
1614    const nav = document.getElementById('main-nav');
1615    window.addEventListener('scroll', () => {
1616      nav.classList.toggle('scrolled', window.scrollY > 40);
1617    }, { passive: true });
1618
1619    // Mobile menu toggle
1620    const hamburger  = document.querySelector('.nav__hamburger');
1621    const drawer     = document.getElementById('nav-drawer');
1622    const overlay    = document.getElementById('nav-overlay');
1623
1624    function openMenu() {
1625      hamburger.classList.add('is-open');
1626      drawer.classList.add('is-open');
1627      overlay.classList.add('is-open');
1628      hamburger.setAttribute('aria-expanded', 'true');
1629      hamburger.setAttribute('aria-label', 'Close menu');
1630      drawer.setAttribute('aria-hidden', 'false');
1631      overlay.setAttribute('aria-hidden', 'false');
1632      document.body.style.overflow = 'hidden';
1633    }
1634
1635    function closeMenu() {
1636      hamburger.classList.remove('is-open');
1637      drawer.classList.remove('is-open');
1638      overlay.classList.remove('is-open');
1639      hamburger.setAttribute('aria-expanded', 'false');
1640      hamburger.setAttribute('aria-label', 'Open menu');
1641      drawer.setAttribute('aria-hidden', 'true');
1642      overlay.setAttribute('aria-hidden', 'true');
1643      document.body.style.overflow = '';
1644    }
1645
1646    hamburger.addEventListener('click', () => {
1647      hamburger.classList.contains('is-open') ? closeMenu() : openMenu();
1648    });
1649
1650    overlay.addEventListener('click', closeMenu);
1651
1652    // Close menu on Escape key
1653    document.addEventListener('keydown', e => {
1654      if (e.key === 'Escape') closeMenu();
1655    });
1656
1657    // Close menu if window resized to desktop
1658    window.addEventListener('resize', () => {
1659      if (window.innerWidth > 900) closeMenu();
1660    });
1661
1662    // Counter animation for stats
1663    function animateCounter(el, target, suffix = '') {
1664      let start = 0;
1665      const duration = 1800;
1666      const step = timestamp => {
1667        if (!start) start = timestamp;
1668        const progress = Math.min((timestamp - start) / duration, 1);
1669        const eased = 1 - Math.pow(1 - progress, 3);
1670        el.textContent = Math.round(eased * target) + suffix;
1671        if (progress < 1) requestAnimationFrame(step);
1672      };
1673      requestAnimationFrame(step);
1674    }
1675
1676    // Trigger counters when hero stats enter view
1677    const statObserver = new IntersectionObserver(entries => {
1678      entries.forEach(entry => {
1679        if (entry.isIntersecting) {
1680          const stats = [
1681            { el: document.querySelectorAll('.hero__stat-value')[0], target: 6, suffix: '+' },
1682            { el: document.querySelectorAll('.hero__stat-value')[1], target: 4, suffix: 'K' },
1683            { el: document.querySelectorAll('.hero__stat-value')[2], target: 3, suffix: 's' },
1684          ];
1685          stats.forEach(s => {
1686            if (s.el) {
1687              s.el.innerHTML = '0' + `<span>${s.suffix.includes('+') ? '+' : s.suffix}</span>`;
1688              // Simple display — just set final after short delay for effect
1689              setTimeout(() => {
1690                s.el.innerHTML = s.target + `<span>${s.suffix.includes('+') ? '+' : s.suffix}</span>`;
1691              }, 900);
1692            }
1693          });
1694          statObserver.disconnect();
1695        }
1696      });
1697    }, { threshold: 0.5 });
1698
1699    const statsEl = document.querySelector('.hero__stats');
1700    if (statsEl) statObserver.observe(statsEl);
1701  </script>
1701
1702
1703
1704  <!-- ▼▼▼ SECTION 3 — WHY CHOOSE ▼▼▼ -->
1705  <style>
1706
1707    /* ═══════════════════════════════════════════
1708       WHY CHOOSE
1709    ═══════════════════════════════════════════ */
1710    .why {
1711      position: relative;
1712      padding-block: var(--section-pad);
1713      overflow: hidden;
1714    }
1715
1716    .why::before {
1717      content: '';
1718      position: absolute;
1719      top: 0;
1720      left: 50%;
1721      transform: translateX(-50%);
1722      width: 1px;
1723      height: 80px;
1724      background: linear-gradient(to bottom, transparent, var(--c-border-hi));
1725    }
1726
1727    .why__header {
1728      text-align: center;
1729      margin-bottom: clamp(3rem, 6vw, 5rem);
1730    }
1731
1732    .why__label {
1733      display: inline-flex;
1734      align-items: center;
1735      gap: 0.6rem;
1736      font-family: var(--font-mono);
1737      font-size: var(--text-xs);
1738      color: var(--c-accent);
1739      text-transform: uppercase;
1740      letter-spacing: 0.14em;
1741      margin-bottom: 1.25rem;
1742    }
1743
1744    .why__label-line {
1745      width: 32px;
1746      height: 1px;
1747      background: var(--c-accent);
1748      opacity: 0.5;
1749    }
1750
1751    .why__title {
1752      font-family: var(--font-display);
1753      font-size: clamp(2.8rem, 6vw, 5.5rem);
1754      line-height: 0.92;
1755      text-transform: uppercase;
1756      color: var(--c-white);
1757      letter-spacing: 0.02em;
1758      margin-bottom: 1.25rem;
1759    }
1760
1761    .why__title em {
1762      font-style: normal;
1763      color: var(--c-accent);
1764    }
1765
1766    .why__subtitle {
1767      font-size: var(--text-lg);
1768      color: var(--c-text-muted);
1769      max-width: 520px;
1770      margin-inline: auto;
1771      line-height: 1.6;
1772    }
1773
1774    /* BENTO GRID */
1775    .why__grid {
1776      display: grid;
1777      grid-template-columns: repeat(12, 1fr);
1778      gap: 1rem;
1779    }
1780
1781    .why__card {
1782      position: relative;
1783      background: var(--c-surface);
1784      border: 1px solid var(--c-border);
1785      border-radius: var(--r-xl);
1786      padding: clamp(1.5rem, 3vw, 2.25rem);
1787      overflow: hidden;
1788      opacity: 0;
1789      transform: translateY(32px);
1790      transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
1791                  border-color var(--t-base), box-shadow var(--t-slow);
1792    }
1793
1794    .why__card.in-view {
1795      opacity: 1;
1796      transform: translateY(0);
1797    }
1798
1799    .why__card:hover {
1800      border-color: var(--c-border-hi);
1801      transform: translateY(-4px);
1802      box-shadow: var(--shadow-lg);
1803    }
1804
1805    .why__card::before {
1806      content: '';
1807      position: absolute;
1808      inset: 0;
1809      border-radius: inherit;
1810      opacity: 0;
1811      transition: opacity var(--t-slow) var(--ease);
1812      pointer-events: none;
1813    }
1814
1815    .why__card:hover::before { opacity: 1; }
1816
1817    /* Grid placements */
1818    .why__card--1 { grid-column: span 5; }
1819    .why__card--2 { grid-column: span 4; }
1820    .why__card--3 { grid-column: span 3; grid-row: span 2; }
1821    .why__card--4 { grid-column: span 4; }
1822    .why__card--5 { grid-column: span 5; }
1823    .why__card--6 { grid-column: span 6; }
1824    .why__card--7 { grid-column: span 6; }
1825
1826    /* Per-card glows */
1827    .why__card--1::before { background: radial-gradient(circle at 0% 100%, rgba(212,255,0,0.08) 0%, transparent 60%); }
1828    .why__card--2::before { background: radial-gradient(circle at 100% 0%, rgba(0,194,255,0.08) 0%, transparent 60%); }
1829    .why__card--3::before { background: radial-gradient(circle at 50% 100%, rgba(255,77,0,0.1) 0%, transparent 60%); }
1830    .why__card--4::before { background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.08) 0%, transparent 60%); }
1831    .why__card--5::before { background: radial-gradient(circle at 100% 100%, rgba(212,255,0,0.07) 0%, transparent 60%); }
1832    .why__card--6::before { background: radial-gradient(circle at 0% 50%, rgba(0,194,255,0.07) 0%, transparent 60%); }
1833    .why__card--7::before { background: radial-gradient(circle at 100% 50%, rgba(255,77,0,0.07) 0%, transparent 60%); }
1834
1835    /* Stagger delays */
1836    .why__card--1 { transition-delay: 0.05s; }
1837    .why__card--2 { transition-delay: 0.12s; }
1838    .why__card--3 { transition-delay: 0.19s; }
1839    .why__card--4 { transition-delay: 0.26s; }
1840    .why__card--5 { transition-delay: 0.33s; }
1841    .why__card--6 { transition-delay: 0.40s; }
1842    .why__card--7 { transition-delay: 0.47s; }
1843
1844    .why__card-icon {
1845      width: 44px;
1846      height: 44px;
1847      border-radius: var(--r-md);
1848      display: grid;
1849      place-items: center;
1850      margin-bottom: 1.25rem;
1851    }
1852
1853    .why__card-icon svg { width: 22px; height: 22px; }
1854    .why__card-icon--lime   { background: rgba(212,255,0,0.12); }
1855    .why__card-icon--cyan   { background: rgba(0,194,255,0.12); }
1856    .why__card-icon--orange { background: rgba(255,77,0,0.12);  }
1857    .why__card-icon--purple { background: rgba(167,139,250,0.12); }
1858
1859    .why__card-tag {
1860      display: inline-block;
1861      font-family: var(--font-mono);
1862      font-size: 0.65rem;
1863      text-transform: uppercase;
1864      letter-spacing: 0.1em;
1865      padding: 0.2rem 0.6rem;
1866      border-radius: var(--r-full);
1867      margin-bottom: 0.75rem;
1868    }
1869
1870    .why__card-tag--lime   { color: var(--c-accent);   background: rgba(212,255,0,0.1);   border: 1px solid rgba(212,255,0,0.2); }
1871    .why__card-tag--cyan   { color: var(--c-accent-3); background: rgba(0,194,255,0.1);   border: 1px solid rgba(0,194,255,0.2); }
1872    .why__card-tag--orange { color: var(--c-accent-2); background: rgba(255,77,0,0.1);    border: 1px solid rgba(255,77,0,0.2);  }
1873    .why__card-tag--purple { color: #a78bfa;            background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.2); }
1874
1875    .why__card-title {
1876      font-family: var(--font-display);
1877      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
1878      line-height: 1;
1879      text-transform: uppercase;
1880      letter-spacing: 0.03em;
1881      color: var(--c-white);
1882      margin-bottom: 0.6rem;
1883    }
1884
1885    .why__card-desc {
1886      font-size: var(--text-sm);
1887      color: var(--c-text-muted);
1888      line-height: 1.65;
1889    }
1890
1891    /* Card 1 inner layout */
1892    .why__card--1 .why__card-inner {
1893      display: flex;
1894      align-items: flex-start;
1895      gap: 1.5rem;
1896    }
1897
1898    .why__card--1 .why__card-body { flex: 1; }
1899
1900    /* Orbit */
1901    .why__orbit {
1902      position: relative;
1903      width: 100px;
1904      height: 100px;
1905      flex-shrink: 0;
1906    }
1907
1908    .why__orbit-center {
1909      position: absolute;
1910      top: 50%;
1911      left: 50%;
1912      transform: translate(-50%, -50%);
1913      width: 32px;
1914      height: 32px;
1915      background: var(--c-accent);
1916      border-radius: 50%;
1917      display: grid;
1918      place-items: center;
1919    }
1920
1921    .why__orbit-ring {
1922      position: absolute;
1923      top: 50%;
1924      left: 50%;
1925      border: 1px solid rgba(255,255,255,0.1);
1926      border-radius: 50%;
1927      transform: translate(-50%, -50%);
1928    }
1929
1930    .why__orbit-ring--1 { width: 60px;  height: 60px;  animation: spin 8s linear infinite; }
1931    .why__orbit-ring--2 { width: 100px; height: 100px; animation: spin 14s linear infinite reverse; border-style: dashed; }
1932
1933    @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
1934
1935    .why__orbit-dot {
1936      position: absolute;
1937      width: 8px;
1938      height: 8px;
1939      border-radius: 50%;
1940      top: 0;
1941      left: 50%;
1942      transform: translateX(-50%) translateY(-4px);
1943    }
1944
1945    /* Card 3 — Tall accent */
1946    .why__card--3 {
1947      background: linear-gradient(160deg, #1a1400 0%, #0f0f0f 60%);
1948      border-color: rgba(212,255,0,0.2);
1949      display: flex;
1950      flex-direction: column;
1951      justify-content: space-between;
1952    }
1953
1954    .why__big-num {
1955      font-family: var(--font-display);
1956      font-size: clamp(4rem, 7vw, 6rem);
1957      line-height: 1;
1958      color: var(--c-accent);
1959      letter-spacing: 0.02em;
1960      margin: 0.5rem 0;
1961    }
1962
1963    .why__speed-bars {
1964      display: flex;
1965      flex-direction: column;
1966      gap: 0.5rem;
1967      margin-top: 1.5rem;
1968    }
1969
1970    .why__speed-bar {
1971      display: flex;
1972      align-items: center;
1973      gap: 0.75rem;
1974    }
1975
1976    .why__speed-bar-label {
1977      font-family: var(--font-mono);
1978      font-size: 0.65rem;
1979      color: var(--c-text-dim);
1980      width: 52px;
1981      text-transform: uppercase;
1982      letter-spacing: 0.06em;
1983    }
1984
1985    .why__speed-bar-track {
1986      flex: 1;
1987      height: 4px;
1988      background: rgba(255,255,255,0.06);
1989      border-radius: 99px;
1990      overflow: hidden;
1991    }
1992
1993    .why__speed-bar-fill {
1994      height: 100%;
1995      border-radius: 99px;
1996      width: 0;
1997      transition: width 1.2s var(--ease);
1998    }
1999
2000    .why__card.in-view .why__speed-bar-fill { width: var(--fill-w); }
2001
2002    /* Card 5 — Export formats */
2003    .why__formats {
2004      display: flex;
2005      flex-wrap: wrap;
2006      gap: 0.5rem;
2007      margin-top: 1rem;
2008    }
2009
2010    .why__format-pill {
2011      padding: 0.35rem 0.85rem;
2012      border: 1px solid var(--c-border);
2013      border-radius: var(--r-full);
2014      font-family: var(--font-mono);
2015      font-size: 0.7rem;
2016      color: var(--c-text-muted);
2017      transition: all var(--t-fast);
2018    }
2019
2020    .why__card:hover .why__format-pill:nth-child(1) { border-color: rgba(212,255,0,0.5);   color: var(--c-accent);  }
2021    .why__card:hover .why__format-pill:nth-child(2) { border-color: rgba(0,194,255,0.5);   color: var(--c-accent-3); }
2022    .why__card:hover .why__format-pill:nth-child(3) { border-color: rgba(255,77,0,0.5);    color: var(--c-accent-2); }
2023    .why__card:hover .why__format-pill:nth-child(4) { border-color: rgba(167,139,250,0.5); color: #a78bfa; }
2024
2025    /* Card 6 — avatars */
2026    .why__avatars {
2027      display: flex;
2028      margin-top: 1rem;
2029    }
2030
2031    .why__avatar {
2032      width: 36px;
2033      height: 36px;
2034      border-radius: 50%;
2035      border: 2px solid var(--c-surface);
2036      margin-left: -10px;
2037      background: var(--c-bg-3);
2038      display: grid;
2039      place-items: center;
2040      font-size: 0.7rem;
2041      font-family: var(--font-mono);
2042      color: var(--c-text-muted);
2043      transition: transform var(--t-base) var(--ease);
2044    }
2045
2046    .why__avatar:first-child { margin-left: 0; }
2047    .why__card:hover .why__avatar { transform: translateX(-4px); }
2048    .why__card:hover .why__avatar:first-child { transform: translateX(0); }
2049
2050    .why__avatar-more {
2051      background: rgba(212,255,0,0.15);
2052      color: var(--c-accent);
2053      font-size: 0.6rem;
2054      border-color: rgba(212,255,0,0.2);
2055    }
2056
2057    /* CTA strip */
2058    .why__cta {
2059      display: flex;
2060      align-items: center;
2061      justify-content: center;
2062      gap: 1.5rem;
2063      margin-top: clamp(2.5rem, 5vw, 4rem);
2064      padding-top: clamp(2rem, 4vw, 3rem);
2065      border-top: 1px solid var(--c-border);
2066      flex-wrap: wrap;
2067      text-align: center;
2068    }
2069
2070    .why__cta-text {
2071      font-size: var(--text-lg);
2072      color: var(--c-text-muted);
2073    }
2074
2075    .why__cta-text strong { color: var(--c-white); }
2076
2077    /* Responsive */
2078    @media (max-width: 1024px) {
2079      .why__card--1 { grid-column: span 7; }
2080      .why__card--2 { grid-column: span 5; }
2081      .why__card--3 { grid-column: span 4; grid-row: span 1; }
2082      .why__card--4 { grid-column: span 8; }
2083      .why__card--5 { grid-column: span 6; }
2084      .why__card--6 { grid-column: span 6; }
2085      .why__card--7 { grid-column: span 12; }
2086    }
2087
2088    @media (max-width: 768px) {
2089      .why__grid { grid-template-columns: 1fr 1fr; }
2090      .why__card--1,
2091      .why__card--2,
2092      .why__card--3,
2093      .why__card--4,
2094      .why__card--5,
2095      .why__card--6,
2096      .why__card--7 { grid-column: span 2; }
2097      .why__card--1 .why__card-inner { flex-direction: column; }
2098    }
2099
2100    @media (max-width: 480px) {
2101      .why__grid { grid-template-columns: 1fr; }
2102      .why__card { grid-column: span 1 !important; }
2103    }
2104
2105  </style>
2106
2107  <section class="why" id="why" aria-label="Why Choose AI Video Generator">
2108    <div class="container">
2109
2110      <div class="why__header">
2111        <div class="why__label">
2112          <span class="why__label-line"></span>
2113          <span data-i18n="why_section_label">Why Choose Us</span>
2114          <span class="why__label-line"></span>
2115        </div>
2116        <h2 class="why__title"><span data-i18n="why_title_line1">Built Different.</span><br><em data-i18n="why_title_line2">Works Better.</em></h2>
2117        <p class="why__subtitle" data-i18n="why_subtitle">Everything a modern video creator needs — in one unified, multi-model workspace.</p>
2118      </div>
2119
2120      <div class="why__grid">
2121
2122        <!-- Card 1 — Multi-model -->
2123        <div class="why__card why__card--1" data-why>
2124          <div class="why__card-inner">
2125            <div class="why__card-body">
2126              <div class="why__card-icon why__card-icon--lime">
2127                <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5">
2128                  <circle cx="11" cy="11" r="9"/>
2129                  <path d="M11 2v18M2 11h18M4.93 4.93l12.14 12.14M17.07 4.93L4.93 17.07"/>
2130                </svg>
2131              </div>
2132              <span class="why__card-tag why__card-tag--lime" data-i18n="why_card1_tag">Core Advantage</span>
2133              <h3 class="why__card-title" data-i18n="why_card1_title">6+ AI Models,<br>One Workspace</h3>
2134              <p class="why__card-desc" data-i18n="why_card1_desc">Switch between Text→Video, Image→Video, Cinematic, Character-Consistent and Anime models instantly. No tab-hopping, no re-uploading.</p>
2135            </div>
2136            <div class="why__orbit" aria-hidden="true">
2137              <div class="why__orbit-ring why__orbit-ring--1">
2138                <span class="why__orbit-dot" style="background:#d4ff00"></span>
2139              </div>
2140              <div class="why__orbit-ring why__orbit-ring--2">
2141                <span class="why__orbit-dot" style="background:#00c2ff; top:auto; bottom:0; transform:translateX(-50%) translateY(4px)"></span>
2142              </div>
2143              <div class="why__orbit-center">
2144                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
2145                  <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/>
2146                </svg>
2147              </div>
2148            </div>
2149          </div>
2150        </div>
2151
2152        <!-- Card 2 — Speed -->
2153        <div class="why__card why__card--2" data-why>
2154          <div class="why__card-icon why__card-icon--cyan">
2155            <svg viewBox="0 0 22 22" fill="none" stroke="#00c2ff" stroke-width="1.5">
2156              <path d="M13 2L4.5 13H11L9 20L17.5 9H11L13 2Z" stroke-linejoin="round"/>
2157            </svg>
2158          </div>
2159          <span class="why__card-tag why__card-tag--cyan" data-i18n="why_card2_tag">Speed</span>
2160          <h3 class="why__card-title" data-i18n="why_card2_title">Avg. 3s<br>Generation</h3>
2161          <p class="why__card-desc" data-i18n="why_card2_desc">Optimized inference pipelines deliver results fast. Iterate in real-time, not real-minutes.</p>
2162        </div>
2163
2164        <!-- Card 3 — Tall: Resolution -->
2165        <div class="why__card why__card--3" data-why>
2166          <div>
2167            <div class="why__card-icon why__card-icon--lime">
2168              <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5">
2169                <rect x="2" y="5" width="18" height="12" rx="2"/>
2170                <path d="M7 9h8M7 13h5"/>
2171              </svg>
2172            </div>
2173            <span class="why__card-tag why__card-tag--lime" data-i18n="why_card3_tag">Quality</span>
2174            <div class="why__big-num">4K</div>
2175            <h3 class="why__card-title" data-i18n="why_card3_title">Max<br>Resolution</h3>
2176            <p class="why__card-desc" data-i18n="why_card3_desc">Sharp, export-ready video output for any platform.</p>
2177          </div>
2178          <div class="why__speed-bars">
2179            <div class="why__speed-bar">
2180              <span class="why__speed-bar-label">720p</span>
2181              <div class="why__speed-bar-track">
2182                <div class="why__speed-bar-fill" style="--fill-w:45%; background:#444;"></div>
2183              </div>
2184            </div>
2185            <div class="why__speed-bar">
2186              <span class="why__speed-bar-label">1080p</span>
2187              <div class="why__speed-bar-track">
2188                <div class="why__speed-bar-fill" style="--fill-w:68%; background:#888;"></div>
2189              </div>
2190            </div>
2191            <div class="why__speed-bar">
2192              <span class="why__speed-bar-label">4K</span>
2193              <div class="why__speed-bar-track">
2194                <div class="why__speed-bar-fill" style="--fill-w:100%; background:#d4ff00;"></div>
2195              </div>
2196            </div>
2197          </div>
2198        </div>
2199
2200        <!-- Card 4 — Style Presets -->
2201        <div class="why__card why__card--4" data-why>
2202          <div class="why__card-icon why__card-icon--purple">
2203            <svg viewBox="0 0 22 22" fill="none" stroke="#a78bfa" stroke-width="1.5">
2204              <circle cx="11" cy="11" r="3"/>
2205              <path d="M11 2v3M11 17v3M2 11h3M17 11h3M4.93 4.93l2.12 2.12M14.95 14.95l2.12 2.12M4.93 17.07l2.12-2.12M14.95 7.05l2.12-2.12"/>
2206            </svg>
2207          </div>
2208          <span class="why__card-tag why__card-tag--purple" data-i18n="why_card4_tag">Presets</span>
2209          <h3 class="why__card-title" data-i18n="why_card4_title">10+ Style<br>Presets</h3>
2210          <p class="why__card-desc" data-i18n="why_card4_desc">Cinematic, Anime, Retro Film, Abstract — one click sets the entire visual mood.</p>
2211        </div>
2212
2213        <!-- Card 5 — Export -->
2214        <div class="why__card why__card--5" data-why>
2215          <div class="why__card-icon why__card-icon--lime">
2216            <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5">
2217              <path d="M4 14v4a1 1 0 001 1h12a1 1 0 001-1v-4M11 3v11M7 10l4 4 4-4"/>
2218            </svg>
2219          </div>
2220          <span class="why__card-tag why__card-tag--lime" data-i18n="why_card5_tag">Export</span>
2221          <h3 class="why__card-title" data-i18n="why_card5_title">Export-Ready<br>Outputs</h3>
2222          <p class="why__card-desc" data-i18n="why_card5_desc">Download in the format that fits your workflow — no conversion needed.</p>
2223          <div class="why__formats">
2224            <span class="why__format-pill">MP4</span>
2225            <span class="why__format-pill">WebM</span>
2226            <span class="why__format-pill">GIF</span>
2227            <span class="why__format-pill">MOV</span>
2228          </div>
2229        </div>
2230
2231        <!-- Card 6 — Character Consistency -->
2232        <div class="why__card why__card--6" data-why>
2233          <div class="why__card-icon why__card-icon--cyan">
2234            <svg viewBox="0 0 22 22" fill="none" stroke="#00c2ff" stroke-width="1.5">
2235              <circle cx="11" cy="8" r="3.5"/>
2236              <path d="M4 19c0-3.87 3.13-7 7-7h0c3.87 0 7 3.13 7 7"/>
2237              <path d="M16 6l2 2-2 2" stroke-linecap="round"/>
2238            </svg>
2239          </div>
2240          <span class="why__card-tag why__card-tag--cyan" data-i18n="why_card6_tag">Consistency</span>
2241          <h3 class="why__card-title" data-i18n="why_card6_title">Character-Stable<br>Across Clips</h3>
2242          <p class="why__card-desc" data-i18n="why_card6_desc">Keep identity, outfit and style locked across every scene — built for series, avatars and narrative continuity.</p>
2243          <div class="why__avatars" aria-hidden="true">
2244            <div class="why__avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">C1</div>
2245            <div class="why__avatar" style="background:linear-gradient(135deg,#1a1a3a,#0a0a20)">C2</div>
2246            <div class="why__avatar" style="background:linear-gradient(135deg,#3a1a1a,#200a0a)">C3</div>
2247            <div class="why__avatar why__avatar-more">+5</div>
2248          </div>
2249        </div>
2250
2251        <!-- Card 7 — Privacy -->
2252        <div class="why__card why__card--7" data-why>
2253          <div class="why__card-icon why__card-icon--orange">
2254            <svg viewBox="0 0 22 22" fill="none" stroke="#ff4d00" stroke-width="1.5">
2255              <path d="M11 2L3 6v5c0 4.42 3.36 8.56 8 9.56C16.64 19.56 20 15.42 20 11V6l-9-4z"/>
2256              <path d="M8 11l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
2257            </svg>
2258          </div>
2259          <span class="why__card-tag why__card-tag--orange" data-i18n="why_card7_tag">Ownership</span>
2260          <h3 class="why__card-title" data-i18n="why_card7_title">You Own What You Create</h3>
2261          <p class="why__card-desc" data-i18n="why_card7_desc">All outputs are yours. No watermarks on paid plans. Your prompts and uploads are private — never used to train AI without your explicit consent.</p>
2262        </div>
2263
2264      </div>
2265
2266      <div class="why__cta">
2267        <p class="why__cta-text"><strong data-i18n="why_cta_text_strong">Ready to see the difference?</strong> <span data-i18n="why_cta_text">Start generating for free — no credit card required.</span></p>
2268        <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="why_cta_btn">Start Free Now</a>
2269      </div>
2270
2271    </div>
2272  </section>
2273
2274  
2274<script type="6c18279ba6d93a40249c492f-text/javascript">
2275    const whyCards = document.querySelectorAll('[data-why]');
2276    const whyObserver = new IntersectionObserver(entries => {
2277      entries.forEach(entry => {
2278        if (entry.isIntersecting) {
2279          entry.target.classList.add('in-view');
2280          whyObserver.unobserve(entry.target);
2281        }
2282      });
2283    }, { threshold: 0.12 });
2284    whyCards.forEach(c => whyObserver.observe(c));
2285  </script>
vendor: 144 bytes, lines 2285-2287
2285
2286
2287<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="6c18279ba6d93a40249c492f-|49" defer></script>
2287</body>
2288</html>
2289
2290
2291  <!-- ▼▼▼ SECTION 4 — HOW TO CREATE AI VIDEOS ▼▼▼ -->
2292  <style>
2293    .how {
2294      position: relative;
2295      padding-block: var(--section-pad);
2296      overflow: hidden;
2297      background: var(--c-bg-2);
2298    }
2299    .how::before, .how::after {
2300      content: '';
2301      position: absolute;
2302      left: 0; right: 0;
2303      height: 120px;
2304      pointer-events: none;
2305      z-index: 2;
2306    }
2307    .how::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); }
2308    .how::after  { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); }
2309
2310    .how__stripe {
2311      position: absolute;
2312      inset: 0;
2313      background: repeating-linear-gradient(-55deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px);
2314      pointer-events: none;
2315    }
2316
2317    .how__header { text-align: center; margin-bottom: clamp(4rem,8vw,6rem); position: relative; z-index: 3; }
2318
2319    .how__label {
2320      display: inline-flex; align-items: center; gap: 0.6rem;
2321      font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-accent-3);
2322      text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 1.25rem;
2323    }
2324    .how__label-line { width: 32px; height: 1px; background: var(--c-accent-3); opacity: 0.5; }
2325
2326    .how__title {
2327      font-family: var(--font-display);
2328      font-size: clamp(2.8rem,6vw,5.5rem);
2329      line-height: 0.92; text-transform: uppercase; color: var(--c-white);
2330      letter-spacing: 0.02em; margin-bottom: 1.25rem;
2331    }
2332    .how__title em { font-style: normal; color: var(--c-accent-3); }
2333
2334    .how__subtitle { font-size: var(--text-lg); color: var(--c-text-muted); max-width: 480px; margin-inline: auto; line-height: 1.6; }
2335
2336    /* Steps layout */
2337    .how__steps {
2338      position: relative; z-index: 3;
2339      display: grid; grid-template-columns: 1fr 1fr;
2340      gap: clamp(3rem,6vw,5rem); align-items: center;
2341    }
2342
2343    .how__list { display: flex; flex-direction: column; }
2344
2345    .how__step {
2346      display: flex; gap: 1.5rem; padding: 1.75rem 0; position: relative;
2347      cursor: pointer; opacity: 0; transform: translateX(-24px);
2348      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
2349    }
2350    .how__step.in-view { opacity: 1; transform: translateX(0); }
2351    .how__step:nth-child(1) { transition-delay: 0.05s; }
2352    .how__step:nth-child(2) { transition-delay: 0.15s; }
2353    .how__step:nth-child(3) { transition-delay: 0.25s; }
2354    .how__step:nth-child(4) { transition-delay: 0.35s; }
2355
2356    .how__step:not(:last-child)::after {
2357      content: ''; position: absolute;
2358      left: 22px; top: calc(1.75rem + 48px); bottom: 0;
2359      width: 1px; background: linear-gradient(to bottom, var(--c-border-hi), transparent);
2360    }
2361    .how__step.is-active:not(:last-child)::after { background: linear-gradient(to bottom, rgba(0,194,255,0.4), transparent); }
2362
2363    .how__step-num {
2364      flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
2365      border: 1px solid var(--c-border-hi); display: grid; place-items: center;
2366      font-family: var(--font-display); font-size: 1.5rem; color: var(--c-text-dim);
2367      background: var(--c-bg-2); transition: all var(--t-base) var(--ease); position: relative; z-index: 1;
2368    }
2369    .how__step.is-active .how__step-num, .how__step:hover .how__step-num {
2370      border-color: var(--c-accent-3); color: var(--c-accent-3);
2371      background: rgba(0,194,255,0.08); box-shadow: 0 0 20px rgba(0,194,255,0.2);
2372    }
2373
2374    .how__step-body { flex: 1; padding-top: 0.25rem; }
2375
2376    .how__step-tag {
2377      display: inline-block; font-family: var(--font-mono); font-size: 0.6rem;
2378      text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim);
2379      margin-bottom: 0.4rem; transition: color var(--t-base);
2380    }
2381    .how__step.is-active .how__step-tag, .how__step:hover .how__step-tag { color: var(--c-accent-3); }
2382
2383    .how__step-title {
2384      font-family: var(--font-display); font-size: clamp(1.3rem,2.5vw,1.75rem);
2385      line-height: 1; text-transform: uppercase; letter-spacing: 0.03em;
2386      color: var(--c-text-muted); margin-bottom: 0.5rem; transition: color var(--t-base);
2387    }
2388    .how__step.is-active .how__step-title, .how__step:hover .how__step-title { color: var(--c-white); }
2389
2390    .how__step-desc {
2391      font-size: var(--text-sm); color: var(--c-text-dim); line-height: 1.65;
2392      max-height: 0; overflow: hidden; opacity: 0;
2393      transition: max-height 0.5s var(--ease), opacity 0.4s;
2394    }
2395    .how__step.is-active .how__step-desc, .how__step:hover .how__step-desc {
2396      max-height: 120px; opacity: 1; color: var(--c-text-muted);
2397    }
2398
2399    .how__step-arrow {
2400      align-self: flex-start; padding-top: 0.35rem; color: var(--c-text-dim); flex-shrink: 0;
2401      transition: color var(--t-base), transform var(--t-base) var(--ease);
2402    }
2403    .how__step.is-active .how__step-arrow, .how__step:hover .how__step-arrow {
2404      color: var(--c-accent-3); transform: translateX(4px);
2405    }
2406
2407    /* Preview card */
2408    .how__preview {
2409      position: relative; opacity: 0; transform: translateX(32px);
2410      transition: opacity 0.8s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s;
2411    }
2412    .how__preview.in-view { opacity: 1; transform: translateX(0); }
2413
2414    .how__preview-card {
2415      background: var(--c-surface); border: 1px solid var(--c-border-hi);
2416      border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; position: relative;
2417    }
2418
2419    .how__panel {
2420      position: absolute; inset: 0; padding: 2rem;
2421      display: flex; flex-direction: column; justify-content: space-between;
2422      opacity: 0; transform: scale(0.97) translateY(10px);
2423      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
2424      pointer-events: none;
2425    }
2426    .how__panel.is-active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
2427
2428    .how__panel--1 { background: linear-gradient(140deg, #111a0a 0%, #0d0d0d 100%); }
2429    .how__panel--2 { background: linear-gradient(140deg, #0a101a 0%, #0d0d0d 100%); }
2430    .how__panel--3 { background: linear-gradient(140deg, #1a100a 0%, #0d0d0d 100%); }
2431    .how__panel--4 { background: linear-gradient(140deg, #100a1a 0%, #0d0d0d 100%); }
2432
2433    .how__panel-label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim); }
2434    .how__panel-title { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.8rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-white); }
2435
2436    /* Panel 1 */
2437    .how__input-types { display: flex; gap: 0.75rem; flex-wrap: wrap; }
2438    .how__input-pill {
2439      display: flex; align-items: center; gap: 0.5rem;
2440      padding: 0.6rem 1.1rem; border-radius: var(--r-full); font-size: var(--text-sm);
2441      font-weight: 500; border: 1px solid var(--c-border-hi); color: var(--c-text-muted);
2442      transition: all var(--t-base) var(--ease); cursor: pointer;
2443    }
2444    .how__input-pill.selected { background: rgba(212,255,0,0.1); border-color: rgba(212,255,0,0.5); color: var(--c-accent); }
2445    .how__input-pill svg { width: 14px; height: 14px; }
2446
2447    /* Panel 2 */
2448    .how__model-list { display: flex; flex-direction: column; gap: 0.5rem; }
2449    .how__model-row {
2450      display: flex; align-items: center; gap: 0.75rem;
2451      padding: 0.65rem 0.9rem; border-radius: var(--r-md);
2452      border: 1px solid transparent; transition: all var(--t-fast); cursor: pointer;
2453    }
2454    .how__model-row.selected { border-color: rgba(0,194,255,0.3); background: rgba(0,194,255,0.06); }
2455    .how__model-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
2456    .how__model-row-name { font-size: var(--text-sm); color: var(--c-text-muted); flex: 1; }
2457    .how__model-row.selected .how__model-row-name { color: var(--c-accent-3); }
2458    .how__model-row-badge { font-family: var(--font-mono); font-size: 0.6rem; padding: 0.15rem 0.5rem; border-radius: var(--r-full); background: rgba(0,194,255,0.1); color: var(--c-accent-3); border: 1px solid rgba(0,194,255,0.2); }
2459
2460    /* Panel 3 */
2461    .how__prompt-box { background: rgba(0,0,0,0.4); border: 1px solid var(--c-border-hi); border-radius: var(--r-lg); padding: 1rem 1.25rem; }
2462    .how__prompt-text { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-text-muted); line-height: 1.7; }
2463    .how__prompt-cursor { display: inline-block; width: 2px; height: 14px; background: var(--c-accent-2); vertical-align: middle; margin-left: 2px; animation: blink 1s step-end infinite; }
2464    @keyframes blink { 50% { opacity: 0; } }
2465    .how__prompt-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
2466    .how__generate-btn {
2467      display: flex; align-items: center; gap: 0.5rem;
2468      padding: 0.55rem 1.1rem; background: var(--c-accent-2); color: var(--c-bg);
2469      border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600;
2470      letter-spacing: 0.04em; transition: all var(--t-base) var(--ease);
2471    }
2472    .how__generate-btn:hover { background: #ff6620; transform: scale(1.04); }
2473
2474    /* Panel 4 */
2475    .how__export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
2476    .how__export-item {
2477      background: rgba(0,0,0,0.3); border: 1px solid var(--c-border); border-radius: var(--r-md);
2478      padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.6rem;
2479      font-size: var(--text-xs); color: var(--c-text-muted); transition: all var(--t-fast);
2480    }
2481    .how__export-item:hover { border-color: var(--c-border-hi); color: var(--c-text); }
2482    .how__export-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
2483
2484    /* Progress dots */
2485    .how__dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; }
2486    .how__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-border-hi); transition: all var(--t-base) var(--ease); cursor: pointer; }
2487    .how__dot.is-active { width: 20px; border-radius: var(--r-full); background: var(--c-accent-3); }
2488
2489    /* Big deco number */
2490    .how__big-step-num {
2491      position: absolute; top: -2rem; right: -1rem;
2492      font-family: var(--font-display); font-size: 10rem; line-height: 1;
2493      color: rgba(255,255,255,0.025); letter-spacing: 0.02em;
2494      pointer-events: none; user-select: none; transition: opacity 0.4s;
2495    }
2496
2497    /* CTA */
2498    .how__cta { display: flex; justify-content: center; margin-top: clamp(3rem,6vw,5rem); position: relative; z-index: 3; }
2499
2500    @media (max-width: 900px) {
2501      .how__steps { grid-template-columns: 1fr; }
2502      .how__preview { order: -1; max-width: 520px; width: 100%; margin-inline: auto; }
2503    }
2504    @media (max-width: 480px) {
2505      .how__input-types { flex-direction: column; }
2506      .how__export-grid { grid-template-columns: 1fr; }
2507    }
2508  </style>
2509
2510  <section class="how" id="how" aria-label="How to Create AI Videos">
2511    <div class="how__stripe" aria-hidden="true"></div>
2512    <div class="container">
2513
2514      <div class="how__header">
2515        <div class="how__label">
2516          <span class="how__label-line"></span>
2517          <span data-i18n="how_section_label">How It Works</span>
2518          <span class="how__label-line"></span>
2519        </div>
2520        <h2 class="how__title"><span data-i18n="how_title_line1">Go From Idea</span><br>to <em data-i18n="how_title_accent">Video</em> <span data-i18n="how_title_line2">in 4 Steps</span></h2>
2521        <p class="how__subtitle" data-i18n="how_subtitle">No learning curve. No tool-switching. Just clear steps and smart defaults that get you there fast.</p>
2522      </div>
2523
2524      <div class="how__steps">
2525
2526        <!-- LEFT — Step list -->
2527        <div class="how__list">
2528
2529          <div class="how__step is-active" data-how data-step="1">
2530            <div class="how__step-num">1</div>
2531            <div class="how__step-body">
2532              <span class="how__step-tag" data-i18n="how_step1_tag">Step One</span>
2533              <h3 class="how__step-title" data-i18n="how_step1_title">Choose Your Input</h3>
2534              <p class="how__step-desc" data-i18n="how_step1_desc">Start with a text prompt or upload an image. Text is great for storytelling and new scenes. Images unlock animation and motion controls.</p>
2535            </div>
2536            <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none">
2537              <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2538            </svg>
2539          </div>
2540
2541          <div class="how__step" data-how data-step="2">
2542            <div class="how__step-num">2</div>
2543            <div class="how__step-body">
2544              <span class="how__step-tag" data-i18n="how_step2_tag">Step Two</span>
2545              <h3 class="how__step-title" data-i18n="how_step2_title">Pick a Model</h3>
2546              <p class="how__step-desc" data-i18n="how_step2_desc">Select from 6+ AI model categories — or use Auto-Recommend and let the system choose based on your goal, input type, and style.</p>
2547            </div>
2548            <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none">
2549              <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2550            </svg>
2551          </div>
2552
2553          <div class="how__step" data-how data-step="3">
2554            <div class="how__step-num">3</div>
2555            <div class="how__step-body">
2556              <span class="how__step-tag" data-i18n="how_step3_tag">Step Three</span>
2557              <h3 class="how__step-title" data-i18n="how_step3_title">Write &amp; Generate</h3>
2558              <p class="how__step-desc" data-i18n="how_step3_desc">Enter your prompt, dial in motion and style presets, then hit generate. The first result is ready in seconds — iterate as many times as you need.</p>
2559            </div>
2560            <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none">
2561              <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2562            </svg>
2563          </div>
2564
2565          <div class="how__step" data-how data-step="4">
2566            <div class="how__step-num">4</div>
2567            <div class="how__step-body">
2568              <span class="how__step-tag" data-i18n="how_step4_tag">Step Four</span>
2569              <h3 class="how__step-title" data-i18n="how_step4_title">Export &amp; Ship</h3>
2570              <p class="how__step-desc" data-i18n="how_step4_desc">Download in MP4, WebM, GIF or MOV. No watermarks on paid plans. Your video is ready to drop straight into your content workflow.</p>
2571            </div>
2572            <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none">
2573              <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2574            </svg>
2575          </div>
2576
2577        </div>
2578
2579        <!-- RIGHT — Preview card -->
2580        <div class="how__preview" data-how-preview>
2581          <div class="how__big-step-num" id="how-big-num">1</div>
2582          <div class="how__preview-card">
2583
2584            <!-- Panel 1 -->
2585            <div class="how__panel how__panel--1 is-active" data-panel="1">
2586              <div>
2587                <span class="how__panel-label" data-i18n="how_panel1_label">Step 01 — Input</span>
2588                <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel1_title">Choose<br>Your Input</h4>
2589              </div>
2590              <div class="how__input-types">
2591                <div class="how__input-pill selected" data-i18n="how_input_text">
2592                  <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
2593                  Text → Video
2594                </div>
2595                <div class="how__input-pill" data-i18n="how_input_image">
2596                  <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="2" width="12" height="10" rx="1.5"/><path d="M5 6l3 2-3 2V6z" fill="currentColor" stroke="none"/></svg>
2597                  Image → Video
2598                </div>
2599                <div class="how__input-pill" data-i18n="how_input_character">
2600                  <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="5" cy="5" r="2.5"/><path d="M1 13c0-2.76 1.79-5 4-5h2c2.21 0 4 2.24 4 5"/></svg>
2601                  Character
2602                </div>
2603              </div>
2604              <div class="how__dots">
2605                <div class="how__dot is-active"></div>
2606                <div class="how__dot"></div>
2607                <div class="how__dot"></div>
2608                <div class="how__dot"></div>
2609              </div>
2610            </div>
2611
2612            <!-- Panel 2 -->
2613            <div class="how__panel how__panel--2" data-panel="2">
2614              <div>
2615                <span class="how__panel-label" data-i18n="how_panel2_label">Step 02 — Model</span>
2616                <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel2_title">Pick a<br>Model</h4>
2617              </div>
2618              <div class="how__model-list">
2619                <div class="how__model-row selected">
2620                  <span class="how__model-row-dot" style="background:#00c2ff"></span>
2621                  <span class="how__model-row-name" data-i18n="how_model_auto">Auto-Recommend</span>
2622                  <span class="how__model-row-badge" data-i18n="how_model_auto_badge">Best match</span>
2623                </div>
2624                <div class="how__model-row">
2625                  <span class="how__model-row-dot" style="background:#d4ff00"></span>
2626                  <span class="how__model-row-name" data-i18n="how_model_text">Text → Video</span>
2627                </div>
2628                <div class="how__model-row">
2629                  <span class="how__model-row-dot" style="background:#ff4d00"></span>
2630                  <span class="how__model-row-name" data-i18n="how_model_cinematic">Cinematic</span>
2631                </div>
2632                <div class="how__model-row">
2633                  <span class="how__model-row-dot" style="background:#a78bfa"></span>
2634                  <span class="how__model-row-name" data-i18n="how_model_anime">Anime / Stylized</span>
2635                </div>
2636              </div>
2637              <div class="how__dots">
2638                <div class="how__dot"></div>
2639                <div class="how__dot is-active"></div>
2640                <div class="how__dot"></div>
2641                <div class="how__dot"></div>
2642              </div>
2643            </div>
2644
2645            <!-- Panel 3 -->
2646            <div class="how__panel how__panel--3" data-panel="3">
2647              <div>
2648                <span class="how__panel-label" data-i18n="how_panel3_label">Step 03 — Prompt</span>
2649                <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel3_title">Write &amp;<br>Generate</h4>
2650              </div>
2651              <div class="how__prompt-box">
2652                <p class="how__prompt-text">"Neon-lit city at night, slow cinematic dolly-in, rain on streets, moody atmosphere, shallow depth of field<span class="how__prompt-cursor"></span>"</p>
2653                <div class="how__prompt-actions">
2654                    <button class="how__generate-btn" data-i18n="how_generate_btn">
2655                    <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/></svg>
2656                    Generate
2657                  </button>
2658                </div>
2659              </div>
2660              <div class="how__dots">
2661                <div class="how__dot"></div>
2662                <div class="how__dot"></div>
2663                <div class="how__dot is-active"></div>
2664                <div class="how__dot"></div>
2665              </div>
2666            </div>
2667
2668            <!-- Panel 4 -->
2669            <div class="how__panel how__panel--4" data-panel="4">
2670              <div>
2671                <span class="how__panel-label" data-i18n="how_panel4_label">Step 04 — Export</span>
2672                <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel4_title">Export &amp;<br>Ship</h4>
2673              </div>
2674              <div class="how__export-grid">
2675                <div class="how__export-item" data-i18n="how_export_mp4">
2676                  <div class="how__export-icon" style="background:rgba(212,255,0,0.1)">
2677                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#d4ff00" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg>
2678                  </div>MP4
2679                </div>
2680                <div class="how__export-item" data-i18n="how_export_webm">
2681                  <div class="how__export-icon" style="background:rgba(0,194,255,0.1)">
2682                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#00c2ff" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg>
2683                  </div>WebM
2684                </div>
2685                <div class="how__export-item" data-i18n="how_export_gif">
2686                  <div class="how__export-icon" style="background:rgba(255,77,0,0.1)">
2687                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#ff4d00" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg>
2688                  </div>GIF
2689                </div>
2690                <div class="how__export-item" data-i18n="how_export_mov">
2691                  <div class="how__export-icon" style="background:rgba(167,139,250,0.1)">
2692                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#a78bfa" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg>
2693                  </div>MOV
2694                </div>
2695              </div>
2696              <div class="how__dots">
2697                <div class="how__dot"></div>
2698                <div class="how__dot"></div>
2699                <div class="how__dot"></div>
2700                <div class="how__dot is-active"></div>
2701              </div>
2702            </div>
2703
2704          </div>
2705        </div>
2706
2707      </div>
2708
2709      <div class="how__cta">
2710        <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="how_cta_btn">
2711          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/></svg>
2712          Try It Now — It's Free
2713        </a>
2714      </div>
2715
2716    </div>
2717  </section>
2718
2719  
2719<script type="6c18279ba6d93a40249c492f-text/javascript">
2720    (function () {
2721      const steps   = document.querySelectorAll('[data-how]');
2722      const panels  = document.querySelectorAll('[data-panel]');
2723      const bigNum  = document.getElementById('how-big-num');
2724      const preview = document.querySelector('[data-how-preview]');
2725      let current   = 1;
2726      let autoTimer = null;
2727
2728      function goTo(n) {
2729        current = n;
2730        steps.forEach(s => s.classList.toggle('is-active', +s.dataset.step === n));
2731        panels.forEach(p => p.classList.toggle('is-active', +p.dataset.panel === n));
2732        if (bigNum) bigNum.textContent = n;
2733      }
2734
2735      steps.forEach(s => {
2736        s.addEventListener('click', () => {
2737          clearInterval(autoTimer);
2738          goTo(+s.dataset.step);
2739          startAuto();
2740        });
2741      });
2742
2743      function startAuto() {
2744        autoTimer = setInterval(() => { goTo(current < 4 ? current + 1 : 1); }, 3500);
2745      }
2746
2747      const howStepObs = new IntersectionObserver(entries => {
2748        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); howStepObs.unobserve(e.target); } });
2749      }, { threshold: 0.2 });
2750      steps.forEach(s => howStepObs.observe(s));
2751
2752      if (preview) {
2753        const prevObs = new IntersectionObserver(entries => {
2754          entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); startAuto(); prevObs.unobserve(e.target); } });
2755        }, { threshold: 0.3 });
2756        prevObs.observe(preview);
2757      }
2758    })();
2759  </script>
2759
2760
2761  <!-- ▼▼▼ SECTION 5 — AI VIDEO GENERATION FEATURES ▼▼▼ -->
2762  <style>
2763
2764    /* ═══════════════════════════════════════════
2765       FEATURES SECTION
2766    ═══════════════════════════════════════════ */
2767    .features {
2768      position: relative;
2769      padding-block: var(--section-pad);
2770      overflow: hidden;
2771    }
2772
2773    /* Ambient glow behind section */
2774    .features__glow {
2775      position: absolute;
2776      width: 800px;
2777      height: 800px;
2778      border-radius: 50%;
2779      background: radial-gradient(circle, rgba(212,255,0,0.05) 0%, transparent 65%);
2780      top: 50%;
2781      left: 50%;
2782      transform: translate(-50%, -50%);
2783      pointer-events: none;
2784    }
2785
2786    /* ── Header ── */
2787    .features__header {
2788      text-align: center;
2789      margin-bottom: clamp(4rem, 8vw, 6rem);
2790      position: relative;
2791      z-index: 2;
2792    }
2793
2794    .features__label {
2795      display: inline-flex;
2796      align-items: center;
2797      gap: 0.6rem;
2798      font-family: var(--font-mono);
2799      font-size: var(--text-xs);
2800      color: var(--c-accent-2);
2801      text-transform: uppercase;
2802      letter-spacing: 0.14em;
2803      margin-bottom: 1.25rem;
2804    }
2805
2806    .features__label-line {
2807      width: 32px;
2808      height: 1px;
2809      background: var(--c-accent-2);
2810      opacity: 0.5;
2811    }
2812
2813    .features__title {
2814      font-family: var(--font-display);
2815      font-size: clamp(2.8rem, 6vw, 5.5rem);
2816      line-height: 0.92;
2817      text-transform: uppercase;
2818      color: var(--c-white);
2819      letter-spacing: 0.02em;
2820      margin-bottom: 1.25rem;
2821    }
2822
2823    .features__title em {
2824      font-style: normal;
2825      color: var(--c-accent-2);
2826    }
2827
2828    .features__subtitle {
2829      font-size: var(--text-lg);
2830      color: var(--c-text-muted);
2831      max-width: 500px;
2832      margin-inline: auto;
2833      line-height: 1.6;
2834    }
2835
2836    /* ── TAB NAV ── */
2837    .features__tabs {
2838      display: flex;
2839      justify-content: center;
2840      gap: 0.4rem;
2841      margin-bottom: 3rem;
2842      flex-wrap: wrap;
2843      position: relative;
2844      z-index: 2;
2845    }
2846
2847    .features__tab {
2848      display: flex;
2849      align-items: center;
2850      gap: 0.5rem;
2851      padding: 0.55rem 1.25rem;
2852      border-radius: var(--r-full);
2853      border: 1px solid var(--c-border);
2854      font-size: var(--text-sm);
2855      font-weight: 500;
2856      color: var(--c-text-muted);
2857      background: transparent;
2858      transition: all var(--t-base) var(--ease);
2859      cursor: pointer;
2860    }
2861
2862    .features__tab svg { width: 14px; height: 14px; flex-shrink: 0; }
2863
2864    .features__tab:hover {
2865      border-color: var(--c-border-hi);
2866      color: var(--c-text);
2867    }
2868
2869    .features__tab.is-active {
2870      background: var(--c-accent);
2871      border-color: var(--c-accent);
2872      color: var(--c-black);
2873      font-weight: 700;
2874    }
2875
2876    /* ── FEATURE PANELS ── */
2877    .features__panels {
2878      position: relative;
2879      z-index: 2;
2880    }
2881
2882    .features__panel {
2883      display: none;
2884    }
2885
2886    .features__panel.is-active {
2887      display: block;
2888      animation: panel-in 0.5s var(--ease) both;
2889    }
2890
2891    @keyframes panel-in {
2892      from { opacity: 0; transform: translateY(16px); }
2893      to   { opacity: 1; transform: translateY(0); }
2894    }
2895
2896    /* ── FEATURE GRID (inside each panel) ── */
2897    .features__grid {
2898      display: grid;
2899      grid-template-columns: repeat(12, 1fr);
2900      gap: 1rem;
2901    }
2902
2903    /* Feature card base */
2904    .feat-card {
2905      position: relative;
2906      background: var(--c-surface);
2907      border: 1px solid var(--c-border);
2908      border-radius: var(--r-xl);
2909      padding: clamp(1.5rem, 2.5vw, 2rem);
2910      overflow: hidden;
2911      transition: border-color var(--t-base) var(--ease),
2912                  transform var(--t-slow) var(--ease),
2913                  box-shadow var(--t-slow) var(--ease);
2914      opacity: 0;
2915      transform: translateY(24px);
2916    }
2917
2918    .feat-card.in-view {
2919      opacity: 1;
2920      transform: translateY(0);
2921      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
2922                  border-color var(--t-base), box-shadow var(--t-slow);
2923    }
2924
2925    .feat-card:hover {
2926      border-color: var(--c-border-hi);
2927      transform: translateY(-3px);
2928      box-shadow: var(--shadow-lg);
2929    }
2930
2931    /* Hover glow per card */
2932    .feat-card::after {
2933      content: '';
2934      position: absolute;
2935      inset: 0;
2936      border-radius: inherit;
2937      opacity: 0;
2938      transition: opacity var(--t-slow) var(--ease);
2939      pointer-events: none;
2940    }
2941    .feat-card:hover::after { opacity: 1; }
2942
2943    /* Grid column spans */
2944    .feat-card--wide    { grid-column: span 8; }
2945    .feat-card--narrow  { grid-column: span 4; }
2946    .feat-card--third   { grid-column: span 4; }
2947    .feat-card--half    { grid-column: span 6; }
2948    .feat-card--full    { grid-column: span 12; }
2949    .feat-card--five    { grid-column: span 5; }
2950    .feat-card--seven   { grid-column: span 7; }
2951
2952    /* Stagger delays */
2953    .feat-card:nth-child(1) { transition-delay: 0.04s; }
2954    .feat-card:nth-child(2) { transition-delay: 0.10s; }
2955    .feat-card:nth-child(3) { transition-delay: 0.16s; }
2956    .feat-card:nth-child(4) { transition-delay: 0.22s; }
2957    .feat-card:nth-child(5) { transition-delay: 0.28s; }
2958    .feat-card:nth-child(6) { transition-delay: 0.34s; }
2959
2960    /* Card inner elements */
2961    .feat-card__icon {
2962      width: 42px;
2963      height: 42px;
2964      border-radius: var(--r-md);
2965      display: grid;
2966      place-items: center;
2967      margin-bottom: 1.1rem;
2968    }
2969
2970    .feat-card__icon svg { width: 20px; height: 20px; }
2971
2972    .feat-card__tag {
2973      display: inline-block;
2974      font-family: var(--font-mono);
2975      font-size: 0.62rem;
2976      text-transform: uppercase;
2977      letter-spacing: 0.1em;
2978      padding: 0.18rem 0.55rem;
2979      border-radius: var(--r-full);
2980      margin-bottom: 0.7rem;
2981    }
2982
2983    .feat-card__title {
2984      font-family: var(--font-display);
2985      font-size: clamp(1.25rem, 2vw, 1.7rem);
2986      line-height: 1;
2987      text-transform: uppercase;
2988      letter-spacing: 0.03em;
2989      color: var(--c-white);
2990      margin-bottom: 0.55rem;
2991    }
2992
2993    .feat-card__desc {
2994      font-size: var(--text-sm);
2995      color: var(--c-text-muted);
2996      line-height: 1.65;
2997    }
2998
2999    /* ── COLOR VARIANTS ── */
3000    .feat-card--lime::after  { background: radial-gradient(circle at 0% 100%, rgba(212,255,0,0.07) 0%, transparent 60%); }
3001    .feat-card--cyan::after  { background: radial-gradient(circle at 100% 0%, rgba(0,194,255,0.07) 0%, transparent 60%); }
3002    .feat-card--orange::after { background: radial-gradient(circle at 0% 0%, rgba(255,77,0,0.08) 0%, transparent 60%); }
3003    .feat-card--purple::after { background: radial-gradient(circle at 100% 100%, rgba(167,139,250,0.07) 0%, transparent 60%); }
3004
3005    .feat-card__icon--lime   { background: rgba(212,255,0,0.12); }
3006    .feat-card__icon--cyan   { background: rgba(0,194,255,0.12); }
3007    .feat-card__icon--orange { background: rgba(255,77,0,0.12);  }
3008    .feat-card__icon--purple { background: rgba(167,139,250,0.12); }
3009
3010    .feat-card__tag--lime   { color: var(--c-accent);   background: rgba(212,255,0,0.08);   border: 1px solid rgba(212,255,0,0.2); }
3011    .feat-card__tag--cyan   { color: var(--c-accent-3); background: rgba(0,194,255,0.08);   border: 1px solid rgba(0,194,255,0.2); }
3012    .feat-card__tag--orange { color: var(--c-accent-2); background: rgba(255,77,0,0.08);    border: 1px solid rgba(255,77,0,0.2);  }
3013    .feat-card__tag--purple { color: #a78bfa;            background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); }
3014
3015    /* ── SPECIAL CARD VISUALS ── */
3016
3017    /* Waveform visual for motion control card */
3018    .feat-wave {
3019      display: flex;
3020      align-items: flex-end;
3021      gap: 3px;
3022      height: 48px;
3023      margin-top: 1.25rem;
3024    }
3025
3026    .feat-wave__bar {
3027      flex: 1;
3028      border-radius: 2px;
3029      background: rgba(212,255,0,0.3);
3030      transition: height 0.3s var(--ease), background 0.3s;
3031      animation: wave-anim 1.8s ease-in-out infinite;
3032    }
3033
3034    .feat-wave__bar:nth-child(1)  { animation-delay: 0.0s;  }
3035    .feat-wave__bar:nth-child(2)  { animation-delay: 0.1s;  }
3036    .feat-wave__bar:nth-child(3)  { animation-delay: 0.2s;  }
3037    .feat-wave__bar:nth-child(4)  { animation-delay: 0.3s;  }
3038    .feat-wave__bar:nth-child(5)  { animation-delay: 0.4s;  }
3039    .feat-wave__bar:nth-child(6)  { animation-delay: 0.3s;  }
3040    .feat-wave__bar:nth-child(7)  { animation-delay: 0.2s;  }
3041    .feat-wave__bar:nth-child(8)  { animation-delay: 0.1s;  }
3042    .feat-wave__bar:nth-child(9)  { animation-delay: 0.0s;  }
3043    .feat-wave__bar:nth-child(10) { animation-delay: 0.15s; }
3044    .feat-wave__bar:nth-child(11) { animation-delay: 0.25s; }
3045    .feat-wave__bar:nth-child(12) { animation-delay: 0.35s; }
3046
3047    .feat-card:hover .feat-wave__bar { background: var(--c-accent); }
3048
3049    @keyframes wave-anim {
3050      0%, 100% { height: 20%; }
3051      50%       { height: var(--h, 70%); }
3052    }
3053
3054    /* Prompt variations mini-list */
3055    .feat-variations {
3056      display: flex;
3057      flex-direction: column;
3058      gap: 0.5rem;
3059      margin-top: 1.25rem;
3060    }
3061
3062    .feat-variation {
3063      display: flex;
3064      align-items: center;
3065      gap: 0.75rem;
3066      padding: 0.55rem 0.85rem;
3067      background: rgba(0,0,0,0.3);
3068      border: 1px solid var(--c-border);
3069      border-radius: var(--r-md);
3070      font-family: var(--font-mono);
3071      font-size: 0.65rem;
3072      color: var(--c-text-muted);
3073      transition: all var(--t-fast);
3074    }
3075
3076    .feat-variation:hover,
3077    .feat-card:hover .feat-variation:nth-child(1) {
3078      border-color: rgba(0,194,255,0.3);
3079      color: var(--c-accent-3);
3080    }
3081
3082    .feat-variation-num {
3083      font-size: 0.6rem;
3084      color: var(--c-text-dim);
3085      width: 16px;
3086    }
3087
3088    /* Style preset swatches */
3089    .feat-swatches {
3090      display: flex;
3091      gap: 0.6rem;
3092      margin-top: 1.25rem;
3093      flex-wrap: wrap;
3094    }
3095
3096    .feat-swatch {
3097      padding: 0.4rem 0.8rem;
3098      border-radius: var(--r-full);
3099      font-size: 0.68rem;
3100      font-weight: 500;
3101      letter-spacing: 0.03em;
3102      border: 1px solid var(--c-border);
3103      color: var(--c-text-muted);
3104      transition: all var(--t-base) var(--ease);
3105    }
3106
3107    .feat-card:hover .feat-swatch:nth-child(1) { border-color: rgba(212,255,0,0.5);   color: var(--c-accent);   background: rgba(212,255,0,0.06); }
3108    .feat-card:hover .feat-swatch:nth-child(2) { border-color: rgba(255,77,0,0.5);    color: var(--c-accent-2); background: rgba(255,77,0,0.06);  }
3109    .feat-card:hover .feat-swatch:nth-child(3) { border-color: rgba(167,139,250,0.5); color: #a78bfa;            background: rgba(167,139,250,0.06); }
3110    .feat-card:hover .feat-swatch:nth-child(4) { border-color: rgba(0,194,255,0.5);   color: var(--c-accent-3); background: rgba(0,194,255,0.06); }
3111
3112    /* Model switch toggle row */
3113    .feat-model-switch {
3114      display: flex;
3115      flex-direction: column;
3116      gap: 0.45rem;
3117      margin-top: 1.25rem;
3118    }
3119
3120    .feat-model-btn {
3121      display: flex;
3122      align-items: center;
3123      gap: 0.7rem;
3124      padding: 0.5rem 0.8rem;
3125      border-radius: var(--r-md);
3126      border: 1px solid var(--c-border);
3127      transition: all var(--t-fast);
3128    }
3129
3130    .feat-model-btn.active {
3131      border-color: rgba(255,77,0,0.4);
3132      background: rgba(255,77,0,0.06);
3133    }
3134
3135    .feat-model-btn-dot {
3136      width: 7px;
3137      height: 7px;
3138      border-radius: 50%;
3139      flex-shrink: 0;
3140    }
3141
3142    .feat-model-btn-label {
3143      font-size: var(--text-xs);
3144      color: var(--c-text-muted);
3145      flex: 1;
3146    }
3147
3148    .feat-model-btn.active .feat-model-btn-label { color: var(--c-accent-2); }
3149
3150    .feat-model-btn-check {
3151      width: 16px;
3152      height: 16px;
3153      border-radius: 50%;
3154      border: 1px solid var(--c-border);
3155      display: grid;
3156      place-items: center;
3157    }
3158
3159    .feat-model-btn.active .feat-model-btn-check {
3160      background: var(--c-accent-2);
3161      border-color: var(--c-accent-2);
3162    }
3163
3164    /* Prompt library card — big text showcase */
3165    .feat-prompt-showcase {
3166      margin-top: 1.25rem;
3167      padding: 1rem 1.25rem;
3168      background: rgba(0,0,0,0.35);
3169      border: 1px solid var(--c-border);
3170      border-radius: var(--r-lg);
3171    }
3172
3173    .feat-prompt-showcase p {
3174      font-family: var(--font-mono);
3175      font-size: var(--text-xs);
3176      color: var(--c-text-muted);
3177      line-height: 1.8;
3178    }
3179
3180    .feat-prompt-highlight { color: var(--c-accent); }
3181
3182    /* Export big formats */
3183    .feat-export-row {
3184      display: flex;
3185      align-items: center;
3186      gap: 0.75rem;
3187      margin-top: 1.25rem;
3188      flex-wrap: wrap;
3189    }
3190
3191    .feat-format-big {
3192      font-family: var(--font-display);
3193      font-size: 2rem;
3194      letter-spacing: 0.06em;
3195      color: var(--c-text-dim);
3196      transition: color var(--t-base) var(--ease);
3197    }
3198
3199    .feat-card:hover .feat-format-big { color: var(--c-accent); }
3200
3201    .feat-format-sep {
3202      width: 1px;
3203      height: 28px;
3204      background: var(--c-border);
3205    }
3206
3207    /* ── RESPONSIVE ── */
3208    @media (max-width: 1024px) {
3209      .feat-card--wide   { grid-column: span 12; }
3210      .feat-card--narrow { grid-column: span 6; }
3211      .feat-card--third  { grid-column: span 6; }
3212      .feat-card--five   { grid-column: span 6; }
3213      .feat-card--seven  { grid-column: span 6; }
3214    }
3215
3216    @media (max-width: 640px) {
3217      .features__grid { grid-template-columns: 1fr; }
3218      .feat-card { grid-column: span 1 !important; }
3219      .features__tabs { gap: 0.3rem; }
3220      .features__tab { font-size: var(--text-xs); padding: 0.45rem 0.9rem; }
3221    }
3222
3223  </style>
3224
3225  <section class="features" id="features" aria-label="AI Video Generation Features">
3226    <div class="features__glow" aria-hidden="true"></div>
3227    <div class="container">
3228
3229      <!-- Header -->
3230      <div class="features__header">
3231        <div class="features__label">
3232          <span class="features__label-line"></span>
3233          <span data-i18n="features_section_label">Features</span>
3234          <span class="features__label-line"></span>
3235        </div>
3236        <h2 class="features__title" data-i18n="features_title">AI Video Generation<br>Features <em>Built</em> for Modern Workflows</h2>
3237        <p class="features__subtitle" data-i18n="features_subtitle">Every tool you need to generate, refine, and ship video content at scale — without switching apps.</p>
3238      </div>
3239
3240      <!-- Tab navigation -->
3241      <div class="features__tabs" role="tablist">
3242          <button class="features__tab is-active" data-ftab="generation" role="tab" data-i18n="features_tab_generation">
3243          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
3244            <path d="M2 3.5L12 7L2 10.5V3.5Z"/>
3245          </svg>
3246          Generation
3247        </button>
3248          <button class="features__tab" data-ftab="refinement" role="tab" data-i18n="features_tab_refinement">
3249          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
3250            <path d="M2 4h10M4 7h6M6 10h2"/>
3251          </svg>
3252          Refinement
3253        </button>
3254          <button class="features__tab" data-ftab="control" role="tab" data-i18n="features_tab_control">
3255          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
3256            <circle cx="7" cy="7" r="5"/><path d="M7 4v3l2 2"/>
3257          </svg>
3258          Motion Control
3259        </button>
3260          <button class="features__tab" data-ftab="export" role="tab" data-i18n="features_tab_export">
3261          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
3262            <path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/>
3263          </svg>
3264          Export
3265        </button>
3266      </div>
3267
3268      <!-- Panels -->
3269      <div class="features__panels">
3270
3271        <!-- Tab 1: Generation -->
3272        <div class="features__panel is-active" data-fpanel="generation">
3273          <div class="features__grid">
3274
3275            <!-- Wide: Text to Video -->
3276            <div class="feat-card feat-card--wide feat-card--lime" data-feat>
3277              <div class="feat-card__icon feat-card__icon--lime">
3278                <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5">
3279                  <path d="M3 5h14M3 8h10M3 11h7M14 11l4 3-4 3v-6z"/>
3280                </svg>
3281              </div>
3282              <span class="feat-card__tag feat-card__tag--lime" data-i18n="feature_1_tag">Text → Video</span>
3283              <h3 class="feat-card__title" data-i18n="feature_1_title">Prompt-Driven Video Generation</h3>
3284              <p class="feat-card__desc" data-i18n="feature_1_desc">Type a description — scene, mood, camera movement, lighting — and get a cinematic clip in seconds. Supports natural language and structured prompt syntax.</p>
3285              <div class="feat-prompt-showcase">
3286                <p><span class="feat-prompt-highlight">"</span>Rain-soaked Tokyo alley at night, <span class="feat-prompt-highlight">slow push-in</span>, neon reflections on wet pavement, <span class="feat-prompt-highlight">cinematic</span>, 24mm lens, atmospheric fog<span class="feat-prompt-highlight">"</span></p>
3287              </div>
3288            </div>
3289
3290            <!-- Narrow: Image to Video -->
3291            <div class="feat-card feat-card--narrow feat-card--cyan" data-feat>
3292              <div class="feat-card__icon feat-card__icon--cyan">
3293                <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5">
3294                  <rect x="2" y="3" width="16" height="11" rx="1.5"/>
3295                  <path d="M8 7l5 3-5 3V7z" fill="#00c2ff" stroke="none"/>
3296                </svg>
3297              </div>
3298              <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_2_tag">Image → Video</span>
3299              <h3 class="feat-card__title" data-i18n="feature_2_title">Animate Any Still</h3>
3300              <p class="feat-card__desc" data-i18n="feature_2_desc">Upload a photo or illustration and bring it to life with motion, depth, and camera movement.</p>
3301            </div>
3302
3303            <!-- Third: Variations -->
3304            <div class="feat-card feat-card--third feat-card--cyan" data-feat>
3305              <div class="feat-card__icon feat-card__icon--cyan">
3306                <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5">
3307                  <path d="M4 10h12M4 6l4 4-4 4M12 6l4 4-4 4" stroke-linecap="round"/>
3308                </svg>
3309              </div>
3310              <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_3_tag">Variations</span>
3311              <h3 class="feat-card__title" data-i18n="feature_3_title">Multiple Takes,<br>One Prompt</h3>
3312              <p class="feat-card__desc" data-i18n="feature_3_desc">Generate several candidates from a single prompt. Keep what works, remix the rest.</p>
3313              <div class="feat-variations">
3314                <div class="feat-variation"><span class="feat-variation-num">V1</span> Slow dolly-in, warm tone</div>
3315                <div class="feat-variation"><span class="feat-variation-num">V2</span> Handheld, cool grade</div>
3316                <div class="feat-variation"><span class="feat-variation-num">V3</span> Static, high contrast</div>
3317              </div>
3318            </div>
3319
3320            <!-- Third: Style Presets -->
3321            <div class="feat-card feat-card--third feat-card--purple" data-feat>
3322              <div class="feat-card__icon feat-card__icon--purple">
3323                <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5">
3324                  <circle cx="10" cy="10" r="7"/>
3325                  <path d="M10 3v7l4 4"/>
3326                </svg>
3327              </div>
3328              <span class="feat-card__tag feat-card__tag--purple" data-i18n="feature_4_tag">Styles</span>
3329              <h3 class="feat-card__title" data-i18n="feature_4_title">One-Click<br>Style Presets</h3>
3330              <p class="feat-card__desc" data-i18n="feature_4_desc">Set the entire visual mood in one click — from cinematic to anime to retro film.</p>
3331              <div class="feat-swatches">
3332                <span class="feat-swatch">Cinematic</span>
3333                <span class="feat-swatch">Anime</span>
3334                <span class="feat-swatch">Fantasy</span>
3335                <span class="feat-swatch">Retro</span>
3336              </div>
3337            </div>
3338
3339            <!-- Third: Smart Recommend -->
3340            <div class="feat-card feat-card--third feat-card--orange" data-feat>
3341              <div class="feat-card__icon feat-card__icon--orange">
3342                <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5">
3343                  <path d="M10 2l2.4 4.8L18 8l-4 3.9 1 5.6L10 15l-5 2.5 1-5.6L2 8l5.6-.2L10 2z"/>
3344                </svg>
3345              </div>
3346              <span class="feat-card__tag feat-card__tag--orange" data-i18n="feature_5_tag">Smart AI</span>
3347              <h3 class="feat-card__title" data-i18n="feature_5_title">Auto-Recommend<br>Model</h3>
3348              <p class="feat-card__desc" data-i18n="feature_5_desc">Not sure which model? The system picks the best one automatically based on your prompt and goals.</p>
3349            </div>
3350
3351          </div>
3352        </div>
3353
3354        <!-- Tab 2: Refinement -->
3355        <div class="features__panel" data-fpanel="refinement">
3356          <div class="features__grid">
3357
3358            <div class="feat-card feat-card--half feat-card--lime" data-feat>
3359              <div class="feat-card__icon feat-card__icon--lime">
3360                <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5">
3361                  <path d="M3 7h14M7 3l-4 4 4 4M13 3l4 4-4 4M3 13h14"/>
3362                </svg>
3363              </div>
3364              <span class="feat-card__tag feat-card__tag--lime" data-i18n="feature_6_tag">Iterate</span>
3365              <h3 class="feat-card__title" data-i18n="feature_6_title">Prompt Refinement<br>&amp; Re-Generation</h3>
3366              <p class="feat-card__desc" data-i18n="feature_6_desc">Tweak any part of your prompt and re-run. Change camera angles, lighting, pacing or style — all without starting over.</p>
3367            </div>
3368
3369            <div class="feat-card feat-card--half feat-card--orange" data-feat>
3370              <div class="feat-card__icon feat-card__icon--orange">
3371                <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5">
3372                  <circle cx="10" cy="10" r="3"/>
3373                  <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.93 4.93l1.41 1.41M13.66 13.66l1.41 1.41M4.93 15.07l1.41-1.41M13.66 6.34l1.41-1.41"/>
3374                </svg>
3375              </div>
3376              <span class="feat-card__tag feat-card__tag--orange" data-i18n="feature_7_tag">Prompt Library</span>
3377              <h3 class="feat-card__title" data-i18n="feature_7_title">Reusable Prompt<br>Templates</h3>
3378              <p class="feat-card__desc" data-i18n="feature_7_desc">Save your best prompts. Pull them back as starting points for new projects. Build a personal creative library over time.</p>
3379            </div>
3380
3381            <div class="feat-card feat-card--seven feat-card--cyan" data-feat>
3382              <div class="feat-card__icon feat-card__icon--cyan">
3383                <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5">
3384                  <path d="M4 10a6 6 0 1012 0 6 6 0 00-12 0zM10 7v3l2 2"/>
3385                </svg>
3386              </div>
3387              <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_8_tag">Character</span>
3388              <h3 class="feat-card__title" data-i18n="feature_8_title">Character Consistency Mode</h3>
3389              <p class="feat-card__desc" data-i18n="feature_8_desc">Keep identity, outfit, and facial features stable across multiple clips. Essential for series content, branded avatars, and narrative-driven videos that span multiple scenes.</p>
3390            </div>
3391
3392            <div class="feat-card feat-card--five feat-card--purple" data-feat>
3393              <div class="feat-card__icon feat-card__icon--purple">
3394                <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5">
3395                  <path d="M5 4h10v12H5zM8 4V2M12 4V2M8 16v2M12 16v2M2 8h3M15 8h3M2 12h3M15 12h3"/>
3396                </svg>
3397              </div>
3398              <span class="feat-card__tag feat-card__tag--purple" data-i18n="feature_9_tag">Model Switch</span>
3399              <h3 class="feat-card__title" data-i18n="feature_9_title">Instant<br>Model Switching</h3>
3400              <p class="feat-card__desc" data-i18n="feature_9_desc">Swap between AI model categories mid-project. Your prompt carries over — only the engine changes.</p>
3401              <div class="feat-model-switch">
3402                <div class="feat-model-btn">
3403                  <span class="feat-model-btn-dot" style="background:#d4ff00"></span>
3404                  <span class="feat-model-btn-label" data-i18n="feature_9_model1">Text → Video</span>
3405                  <span class="feat-model-btn-check"></span>
3406                </div>
3407                <div class="feat-model-btn active">
3408                  <span class="feat-model-btn-dot" style="background:#ff4d00"></span>
3409                  <span class="feat-model-btn-label">Cinematic</span>
3410                  <span class="feat-model-btn-check">
3411                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
3412                      <path d="M1.5 4L3.5 6L6.5 2" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
3413                    </svg>
3414                  </span>
3415                </div>
3416                <div class="feat-model-btn">
3417                  <span class="feat-model-btn-dot" style="background:#a78bfa"></span>
3418                  <span class="feat-model-btn-label">Anime</span>
3419                  <span class="feat-model-btn-check"></span>
3420                </div>
3421              </div>
3422            </div>
3423
3424          </div>
3425        </div>
3426
3427        <!-- Tab 3: Motion Control -->
3428        <div class="features__panel" data-fpanel="control">
3429          <div class="features__grid">
3430
3431            <div class="feat-card feat-card--half feat-card--lime" data-feat>
3432              <div class="feat-card__icon feat-card__icon--lime">
3433                <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5">
3434                  <path d="M10 4v12M4 10h12" stroke-linecap="round"/>
3435                  <circle cx="10" cy="10" r="3"/>
3436                </svg>
3437              </div>
3438              <span class="feat-card__tag feat-card__tag--lime">Motion</span>
3439              <h3 class="feat-card__title">Camera Motion<br>Controls</h3>
3440              <p class="feat-card__desc">Set dolly, pan, tilt, orbit, and zoom directions in your prompt. Control pacing from slow cinematic glide to fast dynamic push.</p>
3441              <div class="feat-wave">
3442                <div class="feat-wave__bar" style="--h:80%"></div>
3443                <div class="feat-wave__bar" style="--h:40%"></div>
3444                <div class="feat-wave__bar" style="--h:90%"></div>
3445                <div class="feat-wave__bar" style="--h:55%"></div>
3446                <div class="feat-wave__bar" style="--h:70%"></div>
3447                <div class="feat-wave__bar" style="--h:35%"></div>
3448                <div class="feat-wave__bar" style="--h:85%"></div>
3449                <div class="feat-wave__bar" style="--h:60%"></div>
3450                <div class="feat-wave__bar" style="--h:45%"></div>
3451                <div class="feat-wave__bar" style="--h:75%"></div>
3452                <div class="feat-wave__bar" style="--h:50%"></div>
3453                <div class="feat-wave__bar" style="--h:65%"></div>
3454              </div>
3455            </div>
3456
3457            <div class="feat-card feat-card--half feat-card--cyan" data-feat>
3458              <div class="feat-card__icon feat-card__icon--cyan">
3459                <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5">
3460                  <path d="M4 4l12 12M4 16L16 4" stroke-linecap="round"/>
3461                  <circle cx="10" cy="10" r="4"/>
3462                </svg>
3463              </div>
3464              <span class="feat-card__tag feat-card__tag--cyan">Aspect Ratio</span>
3465              <h3 class="feat-card__title">Multi-Format<br>Aspect Ratios</h3>
3466              <p class="feat-card__desc">Generate for any platform — 16:9 landscape for YouTube, 9:16 vertical for Reels and TikTok, 1:1 for feeds, 21:9 ultrawide for cinematic.</p>
3467              <div class="feat-swatches" style="margin-top:1.25rem">
3468                <span class="feat-swatch">16:9</span>
3469                <span class="feat-swatch">9:16</span>
3470                <span class="feat-swatch">1:1</span>
3471                <span class="feat-swatch">21:9</span>
3472              </div>
3473            </div>
3474
3475            <div class="feat-card feat-card--third feat-card--orange" data-feat>
3476              <div class="feat-card__icon feat-card__icon--orange">
3477                <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5">
3478                  <path d="M3 10h14M10 3v14" stroke-linecap="round"/>
3479                  <path d="M6 6l8 8M14 6L6 14" stroke-linecap="round"/>
3480                </svg>
3481              </div>
3482              <span class="feat-card__tag feat-card__tag--orange">Clip Length</span>
3483              <h3 class="feat-card__title">Flexible<br>Clip Duration</h3>
3484              <p class="feat-card__desc">3s for quick loops, up to 12s for extended scenes. Pick the right length for your output goal.</p>
3485            </div>
3486
3487            <div class="feat-card feat-card--third feat-card--purple" data-feat>
3488              <div class="feat-card__icon feat-card__icon--purple">
3489                <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5">
3490                  <path d="M4 7h12M4 13h12M7 4v12M13 4v12" stroke-linecap="round"/>
3491                </svg>
3492              </div>
3493              <span class="feat-card__tag feat-card__tag--purple">Lighting</span>
3494              <h3 class="feat-card__title">Lighting &amp;<br>Lens Control</h3>
3495              <p class="feat-card__desc">Dial in cinematic lighting moods — golden hour, neon, overcast — and set lens characteristics for depth and realism.</p>
3496            </div>
3497
3498            <div class="feat-card feat-card--third feat-card--lime" data-feat>
3499              <div class="feat-card__icon feat-card__icon--lime">
3500                <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5">
3501                  <rect x="3" y="6" width="14" height="9" rx="1.5"/>
3502                  <path d="M7 6V4M13 6V4"/>
3503                </svg>
3504              </div>
3505              <span class="feat-card__tag feat-card__tag--lime">FPS</span>
3506              <h3 class="feat-card__title">Frame Rate<br>Selection</h3>
3507              <p class="feat-card__desc">Choose between 24fps for film feel, 30fps for standard, or 60fps for smooth high-motion output.</p>
3508            </div>
3509
3510          </div>
3511        </div>
3512
3513        <!-- Tab 4: Export -->
3514        <div class="features__panel" data-fpanel="export">
3515          <div class="features__grid">
3516
3517            <div class="feat-card feat-card--wide feat-card--lime" data-feat>
3518              <div class="feat-card__icon feat-card__icon--lime">
3519                <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5">
3520                  <path d="M4 13v4h12v-4M10 3v10M7 10l3 3 3-3"/>
3521                </svg>
3522              </div>
3523              <span class="feat-card__tag feat-card__tag--lime">Export</span>
3524              <h3 class="feat-card__title">Export-Ready Output — No Conversion Needed</h3>
3525              <p class="feat-card__desc">Download in the exact format your workflow needs. All outputs are crisp, correctly encoded, and ready to upload directly to any platform.</p>
3526              <div class="feat-export-row">
3527                <span class="feat-format-big">MP4</span>
3528                <span class="feat-format-sep"></span>
3529                <span class="feat-format-big">WebM</span>
3530                <span class="feat-format-sep"></span>
3531                <span class="feat-format-big">GIF</span>
3532                <span class="feat-format-sep"></span>
3533                <span class="feat-format-big">MOV</span>
3534              </div>
3535            </div>
3536
3537            <div class="feat-card feat-card--narrow feat-card--orange" data-feat>
3538              <div class="feat-card__icon feat-card__icon--orange">
3539                <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5">
3540                  <path d="M10 3L3 7v6l7 4 7-4V7l-7-4z"/>
3541                  <path d="M10 3v14M3 7l7 4 7-4"/>
3542                </svg>
3543              </div>
3544              <span class="feat-card__tag feat-card__tag--orange">Resolution</span>
3545              <h3 class="feat-card__title">Up to 4K<br>Output</h3>
3546              <p class="feat-card__desc">High-fidelity exports in HD, Full HD, and 4K depending on your plan and model selection.</p>
3547            </div>
3548
3549            <div class="feat-card feat-card--half feat-card--cyan" data-feat>
3550              <div class="feat-card__icon feat-card__icon--cyan">
3551                <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5">
3552                  <path d="M10 3L3 7v6l7 4 7-4V7l-7-4z"/>
3553                  <circle cx="10" cy="10" r="2"/>
3554                </svg>
3555              </div>
3556              <span class="feat-card__tag feat-card__tag--cyan">Watermark-Free</span>
3557              <h3 class="feat-card__title">No Watermarks<br>on Paid Plans</h3>
3558              <p class="feat-card__desc">Your outputs are clean and ready for commercial use. Paid plans include full watermark-free exports with commercial licensing.</p>
3559            </div>
3560
3561            <div class="feat-card feat-card--half feat-card--purple" data-feat>
3562              <div class="feat-card__icon feat-card__icon--purple">
3563                <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5">
3564                  <path d="M17 10c0 3.87-3.13 7-7 7a7 7 0 010-14"/>
3565                  <path d="M17 10H10V3"/>
3566                </svg>
3567              </div>
3568              <span class="feat-card__tag feat-card__tag--purple">Batch</span>
3569              <h3 class="feat-card__title">Batch Export<br>&amp; Bulk Download</h3>
3570              <p class="feat-card__desc">Select multiple generations and download them all at once. Streamlined for content teams working at volume.</p>
3571            </div>
3572
3573          </div>
3574        </div>
3575
3576      </div><!-- /.features__panels -->
3577    </div>
3578  </section>
3579
3580  
3580<script type="6c18279ba6d93a40249c492f-text/javascript">
3581    // ── Features tab switching ──
3582    (function () {
3583      const tabs   = document.querySelectorAll('[data-ftab]');
3584      const panels = document.querySelectorAll('[data-fpanel]');
3585
3586      function activate(tab) {
3587        const target = tab.dataset.ftab;
3588
3589        tabs.forEach(t => t.classList.toggle('is-active', t === tab));
3590        panels.forEach(p => {
3591          const isActive = p.dataset.fpanel === target;
3592          p.classList.toggle('is-active', isActive);
3593          // Re-trigger card reveal in new panel
3594          if (isActive) {
3595            p.querySelectorAll('.feat-card').forEach(c => {
3596              c.classList.remove('in-view');
3597              setTimeout(() => featObs.observe(c), 10);
3598            });
3599          }
3600        });
3601      }
3602
3603      tabs.forEach(t => t.addEventListener('click', () => activate(t)));
3604
3605      // Scroll reveal for feat cards
3606      const featObs = new IntersectionObserver(entries => {
3607        entries.forEach(e => {
3608          if (e.isIntersecting) {
3609            e.target.classList.add('in-view');
3610            featObs.unobserve(e.target);
3611          }
3612        });
3613      }, { threshold: 0.12 });
3614
3615      document.querySelectorAll('.feat-card').forEach(c => featObs.observe(c));
3616    })();
3617  </script>
3617
3618
3619  <!-- ▼▼▼ SECTION 6 — BLUEPRINTS FOR AI VIDEO CREATION ▼▼▼ -->
3620  <style>
3621
3622    /* ═══════════════════════════════════════════
3623       BLUEPRINTS
3624    ═══════════════════════════════════════════ */
3625    .blueprints {
3626      position: relative;
3627      padding-block: var(--section-pad);
3628      overflow: hidden;
3629      background: var(--c-bg-2);
3630    }
3631
3632    /* Edge fades */
3633    .blueprints::before,
3634    .blueprints::after {
3635      content: '';
3636      position: absolute;
3637      left: 0; right: 0;
3638      height: 100px;
3639      pointer-events: none;
3640      z-index: 2;
3641    }
3642    .blueprints::before { top: 0;    background: linear-gradient(to bottom, var(--c-bg), transparent); }
3643    .blueprints::after  { bottom: 0; background: linear-gradient(to top,    var(--c-bg), transparent); }
3644
3645    /* Blueprint grid-paper bg */
3646    .blueprints__paper {
3647      position: absolute;
3648      inset: 0;
3649      background-image:
3650        linear-gradient(rgba(212,255,0,0.03) 1px, transparent 1px),
3651        linear-gradient(90deg, rgba(212,255,0,0.03) 1px, transparent 1px);
3652      background-size: 40px 40px;
3653      mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 40%, transparent 100%);
3654      pointer-events: none;
3655    }
3656
3657    /* ── Header ── */
3658    .blueprints__header {
3659      position: relative;
3660      z-index: 3;
3661      display: grid;
3662      grid-template-columns: 1fr auto;
3663      align-items: end;
3664      gap: 2rem;
3665      margin-bottom: clamp(3rem, 6vw, 5rem);
3666    }
3667
3668    .blueprints__label {
3669      display: inline-flex;
3670      align-items: center;
3671      gap: 0.6rem;
3672      font-family: var(--font-mono);
3673      font-size: var(--text-xs);
3674      color: var(--c-accent);
3675      text-transform: uppercase;
3676      letter-spacing: 0.14em;
3677      margin-bottom: 1.25rem;
3678    }
3679
3680    .blueprints__label-line {
3681      width: 32px; height: 1px;
3682      background: var(--c-accent);
3683      opacity: 0.5;
3684    }
3685
3686    .blueprints__title {
3687      font-family: var(--font-display);
3688      font-size: clamp(3rem, 7vw, 6.5rem);
3689      line-height: 0.88;
3690      text-transform: uppercase;
3691      color: var(--c-white);
3692      letter-spacing: 0.02em;
3693    }
3694
3695    .blueprints__title em {
3696      font-style: normal;
3697      color: var(--c-accent);
3698      display: block;
3699    }
3700
3701    .blueprints__title-arrow {
3702      display: inline-flex;
3703      align-items: center;
3704      gap: 0.4rem;
3705      color: var(--c-accent);
3706      vertical-align: middle;
3707    }
3708
3709    .blueprints__header-right {
3710      display: flex;
3711      flex-direction: column;
3712      align-items: flex-end;
3713      gap: 1rem;
3714      padding-bottom: 0.5rem;
3715    }
3716
3717    .blueprints__header-desc {
3718      font-size: var(--text-base);
3719      color: var(--c-text-muted);
3720      max-width: 320px;
3721      text-align: right;
3722      line-height: 1.6;
3723    }
3724
3725    /* ── BLUEPRINT CARDS GRID ── */
3726    .blueprints__grid {
3727      position: relative;
3728      z-index: 3;
3729      display: grid;
3730      grid-template-columns: repeat(3, 1fr);
3731      gap: 1.25rem;
3732    }
3733
3734    .bp-card {
3735      position: relative;
3736      border-radius: var(--r-xl);
3737      overflow: hidden;
3738      border: 1px solid var(--c-border);
3739      cursor: pointer;
3740      opacity: 0;
3741      transform: translateY(28px);
3742      transition: opacity 0.65s var(--ease), transform 0.65s var(--ease),
3743                  border-color var(--t-base), box-shadow var(--t-slow);
3744    }
3745
3746    .bp-card.in-view {
3747      opacity: 1;
3748      transform: translateY(0);
3749    }
3750
3751    .bp-card:nth-child(1) { transition-delay: 0.05s; }
3752    .bp-card:nth-child(2) { transition-delay: 0.14s; }
3753    .bp-card:nth-child(3) { transition-delay: 0.23s; }
3754    .bp-card:nth-child(4) { transition-delay: 0.10s; }
3755    .bp-card:nth-child(5) { transition-delay: 0.19s; }
3756    .bp-card:nth-child(6) { transition-delay: 0.28s; }
3757
3758    .bp-card:hover {
3759      border-color: var(--c-border-hi);
3760      box-shadow: var(--shadow-lg);
3761      transform: translateY(-6px) !important;
3762    }
3763
3764    /* Card visual area */
3765    .bp-card__visual {
3766      aspect-ratio: 4/3;
3767      position: relative;
3768      overflow: hidden;
3769    }
3770
3771    .bp-card__bg {
3772      position: absolute;
3773      inset: 0;
3774      transition: transform 0.7s var(--ease);
3775    }
3776
3777    .bp-card:hover .bp-card__bg {
3778      transform: scale(1.06);
3779    }
3780
3781    /* Each card's unique gradient bg */
3782    .bp-card--1 .bp-card__bg { background: linear-gradient(135deg, #0d1a0a 0%, #1a2a0a 40%, #0a1200 100%); }
3783    .bp-card--2 .bp-card__bg { background: linear-gradient(135deg, #0a0d1a 0%, #0a1a2a 40%, #00080d 100%); }
3784    .bp-card--3 .bp-card__bg { background: linear-gradient(135deg, #1a0a0a 0%, #2a0d0a 40%, #120000 100%); }
3785    .bp-card--4 .bp-card__bg { background: linear-gradient(135deg, #0f0a1a 0%, #1a0a2a 40%, #080012 100%); }
3786    .bp-card--5 .bp-card__bg { background: linear-gradient(135deg, #1a120a 0%, #2a1a0a 40%, #120800 100%); }
3787    .bp-card--6 .bp-card__bg { background: linear-gradient(135deg, #0a1a18 0%, #0a2a24 40%, #00120e 100%); }
3788
3789    /* Animated mesh inside each visual */
3790    .bp-card__mesh {
3791      position: absolute;
3792      inset: -40%;
3793      opacity: 0.6;
3794      animation: bp-mesh 12s ease-in-out infinite alternate;
3795      border-radius: 50%;
3796    }
3797
3798    .bp-card--1 .bp-card__mesh { background: radial-gradient(circle at 30% 40%, rgba(212,255,0,0.18) 0%, transparent 55%); animation-delay: 0s; }
3799    .bp-card--2 .bp-card__mesh { background: radial-gradient(circle at 60% 30%, rgba(0,194,255,0.18) 0%, transparent 55%); animation-delay: 1.5s; }
3800    .bp-card--3 .bp-card__mesh { background: radial-gradient(circle at 40% 60%, rgba(255,77,0,0.18) 0%, transparent 55%);  animation-delay: 3s; }
3801    .bp-card--4 .bp-card__mesh { background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.18) 0%, transparent 55%); animation-delay: 0.8s; }
3802    .bp-card--5 .bp-card__mesh { background: radial-gradient(circle at 35% 45%, rgba(255,180,0,0.18) 0%, transparent 55%); animation-delay: 2s; }
3803    .bp-card--6 .bp-card__mesh { background: radial-gradient(circle at 65% 35%, rgba(0,255,180,0.15) 0%, transparent 55%); animation-delay: 1s; }
3804
3805    @keyframes bp-mesh {
3806      from { transform: translate(0, 0) scale(1); }
3807      to   { transform: translate(15%, 10%) scale(1.15); }
3808    }
3809
3810    /* Blueprint crosshair / wireframe overlay */
3811    .bp-card__crosshair {
3812      position: absolute;
3813      inset: 0;
3814      display: flex;
3815      align-items: center;
3816      justify-content: center;
3817      opacity: 0.15;
3818      transition: opacity 0.4s;
3819    }
3820
3821    .bp-card:hover .bp-card__crosshair { opacity: 0.3; }
3822
3823    .bp-card__crosshair svg {
3824      width: 80px;
3825      height: 80px;
3826    }
3827
3828    /* Category badge */
3829    .bp-card__badge {
3830      position: absolute;
3831      top: 1rem;
3832      left: 1rem;
3833      display: flex;
3834      align-items: center;
3835      gap: 0.4rem;
3836      padding: 0.3rem 0.75rem;
3837      border-radius: var(--r-full);
3838      font-family: var(--font-mono);
3839      font-size: 0.62rem;
3840      text-transform: uppercase;
3841      letter-spacing: 0.08em;
3842      backdrop-filter: blur(12px);
3843      -webkit-backdrop-filter: blur(12px);
3844      border: 1px solid;
3845    }
3846
3847    .bp-card__badge-dot {
3848      width: 5px; height: 5px;
3849      border-radius: 50%;
3850    }
3851
3852    /* Step count badge top-right */
3853    .bp-card__steps {
3854      position: absolute;
3855      top: 1rem;
3856      right: 1rem;
3857      padding: 0.3rem 0.65rem;
3858      background: rgba(0,0,0,0.5);
3859      border: 1px solid rgba(255,255,255,0.1);
3860      border-radius: var(--r-full);
3861      font-family: var(--font-mono);
3862      font-size: 0.6rem;
3863      color: var(--c-text-muted);
3864      backdrop-filter: blur(8px);
3865    }
3866
3867    /* Center play/action button */
3868    .bp-card__action {
3869      position: absolute;
3870      top: 50%;
3871      left: 50%;
3872      transform: translate(-50%, -50%) scale(0.85);
3873      width: 52px;
3874      height: 52px;
3875      border-radius: 50%;
3876      display: grid;
3877      place-items: center;
3878      opacity: 0;
3879      transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
3880    }
3881
3882    .bp-card:hover .bp-card__action {
3883      opacity: 1;
3884      transform: translate(-50%, -50%) scale(1);
3885    }
3886
3887    /* Card info panel */
3888    .bp-card__info {
3889      background: var(--c-surface);
3890      padding: 1.25rem 1.5rem;
3891      border-top: 1px solid var(--c-border);
3892    }
3893
3894    .bp-card__category {
3895      font-family: var(--font-mono);
3896      font-size: 0.6rem;
3897      text-transform: uppercase;
3898      letter-spacing: 0.1em;
3899      color: var(--c-text-dim);
3900      margin-bottom: 0.35rem;
3901    }
3902
3903    .bp-card__name {
3904      font-family: var(--font-display);
3905      font-size: clamp(1.1rem, 2vw, 1.4rem);
3906      line-height: 1;
3907      text-transform: uppercase;
3908      letter-spacing: 0.03em;
3909      color: var(--c-white);
3910      margin-bottom: 0.5rem;
3911    }
3912
3913    .bp-card__desc {
3914      font-size: var(--text-xs);
3915      color: var(--c-text-muted);
3916      line-height: 1.6;
3917      margin-bottom: 1rem;
3918    }
3919
3920    /* Tags inside info */
3921    .bp-card__tags {
3922      display: flex;
3923      flex-wrap: wrap;
3924      gap: 0.4rem;
3925    }
3926
3927    .bp-card__tag {
3928      padding: 0.2rem 0.6rem;
3929      border-radius: var(--r-full);
3930      font-family: var(--font-mono);
3931      font-size: 0.6rem;
3932      color: var(--c-text-dim);
3933      border: 1px solid var(--c-border);
3934      transition: all var(--t-fast);
3935    }
3936
3937    .bp-card:hover .bp-card__tag { border-color: var(--c-border-hi); color: var(--c-text-muted); }
3938
3939    /* Use Blueprint CTA link */
3940    .bp-card__use {
3941      display: inline-flex;
3942      align-items: center;
3943      gap: 0.4rem;
3944      font-size: var(--text-xs);
3945      font-weight: 600;
3946      letter-spacing: 0.04em;
3947      margin-top: 1rem;
3948      padding-top: 0.75rem;
3949      border-top: 1px solid var(--c-border);
3950      color: var(--c-text-dim);
3951      transition: color var(--t-base) var(--ease);
3952      width: 100%;
3953    }
3954
3955    .bp-card__use svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
3956    .bp-card:hover .bp-card__use { color: var(--c-accent); }
3957    .bp-card:hover .bp-card__use svg { transform: translateX(4px); }
3958
3959    /* ── BIG MARQUEE TEXT ── */
3960    .blueprints__marquee {
3961      position: relative;
3962      z-index: 3;
3963      overflow: hidden;
3964      margin-block: clamp(3rem, 6vw, 5rem);
3965      padding-block: 1.5rem;
3966      border-top: 1px solid var(--c-border);
3967      border-bottom: 1px solid var(--c-border);
3968    }
3969
3970    .blueprints__marquee-track {
3971      display: flex;
3972      gap: 3rem;
3973      width: max-content;
3974      animation: bp-marquee 30s linear infinite;
3975    }
3976
3977    .blueprints__marquee-track:hover { animation-play-state: paused; }
3978
3979    @keyframes bp-marquee {
3980      from { transform: translateX(0); }
3981      to   { transform: translateX(-50%); }
3982    }
3983
3984    .blueprints__marquee-item {
3985      display: flex;
3986      align-items: center;
3987      gap: 1.5rem;
3988      white-space: nowrap;
3989    }
3990
3991    .blueprints__marquee-word {
3992      font-family: var(--font-display);
3993      font-size: clamp(2.5rem, 5vw, 4.5rem);
3994      line-height: 1;
3995      text-transform: uppercase;
3996      letter-spacing: 0.04em;
3997      color: rgba(255,255,255,0.06);
3998      transition: color 0.3s;
3999    }
4000
4001    .blueprints__marquee-word--accent { color: var(--c-accent); opacity: 0.7; }
4002    .blueprints__marquee-track:hover .blueprints__marquee-word { color: rgba(255,255,255,0.12); }
4003
4004    .blueprints__marquee-sep {
4005      font-family: var(--font-display);
4006      font-size: 2rem;
4007      color: var(--c-accent);
4008      opacity: 0.4;
4009    }
4010
4011    /* ── BOTTOM CTA ── */
4012    .blueprints__cta {
4013      position: relative;
4014      z-index: 3;
4015      display: flex;
4016      align-items: center;
4017      justify-content: space-between;
4018      gap: 2rem;
4019      padding: 2rem 2.5rem;
4020      background: rgba(212,255,0,0.04);
4021      border: 1px solid rgba(212,255,0,0.15);
4022      border-radius: var(--r-xl);
4023      flex-wrap: wrap;
4024    }
4025
4026    .blueprints__cta-left {}
4027
4028    .blueprints__cta-count {
4029      font-family: var(--font-display);
4030      font-size: clamp(2rem, 4vw, 3rem);
4031      line-height: 1;
4032      color: var(--c-accent);
4033      letter-spacing: 0.04em;
4034    }
4035
4036    .blueprints__cta-text {
4037      font-size: var(--text-base);
4038      color: var(--c-text-muted);
4039      margin-top: 0.25rem;
4040    }
4041
4042    .blueprints__cta-text strong { color: var(--c-white); }
4043
4044    .blueprints__cta-actions {
4045      display: flex;
4046      align-items: center;
4047      gap: 0.75rem;
4048    }
4049
4050    /* Responsive */
4051    @media (max-width: 1024px) {
4052      .blueprints__grid { grid-template-columns: repeat(2, 1fr); }
4053      .blueprints__header { grid-template-columns: 1fr; }
4054      .blueprints__header-right { align-items: flex-start; }
4055      .blueprints__header-desc { text-align: left; }
4056    }
4057
4058    @media (max-width: 640px) {
4059      .blueprints__grid { grid-template-columns: 1fr; }
4060      .blueprints__cta { flex-direction: column; align-items: flex-start; }
4061    }
4062
4063  </style>
4064
4065  <section class="blueprints" id="blueprints" aria-label="Blueprints for AI Video Creation">
4066    <div class="blueprints__paper" aria-hidden="true"></div>
4067
4068    <div class="container">
4069
4070      <!-- Header -->
4071      <div class="blueprints__header">
4072        <div>
4073          <div class="blueprints__label">
4074            <span class="blueprints__label-line"></span>
4075            Blueprints
4076            <span class="blueprints__label-line"></span>
4077          </div>
4078          <h2 class="blueprints__title">
4079            <span data-i18n="bp_title_line1">Blueprints for</span><br><span data-i18n="bp_title_line2">AI Video</span>
4080            <em>
4081              <span data-i18n="bp_title_accent">Creation</span>
4082              <span class="blueprints__title-arrow" aria-hidden="true">
4083                <svg width="48" height="32" viewBox="0 0 48 32" fill="none">
4084                  <path d="M0 16h40M28 4l12 12-12 12" stroke="#d4ff00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
4085                </svg>
4086              </span>
4087            </em>
4088          </h2>
4089        </div>
4090        <div class="blueprints__header-right">
4091          <p class="blueprints__header-desc" data-i18n="bp_header_desc">Pre-built creative blueprints for every video use case — pick your goal and start generating in seconds.</p>
4092          <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="bp_browse_all">Browse All Blueprints</a>
4093        </div>
4094      </div>
4095
4096      <!-- Cards grid -->
4097      <div class="blueprints__grid">
4098
4099        <!-- Blueprint 1: Product / Commercial -->
4100        <div class="bp-card bp-card--1" data-bp>
4101          <div class="bp-card__visual">
4102            <div class="bp-card__bg"></div>
4103            <div class="bp-card__mesh"></div>
4104            <!-- Crosshair wireframe -->
4105            <div class="bp-card__crosshair" aria-hidden="true">
4106              <svg viewBox="0 0 80 80" fill="none" stroke="#d4ff00" stroke-width="0.8">
4107                <circle cx="40" cy="40" r="30"/>
4108                <line x1="40" y1="5"  x2="40" y2="15"/>
4109                <line x1="40" y1="65" x2="40" y2="75"/>
4110                <line x1="5"  y1="40" x2="15" y2="40"/>
4111                <line x1="65" y1="40" x2="75" y2="40"/>
4112                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4113              </svg>
4114            </div>
4115            <!-- Badge -->
4116            <div class="bp-card__badge" style="background:rgba(212,255,0,0.1); border-color:rgba(212,255,0,0.3); color:#d4ff00;">
4117              <span class="bp-card__badge-dot" style="background:#d4ff00"></span>
4118              Product
4119            </div>
4120            <div class="bp-card__steps">4 steps</div>
4121            <!-- Hover action -->
4122            <div class="bp-card__action" style="background:var(--c-accent)">
4123              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4124                <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/>
4125              </svg>
4126            </div>
4127          </div>
4128          <div class="bp-card__info">
4129            <p class="bp-card__category" data-i18n="bp1_category">Commercial</p>
4130            <h3 class="bp-card__name" data-i18n="bp1_name">Product Hero Video</h3>
4131            <p class="bp-card__desc" data-i18n="bp1_desc">Studio-quality product reveal with turntable motion, clean lighting, and cinematic detail shots.</p>
4132            <div class="bp-card__tags">
4133              <span class="bp-card__tag">Text→Video</span>
4134              <span class="bp-card__tag">Cinematic</span>
4135              <span class="bp-card__tag">9:16 + 16:9</span>
4136            </div>
4137            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use" data-i18n="bp_use_this">
4138              Use this Blueprint
4139              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4140                <path d="M2 6h8M6 2l4 4-4 4"/>
4141              </svg>
4142            </a>
4143          </div>
4144        </div>
4145
4146        <!-- Blueprint 2: Social Content -->
4147        <div class="bp-card bp-card--2" data-bp>
4148          <div class="bp-card__visual">
4149            <div class="bp-card__bg"></div>
4150            <div class="bp-card__mesh"></div>
4151            <div class="bp-card__crosshair" aria-hidden="true">
4152              <svg viewBox="0 0 80 80" fill="none" stroke="#00c2ff" stroke-width="0.8">
4153                <circle cx="40" cy="40" r="30"/>
4154                <line x1="40" y1="5"  x2="40" y2="15"/>
4155                <line x1="40" y1="65" x2="40" y2="75"/>
4156                <line x1="5"  y1="40" x2="15" y2="40"/>
4157                <line x1="65" y1="40" x2="75" y2="40"/>
4158                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4159              </svg>
4160            </div>
4161            <div class="bp-card__badge" style="background:rgba(0,194,255,0.1); border-color:rgba(0,194,255,0.3); color:#00c2ff;">
4162              <span class="bp-card__badge-dot" style="background:#00c2ff"></span>
4163              Social
4164            </div>
4165            <div class="bp-card__steps">3 steps</div>
4166            <div class="bp-card__action" style="background:var(--c-accent-3)">
4167              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4168                <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/>
4169              </svg>
4170            </div>
4171          </div>
4172          <div class="bp-card__info">
4173            <p class="bp-card__category" data-i18n="bp2_category">Social Media</p>
4174            <h3 class="bp-card__name" data-i18n="bp2_name">Viral Short-Form Hook</h3>
4175            <p class="bp-card__desc" data-i18n="bp2_desc">Attention-grabbing vertical clips for Reels, TikTok, and Shorts — designed for high retention and loop-ability.</p>
4176            <div class="bp-card__tags">
4177              <span class="bp-card__tag">9:16</span>
4178              <span class="bp-card__tag">3–6s loop</span>
4179              <span class="bp-card__tag">Text→Video</span>
4180            </div>
4181            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use">
4182              Use this Blueprint
4183              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4184                <path d="M2 6h8M6 2l4 4-4 4"/>
4185              </svg>
4186            </a>
4187          </div>
4188        </div>
4189
4190        <!-- Blueprint 3: Cinematic Storytelling -->
4191        <div class="bp-card bp-card--3" data-bp>
4192          <div class="bp-card__visual">
4193            <div class="bp-card__bg"></div>
4194            <div class="bp-card__mesh"></div>
4195            <div class="bp-card__crosshair" aria-hidden="true">
4196              <svg viewBox="0 0 80 80" fill="none" stroke="#ff4d00" stroke-width="0.8">
4197                <circle cx="40" cy="40" r="30"/>
4198                <line x1="40" y1="5"  x2="40" y2="15"/>
4199                <line x1="40" y1="65" x2="40" y2="75"/>
4200                <line x1="5"  y1="40" x2="15" y2="40"/>
4201                <line x1="65" y1="40" x2="75" y2="40"/>
4202                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4203              </svg>
4204            </div>
4205            <div class="bp-card__badge" style="background:rgba(255,77,0,0.1); border-color:rgba(255,77,0,0.3); color:#ff4d00;">
4206              <span class="bp-card__badge-dot" style="background:#ff4d00"></span>
4207              Cinematic
4208            </div>
4209            <div class="bp-card__steps">5 steps</div>
4210            <div class="bp-card__action" style="background:var(--c-accent-2)">
4211              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4212                <path d="M5 5L15 10L5 15V5Z" fill="white"/>
4213              </svg>
4214            </div>
4215          </div>
4216          <div class="bp-card__info">
4217            <p class="bp-card__category" data-i18n="bp3_category">Storytelling</p>
4218            <h3 class="bp-card__name" data-i18n="bp3_name">Cinematic Story Reel</h3>
4219            <p class="bp-card__desc" data-i18n="bp3_desc">Multi-scene story sequences with consistent character, lighting continuity, and narrative arc — from concept to final cut.</p>
4220            <div class="bp-card__tags">
4221              <span class="bp-card__tag">16:9</span>
4222              <span class="bp-card__tag">Character mode</span>
4223              <span class="bp-card__tag">Multi-scene</span>
4224            </div>
4225            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use">
4226              Use this Blueprint
4227              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4228                <path d="M2 6h8M6 2l4 4-4 4"/>
4229              </svg>
4230            </a>
4231          </div>
4232        </div>
4233
4234        <!-- Blueprint 4: Anime / Stylized -->
4235        <div class="bp-card bp-card--4" data-bp>
4236          <div class="bp-card__visual">
4237            <div class="bp-card__bg"></div>
4238            <div class="bp-card__mesh"></div>
4239            <div class="bp-card__crosshair" aria-hidden="true">
4240              <svg viewBox="0 0 80 80" fill="none" stroke="#a78bfa" stroke-width="0.8">
4241                <circle cx="40" cy="40" r="30"/>
4242                <line x1="40" y1="5"  x2="40" y2="15"/>
4243                <line x1="40" y1="65" x2="40" y2="75"/>
4244                <line x1="5"  y1="40" x2="15" y2="40"/>
4245                <line x1="65" y1="40" x2="75" y2="40"/>
4246                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4247              </svg>
4248            </div>
4249            <div class="bp-card__badge" style="background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.3); color:#a78bfa;">
4250              <span class="bp-card__badge-dot" style="background:#a78bfa"></span>
4251              Stylized
4252            </div>
4253            <div class="bp-card__steps">4 steps</div>
4254            <div class="bp-card__action" style="background:#a78bfa">
4255              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4256                <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/>
4257              </svg>
4258            </div>
4259          </div>
4260          <div class="bp-card__info">
4261            <p class="bp-card__category" data-i18n="bp4_category">Anime &amp; Art</p>
4262            <h3 class="bp-card__name" data-i18n="bp4_name">Anime World Builder</h3>
4263            <p class="bp-card__desc" data-i18n="bp4_desc">Fantasy scenes, illustrated worlds, and stylized character animations — built for anime and creative art workflows.</p>
4264            <div class="bp-card__tags">
4265              <span class="bp-card__tag">Anime model</span>
4266              <span class="bp-card__tag">Stylized</span>
4267              <span class="bp-card__tag">16:9</span>
4268            </div>
4269            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use">
4270              Use this Blueprint
4271              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4272                <path d="M2 6h8M6 2l4 4-4 4"/>
4273              </svg>
4274            </a>
4275          </div>
4276        </div>
4277
4278        <!-- Blueprint 5: Brand / Promo -->
4279        <div class="bp-card bp-card--5" data-bp>
4280          <div class="bp-card__visual">
4281            <div class="bp-card__bg"></div>
4282            <div class="bp-card__mesh"></div>
4283            <div class="bp-card__crosshair" aria-hidden="true">
4284              <svg viewBox="0 0 80 80" fill="none" stroke="#ffb400" stroke-width="0.8">
4285                <circle cx="40" cy="40" r="30"/>
4286                <line x1="40" y1="5"  x2="40" y2="15"/>
4287                <line x1="40" y1="65" x2="40" y2="75"/>
4288                <line x1="5"  y1="40" x2="15" y2="40"/>
4289                <line x1="65" y1="40" x2="75" y2="40"/>
4290                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4291              </svg>
4292            </div>
4293            <div class="bp-card__badge" style="background:rgba(255,180,0,0.1); border-color:rgba(255,180,0,0.3); color:#ffb400;">
4294              <span class="bp-card__badge-dot" style="background:#ffb400"></span>
4295              Brand
4296            </div>
4297            <div class="bp-card__steps">3 steps</div>
4298            <div class="bp-card__action" style="background:#ffb400">
4299              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4300                <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/>
4301              </svg>
4302            </div>
4303          </div>
4304          <div class="bp-card__info">
4305            <p class="bp-card__category" data-i18n="bp5_category">Branding</p>
4306            <h3 class="bp-card__name" data-i18n="bp5_name">Brand Promo Reel</h3>
4307            <p class="bp-card__desc" data-i18n="bp5_desc">Polished promotional videos for product launches, campaigns, and social ads — consistent brand visual language throughout.</p>
4308            <div class="bp-card__tags">
4309              <span class="bp-card__tag">16:9 + 9:16</span>
4310              <span class="bp-card__tag">Style preset</span>
4311              <span class="bp-card__tag">Export-ready</span>
4312            </div>
4313            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use">
4314              Use this Blueprint
4315              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4316                <path d="M2 6h8M6 2l4 4-4 4"/>
4317              </svg>
4318            </a>
4319          </div>
4320        </div>
4321
4322        <!-- Blueprint 6: Experimental / Abstract -->
4323        <div class="bp-card bp-card--6" data-bp>
4324          <div class="bp-card__visual">
4325            <div class="bp-card__bg"></div>
4326            <div class="bp-card__mesh"></div>
4327            <div class="bp-card__crosshair" aria-hidden="true">
4328              <svg viewBox="0 0 80 80" fill="none" stroke="#00ffb4" stroke-width="0.8">
4329                <circle cx="40" cy="40" r="30"/>
4330                <line x1="40" y1="5"  x2="40" y2="15"/>
4331                <line x1="40" y1="65" x2="40" y2="75"/>
4332                <line x1="5"  y1="40" x2="15" y2="40"/>
4333                <line x1="65" y1="40" x2="75" y2="40"/>
4334                <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/>
4335              </svg>
4336            </div>
4337            <div class="bp-card__badge" style="background:rgba(0,255,180,0.08); border-color:rgba(0,255,180,0.25); color:#00ffb4;">
4338              <span class="bp-card__badge-dot" style="background:#00ffb4"></span>
4339              Experimental
4340            </div>
4341            <div class="bp-card__steps">2 steps</div>
4342            <div class="bp-card__action" style="background:#00ffb4">
4343              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
4344                <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/>
4345              </svg>
4346            </div>
4347          </div>
4348          <div class="bp-card__info">
4349            <p class="bp-card__category" data-i18n="bp6_category">Abstract Art</p>
4350            <h3 class="bp-card__name" data-i18n="bp6_name">Abstract Motion Art</h3>
4351            <p class="bp-card__desc" data-i18n="bp6_desc">Surreal textures, liquid motion, and experimental visual compositions — for creative projects with no limits and no rules.</p>
4352            <div class="bp-card__tags">
4353              <span class="bp-card__tag">Abstract</span>
4354              <span class="bp-card__tag">Experimental</span>
4355              <span class="bp-card__tag">Any ratio</span>
4356            </div>
4357            <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use">
4358              Use this Blueprint
4359              <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
4360                <path d="M2 6h8M6 2l4 4-4 4"/>
4361              </svg>
4362            </a>
4363          </div>
4364        </div>
4365
4366      </div><!-- /.blueprints__grid -->
4367
4368      <!-- Marquee -->
4369      <div class="blueprints__marquee" aria-hidden="true">
4370        <div class="blueprints__marquee-track">
4371          <div class="blueprints__marquee-item">
4372            <span class="blueprints__marquee-word" data-i18n="marquee_blueprints">Blueprints</span>
4373            <span class="blueprints__marquee-sep">✦</span>
4374            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_creation">Creation</span>
4375            <span class="blueprints__marquee-sep">✦</span>
4376            <span class="blueprints__marquee-word" data-i18n="marquee_ai_video">AI Video</span>
4377            <span class="blueprints__marquee-sep">✦</span>
4378            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_motion">Motion</span>
4379            <span class="blueprints__marquee-sep">✦</span>
4380            <span class="blueprints__marquee-word" data-i18n="marquee_cinematic">Cinematic</span>
4381            <span class="blueprints__marquee-sep">✦</span>
4382            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_generate">Generate</span>
4383            <span class="blueprints__marquee-sep">✦</span>
4384          </div>
4385          <!-- Duplicate for seamless loop -->
4386          <div class="blueprints__marquee-item">
4387            <span class="blueprints__marquee-word" data-i18n="marquee_blueprints">Blueprints</span>
4388            <span class="blueprints__marquee-sep">✦</span>
4389            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_creation">Creation</span>
4390            <span class="blueprints__marquee-sep">✦</span>
4391            <span class="blueprints__marquee-word" data-i18n="marquee_ai_video">AI Video</span>
4392            <span class="blueprints__marquee-sep">✦</span>
4393            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_motion">Motion</span>
4394            <span class="blueprints__marquee-sep">✦</span>
4395            <span class="blueprints__marquee-word" data-i18n="marquee_cinematic">Cinematic</span>
4396            <span class="blueprints__marquee-sep">✦</span>
4397            <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_generate">Generate</span>
4398            <span class="blueprints__marquee-sep">✦</span>
4399          </div>
4400        </div>
4401      </div>
4402
4403      <!-- Bottom CTA bar -->
4404      <div class="blueprints__cta">
4405        <div class="blueprints__cta-left">
4406          <div class="blueprints__cta-count" data-i18n="bp_count">20+ Blueprints</div>
4407          <p class="blueprints__cta-text">
4408            <span data-i18n="bp_growing"><strong>and growing.</strong> New blueprints added every week for emerging video formats and use cases.</span>
4409          </p>
4410        </div>
4411        <div class="blueprints__cta-actions">
4412          <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="bp_view_all">View All</a>
4413          <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" data-i18n="bp_start">Start with a Blueprint</a>
4414        </div>
4415      </div>
4416
4417    </div>
4418  </section>
4419
4420  
4420<script type="6c18279ba6d93a40249c492f-text/javascript">
4421    // Blueprint cards scroll reveal
4422    const bpCards = document.querySelectorAll('[data-bp]');
4423    const bpObs = new IntersectionObserver(entries => {
4424      entries.forEach(e => {
4425        if (e.isIntersecting) {
4426          e.target.classList.add('in-view');
4427          bpObs.unobserve(e.target);
4428        }
4429      });
4430    }, { threshold: 0.12 });
4431    bpCards.forEach(c => bpObs.observe(c));
4432  </script>
4432
4433
4434  <!-- ▼▼▼ SECTION 7 — COMMUNITY GALLERY / VIDEO SHOWCASE ▼▼▼ -->
4435  <style>
4436
4437    /* ═══════════════════════════════════════════
4438       GALLERY SECTION
4439    ═══════════════════════════════════════════ */
4440    .gallery {
4441      position: relative;
4442      padding-block: var(--section-pad);
4443      overflow: hidden;
4444    }
4445
4446    /* Radial spotlight */
4447    .gallery__spotlight {
4448      position: absolute;
4449      top: 0; left: 50%;
4450      transform: translateX(-50%);
4451      width: 900px;
4452      height: 500px;
4453      background: radial-gradient(ellipse at top, rgba(212,255,0,0.06) 0%, transparent 65%);
4454      pointer-events: none;
4455    }
4456
4457    /* ── Header ── */
4458    .gallery__header {
4459      text-align: center;
4460      margin-bottom: clamp(3rem, 6vw, 5rem);
4461      position: relative;
4462      z-index: 2;
4463    }
4464
4465    .gallery__label {
4466      display: inline-flex;
4467      align-items: center;
4468      gap: 0.6rem;
4469      font-family: var(--font-mono);
4470      font-size: var(--text-xs);
4471      color: var(--c-accent);
4472      text-transform: uppercase;
4473      letter-spacing: 0.14em;
4474      margin-bottom: 1.25rem;
4475    }
4476
4477    .gallery__label-line {
4478      width: 32px; height: 1px;
4479      background: var(--c-accent);
4480      opacity: 0.5;
4481    }
4482
4483    .gallery__title {
4484      font-family: var(--font-display);
4485      font-size: clamp(2.8rem, 6vw, 5.5rem);
4486      line-height: 0.92;
4487      text-transform: uppercase;
4488      color: var(--c-white);
4489      letter-spacing: 0.02em;
4490      margin-bottom: 1.25rem;
4491    }
4492
4493    .gallery__title em {
4494      font-style: normal;
4495      color: var(--c-accent);
4496    }
4497
4498    .gallery__subtitle {
4499      font-size: var(--text-lg);
4500      color: var(--c-text-muted);
4501      max-width: 500px;
4502      margin-inline: auto;
4503      line-height: 1.6;
4504    }
4505
4506    /* ── FILTER PILLS ── */
4507    .gallery__filters {
4508      display: flex;
4509      justify-content: center;
4510      gap: 0.5rem;
4511      margin-bottom: 2.5rem;
4512      flex-wrap: wrap;
4513      position: relative;
4514      z-index: 2;
4515    }
4516
4517    .gallery__filter {
4518      padding: 0.45rem 1.1rem;
4519      border-radius: var(--r-full);
4520      border: 1px solid var(--c-border);
4521      font-size: var(--text-xs);
4522      font-weight: 500;
4523      color: var(--c-text-muted);
4524      background: transparent;
4525      letter-spacing: 0.04em;
4526      cursor: pointer;
4527      transition: all var(--t-base) var(--ease);
4528    }
4529
4530    .gallery__filter:hover {
4531      border-color: var(--c-border-hi);
4532      color: var(--c-white);
4533    }
4534
4535    .gallery__filter.is-active {
4536      background: var(--c-accent);
4537      border-color: var(--c-accent);
4538      color: var(--c-black);
4539      font-weight: 700;
4540    }
4541
4542    /* ── MASONRY GRID ── */
4543    .gallery__grid {
4544      position: relative;
4545      z-index: 2;
4546      columns: 4;
4547      column-gap: 0.85rem;
4548    }
4549
4550    .gallery__item {
4551      break-inside: avoid;
4552      margin-bottom: 0.85rem;
4553      position: relative;
4554      border-radius: var(--r-lg);
4555      overflow: hidden;
4556      border: 1px solid var(--c-border);
4557      cursor: pointer;
4558      opacity: 0;
4559      transform: translateY(20px) scale(0.97);
4560      transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
4561                  border-color var(--t-base), box-shadow var(--t-slow);
4562    }
4563
4564    .gallery__item.in-view {
4565      opacity: 1;
4566      transform: translateY(0) scale(1);
4567    }
4568
4569    /* Staggered delays */
4570    .gallery__item:nth-child(1)  { transition-delay: 0.03s; }
4571    .gallery__item:nth-child(2)  { transition-delay: 0.07s; }
4572    .gallery__item:nth-child(3)  { transition-delay: 0.11s; }
4573    .gallery__item:nth-child(4)  { transition-delay: 0.15s; }
4574    .gallery__item:nth-child(5)  { transition-delay: 0.05s; }
4575    .gallery__item:nth-child(6)  { transition-delay: 0.09s; }
4576    .gallery__item:nth-child(7)  { transition-delay: 0.13s; }
4577    .gallery__item:nth-child(8)  { transition-delay: 0.17s; }
4578    .gallery__item:nth-child(9)  { transition-delay: 0.06s; }
4579    .gallery__item:nth-child(10) { transition-delay: 0.10s; }
4580    .gallery__item:nth-child(11) { transition-delay: 0.14s; }
4581    .gallery__item:nth-child(12) { transition-delay: 0.18s; }
4582
4583    .gallery__item:hover {
4584      border-color: var(--c-border-hi);
4585      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
4586      z-index: 3;
4587    }
4588
4589    /* Video thumb */
4590    .gallery__thumb {
4591      position: relative;
4592      width: 100%;
4593      display: block;
4594      background: var(--c-bg-3);
4595    }
4596
4597    /* Fake video gradient bg — each unique color */
4598    .gallery__thumb-bg {
4599      width: 100%;
4600      display: block;
4601      transition: transform 0.6s var(--ease);
4602    }
4603
4604    .gallery__item:hover .gallery__thumb-bg {
4605      transform: scale(1.05);
4606    }
4607
4608    /* Overlay on hover */
4609    .gallery__overlay {
4610      position: absolute;
4611      inset: 0;
4612      background: rgba(0,0,0,0);
4613      display: flex;
4614      flex-direction: column;
4615      align-items: center;
4616      justify-content: center;
4617      gap: 0.5rem;
4618      transition: background var(--t-slow) var(--ease);
4619    }
4620
4621    .gallery__item:hover .gallery__overlay { background: rgba(0,0,0,0.55); }
4622
4623    /* Play button in overlay */
4624    .gallery__play {
4625      width: 44px;
4626      height: 44px;
4627      background: var(--c-accent);
4628      border-radius: 50%;
4629      display: grid;
4630      place-items: center;
4631      opacity: 0;
4632      transform: scale(0.7);
4633      transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
4634    }
4635
4636    .gallery__item:hover .gallery__play {
4637      opacity: 1;
4638      transform: scale(1);
4639    }
4640
4641    .gallery__play svg { width: 16px; height: 16px; }
4642
4643    /* Duration badge */
4644    .gallery__duration {
4645      position: absolute;
4646      bottom: 0.6rem;
4647      right: 0.6rem;
4648      font-family: var(--font-mono);
4649      font-size: 0.6rem;
4650      color: rgba(255,255,255,0.7);
4651      background: rgba(0,0,0,0.6);
4652      padding: 0.15rem 0.45rem;
4653      border-radius: var(--r-sm);
4654      backdrop-filter: blur(4px);
4655    }
4656
4657    /* Model tag top-left */
4658    .gallery__model-tag {
4659      position: absolute;
4660      top: 0.6rem;
4661      left: 0.6rem;
4662      font-family: var(--font-mono);
4663      font-size: 0.58rem;
4664      text-transform: uppercase;
4665      letter-spacing: 0.08em;
4666      padding: 0.18rem 0.55rem;
4667      border-radius: var(--r-full);
4668      backdrop-filter: blur(8px);
4669      border: 1px solid;
4670      opacity: 0;
4671      transform: translateY(-4px);
4672      transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
4673    }
4674
4675    .gallery__item:hover .gallery__model-tag {
4676      opacity: 1;
4677      transform: translateY(0);
4678    }
4679
4680    /* Card info below thumb */
4681    .gallery__info {
4682      padding: 0.75rem 0.9rem 0.85rem;
4683      background: var(--c-surface);
4684    }
4685
4686    .gallery__prompt {
4687      font-family: var(--font-mono);
4688      font-size: 0.62rem;
4689      color: var(--c-text-muted);
4690      line-height: 1.5;
4691      margin-bottom: 0.5rem;
4692      display: -webkit-box;
4693      -webkit-line-clamp: 2;
4694      -webkit-box-orient: vertical;
4695      overflow: hidden;
4696    }
4697
4698    .gallery__meta {
4699      display: flex;
4700      align-items: center;
4701      justify-content: space-between;
4702      gap: 0.5rem;
4703    }
4704
4705    .gallery__creator {
4706      display: flex;
4707      align-items: center;
4708      gap: 0.4rem;
4709      font-size: var(--text-xs);
4710      color: var(--c-text-dim);
4711    }
4712
4713    .gallery__creator-avatar {
4714      width: 18px;
4715      height: 18px;
4716      border-radius: 50%;
4717      display: grid;
4718      place-items: center;
4719      font-size: 0.5rem;
4720      font-weight: 700;
4721      flex-shrink: 0;
4722    }
4723
4724    .gallery__likes {
4725      display: flex;
4726      align-items: center;
4727      gap: 0.3rem;
4728      font-size: var(--text-xs);
4729      color: var(--c-text-dim);
4730      transition: color var(--t-fast);
4731    }
4732
4733    .gallery__likes:hover { color: #ff4d6d; }
4734    .gallery__likes svg { width: 11px; height: 11px; }
4735
4736    /* ── LIVE COUNT BAR ── */
4737    .gallery__live-bar {
4738      display: flex;
4739      align-items: center;
4740      justify-content: center;
4741      gap: 2.5rem;
4742      margin-top: 3rem;
4743      padding: 1.5rem 2rem;
4744      background: rgba(255,255,255,0.02);
4745      border: 1px solid var(--c-border);
4746      border-radius: var(--r-xl);
4747      flex-wrap: wrap;
4748      position: relative;
4749      z-index: 2;
4750    }
4751
4752    .gallery__stat {
4753      display: flex;
4754      flex-direction: column;
4755      align-items: center;
4756      gap: 0.2rem;
4757    }
4758
4759    .gallery__stat-value {
4760      font-family: var(--font-display);
4761      font-size: clamp(1.5rem, 3vw, 2.2rem);
4762      color: var(--c-white);
4763      line-height: 1;
4764      letter-spacing: 0.04em;
4765    }
4766
4767    .gallery__stat-value span { color: var(--c-accent); }
4768
4769    .gallery__stat-label {
4770      font-family: var(--font-mono);
4771      font-size: 0.62rem;
4772      color: var(--c-text-dim);
4773      text-transform: uppercase;
4774      letter-spacing: 0.1em;
4775    }
4776
4777    .gallery__stat-sep {
4778      width: 1px;
4779      height: 40px;
4780      background: var(--c-border);
4781    }
4782
4783    /* Live indicator */
4784    .gallery__live-badge {
4785      display: flex;
4786      align-items: center;
4787      gap: 0.5rem;
4788      padding: 0.35rem 0.85rem;
4789      background: rgba(255,77,0,0.1);
4790      border: 1px solid rgba(255,77,0,0.3);
4791      border-radius: var(--r-full);
4792      font-family: var(--font-mono);
4793      font-size: 0.62rem;
4794      color: var(--c-accent-2);
4795      text-transform: uppercase;
4796      letter-spacing: 0.08em;
4797    }
4798
4799    .gallery__live-dot {
4800      width: 6px;
4801      height: 6px;
4802      background: var(--c-accent-2);
4803      border-radius: 50%;
4804      animation: pulse 1.5s ease-in-out infinite;
4805    }
4806
4807    /* ── LOAD MORE ── */
4808    .gallery__load-more {
4809      display: flex;
4810      justify-content: center;
4811      margin-top: 2.5rem;
4812      position: relative;
4813      z-index: 2;
4814    }
4815
4816    .btn--load {
4817      display: inline-flex;
4818      align-items: center;
4819      gap: 0.6rem;
4820      padding: 0.85rem 2rem;
4821      border: 1px solid var(--c-border-hi);
4822      border-radius: var(--r-full);
4823      font-size: var(--text-sm);
4824      font-weight: 600;
4825      color: var(--c-text-muted);
4826      transition: all var(--t-base) var(--ease);
4827      letter-spacing: 0.03em;
4828    }
4829
4830    .btn--load:hover {
4831      border-color: var(--c-accent);
4832      color: var(--c-accent);
4833      background: rgba(212,255,0,0.04);
4834      box-shadow: 0 0 24px rgba(212,255,0,0.1);
4835    }
4836
4837    .btn--load svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
4838    .btn--load:hover svg { transform: translateY(3px); }
4839
4840    /* Responsive */
4841    @media (max-width: 1100px) { .gallery__grid { columns: 3; } }
4842    @media (max-width: 768px)  { .gallery__grid { columns: 2; } }
4843    @media (max-width: 480px)  { .gallery__grid { columns: 1; } }
4844
4845  </style>
4846
4847  <section class="gallery" id="gallery" aria-label="Community Gallery">
4848    <div class="gallery__spotlight" aria-hidden="true"></div>
4849
4850    <div class="container">
4851
4852      <!-- Header -->
4853      <div class="gallery__header">
4854        <div class="gallery__label">
4855          <span class="gallery__label-line"></span>
4856          <span data-i18n="gallery_section_label">Community Gallery</span>
4857          <span class="gallery__label-line"></span>
4858        </div>
4859        <h2 class="gallery__title"><span data-i18n="gallery_title_line1">Made With</span><br><em data-i18n="gallery_title_line2">Pixwith AI</em></h2>
4860        <p class="gallery__subtitle" data-i18n="gallery_subtitle">Real videos from real creators — every clip made with AI, ready to inspire your next generation.</p>
4861      </div>
4862
4863      <!-- Filter pills -->
4864      <div class="gallery__filters" role="group" aria-label="Filter gallery">
4865        <button class="gallery__filter is-active" data-gfilter="all" data-i18n="gallery_filter_all">All</button>
4866        <button class="gallery__filter" data-gfilter="cinematic" data-i18n="gallery_filter_cinematic">Cinematic</button>
4867        <button class="gallery__filter" data-gfilter="anime" data-i18n="gallery_filter_anime">Anime</button>
4868        <button class="gallery__filter" data-gfilter="product" data-i18n="gallery_filter_product">Product</button>
4869        <button class="gallery__filter" data-gfilter="social" data-i18n="gallery_filter_social">Social</button>
4870        <button class="gallery__filter" data-gfilter="abstract" data-i18n="gallery_filter_abstract">Abstract</button>
4871      </div>
4872
4873      <!-- Masonry grid -->
4874      <div class="gallery__grid" id="gallery-grid">
4875
4876        <!-- Item 1 — tall, cinematic -->
4877        <div class="gallery__item" data-gitem data-cat="cinematic">
4878          <div class="gallery__thumb">
4879            <div class="gallery__thumb-bg" style="padding-top:140%; background:linear-gradient(160deg,#0d1a0a 0%,#1a2d0a 35%,#0a150a 70%,#050d05 100%);">
4880              <!-- Visual content: abstract shapes -->
4881              <svg style="position:absolute;inset:0;width:100%;
4881height:100%" viewBox="0 0 200 280" preserveAspectRatio="xMidYMid slice" fill="none">
4882                <circle cx="100" cy="100" r="80" fill="rgba(212,255,0,0.06)"/>
4883                <circle cx="60"  cy="180" r="50" fill="rgba(212,255,0,0.04)"/>
4884                <line x1="0" y1="140" x2="200" y2="140" stroke="rgba(212,255,0,0.08)" stroke-width="0.5"/>
4885                <line x1="100" y1="0" x2="100" y2="280" stroke="rgba(212,255,0,0.08)" stroke-width="0.5"/>
4886                <rect x="60" y="60" width="80" height="80" stroke="rgba(212,255,0,0.12)" stroke-width="0.5" fill="none" transform="rotate(15,100,100)"/>
4887              </svg>
4888            </div>
4889            <div class="gallery__overlay">
4890              <div class="gallery__play">
4891                <svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg>
4892              </div>
4893            </div>
4894            <span class="gallery__model-tag" style="background:rgba(212,255,0,0.12);border-color:rgba(212,255,0,0.3);color:#d4ff00;">Cinematic</span>
4895            <span class="gallery__duration">0:07</span>
4896          </div>
4897          <div class="gallery__info">
4898            <p class="gallery__prompt" data-i18n="gallery_prompt_1">"Rain-soaked city alley, slow dolly push-in, neon reflections, fog"</p>
4899            <div class="gallery__meta">
4900              <div class="gallery__creator">
4901                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div>
4902                @alexkim
4903              </div>
4904              <button class="gallery__likes">
4905                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
4906                2.4k
4907              </button>
4908            </div>
4909          </div>
4910        </div>
4911
4912        <!-- Item 2 — short, anime -->
4913        <div class="gallery__item" data-gitem data-cat="anime">
4914          <div class="gallery__thumb">
4915            <div class="gallery__thumb-bg" style="padding-top:75%; background:linear-gradient(160deg,#0a0d1a 0%,#0f1433 40%,#060810 100%);">
4916              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice" fill="none">
4917                <circle cx="150" cy="40"  r="60" fill="rgba(167,139,250,0.08)"/>
4918                <circle cx="40"  cy="110" r="40" fill="rgba(0,194,255,0.06)"/>
4919                <ellipse cx="100" cy="75" rx="70" ry="40" stroke="rgba(167,139,250,0.1)" stroke-width="0.5" fill="none"/>
4920              </svg>
4921            </div>
4922            <div class="gallery__overlay">
4923              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
4924            </div>
4925            <span class="gallery__model-tag" style="background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.3);color:#a78bfa;">Anime</span>
4926            <span class="gallery__duration">0:05</span>
4927          </div>
4928          <div class="gallery__info">
4929            <p class="gallery__prompt" data-i18n="gallery_prompt_2">"Floating sky city, soft anime style, gentle camera drift, dusk light"</p>
4930            <div class="gallery__meta">
4931              <div class="gallery__creator">
4932                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">MR</div>
4933                @mirarui
4934              </div>
4935              <button class="gallery__likes">
4936                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
4937                1.8k
4938              </button>
4939            </div>
4940          </div>
4941        </div>
4942
4943        <!-- Item 3 — tall, product -->
4944        <div class="gallery__item" data-gitem data-cat="product">
4945          <div class="gallery__thumb">
4946            <div class="gallery__thumb-bg" style="padding-top:125%; background:linear-gradient(160deg,#1a1200 0%,#2a1e00 40%,#0d0900 100%);">
4947              <svg style="position:absolute;inset:0;width:100%;
4947height:100%" viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" fill="none">
4948                <rect x="50" y="50" width="100" height="150" rx="8" stroke="rgba(255,180,0,0.15)" stroke-width="0.8" fill="rgba(255,180,0,0.03)"/>
4949                <circle cx="100" cy="125" r="35" fill="rgba(255,180,0,0.08)"/>
4950                <line x1="50" y1="125" x2="150" y2="125" stroke="rgba(255,180,0,0.1)" stroke-width="0.5"/>
4951              </svg>
4952            </div>
4953            <div class="gallery__overlay">
4954              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
4955            </div>
4956            <span class="gallery__model-tag" style="background:rgba(255,180,0,0.12);border-color:rgba(255,180,0,0.3);color:#ffb400;">Product</span>
4957            <span class="gallery__duration">0:06</span>
4958          </div>
4959          <div class="gallery__info">
4960            <p class="gallery__prompt" data-i18n="gallery_prompt_3">"Minimal perfume bottle, rotating turntable, studio light sweep, 9:16"</p>
4961            <div class="gallery__meta">
4962              <div class="gallery__creator">
4963                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a2a00,#1a1200)">SL</div>
4964                @saralens
4965              </div>
4966              <button class="gallery__likes">
4967                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
4968                3.1k
4969              </button>
4970            </div>
4971          </div>
4972        </div>
4973
4974        <!-- Item 4 — short, abstract -->
4975        <div class="gallery__item" data-gitem data-cat="abstract">
4976          <div class="gallery__thumb">
4977            <div class="gallery__thumb-bg" style="padding-top:80%; background:linear-gradient(160deg,#0a1a18 0%,#0a2820 40%,#050e0c 100%);">
4978              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice" fill="none">
4979                <circle cx="100" cy="80" r="60" stroke="rgba(0,255,180,0.1)" stroke-width="0.5"/>
4980                <circle cx="100" cy="80" r="40" stroke="rgba(0,255,180,0.08)" stroke-width="0.5"/>
4981                <circle cx="100" cy="80" r="20" fill="rgba(0,255,180,0.06)"/>
4982                <path d="M40 80 Q100 20 160 80 Q100 140 40 80Z" stroke="rgba(0,255,180,0.1)" stroke-width="0.5" fill="none"/>
4983              </svg>
4984            </div>
4985            <div class="gallery__overlay">
4986              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
4987            </div>
4988            <span class="gallery__model-tag" style="background:rgba(0,255,180,0.1);border-color:rgba(0,255,180,0.25);color:#00ffb4;">Abstract</span>
4989            <span class="gallery__duration">0:04</span>
4990          </div>
4991          <div class="gallery__info">
4992            <p class="gallery__prompt" data-i18n="gallery_prompt_4">"Liquid metal morphing, abstract surreal motion, deep teal, looping"</p>
4993            <div class="gallery__meta">
4994              <div class="gallery__creator">
4995                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#003a2a,#001a12)">DV</div>
4996                @devoid
4997              </div>
4998              <button class="gallery__likes">
4999                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5000                987
5001              </button>
5002            </div>
5003          </div>
5004        </div>
5005
5006        <!-- Item 5 — social, medium -->
5007        <div class="gallery__item" data-gitem data-cat="social">
5008          <div class="gallery__thumb">
5009            <div class="gallery__thumb-bg" style="padding-top:170%; background:linear-gradient(160deg,#1a0a00 0%,#2d1400 40%,#0d0500 100%);">
5010              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 340" preserveAspectRatio="xMidYMid slice" fill="none">
5011                <circle cx="100" cy="170" r="90" fill="rgba(255,77,0,0.05)"/>
5012                <circle cx="100" cy="170" r="60" stroke="rgba(255,77,0,0.1)" stroke-width="0.5" fill="none"/>
5013                <path d="M100 90 L155 200 L45 200 Z" stroke="rgba(255,77,0,0.12)" stroke-width="0.8" fill="rgba(255,77,0,0.04)"/>
5014              </svg>
5015            </div>
5016            <div class="gallery__overlay">
5017              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5018            </div>
5019            <span class="gallery__model-tag" style="background:rgba(255,77,0,0.12);border-color:rgba(255,77,0,0.3);color:#ff4d00;">Social 9:16</span>
5020            <span class="gallery__duration">0:06</span>
5021          </div>
5022          <div class="gallery__info">
5023            <p class="gallery__prompt" data-i18n="gallery_prompt_5">"Fast energy drink ad, punchy cuts, fire particles, vertical format"</p>
5024            <div class="gallery__meta">
5025              <div class="gallery__creator">
5026                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a0a00,#1a0500)">JX</div>
5027                @jaxon_v
5028              </div>
5029              <button class="gallery__likes">
5030                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5031                5.2k
5032              </button>
5033            </div>
5034          </div>
5035        </div>
5036
5037        <!-- Item 6 — cinematic landscape -->
5038        <div class="gallery__item" data-gitem data-cat="cinematic">
5039          <div class="gallery__thumb">
5040            <div class="gallery__thumb-bg" style="padding-top:62%; background:linear-gradient(160deg,#050812 0%,#0a1020 40%,#030508 100%);">
5041              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 124" preserveAspectRatio="xMidYMid slice" fill="none">
5042                <ellipse cx="100" cy="80" rx="120" ry="50" fill="rgba(0,194,255,0.04)"/>
5043                <circle cx="160" cy="30" r="25" fill="rgba(0,194,255,0.08)"/>
5044                <path d="M0 90 Q50 60 100 80 Q150 100 200 70" stroke="rgba(0,194,255,0.12)" stroke-width="0.8" fill="none"/>
5045              </svg>
5046            </div>
5047            <div class="gallery__overlay">
5048              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5049            </div>
5050            <span class="gallery__model-tag" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.25);color:#00c2ff;">Cinematic</span>
5051            <span class="gallery__duration">0:08</span>
5052          </div>
5053          <div class="gallery__info">
5054            <p class="gallery__prompt" data-i18n="gallery_prompt_6">"Deep space nebula, slow drift, ultra-wide cinematic, 21:9 ratio"</p>
5055            <div class="gallery__meta">
5056              <div class="gallery__creator">
5057                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#001a3a,#000a1a)">NB</div>
5058                @nebulart
5059              </div>
5060              <button class="gallery__likes">
5061                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5062                4.7k
5063              </button>
5064            </div>
5065          </div>
5066        </div>
5067
5068        <!-- Item 7 — anime tall -->
5069        <div class="gallery__item" data-gitem data-cat="anime">
5070          <div class="gallery__thumb">
5071            <div class="gallery__thumb-bg" style="padding-top:115%; background:linear-gradient(160deg,#0f0a1a 0%,#1a0f2a 40%,#070510 100%);">
5072              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 230" preserveAspectRatio="xMidYMid slice" fill="none">
5073                <path d="M100 20 L180 115 L100 210 L20 115 Z" stroke="rgba(167,139,250,0.12)" stroke-width="0.8" fill="rgba(167,139,250,0.03)"/>
5074                <circle cx="100" cy="115" r="50" fill="rgba(167,139,250,0.05)"/>
5075                <circle cx="100" cy="115" r="25" stroke="rgba(167,139,250,0.15)" stroke-width="0.5" fill="none"/>
5076              </svg>
5077            </div>
5078            <div class="gallery__overlay">
5079              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5080            </div>
5081            <span class="gallery__model-tag" style="background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.3);color:#a78bfa;">Anime</span>
5082            <span class="gallery__duration">0:05</span>
5083          </div>
5084          <div class="gallery__info">
5085            <p class="gallery__prompt" data-i18n="gallery_prompt_7">"Magical girl transformation sequence, sakura petals, dramatic zoom"</p>
5086            <div class="gallery__meta">
5087              <div class="gallery__creator">
5088                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">YK</div>
5089                @yukiframe
5090              </div>
5091              <button class="gallery__likes">
5092                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5093                6.3k
5094              </button>
5095            </div>
5096          </div>
5097        </div>
5098
5099        <!-- Item 8 — product short -->
5100        <div class="gallery__item" data-gitem data-cat="product">
5101          <div class="gallery__thumb">
5102            <div class="gallery__thumb-bg" style="padding-top:70%; background:linear-gradient(160deg,#0a0a0a 0%,#141414 50%,#080808 100%);">
5103              <svg style="position:absolute;inset:0;width:100%;
5103height:100%" viewBox="0 0 200 140" preserveAspectRatio="xMidYMid slice" fill="none">
5104                <rect x="70" y="30" width="60" height="80" rx="6" stroke="rgba(255,255,255,0.08)" fill="rgba(255,255,255,0.02)"/>
5105                <circle cx="100" cy="70" r="20" stroke="rgba(212,255,0,0.15)" stroke-width="0.8" fill="rgba(212,255,0,0.03)"/>
5106                <path d="M0 70 Q100 40 200 70" stroke="rgba(212,255,0,0.08)" stroke-width="0.5" fill="none"/>
5107              </svg>
5108            </div>
5109            <div class="gallery__overlay">
5110              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5111            </div>
5112            <span class="gallery__model-tag" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.25);color:#d4ff00;">Product</span>
5113            <span class="gallery__duration">0:04</span>
5114          </div>
5115          <div class="gallery__info">
5116            <p class="gallery__prompt" data-i18n="gallery_prompt_8">"Sleek wireless earbuds, clean white studio, subtle shadow, 360 spin"</p>
5117            <div class="gallery__meta">
5118              <div class="gallery__creator">
5119                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a1a0a,#0a0a05)">PP</div>
5120                @pixprod
5121              </div>
5122              <button class="gallery__likes">
5123                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5124                2.9k
5125              </button>
5126            </div>
5127          </div>
5128        </div>
5129
5130        <!-- Item 9 — abstract medium -->
5131        <div class="gallery__item" data-gitem data-cat="abstract">
5132          <div class="gallery__thumb">
5133            <div class="gallery__thumb-bg" style="padding-top:100%; background:linear-gradient(160deg,#1a0a12 0%,#2a0a1a 40%,#0d0508 100%);">
5134              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice" fill="none">
5135                <path d="M20 100 Q100 0 180 100 Q100 200 20 100Z" stroke="rgba(255,0,128,0.12)" stroke-width="0.8" fill="rgba(255,0,128,0.04)"/>
5136                <circle cx="100" cy="100" r="45" fill="rgba(255,0,128,0.05)"/>
5137                <circle cx="100" cy="100" r="70" stroke="rgba(255,0,128,0.07)" stroke-width="0.5" fill="none" stroke-dasharray="4 4"/>
5138              </svg>
5139            </div>
5140            <div class="gallery__overlay">
5141              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5142            </div>
5143            <span class="gallery__model-tag" style="background:rgba(255,0,128,0.1);border-color:rgba(255,0,128,0.25);color:#ff0080;">Abstract</span>
5144            <span class="gallery__duration">0:06</span>
5145          </div>
5146          <div class="gallery__info">
5147            <p class="gallery__prompt" data-i18n="gallery_prompt_9">"Neon fluid simulation, magenta bloom, loop-ready, abstract art"</p>
5148            <div class="gallery__meta">
5149              <div class="gallery__creator">
5150                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a001a,#1a000d)">CM</div>
5151                @chromamx
5152              </div>
5153              <button class="gallery__likes">
5154                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5155                1.4k
5156              </button>
5157            </div>
5158          </div>
5159        </div>
5160
5161        <!-- Item 10 — social square -->
5162        <div class="gallery__item" data-gitem data-cat="social">
5163          <div class="gallery__thumb">
5164            <div class="gallery__thumb-bg" style="padding-top:90%; background:linear-gradient(160deg,#121a0a 0%,#1e2a0a 40%,#080d05 100%);">
5165              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 180" preserveAspectRatio="xMidYMid slice" fill="none">
5166                <polygon points="100,20 180,160 20,160" stroke="rgba(212,255,0,0.12)" stroke-width="0.8" fill="rgba(212,255,0,0.04)"/>
5167                <circle cx="100" cy="110" r="30" fill="rgba(212,255,0,0.05)"/>
5168              </svg>
5169            </div>
5170            <div class="gallery__overlay">
5171              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5172            </div>
5173            <span class="gallery__model-tag" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.25);color:#d4ff00;">Social 1:1</span>
5174            <span class="gallery__duration">0:05</span>
5175          </div>
5176          <div class="gallery__info">
5177            <p class="gallery__prompt" data-i18n="gallery_prompt_10">"Nature timelapse, forest sunrise, misty mountains, square crop"</p>
5178            <div class="gallery__meta">
5179              <div class="gallery__creator">
5180                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#0a1a05,#050d03)">GN</div>
5181                @greennoise
5182              </div>
5183              <button class="gallery__likes">
5184                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5185                3.8k
5186              </button>
5187            </div>
5188          </div>
5189        </div>
5190
5191        <!-- Item 11 — cinematic medium -->
5192        <div class="gallery__item" data-gitem data-cat="cinematic">
5193          <div class="gallery__thumb">
5194            <div class="gallery__thumb-bg" style="padding-top:85%; background:linear-gradient(160deg,#0d0505 0%,#1a0808 40%,#080202 100%);">
5195              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 170" preserveAspectRatio="xMidYMid slice" fill="none">
5196                <path d="M0 120 Q60 80 100 100 Q140 120 200 70" stroke="rgba(255,77,0,0.12)" stroke-width="0.8" fill="none"/>
5197                <circle cx="80"  cy="90"  r="40" fill="rgba(255,77,0,0.05)"/>
5198                <circle cx="140" cy="110" r="25" fill="rgba(255,180,0,0.06)"/>
5199              </svg>
5200            </div>
5201            <div class="gallery__overlay">
5202              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5203            </div>
5204            <span class="gallery__model-tag" style="background:rgba(255,77,0,0.12);border-color:rgba(255,77,0,0.3);color:#ff4d00;">Cinematic</span>
5205            <span class="gallery__duration">0:09</span>
5206          </div>
5207          <div class="gallery__info">
5208            <p class="gallery__prompt" data-i18n="gallery_prompt_11">"Desert dunes at golden hour, heat haze ripple, wide orbit shot"</p>
5209            <div class="gallery__meta">
5210              <div class="gallery__creator">
5211                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#2a0a00,#140500)">TP</div>
5212                @terrapin
5213              </div>
5214              <button class="gallery__likes">
5215                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5216                7.1k
5217              </button>
5218            </div>
5219          </div>
5220        </div>
5221
5222        <!-- Item 12 — anime short wide -->
5223        <div class="gallery__item" data-gitem data-cat="anime">
5224          <div class="gallery__thumb">
5225            <div class="gallery__thumb-bg" style="padding-top:60%; background:linear-gradient(160deg,#0a0f1a 0%,#0a1530 40%,#040810 100%);">
5226              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" fill="none">
5227                <path d="M0 60 Q50 20 100 60 Q150 100 200 40" stroke="rgba(0,194,255,0.12)" stroke-width="0.8" fill="none"/>
5228                <circle cx="100" cy="60" r="35" fill="rgba(0,194,255,0.05)"/>
5229                <ellipse cx="100" cy="60" rx="80" ry="35" stroke="rgba(0,194,255,0.07)" stroke-width="0.5" fill="none"/>
5230              </svg>
5231            </div>
5232            <div class="gallery__overlay">
5233              <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div>
5234            </div>
5235            <span class="gallery__model-tag" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.25);color:#00c2ff;">Anime</span>
5236            <span class="gallery__duration">0:04</span>
5237          </div>
5238          <div class="gallery__info">
5239            <p class="gallery__prompt" data-i18n="gallery_prompt_12">"Ocean waves at midnight, anime style, moonlight shimmer, calm pan"</p>
5240            <div class="gallery__meta">
5241              <div class="gallery__creator">
5242                <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#001a2a,#000a14)">WV</div>
5243                @wavevfx
5244              </div>
5245              <button class="gallery__likes">
5246                <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg>
5247                2.2k
5248              </button>
5249            </div>
5250          </div>
5251        </div>
5252
5253      </div><!-- /.gallery__grid -->
5254
5255      <!-- Community stats bar -->
5256      <div class="gallery__live-bar">
5257        <div class="gallery__live-badge">
5258          <span class="gallery__live-dot"></span>
5259          <span data-i18n="gallery_live_badge">Live</span>
5260        </div>
5261        <div class="gallery__stat">
5262          <div class="gallery__stat-value">2.4<span>M</span></div>
5263          <div class="gallery__stat-label" data-i18n="gallery_stat_videos_label">Videos Generated</div>
5264        </div>
5265        <div class="gallery__stat-sep"></div>
5266        <div class="gallery__stat">
5267          <div class="gallery__stat-value">184<span>K</span></div>
5268          <div class="gallery__stat-label" data-i18n="gallery_stat_creators_label">Active Creators</div>
5269        </div>
5270        <div class="gallery__stat-sep"></div>
5271        <div class="gallery__stat">
5272          <div class="gallery__stat-value">97<span>%</span></div>
5273          <div class="gallery__stat-label" data-i18n="gallery_stat_rating_label">Satisfaction Rate</div>
5274        </div>
5275        <div class="gallery__stat-sep"></div>
5276        <div class="gallery__stat">
5277          <div class="gallery__stat-value">48<span>+</span></div>
5278          <div class="gallery__stat-label" data-i18n="gallery_stat_countries_label">Countries</div>
5279        </div>
5280      </div>
5281
5282      <!-- Load more -->
5283      <div class="gallery__load-more">
5284        <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--load">
5285          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
5286            <path d="M8 3v10M4 9l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/>
5287          </svg>
5288          <span data-i18n="gallery_load_more">Load More Videos</span>
5289        </a>
5290      </div>
5291
5292    </div>
5293  </section>
5294
5295  
5295<script type="6c18279ba6d93a40249c492f-text/javascript">
5296    (function () {
5297      // ── Gallery scroll reveal ──
5298      const gItems = document.querySelectorAll('[data-gitem]');
5299      const gObs = new IntersectionObserver(entries => {
5300        entries.forEach(e => {
5301          if (e.isIntersecting) {
5302            e.target.classList.add('in-view');
5303            gObs.unobserve(e.target);
5304          }
5305        });
5306      }, { threshold: 0.08 });
5307      gItems.forEach(i => gObs.observe(i));
5308
5309      // ── Filter logic ──
5310      const filters = document.querySelectorAll('[data-gfilter]');
5311      filters.forEach(f => {
5312        f.addEventListener('click', () => {
5313          filters.forEach(x => x.classList.remove('is-active'));
5314          f.classList.add('is-active');
5315
5316          const cat = f.dataset.gfilter;
5317          gItems.forEach(item => {
5318            const match = cat === 'all' || item.dataset.cat === cat;
5319            item.style.transition = 'opacity 0.35s ease, transform 0.35s ease';
5320            item.style.opacity    = match ? '1' : '0.15';
5321            item.style.transform  = match ? 'scale(1)' : 'scale(0.96)';
5322            item.style.pointerEvents = match ? 'auto' : 'none';
5323          });
5324        });
5325      });
5326    })();
5327  </script>
5327
5328
5329  <!-- ▼▼▼ SECTION 8 — FAQ ACCORDION ▼▼▼ -->
5330  <style>
5331
5332    /* ═══════════════════════════════════════════
5333       FAQ SECTION
5334    ═══════════════════════════════════════════ */
5335    .faq {
5336      position: relative;
5337      padding-block: var(--section-pad);
5338      overflow: hidden;
5339      background: var(--c-bg-2);
5340    }
5341
5342    /* Edge fades */
5343    .faq::before,
5344    .faq::after {
5345      content: '';
5346      position: absolute;
5347      left: 0; right: 0; height: 100px;
5348      pointer-events: none; z-index: 1;
5349    }
5350    .faq::before { top: 0;    background: linear-gradient(to bottom, var(--c-bg), transparent); }
5351    .faq::after  { bottom: 0; background: linear-gradient(to top,    var(--c-bg), transparent); }
5352
5353    /* Subtle dot-grid bg */
5354    .faq__dots {
5355      position: absolute;
5356      inset: 0;
5357      background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
5358      background-size: 28px 28px;
5359      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
5360      pointer-events: none;
5361    }
5362
5363    /* ── Layout: two-column ── */
5364    .faq__inner {
5365      position: relative;
5366      z-index: 2;
5367      display: grid;
5368      grid-template-columns: 1fr 1.6fr;
5369      gap: clamp(3rem, 7vw, 7rem);
5370      align-items: start;
5371    }
5372
5373    /* ── LEFT — sticky header ── */
5374    .faq__aside {
5375      position: sticky;
5376      top: 6rem;
5377    }
5378
5379    .faq__label {
5380      display: inline-flex;
5381      align-items: center;
5382      gap: 0.6rem;
5383      font-family: var(--font-mono);
5384      font-size: var(--text-xs);
5385      color: var(--c-accent-3);
5386      text-transform: uppercase;
5387      letter-spacing: 0.14em;
5388      margin-bottom: 1.25rem;
5389    }
5390
5391    .faq__label-line {
5392      width: 32px; height: 1px;
5393      background: var(--c-accent-3);
5394      opacity: 0.5;
5395    }
5396
5397    .faq__title {
5398      font-family: var(--font-display);
5399      font-size: clamp(2.5rem, 5vw, 4.5rem);
5400      line-height: 0.9;
5401      text-transform: uppercase;
5402      color: var(--c-white);
5403      letter-spacing: 0.02em;
5404      margin-bottom: 1.5rem;
5405    }
5406
5407    .faq__title em {
5408      font-style: normal;
5409      color: var(--c-accent-3);
5410    }
5411
5412    .faq__aside-desc {
5413      font-size: var(--text-base);
5414      color: var(--c-text-muted);
5415      line-height: 1.7;
5416      margin-bottom: 2rem;
5417    }
5418
5419    /* Category filters on left */
5420    .faq__cats {
5421      display: flex;
5422      flex-direction: column;
5423      gap: 0.4rem;
5424      margin-bottom: 2.5rem;
5425    }
5426
5427    .faq__cat {
5428      display: flex;
5429      align-items: center;
5430      gap: 0.6rem;
5431      padding: 0.55rem 0.85rem;
5432      border-radius: var(--r-md);
5433      font-size: var(--text-sm);
5434      color: var(--c-text-dim);
5435      cursor: pointer;
5436      transition: all var(--t-fast) var(--ease);
5437      border: 1px solid transparent;
5438    }
5439
5440    .faq__cat-dot {
5441      width: 6px; height: 6px;
5442      border-radius: 50%;
5443      flex-shrink: 0;
5444      transition: all var(--t-base) var(--ease);
5445    }
5446
5447    .faq__cat:hover {
5448      color: var(--c-text-muted);
5449      background: rgba(255,255,255,0.03);
5450    }
5451
5452    .faq__cat.is-active {
5453      color: var(--c-accent-3);
5454      background: rgba(0,194,255,0.06);
5455      border-color: rgba(0,194,255,0.2);
5456    }
5457
5458    /* Still stuck? CTA card */
5459    .faq__contact-card {
5460      background: rgba(0,0,0,0.3);
5461      border: 1px solid var(--c-border-hi);
5462      border-radius: var(--r-xl);
5463      padding: 1.5rem;
5464    }
5465
5466    .faq__contact-title {
5467      font-family: var(--font-display);
5468      font-size: 1.4rem;
5469      text-transform: uppercase;
5470      color: var(--c-white);
5471      letter-spacing: 0.04em;
5472      margin-bottom: 0.5rem;
5473    }
5474
5475    .faq__contact-desc {
5476      font-size: var(--text-sm);
5477      color: var(--c-text-muted);
5478      line-height: 1.6;
5479      margin-bottom: 1.1rem;
5480    }
5481
5482    .faq__contact-actions {
5483      display: flex;
5484      gap: 0.6rem;
5485      flex-wrap: wrap;
5486    }
5487
5488    .btn--faq-contact {
5489      display: inline-flex;
5490      align-items: center;
5491      gap: 0.4rem;
5492      padding: 0.55rem 1.1rem;
5493      border-radius: var(--r-full);
5494      font-size: var(--text-xs);
5495      font-weight: 600;
5496      letter-spacing: 0.04em;
5497      transition: all var(--t-base) var(--ease);
5498    }
5499
5500    .btn--faq-contact--primary {
5501      background: var(--c-accent-3);
5502      color: var(--c-black);
5503    }
5504
5505    .btn--faq-contact--primary:hover {
5506      background: #33cfff;
5507      box-shadow: 0 0 24px rgba(0,194,255,0.3);
5508      transform: translateY(-1px);
5509    }
5510
5511    .btn--faq-contact--ghost {
5512      border: 1px solid var(--c-border-hi);
5513      color: var(--c-text-muted);
5514    }
5515
5516    .btn--faq-contact--ghost:hover {
5517      border-color: var(--c-border-hi);
5518      color: var(--c-white);
5519      background: rgba(255,255,255,0.04);
5520    }
5521
5522    /* ── RIGHT — accordion list ── */
5523    .faq__list {
5524      display: flex;
5525      flex-direction: column;
5526      gap: 0;
5527    }
5528
5529    /* Category group heading */
5530    .faq__group-label {
5531      font-family: var(--font-mono);
5532      font-size: 0.62rem;
5533      text-transform: uppercase;
5534      letter-spacing: 0.12em;
5535      color: var(--c-text-dim);
5536      padding: 1.5rem 0 0.6rem;
5537      border-top: 1px solid var(--c-border);
5538      margin-top: 0.5rem;
5539      display: flex;
5540      align-items: center;
5541      gap: 0.6rem;
5542    }
5543
5544    .faq__group-label:first-child {
5545      border-top: none;
5546      padding-top: 0;
5547      margin-top: 0;
5548    }
5549
5550    .faq__group-label-dot {
5551      width: 5px; height: 5px;
5552      border-radius: 50%;
5553      flex-shrink: 0;
5554    }
5555
5556    /* Accordion item */
5557    .faq__item {
5558      border-bottom: 1px solid var(--c-border);
5559      opacity: 0;
5560      transform: translateY(16px);
5561      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
5562    }
5563
5564    .faq__item.in-view {
5565      opacity: 1;
5566      transform: translateY(0);
5567    }
5568
5569    /* Stagger delays */
5570    .faq__item:nth-child(1)  { transition-delay: 0.03s; }
5571    .faq__item:nth-child(2)  { transition-delay: 0.07s; }
5572    .faq__item:nth-child(3)  { transition-delay: 0.11s; }
5573    .faq__item:nth-child(4)  { transition-delay: 0.15s; }
5574    .faq__item:nth-child(5)  { transition-delay: 0.05s; }
5575    .faq__item:nth-child(6)  { transition-delay: 0.09s; }
5576    .faq__item:nth-child(7)  { transition-delay: 0.13s; }
5577    .faq__item:nth-child(8)  { transition-delay: 0.17s; }
5578    .faq__item:nth-child(9)  { transition-delay: 0.06s; }
5579    .faq__item:nth-child(10) { transition-delay: 0.10s; }
5580    .faq__item:nth-child(11) { transition-delay: 0.14s; }
5581    .faq__item:nth-child(12) { transition-delay: 0.18s; }
5582
5583    /* Trigger button */
5584    .faq__trigger {
5585      width: 100%;
5586      display: flex;
5587      align-items: center;
5588      justify-content: space-between;
5589      gap: 1.5rem;
5590      padding: 1.35rem 0;
5591      text-align: left;
5592      cursor: pointer;
5593      background: none;
5594      border: none;
5595      transition: color var(--t-fast);
5596    }
5597
5598    .faq__trigger:hover .faq__question { color: var(--c-white); }
5599
5600    .faq__trigger-left {
5601      display: flex;
5602      align-items: center;
5603      gap: 1rem;
5604      flex: 1;
5605    }
5606
5607    /* Number indicator */
5608    .faq__num {
5609      font-family: var(--font-mono);
5610      font-size: 0.65rem;
5611      color: var(--c-text-dim);
5612      width: 20px;
5613      flex-shrink: 0;
5614      transition: color var(--t-base);
5615    }
5616
5617    .faq__item.is-open .faq__num { color: var(--c-accent-3); }
5618
5619    .faq__question {
5620      font-size: var(--text-base);
5621      font-weight: 500;
5622      color: var(--c-text-muted);
5623      line-height: 1.4;
5624      transition: color var(--t-fast);
5625    }
5626
5627    .faq__item.is-open .faq__question { color: var(--c-white); }
5628
5629    /* +/- icon */
5630    .faq__icon {
5631      width: 28px;
5632      height: 28px;
5633      border-radius: 50%;
5634      border: 1px solid var(--c-border);
5635      display: grid;
5636      place-items: center;
5637      flex-shrink: 0;
5638      transition: all var(--t-base) var(--ease);
5639      color: var(--c-text-dim);
5640    }
5641
5642    .faq__item.is-open .faq__icon {
5643      border-color: var(--c-accent-3);
5644      background: rgba(0,194,255,0.08);
5645      color: var(--c-accent-3);
5646      transform: rotate(45deg);
5647    }
5648
5649    .faq__icon svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); }
5650
5651    /* Answer panel */
5652    .faq__answer {
5653      display: grid;
5654      grid-template-rows: 0fr;
5655      transition: grid-template-rows 0.45s var(--ease);
5656    }
5657
5658    .faq__item.is-open .faq__answer {
5659      grid-template-rows: 1fr;
5660    }
5661
5662    .faq__answer-inner {
5663      overflow: hidden;
5664    }
5665
5666    .faq__answer-content {
5667      padding: 0 0 1.5rem 2.5rem;
5668      font-size: var(--text-sm);
5669      color: var(--c-text-muted);
5670      line-height: 1.8;
5671    }
5672
5673    .faq__answer-content p + p { margin-top: 0.75rem; }
5674
5675    .faq__answer-content a {
5676      color: var(--c-accent-3);
5677      text-decoration: underline;
5678      text-underline-offset: 3px;
5679    }
5680
5681    .faq__answer-content a:hover { color: var(--c-white); }
5682
5683    /* Highlight callout inside answer */
5684    .faq__callout {
5685      display: flex;
5686      align-items: flex-start;
5687      gap: 0.6rem;
5688      margin-top: 0.85rem;
5689      padding: 0.75rem 1rem;
5690      background: rgba(0,194,255,0.05);
5691      border: 1px solid rgba(0,194,255,0.15);
5692      border-radius: var(--r-md);
5693      font-size: var(--text-xs);
5694      color: var(--c-accent-3);
5695      line-height: 1.6;
5696    }
5697
5698    .faq__callout svg { width: 14px; height: 14px; flex-shrink: 0;
5698 margin-top: 1px; }
5699
5700    /* Tag chip in answer */
5701    .faq__chip {
5702      display: inline-block;
5703      padding: 0.12rem 0.5rem;
5704      border-radius: var(--r-full);
5705      font-family: var(--font-mono);
5706      font-size: 0.6rem;
5707      background: rgba(212,255,0,0.08);
5708      color: var(--c-accent);
5709      border: 1px solid rgba(212,255,0,0.2);
5710      margin-right: 0.3rem;
5711    }
5712
5713    /* Search bar */
5714    .faq__search {
5715      position: relative;
5716      margin-bottom: 1.5rem;
5717      z-index: 2;
5718    }
5719
5720    .faq__search-input {
5721      width: 100%;
5722      background: var(--c-surface);
5723      border: 1px solid var(--c-border-hi);
5724      border-radius: var(--r-full);
5725      padding: 0.75rem 1rem 0.75rem 3rem;
5726      font-size: var(--text-sm);
5727      color: var(--c-text);
5728      outline: none;
5729      transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base);
5730    }
5731
5732    .faq__search-input::placeholder { color: var(--c-text-dim); }
5733
5734    .faq__search-input:focus {
5735      border-color: var(--c-accent-3);
5736      box-shadow: 0 0 0 3px rgba(0,194,255,0.1);
5737    }
5738
5739    .faq__search-icon {
5740      position: absolute;
5741      left: 1rem;
5742      top: 50%;
5743      transform: translateY(-50%);
5744      color: var(--c-text-dim);
5745      pointer-events: none;
5746    }
5747
5748    .faq__search-icon svg { width: 16px; height: 16px; }
5749
5750    /* Responsive */
5751    @media (max-width: 900px) {
5752      .faq__inner { grid-template-columns: 1fr; }
5753      .faq__aside { position: static; }
5754      .faq__cats { flex-direction: row; flex-wrap: wrap; }
5755    }
5756
5757  </style>
5758
5759  <section class="faq" id="faq" aria-label="Frequently Asked Questions">
5760    <div class="faq__dots" aria-hidden="true"></div>
5761
5762    <div class="container">
5763      <div class="faq__inner">
5764
5765        <!-- LEFT — sticky sidebar -->
5766        <div class="faq__aside">
5767          <div class="faq__label">
5768            <span class="faq__label-line"></span>
5769            <span data-i18n="faq_section_label">FAQ</span>
5770            <span class="faq__label-line"></span>
5771          </div>
5772        <h2 class="faq__title"><span data-i18n="faq_title_line1">Got</span><br><em data-i18n="faq_title_accent">Questions?</em><br><span data-i18n="faq_title_line3">We Got Answers.</span></h2>
5773        <p class="faq__aside-desc" data-i18n="faq_aside_desc">Everything you need to know about generating AI videos. Can't find the answer? Reach out to our team.</p>
5774
5775          <!-- Category filter list -->
5776          <div class="faq__cats" role="list">
5777            <div class="faq__cat is-active" data-faqcat="all" role="listitem">
5778              <span class="faq__cat-dot" style="background:var(--c-accent-3)"></span>
5779              <span data-i18n="faq_cat_all">All Questions</span>
5780            </div>
5781            <div class="faq__cat" data-faqcat="getting-started" role="listitem">
5782              <span class="faq__cat-dot" style="background:#d4ff00"></span>
5783              <span data-i18n="faq_cat_getting_started">Getting Started</span>
5784            </div>
5785            <div class="faq__cat" data-faqcat="models" role="listitem">
5786              <span class="faq__cat-dot" style="background:#00c2ff"></span>
5787              <span data-i18n="faq_cat_models">Models &amp; Generation</span>
5788            </div>
5789            <div class="faq__cat" data-faqcat="pricing" role="listitem">
5790              <span class="faq__cat-dot" style="background:#ff4d00"></span>
5791              <span data-i18n="faq_cat_pricing">Pricing &amp; Plans</span>
5792            </div>
5793            <div class="faq__cat" data-faqcat="privacy" role="listitem">
5794              <span class="faq__cat-dot" style="background:#a78bfa"></span>
5795              <span data-i18n="faq_cat_privacy">Privacy &amp; Ownership</span>
5796            </div>
5797          </div>
5798
5799          <!-- Contact card -->
5800          <div class="faq__contact-card">
5801            <h3 class="faq__contact-title" data-i18n="faq_contact_title">Still Stuck?</h3>
5802            <p class="faq__contact-desc" data-i18n="faq_contact_desc">Our team responds within 24 hours. We're happy to help with any use case or technical question.</p>
5803            <div class="faq__contact-actions">
5804              <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--faq-contact btn--faq-contact--primary">
5805                <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
5806                  <path d="M2 3h10a1 1 0 011 1v6a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1z"/>
5807                  <path d="M1 4l6 4 6-4"/>
5808                </svg>
5809                <span data-i18n="faq_contact_email">Email Us</span>
5810              </a>
5811              <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--faq-contact btn--faq-contact--ghost" data-i18n="faq_contact_discord">Discord</a>
5812            </div>
5813          </div>
5814        </div>
5815
5816        <!-- RIGHT — accordion -->
5817        <div class="faq__right">
5818
5819          <!-- Search -->
5820          <div class="faq__search">
5821            <span class="faq__search-icon">
5822              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
5823                <circle cx="7" cy="7" r="4.5"/>
5824                <path d="M11 11l3 3" stroke-linecap="round"/>
5825              </svg>
5826            </span>
5827            <input class="faq__search-input" type="search" data-i18n-placeholder="faq_search_placeholder" placeholder="Search questions…" id="faq-search" aria-label="Search FAQ"/>
5828          </div>
5829
5830          <!-- Accordion list -->
5831          <div class="faq__list" id="faq-list">
5832
5833            <!-- GROUP: Getting Started -->
5834            <div class="faq__group-label">
5835              <span class="faq__group-label-dot" style="background:#d4ff00"></span>
5836              <span data-i18n="faq_group_getting_started">Getting Started</span>
5837            </div>
5838
5839            <div class="faq__item" data-faqitem data-cat="getting-started">
5840              <button class="faq__trigger" aria-expanded="false">
5841                <div class="faq__trigger-left">
5842                  <span class="faq__num">01</span>
5843                  <span class="faq__question" data-i18n="faq_q1">
5843What is an AI video generator and how does it work?</span>
5844                </div>
5845                <div class="faq__icon" aria-hidden="true">
5846                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
5847                    <path d="M6 2v8M2 6h8"/>
5848                  </svg>
5849                </div>
5850              </button>
5851              <div class="faq__answer" role="region">
5852                <div class="faq__answer-inner">
5853                  <div class="faq__answer-content" data-i18n="faq_a1_combined">
5854                    <p>An AI video generator takes a text prompt or image as input and uses trained deep-learning models to synthesize short video clips. You describe what you want — the scene, mood, camera movement, style — and the model renders matching video frames in sequence.</p>
5855                    <p>Our platform routes your request to the most suitable model category (Text→Video, Image→Video, Cinematic, etc.) and returns a result in seconds. No timeline editor, no keyframes — just a prompt and a clip.</p>
5856                    <div class="faq__callout">
5857                      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg>
5858                      Average generation time: 3–8 seconds depending on model and clip length.
5859                    </div>
5860                  </div>
5861                </div>
5862              </div>
5863            </div>
5864
5865            <div class="faq__item" data-faqitem data-cat="getting-started">
5866              <button class="faq__trigger" aria-expanded="false">
5867                <div class="faq__trigger-left">
5868                  <span class="faq__num">02</span>
5869                  <span class="faq__question" data-i18n="faq_q2">Do I need any technical skills or video editing experience?</span>
5870                </div>
5871                <div class="faq__icon" aria-hidden="true">
5872                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5873                </div>
5874              </button>
5875              <div class="faq__answer" role="region">
5876                <div class="faq__answer-inner">
5877                  <div class="faq__answer-content" data-i18n="faq_a2">
5878                    <p>None at all. If you can type a sentence, you can generate a video. The platform is designed around clear defaults and guided steps — no timeline, no codec settings, no rendering queue to manage.</p>
5879                    <p>For more advanced users, you can fine-tune motion, lighting, aspect ratio, frame rate, and style presets. But it's entirely optional — the smart defaults produce great results right out of the box.</p>
5880                  </div>
5881                </div>
5882              </div>
5883            </div>
5884
5885            <div class="faq__item" data-faqitem data-cat="getting-started">
5886              <button class="faq__trigger" aria-expanded="false">
5887                <div class="faq__trigger-left">
5888                  <span class="faq__num">03</span>
5889                  <span class="faq__question" data-i18n="faq_q3">How do I write a good video prompt?</span>
5890                </div>
5891                <div class="faq__icon" aria-hidden="true">
5892                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5893                </div>
5894              </button>
5895              <div class="faq__answer" role="region">
5896                <div class="faq__answer-inner">
5897                  <div class="faq__answer-content" data-i18n="faq_a3">
5898                    <p>The best prompts include four elements: <strong>subject</strong>, <strong>environment</strong>, <strong>camera movement</strong>, and <strong>style/mood</strong>.</p>
5899                    <p>Example: <em style="color:var(--c-accent);font-style:normal">"A lone astronaut walks through a dusty red canyon, slow push-in shot, golden hour lighting, cinematic, 24mm lens."</em></p>
5900                    <p>You can also browse our Prompt Library for 50+ ready-to-use starters and adapt them to your idea.</p>
5901                    <div class="faq__callout">
5902                      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg>
5903                      Tip: camera motion words like "dolly-in", "orbit", "pan left" dramatically improve results.
5904                    </div>
5905                  </div>
5906                  </div>
5907                </div>
5908              </div>
5909            </div>
5910
5911            <!-- GROUP: Models & Generation -->
5912            <div class="faq__group-label">
5913              <span class="faq__group-label-dot" style="background:#00c2ff"></span>
5914              Models &amp; Generation
5915            </div>
5916
5917            <div class="faq__item" data-faqitem data-cat="models">
5918              <button class="faq__trigger" aria-expanded="false">
5919                <div class="faq__trigger-left">
5920                  <span class="faq__num">04</span>
5921                  <span class="faq__question" data-i18n="faq_q4">Which AI model should I use for my video?</span>
5922                </div>
5923                <div class="faq__icon" aria-hidden="true">
5924                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5925                </div>
5926              </button>
5927              <div class="faq__answer" role="region">
5928                <div class="faq__answer-inner">
5929                  <div class="faq__answer-content" data-i18n="faq_a4">
5930                    <p>Use <span class="faq__chip">Text→Video</span> for prompt-driven scene generation. Use <span class="faq__chip">Image→Video</span> when you have a reference photo to animate. Choose <span class="faq__chip">Cinematic</span> for dramatic camera movement and film-grade output. <span class="faq__chip">Anime</span> is optimized for illustrated, stylized, or fantasy aesthetics.</p>
5931                    <p>Not sure? Enable <strong>Auto-Recommend</strong> and the platform picks the best model based on your prompt content, input type, and goal — no guesswork needed.</p>
5932                  </div>
5933                </div>
5934              </div>
5935            </div>
5936
5937            <div class="faq__item" data-faqitem data-cat="models">
5938              <button class="faq__trigger" aria-expanded="false">
5939                <div class="faq__trigger-left">
5940                  <span class="faq__num">05</span>
5941                  <span class="faq__question" data-i18n="faq_q5">How long can the generated videos be?</span>
5942                </div>
5943                <div class="faq__icon" aria-hidden="true">
5944                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5945                </div>
5946              </button>
5947              <div class="faq__answer" role="region">
5948                <div class="faq__answer-inner">
5949                  <div class="faq__answer-content" data-i18n="faq_a5">
5950                    <p>Clip length ranges from 3 seconds up to 12 seconds depending on the model and your plan. Short clips (3–5s) are ideal for loops and social content. Longer clips (9–12s) work well for cinematic scenes and storytelling sequences.</p>
5951                    <p>You can chain multiple clips together in post-production to create longer narratives — our Blueprint templates include guidance on doing this effectively.</p>
5952                  </div>
5953                </div>
5954              </div>
5955            </div>
5956
5957            <div class="faq__item" data-faqitem data-cat="models">
5958              <button class="faq__trigger" aria-expanded="false">
5959                <div class="faq__trigger-left">
5960                  <span class="faq__num">06</span>
5961                  <span class="faq__question" data-i18n="faq_q6">Can I keep a character consistent across multiple clips?</span>
5962                </div>
5963                <div class="faq__icon" aria-hidden="true">
5964                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5965                </div>
5966              </button>
5967              <div class="faq__answer" role="region">
5968                <div class="faq__answer-inner">
5969                  <div class="faq__answer-content" data-i18n="faq_a6">
5970                    <p>Yes — this is what <strong style="color:var(--c-text)">Character Consistency Mode</strong> is built for. Upload a reference image of your character and the model will preserve their appearance, outfit, and key features across every clip you generate in that session.</p>
5971                    <p>It's available on Creator and Studio plans and is particularly powerful for series content, branded avatars, and multi-scene stories.</p>
5972                    <div class="faq__callout">
5973                      <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg>
5974                      For best results, use a clean front-facing reference image with neutral lighting.
5975                    </div>
5976                  </div>
5977                </div>
5978              </div>
5979            </div>
5980
5981            <!-- GROUP: Pricing & Plans -->
5982            <div class="faq__group-label">
5983              <span class="faq__group-label-dot" style="background:#ff4d00"></span>
5984              Pricing &amp; Plans
5985            </div>
5986
5987            <div class="faq__item" data-faqitem data-cat="pricing">
5988              <button class="faq__trigger" aria-expanded="false">
5989                <div class="faq__trigger-left">
5990                  <span class="faq__num">07</span>
5991                  <span class="faq__question" data-i18n="faq_q7">Is there a free plan? What does it include?</span>
5992                </div>
5993                <div class="faq__icon" aria-hidden="true">
5994                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
5995                </div>
5996              </button>
5997              <div class="faq__answer" role="region">
5998                <div class="faq__answer-inner">
5999                  <div class="faq__answer-content" data-i18n="faq_a7">
6000                    <p>Yes. The free plan gives you a daily generation allowance with standard speed and access to core models — enough to explore the platform and generate your first clips without a credit card.</p>
6001                    <p>Free plan outputs include a watermark. Upgrading to a paid plan removes watermarks, increases your daily generation limit, unlocks faster processing, and adds access to Character Consistency and advanced export formats.</p>
6002                  </div>
6003                </div>
6004              </div>
6005            </div>
6006
6007            <div class="faq__item" data-faqitem data-cat="pricing">
6008              <button class="faq__trigger" aria-expanded="false">
6009                <div class="faq__trigger-left">
6010                  <span class="faq__num">08</span>
6011                  <span class="faq__question" data-i18n="faq_q8">How do credits work and do they roll over?</span>
6012                </div>
6013                <div class="faq__icon" aria-hidden="true">
6014                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
6015                </div>
6016              </button>
6017              <div class="faq__answer" role="region">
6018                <div class="faq__answer-inner">
6019                  <div class="faq__answer-content" data-i18n="faq_a8">
6020                    <p>Each generation costs a set number of credits depending on clip length, resolution, and model. Shorter clips at standard resolution cost fewer credits; 4K cinematic clips cost more.</p>
6021                    <p>Unused monthly credits roll over to the next month (up to a 2x cap of your plan allowance). You can also purchase top-up credit packs at any time without changing your plan tier.</p>
6022                  </div>
6023                </div>
6024              </div>
6025            </div>
6026
6027            <div class="faq__item" data-faqitem data-cat="pricing">
6028              <button class="faq__trigger" aria-expanded="false">
6029                <div class="faq__trigger-left">
6030                  <span class="faq__num">09</span>
6031                  <span class="faq__question" data-i18n="faq_q9">Can I use the videos commercially?</span>
6032                </div>
6033                <div class="faq__icon" aria-hidden="true">
6034                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
6035                </div>
6036              </button>
6037              <div class="faq__answer" role="region">
6038                <div class="faq__answer-inner">
6039                  <div class="faq__answer-content" data-i18n="faq_a9">
6040                    <p>Yes — all paid plan outputs come with a full commercial license. You can use them in ads, client projects, social media, websites, and any commercial context.</p>
6041                    <p>Free plan outputs are limited to personal and non-commercial use. If you're generating for a client or a campaign, upgrade to Creator or Studio.</p>
6042                  </div>
6043                </div>
6044              </div>
6045            </div>
6046
6047            <!-- GROUP: Privacy & Ownership -->
6048            <div class="faq__group-label">
6049              <span class="faq__group-label-dot" style="background:#a78bfa"></span>
6050              Privacy &amp; Ownership
6051            </div>
6052
6053            <div class="faq__item" data-faqitem data-cat="privacy">
6054              <button class="faq__trigger" aria-expanded="false">
6055                <div class="faq__trigger-left">
6056                  <span class="faq__num">10</span>
6057                  <span class="faq__question" data-i18n="faq_q10">Do you use my prompts or uploads to train your AI models?</span>
6058                </div>
6059                <div class="faq__icon" aria-hidden="true">
6060                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
6061                </div>
6062              </button>
6063              <div class="faq__answer" role="region">
6064                <div class="faq__answer-inner">
6065                  <div class="faq__answer-content" data-i18n="faq_a10">
6066                    <p>No — your prompts, uploaded images, and generated videos are never used to train or fine-tune AI models without your explicit opt-in consent.</p>
6067                    <p>Studio plan users can additionally enable private generation mode, which prevents any metadata from being logged beyond what's needed for delivery. Your data is yours.</p>
6068                  </div>
6069                </div>
6070              </div>
6071            </div>
6072
6073            <div class="faq__item" data-faqitem data-cat="privacy">
6074              <button class="faq__trigger" aria-expanded="false">
6075                <div class="faq__trigger-left">
6076                  <span class="faq__num">11</span>
6077                  <span class="faq__question" data-i18n="faq_q11">Who owns the videos I generate?</span>
6078                </div>
6079                <div class="faq__icon" aria-hidden="true">
6080                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
6081                </div>
6082              </button>
6083              <div class="faq__answer" role="region">
6084                <div class="faq__answer-inner">
6085                  <div class="faq__answer-content" data-i18n="faq_a11">
6086                    <p>You do. All outputs generated on paid plans are fully owned by you upon creation. We claim no intellectual property rights over your generated videos.</p>
6087                    <p>Free plan outputs carry a platform attribution requirement — you're welcome to share them, just keep the credit. Upgrade to remove this requirement and get clean commercial ownership.</p>
6088                  </div>
6089                </div>
6090              </div>
6091            </div>
6092
6093            <div class="faq__item" data-faqitem data-cat="privacy">
6094              <button class="faq__trigger" aria-expanded="false">
6095                <div class="faq__trigger-left">
6096                  <span class="faq__num">12</span>
6097                  <span class="faq__question" data-i18n="faq_q12">Are there content restrictions? What does "uncensored" mean here?</span>
6098                </div>
6099                <div class="faq__icon" aria-hidden="true">
6100                  <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg>
6101                </div>
6102              </button>
6103              <div class="faq__answer" role="region">
6104                <div class="faq__answer-inner">
6105                  <div class="faq__answer-content" data-i18n="faq_a12">
6106                    <p>"Uncensored" means fewer style restrictions and broader creative flexibility — not the absence of rules. We do enforce responsible-use policies that prohibit non-consensual content, real-person sexual content, illegal material, and content designed to cause harm.</p>
6107                    <p>Within those bounds,to use this free AI video generator with no restrictions,you have wide creative latitude: graphic fiction, mature themes, experimental art, and niche aesthetics that mainstream tools typically block are generally supported.</p>
6108                  </div>
6109                </div>
6110              </div>
6111            </div>
6112
6113          </div><!-- /.faq__list -->
6114        </div><!-- /.faq__right -->
6115
6116      </div><!-- /.faq__inner -->
6117    </div>
6118  </section>
6119
6120  
6120<script type="6c18279ba6d93a40249c492f-text/javascript">
6121    (function () {
6122
6123      // ── Accordion ──
6124      const items = document.querySelectorAll('[data-faqitem]');
6125
6126      items.forEach(item => {
6127        const trigger = item.querySelector('.faq__trigger');
6128        trigger.addEventListener('click', () => {
6129          const isOpen = item.classList.contains('is-open');
6130          // Close all
6131          items.forEach(i => {
6132            i.classList.remove('is-open');
6133            i.querySelector('.faq__trigger').setAttribute('aria-expanded', 'false');
6134          });
6135          // Toggle clicked
6136          if (!isOpen) {
6137            item.classList.add('is-open');
6138            trigger.setAttribute('aria-expanded', 'true');
6139            // Smooth scroll into view if needed
6140            const rect = item.getBoundingClientRect();
6141            if (rect.top < 80) {
6142              item.scrollIntoView({ behavior: 'smooth', block: 'start' });
6143            }
6144          }
6145        });
6146      });
6147
6148      // ── Category filter ──
6149      const cats = document.querySelectorAll('[data-faqcat]');
6150      cats.forEach(cat => {
6151        cat.addEventListener('click', () => {
6152          cats.forEach(c => c.classList.remove('is-active'));
6153          cat.classList.add('is-active');
6154          const selected = cat.dataset.faqcat;
6155          items.forEach(item => {
6156            const match = selected === 'all' || item.dataset.cat === selected;
6157            item.style.display = match ? '' : 'none';
6158            // Close open items when filtering
6159            if (!match) {
6160              item.classList.remove('is-open');
6161              item.querySelector('.faq__trigger').setAttribute('aria-expanded', 'false');
6162            }
6163          });
6164          // Hide group labels with no visible children
6165          document.querySelectorAll('.faq__group-label').forEach(label => {
6166            let next = label.nextElementSibling;
6167            let hasVisible = false;
6168            while (next && !next.classList.contains('faq__group-label')) {
6169              if (next.style.display !== 'none') hasVisible = true;
6170              next = next.nextElementSibling;
6171            }
6172            label.style.display = hasVisible ? '' : 'none';
6173          });
6174        });
6175      });
6176
6177      // ── Live search ──
6178      const searchInput = document.getElementById('faq-search');
6179      searchInput.addEventListener('input', () => {
6180        const q = searchInput.value.toLowerCase().trim();
6181        items.forEach(item => {
6182          const q_text = item.querySelector('.faq__question').textContent.toLowerCase();
6183          const a_text = item.querySelector('.faq__answer-content').textContent.toLowerCase();
6184          const match  = !q || q_text.includes(q) || a_text.includes(q);
6185          item.style.display = match ? '' : 'none';
6186        });
6187      });
6188
6189      // ── Scroll reveal ──
6190      const faqObs = new IntersectionObserver(entries => {
6191        entries.forEach(e => {
6192          if (e.isIntersecting) {
6193            e.target.classList.add('in-view');
6194            faqObs.unobserve(e.target);
6195          }
6196        });
6197      }, { threshold: 0.1 });
6198
6199      items.forEach(i => faqObs.observe(i));
6200
6201      // Open first item by default
6202      if (items.length) {
6203        items[0].classList.add('is-open');
6204        items[0].querySelector('.faq__trigger').setAttribute('aria-expanded', 'true');
6205      }
6206
6207    })();
6208  </script>
6208
6209
6210  <!-- ▼▼▼ SECTION 9 — JOIN THE CREATORS CTA BANNER ▼▼▼ -->
6211  <style>
6212
6213    /* ═══════════════════════════════════════════
6214       JOIN CREATORS — CTA BANNER
6215    ═══════════════════════════════════════════ */
6216    .join {
6217      position: relative;
6218      padding-block: var(--section-pad);
6219      overflow: hidden;
6220    }
6221
6222    /* ── Full-bleed inner banner ── */
6223    .join__banner {
6224      position: relative;
6225      border-radius: calc(var(--r-xl) * 1.5);
6226      overflow: hidden;
6227      padding: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem);
6228      isolation: isolate;
6229    }
6230
6231    /* Multi-layer background */
6232    .join__banner-bg {
6233      position: absolute;
6234      inset: 0;
6235      background: linear-gradient(135deg,
6236        #0c1400 0%,
6237        #0f1c00 20%,
6238        #0a1000 40%,
6239        #050800 70%,
6240        #0a0d00 100%
6241      );
6242      z-index: 0;
6243    }
6244
6245    /* Animated conic gradient mesh */
6246    .join__mesh {
6247      position: absolute;
6248      inset: -20%;
6249      background: conic-gradient(
6250        from 220deg at 25% 60%,
6251        rgba(212,255,0,0.18) 0deg,
6252        transparent 60deg,
6253        rgba(255,77,0,0.08) 120deg,
6254        transparent 180deg,
6255        rgba(0,194,255,0.06) 240deg,
6256        transparent 300deg,
6257        rgba(212,255,0,0.10) 360deg
6258      );
6259      animation: join-spin 18s linear infinite;
6260      z-index: 0;
6261    }
6262
6263    @keyframes join-spin {
6264      to { transform: rotate(360deg); }
6265    }
6266
6267    /* Grid overlay */
6268    .join__grid-lines {
6269      position: absolute;
6270      inset: 0;
6271      background-image:
6272        linear-gradient(rgba(212,255,0,0.04) 1px, transparent 1px),
6273        linear-gradient(90deg, rgba(212,255,0,0.04) 1px, transparent 1px);
6274      background-size: 50px 50px;
6275      mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 80%);
6276      z-index: 0;
6277    }
6278
6279    /* Glow orbs */
6280    .join__orb {
6281      position: absolute;
6282      border-radius: 50%;
6283      filter: blur(80px);
6284      pointer-events: none;
6285      z-index: 0;
6286    }
6287
6288    .join__orb--1 {
6289      width: 500px; height: 500px;
6290      background: radial-gradient(circle, rgba(212,255,0,0.2) 0%, transparent 65%);
6291      top: -150px; left: -80px;
6292      animation: orb-float-1 10s ease-in-out infinite alternate;
6293    }
6294
6295    .join__orb--2 {
6296      width: 350px; height: 350px;
6297      background: radial-gradient(circle, rgba(255,77,0,0.12) 0%, transparent 65%);
6298      bottom: -100px; right: 5%;
6299      animation: orb-float-2 13s ease-in-out infinite alternate;
6300    }
6301
6302    .join__orb--3 {
6303      width: 250px; height: 250px;
6304      background: radial-gradient(circle, rgba(0,194,255,0.1) 0%, transparent 65%);
6305      top: 30%; right: 25%;
6306      animation: orb-float-1 16s ease-in-out infinite alternate-reverse;
6307    }
6308
6309    @keyframes orb-float-1 {
6310      from { transform: translate(0, 0) scale(1); }
6311      to   { transform: translate(40px, 30px) scale(1.1); }
6312    }
6313
6314    @keyframes orb-float-2 {
6315      from { transform: translate(0, 0) scale(1); }
6316      to   { transform: translate(-30px, -40px) scale(1.15); }
6317    }
6318
6319    /* Border glow */
6320    .join__banner::before {
6321      content: '';
6322      position: absolute;
6323      inset: 0;
6324      border-radius: inherit;
6325      border: 1px solid rgba(212,255,0,0.2);
6326      pointer-events: none;
6327      z-index: 3;
6328    }
6329
6330    /* Corner accents */
6331    .join__corner {
6332      position: absolute;
6333      width: 60px;
6334      height: 60px;
6335      z-index: 3;
6336      pointer-events: none;
6337    }
6338
6339    .join__corner--tl { top: 0; left: 0;
6340      border-top: 2px solid rgba(212,255,0,0.6);
6341      border-left: 2px solid rgba(212,255,0,0.6);
6342      border-radius: calc(var(--r-xl) * 1.5) 0 0 0;
6343    }
6344    .join__corner--tr { top: 0; right: 0;
6345      border-top: 2px solid rgba(212,255,0,0.3);
6346      border-right: 2px solid rgba(212,255,0,0.3);
6347      border-radius: 0 calc(var(--r-xl) * 1.5) 0 0;
6348    }
6349    .join__corner--bl { bottom: 0; left: 0;
6350      border-bottom: 2px solid rgba(212,255,0,0.3);
6351      border-left: 2px solid rgba(212,255,0,0.3);
6352      border-radius: 0 0 0 calc(var(--r-xl) * 1.5);
6353    }
6354    .join__corner--br { bottom: 0; right: 0;
6355      border-bottom: 2px solid rgba(212,255,0,0.6);
6356      border-right: 2px solid rgba(212,255,0,0.6);
6357      border-radius: 0 0 calc(var(--r-xl) * 1.5) 0;
6358    }
6359
6360    /* ── Inner content layout ── */
6361    .join__content {
6362      position: relative;
6363      z-index: 2;
6364      display: grid;
6365      grid-template-columns: 1fr auto;
6366      gap: clamp(2rem, 5vw, 5rem);
6367      align-items: center;
6368    }
6369
6370    /* LEFT — copy */
6371    .join__left {}
6372
6373    .join__eyebrow {
6374      display: inline-flex;
6375      align-items: center;
6376      gap: 0.6rem;
6377      font-family: var(--font-mono);
6378      font-size: var(--text-xs);
6379      color: var(--c-accent);
6380      text-transform: uppercase;
6381      letter-spacing: 0.14em;
6382      margin-bottom: 1.5rem;
6383      opacity: 0;
6384      transform: translateY(16px);
6385      animation: join-up 0.7s var(--ease) 0.1s forwards;
6386    }
6387
6388    .join__eyebrow-dot {
6389      width: 6px; height: 6px;
6390      background: var(--c-accent);
6391      border-radius: 50%;
6392      animation: pulse 2s ease-in-out infinite;
6393    }
6394
6395    .join__title {
6396      font-family: var(--font-display);
6397      font-size: clamp(3rem, 7vw, 6.5rem);
6398      line-height: 0.88;
6399      text-transform: uppercase;
6400      color: var(--c-white);
6401      letter-spacing: 0.02em;
6402      margin-bottom: 1.5rem;
6403      opacity: 0;
6404      transform: translateY(20px);
6405      animation: join-up 0.8s var(--ease) 0.2s forwards;
6406    }
6407
6408    .join__title-accent {
6409      color: var(--c-accent);
6410      display: block;
6411      position: relative;
6412    }
6413
6414    /* Underline stroke on accent line */
6415    .join__title-accent::after {
6416      content: '';
6417      position: absolute;
6418      bottom: 4px;
6419      left: 0;
6420      height: 3px;
6421      background: var(--c-accent-2);
6422      border-radius: 2px;
6423      width: 0;
6424      transition: width 1s var(--ease) 1s;
6425    }
6426
6427    .join__banner.in-view .join__title-accent::after {
6428      width: 60%;
6429    }
6430
6431    .join__desc {
6432      font-size: var(--text-lg);
6433      color: rgba(255,255,255,0.55);
6434      line-height: 1.65;
6435      max-width: 520px;
6436      margin-bottom: 2.5rem;
6437      opacity: 0;
6438      transform: translateY(16px);
6439      animation: join-up 0.8s var(--ease) 0.35s forwards;
6440    }
6441
6442    .join__desc strong { color: rgba(255,255,255,0.85); }
6443
6444    /* Social proof row */
6445    .join__proof {
6446      display: flex;
6447      align-items: center;
6448      gap: 1.5rem;
6449      margin-bottom: 2.5rem;
6450      flex-wrap: wrap;
6451      opacity: 0;
6452      transform: translateY(16px);
6453      animation: join-up 0.8s var(--ease) 0.45s forwards;
6454    }
6455
6456    .join__avatars {
6457      display: flex;
6458    }
6459
6460    .join__avatar {
6461      width: 34px;
6462      height: 34px;
6463      border-radius: 50%;
6464      border: 2px solid rgba(10,10,10,0.8);
6465      margin-left: -10px;
6466      display: grid;
6467      place-items: center;
6468      font-size: 0.58rem;
6469      font-weight: 700;
6470      color: rgba(255,255,255,0.7);
6471      flex-shrink: 0;
6472      font-family: var(--font-mono);
6473    }
6474
6475    .join__avatar:first-child { margin-left: 0; }
6476
6477    .join__proof-text {
6478      font-size: var(--text-sm);
6479      color: rgba(255,255,255,0.45);
6480      line-height: 1.4;
6481    }
6482
6483    .join__proof-text strong { color: var(--c-accent); }
6484
6485    /* Stars */
6486    .join__stars {
6487      display: flex;
6488      gap: 2px;
6489      margin-bottom: 0.2rem;
6490    }
6491
6492    .join__star {
6493      color: var(--c-accent);
6494      font-size: 0.75rem;
6495    }
6496
6497    /* CTA buttons */
6498    .join__ctas {
6499      display: flex;
6500      align-items: center;
6501      gap: 1rem;
6502      flex-wrap: wrap;
6503      opacity: 0;
6504      transform: translateY(16px);
6505      animation: join-up 0.8s var(--ease) 0.55s forwards;
6506    }
6507
6508    .btn--join-primary {
6509      display: inline-flex;
6510      align-items: center;
6511      gap: 0.6rem;
6512      padding: 1rem 2.25rem;
6513      background: var(--c-accent);
6514      color: var(--c-black);
6515      border-radius: var(--r-full);
6516      font-size: var(--text-base);
6517      font-weight: 800;
6518      letter-spacing: 0.03em;
6519      transition: all var(--t-base) var(--ease);
6520      position: relative;
6521      overflow: hidden;
6522    }
6523
6524    /* Shimmer sweep */
6525    .btn--join-primary::after {
6526      content: '';
6527      position: absolute;
6528      top: 0; left: -100%;
6529      width: 60%;
6530      height: 100%;
6531      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
6532      transition: left 0.5s var(--ease);
6533    }
6534
6535    .btn--join-primary:hover::after { left: 150%; }
6536
6537    .btn--join-primary:hover {
6538      background: #e8ff33;
6539      box-shadow: 0 0 50px rgba(212,255,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
6540      transform: translateY(-2px);
6541    }
6542
6543    .btn--join-primary:active { transform: translateY(0); }
6544
6545    .btn--join-outline {
6546      display: inline-flex;
6547      align-items: center;
6548      gap: 0.5rem;
6549      padding: 1rem 2rem;
6550      border: 1px solid rgba(255,255,255,0.2);
6551      color: rgba(255,255,255,0.6);
6552      border-radius: var(--r-full);
6553      font-size: var(--text-base);
6554      font-weight: 500;
6555      transition: all var(--t-base) var(--ease);
6556    }
6557
6558    .btn--join-outline:hover {
6559      border-color: rgba(255,255,255,0.5);
6560      color: var(--c-white);
6561      background: rgba(255,255,255,0.05);
6562    }
6563
6564    .btn--join-outline svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
6565    .btn--join-outline:hover svg { transform: translateX(3px); }
6566
6567    /* Fine print */
6568    .join__fine {
6569      margin-top: 1rem;
6570      font-size: var(--text-xs);
6571      color: rgba(255,255,255,0.25);
6572      font-family: var(--font-mono);
6573      letter-spacing: 0.05em;
6574      opacity: 0;
6575      animation: join-up 0.8s var(--ease) 0.7s forwards;
6576    }
6577
6578    /* RIGHT — feature list / stats panel */
6579    .join__right {
6580      display: flex;
6581      flex-direction: column;
6582      gap: 1rem;
6583      min-width: 260px;
6584      opacity: 0;
6585      transform: translateX(30px);
6586      animation: join-right 0.9s var(--ease) 0.4s forwards;
6587    }
6588
6589    @keyframes join-right {
6590      to { opacity: 1; transform: translateX(0); }
6591    }
6592
6593    /* Stat tiles */
6594    .join__stat-tile {
6595      background: rgba(255,255,255,0.04);
6596      border: 1px solid rgba(255,255,255,0.08);
6597      border-radius: var(--r-lg);
6598      padding: 1.1rem 1.4rem;
6599      display: flex;
6600      align-items: center;
6601      gap: 1rem;
6602      transition: all var(--t-base) var(--ease);
6603    }
6604
6605    .join__stat-tile:hover {
6606      background: rgba(212,255,0,0.05);
6607      border-color: rgba(212,255,0,0.2);
6608    }
6609
6610    .join__stat-tile-icon {
6611      width: 36px;
6612      height: 36px;
6613      border-radius: var(--r-md);
6614      display: grid;
6615      place-items: center;
6616      flex-shrink: 0;
6617    }
6618
6619    .join__stat-tile-icon svg { width: 18px; height: 18px; }
6620
6621    .join__stat-tile-val {
6622      font-family: var(--font-display);
6623      font-size: 1.6rem;
6624      line-height: 1;
6625      color: var(--c-white);
6626      letter-spacing: 0.04em;
6627    }
6628
6629    .join__stat-tile-val span { color: var(--c-accent); }
6630
6631    .join__stat-tile-label {
6632      font-size: var(--text-xs);
6633      color: rgba(255,255,255,0.35);
6634      margin-top: 0.15rem;
6635      font-family: var(--font-mono);
6636      text-transform: uppercase;
6637      letter-spacing: 0.08em;
6638    }
6639
6640    /* Feature checklist */
6641    .join__checklist {
6642      background: rgba(255,255,255,0.03);
6643      border: 1px solid rgba(255,255,255,0.07);
6644      border-radius: var(--r-lg);
6645      padding: 1.25rem 1.4rem;
6646      display: flex;
6647      flex-direction: column;
6648      gap: 0.65rem;
6649    }
6650
6651    .join__check-item {
6652      display: flex;
6653      align-items: center;
6654      gap: 0.65rem;
6655      font-size: var(--text-sm);
6656      color: rgba(255,255,255,0.5);
6657      transition: color var(--t-fast);
6658    }
6659
6660    .join__check-item:hover { color: rgba(255,255,255,0.8); }
6661
6662    .join__check-icon {
6663      width: 18px;
6664      height: 18px;
6665      border-radius: 50%;
6666      background: rgba(212,255,0,0.12);
6667      border: 1px solid rgba(212,255,0,0.3);
6668      display: grid;
6669      place-items: center;
6670      flex-shrink: 0;
6671    }
6672
6673    .join__check-icon svg { width: 9px; height: 9px; }
6674
6675    /* Animation keyframe */
6676    @keyframes join-up {
6677      to { opacity: 1; transform: translateY(0); }
6678    }
6679
6680    /* Scroll-triggered class */
6681    .join__banner { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
6682    .join__banner.in-view { opacity: 1; transform: translateY(0); }
6683
6684    /* Responsive */
6685    @media (max-width: 900px) {
6686      .join__content { grid-template-columns: 1fr; }
6687      .join__right { flex-direction: row; flex-wrap: wrap; min-width: unset; }
6688      .join__stat-tile { flex: 1; min-width: 140px; }
6689      .join__checklist { flex: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
6690    }
6691
6692    @media (max-width: 540px) {
6693      .join__ctas { flex-direction: column; align-items: stretch; }
6694      .btn--join-primary, .btn--join-outline { justify-content: center; }
6695      .join__right { flex-direction: column; }
6696    }
6697
6698  </style>
6699
6700  <section class="join" id="join" aria-label="Join the Creators">
6701    <div class="container">
6702
6703      <div class="join__banner" data-join-banner>
6704
6705        <!-- Background layers -->
6706        <div class="join__banner-bg" aria-hidden="true"></div>
6707        <div class="join__mesh"      aria-hidden="true"></div>
6708        <div class="join__grid-lines" aria-hidden="true"></div>
6709
6710        <!-- Glow orbs -->
6711        <div class="join__orb join__orb--1" aria-hidden="true"></div>
6712        <div class="join__orb join__orb--2" aria-hidden="true"></div>
6713        <div class="join__orb join__orb--3" aria-hidden="true"></div>
6714
6715        <!-- Corner accents -->
6716        <div class="join__corner join__corner--tl" aria-hidden="true"></div>
6717        <div class="join__corner join__corner--tr" aria-hidden="true"></div>
6718        <div class="join__corner join__corner--bl" aria-hidden="true"></div>
6719        <div class="join__corner join__corner--br" aria-hidden="true"></div>
6720
6721        <!-- Content -->
6722        <div class="join__content">
6723
6724          <!-- LEFT — copy -->
6725          <div class="join__left">
6726
6727            <div class="join__eyebrow">
6728            <span class="join__eyebrow-dot"></span>
6729            <span data-i18n="join_eyebrow">184,000+ Creators &amp; Growing</span>
6730            </div>
6731
6732            <h2 class="join__title">
6733              <span data-i18n="join_title_line1">Join the Creators</span>
6734              <span class="join__title-accent" data-i18n="join_title_accent">Shaping the Future</span>
6735              <span data-i18n="join_title_line3">of AI Video.</span>
6736            </h2>
6737
6738            <p class="join__desc" data-i18n="join_desc">
6739              From solo creators to global studios — <strong>Pixwith AI</strong> is where the next generation of video is being made. Start free, generate instantly, own everything you create.
6740            </p>
6741
6742            <!-- Social proof -->
6743            <div class="join__proof">
6744              <div class="join__avatars" aria-hidden="true">
6745                <div class="join__avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div>
6746                <div class="join__avatar" style="background:linear-gradient(135deg,#1a1a3a,#0a0a20)">MR</div>
6747                <div class="join__avatar" style="background:linear-gradient(135deg,#3a1a1a,#200a0a)">SL</div>
6748                <div class="join__avatar" style="background:linear-gradient(135deg,#2a1a00,#140d00)">JX</div>
6749                <div class="join__avatar" style="background:linear-gradient(135deg,#0f0a1a,#07050d)">YK</div>
6750                <div class="join__avatar" style="background:rgba(212,255,0,0.15); border-color:rgba(212,255,0,0.3); color:var(--c-accent);">+</div>
6751              </div>
6752              <div class="join__proof-text">
6753                <div class="join__stars">
6754                  <span class="join__star">★</span>
6755                  <span class="join__star">★</span>
6756                  <span class="join__star">★</span>
6757                  <span class="join__star">★</span>
6758                  <span class="join__star">★</span>
6759                </div>
6760                <strong>4.9/5</strong> from 12,000+ reviews
6761              </div>
6762            </div>
6763
6764            <!-- CTAs -->
6765            <div class="join__ctas">
6766              <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--join-primary" data-i18n="join_cta_primary">
6767                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
6768                  <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/>
6769                </svg>
6770                Start Generating — Free
6771              </a>
6772              <a href="#pricing" class="btn--join-outline" data-i18n="join_cta_secondary">
6773                View Plans
6774                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
6775                  <path d="M3 8h10M8 3l5 5-5 5" stroke-linecap="round" stroke-linejoin="round"/>
6776                </svg>
6777              </a>
6778            </div>
6779
6780            <p class="join__fine" data-i18n="join_fine">No credit card required &nbsp;·&nbsp; Cancel anytime &nbsp;·&nbsp; Free tier always available</p>
6781
6782          </div><!-- /.join__left -->
6783
6784          <!-- RIGHT — stats + checklist -->
6785          <div class="join__right">
6786
6787            <div class="join__stat-tile">
6788              <div class="join__stat-tile-icon" style="background:rgba(212,255,0,0.1)">
6789                <svg viewBox="0 0 18 18" fill="none" stroke="#d4ff00" stroke-width="1.5">
6790                  <path d="M3 3.5L15 9L3 14.5V3.5Z"/>
6791                </svg>
6792              </div>
6793              <div>
6794                <div class="join__stat-tile-val">2.4<span>M</span></div>
6795                <div class="join__stat-tile-label" data-i18n="join_stat_videos_label">Videos Generated</div>
6796              </div>
6797            </div>
6798
6799            <div class="join__stat-tile">
6800              <div class="join__stat-tile-icon" style="background:rgba(0,194,255,0.1)">
6801                <svg viewBox="0 0 18 18" fill="none" stroke="#00c2ff" stroke-width="1.5">
6802                  <circle cx="9" cy="7" r="3.5"/>
6803                  <path d="M2 17c0-3.87 3.13-7 7-7h0c3.87 0 7 3.13 7 7"/>
6804                </svg>
6805              </div>
6806              <div>
6807                <div class="join__stat-tile-val">184<span>K</span></div>
6808                <div class="join__stat-tile-label" data-i18n="join_stat_creators_label">Active Creators</div>
6809              </div>
6810            </div>
6811
6812            <div class="join__stat-tile">
6813              <div class="join__stat-tile-icon" style="background:rgba(255,77,0,0.1)">
6814                <svg viewBox="0 0 18 18" fill="none" stroke="#ff4d00" stroke-width="1.5">
6815                  <path d="M9 2l2.09 4.26L16 7.27l-3.5 3.41.83 4.81L9 13.25l-4.33 2.27.83-4.8
68151L2 7.27l4.91-.01L9 2z"/>
6816                </svg>
6817              </div>
6818              <div>
6819                <div class="join__stat-tile-val">4.9<span>★</span></div>
6820                <div class="join__stat-tile-label" data-i18n="join_stat_rating_label">Avg Rating</div>
6821              </div>
6822            </div>
6823
6824            <div class="join__checklist">
6825              <div class="join__check-item">
6826                <div class="join__check-icon">
6827                  <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round">
6828                    <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/>
6829                  </svg>
6830                </div>
6831                <span data-i18n="join_check_1">Free tier — no card needed</span>
6832              </div>
6833              <div class="join__check-item">
6834                <div class="join__check-icon">
6835                  <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round">
6836                    <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/>
6837                  </svg>
6838                </div>
6839                <span data-i18n="join_check_2">6+ AI models in one workspace</span>
6840              </div>
6841              <div class="join__check-item">
6842                <div class="join__check-icon">
6843                  <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round">
6844                    <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/>
6845                  </svg>
6846                </div>
6847                <span data-i18n="join_check_3">You own everything you create</span>
6848              </div>
6849              <div class="join__check-item">
6850                <div class="join__check-icon">
6851                  <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round">
6852                    <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/>
6853                  </svg>
6854                </div>
6855                <span data-i18n="join_check_4">Export-ready in MP4, WebM, GIF</span>
6856              </div>
6857              <div class="join__check-item">
6858                <div class="join__check-icon">
6859                  <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round">
6860                    <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/>
6861                  </svg>
6862                </div>
6863                <span data-i18n="join_check_5">Cancel anytime — no lock-in</span>
6864              </div>
6865            </div>
6866
6867          </div><!-- /.join__right -->
6868
6869        </div><!-- /.join__content -->
6870      </div><!-- /.join__banner -->
6871
6872    </div>
6873  </section>
6874
6875  
6875<script type="6c18279ba6d93a40249c492f-text/javascript">
6876    // Scroll reveal for join banner
6877    (function () {
6878      const banner = document.querySelector('[data-join-banner]');
6879      if (!banner) return;
6880      const obs = new IntersectionObserver(entries => {
6881        entries.forEach(e => {
6882          if (e.isIntersecting) {
6883            e.target.classList.add('in-view');
6884            obs.unobserve(e.target);
6885          }
6886        });
6887      }, { threshold: 0.15 });
6888      obs.observe(banner);
6889    })();
6890  </script>
6890
6891
6892  <!-- ▼▼▼ SECTION 10 — PRICING ▼▼▼ -->
6893  <style>
6894
6895    /* ═══════════════════════════════════════════
6896       PRICING SECTION
6897    ═══════════════════════════════════════════ */
6898    .pricing {
6899      position: relative;
6900      padding-block: var(--section-pad);
6901      overflow: hidden;
6902      background: var(--c-bg-2);
6903    }
6904
6905    .pricing::before,
6906    .pricing::after {
6907      content: '';
6908      position: absolute;
6909      left: 0; right: 0; height: 120px;
6910      pointer-events: none; z-index: 1;
6911    }
6912    .pricing::before { top: 0;    background: linear-gradient(to bottom, var(--c-bg), transparent); }
6913    .pricing::after  { bottom: 0; background: linear-gradient(to top,    var(--c-bg), transparent); }
6914
6915    /* Ambient background glow */
6916    .pricing__glow {
6917      position: absolute;
6918      width: 700px; height: 700px;
6919      border-radius: 50%;
6920      background: radial-gradient(circle, rgba(212,255,0,0.06) 0%, transparent 65%);
6921      top: 50%; left: 50%;
6922      transform: translate(-50%, -50%);
6923      pointer-events: none;
6924    }
6925
6926    /* ── Header ── */
6927    .pricing__header {
6928      position: relative;
6929      z-index: 2;
6930      text-align: center;
6931      margin-bottom: clamp(3rem, 6vw, 5rem);
6932    }
6933
6934    .pricing__label {
6935      display: inline-flex;
6936      align-items: center;
6937      gap: 0.6rem;
6938      font-family: var(--font-mono);
6939      font-size: var(--text-xs);
6940      color: var(--c-accent);
6941      text-transform: uppercase;
6942      letter-spacing: 0.14em;
6943      margin-bottom: 1.25rem;
6944    }
6945
6946    .pricing__label-line { width: 32px; height: 1px; background: var(--c-accent); opacity: 0.5; }
6947
6948    .pricing__title {
6949      font-family: var(--font-display);
6950      font-size: clamp(2.8rem, 6vw, 5.5rem);
6951      line-height: 0.92;
6952      text-transform: uppercase;
6953      color: var(--c-white);
6954      letter-spacing: 0.02em;
6955      margin-bottom: 1.25rem;
6956    }
6957
6958    .pricing__title em { font-style: normal; color: var(--c-accent); }
6959
6960    .pricing__subtitle {
6961      font-size: var(--text-lg);
6962      color: var(--c-text-muted);
6963      max-width: 480px;
6964      margin-inline: auto;
6965      line-height: 1.6;
6966    }
6967
6968    /* ── Billing Toggle ── */
6969    .pricing__toggle {
6970      display: inline-flex;
6971      align-items: center;
6972      gap: 0.85rem;
6973      margin-top: 2rem;
6974      padding: 0.35rem;
6975      background: var(--c-surface);
6976      border: 1px solid var(--c-border);
6977      border-radius: var(--r-full);
6978    }
6979
6980    .pricing__toggle-label {
6981      font-size: var(--text-sm);
6982      color: var(--c-text-muted);
6983      padding: 0 0.6rem;
6984      cursor: pointer;
6985      transition: color var(--t-fast);
6986    }
6987
6988    .pricing__toggle-label.is-active { color: var(--c-white); font-weight: 600; }
6989
6990    .pricing__toggle-switch {
6991      position: relative;
6992      width: 44px; height: 24px;
6993      background: var(--c-bg-3);
6994      border: 1px solid var(--c-border-hi);
6995      border-radius: var(--r-full);
6996      cursor: pointer;
6997      transition: background var(--t-base);
6998      flex-shrink: 0;
6999    }
7000
7001    .pricing__toggle-switch.is-annual { background: var(--c-accent); }
7002
7003    .pricing__toggle-knob {
7004      position: absolute;
7005      top: 3px; left: 3px;
7006      width: 16px; height: 16px;
7007      background: var(--c-white);
7008      border-radius: 50%;
7009      transition: transform var(--t-base) var(--ease);
7010      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
7011    }
7012
7013    .pricing__toggle-switch.is-annual .pricing__toggle-knob {
7014      transform: translateX(20px);
7015    }
7016
7017    .pricing__toggle-switch.is-annual .pricing__toggle-knob { background: var(--c-black); }
7018
7019    .pricing__save-badge {
7020      display: inline-flex;
7021      align-items: center;
7022      padding: 0.2rem 0.6rem;
7023      background: rgba(212,255,0,0.12);
7024      border: 1px solid rgba(212,255,0,0.3);
7025      border-radius: var(--r-full);
7026      font-family: var(--font-mono);
7027      font-size: 0.6rem;
7028      color: var(--c-accent);
7029      letter-spacing: 0.06em;
7030      text-transform: uppercase;
7031      white-space: nowrap;
7032    }
7033
7034    /* ── Plans Grid ── */
7035    .pricing__grid {
7036      position: relative;
7037      z-index: 2;
7038      display: grid;
7039      grid-template-columns: repeat(3, 1fr);
7040      gap: 1.25rem;
7041      align-items: start;
7042      margin-top: 3rem;
7043    }
7044
7045    /* Plan card */
7046    .plan {
7047      position: relative;
7048      border-radius: var(--r-xl);
7049      border: 1px solid var(--c-border);
7050      background: var(--c-surface);
7051      padding: 2rem;
7052      overflow: hidden;
7053      opacity: 0;
7054      transform: translateY(28px);
7055      transition: opacity 0.65s var(--ease), transform 0.65s var(--ease),
7056                  border-color var(--t-base), box-shadow var(--t-slow);
7057    }
7058
7059    .plan.in-view { opacity: 1; transform: translateY(0); }
7060    .plan:nth-child(1) { transition-delay: 0.05s; }
7061    .plan:nth-child(2) { transition-delay: 0.14s; }
7062    .plan:nth-child(3) { transition-delay: 0.23s; }
7063
7064    .plan:hover {
7065      border-color: var(--c-border-hi);
7066      box-shadow: var(--shadow-lg);
7067      transform: translateY(-4px) !important;
7068    }
7069
7070    /* FEATURED plan — Pro / Creator */
7071    .plan--featured {
7072      border-color: rgba(212,255,0,0.35);
7073      background: linear-gradient(160deg, #111800 0%, #0c1100 50%, #080c00 100%);
7074      transform: translateY(-8px) !important;
7075    }
7076
7077    .plan--featured.in-view { transform: translateY(-8px) !important; }
7078
7079    .plan--featured:hover {
7080      border-color: rgba(212,255,0,0.6);
7081      box-shadow: 0 0 60px rgba(212,255,0,0.12), var(--shadow-lg);
7082      transform: translateY(-14px) !important;
7083    }
7084
7085    /* Glow behind featured */
7086    .plan--featured::before {
7087      content: '';
7088      position: absolute;
7089      inset: 0;
7090      background: radial-gradient(circle at 50% 0%, rgba(212,255,0,0.08) 0%, transparent 60%);
7091      pointer-events: none;
7092    }
7093
7094    /* Popular badge */
7095    .plan__popular {
7096      position: absolute;
7097      top: -1px; left: 50%;
7098      transform: translateX(-50%);
7099      padding: 0.3rem 1.1rem;
7100      background: var(--c-accent);
7101      color: var(--c-black);
7102      font-family: var(--font-mono);
7103      font-size: 0.62rem;
7104      font-weight: 700;
7105      text-transform: uppercase;
7106      letter-spacing: 0.1em;
7107      border-radius: 0 0 var(--r-md) var(--r-md);
7108    }
7109
7110    /* Plan header */
7111    .plan__header { margin-bottom: 1.75rem; padding-top: 0.5rem; }
7112
7113    .plan__name {
7114      font-family: var(--font-display);
7115      font-size: 1.5rem;
7116      text-transform: uppercase;
7117      letter-spacing: 0.06em;
7118      color: var(--c-white);
7119      margin-bottom: 0.4rem;
7120    }
7121
7122    .plan__tagline {
7123      font-size: var(--text-xs);
7124      color: var(--c-text-dim);
7125      font-family: var(--font-mono);
7126      letter-spacing: 0.06em;
7127    }
7128
7129    /* Price block */
7130    .plan__price {
7131      margin-bottom: 1.75rem;
7132      padding-bottom: 1.75rem;
7133      border-bottom: 1px solid var(--c-border);
7134    }
7135
7136    .plan__amount {
7137      display: flex;
7138      align-items: flex-start;
7139      gap: 0.15rem;
7140      line-height: 1;
7141      margin-bottom: 0.35rem;
7142    }
7143
7144    .plan__currency {
7145      font-family: var(--font-display);
7146      font-size: 1.4rem;
7147      color: var(--c-text-muted);
7148      margin-top: 0.6rem;
7149      letter-spacing: 0;
7150    }
7151
7152    .plan__number {
7153      font-family: var(--font-display);
7154      font-size: clamp(3rem, 5vw, 4rem);
7155      color: var(--c-white);
7156      letter-spacing: -0.02em;
7157    }
7158
7159    .plan--featured .plan__number { color: var(--c-accent); }
7160
7161    .plan__period {
7162      font-size: var(--text-xs);
7163      color: var(--c-text-dim);
7164      font-family: var(--font-mono);
7165      letter-spacing: 0.06em;
7166      align-self: flex-end;
7167      margin-bottom: 0.3rem;
7168    }
7169
7170    .plan__annual-note {
7171      font-size: var(--text-xs);
7172      color: var(--c-text-dim);
7173      font-family: var(--font-mono);
7174      letter-spacing: 0.04em;
7175      min-height: 1.2rem;
7176    }
7177
7178    .plan__annual-note.has-discount { color: var(--c-accent); }
7179
7180    /* CTA button */
7181    .plan__cta {
7182      display: block;
7183      width: 100%;
7184      padding: 0.9rem;
7185      border-radius: var(--r-full);
7186      text-align: center;
7187      font-size: var(--text-sm);
7188      font-weight: 700;
7189      letter-spacing: 0.04em;
7190      margin-bottom: 1.75rem;
7191      transition: all var(--t-base) var(--ease);
7192    }
7193
7194    .plan__cta--outline {
7195      border: 1px solid var(--c-border-hi);
7196      color: var(--c-text-muted);
7197    }
7198
7199    .plan__cta--outline:hover {
7200      border-color: var(--c-white);
7201      color: var(--c-white);
7202      background: rgba(255,255,255,0.05);
7203    }
7204
7205    .plan__cta--primary {
7206      background: var(--c-accent);
7207      color: var(--c-black);
7208      position: relative;
7209      overflow: hidden;
7210    }
7211
7212    .plan__cta--primary::after {
7213      content: '';
7214      position: absolute;
7215      top: 0; left: -100%;
7216      width: 60%;
7217      height: 100%;
7218      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
7219      transition: left 0.5s var(--ease);
7220    }
7221
7222    .plan__cta--primary:hover::after { left: 150%; }
7223
7224    .plan__cta--primary:hover {
7225      background: #e8ff33;
7226      box-shadow: 0 0 30px rgba(212,255,0,0.35);
7227      transform: translateY(-1px);
7228    }
7229
7230    .plan__cta--enterprise {
7231      border: 1px solid rgba(167,139,250,0.4);
7232      color: #a78bfa;
7233    }
7234
7235    .plan__cta--enterprise:hover {
7236      background: rgba(167,139,250,0.08);
7237      border-color: #a78bfa;
7238      transform: translateY(-1px);
7239    }
7240
7241    /* Feature list */
7242    .plan__features {
7243      display: flex;
7244      flex-direction: column;
7245      gap: 0.75rem;
7246    }
7247
7248    .plan__feature {
7249      display: flex;
7250      align-items: flex-start;
7251      gap: 0.65rem;
7252      font-size: var(--text-sm);
7253      color: var(--c-text-muted);
7254      line-height: 1.4;
7255    }
7256
7257    .plan__feature-icon {
7258      width: 18px; height: 18px;
7259      border-radius: 50%;
7260      display: grid;
7261      place-items: center;
7262      flex-shrink: 0;
7263      margin-top: 1px;
7264    }
7265
7266    .plan__feature-icon svg { width: 9px; height: 9px; }
7267
7268    .plan__feature-icon--check {
7269      background: rgba(212,255,0,0.1);
7270      border: 1px solid rgba(212,255,0,0.25);
7271    }
7272
7273    .plan__feature-icon--check svg { stroke: var(--c-accent); }
7274
7275    .plan__feature-icon--purple {
7276      background: rgba(167,139,250,0.1);
7277      border: 1px solid rgba(167,139,250,0.25);
7278    }
7279
7280    .plan__feature-icon--purple svg { stroke: #a78bfa; }
7281
7282    .plan__feature-icon--muted {
7283      background: rgba(255,255,255,0.04);
7284      border: 1px solid var(--c-border);
7285    }
7286
7287    .plan__feature-icon--muted svg { stroke: var(--c-text-dim); }
7288
7289    .plan__feature-label { flex: 1; }
7290    .plan__feature-label strong { color: var(--c-text); font-weight: 500; }
7291
7292    .plan__feature-badge {
7293      font-family: var(--font-mono);
7294      font-size: 0.55rem;
7295      padding: 0.1rem 0.45rem;
7296      border-radius: var(--r-full);
7297      background: rgba(212,255,0,0.1);
7298      color: var(--c-accent);
7299      border: 1px solid rgba(212,255,0,0.2);
7300      text-transform: uppercase;
7301      letter-spacing: 0.06em;
7302      flex-shrink: 0;
7303      align-self: center;
7304    }
7305
7306    .plan__feature-divider {
7307      height: 1px;
7308      background: var(--c-border);
7309      margin: 0.25rem 0;
7310    }
7311
7312    /* Credit display */
7313    .plan__credits {
7314      display: flex;
7315      align-items: center;
7316      gap: 0.6rem;
7317      padding: 0.65rem 0.85rem;
7318      background: rgba(0,0,0,0.25);
7319      border: 1px solid var(--c-border);
7320      border-radius: var(--r-md);
7321      margin-bottom: 1rem;
7322    }
7323
7324    .plan__credits-icon {
7325      width: 28px; height: 28px;
7326      border-radius: var(--r-sm);
7327      display: grid;
7328      place-items: center;
7329      flex-shrink: 0;
7330    }
7331
7332    .plan__credits-icon svg { width: 14px; height: 14px; }
7333
7334    .plan__credits-val {
7335      font-family: var(--font-display);
7336      font-size: 1.2rem;
7337      color: var(--c-white);
7338      letter-spacing: 0.04em;
7339    }
7340
7341    .plan__credits-label {
7342      font-size: var(--text-xs);
7343      color: var(--c-text-dim);
7344      font-family: var(--font-mono);
7345      text-transform: uppercase;
7346      letter-spacing: 0.06em;
7347    }
7348
7349    /* Enterprise plan wide card */
7350    .plan--enterprise {
7351      grid-column: span 3;
7352      background: linear-gradient(100deg, #0f0a1a 0%, #0a0a18 50%, #08060f 100%);
7353      border-color: rgba(167,139,250,0.2);
7354      padding: 2rem 2.5rem;
7355    }
7356
7357    .plan--enterprise:hover {
7358      border-color: rgba(167,139,250,0.45);
7359      box-shadow: 0 0 50px rgba(167,139,250,0.08), var(--shadow-lg);
7360    }
7361
7362    .plan--enterprise .plan__inner {
7363      display: grid;
7364      grid-template-columns: 1fr 1fr 1fr;
7365      gap: 2rem;
7366      align-items: center;
7367    }
7368
7369    .plan--enterprise .plan__features {
7370      grid-template-columns: 1fr 1fr;
7371      display: grid;
7372      gap: 0.6rem;
7373    }
7374
7375    /* Comparison note */
7376    .pricing__compare {
7377      position: relative;
7378      z-index: 2;
7379      text-align: center;
7380      margin-top: 2.5rem;
7381    }
7382
7383    .pricing__compare a {
7384      font-size: var(--text-sm);
7385      color: var(--c-text-dim);
7386      text-decoration: underline;
7387      text-underline-offset: 3px;
7388      transition: color var(--t-fast);
7389    }
7390
7391    .pricing__compare a:hover { color: var(--c-accent-3); }
7392
7393    /* Guarantee strip */
7394    .pricing__guarantee {
7395      position: relative;
7396      z-index: 2;
7397      display: flex;
7398      align-items: center;
7399      justify-content: center;
7400      gap: 2rem;
7401      margin-top: 3rem;
7402      padding: 1.25rem 2rem;
7403      border: 1px solid var(--c-border);
7404      border-radius: var(--r-full);
7405      flex-wrap: wrap;
7406    }
7407
7408    .pricing__guarantee-item {
7409      display: flex;
7410      align-items: center;
7411      gap: 0.5rem;
7412      font-size: var(--text-xs);
7413      color: var(--c-text-muted);
7414      font-family: var(--font-mono);
7415      text-transform: uppercase;
7416      letter-spacing: 0.08em;
7417    }
7418
7419    .pricing__guarantee-item svg { width: 14px; height: 14px; color: var(--c-accent); }
7420
7421    /* Responsive */
7422    @media (max-width: 960px) {
7423      .pricing__grid { grid-template-columns: 1fr; }
7424      .plan--featured { transform: none !important; }
7425      .plan--featured.in-view { transform: translateY(-4px) !important; }
7426      .plan--enterprise { grid-column: span 1; }
7427      .plan--enterprise .plan__inner { grid-template-columns: 1fr; }
7428      .plan--enterprise .plan__features { grid-template-columns: 1fr; }
7429    }
7430
7431    @media (max-width: 540px) {
7432      .pricing__guarantee { flex-direction: column; gap: 1rem;
7432 border-radius: var(--r-xl); }
7433    }
7434
7435  </style>
7436
7437  <section class="pricing" id="pricing" aria-label="Pricing Plans">
7438    <div class="pricing__glow" aria-hidden="true"></div>
7439    <div class="container">
7440
7441      <!-- Header -->
7442      <div class="pricing__header">
7443        <div class="pricing__label">
7444          <span class="pricing__label-line"></span>
7445          <span data-i18n="pricing_section_label">Pricing</span>
7446          <span class="pricing__label-line"></span>
7447        </div>
7448        <h2 class="pricing__title"><span data-i18n="pricing_title_line1">Simple Pricing.</span><br><em data-i18n="pricing_title_accent">Serious Output.</em></h2>
7449        <p class="pricing__subtitle" data-i18n="pricing_subtitle">Start free. Scale when you're ready. Every plan includes full model access and commercial licensing.</p>
7450
7451        <!-- Billing toggle -->
7452        <div class="pricing__toggle" id="billing-toggle">
7453          <span class="pricing__toggle-label is-active" id="toggle-monthly" data-i18n="pricing_toggle_monthly">Monthly</span>
7454          <div class="pricing__toggle-switch" id="toggle-switch">
7455            <div class="pricing__toggle-knob"></div>
7456          </div>
7457          <span class="pricing__toggle-label" id="toggle-annual" data-i18n="pricing_toggle_annual">Annual</span>
7458          <span class="pricing__save-badge" data-i18n="pricing_save_badge">Save 30%</span>
7459        </div>
7460      </div>
7461
7462      <!-- Plans grid -->
7463      <div class="pricing__grid">
7464
7465        <!-- FREE plan -->
7466        <div class="plan" data-plan>
7467          <div class="plan__header">
7468            <div class="plan__name" data-i18n="plan_free_name">Free</div>
7469            <div class="plan__tagline" data-i18n="plan_free_tagline">Try it — no card needed</div>
7470          </div>
7471
7472          <div class="plan__price">
7473            <div class="plan__amount">
7474              <span class="plan__currency">$</span>
7475              <span class="plan__number">0</span>
7476              <span class="plan__period">/mo</span>
7477            </div>
7478            <div class="plan__annual-note">&nbsp;</div>
7479          </div>
7480
7481          <div class="plan__credits">
7482            <div class="plan__credits-icon" style="background:rgba(255,255,255,0.06)">
7483              <svg viewBox="0 0 14 14" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.5">
7484                <path d="M3 3.5L11 7L3 10.5V3.5Z"/>
7485              </svg>
7486            </div>
7487            <div>
7488              <div class="plan__credits-val">25</div>
7489              <div class="plan__credits-label" data-i18n="plan_free_credits_label">Credits / day</div>
7490            </div>
7491          </div>
7492
7493          <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--outline" data-i18n="plan_free_cta">Get Started Free</a>
7494
7495          <div class="plan__features">
7496            <div class="plan__feature">
7497              <div class="plan__feature-icon plan__feature-icon--check">
7498                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7499              </div>
7500              <span class="plan__feature-label" data-i18n="plan_free_f1">Text → Video & Image → Video</span>
7501            </div>
7502            <div class="plan__feature">
7503              <div class="plan__feature-icon plan__feature-icon--check">
7504                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7505              </div>
7506              <span class="plan__feature-label" data-i18n="plan_free_f2">Up to 720p resolution</span>
7507            </div>
7508            <div class="plan__feature">
7509              <div class="plan__feature-icon plan__feature-icon--check">
7510                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7511              </div>
7512              <span class="plan__feature-label" data-i18n="plan_free_f3">Core model access</span>
7513            </div>
7514            <div class="plan__feature">
7515              <div class="plan__feature-icon plan__feature-icon--check">
7516                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7517              </div>
7518              <span class="plan__feature-label" data-i18n="plan_free_f4">Community prompt library</span>
7519            </div>
7520            <div class="plan__feature-divider"></div>
7521            <div class="plan__feature">
7522              <div class="plan__feature-icon plan__feature-icon--muted">
7523                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M2 2l5 5M7 2L2 7"/></svg>
7524              </div>
7525              <span class="plan__feature-label" style="color:var(--c-text-dim)" data-i18n="plan_free_f5">Watermark on exports</span>
7526            </div>
7527            <div class="plan__feature">
7528              <div class="plan__feature-icon plan__feature-icon--muted">
7529                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M2 2l5 5M7 2L2 7"/></svg>
7530              </div>
7531              <span class="plan__feature-label" style="color:var(--c-text-dim)" data-i18n="plan_free_f6">Personal use only</span>
7532            </div>
7533          </div>
7534        </div>
7535
7536        <!-- CREATOR plan — FEATURED -->
7537        <div class="plan plan--featured" data-plan>
7538            <div class="plan__popular" data-i18n="pricing_popular_badge">Most Popular</div>
7539
7540            <div class="plan__header">
7541              <div class="plan__name" data-i18n="plan_creator_name">Creator</div>
7542              <div class="plan__tagline" data-i18n="plan_creator_tagline">For regular creators &amp; freelancers</div>
7543            </div>
7544
7545          <div class="plan__price">
7546            <div class="plan__amount">
7547              <span class="plan__currency">$</span>
7548              <span class="plan__number" data-monthly="29" data-annual="20">29</span>
7549              <span class="plan__period">/mo</span>
7550            </div>
7551            <div class="plan__annual-note" id="creator-annual-note">&nbsp;</div>
7552          </div>
7553
7554          <div class="plan__credits">
7555            <div class="plan__credits-icon" style="background:rgba(212,255,0,0.1)">
7556              <svg viewBox="0 0 14 14" fill="none" stroke="#d4ff00" stroke-width="1.5">
7557                <path d="M3 3.5L11 7L3 10.5V3.5Z"/>
7558              </svg>
7559            </div>
7560            <div>
7561              <div class="plan__credits-val" style="color:var(--c-accent)">500</div>
7562              <div class="plan__credits-label" data-i18n="plan_creator_credits_label">Credits / month</div>
7563            </div>
7564          </div>
7565
7566          <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--primary" data-i18n="plan_creator_cta">Start Creator Plan</a>
7567
7568          <div class="plan__features">
7569            <div class="plan__feature">
7570              <div class="plan__feature-icon plan__feature-icon--check">
7571                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7572              </div>
7573              <span class="plan__feature-label" data-i18n="plan_creator_f1"><strong>All Free features</strong>, plus:</span>
7574            </div>
7575            <div class="plan__feature">
7576              <div class="plan__feature-icon plan__feature-icon--check">
7577                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7578              </div>
7579              <span class="plan__feature-label" data-i18n="plan_creator_f2">Up to 1080p Full HD</span>
7580              <span class="plan__feature-badge">HD</span>
7581            </div>
7582            <div class="plan__feature">
7583              <div class="plan__feature-icon plan__feature-icon--check">
7584                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7585              </div>
7586              <span class="plan__feature-label" data-i18n="plan_creator_f3">No watermarks</span>
7587            </div>
7588            <div class="plan__feature">
7589              <div class="plan__feature-icon plan__feature-icon--check">
7590                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7591              </div>
7592              <span class="plan__feature-label" data-i18n="plan_creator_f4">Commercial license</span>
7593            </div>
7594            <div class="plan__feature">
7595              <div class="plan__feature-icon plan__feature-icon--check">
7596                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7597              </div>
7598              <span class="plan__feature-label" data-i18n="plan_creator_f5">All 6+ AI models</span>
7599            </div>
7600            <div class="plan__feature">
7601              <div class="plan__feature-icon plan__feature-icon--check">
7602                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7603              </div>
7604              <span class="plan__feature-label" data-i18n="plan_creator_f6">Character consistency mode</span>
7605              <span class="plan__feature-badge" data-i18n="plan_creator_badge_new">New</span>
7606            </div>
7607            <div class="plan__feature">
7608              <div class="plan__feature-icon plan__feature-icon--check">
7609                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7610              </div>
7611              <span class="plan__feature-label" data-i18n="plan_creator_f7">Priority generation speed</span>
7612            </div>
7613            <div class="plan__feature">
7614              <div class="plan__feature-icon plan__feature-icon--check">
7615                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7616              </div>
7617              <span class="plan__feature-label" data-i18n="plan_creator_f8">Credits roll over (up to 2×)</span>
7618            </div>
7619          </div>
7620        </div>
7621
7622        <!-- STUDIO plan -->
7623        <div class="plan" data-plan>
7624          <div class="plan__header">
7625            <div class="plan__name" data-i18n="plan_studio_name">Studio</div>
7626            <div class="plan__tagline" data-i18n="plan_studio_tagline">For teams &amp; power creators</div>
7627          </div>
7628
7629          <div class="plan__price">
7630            <div class="plan__amount">
7631              <span class="plan__currency">$</span>
7632              <span class="plan__number" data-monthly="89" data-annual="62">89</span>
7633              <span class="plan__period">/mo</span>
7634            </div>
7635            <div class="plan__annual-note" id="studio-annual-note">&nbsp;</div>
7636          </div>
7637
7638          <div class="plan__credits">
7639            <div class="plan__credits-icon" style="background:rgba(167,139,250,0.1)">
7640              <svg viewBox="0 0 14 14" fill="none" stroke="#a78bfa" stroke-width="1.5">
7641                <path d="M3 3.5L11 7L3 10.5V3.5Z"/>
7642              </svg>
7643            </div>
7644            <div>
7645              <div class="plan__credits-val" style="color:#a78bfa">2,000</div>
7646              <div class="plan__credits-label" data-i18n="plan_studio_credits_label">Credits / month</div>
7647            </div>
7648          </div>
7649
7650          <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--outline" style="border-color:rgba(167,139,250,0.4);color:#a78bfa;" data-i18n="plan_studio_cta">Start Studio Plan</a>
7651
7652          <div class="plan__features">
7653            <div class="plan__feature">
7654              <div class="plan__feature-icon plan__feature-icon--purple">
7655                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7656              </div>
7657              <span class="plan__feature-label" data-i18n="plan_studio_f1"><strong>All Creator features</strong>, plus:</span>
7658            </div>
7659            <div class="plan__feature">
7660              <div class="plan__feature-icon plan__feature-icon--purple">
7661                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7662              </div>
7663              <span class="plan__feature-label" data-i18n="plan_
7663studio_f2">Up to 4K resolution</span>
7664              <span class="plan__feature-badge" style="background:rgba(167,139,250,0.1);color:#a78bfa;border-color:rgba(167,139,250,0.25)">4K</span>
7665            </div>
7666            <div class="plan__feature">
7667              <div class="plan__feature-icon plan__feature-icon--purple">
7668                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7669              </div>
7670              <span class="plan__feature-label" data-i18n="plan_studio_f3">Private generation mode</span>
7671            </div>
7672            <div class="plan__feature">
7673              <div class="plan__feature-icon plan__feature-icon--purple">
7674                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7675              </div>
7676              <span class="plan__feature-label" data-i18n="plan_studio_f4">Batch export &amp; bulk download</span>
7677            </div>
7678            <div class="plan__feature">
7679              <div class="plan__feature-icon plan__feature-icon--purple">
7680                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7681              </div>
7682              <span class="plan__feature-label" data-i18n="plan_studio_f5">5 team member seats</span>
7683            </div>
7684            <div class="plan__feature">
7685              <div class="plan__feature-icon plan__feature-icon--purple">
7686                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7687              </div>
7688              <span class="plan__feature-label" data-i18n="plan_studio_f6">Dedicated support</span>
7689            </div>
7690            <div class="plan__feature">
7691              <div class="plan__feature-icon plan__feature-icon--purple">
7692                <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7693              </div>
7694              <span class="plan__feature-label" data-i18n="plan_studio_f7">API access (beta)</span>
7695              <span class="plan__feature-badge" style="background:rgba(167,139,250,0.1);color:#a78bfa;border-color:rgba(167,139,250,0.25)" data-i18n="plan_studio_badge_beta">Beta</span>
7696            </div>
7697          </div>
7698        </div>
7699
7700        <!-- ENTERPRISE — full width -->
7701        <div class="plan plan--enterprise" data-plan>
7702          <div class="plan__inner">
7703            <div>
7704              <div class="plan__name" style="font-size:2rem" data-i18n="plan_enterprise_name">Enterprise</div>
7705              <div class="plan__tagline" style="margin-bottom:0.75rem" data-i18n="plan_enterprise_tagline">Custom volume, SLA, dedicated infrastructure</div>
7706              <p style="font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.65;max-width:380px;" data-i18n="plan_enterprise_desc">For studios, agencies, and platforms generating at scale. Custom credit pools, SSO, priority SLA, and white-label options available.</p>
7707            </div>
7708            <div class="plan__features">
7709              <div class="plan__feature">
7710                <div class="plan__feature-icon plan__feature-icon--purple">
7711                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7712                </div>
7713                <span class="plan__feature-label" data-i18n="plan_enterprise_f1">Unlimited credits (custom)</span>
7714              </div>
7715              <div class="plan__feature">
7716                <div class="plan__feature-icon plan__feature-icon--purple">
7717                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7718                </div>
7719                <span class="plan__feature-label" data-i18n="plan_enterprise_f2">Dedicated GPU infrastructure</span>
7720              </div>
7721              <div class="plan__feature">
7722                <div class="plan__feature-icon plan__feature-icon--purple">
7723                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7724                </div>
7725                <span class="plan__feature-label" data-i18n="plan_enterprise_f3">SSO &amp; advanced security</span>
7726              </div>
7727              <div class="plan__feature">
7728                <div class="plan__feature-icon plan__feature-icon--purple">
7729                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7730                </div>
7731                <span class="plan__feature-label" data-i18n="plan_enterprise_f4">White-label options</span>
7732              </div>
7733              <div class="plan__feature">
7734                <div class="plan__feature-icon plan__feature-icon--purple">
7735                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7736                </div>
7737                <span class="plan__feature-label" data-i18n="plan_enterprise_f5">Priority SLA &amp; onboarding</span>
7738              </div>
7739              <div class="plan__feature">
7740                <div class="plan__feature-icon plan__feature-icon--purple">
7741                  <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg>
7742                </div>
7743                <span class="plan__feature-label" data-i18n="plan_enterprise_f6">Full API &amp; webhook access</span>
7744              </div>
7745            </div>
7746            <div style="display:flex;flex-direction:column;gap:0.75rem;
7746align-items:flex-start">
7747              <div style="font-family:var(--font-display);font-size:2.5rem;color:#a78bfa;letter-spacing:0.04em;line-height:1" data-i18n="plan_enterprise_custom_label">Custom</div>
7748              <div style="font-size:var(--text-xs);color:var(--c-text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em" data-i18n="plan_enterprise_pricing_label">Pricing</div>
7749              <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="plan__cta plan__cta--enterprise" style="width:auto;padding:0.9rem 2rem;margin:0.5rem 0 0" data-i18n="plan_enterprise_cta">Talk to Sales</a>
7750              <div style="font-size:var(--text-xs);color:var(--c-text-dim);font-family:var(--font-mono)" data-i18n="plan_enterprise_response">Response within 24h</div>
7751            </div>
7752          </div>
7753        </div>
7754
7755      </div><!-- /.pricing__grid -->
7756
7757      <!-- Compare note -->
7758      <div class="pricing__compare">
7759        <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" data-i18n="pricing_compare_link">See full feature comparison →</a>
7760      </div>
7761
7762      <!-- Guarantee strip -->
7763      <div class="pricing__guarantee">
7764        <div class="pricing__guarantee-item">
7765          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
7766            <path d="M7 1L2 4v4c0 2.76 2.24 5 5 5s5-2.24 5-5V4L7 1z"/>
7767            <path d="M5 7l1.5 1.5L9 5.5" stroke-linecap="round" stroke-linejoin="round"/>
7768          </svg>
7769          <span data-i18n="pricing_guarantee_1">30-day money-back guarantee</span>
7770        </div>
7771        <div class="pricing__guarantee-item">
7772          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
7773            <rect x="2" y="4" width="10" height="7" rx="1"/>
7774            <path d="M5 4V3a2 2 0 014 0v1"/>
7775          </svg>
7776          <span data-i18n="pricing_guarantee_2">No credit card for free tier</span>
7777        </div>
7778        <div class="pricing__guarantee-item">
7779          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
7780            <path d="M7 1v12M1 7h12"/>
7781          </svg>
7782          <span data-i18n="pricing_guarantee_3">Cancel or change plan anytime</span>
7783        </div>
7784        <div class="pricing__guarantee-item">
7785          <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
7786            <circle cx="7" cy="7" r="5.5"/>
7787            <path d="M7 4.5v3l2 1.5"/>
7788          </svg>
7789          <span data-i18n="pricing_guarantee_4">Unused credits roll over</span>
7790        </div>
7791      </div>
7792
7793    </div>
7794  </section>
7795
7796  
7796<script type="6c18279ba6d93a40249c492f-text/javascript">
7797    (function () {
7798      // ── Plan cards scroll reveal ──
7799      const plans = document.querySelectorAll('[data-plan]');
7800      const planObs = new IntersectionObserver(entries => {
7801        entries.forEach(e => {
7802          if (e.isIntersecting) { e.target.classList.add('in-view'); planObs.unobserve(e.target); }
7803        });
7804      }, { threshold: 0.1 });
7805      plans.forEach(p => planObs.observe(p));
7806
7807      // ── Billing toggle ──
7808      const toggle   = document.getElementById('toggle-switch');
7809      const monthly  = document.getElementById('toggle-monthly');
7810      const annual   = document.getElementById('toggle-annual');
7811      const cnote    = document.getElementById('creator-annual-note');
7812      const snote    = document.getElementById('studio-annual-note');
7813      let isAnnual   = false;
7814
7815      function updatePricing() {
7816        document.querySelectorAll('[data-monthly]').forEach(el => {
7817          const m = el.dataset.monthly;
7818          const a = el.dataset.annual;
7819          el.textContent = isAnnual ? a : m;
7820        });
7821        cnote.textContent = isAnnual ? 'Billed $240/yr — save $108' : '';
7822        cnote.classList.toggle('has-discount', isAnnual);
7823        snote.textContent = isAnnual ? 'Billed $744/yr — save $324' : '';
7824        snote.classList.toggle('has-discount', isAnnual);
7825        monthly.classList.toggle('is-active', !isAnnual);
7826        annual.classList.toggle('is-active', isAnnual);
7827        toggle.classList.toggle('is-annual', isAnnual);
7828      }
7829
7830      toggle.addEventListener('click', () => { isAnnual = !isAnnual; updatePricing(); });
7831      monthly.addEventListener('click', () => { isAnnual = false; updatePricing(); });
7832      annual.addEventListener('click',  () => { isAnnual = true;  updatePricing(); });
7833    })();
7834  </script>
7834
7835
7836  <!-- ▼▼▼ SECTION 11 — LEARN MORE / BLOG EDITORIAL CARDS ▼▼▼ -->
7837  <style>
7838
7839    /* ═══════════════════════════════════════════
7840       LEARN MORE — BLOG / EDITORIAL
7841    ═══════════════════════════════════════════ */
7842    .learn {
7843      position: relative;
7844      padding-block: var(--section-pad);
7845      overflow: hidden;
7846    }
7847
7848    .learn__header {
7849      display: grid;
7850      grid-template-columns: 1fr auto;
7851      align-items: end;
7852      gap: 2rem;
7853      margin-bottom: clamp(3rem, 6vw, 5rem);
7854      position: relative;
7855      z-index: 2;
7856    }
7857
7858    .learn__label {
7859      display: inline-flex;
7860      align-items: center;
7861      gap: 0.6rem;
7862      font-family: var(--font-mono);
7863      font-size: var(--text-xs);
7864      color: var(--c-accent-2);
7865      text-transform: uppercase;
7866      letter-spacing: 0.14em;
7867      margin-bottom: 1.25rem;
7868    }
7869
7870    .learn__label-line { width: 32px; height: 1px; background: var(--c-accent-2); opacity: 0.5; }
7871
7872    .learn__title {
7873      font-family: var(--font-display);
7874      font-size: clamp(2.8rem, 6vw, 5rem);
7875      line-height: 0.92;
7876      text-transform: uppercase;
7877      color: var(--c-white);
7878      letter-spacing: 0.02em;
7879    }
7880
7881    .learn__title em { font-style: normal; color: var(--c-accent-2); }
7882
7883    /* ── Cards grid ── */
7884    .learn__grid {
7885      position: relative;
7886      z-index: 2;
7887      display: grid;
7888      grid-template-columns: repeat(12, 1fr);
7889      gap: 1.25rem;
7890    }
7891
7892    /* Featured (wide) */
7893    .article--featured { grid-column: span 7; }
7894    /* Standard */
7895    .article--sm       { grid-column: span 5; }
7896    .article--third    { grid-column: span 4; }
7897
7898    /* Article card base */
7899    .article {
7900      position: relative;
7901      border-radius: var(--r-xl);
7902      border: 1px solid var(--c-border);
7903      background: var(--c-surface);
7904      overflow: hidden;
7905      cursor: pointer;
7906      opacity: 0;
7907      transform: translateY(24px);
7908      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
7909                  border-color var(--t-base), box-shadow var(--t-slow);
7910    }
7911
7912    .article.in-view { opacity: 1; transform: translateY(0); }
7913    .article:nth-child(1) { transition-delay: 0.04s; }
7914    .article:nth-child(2) { transition-delay: 0.12s; }
7915    .article:nth-child(3) { transition-delay: 0.08s; }
7916    .article:nth-child(4) { transition-delay: 0.14s; }
7917    .article:nth-child(5) { transition-delay: 0.20s; }
7918
7919    .article:hover {
7920      border-color: var(--c-border-hi);
7921      box-shadow: var(--shadow-lg);
7922      transform: translateY(-5px) !important;
7923    }
7924
7925    /* Thumb */
7926    .article__thumb {
7927      position: relative;
7928      overflow: hidden;
7929    }
7930
7931    .article--featured .article__thumb { aspect-ratio: 16/9; }
7932    .article--sm       .article__thumb { aspect-ratio: 4/3; }
7933    .article--third    .article__thumb { aspect-ratio: 3/2; }
7934
7935    .article__thumb-bg {
7936      position: absolute;
7937      inset: 0;
7938      transition: transform 0.7s var(--ease);
7939    }
7940
7941    .article:hover .article__thumb-bg { transform: scale(1.06); }
7942
7943    /* Category badge on thumb */
7944    .article__cat {
7945      position: absolute;
7946      top: 1rem; left: 1rem;
7947      padding: 0.28rem 0.75rem;
7948      border-radius: var(--r-full);
7949      font-family: var(--font-mono);
7950      font-size: 0.6rem;
7951      text-transform: uppercase;
7952      letter-spacing: 0.1em;
7953      backdrop-filter: blur(10px);
7954      -webkit-backdrop-filter: blur(10px);
7955      border: 1px solid;
7956      z-index: 2;
7957    }
7958
7959    /* Read time */
7960    .article__read {
7961      position: absolute;
7962      bottom: 1rem; right: 1rem;
7963      font-family: var(--font-mono);
7964      font-size: 0.58rem;
7965      color: rgba(255,255,255,0.5);
7966      background: rgba(0,0,0,0.55);
7967      padding: 0.18rem 0.5rem;
7968      border-radius: var(--r-sm);
7969      backdrop-filter: blur(4px);
7970    }
7971
7972    /* Arrow overlay */
7973    .article__arrow {
7974      position: absolute;
7975      bottom: 1rem; left: 1rem;
7976      width: 36px; height: 36px;
7977      background: rgba(255,255,255,0.1);
7978      border: 1px solid rgba(255,255,255,0.2);
7979      border-radius: 50%;
7980      display: grid;
7981      place-items: center;
7982      opacity: 0;
7983      transform: scale(0.8);
7984      transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
7985                  background var(--t-base);
7986      backdrop-filter: blur(8px);
7987    }
7988
7989    .article:hover .article__arrow {
7990      opacity: 1;
7991      transform: scale(1);
7992      background: var(--c-accent);
7993      border-color: var(--c-accent);
7994    }
7995
7996    .article__arrow svg { width: 14px; height: 14px; }
7997    .article:hover .article__arrow svg { stroke: var(--c-black); }
7998
7999    /* Body */
8000    .article__body { padding: 1.5rem 1.75rem 1.75rem; }
8001
8002    .article__meta {
8003      display: flex;
8004      align-items: center;
8005      gap: 0.75rem;
8006      margin-bottom: 0.75rem;
8007      font-family: var(--font-mono);
8008      font-size: 0.6rem;
8009      color: var(--c-text-dim);
8010      text-transform: uppercase;
8011      letter-spacing: 0.08em;
8012    }
8013
8014    .article__meta-sep { opacity: 0.4; }
8015
8016    .article__title {
8017      font-family: var(--font-display);
8018      font-size: clamp(1.2rem, 2.2vw, 1.6rem);
8019      line-height: 1;
8020      text-transform: uppercase;
8021      letter-spacing: 0.03em;
8022      color: var(--c-white);
8023      margin-bottom: 0.65rem;
8024      transition: color var(--t-fast);
8025    }
8026
8027    .article:hover .article__title { color: var(--c-accent-2); }
8028
8029    .article__excerpt {
8030      font-size: var(--text-sm);
8031      color: var(--c-text-muted);
8032      line-height: 1.65;
8033      margin-bottom: 1.1rem;
8034      display: -webkit-box;
8035      -webkit-line-clamp: 3;
8036      -webkit-box-orient: vertical;
8037      overflow: hidden;
8038    }
8039
8040    .article--third .article__excerpt { -webkit-line-clamp: 2; }
8041
8042    .article__footer {
8043      display: flex;
8044      align-items: center;
8045      justify-content: space-between;
8046      gap: 1rem;
8047      padding-top: 0.85rem;
8048      border-top: 1px solid var(--c-border);
8049    }
8050
8051    .article__author {
8052      display: flex;
8053      align-items: center;
8054      gap: 0.5rem;
8055      font-size: var(--text-xs);
8056      color: var(--c-text-dim);
8057    }
8058
8059    .article__author-avatar {
8060      width: 22px; height: 22px;
8061      border-radius: 50%;
8062      display: grid;
8063      place-items: center;
8064      font-size: 0.5rem;
8065      font-weight: 700;
8066      flex-shrink: 0;
8067    }
8068
8069    .article__tag {
8070      font-family: var(--font-mono);
8071      font-size: 0.58rem;
8072      padding: 0.18rem 0.5rem;
8073      border-radius: var(--r-full);
8074      border: 1px solid var(--c-border);
8075      color: var(--c-text-dim);
8076      text-transform: uppercase;
8077      letter-spacing: 0.06em;
8078      transition: all var(--t-fast);
8079    }
8080
8081    .article:hover .article__tag { border-color: var(--c-accent-2); color: var(--c-accent-2); }
8082
8083    /* Newsletter mini strip at bottom of learn */
8084    .learn__newsletter {
8085      position: relative;
8086      z-index: 2;
8087      margin-top: 3rem;
8088      display: flex;
8089      align-items: center;
8090      gap: 1.5rem;
8091      padding: 1.5rem 2rem;
8092      background: rgba(255,77,0,0.04);
8093      border: 1px solid rgba(255,77,0,0.15);
8094      border-radius: var(--r-xl);
8095      flex-wrap: wrap;
8096    }
8097
8098    .learn__newsletter-icon {
8099      width: 44px; height: 44px;
8100      background: rgba(255,77,0,0.1);
8101      border-radius: var(--r-md);
8102      display: grid;
8103      place-items: center;
8104      flex-shrink: 0;
8105    }
8106
8107    .learn__newsletter-icon svg { width: 20px; height: 20px; }
8108
8109    .learn__newsletter-copy { flex: 1; min-width: 200px; }
8110
8111    .learn__newsletter-title {
8112      font-family: var(--font-display);
8113      font-size: 1.3rem;
8114      text-transform: uppercase;
8115      color: var(--c-white);
8116      letter-spacing: 0.04em;
8117      margin-bottom: 0.2rem;
8118    }
8119
8120    .learn__newsletter-desc {
8121      font-size: var(--text-xs);
8122      color: var(--c-text-muted);
8123    }
8124
8125    .learn__newsletter-form {
8126      display: flex;
8127      gap: 0.5rem;
8128      flex-shrink: 0;
8129      flex-wrap: wrap;
8130    }
8131
8132    .learn__newsletter-input {
8133      background: var(--c-surface);
8134      border: 1px solid var(--c-border-hi);
8135      border-radius: var(--r-full);
8136      padding: 0.65rem 1.25rem;
8137      font-size: var(--text-sm);
8138      color: var(--c-text);
8139      outline: none;
8140      width: 220px;
8141      transition: border-color var(--t-base), box-shadow var(--t-base);
8142    }
8143
8144    .learn__newsletter-input::placeholder { color: var(--c-text-dim); }
8145    .learn__newsletter-input:focus { border-color: var(--c-accent-2); box-shadow: 0 0 0 3px rgba(255,77,0,0.1); }
8146
8147    .learn__newsletter-btn {
8148      padding: 0.65rem 1.35rem;
8149      background: var(--c-accent-2);
8150      color: var(--c-bg);
8151      border-radius: var(--r-full);
8152      font-size: var(--text-sm);
8153      font-weight: 700;
8154      letter-spacing: 0.04em;
8155      transition: all var(--t-base) var(--ease);
8156      white-space: nowrap;
8157    }
8158
8159    .learn__newsletter-btn:hover {
8160      background: #ff6820;
8161      box-shadow: 0 0 24px rgba(255,77,0,0.35);
8162      transform: translateY(-1px);
8163    }
8164
8165    /* Responsive */
8166    @media (max-width: 1000px) {
8167      .article--featured, .article--sm { grid-column: span 12; }
8168      .article--third { grid-column: span 6; }
8169      .learn__header { grid-template-columns: 1fr; }
8170    }
8171
8172    @media (max-width: 600px) {
8173      .article--third { grid-column: span 12; }
8174      .learn__grid { grid-template-columns: 1fr; }
8175    }
8176
8177  </style>
8178
8179  <section class="learn" id="learn" aria-label="Learn More — Editorial">
8180    <div class="container">
8181
8182      <div class="learn__header">
8183        <div>
8184          <div class="learn__label">
8185            <span class="learn__label-line"></span>
8186            <span data-i18n="learn_section_label">Learn More</span>
8187            <span class="learn__label-line"></span>
8188          </div>
8189          <h2 class="learn__title"><span data-i18n="learn_title_line1">Guides, Tips &</span><br><em data-i18n="learn_title_accent">Deep Dives</em></h2>
8190        </div>
8191        <a href="/blog/" target="_blank" rel="nofollow" class="btn btn--ghost" style="white-space:nowrap" data-i18n="learn_view_all">View All Articles</a>
8192      </div>
8193
8194      <div class="learn__grid">
8195
8196        <!-- FEATURED article -->
8197        <div class="article article--featured" data-article>
8198          <div class="article__thumb">
8199            <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0d1a0a 0%,#162600 35%,#0a1200 70%,#050900 100%);">
8200              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 600 338" preserveAspectRatio="xMidYMid slice" fill="none">
8201                <circle cx="500" cy="80"  r="180" fill="rgba(212,255,0,0.06)"/>
8202                <circle cx="120" cy="280" r="120" fill="rgba(212,255,0,0.04)"/>
8203                <rect x="180" y="80" width="240" height="160" rx="8" stroke="rgba(212,255,0,0.1)" stroke-width="0.8" fill="none" transform="rotate(8,300,160)"/>
8204                <line x1="0" y1="169" x2="600" y2="169" stroke="rgba(212,255,0,0.06)" stroke-width="0.5"/>
8205                <line x1="300" y1="0"  x2="300" y2="338" stroke="rgba(212,255,0,0.06)" stroke-width="0.5"/>
8206              </svg>
8207            </div>
8208            <div class="article__cat" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.3);color:#d4ff00;" data-i18n="article_1_cat">Guide</div>
8209            <span class="article__read"><span data-i18n="article_1_read_num">12</span> <span data-i18n="article_read_min">min read</span></span>
8210            <div class="article__arrow">
8211              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
8212                <path d="M2 7h10M7 2l5 5-5 5"/>
8213              </svg>
8214            </div>
8215          </div>
8216          <div class="article__body">
8217            <div class="article__meta">
8218              <span data-i18n="article_1_date">Feb 18, 2026</span>
8219              <span class="article__meta-sep">·</span>
8220              <span data-i18n="article_1_topic">Prompt Craft</span>
8221            </div>
8222            <h3 class="article__title" data-i18n="article_1_title">The Ultimate Guide to Writing AI Video Prompts That Actually Work</h3>
8223            <p class="article__excerpt" data-i18n="article_1_excerpt">Most AI video prompts fail for the same three reasons. Learn how to structure subject, environment, camera movement, and mood into prompts that consistently produce cinematic results — with 20 worked examples across every model category.</p>
8224            <div class="article__footer">
8225              <div class="article__author">
8226                <div class="article__author-avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div>
8227                <span data-i18n="article_1_author">Alex Kim &nbsp;·&nbsp; Lead Creator</span>
8228              </div>
8229              <span class="article__tag" data-i18n="article_1_tag">Featured</span>
8230            </div>
8231          </div>
8232        </div>
8233
8234        <!-- Standard article -->
8235        <div class="article article--sm" data-article>
8236          <div class="article__thumb">
8237            <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0a0d1a 0%,#0f1433 40%,#060812 100%);">
8238              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" fill="none">
8239                <circle cx="300" cy="80"  r="120" fill="rgba(0,194,255,0.07)"/>
8240                <circle cx="80"  cy="230" r="80"  fill="rgba(167,139,250,0.05)"/>
8241                <ellipse cx="200" cy="150" rx="140" ry="80" stroke="rgba(0,194,255,0.1)" stroke-width="0.6" fill="none"/>
8242              </svg>
8243            </div>
8244            <div class="article__cat" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.3);color:#00c2ff;" data-i18n="article_2_cat">Tutorial</div>
8245            <span class="article__read"><span data-i18n="article_2_read_num">8</span> <span data-i18n="article_read_min">min read</span></span>
8246            <div class="article__arrow">
8247              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg>
8248            </div>
8249          </div>
8250          <div class="article__body">
8251            <div class="article__meta">
8252              <span data-i18n="article_2_date">Feb 14, 2026</span>
8253              <span class="article__meta-sep">·</span>
8254              <span data-i18n="article_2_topic">Character Mode</span>
8255            </div>
8256            <h3 class="article__title" data-i18n="article_2_title">How to Build a Character-Consistent Video Series in 6 Steps</h3>
8257            <p class="article__excerpt" data-i18n="article_2_excerpt">Character Consistency Mode unlocks a new class of content — serialized AI video. Here's the exact workflow for creating multi-clip stories where your character looks the same in every scene.</p>
8258            <div class="article__footer">
8259              <div class="article__author">
8260                <div class="article__author-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">MR</div>
8261                <span data-i18n="article_2_author">Mira Rui &nbsp;·&nbsp; Character Specialist</span>
8262              </div>
8263              <span class="article__tag" data-i18n="article_2_tag">Tutorial</span>
8264            </div>
8265          </div>
8266        </div>
8267
8268        <!-- Three third-width articles -->
8269        <div class="article article--third" data-article>
8270          <div class="article__thumb">
8271            <div class="article__thumb-bg" style="background:linear-gradient(140deg,#1a0a00 0%,#2a1400 40%,#0d0600 100%);">
8272              <svg style="position:absolute;inset:0;width:100%;
8272height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none">
8273                <path d="M30 150 Q150 60 270 130" stroke="rgba(255,77,0,0.15)" stroke-width="1" fill="none"/>
8274                <circle cx="150" cy="100" r="60" fill="rgba(255,77,0,0.06)"/>
8275              </svg>
8276            </div>
8277            <div class="article__cat" style="background:rgba(255,77,0,0.1);border-color:rgba(255,77,0,0.3);color:#ff4d00;" data-i18n="article_3_cat">Comparison</div>
8278            <span class="article__read"><span data-i18n="article_3_read_num">6</span> <span data-i18n="article_read_min">min read</span></span>
8279            <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div>
8280          </div>
8281          <div class="article__body">
8282            <div class="article__meta"><span data-i18n="article_3_date">Feb 10, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_3_topic">Models</span></div>
8283            <h3 class="article__title" data-i18n="article_3_title">Text→Video vs Cinematic Model: When to Use Which</h3>
8284            <p class="article__excerpt" data-i18n="article_3_excerpt">A practical breakdown of output differences, use cases, and when Auto-Recommend gets it right vs when you should override it.</p>
8285            <div class="article__footer">
8286              <div class="article__author">
8287                <div class="article__author-avatar" style="background:linear-gradient(135deg,#2a0a00,#140500)">JP</div>
8288                <span data-i18n="article_3_author">Jake Park</span>
8289              </div>
8290              <span class="article__tag" data-i18n="article_3_tag">Guide</span>
8291            </div>
8292          </div>
8293        </div>
8294
8295        <div class="article article--third" data-article>
8296          <div class="article__thumb">
8297            <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0f0a1a 0%,#1a0f2a 40%,#070510 100%);">
8298              <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none">
8299                <path d="M50 100 L150 30 L250 100 L150 170 Z" stroke="rgba(167,139,250,0.12)" stroke-width="0.8" fill="rgba(167,139,250,0.03)"/>
8300                <circle cx="150" cy="100" r="40" fill="rgba(167,139,250,0.06)"/>
8301              </svg>
8302            </div>
8303            <div class="article__cat" style="background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.3);color:#a78bfa;" data-i18n="article_4_cat">Workflow</div>
8304            <span class="article__read"><span data-i18n="article_4_read_num">5</span> <span data-i18n="article_read_min">min read</span></span>
8305            <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div>
8306          </div>
8307          <div class="article__body">
8308            <div class="article__meta"><span data-i18n="article_4_date">Feb 6, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_4_topic">Social Media</span></div>
8309            <h3 class="article__title" data-i18n="article_4_title">The 3-Second Hook: AI Video for Reels & TikTok</h3>
8310            <p class="article__excerpt" data-i18n="article_4_excerpt">Vertical format, looping strategy, and prompt formulas that drive retention on short-form platforms.</p>
8311            <div class="article__footer">
8312              <div class="article__author">
8313                <div class="article__author-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">SC</div>
8314                <span data-i18n="article_4_author">Sofia Chen</span>
8315              </div>
8316              <span class="article__tag" data-i18n="article_4_tag">Tips</span>
8317            </div>
8318          </div>
8319        </div>
8320
8321        <div class="article article--third" data-article>
8322          <div class="article__thumb">
8323            <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0a1a18 0%,#0a2a24 40%,#050e0c 100%);">
8324              <svg style="position:absolute;inset:0;width:100%;
8324height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none">
8325                <circle cx="150" cy="100" r="70" stroke="rgba(0,255,180,0.1)" stroke-width="0.6" fill="none"/>
8326                <circle cx="150" cy="100" r="40" fill="rgba(0,255,180,0.05)"/>
8327                <path d="M80 100 Q150 40 220 100 Q150 160 80 100Z" stroke="rgba(0,255,180,0.1)" stroke-width="0.5" fill="none"/>
8328              </svg>
8329            </div>
8330            <div class="article__cat" style="background:rgba(0,255,180,0.08);border-color:rgba(0,255,180,0.25);color:#00ffb4;" data-i18n="article_5_cat">Deep Dive</div>
8331            <span class="article__read"><span data-i18n="article_5_read_num">9</span> <span data-i18n="article_read_min">min read</span></span>
8332            <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div>
8333          </div>
8334          <div class="article__body">
8335            <div class="article__meta"><span data-i18n="article_5_date">Feb 2, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_5_topic">Technology</span></div>
8336            <h3 class="article__title" data-i18n="article_5_title">Inside the Models: How AI Video Generation Actually Works</h3>
8337            <p class="article__excerpt" data-i18n="article_5_excerpt">A non-technical breakdown of diffusion models, temporal consistency, and why some prompts render beautifully while others fall apart.</p>
8338            <div class="article__footer">
8339              <div class="article__author">
8340                <div class="article__author-avatar" style="background:linear-gradient(135deg,#003a2a,#001a12)">DV</div>
8341                <span data-i18n="article_5_author">Dev Voss</span>
8342              </div>
8343              <span class="article__tag" data-i18n="article_5_tag">Deep Dive</span>
8344            </div>
8345          </div>
8346        </div>
8347
8348      </div><!-- /.learn__grid -->
8349
8350      <!-- Newsletter strip -->
8351      <div class="learn__newsletter">
8352        <div class="learn__newsletter-icon">
8353          <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5">
8354            <path d="M3 5h14a1 1 0 011 1v8a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1z"/>
8355            <path d="M2 6l8 6 8-6"/>
8356          </svg>
8357        </div>
8358        <div class="learn__newsletter-copy">
8359          <div class="learn__newsletter-title" data-i18n="newsletter_title">Stay Ahead of AI Video</div>
8360          <div class="learn__newsletter-desc" data-i18n="newsletter_desc">New guides, model updates and creator tips — weekly, no spam.</div>
8361        </div>
8362        <div class="learn__newsletter-form">
8363          <input class="learn__newsletter-input" type="email" data-i18n-placeholder="newsletter_placeholder" placeholder="[email protected]" aria-label="Email address"/>
8364          <button class="learn__newsletter-btn" data-i18n="newsletter_btn">Subscribe</button>
8365        </div>
8366      </div>
8367
8368    </div>
8369  </section>
8370
8371  
8371<script type="6c18279ba6d93a40249c492f-text/javascript">
8372    const articleEls = document.querySelectorAll('[data-article]');
8373    const artObs = new IntersectionObserver(entries => {
8374      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); artObs.unobserve(e.target); } });
8375    }, { threshold: 0.1 });
8376    articleEls.forEach(a => artObs.observe(a));
8377  </script>
8377
8378
8379
8380  <!-- ▼▼▼ FOOTER CTA + FOOTER ▼▼▼ -->
8381  <style>
8382
8383    /* ═══════════════════════════════════════════
8384       FOOTER CTA
8385    ═══════════════════════════════════════════ */
8386    .footer-cta {
8387      position: relative;
8388      padding-block: clamp(5rem, 10vw, 9rem);
8389      overflow: hidden;
8390      text-align: center;
8391    }
8392
8393    /* Large glowing background text */
8394    .footer-cta__ghost {
8395      position: absolute;
8396      top: 50%; left: 50%;
8397      transform: translate(-50%, -50%);
8398      font-family: var(--font-display);
8399      font-size: clamp(5rem, 15vw, 14rem);
8400      line-height: 1;
8401      text-transform: uppercase;
8402      letter-spacing: 0.04em;
8403      color: rgba(212,255,0,0.04);
8404      white-space: nowrap;
8405      pointer-events: none;
8406      user-select: none;
8407      z-index: 0;
8408    }
8409
8410    /* Radial glow */
8411    .footer-cta__glow {
8412      position: absolute;
8413      top: 50%; left: 50%;
8414      transform: translate(-50%, -50%);
8415      width: 600px; height: 400px;
8416      background: radial-gradient(ellipse, rgba(212,255,0,0.08) 0%, transparent 65%);
8417      pointer-events: none;
8418      z-index: 0;
8419    }
8420
8421    .footer-cta__inner {
8422      position: relative;
8423      z-index: 2;
8424    }
8425
8426    .footer-cta__label {
8427      display: inline-flex;
8428      align-items: center;
8429      gap: 0.5rem;
8430      font-family: var(--font-mono);
8431      font-size: var(--text-xs);
8432      color: var(--c-accent);
8433      text-transform: uppercase;
8434      letter-spacing: 0.14em;
8435      margin-bottom: 1.5rem;
8436    }
8437
8438    .footer-cta__label-dot {
8439      width: 5px; height: 5px;
8440      background: var(--c-accent);
8441      border-radius: 50%;
8442      animation: pulse 2s ease-in-out infinite;
8443    }
8444
8445    .footer-cta__title {
8446      font-family: var(--font-display);
8447      font-size: clamp(3.5rem, 9vw, 8rem);
8448      line-height: 0.88;
8449      text-transform: uppercase;
8450      color: var(--c-white);
8451      letter-spacing: 0.02em;
8452      margin-bottom: 1.75rem;
8453    }
8454
8455    .footer-cta__title em {
8456      font-style: normal;
8457      color: var(--c-accent);
8458      -webkit-text-stroke: 0px;
8459    }
8460
8461    .footer-cta__sub {
8462      font-size: var(--text-lg);
8463      color: var(--c-text-muted);
8464      max-width: 480px;
8465      margin-inline: auto;
8466      line-height: 1.6;
8467      margin-bottom: 2.5rem;
8468    }
8469
8470    .footer-cta__buttons {
8471      display: flex;
8472      align-items: center;
8473      justify-content: center;
8474      gap: 1rem;
8475      flex-wrap: wrap;
8476    }
8477
8478    .btn--fcta-primary {
8479      display: inline-flex;
8480      align-items: center;
8481      gap: 0.6rem;
8482      padding: 1.1rem 2.5rem;
8483      background: var(--c-accent);
8484      color: var(--c-black);
8485      border-radius: var(--r-full);
8486      font-size: var(--text-base);
8487      font-weight: 800;
8488      letter-spacing: 0.03em;
8489      transition: all var(--t-base) var(--ease);
8490      position: relative;
8491      overflow: hidden;
8492    }
8493
8494    .btn--fcta-primary::after {
8495      content: '';
8496      position: absolute;
8497      top: 0; left: -100%;
8498      width: 60%;
8499      height: 100%;
8500      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
8501      transition: left 0.5s var(--ease);
8502    }
8503
8504    .btn--fcta-primary:hover::after { left: 150%; }
8505
8506    .btn--fcta-primary:hover {
8507      background: #e8ff33;
8508      box-shadow: 0 0 60px rgba(212,255,0,0.4), 0 12px 32px rgba(0,0,0,0.4);
8509      transform: translateY(-3px);
8510    }
8511
8512    .btn--fcta-ghost {
8513      display: inline-flex;
8514      align-items: center;
8515      gap: 0.5rem;
8516      padding: 1.1rem 2.25rem;
8517      border: 1px solid rgba(255,255,255,0.18);
8518      color: rgba(255,255,255,0.55);
8519      border-radius: var(--r-full);
8520      font-size: var(--text-base);
8521      font-weight: 500;
8522      transition: all var(--t-base) var(--ease);
8523    }
8524
8525    .btn--fcta-ghost:hover {
8526      border-color: rgba(255,255,255,0.45);
8527      color: var(--c-white);
8528    }
8529
8530    .footer-cta__fine {
8531      margin-top: 1.25rem;
8532      font-size: var(--text-xs);
8533      color: var(--c-text-dim);
8534      font-family: var(--font-mono);
8535      letter-spacing: 0.06em;
8536    }
8537
8538    /* ═══════════════════════════════════════════
8539       FOOTER
8540    ═══════════════════════════════════════════ */
8541    .footer {
8542      position: relative;
8543      background: #050505;
8544      border-top: 1px solid var(--c-border);
8545      padding-top: 4rem;
8546      overflow: hidden;
8547    }
8548
8549    /* Top section */
8550    .footer__top {
8551      display: grid;
8552      grid-template-columns: 1.6fr repeat(4, 1fr);
8553      gap: 3rem;
8554      padding-bottom: 3.5rem;
8555      border-bottom: 1px solid var(--c-border);
8556    }
8557
8558    /* Brand column */
8559    .footer__brand-logo {
8560      display: flex;
8561      align-items: center;
8562      gap: 0.6rem;
8563      margin-bottom: 1.25rem;
8564      text-decoration: none;
8565    }
8566
8567    .footer__brand-icon {
8568      width: 34px; height: 34px;
8569      background: var(--c-accent);
8570      border-radius: var(--r-md);
8571      display: grid;
8572      place-items: center;
8573    }
8574
8575    .footer__brand-icon svg { width: 16px; height: 16px; }
8576
8577    .footer__brand-name {
8578      font-family: var(--font-display);
8579      font-size: 1.1rem;
8580      text-transform: uppercase;
8581      letter-spacing: 0.06em;
8582      color: var(--c-white);
8583    }
8584
8585    .footer__brand-desc {
8586      font-size: var(--text-sm);
8587      color: var(--c-text-dim);
8588      line-height: 1.65;
8589      max-width: 280px;
8590      margin-bottom: 1.5rem;
8591    }
8592
8593    /* Social links */
8594    .footer__socials {
8595      display: flex;
8596      gap: 0.5rem;
8597    }
8598
8599    .footer__social {
8600      width: 34px; height: 34px;
8601      border-radius: var(--r-md);
8602      border: 1px solid var(--c-border);
8603      display: grid;
8604      place-items: center;
8605      color: var(--c-text-dim);
8606      transition: all var(--t-base) var(--ease);
8607    }
8608
8609    .footer__social:hover {
8610      border-color: var(--c-accent);
8611      color: var(--c-accent);
8612      background: rgba(212,255,0,0.06);
8613    }
8614
8615    .footer__social svg { width: 14px; height: 14px; }
8616
8617    /* Nav column */
8618    .footer__col {}
8619
8620    .footer__col-title {
8621      font-family: var(--font-mono);
8622      font-size: 0.62rem;
8623      text-transform: uppercase;
8624      letter-spacing: 0.12em;
8625      color: var(--c-text-muted);
8626      margin-bottom: 1.25rem;
8627    }
8628
8629    .footer__links {
8630      display: flex;
8631      flex-direction: column;
8632      gap: 0.65rem;
8633    }
8634
8635    .footer__link {
8636      font-size: var(--text-sm);
8637      color: var(--c-text-dim);
8638      transition: color var(--t-fast);
8639      display: flex;
8640      align-items: center;
8641      gap: 0.4rem;
8642    }
8643
8644    .footer__link:hover { color: var(--c-white); }
8645
8646    .footer__link-badge {
8647      font-family: var(--font-mono);
8648      font-size: 0.5rem;
8649      padding: 0.08rem 0.4rem;
8650      background: rgba(212,255,0,0.1);
8651      color: var(--c-accent);
8652      border: 1px solid rgba(212,255,0,0.2);
8653      border-radius: var(--r-full);
8654      text-transform: uppercase;
8655      letter-spacing: 0.06em;
8656    }
8657
8658    /* Status indicator */
8659    .footer__status {
8660      display: inline-flex;
8661      align-items: center;
8662      gap: 0.5rem;
8663      padding: 0.35rem 0.85rem;
8664      background: rgba(0,255,130,0.06);
8665      border: 1px solid rgba(0,255,130,0.2);
8666      border-radius: var(--r-full);
8667      font-family: var(--font-mono);
8668      font-size: 0.6rem;
8669      color: #00e87a;
8670      text-transform: uppercase;
8671      letter-spacing: 0.08em;
8672      margin-bottom: 0.75rem;
8673    }
8674
8675    .footer__status-dot {
8676      width: 5px; height: 5px;
8677      background: #00e87a;
8678      border-radius: 50%;
8679      animation: pulse 2s ease-in-out infinite;
8680    }
8681
8682    /* Bottom bar */
8683    .footer__bottom {
8684      display: flex;
8685      align-items: center;
8686      justify-content: space-between;
8687      gap: 1.5rem;
8688      padding-block: 1.5rem;
8689      flex-wrap: wrap;
8690    }
8691
8692    .footer__copy {
8693      font-size: var(--text-xs);
8694      color: var(--c-text-dim);
8695      font-family: var(--font-mono);
8696    }
8697
8698    .footer__copy a { color: var(--c-accent); text-decoration: none; }
8699    .footer__copy a:hover { text-decoration: underline; }
8700
8701    .footer__legal {
8702      display: flex;
8703      gap: 1.5rem;
8704      flex-wrap: wrap;
8705    }
8706
8707    .footer__legal a {
8708      font-size: var(--text-xs);
8709      color: var(--c-text-dim);
8710      font-family: var(--font-mono);
8711      text-underline-offset: 3px;
8712      transition: color var(--t-fast);
8713    }
8714
8715    .footer__legal a:hover { color: var(--c-text-muted); }
8716
8717    .footer__locale {
8718      display: flex;
8719      align-items: center;
8720      gap: 0.4rem;
8721      font-family: var(--font-mono);
8722      font-size: var(--text-xs);
8723      color: var(--c-text-dim);
8724      cursor: pointer;
8725      transition: color var(--t-fast);
8726    }
8727
8728    .footer__locale:hover { color: var(--c-text-muted); }
8729    .footer__locale svg { width: 12px; height: 12px; }
8730
8731    /* Responsive */
8732    @media (max-width: 960px) {
8733      .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
8734      .footer__brand { grid-column: span 2; }
8735    }
8736
8737    @media (max-width: 540px) {
8738      .footer__top { grid-template-columns: 1fr 1fr; }
8739      .footer__brand { grid-column: span 2; }
8740      .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
8741      .footer-cta__title { font-size: clamp(3rem, 12vw, 5rem); }
8742    }
8743
8744  </style>
8745
8746  <!-- Footer CTA -->
8747  <section class="footer-cta" aria-label="Final call to action">
8748    <div class="footer-cta__ghost" aria-hidden="true">Generate</div>
8749    <div class="footer-cta__glow"  aria-hidden="true"></div>
8750    <div class="container">
8751      <div class="footer-cta__inner">
8752        <div class="footer-cta__label">
8753          <span class="footer-cta__label-dot"></span>
8754          <span data-i18n="footer_cta_label">Start Today — It's Free</span>
8755        </div>
8756        <h2 class="footer-cta__title">
8757          <span data-i18n="footer_cta_title_line1">Your Next Video</span><br><span data-i18n="footer_cta_title_line2">Starts With <em>One Prompt.</em></span>
8758        </h2>
8759        <p class="footer-cta__sub" data-i18n="footer_cta_sub">No editor. No render queue. No creative block. Just describe what you see in your head — and generate it.</p>
8760        <div class="footer-cta__buttons">
8761          <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--fcta-primary" data-i18n="footer_cta_primary">
8762            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
8763              <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/>
8764            </svg>
8765            Start Generating Free
8766          </a>
8767          <a href="#how" class="btn--fcta-ghost" data-i18n="footer_cta_ghost_btn">See How It Works</a>
8768        </div>
8769        <p class="footer-cta__fine" data-i18n="footer_cta_fine">No credit card · Free tier always available · Cancel anytime</p>
8770      </div>
8771    </div>
8772  </section>
8773
8774  <!-- Footer -->
8775  <footer class="footer" role="contentinfo">
8776    <div class="container">
8777
8778      <div class="footer__top">
8779
8780        <!-- Brand -->
8781        <div class="footer__brand">
8782          <a href="/" class="footer__brand-logo" aria-label="video-generator.ai">
8783            <div class="footer__brand-icon">
8784              <svg viewBox="0 0 16 16" fill="none">
8785                <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/>
8786              </svg>
8787            </div>
8788            <span class="footer__brand-name">video-generator.ai</span>
8789          </a>
8790          <p class="footer__brand-desc" data-i18n="footer_brand_desc">The AI video generator built for creators who want control. Generate, refine, and ship video at the speed of thought.</p>
8791          <div class="footer__status">
8792            <span class="footer__status-dot"></span>
8793            <span data-i18n="footer_status_text">All systems operational</span>
8794          </div>
8795          <div class="footer__socials">
8796            <!-- X / Twitter -->
8797            <a href="#" class="footer__social" aria-label="X / Twitter">
8798              <svg viewBox="0 0 14 14" fill="currentColor"><path d="M8.05 6.14L12.43 1H11.4L7.59 5.5 4.55 1H1.12l4.6 6.7L1.12 13h1.03l4.03-4.7 3.21 4.7H12.9L8.05 6.14zm-1.43 1.67L6.12 7.2 2.2 1.8h1.54l3.04 4.36 1.5 2.16-3.24 3.78H5.8l2.82-3.29z"/></svg>
8799            </a>
8800            <!-- Instagram -->
8801            <a href="#" class="footer__social" aria-label="Instagram">
8802              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2" y="2" width="10" height="10" rx="3"/><circle cx="7" cy="7" r="2.5"/><circle cx="10.2" cy="3.8" r="0.6" fill="currentColor" stroke="none"/></svg>
8803            </a>
8804            <!-- Discord -->
8805            <a href="#" class="footer__social" aria-label="Discord">
8806              <svg viewBox="0 0 14 14" fill="currentColor"><path d="M11.28 2.37A10.9 10.9 0 008.7 1.6a.04.04 0 00-.04.02c-.12.21-.25.49-.34.7a10.07 10.07 0 00-3.03 0 7.3 7.3 0 00-.35-.7.04.04 0 00-.04-.02A10.86 10.86 0 002.3 2.37a.04.04 0 00-.02.02C.84 4.62.45 6.82.64 9a.04.04 0 00.02.03 10.97 10.97 0 003.3 1.67.04.04 0 00.05-.02c.25-.35.48-.72.67-1.1a.04.04 0 00-.02-.06 7.2 7.2 0 01-1.03-.5.04.04 0 010-.07c.07-.05.14-.11.2-.16a.04.04 0 01.05 0c2.16 1 4.5 1 6.64 0a.04.04 0 01.05 0c.07.06.14.11.2.16a.04.04 0 010 .07c-.33.2-.67.37-1.03.5a.04.04 0 00-.02.06c.2.38.43.75.67 1.1a.04.04 0 00.05.02A10.93 10.93 0 0013.34 9a.04.04 0 00.02-.03c.22-2.5-.37-4.68-1.06-6.6a.04.04 0 00-.02-.02zM5.02 7.65c-.65 0-1.18-.6-1.18-1.34s.52-1.34 1.18-1.34c.66 0 1.19.6 1.18 1.34 0 .74-.52 1.34-1.18 1.34zm4.38 0c-.65 0-1.18-.6-1.18-1.34s.52-1.34 1.18-1.34c.66 0 1.19.6 1.18 1.34 0 .74-.52 1.34-1.18 1.34z"/></svg>
8807            </a>
8808            <!-- YouTube -->
8809            <a href="#" class="footer__social" aria-label="YouTube">
8810              <svg viewBox="0 0 14 14" fill="currentColor"><path d="M12.8 4.1s-.13-.9-.52-1.3c-.5-.52-1.05-.52-1.3-.55C9.07 2.1 7 2.1 7 2.1s-2.07 0-3.98.15c-.25.03-.8.03-1.3.55-.4.4-.52 1.3-.52 1.3S1.06 5.12 1.06 6.14v.95c0 1.02.14 2.04.14 2.04s.13.9.52 1.3c.5.52 1.16.5 1.45.56C4.17 11.1 7 11.1 7 11.1s2.07 0 3.98-.17c.25-.03.8-.04 1.3-.56.4-.4.52-1.3.52-1.3s.14-1.02.14-2.04v-.95C12.94 5.12 12.8 4.1 12.8 4.1zM5.8 8.57V5.4l3.5 1.6-3.5 1.57z"/></svg>
8811            </a>
8812          </div>
8813        </div>
8814
8815        <!-- Product -->
8816        <div class="footer__col">
8817          <div class="footer__col-title" data-i18n="footer_col_product">Product</div>
8818          <div class="footer__links">
8819            <a href="#features" class="footer__link" data-i18n="footer_link_features">Features</a>
8820            <a href="#blueprints" class="footer__link" data-i18n="footer_link_blueprints">Blueprints</a>
8821            <a href="#gallery" class="footer__link" data-i18n="footer_link_gallery">Gallery</a>
8822            <a href="#pricing" class="footer__link" data-i18n="footer_link_pricing">Pricing</a>
8823            <a href="https://pixwith.video-generator.ai/api" class="footer__link" rel="nofollow"  target="_blank"><span data-i18n="footer_link_api">API</span> <span class="footer__link-badge" data-i18n="footer_link_api_badge">Beta</span></a>
8824            <a href="#" class="footer__link" data-i18n="footer_link_changelog">Changelog</a>
8825          </div>
8826        </div>
8827
8828        <!-- Models -->
8829        <div class="footer__col">
8830          <div class="footer__col-title" data-i18n="footer_col_models">AI video tools</div>
8831          <div class="footer__links">
8832            <a href="/text-to-video/" class="footer__link" target="_blank"  data-i18n="footer_link_text2video">Text to Video</a>
8833            <a href="https://video-generator.ai/ai-image-to-video-generator/" class="footer__link" target="_blank" data-i18n="footer_link_img2video">Image to Video</a>
8834            <a href="/ai-video-extender/" class="footer__link" target="_blank" data-i18n="footer_link_cinematic">video extender</a>
8835            <a href="/ai-video-to-video-generator/" class="footer__link" target="_blank" data-i18n="footer_link_anime">Video to Video</a>
8836            <a href="/ai-motion-control/" class="footer__link" target="_blank" data-i18n="footer_link_character">Motion Control</a>
8837            <a href="/free-ai-talking-avatar-video-generator/" class="footer__link" target="_blank"  data-i18n="footer_link_abstract">Talking Avatar</a>
8838          </div>
8839        </div>
8840
8841        <!-- Resources -->
8842        <div class="footer__col">
8843          <div class="footer__col-title" data-i18n="footer_col_resources">Resources</div>
8844          <div class="footer__links">
8845            <a href="/blog/" class="footer__link" target="_blank" rel="nofollow" data-i18n="footer_link_blog">Blog</a>
8846            <a href="#" class="footer__link" data-i18n="footer_link_prompt_lib">Prompt Library</a>
8847            <a href="#faq" class="footer__link" data-i18n="footer_link_faq">FAQ</a>
8848            <a href="#" class="footer__link" data-i18n="footer_link_docs">Documentation</a>
8849            <a href="#" class="footer__link" data-i18n="footer_link_community">Community</a>
8850            <a href="#" class="footer__link" data-i18n="footer_link_discord">Discord</a>
8851          </div>
8852        </div>
8853
8854        <!-- Company -->
8855        <div class="footer__col">
8856          <div class="footer__col-title" data-i18n="footer_col_company">Company</div>
8857          <div class="footer__links">
8858            <a href="https://video-generator.ai/about-us/" class="footer__link" rel="nofollow"  target="_blank" data-i18n="footer_link_about">About</a>
8859            <a href="#" class="footer__link" data-i18n="footer_link_careers">Careers</a>
8860            <a href="#" class="footer__link" data-i18n="footer_link_press">Press Kit</a>
8861            <a href="https://video-generator.ai/contact-us/" class="footer__link" rel="nofollow"  target="_blank" data-i18n="footer_link_contact">Contact</a>
8862            <a href="https://pixwith.video-generator.ai/affiliate" class="footer__link" rel="nofollow"  target="_blank" data-i18n="footer_link_affiliates">Affiliates</a>
8863          </div>
8864        </div>
8865
8866      </div><!-- /.footer__top -->
8867
8868      <!-- Bottom bar -->
8869      <div class="footer__bottom">
8870        <div class="footer__copy">
8871          &copy; 2026 <a href="/">video-generator.ai</a>. <span data-i18n="footer_copy_right">All rights reserved.</span>
8872        </div>
8873        <div class="footer__legal">
8874          <a href="https://video-generator.ai/privacy-policy/" rel="nofollow"  target="_blank" data-i18n="footer_privacy">Privacy Policy</a>
8875          <a href="https://video-generator.ai/terms-of-service/" rel="nofollow"  target="_blank" data-i18n="footer_terms">Terms of Service</a>
8876          <a href="https://video-generator.ai/content-guidelines/" rel="nofollow"  target="_blank" data-i18n="footer_content_guide">Content Guidelines</a>
8877          <a href="https://video-generator.ai/content-ownership-usage-policy/" rel="nofollow"  target="_blank" data-i18n="footer_content_policy">Content Policy</a>
8878        </div>
8879        <div class="footer__locale">
8880          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.2">
8881            <circle cx="6" cy="6" r="4.5"/>
8882            <path d="M6 1.5C6 1.5 4.5 3.5 4.5 6s1.5 4.5 1.5 4.5M6 1.5C6 1.5 7.5 3.5 7.5 6S6 10.5 6 10.5M2 4.5h8M2 7.5h8"/>
8883          </svg>
8884          <span class="footer__locale-text">English (EN)</span>
8885          <div class="lang-picker">
8886            <button data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">EN</button>
8887            <button data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">ES</button>
8888            <button data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">HI</button>
8889            <button data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">RU</button>
8890          </div>
8891        </div>
8892      </div>
8893
8894    </div>
8895  </footer>
8896
8897  <!-- i18n — Language Switcher.
8898       defer (not blocking): these still need to all be present for the
8899       DOMContentLoaded auto-detect in i18n.js (saved/browser language →
8900       in-place translation for returning visitors), but they no longer
8901       need to block HTML parsing/paint to do that. -->
8902  
8902<script data-cfasync="false" defer src="translations/en.js"></script>
8902
8903  
8903<script data-cfasync="false" defer src="translations/es.js"></script>
8903
8904  
8904<script data-cfasync="false" defer src="translations/fr.js"></script>
8904
8905  
8905<script data-cfasync="false" defer src="translations/de.js"></script>
8905
8906  
8906<script data-cfasync="false" defer src="translations/jp.js"></script>
8906
8907  
8907<script data-cfasync="false" defer src="translations/hi.js"></script>
8907
8908  
8908<script data-cfasync="false" defer src="translations/ru.js"></script>
8908
8909  
8909<script data-cfasync="false" defer src="i18n.js"></script>
8909
8910
8911  
8911<script type="6c18279ba6d93a40249c492f-text/javascript">
8912    // ── Language Dropdown Logic ───────────────────────────────────────────────
8913    const LANG_META = {
8914      en: { label: 'EN', flag: '🇺🇸', name: 'English' },
8915      es: { label: 'ES', flag: '🇪🇸', name: 'Español' },
8916      fr: { label: 'FR', flag: '🇫🇷', name: 'Français' },
8917      de: { label: 'DE', flag: '🇩🇪', name: 'Deutsch' },
8918      ja: { label: 'JA', flag: '🇯🇵', name: '日本語' },
8919      hi: { label: 'HI', flag: '🇮🇳', name: 'हिन्दी' },
8920      ru: { label: 'RU', flag: '🇷🇺', name: 'Русский' },
8921    };
8922
8923    function openDropdown(id) {
8924      const wrap = document.getElementById(id);
8925      if (!wrap) return;
8926      const trigger = wrap.querySelector('.lang-dropdown__trigger');
8927      const menu    = wrap.querySelector('.lang-dropdown__menu');
8928      const isOpen  = menu.classList.contains('is-open');
8929      // Close all others first
8930      document.querySelectorAll('.lang-dropdown__menu').forEach(m => m.classList.remove('is-open'));
8931      document.querySelectorAll('.lang-dropdown__trigger').forEach(t => t.setAttribute('aria-expanded','false'));
8932      if (!isOpen) {
8933        menu.classList.add('is-open');
8934        trigger.setAttribute('aria-expanded', 'true');
8935      }
8936    }
8937
8938    function selectLang(lang, dropdownSuffix) {
8939      const paths = { en: '/', es: '/es/', fr: '/fr/', de: '/de/', ja: '/ja/', hi: '/hi/', ru: '/ru/', ar: '/ar/', zh: '/zh/', pt: '/pt/' };
8940      if (paths[lang]) {
8941        // Fade out smoothly before navigating — hides browser page-load flash
8942        const overlay = document.getElementById('page-transition-overlay');
8943        if (overlay) {
8944          overlay.classList.add('fade-out');
8945          setTimeout(() => { window.location.href = paths[lang]; }, 220);
8946        } else {
8947          window.location.href = paths[lang];
8948        }
8949      } else {
8950        applyLang(lang);
8951      }
8952    }
8953
8954    window.addEventListener('popstate', function(e) {
8955      if (e.state && e.state.lang) applyLang(e.state.lang);
8956    });
8957
8958    function syncDropdownLabels(lang) {
8959      const meta = LANG_META[lang] || LANG_META['en'];
8960      // Update all trigger labels
8961      document.querySelectorAll('.lang-dropdown__label').forEach(el => el.textContent = meta.label);
8962      // Update active item highlight
8963      document.querySelectorAll('.lang-dropdown__item').forEach(item => {
8964        item.classList.toggle('is-active', item.dataset.langBtn === lang);
8965      });
8966    }
8967
8968    // Wire triggers
8969    document.addEventListener('DOMContentLoaded', () => {
8970      ['lang-dropdown-desktop', 'lang-dropdown-mobile'].forEach(id => {
8971        const wrap = document.getElementById(id);
8972        if (!wrap) return;
8973        wrap.querySelector('.lang-dropdown__trigger').addEventListener('click', (e) => {
8974          e.stopPropagation();
8975          openDropdown(id);
8976        });
8977      });
8978
8979      // Close on outside click
8980      document.addEventListener('click', () => {
8981        document.querySelectorAll('.lang-dropdown__menu').forEach(m => m.classList.remove('is-open'));
8982        document.querySelectorAll('.lang-dropdown__trigger').forEach(t => t.setAttribute('aria-expanded','false'));
8983      });
8984
8985      // Sync labels to whatever lang is active at load
8986      syncDropdownLabels('en');
8987
8988      // translations/en.js + i18n.js are deferred, so applyLang only
8989      // becomes available once deferred scripts run (just before this
8990      // DOMContentLoaded handler fires) — safe to call here.
8991      applyLang('en');
8992      history.replaceState({ lang: 'en' }, '', window.location.pathname);
8993    });
8994  </script>
8994
8995</body>
8996</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.