Erstelle diesen einseitigen Kreativstudio-Footer exakt nach. Dies ist eine Fidelity-Aufgabe, kein Redesign. Implementiere den gelieferten Inhalt, die Assets, das CSS und die Interaktionen exakt. Baue nur diese Footer-Seite. Halte alles lokal; nicht veröffentlichen oder deployen. Füge keinen Header, Hero, Karten, Formulare, Sektionen, Buttons, Links, Animationen oder Zusatztext hinzu. Die unten angehängten Quell-Snapshots sind die maßgebliche Spezifikation. Kopiere sie exakt und passe nur Importpfade oder Framework-Verdrahtung bei Bedarf an. Ersetze nicht durch ungefähre Typografie, ein anderes Logo, Stockvideo oder einen generischen Augen-Folge-Effekt. 1. Gesamterscheinung: Die ganze Seite ist ein Footer mit linker Info-Spalte, zentriertem Script-Logo, rechter kontaktartiger Textspalte mit drei Social-Icons und einem lavendelfarbenen Charaktervideo. Bei Desktop-Breiten füllt das Video den Viewport hinter allem Inhalt. Auf Mobil stapelt sich der Inhalt und das Video folgt im normalen Fluss. Komposition großzügig und minimal, sehr dunkler Text, ohne Tönung, Scrim, Verlauf, Blur oder Overlay über dem Video. Keine externen Links oder echten Kontaktziele. Navigationslabels, Kontakttext, Social-Icons und Logo sind statische Anzeigeelemente, keine klickbaren Anker. Erfinde keine Ziele, E-Mails, Telefonnummern, WhatsApp-Aktionen oder Social-Konten. Zeige Truus nirgends. 2. Exakter sichtbarer Text: Erhalte Schreibweise, Groß-/Kleinschreibung, Interpunktion, geschwungene Apostrophe, Sternchen und Zeilenumbrüche. Linkes Badge: “have a fresh idea?”. Linke Überschrift: “imagination” / “meets craft”. Labels: “Made”, “Story”, “In the lab”, “Say hey”. Rechtes Badge: “say hey”. Rechte Überschrift: “let’s team up!” / “bring us your idea*”. Notiz: “*good things start with one spark. let’s make yours.”. Social-Icons in Reihenfolge: LinkedIn, Instagram, TikTok, mit den exakten SVGs, ohne Textlabels und Links. Das zentrale Logo ist das umrissene Script-SVG Logoipsum aus BrandLogo mit viewBox 169×40; fill = currentColor, erbt #080909. Logo nicht nachzeichnen oder neu generieren. 3. Exakte Typografie und Farben: Überschriften Epilogue Black 900; übriger Text DM Sans Regular 400; echte Schriftdateien und font-synthesis: none. Lade DMSans-Regular.woff2 und Epilogue-Black.woff2 herunter und liefere sie lokal mit @font-face und font-display: swap. Text und Logo #080909; Desktop-Fallback-Hintergrund #dfe4f2; Badge #f7f8fa; Mobil-Hintergrund #f0eefa. Keine Schatten, dekorativen Rahmen, Karten oder Verläufe. 4. Exaktes Desktop-Layout (>700px): global box-sizing border-box; body ohne Margin, min-height 100vh. Footer position relative, min-height 100vh, padding-top 6.54vw, isolation isolate, overflow hidden. Linker Block: margin-left 8.65vw, width 25vw; Badge Pill 100px, Höhe 1.9vw, padding .39vw .61vw, Schrift .88vw; Überschrift margin-top 1.45vw, Schrift 1.66vw Gewicht 900; Navigation Flex-Spalte gap .93vw, margin-top 1.3vw, Schrift 1.075vw. Logo absolut left 40.33vw top 7.7vw width 17vw. Rechter Block absolut left 74.3vw top 6.54vw; Notiz margin 1.05vw 0 0, Schrift .733vw; Social-Reihe flex gap 1.43vw, Icons 1.71vw. Behalte diese vw-Werte und die exakte Drei-Spalten-Platzierung. Videoebene: Wrapper absolut inset 0 z-index -1 pointer-events none; Video object-fit cover center hinter dem Text, kein Pupillen-Canvas. 5. Exaktes Mobil-Layout (≤700px), nur innerhalb @media(max-width:700px): Hintergrund #f0eefa; Footer Flex-Spalte gap 36px, min-height 100svh, padding 40px 24px 0; Reihenfolge Logo, links, rechts, Video; Logo static width 210px max-width 75%; Badges Höhe 30px Schrift 14px; Überschriften clamp(22px,6.3vw,30px); Navigation Grid 2 Spalten column-gap 24px, Schrift 17px, jedes Label min-height 44px (Reihe 1 Made/Story, Reihe 2 In the lab/Say hey); Notiz max-width 34ch Schrift 14px normaler Umbruch; Social-Reihe gap 18px, Wrapper 44×44px mit Icons 30×30px, erster Wrapper margin-left -7px; Video-Wrapper relative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px, randlos unter dem Inhalt. 6. Exaktes Video-Asset: Verwende die vollständige, wörtliche CloudFront-URL, ohne Clip zu ersetzen, Segmente auszulassen, Unterstriche zu escapen oder den Namen zu ändern. Quelle 1920×1080, 24 fps, ~7.041667s: flauschige lavendelfarbene Figur mit rosa Herz vor sehr blassem Lavendel-Hintergrund, Augen kreisen. Lade als public/footer-background.mp4 und erstelle public/footer-scrub.mp4 mit: ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4. Erhalte Maße, fps, Dauer, Farben und Komposition; All-Intra-Encoding für responsives zufälliges Seeken. Das Element braucht muted, playsInline und preload="auto", keine Steuerelemente, Audio, Poster oder sichtbares Lade-UI. 7. Exakte Desktop-Mausinteraktion: Video-Scrubbing — der Cursor wählt einen Frame, in dem die aufgezeichneten Pupillen zum Cursor zeigen. Zeichne Pupillen nicht neu und animiere keine CSS-Augen. Nutze die Tabelle gaze-frames.json. Augen-Mittelpunkt (948,418) im 1920×1080-Frame; Cover-Scale max(w/1920,h/1080); eyeX = rect.left + rect.width/2 + (948-960)*scale; eyeY = rect.top + rect.height/2 + (418-540)*scale; vom Zeiger subtrahieren; innerhalb 8px-Radius ignorieren; atan2(dy,dx) auf [0,2π) normalisieren; Zeile mit minimaler zirkulärer Winkeldifferenz finden; time + 1/240s nutzen; nur seeken, wenn Differenz > 1/48s, Framedaten vorhanden und kein Seek läuft; auf duration - 1/24 begrenzen; über requestAnimationFrame zusammenfassen; nicht interpolieren; Desktop-Video startet pausiert bei 0 und bleibt am gewählten Frame; bei resize und scroll neu berechnen; passive Listener, alles beim Unmount entfernen. Kardinal: rechts 2.54167s, unten 0.33333s, links 1.0s, oben 1.70833s. 8. Mobile Wiedergabe: bei ≤700px Zeiger-Seeking deaktivieren; das Video unter dem Inhalt spielt normal, stumm und in Schleife; prefers-reduced-motion respektieren durch Pausieren; ist Autoplay nicht verfügbar, sichtbaren Frame lassen, kein Fehler oder Steuerelemente. matchMedia-Listener nutzen, um am 700px-Breakpoint korrekt umzuschalten. 9. Semantik und Metadaten: footer mit aria-label="Footer"; Video-Wrapper aria-hidden="true" und pointer-events:none; Logo-Wrapper role="img" aria-label="Studio logo" mit aria-hidden SVG; Social-Wrapper mit Labels LinkedIn, Instagram, TikTok. Sprache en. Titel: Studio — Footer. Beschreibung: Fresh ideas, imagination, and creative collaboration. Favicon: dasselbe Logo /logo.svg mit fill #080909. 10. Implementierungs-Constraints: React und TypeScript mit gewöhnlichem CSS; Referenz in app/page.tsx, app/layout.tsx und einer clientseitigen Videokomponente. Erhalte die gelieferte Quelle, wo die Umgebung es unterstützt. Keine Animationsbibliothek, kein UI-Framework, kein Canvas. Nutze die exakten Quelldateien; hole die zwei Schriften und das Video; für public/logo.svg fillRule/clipRule zurück zu fill-rule/clip-rule konvertieren und #080909 setzen, viewBox und Path erhalten. Erfolgreich bauen und kardinales Blick-Mapping, Mobil-Stacking, Umbruch bei 320px/390px und Desktop-Layout über 700px prüfen. Beim Validieren keinen Inhalt ändern. Alles lokal halten; nicht veröffentlichen oder deployen.