PageSourceSearch

https://mool.video/features

html mool.video collected 2026-10-02 02:10:10 UTC 70,985 bytes, 62 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <link href="./_app/immutable/entry/start.kobyCd_2.js" rel="modulepreload">
7		<link href="./_app/immutable/chunks/CR_I7e_Z.js" rel="modulepreload">
8		<link href="./_app/immutable/chunks/D52h3Qri.js" rel="modulepreload">
9		<link href="./_app/immutable/chunks/CWeFt6jb.js" rel="modulepreload">
10		<link href="./_app/immutable/chunks/C5KnbJAx.js" rel="modulepreload">
11		<link href="./_app/immutable/entry/app.BsQvUsF4.js" rel="modulepreload">
12		<link href="./_app/immutable/chunks/C3upyihO.js" rel="modulepreload">
13		<link href="./_app/immutable/chunks/DLv8sOFZ.js" rel="modulepreload">
14		<link href="./_app/immutable/chunks/BqJV1pio.js" rel="modulepreload">
15		<link href="./_app/immutable/chunks/CuXVYwdY.js" rel="modulepreload">
16		<link href="./_app/immutable/chunks/BG5ZCEf8.js" rel="modulepreload">
17		<link href="./_app/immutable/chunks/BSLtK136.js" rel="modulepreload">
18		<link href="./_app/immutable/nodes/0.mKHnWSHX.js" rel="modulepreload">
19		<link href="./_app/immutable/chunks/BydiegG3.js" rel="modulepreload">
20		<link href="./_app/immutable/chunks/Ccc2MgR4.js" rel="modulepreload">
21		<link href="./_app/immutable/chunks/C7yj9_5u.js" rel="modulepreload">
22		<link href="./_app/immutable/chunks/DsC1Ds4h.js" rel="modulepreload">
23		<link href="./_app/immutable/chunks/BcKg5_4W.js" rel="modulepreload">
24		<link href="./_app/immutable/chunks/CU_eYVOj.js" rel="modulepreload">
25		<link href="./_app/immutable/chunks/BypH8XXb.js" rel="modulepreload">
26		<link href="./_app/immutable/nodes/3.2zT5pPte.js" rel="modulepreload">
27		<link href="./_app/immutable/chunks/orXeD-gq.js" rel="modulepreload">
28		<link href="./_app/immutable/chunks/C-R5pQaT.js" rel="modulepreload">
29		<!--12qhfyh--><link rel="canonical" href="https://mool.video/features"/> <link rel="icon" href="/favicon.svg"/> <meta name="theme-color" content="#FFFFFF"/> <link rel="preconnect" href="https://fonts.googleapis.com"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],400;9..40,500;9..40,600;9..40,700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/><!----><!--1d0dgro--><meta name="description" content="Screen recording that just works. See everything Mool can do for your team."/><!----><title>Features - Mool</title>
30		<link href="./_app/immutable/assets/Navigation.BxYoIt5q.css" rel="stylesheet">
31		<link href="./_app/immutable/assets/0.CEmbfBJv.css" rel="stylesheet">
32		<link href="./_app/immutable/assets/blocks.45Fadska.css" rel="stylesheet">
33  </head>
34  <body class="grain" data-sveltekit-preload-data="hover">
35    <div style="display: contents"><!--[--><!--[0--><!--[--><!--[-1--><!--]--><!----> <header class="fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 px-4"><nav class="nav-pill flex items-center gap-1 px-2 py-2 rounded-full transition-all duration-300 svelte-1mok3ed"><a href="/" class="flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-white/10 transition-colors"><img src="/logo-dark.svg" alt="Mool" class="w-6 h-6 rounded-md"/> <span class="font-display text-sm font-semibold text-white">mool</span></a> <div class="hidden md:flex items-center gap-0.5 ml-2"><!--[--><!--$s1--><!--[-1--><nav aria-label="main" class="nav-menu-root" id="bits-s1" data-orientation="horizontal" dir="ltr" data-navigation-menu-root="" data-navigation-menu-menu=""><!--[--><!--$s2--><!--[-1--><div id="bits-3"><ul class="flex items-center gap-0.5" id="bits-s2" data-orientation="horizontal" data-navigation-menu-list=""><!--[--><!--$s3--><!--[-1--><li id="bits-s3" data-navigation-menu-item=""><!--[--><!--$s4--><!--[-1--><button class="nav-trigger group flex items-center gap-1 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-all duration-200" id="bits-s4" data-state="closed" data-value="bits-s3" aria-expanded="false" data-navigation-menu-trigger="" tabindex="0"><!---->Product <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-3.5 h-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path><!--]--></svg><!----><!----></button><!--]--> <!--[-1--><!--]--><!--]--> <!--[--><!--$s5-->
35<!--[0--><!--[-1--><!--]--><!----><!--]--><!--]--><!----></li><!--]--><!--]--> <!--[--><!--[--><!--$s6--><!--[-1--><li id="bits-s6" data-navigation-menu-item=""><!--[--><!--$s7--><!--[-1--><a href="/features" class="px-3 py-1.5 text-sm text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-all duration-200" id="bits-s7" data-navigation-menu-link="" tabindex="0"><!---->Features<!----></a><!--]--><!--]--><!----></li><!--]--><!--]--><!--[--><!--$s8--><!--[-1--><li id="bits-s8" data-navigation-menu-item=""><!--[--><!--$s9--><!--[-1--><a href="/pricing" class="px-3 py-1.5 text-sm text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-all duration-200" id="bits-s9" data-navigation-menu-link="" tabindex="0"><!---->Pricing<!----></a><!--]--><!--]--><!----></li><!--]--><!--]--><!--[--><!--$s10--><!--[-1--><li id="bits-s10" data-navigation-menu-item=""><!--[--><!--$s11--><!--[-1--><a href="/howto" class="px-3 py-1.5 text-sm text-white/80 hover:text-white hover:bg-white/10 rounded-full transition-all duration-200" id="bits-s11" data-navigation-menu-link="" tabindex="0"><!---->How-to<!----></a><!--]--><!--]--><!----></li><!--]--><!--]--><!--]--><!----></ul></div> <!----><!--]--><!--]--> <!--[--><!--$s12--><!--[-1--><!--]--><!--]--><!----></nav><!--]--><!--]--></div> <div class="hidden md:flex ml-2"><a href="https://chromewebstore.google.com/detail/mool-screen-record-and-ca/mhoiopjbhlnbpgmdndbcdpnekabjmlin" class="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white text-sm font-medium rounded-full transition-colors">Get Started <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4 -rotate-90"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M208.49,152.49l-72,72a12,12,0,0,1-17,0l-72-72a12,12,0,0,1,17-17L116,187V40a12,12,0,0,1,24,0V187l51.51-51.52a12,12,0,0,1,17,17Z"></path><!--]--></svg><!----></a></div> <button class="md:hidden size-10 flex items-center justify-center rounded-full text-white hover:bg-white/10 transition-colors ml-auto" aria-label="Open menu" aria-expanded="false"><div class="relative w-5 h-4"><span class="absolute left-0 w-full h-0.5 bg-current transition-all duration-300 origin-center top-0"></span> <span class="absolute top-1/2 -translate-y-1/2 left-0 w-full h-0.5 bg-current transition-all duration-300 "></span> <span class="absolute left-0 w-full h-0.5 bg-current transition-all duration-300 origin-center bottom-0"></span></div></button></nav> <!--[-1--><!--]--></header><!----> <main><!--[--><!--[--><!--[--><section class="relative bg-white pt-32 pb-16 md:pt-40 md:pb-24"><div class="container"><div class="max-w-4xl mx-auto text-center"><h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.1] text-text">Built for speed. <!--[0--><br class="hidden sm:block"/> <span>Designed for clarity.</span><!--]--></h1> <p class="mt-6 md:mt-8 text-base md:text-lg lg:text-xl leading-relaxed text-text-secondary max-w-2xl mx-auto">Every feature exists to get you from idea to shared recording faster.</p> <div class="mt-8 md:mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4"><a href="https://chromewebstore.google.com/detail/mool-screen-record-and-ca/mhoiopjbhlnbpgmdndbcdpnekabjmlin" class="inline-flex items-center gap-2 px-6 py-3 bg-accent hover:bg-accent-hover text-white font-medium rounded-full transition-all duration-200 shadow-md hover:shadow-lg">Add to Chrome — Free <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M208.49,152.49l-72,72a12,12,0,0,1-17,0l-72-72a12,12,0,0,1,17-17L116,187V40a12,12,0,0,1,24,0V187l51.51-51.52a12,12,0,0,1,17,17Z"></path><!--]--></svg><!----></a> <!--[-1--><!--]--></div></div></div></section><!--]--><!--[--><section id="recording" class="py-20 md:py-28 lg:py-36 bg-[var(--color-surface-muted)]"><div class="container"><div class="relative"><div class="absolute inset-0 -z-10 overflow-hidden" aria-hidden="true"><div class="absolute top-0 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-[var(--color-accent)]/5 to-transparent roun
35ded-full blur-3xl"></div> <div class="absolute bottom-0 left-1/4 w-[400px] h-[400px] bg-gradient-to-br from-blue-500/5 to-transparent rounded-full blur-3xl"></div></div> <div class="text-center max-w-3xl mx-auto mb-16 md:mb-20"><div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-accent-soft)] border border-[var(--color-accent)]/20 mb-6 opacity-0"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4 text-[var(--color-accent)]"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path><!--]--></svg><!----> <span class="text-sm font-medium text-[var(--color-accent)]">Features</span></div> <h2 class="font-display text-4xl md:text-5xl lg:text-6xl text-[var(--color-text)] leading-[1.1] opacity-0">Recording</h2></div> <div class="grid gap-4 md:gap-5 md:grid-cols-2 lg:grid-cols-3"><!--[--><div class="group relative md:col-span-2 opacity-0" style="animation-delay: 200ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Screen, tab, or window</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Choose exactly what to capture. Record your entire screen, a specific browser tab, or any application window.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[0--><div class="absolute top-4 right-4 z-10"><span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-accent)] text-white text-xs font-semibold shadow-lg shadow-[var(--color-accent)]/25"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-3.5 h-3.5"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path><!--]--></svg><!----> Popular</span></div><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 300ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 roun
35ded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Webcam overlay</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Add your face to recordings with a picture-in-picture webcam bubble. Resize and position it anywhere.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 400ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div>
35 <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">System audio capture</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Include audio from your browser tab or system. Perfect for demos with sound.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 500ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-amber-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--color-accent)] to-amber-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M213.66,201,201,213.66a8,8,0,0,1-11.31,0l-51.31-51.31a8,8,0,0,0-13,2.46l-17.82,46.41a8,8,0,0,1-14.85-.71L40.41,50.44a8,8,0,0,1,10-10L210.51,92.68a8,8,0,0,1,.71,14.85l-46.41,17.82a8,8,0,0,0-2.46,13l51.31,51.31A8,8,0,0,1,213.66,201Z" opacity="0.2"></path><path d="M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-[var(--color-accent)] to-amber-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Microphone input</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Narrate as you record. Works with any connected microphone.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 600ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 roun
35ded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Drawing tools</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Annotate while recording. Highlight, circle, or draw arrows to direct attention.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><!--]--></div></div><!----></div></section><!--]--><!--[--><section id="sharing" class="py-20 md:py-28 lg:py-36 bg-[var(--color-surface-muted)]"><div class="container"><div class="relative"><div class="absolute inset-0 -z-10 overflow-hidden" aria-hidden="true"><div class="absolute top-0 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-[var(--color-accent)]/5 to-transparent rounded-full blur-3xl"></div> <div class="absolute bottom-0 left-1/4 w-[400px] h-[400px] bg-gradient-to-br from-blue-500/5 to-transparent rounded-full blur-3xl"></div></div> <div class="text-center max-w-3xl mx-auto mb-16 md:mb-20"><div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-accent-soft)] border border-[var(--color-accent)]/20 mb-6 opacity-0"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4 text-[var(--color-accent)]"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path><!--]--></svg><!----> <span class="text-sm font-medium text-[var(--color-accent)]">Features</span></div> <h2 class="font-display text-4xl md:text-5xl lg:text-6xl text-[var(--color-text)] leading-[1.1] opacity-0">Sharing</h2></div> <div class="grid gap-4 md:gap-5 md:grid-cols-2 lg:grid-cols-3"><!--[--><div class="group relative md:col-span-2 opacity-0" style="animation-delay: 200ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 roun
35ded-xl bg-gradient-to-br from-blue-500 to-cyan-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M218.34,119.6,183.6,154.34a46.58,46.58,0,0,1-44.31,12.26c-.31.34-.62.67-.95,1L103.6,202.34A46.63,46.63,0,1,1,37.66,136.4L72.4,101.66A46.6,46.6,0,0,1,116.71,89.4c.31-.34.62-.67,1-1L152.4,53.66a46.63,46.63,0,0,1,65.94,65.94Z" opacity="0.2"></path><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,7.78,8.22H152a8,8,0,0,0,8-7.78A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Instant links</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Your video uploads as you record. The moment you stop, your link is ready to share.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[0--><div class="absolute top-4 right-4 z-10"><span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--color-accent)] text-white text-xs font-semibold shadow-lg shadow-[var(--color-accent)]/25"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-3.5 h-3.5"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path><!--]--></svg><!----> Popular</span></div><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 300ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-2
350.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Password protection</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Add a password to any recording. Only people with the password can view.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 400ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Expiration dates</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Set recordings to auto-delete after a day, week, or custom timeframe.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 500ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 roun
35ded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Embed anywhere</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Drop your video into Notion, Confluence, or any tool that supports embeds.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 600ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div>
35 <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Download originals</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Download the original MP4 or WebM file anytime. Your recordings, your files.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><!--]--></div></div><!----></div></section><!--]--><!--[--><section id="team-features" class="py-20 md:py-28 lg:py-36 bg-[var(--color-surface-muted)]"><div class="container"><div class="relative"><div class="absolute inset-0 -z-10 overflow-hidden" aria-hidden="true"><div class="absolute top-0 right-1/4 w-[500px] h-[500px] bg-gradient-to-br from-[var(--color-accent)]/5 to-transparent rounded-full blur-3xl"></div> <div class="absolute bottom-0 left-1/4 w-[400px] h-[400px] bg-gradient-to-br from-blue-500/5 to-transparent rounded-full blur-3xl"></div></div> <div class="text-center max-w-3xl mx-auto mb-16 md:mb-20"><div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-accent-soft)] border border-[var(--color-accent)]/20 mb-6 opacity-0"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4 text-[var(--color-accent)]"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path><!--]--></svg><!----> <span class="text-sm font-medium text-[var(--color-accent)]">Features</span></div> <h2 class="font-display text-4xl md:text-5xl lg:text-6xl text-[var(--color-text)] leading-[1.1] opacity-0">Team Features</h2></div> <div class="grid gap-4 md:gap-5 md:grid-cols-2 lg:grid-cols-3"><!--[--><div class="group relative  opacity-0" style="animation-delay: 200ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-2
350.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Shared workspace</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Organize recordings by project or team. Everyone sees what they need.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 300ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">View analytics</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">See who watched your recordings, when, and for how long.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 400ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 roun
35ded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div> <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Comments &amp; reactions</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Viewers can leave timestamped comments and emoji reactions.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><div class="group relative  opacity-0" style="animation-delay: 500ms;"><div class="relative h-full rounded-2xl border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-6 md:p-8 transition-all duration-300 hover:border-[var(--color-border)] hover:shadow-xl hover:-translate-y-1 overflow-hidden"><div class="absolute inset-0 bg-gradient-to-br from-rose-500/10 to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> <div class="relative z-10"><div class="relative mb-6"><div class="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"><!--[--><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-7 h-7"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[1--><path d="M194.82,151.43l-55.09,20.3-20.3,55.09a7.92,7.92,0,0,1-14.86,0l-20.3-55.09-55.09-20.3a7.92,7.92,0,0,1,0-14.86l55.09-20.3,20.3-55.09a7.92,7.92,0,0,1,14.86,0l20.3,55.09,55.09,20.3A7.92,7.92,0,0,1,194.82,151.43Z" opacity="0.2"></path><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path><!--]--></svg><!--]--></div>
35 <div class="absolute inset-0 w-14 h-14 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div></div> <h3 class="font-display text-xl md:text-2xl text-[var(--color-text)] mb-3 transition-colors duration-200">Custom branding</h3> <p class="text-[var(--color-text-secondary)] leading-relaxed text-[15px]">Add your logo and colors to the player. Make it yours.</p> <div class="mt-6 flex items-center gap-2 text-[var(--color-accent)] opacity-0 group-hover:opacity-100 translate-x-0 group-hover:translate-x-2 transition-all duration-300"><span class="text-sm font-medium">Learn more</span> <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-4 h-4"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></div></div> <!--[-1--><!--]--> <div class="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-500" aria-hidden="true"><svg class="w-full h-full text-[var(--color-border)]" viewBox="0 0 100 100" fill="none"><path d="M100 0 L100 100 L0 100" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4"></path></svg></div></div></div><!--]--></div></div><!----></div></section><!--]--><!--[--><section class="py-20 md:py-28 lg:py-36 bg-[var(--color-surface-muted)] relative overflow-hidden"><div class="container"><div class="absolute inset-0 pointer-events-none svelte-15cdzjo" aria-hidden="true"><div class="absolute top-0 left-1/4 w-[500px] h-[500px] rounded-full opacity-30 blur-3xl svelte-15cdzjo" style="background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);"></div> <div class="absolute bottom-0 right-1/4 w-[400px] h-[400px] rounded-full opacity-20 blur-3xl svelte-15cdzjo" style="background: radial-gradient(circle, #3B82F6 0%, transparent 70%);"></div> <div class="absolute inset-0 opacity-[0.02] svelte-15cdzjo" style="background-image: linear-gradient(var(--color-text) 1px, transparent 1px), linear-gradient(90deg, var(--color-text) 1px, transparent 1px); background-size: 60px 60px;"></div></div> <div class="relative py-16 md:py-24 lg:py-32 svelte-15cdzjo"><div class="max-w-4xl mx-auto text-center svelte-15cdzjo"><h2 class="font-display text-4xl md:text-5xl lg:text-6xl xl:text-7xl text-[var(--color-text)] leading-[1.1] opacity-0 svelte-15cdzjo">See it in action</h2> <!--[0--><p class="mt-6 md:mt-8 text-lg md:text-xl text-[var(--color-text-secondary)] max-w-2xl mx-auto leading-relaxed opacity-0 svelte-15cdzjo">Install Mool and record your first video. It takes less than a minute.</p><!--]--> <div class="mt-12 md:mt-14 opacity-0 svelte-15cdzjo"><div class="relative inline-block group svelte-15cdzjo"><div class="absolute inset-0 bg-[var(--color-accent)] rounded-full blur-xl opacity-0 group-hover:opacity-40 transition-opacity duration-500 scale-110 svelte-15cdzjo"></div> <!--[0--><a href="https://chromewebstore.google.com/detail/mool-screen-record-and-ca/mhoiopjbhlnbpgmdndbcdpnekabjmlin" class="inline-flex items-center justify-center rounded-[var(--radius-md)] font-display font-medium transition-all duration-[var(--duration-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] hover:scale-[1.02] active:bg-[var(--color-accent-active)] active:scale-[0.98] shadow-md hover:shadow-lg h-14 px-9 text-lg gap-3 relative text-lg px-10 py-5 shadow-xl shadow-[var(--color-accent)]/20"><span class="flex items-center gap-3 svelte-15cdzjo"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-6 h-6"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,16a88,88,0,0,1,73.72,40H128a48.08,48.08,0,0,0-45.6,33l-23.08-40A87.89,87.89,0,0,1,128,40ZM40,128a87.44,87.44,0,0,1,9.56-39.86L86.43,152c.06.1.13.19.19.28A48,48,0,0,0,137.82,175l-23.1,40A88.14,88.14,0,0,1,40,128Zm92.69,87.87L169.57,152c.08-.14.14-.28.22-.42a47.88,47.88,0,0,0-6-55.58H210a88,88,0,0,1-77.29,119.87Z"></path><!--]--></svg><!----> Add to Chrome — Free <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[0--><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path><!--]--></svg><!----></span><!----></a>
35<!--]--><!----></div></div> <!--[0--><div class="mt-12 md:mt-16 opacity-0 svelte-15cdzjo"><div class="flex items-center justify-center gap-2 svelte-15cdzjo"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="w-5 h-5 text-emerald-500"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path><!--]--></svg><!----> <span class="text-sm font-medium text-[var(--color-text-muted)] svelte-15cdzjo">No account required to start recording</span></div></div><!--]--></div> <div class="absolute top-1/4 left-8 hidden lg:block animate-float-slow svelte-15cdzjo"><div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-[var(--color-accent)] to-orange-600 opacity-20 rotate-12 svelte-15cdzjo"></div></div> <div class="absolute bottom-1/4 right-8 hidden lg:block animate-float-delayed svelte-15cdzjo"><div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 opacity-20 -rotate-12 svelte-15cdzjo"></div></div> <div class="absolute top-1/2 right-1/4 hidden lg:block animate-float-slow svelte-15cdzjo" style="animation-delay: 1s;"><div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-500 opacity-15 rotate-45 svelte-15cdzjo"></div></div></div><!----></div></section><!--]--><!--]--><!--]--><!----></main> <footer class="border-t border-[var(--color-border)] bg-[var(--color-background)]"><div class="container py-12 md:py-16"><div class="grid gap-8 md:grid-cols-4"><div class="md:col-span-2"><a href="/" class="inline-flex items-center gap-2"><img src="/logo-dark.svg" alt="Mool" class="w-8 h-8 rounded-lg"/> <span class="font-display text-xl font-bold text-[var(--color-text)] tracking-tight">mool</span></a> <p class="mt-4 text-sm text-[var(--color-text-muted)] leading-relaxed max-w-sm">Record your screen. Share the video. A free Chrome screen recorder for quick demos, bug reports, and async
36          updates.</p> <div class="mt-6 flex items-center gap-3"><!--[--><a href="https://twitter.com/moolapp" target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] transition-all duration-[var(--duration-fast)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] hover:bg-[var(--color-accent-soft)]" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="h-5 w-5"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M215,219.85a8,8,0,0,1-7,4.15H160a8,8,0,0,1-6.75-3.71l-40.49-63.63L53.92,221.38a8,8,0,0,1-11.84-10.76l61.77-68L41.25,44.3A8,8,0,0,1,48,32H96a8,8,0,0,1,6.75,3.71l40.49,63.63,58.84-64.72a8,8,0,0,1,11.84,10.76l-61.77,67.95,62.6,98.38A8,8,0,0,1,215,219.85Z"></path><!--]--></svg><!----></a><a href="https://github.com/moolapp" target="_blank" rel="noopener noreferrer" class="flex h-10 w-10 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] transition-all duration-[var(--duration-fast)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] hover:bg-[var(--color-accent-soft)]" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" class="h-5 w-5"><!--[-1--><!--]--><rect width="256" height="256" fill="none"></rect><!--[2--><path d="M216,104v8a56.06,56.06,0,0,1-48.44,55.47A39.8,39.8,0,0,1,176,192v40a8,8,0,0,1-8,8H104a8,8,0,0,1-8-8V216H72a40,40,0,0,1-40-40A24,24,0,0,0,8,152a8,8,0,0,1,0-16,40,40,0,0,1,40,40,24,24,0,0,0,24,24H96v-8a39.8,39.8,0,0,1,8.44-24.53A56.06,56.06,0,0,1,56,
36112v-8a58.14,58.14,0,0,1,7.69-28.32A59.78,59.78,0,0,1,69.07,28,8,8,0,0,1,76,24a59.75,59.75,0,0,1,48,24h24a59.75,59.75,0,0,1,48-24,8,8,0,0,1,6.93,4,59.74,59.74,0,0,1,5.37,47.68A58,58,0,0,1,216,104Z"></path><!--]--></svg><!----></a><!--]--></div></div> <div><h3 class="font-display text-sm font-medium text-[var(--color-text)] uppercase tracking-wide">Product</h3> <ul class="mt-4 space-y-3"><!--[--><li><a href="/features" class="text-sm text-[var(--color-text-muted)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--color-text)]">Features</a></li><li><a href="/pricing" class="text-sm text-[var(--color-text-muted)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--color-text)]">Pricing</a></li><!--]--></ul></div> <div><h3 class="font-display text-sm font-medium text-[var(--color-text)] uppercase tracking-wide">Legal</h3> <ul class="mt-4 space-y-3"><!--[--><li><a href="/privacy" class="text-sm text-[var(--color-text-muted)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--color-text)]">Privacy</a></li><li><a href="/terms" class="text-sm text-[var(--color-text-muted)] transition-colors duration-[var(--duration-fast)] hover:text-[var(--color-text)]">Terms</a></li><!--]--></ul></div></div> <div class="mt-12 pt-8 border-t border-[var(--color-border)]"><div class="flex flex-col items-center justify-between gap-4 sm:flex-row"><p class="text-sm text-[var(--color-text-muted)]">© 2026 Mool. All rights reserved.</p></div></div></div></footer><!----><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
37			
38			
38<script>
39				{
40					__sveltekit_p7n992 = {
41						base: new URL(".", location).pathname.slice(0, -1)
42					};
43
44					const element = document.currentScript.parentElement;
45
46					Promise.all([
47						import("./_app/immutable/entry/start.kobyCd_2.js"),
48						import("./_app/immutable/entry/app.BsQvUsF4.js")
49					]).then(([kit, app]) => {
50						kit.start(app, element, {
51							node_ids: [0, 3],
52							data: [null,null],
53							form: null,
54							error: null
55						});
56					});
57				}
58			</script>
58
59		</div>
60  
60<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0ceaa7a087cc4a67b1ebbefdafdb713e","r":1,"spa":2}' crossorigin="anonymous"></script>
60
61</body>
62</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.