PageSourceSearch

https://deskly.in/

html deskly.in collected 2026-10-03 20:08:37 UTC 179,538 bytes, 4,640 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7        <title>Deskly - Digital Wellbeing for Windows</title>
8    <meta name="description"
9                content="Deskly is a native Windows digital wellbeing app with screen time tracking, app and website limits, app locks, focus mode, desktop widgets, and a visual timeline. Private, local-first, and practical." />
10        <meta name="keywords"
11                content="windows screen time tracker, digital wellbeing windows, app usage tracker windows, website blocker windows, app lock windows, focus app windows, desktop widgets windows, productivity tracker, windows parental screen time alternative" />
12        <meta name="author" content="Deskly" />
13        <meta name="application-name" content="Deskly" />
14    <meta name="theme-color" content="#0a0a0b" />
15        <meta name="robots" content="index, follow, max-image-preview:large" />
16        <link rel="canonical" href="https://deskly.in/" />
17
18        <meta property="og:title" content="Deskly - Digital Wellbeing for Windows" />
19    <meta property="og:description"
20                content="Track screen time, lock distracting apps, run focus sessions, and see your day on a visual timeline — a complete digital wellbeing system for Windows." />
21    <meta property="og:type" content="website" />
22    <meta property="og:url" content="https://deskly.in/" />
23    <meta property="og:image" content="https://deskly.in/og-logo.png?v=3" />
24    <meta property="og:image:secure_url" content="https://deskly.in/og-logo.png?v=3" />
25    <meta property="og:image:type" content="image/png" />
26    <meta property="og:image:width" content="1200" />
27    <meta property="og:image:height" content="630" />
28    <meta property="og:image:alt" content="Deskly logo" />
29        <meta property="og:site_name" content="Deskly" />
30        <meta name="twitter:title" content="Deskly - Digital Wellbeing for Windows" />
31        <meta name="twitter:description" content="Track screen time, lock distracting apps, run focus sessions, and see your day on a visual timeline — a complete digital wellbeing system for Windows." />
32        <meta name="twitter:image" content="https://deskly.in/og-logo.png?v=3" />
33        <meta name="twitter:image:alt" content="Deskly logo" />
34        <meta name="twitter:url" content="https://deskly.in/" />
35    <meta name="twitter:card" content="summary_large_image" />
36
37        
37<script type="application/ld+json">
38        {
39            "@context": "https://schema.org",
40            "@type": "SoftwareApplication",
41            "name": "Deskly",
42            "applicationCategory": "ProductivityApplication",
43            "operatingSystem": "Windows 10, Windows 11",
44            "description": "Native Windows digital wellbeing software that tracks app and website usage, enforces limits and app locks, runs focus sessions, and visualizes your day with a timeline and live desktop widgets.",
45            "offers": {
46                "@type": "Offer",
47                "price": "0",
48                "priceCurrency": "USD"
49            },
50            "downloadUrl": "https://deskly.in/download/windows",
51            "url": "https://deskly.in/",
52            "publisher": {
53                "@type": "Organization",
54                "name": "Deskly"
55            },
56            "featureList": [
57                "Windows app and website usage tracking",
58                "Screen time insights and trend reports",
59                "App and website limits",
60                "App locks for hard enforcement",
61                "Focus mode with distraction blocking",
62                "Visual hour-by-hour timeline",
63                "Live desktop widgets",
64                "Break reminders and focus support",
65                "Local-first private data vault"
66            ]
67        }
68        </script>
68
69
70        
70<script type="application/ld+json">
71        {
72            "@context": "https://schema.org",
73            "@type": "FAQPage",
74            "mainEntity": [
75                {
76                    "@type": "Question",
77                    "name": "What is Deskly for?",
78                    "acceptedAnswer": {
79                        "@type": "Answer",
80                        "text": "Deskly helps Windows users understand screen habits, reduce distractions, and build healthier focus routines through tracking, limits, and reports."
81                    }
82                },
83                {
84                    "@type": "Question",
85                    "name": "Does Deskly track website usage?",
86                    "acceptedAnswer": {
87                        "@type": "Answer",
88                        "text": "Yes. Deskly tracks website activity across supported browsers without requiring browser extensions."
89                    }
90                },
91                {
92                    "@type": "Question",
93                    "name": "Can I set app limits on Windows?",
94                    "acceptedAnswer": {
95                        "@type": "Answer",
96                        "text": "Yes. Deskly includes app limits so you can reduce overuse and stay focused during work or study sessions."
97                    }
98                },
99                {
100                    "@type": "Question",
101                    "name": "Where is my data stored?",
102                    "acceptedAnswer": {
103                        "@type": "Answer",
104                        "text": "Deskly stores usage data locally in a folder you control, so your digital wellbeing history stays on your machine."
105                    }
106                },
107                {
108                    "@type": "Question",
109                    "name": "Can Deskly lock apps completely, not just limit them?",
110                    "acceptedAnswer": {
111                        "@type": "Answer",
112                        "text": "Yes. App locks go beyond soft limits — you can fully block distracting apps on a schedule or during focus sessions."
113                    }
114                },
115                {
116                    "@type": "Question",
117                    "name": "Does Deskly have a focus mode and desktop widgets?",
118                    "acceptedAnswer": {
119                        "@type": "Answer",
120                        "text": "Yes. Focus mode blocks distractions during dedicated work sessions, and live desktop widgets show your screen time, top apps, and top sites at a glance."
121                    }
122                }
123            ]
124        }
125        </script>
125
126
127    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
128    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
129    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
130    <link rel="manifest" href="/site.webmanifest" />
131
132    <link rel="preconnect" href="https://fonts.googleapis.com" />
133    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
134    <link rel="preconnect" href="https://cdn.simpleicons.org" crossorigin />
135    <link rel="dns-prefetch" href="//cdn.simpleicons.org" />
136    <link
137        href="https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],400;14..32,500;14..32,600;14..32,700&family=Instrument+Serif:ital@0;1&display=block"
138        rel="stylesheet" />
139    <link
140        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,300,0,0&display=block"
141        rel="stylesheet" />
142    <link rel="stylesheet" href="/styles/shared-ui.css" />
143
144    <style>
145        /* ═══════════════════════════════════════════════════
146           RESET & TOKENS
147           ═══════════════════════════════════════════════════ */
148        *,
149        *::before,
150        *::after {
151            margin: 0;
152            padding: 0;
153            box-sizing: border-box;
154        }
155
156        :root {
157            --bg: #09090b;
158            --surface: #0f0f12;
159            --surface-2: #16161a;
160            --surface-3: #1c1c21;
161            --border: rgba(255, 255, 255, 0.08);
162            --border-2: rgba(255, 255, 255, 0.14);
163            --text: #ededef;
164            --text-2: #9CA3AF;
165            --text-3: #717888;
166            --primary: #3d6bea;
167            --primary-dim: rgba(61, 107, 234, 0.12);
168            --green: #34d399;
169            --green-dim: rgba(52, 211, 153, 0.1);
170            --amber: #fbbf24;
171            --pink: #f472b6;
172            --ease: cubic-bezier(0.16, 1, 0.3, 1);
173            --ease-out: cubic-bezier(0, 0, 0.2, 1);
174        }
175
176        html {
177            scrollbar-width: thin;
178            scrollbar-color: var(--surface-3) transparent;
179            width: 100%;
180            overflow-x: clip;
181        }
182
183        body {
184            font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
185            background: var(--bg);
186            color: var(--text);
187            line-height: 1.6;
188            -webkit-font-smoothing: antialiased;
189            -moz-osx-font-smoothing: grayscale;
190            font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
191            overflow-x: clip;
192            width: 100%;
193            text-rendering: optimizeLegibility;
194        }
195
196        a {
197            text-decoration: none;
198            color: inherit;
199        }
200
201        [id] {
202            scroll-margin-top: 90px;
203        }
204
205        /* Focus indicators for keyboard navigation */
206        button:focus-visible,
207        a:focus-visible,
208        input:focus-visible {
209            outline: 2px solid var(--primary);
210            outline-offset: 2px;
211        }
212
213        .btn:focus-visible {
214            outline: 2px solid var(--primary);
215            outline-offset: 3px;
216        }
217
218        .skip-link {
219            position: absolute;
220            top: -100px;
221            left: 16px;
222            background: var(--primary);
223            color: #fff;
224            padding: 8px 16px;
225            border-radius: 8px;
226            font-size: 0.82rem;
227            font-weight: 500;
228            z-index: 1000;
229            transition: top 0.2s;
230        }
231
232        .skip-link:focus {
233            top: 12px;
234        }
235
236        /* ═══════════════════════════════════════════════════
237           NOISE GRAIN OVERLAY
238           ═══════════════════════════════════════════════════ */
239        body::before {
240            content: '';
241            position: fixed;
242            inset: 0;
243            z-index: 9999;
244            pointer-events: none;
245            opacity: 0.012;
246            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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
247            background-repeat: repeat;
248            background-size: 256px;
249        }
250
251        .container {
252            max-width: 1080px;
253            margin: 0 auto;
254            padding: 0 28px;
255        }
256
257        /* Defer paint/layout work for below-the-fold sections. */
258        .browsers,
259        .numbers,
260        .how,
261        .features,
262        .privacy,
263        .statement,
264        .cta,
265        footer {
266            content-visibility: auto;
267            contain-intrinsic-size: 1px 900px;
268        }
269
270        :focus-visible {
271            outline: 2px solid var(--primary);
272            outline-offset: 3px;
273            border-radius: 6px;
274        }
275
276        /* ═══════════════════════════════════════════════════
277           NAV
278           ═══════════════════════════════════════════════════ */
279        nav {
280            position: fixed;
281            top: 0;
282            left: 0;
283            right: 0;
284            z-index: 100;
285            padding: 14px 24px;
286            display: flex;
287            align-items: center;
288            overflow-x: clip;
289            transition: padding 0.5s var(--ease);
290        }
291
292        nav.scrolled .inner {
293            background: rgba(9, 9, 11, 0.9);
294            box-shadow:
295                inset 0 1px 1px rgba(255, 255, 255, 0.12),
296                0 8px 32px rgba(0, 0, 0, 0.45);
297        }
298
299        nav .inner {
300            max-width: 1080px;
301            width: 100%;
302            margin: 0 auto;
303            padding: 0 16px;
304            height: 48px;
305            display: flex;
306            align-items: center;
307            justify-content: space-between;
308            min-width: 0;
309            /* Liquid glass */
310            background: rgba(9, 9, 11, 0.58);
311            backdrop-filter: blur(12px) saturate(1.2);
312            -webkit-backdrop-filter: blur(12px) saturate(1.2);
313            border-radius: 14px;
314            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07);
315            position: relative;
316            overflow: hidden;
317            transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
318        }
319
320        nav .inner::before {
321            content: '';
322            position: absolute;
323            inset: 0;
324            border-radius: inherit;
325            padding: 1px;
326            background: linear-gradient(180deg,
327                rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 25%,
328                rgba(255, 255, 255, 0) 50%,
329                rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.18) 100%);
330            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
331            -webkit-mask-composite: xor;
332            mask-composite: exclude;
333            pointer-events: none;
334            z-index: 0;
335        }
336
337        .logo {
338            display: inline-flex;
339            align-items: center;
340            gap: 10px;
341            color: var(--text);
342            text-decoration: none;
343            font-weight: 700;
344            font-size: 0.96rem;
345            letter-spacing: -0.01em;
346            white-space: nowrap;
347            overflow: hidden;
348            text-overflow: ellipsis;
349            min-width: 0;
350            flex-shrink: 1;
351        }
352
353        .logo-icon {
354            width: 28px;
355            height: 28px;
356            border-radius: 8px;
357            overflow: hidden;
358            flex-shrink: 0;
359            display: block;
360        }
361
362        .logo-icon svg,
363        .logo-icon img {
364            width: 100%;
365            height: 100%;
366            display: block;
367            object-fit: cover;
368        }
369
370        .nav-links {
371            display: flex;
372            align-items: center;
373            gap: 18px;
374            min-width: 0;
375        }
376
377        .nav-links a {
378            color: var(--text-2);
379            text-decoration: none;
380            font-size: 0.84rem;
381            font-weight: 500;
382            letter-spacing: 0.01em;
383            white-space: nowrap;
384            transition: color 0.2s var(--ease);
385        }
386
387        .nav-links a:hover {
388            color: var(--text);
389        }
390
391        .nav-links .nav-cta {
392            color: var(--text);
393            border: 1px solid var(--border);
394            border-radius: 999px;
395            padding: 8px 14px;
396            background: rgba(255, 255, 255, 0.02);
397            font-weight: 600;
398            transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease);
399        }
400
401        .nav-links .nav-cta:hover {
402            border-color: rgba(255, 255, 255, 0.22);
403            background: rgba(255, 255, 255, 0.05);
404            transform: translateY(-1px);
405        }
406
407        .burger {
408            display: none;
409            position: relative;
410            cursor: pointer;
411            padding: 10px;
412            border: none;
413            background: none;
414            width: 44px;
415            height: 44px;
416            align-items: center;
417            justify-content: center;
418            border-radius: 6px;
419            transition: background-color 0.2s var(--ease);
420        }
421
422        .burger:hover {
423            background-color: rgba(255, 255, 255, 0.05);
424        }
425
426        .burger::before,
427        .burger::after,
428        .burger span {
429            content: '';
430            display: block;
431            position: absolute;
432            left: 10px;
433            width: 24px;
434            height: 2px;
435            background: var(--text);
436            border-radius: 1px;
437            transition: top 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.2s var(--ease);
438        }
439
440        .burger::before {
441            top: 14px;
442        }
443
444        .burger span {
445            top: 21px;
446        }
447
448        .burger::after {
449            top: 28px;
450        }
451
452        .burger[aria-expanded="true"]::before {
453            top: 21px;
454            transform: rotate(45deg);
455        }
456
457        .burger[aria-expanded="true"] span {
458            opacity: 0;
459            transform: scaleX(0);
460        }
461
462        .burger[aria-expanded="true"]::after {
463            top: 21px;
464            transform: rotate(-45deg);
465        }
466
467        /* ═══════════════════════════════════════════════════
468           HERO
469           ═══════════════════════════════════════════════════ */
470        .hero {
471            padding: 180px 0 16px;
472            text-align: center;
473            position: relative;
474            overflow-x: clip;
475        }
476
477        /* Subtle top glow */
478        .hero::before {
479            content: '';
480            position: absolute;
481            top: -200px;
482            left: 50%;
483            translate: -50% 0;
484            width: 1000px;
485            height: 600px;
486            border-radius: 50%;
487            background: radial-gradient(ellipse, rgba(61, 107, 234, 0.06) 0%, transparent 60%);
488            pointer-events: none;
489        }
490
491        .hero-badge {
492            display: inline-flex;
493            align-items: center;
494            gap: 8px;
495            padding: 4px 12px 4px 5px;
496            border-radius: 100px;
497            border: 1px solid var(--border-2);
498            background: rgba(255, 255, 255, 0.02);
499            font-size: 0.74rem;
500            color: var(--text-2);
501            margin-bottom: 28px;
502            transition: border-color 0.3s, background 0.3s;
503        }
504
505        .hero-badge:hover {
506            border-color: rgba(255, 255, 255, 0.14);
507            background: rgba(255, 255, 255, 0.04);
508        }
509
510        .hero-badge .dot {
511            width: 18px;
512            height: 18px;
513            border-radius: 50%;
514            background: var(--green-dim);
515            display: flex;
516            align-items: center;
517            justify-content: center;
518        }
519
520        .hero-badge .dot::after {
521            content: '';
522            width: 6px;
523            height: 6px;
524            border-radius: 50%;
525            background: var(--green);
526            animation: pulse 2.5s ease-in-out infinite;
527        }
528
529        @keyframes pulse {
530
531            0%,
532            100% {
533                opacity: 1;
534                transform: scale(1);
535            }
536
537            50% {
538                opacity: 0.5;
539                transform: scale(0.8);
540            }
541        }
542
543        .hero h1 {
544            font-size: clamp(3rem, 7vw, 5rem);
545            font-weight: 700;
546            letter-spacing: -0.05em;
547            line-height: 0.98;
548            margin-bottom: 28px;
549            position: relative;
550            max-width: 760px;
551            margin-left: auto;
552            margin-right: auto;
553        }
554
555        .hero h1 .serif-em {
556            font-family: 'Instrument Serif', Georgia, serif;
557            font-style: italic;
558            font-weight: 400;
559            letter-spacing: -0.03em;
560        }
561
562        .hero h1 .gradient {
563            background: linear-gradient(135deg, var(--primary) 0%, #7aa2ff 50%, var(--primary) 100%);
564            background-size: 200% auto;
565            -webkit-background-clip: text;
566            background-clip: text;
567            -webkit-text-fill-color: transparent;
568            animation: shimmer 6s ease-in-out infinite;
569        }
570
571        @keyframes shimmer {
572
573            0%,
574            100% {
575                background-position: 0% center;
576            }
577
578            50% {
579                background-position: 100% center;
580            }
581        }
582
583        .hero .sub {
584            font-size: 1.1rem;
585            line-height: 1.65;
586            color: var(--text-2);
587            max-width: 440px;
588            margin: 0 auto 40px;
589            font-weight: 400;
590        }
591
592        .hero-actions {
593            display: flex;
594            align-items: center;
595            justify-content: center;
596            gap: 10px;
597            margin-bottom: 0;
598        }
599
600        .btn {
601            display: inline-flex;
602            align-items: center;
603            gap: 8px;
604            font-family: inherit;
605            font-size: 0.84rem;
606            font-weight: 500;
607            padding: 10px 20px;
608            border: none;
609            border-radius: 9px;
610            cursor: pointer;
611            position: relative;
612            transition: all 0.2s var(--ease);
613        }
614
615        .btn[aria-busy="true"] {
616            pointer-events: none;
617            opacity: 0.7;
618        }
619
620        .btn[aria-busy="true"]::after {
621            content: '';
622            display: inline-block;
623            width: 14px;
624            height: 14px;
625            margin-left: 6px;
626            border: 2px solid currentColor;
627            border-radius: 50%;
628            border-top-color: transparent;
629            animation: spin 0.8s linear infinite;
630        }
631
632        @keyframes spin {
633            0% {
634                transform: rotate(0deg);
635            }
636
637            100% {
638                transform: rotate(360deg);
639            }
640        }
641
642        .btn svg {
643            width: 15px;
644            height: 15px;
645            flex-shrink: 0;
646        }
647
648        .btn-primary {
649            background: #fff;
650            color: #09090b;
651            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 24px rgba(255, 255, 255, 0.08), 0 0 48px rgba(255, 255, 255, 0.04);
652        }
653
654        .btn-primary:hover:not([aria-busy="true"]) {
655            background: #fff;
656            box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 32px rgba(255, 255, 255, 0.1), 0 0 64px rgba(255, 255, 255, 0.06);
657            transform: translateY(-1px);
658        }
659
660        .btn-primary:active:not([aria-busy="true"]) {
661            transform: translateY(0) scale(0.98);
662        }
663
664        .btn-ghost {
665            background: transparent;
666            color: var(--text-2);
667            border: 1px solid var(--border-2);
668        }
669
670        .btn-ghost:hover:not([aria-busy="true"]) {
671            color: var(--text);
672            border-color: rgba(255, 255, 255, 0.16);
673            background: rgba(255, 255, 255, 0.03);
674            transform: translateY(-1px);
675        }
676
677        .btn-ghost:active:not([aria-busy="true"]) {
678            transform: translateY(0) scale(0.98);
679        }
680
681        .intent-links {
682            margin-top: 14px;
683            font-size: 0.78rem;
684            color: var(--text-3);
685            line-height: 1.6;
686        }
687
688        .intent-links a {
689            color: var(--text-2);
690            text-decoration: underline;
691            text-decoration-color: rgba(255, 255, 255, 0.22);
692            text-underline-offset: 3px;
693        }
694
695        .intent-links a:hover {
696            color: var(--text);
697            text-decoration-color: rgba(255, 255, 255, 0.42);
698        }
699
700        /* ═══════════════════════════════════════════════════
701           ERROR & SUCCESS STATES
702           ═══════════════════════════════════════════════════ */
703        .error {
704            color: #ef4444;
705            border-color: #ef4444 !important;
706        }
707
708        .error:focus-visible {
709            outline-color: #ef4444;
710        }
711
712        .success {
713            color: #22c55e;
714            border-color: #22c55e !important;
715        }
716
717        .success:focus-visible {
718            outline-color: #22c55e;
719        }
720
721        /* ═══════════════════════════════════════════════════
722           TOUCH-FRIENDLY TARGETS
723           ═══════════════════════════════════════════════════ */
724        @media (hover: none) and (pointer: coarse) {
725
726            button,
727            a[href],
728            [role="button"],
729            input[type="checkbox"],
730            input[type="radio"] {
731                min-width: 44px;
732                min-height: 44px;
733                padding: 10px 12px;
734            }
735
736            .btn {
737                min-height: 44px;
738                padding: 12px 20px;
739            }
740        }
741
742        /* ═══════════════════════════════════════════════════
743           WINDOW MOCKUP
744           ═══════════════════════════════════════════════════ */
745        /* Material Symbols in sidebar icons */
746        .sb-item-icon {
747            font-family: 'Material Symbols Rounded';
748            font-size: 1rem;
749            line-height: 1;
750            font-weight: 300;
751            font-style: normal;
752            display: inline-block;
753            white-space: nowrap;
754            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
755            width: 16px;
756            text-align: center;
757            flex-shrink: 0;
758            color: rgba(255, 255, 255, 0.45);
759        }
760
761        .sb-item.active .sb-item-icon {
762            color: #C5D0DE;
763            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
764        }
765        .mockup-section {
766            padding: 80px 0 0;
767            position: relative;
768            overflow-x: clip;
769        }
770
771        .mockup-video {
772            position: absolute;
773            top: 0;
774            left: 0;
775            width: 100%;
776            height: 100%;
777            object-fit: cover;
778            z-index: 0;
779            pointer-events: none;
780        }
781
782        /* Covers the top padding seamlessly without overlapping the hero section above */
783        .mockup-section::before {
784            content: '';
785            position: absolute;
786            top: 0;
787            left: 0;
788            right: 0;
789            height: 96px; /* 80px solid + 16px spikes */
790            background-color: transparent;
791            /* Create the spikes at the bottom using a highly-optimized tiling background image instead of an expensive mask */
792            background-image: 
793                linear-gradient(#0a0a0b, #0a0a0b),
794                url("data:image/svg+xml,%3Csvg viewBox='0 0 32 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0 0 L 32 0 L 16 16 Z' fill='%230a0a0b'/%3E%3C/svg%3E");
795            background-size: 100% 80px, 32px 16px;
796            background-position: top, bottom;
797            background-repeat: no-repeat, repeat-x;
798            z-index: 1;
799            pointer-events: none;
800        }
801
802        .mockup-section::after {
803            content: '';
804            position: absolute;
805            bottom: 0;
806            left: 0;
807            right: 0;
808            height: 200px;
809            background: linear-gradient(to bottom, transparent, var(--bg));
810            pointer-events: none;
811            z-index: 2;
812        }
813
814        .window {
815            background: #000000;
816            border: 1px solid rgba(255, 255, 255, 0.08);
817            border-radius: 12px;
818            overflow: hidden;
819            box-shadow:
820                0 0 0 1px rgba(255, 255, 255, 0.04),
821                0 2px 4px rgba(0, 0, 0, 0.12),
822                0 8px 24px rgba(0, 0, 0, 0.2),
823                0 24px 56px rgba(0, 0, 0, 0.3),
824                0 48px 96px rgba(0, 0, 0, 0.35);
825        }
826
827        .tb {
828            height: 32px;
829            background: #050505;
830            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
831            display: flex;
832            align-items: center;
833            padding: 0;
834            -webkit-app-region: drag;
835            position: relative;
836        }
837
838        .tb-drag {
839            flex: 1;
840            display: flex;
841            align-items: center;
842            padding-left: 20px;
843            height: 100%;
844        }
845
846        .tb-title-text {
847            font-size: 0.68rem;
848            font-weight: 600;
849            color: rgba(255, 255, 255, 0.55);
850            letter-spacing: 0.02em;
851            user-select: none;
852        }
853
854        .tb-win-controls {
855            display: flex;
856            align-items: stretch;
857            height: 100%;
858            flex-shrink: 0;
859        }
860
861        .tb-wbtn {
862            width: 46px;
863            height: 100%;
864            display: flex;
865            align-items: center;
866            justify-content: center;
867            background: transparent;
868            border: none;
869            cursor: pointer;
870            color: rgba(255, 255, 255, 0.5);
871            font-size: 0.6rem;
872            transition: background 0.1s;
873        }
874
875        .tb-wbtn:hover {
876            background: rgba(255, 255, 255, 0.08);
877            color: rgba(255, 255, 255, 0.9);
878        }
879
880        .tb-wb
880tn.close:hover {
881            background: #c42b1c;
882            color: #fff;
883        }
884
885        .tb-wbtn svg {
886            width: 10px;
887            height: 10px;
888            stroke: currentColor;
889            stroke-width: 1.2;
890            fill: none;
891        }
892
893        .wb {
894            display: block;
895            position: relative;
896            height: 521px;
897            overflow: hidden;
898        }
899
900        /* Mockup Cutout Tabs */
901        .mockup-tabs-wrapper {
902            display: flex;
903            justify-content: center;
904            margin-bottom: 24px;
905            position: relative;
906            z-index: 10;
907            max-width: 100%;
908            overflow-x: auto;
909            -webkit-overflow-scrolling: touch;
910            scrollbar-width: none;
911        }
912
913        .mockup-tabs-wrapper::-webkit-scrollbar {
914            display: none;
915        }
916
917        .mockup-tabs {
918            background: #0a0a0b;
919            border-radius: 0 0 24px 24px;
920            padding: 10px 24px 14px;
921            display: flex;
922            align-items: center;
923            gap: 4px;
924            position: relative;
925            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
926            flex-shrink: 0;
927        }
928
929        .mtab {
930            padding: 8px 20px;
931            border-radius: 100px;
932            font-size: 0.8rem;
933            font-weight: 500;
934            color: rgba(255, 255, 255, 0.55);
935            cursor: pointer;
936            transition: all 0.2s var(--ease);
937            display: flex;
938            align-items: center;
939            gap: 8px;
940            flex-shrink: 0;
941            white-space: nowrap;
942        }
943
944        .mtab:hover {
945            color: rgba(255, 255, 255, 0.9);
946            background: rgba(255, 255, 255, 0.05);
947        }
948
949        .mtab.active {
950            color: #111;
951            background: #fff;
952            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
953        }
954
955        .mtab-icon {
956            font-family: 'Material Symbols Rounded';
957            font-size: 1.1rem;
958            line-height: 1;
959            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
960        }
961
962        .sb-tracking-status {
963            display: flex;
964            align-items: center;
965            gap: 8px;
966            margin-left: 12px;
967            padding-left: 12px;
968            border-left: 1px solid rgba(255, 255, 255, 0.1);
969        }
970
971        .sb-tracking-dot {
972            width: 7px;
973            height: 7px;
974            border-radius: 50%;
975            background: #22c55e;
976            flex-shrink: 0;
977            box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
978            animation: pulse 2s ease-in-out infinite;
979        }
980
981        .sb-tracking-label {
982            font-size: 0.65rem;
983            font-weight: 600;
984            color: rgba(255, 255, 255, 0.6);
985            text-transform: uppercase;
986            letter-spacing: 0.04em;
987        }
988
989        /* Main dashboard */
990        .dm {
991            background: #000000;
992            padding: 24px 32px;
993            display: flex;
994            flex-direction: column;
995            gap: 14px;
996            overflow: hidden;
997        }
998
999        .mockup-pane {
1000            position: absolute;
1001            inset: 0;
1002            height: 100%;
1003            opacity: 0;
1004            visibility: hidden;
1005            pointer-events: none;
1006            transition: opacity 0.35s var(--ease);
1007        }
1008
1009        .mockup-pane.active {
1010            opacity: 1;
1011            visibility: visible;
1012            pointer-events: auto;
1013        }
1014
1015        @media (prefers-reduced-motion: reduce) {
1016            .mockup-pane {
1017                transition: none;
1018            }
1019        }
1020
1021        .dm-header {
1022            display: flex;
1023            flex-direction: column;
1024            gap: 2px;
1025        }
1026
1027        .dm-greeting {
1028            font-size: 1.05rem;
1029            font-weight: 700;
1030            color: #EDEDED;
1031            letter-spacing: -0.02em;
1032            line-height: 1.2;
1033        }
1034
1035        .dm-date {
1036            font-size: 0.74rem;
1037            color: rgba(255, 255, 255, 0.5);
1038        }
1039
1040        /* Dashboard grid */
1041        .dm-grid {
1042            display: grid;
1043            grid-template-columns: minmax(160px, 0.8fr) 1fr minmax(130px, 0.65fr);
1044            grid-template-rows: auto 1fr;
1045            grid-template-areas:
1046                "hero caps bal"
1047                "recent cats bal";
1048            gap: 12px;
1049            flex: 1;
1050        }
1051
1052        .dm-area-hero { grid-area: hero; }
1053        .dm-area-caps { grid-area: caps; }
1054        .dm-area-bal  { grid-area: bal; }
1055        .dm-area-recent { grid-area: recent; }
1056        .dm-area-cats { grid-area: cats; }
1057
1058        .dm-card {
1059            background: #111111;
1060            border: 1px solid rgba(255, 255, 255, 0.08);
1061            border-radius: 12px;
1062            padding: 14px 16px;
1063            overflow: hidden;
1064        }
1065
1066        .dm-card-label {
1067            font-size: 0.62rem;
1068            font-weight: 600;
1069            text-transform: uppercase;
1070            letter-spacing: 0.08em;
1071            color: rgba(255, 255, 255, 0.45);
1072            margin-bottom: 10px;
1073        }
1074
1075        /* Hero ring card */
1076        .dm-ring-card {
1077            display: flex;
1078            flex-direction: column;
1079            align-items: center;
1080            justify-content: center;
1081            padding: 18px 12px;
1082            gap: 8px;
1083        }
1084
1085        .ring-wrap {
1086            position: relative;
1087            width: 110px;
1088            height: 110px;
1089            flex-shrink: 0;
1090        }
1091
1092        .ring-wrap svg {
1093            width: 100%;
1094            height: 100%;
1095            transform: rotate(-90deg);
1096            filter: drop-shadow(0 0 12px rgba(168, 199, 250, 0.15));
1097        }
1098
1099        .ring-track {
1100            fill: none;
1101            stroke: rgba(26, 26, 26, 0.8);
1102            stroke-width: 9;
1103        }
1104
1105        .ring-fill {
1106            fill: none;
1107            stroke: url(#ringGrad);
1108            stroke-width: 9;
1109            stroke-linecap: round;
1110            stroke-dasharray: 282;
1111            stroke-dashoffset: 85;
1112        }
1113
1114        .ring-center {
1115            position: absolute;
1116            inset: 0;
1117            display: flex;
1118            flex-direction: column;
1119            align-items: center;
1120            justify-content: center;
1121            gap: 2px;
1122        }
1123
1124        .ring-val {
1125            font-size: 1.1rem;
1126            font-weight: 700;
1127            letter-spacing: -0.04em;
1128            color: #EDEDED;
1129            line-height: 1;
1130        }
1131
1132        .ring-label {
1133            font-size: 0.5rem;
1134            font-weight: 600;
1135            text-transform: uppercase;
1136            letter-spacing: 0.12em;
1137            color: rgba(255, 255, 255, 0.45);
1138        }
1139
1140        .ring-badge {
1141            font-size: 0.62rem;
1142            background: rgba(255, 255, 255, 0.07);
1143            border: 1px solid rgba(255, 255, 255, 0.1);
1144            color: rgba(255, 255, 255, 0.75);
1145            padding: 2px 7px;
1146            border-radius: 100px;
1147            margin-top: 2px;
1148        }
1149
1150        /* Stat capsules grid */
1151        .caps-grid {
1152            display: grid;
1153            grid-template-columns: repeat(3, 1fr);
1154            grid-template-rows: repeat(2, 1fr);
1155            gap: 8px;
1156            height: 100%;
1157        }
1158
1159        .cap {
1160            background: #0A0A0A;
1161            border: 1px solid rgba(255, 255, 255, 0.07);
1162            border-radius: 10px;
1163            padding: 10px 10px 8px;
1164            display: flex;
1165            flex-direction: column;
1166            gap: 4px;
1167            position: relative;
1168            overflow: hidden;
1169        }
1170
1171        .cap-icon {
1172            font-family: 'Material Symbols Rounded';
1173            font-size: 0.9rem;
1174            line-height: 1;
1175            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
1176            font-style: normal;
1177        }
1178
1179        .cap-val {
1180            font-size: 1.12rem;
1181            font-weight: 700;
1182            letter-spacing: -0.03em;
1183            color: #EDEDED;
1184            line-height: 1;
1185        }
1186
1187        .cap-lbl {
1188            font-size: 0.62rem;
1189            color: rgba(255, 255, 255, 0.45);
1190            letter-spacing: 0.01em;
1191        }
1192
1193        /* Balance card (right column) */
1194        .dm-bal-card {
1195            display: flex;
1196            flex-direction: column;
1197            gap: 8px;
1198        }
1199
1200        .bal-ring-wrap {
1201            display: flex;
1202            align-items: center;
1203            justify-content: center;
1204            flex: 1;
1205            padding: 8px 0;
1206        }
1207
1208        .bal-ring {
1209            width: 70px;
1210            height: 70px;
1211            border-radius: 50%;
1212            background: conic-gradient(
1213                rgba(34, 197, 94, 0.7) 0deg 140deg,
1214                rgba(251, 191, 36, 0.6) 140deg 210deg,
1215                rgba(236, 72, 153, 0.5) 210deg 260deg,
1216                rgba(56, 189, 248, 0.4) 260deg 360deg
1217            );
1218            position: relative;
1219        }
1220
1221        .bal-ring::after {
1222            content: '';
1223            position: absolute;
1224            inset: 10px;
1225            border-radius: 50%;
1226            background: #111111;
1227        }
1228
1229        .bal-chip {
1230            display: inline-flex;
1231            align-items: center;
1232            justify-content: center;
1233            background: rgba(156, 168, 184, 0.1);
1234            border: 1px solid rgba(156, 168, 184, 0.2);
1235            color: rgba(156, 168, 184, 0.7);
1236            font-size: 0.58rem;
1237            font-weight: 700;
1238            letter-spacing: 0.08em;
1239            padding: 2px 7px;
1240            border-radius: 100px;
1241            text-transform: uppercase;
1242            align-self: center;
1243        }
1244
1245        /* Most used apps */
1246        .app-row {
1247            display: flex;
1248            align-items: center;
1249            gap: 8px;
1250            margin-bottom: 9px;
1251        }
1252
1253        .app-row:last-child {
1254            margin: 0;
1255        }
1256
1257        .app-ico {
1258            width: 26px;
1259            height: 26px;
1260            border-radius: 7px;
1261            display: flex;
1262            align-items: center;
1263            justify-content: center;
1264            font-size: 0.62rem;
1265            font-weight: 700;
1266            color: #fff;
1267            flex-shrink: 0;
1268        }
1269
1270        .app-ico img {
1271            width: 14px;
1272            height: 14px;
1273            object-fit: contain;
1274        }
1275
1276        .app-info {
1277            flex: 1;
1278            min-width: 0;
1279        }
1280
1281        .app-name {
1282            font-size: 0.7rem;
1283            font-weight: 500;
1284            color: #EDEDED;
1285            white-space: nowrap;
1286            overflow: hidden;
1287            text-overflow: ellipsis;
1288        }
1289
1290        .app-time {
1291            font-size: 0.65rem;
1292            color: rgba(255, 255, 255, 0.45);
1293        }
1294
1295        .app-bar {
1296            height: 2px;
1297            background: rgba(255, 255, 255, 0.06);
1298            border-radius: 100px;
1299            margin-top: 4px;
1300            overflow: hidden;
1301        }
1302
1303        .app-prog {
1304            height: 100%;
1305            border-radius: 100px;
1306            background: rgba(255, 255, 255, 0.35);
1307        }
1308
1309        .app-pct {
1310            font-size: 0.68rem;
1311            font-weight: 600;
1312            color: rgba(255, 255, 255, 0.5);
1313            width: 32px;
1314            text-align: right;
1315            flex-shrink: 0;
1316        }
1317
1318        .app-tag {
1319            font-size: 0.56rem;
1320            font-weight: 600;
1321            padding: 2px 7px;
1322            border-radius: 100px;
1323            white-space: nowrap;
1324            flex-shrink: 0;
1325        }
1326
1327        /* Category items */
1328        .cat-item {
1329            display: flex;
1330            align-items: center;
1331            gap: 8px;
1332            margin-bottom: 9px;
1333        }
1334
1335        .cat-item:last-child {
1336            margin: 0;
1337        }
1338
1339        .cat-dot {
1340            width: 7px;
1341            height: 7px;
1342            border-radius: 2px;
1343            flex-shrink: 0;
1344        }
1345
1346        .cat-info {
1347            flex: 1;
1348            min-width: 0;
1349        }
1350
1351        .cat-name {
1352            font-size: 0.7rem;
1353            font-weight: 500;
1354            color: #EDEDED;
1355        }
1356
1357        .cat-time {
1358            font-size: 0.65rem;
1359            color: rgba(255, 255, 255, 0.45);
1360        }
1361
1362        .cat-pct {
1363            font-size: 0.68rem;
1364            font-weight: 600;
1365            color: rgba(255, 255, 255, 0.6);
1366            letter-spacing: -0.01em;
1367        }
1368
1369        /* ═══════════════════════════════════════════════════
1370           BROWSER TICKER
1371           ═══════════════════════════════════════════════════ */
1372        .browsers {
1373            padding: 56px 0;
1374            overflow: hidden;
1375            border-bottom: 1px solid var(--border);
1376        }
1377
1378        .browsers-label {
1379            text-align: center;
1380            font-size: 0.76rem;
1381            color: var(--text-2);
1382            margin-bottom: 24px;
1383            letter-spacing: 0.04em;
1384        }
1385
1386        .ticker {
1387            display: flex;
1388            gap: 32px;
1389            animation: scroll 30s linear infinite;
1390            width: max-content;
1391            will-change: transform;
1392        }
1393
1394        .ticker-set {
1395            display: flex;
1396            gap: 32px;
1397            align-items: center;
1398        }
1399
1400        .ticker-item {
1401            display: flex;
1402            align-items: center;
1403            gap: 8px;
1404            font-size: 0.78rem;
1405            color: var(--text-3);
1406            white-space: nowrap;
1407            flex-shrink: 0;
1408        }
1409
1410        .ticker-item .ti-icon {
1411            width: 20px;
1412            height: 20px;
1413            flex-shrink: 0;
1414            opacity: 0.8;
1415            transition: opacity 0.2s;
1416        }
1417
1418        .ticker-item:hover .ti-icon {
1419            opacity: 1;
1420        }
1421
1422        .ticker-item .ti-letter {
1423            width: 20px;
1424            height: 20px;
1425            border-radius: 6px;
1426            flex-shrink: 0;
1427            display: flex;
1428            align-items: center;
1429            justify-content: center;
1430            font-size: 0.58rem;
1431            font-weight: 700;
1432            color: rgba(255, 255, 255, 0.9);
1433            opacity: 0.75;
1434            transition: opacity 0.2s;
1435        }
1436
1437        .ticker-item:hover .ti-letter {
1438            opacity: 1;
1439        }
1440
1441        /* Inline SVG browser icons */
1442        .ticker-item .ti-svg {
1443            width: 20px;
1444            height: 20px;
1445            flex-shrink: 0;
1446            opacity: 0.8;
1447            transition: opacity 0.2s;
1448        }
1449
1450        .ticker-item:hover .ti-svg {
1451            opacity: 1;
1452        }
1453
1454        @keyframes scroll {
1455            0% {
1456                transform: translateX(0);
1457            }
1458
1459            100% {
1460                transform: translateX(-50%);
1461            }
1462        }
1463
1464        /* ═══════════════════════════════════════════════════
1465           NUMBERS
1466           ═══════════════════════════════════════════════════ */
1467        .numbers {
1468            padding: 100px 0;
1469        }
1470
1471        .numbers-grid {
1472            display: grid;
1473            grid-template-columns: repeat(4, 1fr);
1474            gap: 1px;
1475            background: var(--border);
1476            border: 1px solid var(--border);
1477            border-radius: 14px;
1478            overflow: hidden;
1479        }
1480
1481        .num-cell {
1482            background: var(--bg);
1483            padding: 48px 24px;
1484            text-align: center;
1485            transition: background 0.3s var(--ease);
1486        }
1487
1488        .num-cell:hover {
1489            background: var(--surface);
1490        }
1491
1492        .num-val {
1493            font-size: clamp(2rem, 3.5vw, 2.8rem);
1494            font-weight: 700;
1495            letter-spacing: -0.04em;
1496            line-height: 1;
1497            margin-bottom: 8px;
1498            font-variant-numeric: tabular-nums;
1499            transition: color 0.3s var(--ease);
1500        }
1501
1502        .num-cell:hover .num-val {
1503            color: var(--primary);
1504        }
1505
1506        .num-label {
1507            font-size: 0.78rem;
1508            color: var(--text-3);
1509        }
1510
1511        /* ═══════════════════════════════════════════════════
1512           HOW IT WORKS
1513           ═══════════════════════════════════════════════════ */
1514        .how {
1515            padding: 120px 0;
1516            border-top: 1px solid var(--border);
1517            position: relative;
1518            overflow: hidden;
1519        }
1520
1521        .how .s-eyebrow {
1522            font-size: 0.7rem;
1523            font-weight: 500;
1524            text-transform: uppercase;
1525            letter-spacing: 0.1em;
1526            color: var(--text-3);
1527            margin-bottom: 12px;
1528        }
1529
1530        .how .s-heading {
1531            font-size: clamp(1.6rem, 3.2vw, 2.4rem);
1532            font-weight: 700;
1533            letter-spacing: -0.04em;
1534            line-height: 1.12;
1535            margin-bottom: 64px;
1536            max-width: 520px;
1537        }
1538
1539        .steps {
1540            display: grid;
1541            grid-template-columns: repeat(3, 1fr);
1542            gap: 40px;
1543        }
1544
1545        .step {
1546            position: relative;
1547        }
1548
1549        .step-num {
1550            display: inline-flex;
1551            align-items: center;
1552            justify-content: center;
1553            width: 28px;
1554            height: 28px;
1555            border-radius: 8px;
1556            background: var(--primary-dim);
1557            border: 1px solid rgba(61, 107, 234, 0.15);
1558            font-size: 0.7rem;
1559            font-weight: 700;
1560            color: var(--primary);
1561            margin-bottom: 16px;
1562        }
1563
1564        .step h3 {
1565            font-size: 0.92rem;
1566            font-weight: 600;
1567            letter-spacing: -0.01em;
1568            margin-bottom: 8px;
1569        }
1570
1571        .step p {
1572            font-size: 0.82rem;
1573            color: var(--text-2);
1574            line-height: 1.6;
1575        }
1576
1577        .step-connector {
1578            position: absolute;
1579            top: 14px;
1580            left: calc(100% + 4px);
1581            width: 32px;
1582            height: 1px;
1583            background: var(--border-2);
1584        }
1585
1586        /* ═══════════════════════════════════════════════════
1587           FEATURES
1588           ═══════════════════════════════════════════════════ */
1589        .features {
1590            padding: 120px 0;
1591            border-top: 1px solid var(--border);
1592            position: relative;
1593            overflow: hidden;
1594        }
1595
1596        .features .s-eyebrow {
1597            font-size: 0.7rem;
1598            font-weight: 500;
1599            text-transform: uppercase;
1600            letter-spacing: 0.1em;
1601            color: var(--text-3);
1602            margin-bottom: 12px;
1603        }
1604
1605        .features .s-heading {
1606            font-size: clamp(1.6rem, 3.2vw, 2.4rem);
1607            font-weight: 700;
1608            letter-spacing: -0.04em;
1609            line-height: 1.12;
1610            margin-bottom: 10px;
1611        }
1612
1613        .features .s-sub {
1614            font-size: 0.92rem;
1615            color: var(--text-2);
1616            max-width: 400px;
1617            line-height: 1.6;
1618            margin-bottom: 56px;
1619        }
1620
1621        .fg {
1622            display: grid;
1623            grid-template-columns: repeat(3, 1fr);
1624            gap: 1px;
1625            background: var(--border);
1626            border: 1px solid var(--border);
1627            border-radius: 16px;
1628            overflow: hidden;
1629        }
1630
1631        .fc {
1632            background: var(--bg);
1633            padding: 32px 26px;
1634            transition: background 0.3s var(--ease);
1635            position: relative;
1636        }
1637
1638        .fc:hover {
1639            background: rgba(15, 15, 18, 0.8);
1640            cursor: pointer;
1641        }
1642
1643        .fc-icon {
1644            width: 36px;
1645            height: 36px;
1646            border-radius: 10px;
1647            display: flex;
1648            align-items: center;
1649            justify-content: center;
1650            margin-bottom: 16px;
1651            background: var(--surface-2);
1652            border: 1px solid var(--border);
1653            transition: border-color 0.3s, background 0.3s;
1654        }
1655
1656        .fc:hover .fc-icon {
1657            border-color: var(--border-2);
1658            background: var(--surface-3);
1659        }
1660
1661        .fc-icon svg {
1662            width: 16px;
1663            height: 16px;
1664            color: var(--text-2);
1665            transition: color 0.3s;
1666        }
1667
1668        /* Feature icon accent colors */
1669        .fc:nth-child(1) .fc-icon {
1670            background: rgba(61, 107, 234, 0.08);
1671            border-color: rgba(61, 107, 234, 0.12);
1672        }
1673
1674        .fc:nth-child(1) .fc-icon svg {
1675            color: #3d6bea;
1676        }
1677
1678        .fc:nth-child(2) .fc-icon {
1679            background: rgba(52, 211, 153, 0.08);
1680            border-color: rgba(52, 211, 153, 0.12);
1681        }
1682
1683        .fc:nth-child(2) .fc-icon svg {
1684            color: #34d399;
1685        }
1686
1687        .fc:nth-child(3) .fc-icon {
1688            background: rgba(251, 191, 36, 0.08);
1689            border-color: rgba(251, 191, 36, 0.12);
1690        }
1691
1692        .fc:nth-child(3) .fc-icon svg {
1693            color: #fbbf24;
1694        }
1695
1696        .fc:nth-child(4) .fc-icon {
1697            background: rgba(244, 114, 182, 0.08);
1698            border-color: rgba(244, 114, 182, 0.12);
1699        }
1700
1701        .fc:nth-child(4) .fc-icon svg {
1702            color: #f472b6;
1703        }
1704
1705        .fc:nth-child(5) .fc-icon {
1706            background: rgba(99, 102, 241, 0.08);
1707            border-color: rgba(99, 102, 241, 0.12);
1708        }
1709
1710        .fc:nth-child(5) .fc-icon svg {
1711            color: #4873f1;
1712        }
1713
1714        .fc:nth-child(6) .fc-icon {
1715            background: rgba(248, 113, 113, 0.08);
1716            border-color: rgba(248, 113, 113, 0.12);
1717        }
1718
1719        .fc:nth-child(6) .fc-icon svg {
1720            color: #f87171;
1721        }
1722
1723        .fc:nth-child(7) .fc-icon {
1724            background: rgba(45, 212, 191, 0.08);
1725            border-color: rgba(45, 212, 191, 0.12);
1726        }
1727
1728        .fc:nth-child(7) .fc-icon svg {
1729            color: #2dd4bf;
1730        }
1731
1732        .fc:nth-child(8) .fc-icon {
1733            background: rgba(56, 189, 248, 0.08);
1734            border-color: rgba(56, 189, 248, 0.12);
1735        }
1736
1737        .fc:nth-child(8) .fc-icon svg {
1738            color: #38bdf8;
1739        }
1740
1741        .fc:nth-child(9) .fc-icon {
1742            background: rgba(168, 85, 247, 0.08);
1743            border-color: rgba(168, 85, 247, 0.12);
1744        }
1745
1746        .fc:nth-child(9) .fc-icon svg {
1747            color: #a855f7;
1748        }
1749
1750        /* Feature card mouse-tracking spotlight */
1751        .fc::before {
1752            content: '';
1753            position: absolute;
1754            inset: 0;
1755            background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(61, 107, 234, 0.06), transparent 40%);
1756            border-radius: inherit;
1757            opacity: 0;
1758            transition: opacity 0.4s var(--ease);
1759            pointer-events: none;
1760            z-index: 0;
1761        }
1762
1763        .fc:hover::before {
1764            opacity: 1;
1765        }
1766
1767        .fc>* {
1768            position: relative;
1769            z-index: 1;
1770        }
1771
1772        /* Floating UI micro-cards */
1773        .float-card {
1774            position: absolute;
1775            background: rgba(15, 15, 18, 0.92);
1776            backdrop-filter: blur(20px);
1777            -webkit-backdrop-filter: blur(20px);
1778            border: 1px solid var(--border-2);
1779            border-radius: 12px;
1780            padding: 14px 18px;
1781            z-index: 1;
1782            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.02);
1783            pointer-events: none;
1784            max-width: 210px;
1785            animation: floatBob 6s ease-in-out infinite;
1786        }
1787
1788        .float-card-1 {
1789            top: 100px;
1790            right: calc(50% - 620px);
1791            --fc-r: 2deg;
1792            transform: rotate(2deg);
1793        }
1794
1795        .float-card-2 {
1796            bottom: 200px;
1797            left: calc(50% - 610px);
1798            --fc-r: -1.5deg;
1799            transform: rotate(-1.5deg);
1800            animation-delay: -3s;
1801        }
1802
1803        @keyframes floatBob {
1804
1805            0%,
1806            100% {
1807                transform: translateY(0) rotate(var(--fc-r, 0deg));
1808            }
1809
1810            50% {
1811                transform: translateY(-8px) rotate(var(--fc-r, 0deg));
1812            }
1813        }
1814
1815        .fcard-top {
1816            display: flex;
1817            align-items: center;
1818            gap: 8px;
1819            margin-bottom: 6px;
1820        }
1821
1822        .fcard-emoji {
1823            font-size: 0.85rem;
1824            line-height: 1;
1825        }
1826
1827        .fcard-title {
1828            font-size: 0.7rem;
1829            font-weight: 600;
1830            color: var(--text);
1831        }
1832
1833        .fcard-desc {
1834            font-size: 0.62rem;
1835            color: var(--text-3);
1836            line-height: 1.45;
1837        }
1838
1839        .fcard-badge {
1840            display: inline-flex;
1841            align-items: center;
1842            gap: 4px;
1843            margin-top: 8px;
1844            font-size: 0.56rem;
1845            font-weight: 600;
1846            padding: 2px 8px;
1847            border-radius: 100px;
1848            letter-spacing: 0.01em;
1849        }
1850
1851        .fcard-badge-gold {
1852            background: rgba(251, 191, 36, 0.1);
1853            color: rgba(251, 191, 36, 0.85);
1854            border: 1px solid rgba(251, 191, 36, 0.1);
1855        }
1856
1857        .fcard-badge-green {
1858            background: var(--green-dim);
1859            color: rgba(52, 211, 153, 0.85);
1860            border: 1px solid rgba(52, 211, 153, 0.1);
1861        }
1862
1863        /* Section gradient orbs */
1864        .how::before,
1865        .features::before {
1866            content: '';
1867            position: absolute;
1868            width: 600px;
1869            height: 600px;
1870            border-radius: 50%;
1871            pointer-events: none;
1872            filter: blur(100px);
1873            opacity: 0.035;
1874        }
1875
1876        .how,
1877        .features {
1878            overflow-x: clip;
1879        }
1880
1881        .how::before {
1882            top: 10%;
1883            right: -200px;
1884            background: radial-gradient(circle, #3d6bea, transparent 70%);
1885        }
1886
1887        .features::before {
1888            top: 30%;
1889            left: -200px;
1890            background: radial-gradient(circle, #a855f7, transparent 70%);
1891        }
1892
1893        @media (max-width: 1280px) {
1894            .float-card {
1895                display: none;
1896            }
1897        }
1898
1899        .fc h3 {
1900            font-size: 0.88rem;
1901            font-weight: 600;
1902            letter-spacing: -0.01em;
1903            margin-bottom: 7px;
1904        }
1905
1906        .fc p {
1907            font-size: 0.8rem;
1908            color: var(--text-2);
1909            line-height: 1.6;
1910        }
1911
1912        /* ═══════════════════════════════════════════════════
1913           AUDIENCE / USE CASES
1914           ═══════════════════════════════════════════════════ */
1915        .audience {
1916            padding: 76px 0;
1917            border-top: 1px solid var(--border);
1918        }
1919
1920        .audience-grid {
1921            margin-top: 34px;
1922            display: grid;
1923            grid-template-columns: repeat(2, minmax(0, 1fr));
1924            gap: 14px;
1925        }
1926
1927        .aud-card {
1928            background: var(--surface);
1929            border: 1px solid var(--border);
1930            border-radius: 14px;
1931            padding: 18px 18px 16px;
1932            transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
1933        }
1934
1935        .aud-card:hover {
1936            border-color: rgba(255, 255, 255, 0.18);
1937            transform: translateY(-2px);
1938        }
1939
1940        .aud-card h3 {
1941            font-size: 0.94rem;
1942            letter-spacing: -0.01em;
1943            color: var(--text);
1944            margin-bottom: 6px;
1945        }
1946
1947        .aud-card p {
1948            font-size: 0.82rem;
1949            color: var(--text-2);
1950            line-height: 1.6;
1951        }
1952
1953        /* ═══════════════════════════════════════════════════
1954           PRIVACY
1955           ═══════════════════════════════════════════════════ */
1956        .privacy {
1957            padding: 80px 0;
1958            border-top: 1px solid var(--border);
1959        }
1960
1961        .priv-layout {
1962            display: grid;
1963            grid-template-columns: 1fr 1fr;
1964            gap: 60px;
1965            align-items: start;
1966        }
1967
1968        .priv-left .s-eyebrow {
1969            font-size: 0.7rem;
1970            font-weight: 500;
1971            text-transform: uppercase;
1972            letter-spacing: 0.1em;
1973            color: var(--text-3);
1974            margin-bottom: 12px;
1975        }
1976
1977        .priv-left .s-heading {
1978            font-size: clamp(1.6rem, 3.2vw, 2.4rem);
1979            font-weight: 700;
1980            letter-spacing: -0.04em;
1981            line-height: 1.12;
1982            margin-bottom: 10px;
1983        }
1984
1985        .priv-left .s-sub {
1986            font-size: 0.92rem;
1987            color: var(--text-2);
1988            line-height: 1.6;
1989            margin-bottom: 32px;
1990        }
1991
1992        .checks {
1993            display: flex;
1994            flex-direction: column;
1995            gap: 16px;
1996        }
1997
1998        .check-item {
1999            display: flex;
2000            align-items: flex-start;
2001            gap: 12px;
2002        }
2003
2004        .check-box {
2005            width: 22px;
2006            height: 22px;
2007            border-radius: 7px;
2008            background: var(--green-dim);
2009            border: 1px solid rgba(52, 211, 153, 0.15);
2010            display: flex;
2011            align-items: center;
2012            justify-content: center;
2013            flex-shrink: 0;
2014            margin-top: 1px;
2015        }
2016
2017        .check-box svg {
2018            width: 12px;
2019            height: 12px;
2020            color: var(--green);
2021        }
2022
2023        .check-text {
2024            font-size: 0.84rem;
2025            line-height: 1.55;
2026        }
2027
2028        .check-text strong {
2029            display: block;
2030            font-weight: 600;
2031            margin-bottom: 2px;
2032        }
2033
2034        .check-text span {
2035            color: var(--text-3);
2036            font-size: 0.78rem;
2037        }
2038
2039        /* Privacy comparison visual */
2040        .priv-visual {
2041            display: flex;
2042            flex-direction: column;
2043            gap: 16px;
2044        }
2045
2046        .priv-compare {
2047            background: var(--surface);
2048            border: 1px solid var(--border-2);
2049            border-radius: 14px;
2050            padding: 22px 24px;
2051            transition: border-color 0.3s;
2052        }
2053
2054        .priv-compare:hover {
2055            border-color: rgba(255, 255, 255, 0.12);
2056        }
2057
2058        .pc-header {
2059            display: flex;
2060            align-items: center;
2061            gap: 8px;
2062            margin-bottom: 18px;
2063        }
2064
2065        .pc-badge {
2066            font-size: 0.62rem;
2067            font-weight: 600;
2068            text-transform: uppercase;
2069            letter-spacing: 0.08em;
2070            padding: 3px 10px;
2071            border-radius: 100px;
2072        }
2073
2074        .pc-badge-muted {
2075            background: rgba(239, 68, 68, 0.08);
2076            color: rgba(239, 68, 68, 0.7);
2077            border: 1px solid rgba(239, 68, 68, 0.1);
2078        }
2079
2080        .pc-badge-green {
2081            background: var(--green-dim);
2082            color: rgba(52, 211, 153, 0.85);
2083            border: 1px solid rgba(52, 211, 153, 0.12);
2084        }
2085
2086        .pc-flow {
2087            display: flex;
2088            align-items: center;
2089            gap: 14px;
2090            flex-wrap: nowrap;
2091        }
2092
2093        .pc-source {
2094            display: flex;
2095            align-items: center;
2096            gap: 8px;
2097            min-width: 100px;
2098            flex-shrink: 0;
2099        }
2100
2101        .pc-source-icon {
2102            width: 32px;
2103            height: 32px;
2104            border-radius: 9px;
2105            display: flex;
2106            align-items: center;
2107            justify-content: center;
2108            flex-shrink: 0;
2109        }
2110
2111        .pc-source-icon svg {
2112            width: 16px;
2113            height: 16px;
2114        }
2115
2116        .pc-source span {
2117            font-size: 0.74rem;
2118            font-weight: 500;
2119        }
2120
2121        .pc-trail {
2122            flex: 1;
2123            display: flex;
2124            flex-direction: column;
2125            gap: 6px;
2126        }
2127
2128        .pc-line {
2129            display: flex;
2130            align-items: center;
2131            gap: 8px;
2132            font-size: 0.68rem;
2133            color: var(--text-3);
2134        }
2135
2136        .pc-line .ar {
2137            flex-shrink: 0;
2138            font-size: 0.62rem;
2139            color: var(--text-3);
2140            opacity: 0.4;
2141            font-family: 'SF Mono', monospace;
2142        }
2143
2144        .pc-line .pc-dest {
2145            padding: 3px 10px;
2146            border-radius: 6px;
2147            font-size: 0.66rem;
2148            white-space: nowrap;
2149        }
2150
2151        .pc-others .pc-dest {
2152            background: rgba(239, 68, 68, 0.06);
2153            color: rgba(239, 68, 68, 0.6);
2154            border: 1px solid rgba(239, 68, 68, 0.06);
2155        }
2156
2157        .pc-deskly .pc-dest {
2158            background: var(--green-dim);
2159            color: rgba(52, 211, 153, 0.75);
2160            border: 1px solid rgba(52, 211, 153, 0.08);
2161        }
2162
2163        .priv-deskly {
2164            border-color: rgba(52, 211, 153, 0.12);
2165        }
2166
2167        .priv-deskly:hover {
2168            border-color: rgba(52, 211, 153, 0.2);
2169        }
2170
2171        .pc-bottom {
2172            margin-top: 16px;
2173            padding-top: 14px;
2174            border-top: 1px solid var(--border);
2175            font-size: 0.74rem;
2176            color: var(--text-2);
2177            line-height: 1.55;
2178        }
2179
2180        .pc-bottom strong {
2181            color: var(--text);
2182            font-weight: 600;
2183        }
2184
2185        .pc-tags {
2186            display: flex;
2187            gap: 6px;
2188            flex-wrap: wrap;
2189            margin-top: 12px;
2190        }
2191
2192        .pc-tag {
2193            font-size: 0.62rem;
2194            padding: 2px 8px;
2195            border-radius: 4px;
2196            background: var(--green-dim);
2197            border: 1px solid rgba(52, 211, 153, 0.08);
2198            color: rgba(52, 211, 153, 0.7);
2199            font-weight: 500;
2200            letter-spacing: 0.01em;
2201        }
2202
2203        /* ═══════════════════════════════════════════════════
2204           EDITORIAL STATEMENT / MANIFESTO
2205           ═══════════════════════════════════════════════════ */
2206        .statement {
2207            padding: 80px 0;
2208            border-top: 1px solid var(--border);
2209            border-bottom: 1px solid var(--border);
2210            text-align: center;
2211            position: relative;
2212            overflow: hidden;
2213        }
2214
2215        .statement::before {
2216            content: '';
2217            position: absolute;
2218            top: 50%;
2219            left: 50%;
2220            translate: -50% -50%;
2221            width: 800px;
2222            height: 500px;
2223            border-radius: 50%;
2224            background: radial-gradient(ellipse, rgba(61, 107, 234, 0.04) 0%, transparent 55%);
2225            pointer-events: none;
2226        }
2227
2228        .statement-text {
2229            font-family: 'Instrument Serif', Georgia, serif;
2230            font-size: clamp(2rem, 4.5vw, 3.5rem);
2231            font-weight: 400;
2232            font-style: italic;
2233            line-height: 1.2;
2234            letter-spacing: -0.02em;
2235            color: var(--text);
2236            max-width: 720px;
2237            margin: 0 auto 24px;
2238        }
2239
2240        .statement-text .st-em {
2241            color: var(--primary);
2242        }
2243
2244        .statement-sub {
2245            font-size: 0.88rem;
2246            color: var(--text-3);
2247            max-width: 440px;
2248            margin: 0 auto;
2249            line-height: 1.6;
2250        }
2251
2252        .statement-rule {
2253            width: 48px;
2254            height: 1px;
2255            background: linear-gradient(90deg, transparent, var(--primary), transparent);
2256            margin: 0 auto 28px;
2257            opacity: 0.5;
2258        }
2259
2260        /* ═══════════════════════════════════════════════════
2261           CTA
2262           ═══════════════════════════════════════════════════ */
2263        .cta {
2264            padding: 80px 0 100px;
2265            text-align: center;
2266            position: relative;
2267        }
2268
2269        .cta::before {
2270            content: '';
2271            position: absolute;
2272            top: 40%;
2273            left: 50%;
2274            translate: -50% -50%;
2275            width: 800px;
2276            height: 600px;
2277            border-radius: 50%;
2278            background: radial-gradient(ellipse, rgba(61, 107, 234, 0.05) 0%, transparent 55%);
2279            pointer-events: none;
2280        }
2281
2282        .cta h2 {
2283            font-size: clamp(2.2rem, 4.5vw, 3.8rem);
2284            font-weight: 700;
2285            letter-spacing: -0.05em;
2286            line-height: 1.04;
2287            margin-bottom: 20px;
2288        }
2289
2290        .cta h2 .serif-em {
2291            font-family: 'Instrument Serif', Georgia, serif;
2292            font-style: italic;
2293            font-weight: 400;
2294            letter-spacing: -0.02em;
2295        }
2296
2297        .cta .sub {
2298            font-size: 1rem;
2299            color: var(--text-2);
2300            max-width: 400px;
2301            margin: 0 auto 40px;
2302            line-height: 1.6;
2303        }
2304
2305        /* ═══════════════════════════════════════════════════
2306           FOOTER
2307           ═══════════════════════════════════════════════════ */
2308        footer {
2309            padding: 60px 0;
2310            background: rgba(15, 15, 18, 0.4);
2311        }
2312
2313        .footer-inner {
2314            display: flex;
2315            justify-content: space-between;
2316            align-items: flex-start;
2317            gap: 28px;
2318        }
2319
2320        .footer-left {
2321            display: flex;
2322            align-items: center;
2323            gap: 16px;
2324            flex: 0 0 auto;
2325        }
2326
2327        .footer-logo {
2328            display: flex;
2329            align-items: center;
2330            gap: 8px;
2331            font-weight: 600;
2332            font-size: 0.9rem;
2333            color: var(--text-2);
2334        }
2335
2336        .footer-logo .fl-icon {
2337            width: 24px;
2338            height: 24px;
2339            border-radius: 6px;
2340            overflow: hidden;
2341        }
2342
2343        .footer-logo .fl-icon svg {
2344            width: 100%;
2345            height: 100%;
2346            display: block;
2347        }
2348
2349        .footer-copy {
2350            font-size: 0.8rem;
2351            color: var(--text-3);
2352            display: flex;
2353            align-items: center;
2354            gap: 6px;
2355        }
2356
2357        .footer-sep {
2358            width: 1px;
2359            height: 16px;
2360            background: var(--border);
2361        }
2362
2363        .footer-links {
2364            display: flex;
2365            flex-wrap: wrap;
2366            justify-content: flex-end;
2367            gap: 12px 20px;
2368            margin-left: auto;
2369            max-width: 760px;
2370        }
2371
2372        .footer-links a {
2373            font-size: 0.8rem;
2374            color: var(--text-3);
2375            transition: color 0.2s;
2376            white-space: nowrap;
2377            line-height: 1.45;
2378        }
2379
2380        .footer-links a:hover {
2381            color: var(--text);
2382        }
2383
2384        /* ═══════════════════════════════════════════════════
2385           ANIMATIONS
2386           ═══════════════════════════════════════════════════ */
2387        @keyframes fadeUp {
2388            from {
2389                opacity: 0;
2390                transform: translateY(24px);
2391            }
2392
2393            to {
2394                opacity: 1;
2395                transform: translateY(0);
2396            }
2397        }
2398
2399        .reveal {
2400            opacity: 0;
2401            transform: translateY(24px);
2402            transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
2403        }
2404
2405        .reveal.visible {
2406            opacity: 1;
2407            transform: translateY(0);
2408        }
2409
2410        /* Stagger delays */
2411        .reveal[data-d="1"] {
2412            transition-delay: 0.06s;
2413        }
2414
2415        .reveal[data-d="2"] {
2416            transition-delay: 0.12s;
2417        }
2418
2419        .reveal[data-d="3"] {
2420            transition-delay: 0.18s;
2421        }
2422
2423        .reveal[data-d="4"] {
2424            transition-delay: 0.24s;
2425        }
2426
2427        /* Hero immediate animation (no IO needed) */
2428        .hero-anim {
2429            animation: fadeUp 0.7s var(--ease) both;
2430        }
2431
2432        .hero-anim[data-d="1"] {
2433            animation-delay: 0.08s;
2434        }
2435
2436        .hero-anim[data-d="2"] {
2437            animation-delay: 0.16s;
2438        }
2439
2440        .hero-anim[data-d="3"] {
2441            animation-delay: 0.24s;
2442        }
2443
2444        .hero-anim[data-d="4"] {
2445            animation-delay: 0.32s;
2446        }
2447
2448        .hero-anim[data-d="5"] {
2449            animation-delay: 0.40s;
2450        }
2451
2452        /* ═══════════════════════════════════════════════════
2453           RESPONSIVE
2454           ═══════════════════════════════════════════════════ */
2455
2456        /* ── Tablet ≤960px ── */
2457        @media (max-width: 960px) {
2458            .sb {
2459                display: none;
2460            }
2461
2462            /* Dashboard: 2-col layout, hide balance card */
2463            .dm-grid {
2464                grid-template-columns: 1fr 1fr;
2465                grid-template-rows: auto auto;
2466                grid-template-areas:
2467                    "hero caps"
2468                    "recent cats";
2469                gap: 10px;
2470            }
2471
2472            .dm-area-bal {
2473                display: none;
2474            }
2475
2476            .fg {
2477                grid-template-columns: 1fr 1fr;
2478            }
2479
2480            .numbers-grid {
2481                grid-template-columns: repeat(2, 1fr);
2482            }
2483
2484            .steps {
2485                grid-template-columns: 1fr;
2486                gap: 24px;
2487            }
2488
2489            .step-connector {
2490                display: none;
2491            }
2492
2493            .priv-layout {
2494                grid-template-columns: 1fr;
2495                gap: 36px;
2496            }
2497        }
2498
2499        /* ── Mobile ≤640px ── */
2500        @media (max-width: 640px) {
2501            /* Container */
2502            .container {
2503                padding: 0 16px;
2504            }
2505
2506            nav .inner {
2507                padding: 0 12px;
2508                min-width: 0;
2509            }
2510
2511            .logo {
2512                font-size: 0.9rem;
2513                gap: 8px;
2514            }
2515
2516            .logo-icon {
2517                width: 24px;
2518                height: 24px;
2519                border-radius: 7px;
2520            }
2521
2522            /* Nav: compact + show burger */
2523            nav {
2524                padding: 10px 12px;
2525            }
2526
2527            nav .nav-links {
2528                display: none;
2529            }
2530
2531            .burger {
2532                display: flex;
2533            }
2534
2535            /* Reduce nav blur cost on mobile */
2536            nav.scrolled {
2537                backdrop-filter: blur(10px) saturate(1.2);
2538                -webkit-backdrop-filter: blur(10px) saturate(1.2);
2539            }
2540
2541            /* Hero: tighter vertical rhythm */
2542            .hero {
2543                padding: 108px 0 32px;
2544            }
2545
2546            .hero h1 {
2547                font-size: clamp(2rem, 9vw, 2.8rem);
2548                letter-spacing: -0.04em;
2549                margin-bottom: 20px;
2550            }
2551
2552            .hero .sub {
2553                font-size: 0.92rem;
2554                margin-bottom: 28px;
2555            }
2556
2557            .hero-badge {
2558                font-size: 0.7rem;
2559                margin-bottom: 20px;
2560            }
2561
2562            /* Stacked CTA buttons — full width for easy tap */
2563            .hero-actions {
2564                flex-direction: column;
2565                align-items: stretch;
2566                gap: 8px;
2567            }
2568
2569            .btn {
2570                justify-content: center;
2571                min-height: 46px;
2572                font-size: 0.9rem;
2573            }
2574
2575            /* Mockup section: trim top padding, shorten fade gradient */
2576            .mockup-section {
2577                padding: 48px 0 0;
2578            }
2579
2580            .mockup-section::after {
2581                height: 100px;
2582            }
2583
2584            /* Tab switcher: bleed full-width and scroll instead of overflowing */
2585            .mockup-tabs-wrapper {
2586                justify-content: flex-start;
2587                max-width: calc(100% + 32px);
2588                margin: 0 -16px 20px;
2589                padding: 0 16px;
2590                mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
2591                -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
2592            }
2593
2594            .mockup-tabs {
2595                padding: 8px 16px 10px;
2596                gap: 2px;
2597            }
2598
2599            .mtab {
2600                padding: 7px 14px;
2601                font-size: 0.72rem;
2602                gap: 6px;
2603            }
2604
2605            .mtab-icon {
2606                font-size: 1rem;
2607            }
2608
2609            /* Dashboard panel: compact padding */
2610            .dm {
2611                padding: 14px 14px 12px;
2612                gap: 10px;
2613            }
2614
2615            .dm-greeting {
2616                font-size: 0.9rem;
2617            }
2618
2619            .dm-date {
2620                font-size: 0.65rem;
2621            }
2622
2623            /* Dashboard grid: compact gap (stays 2-col from ≤960px rule) */
2624            .dm-grid {
2625                gap: 8px;
2626            }
2627
2628            /* Ring: slightly smaller in half-width column */
2629            .ring-wrap {
2630                width: 88px;
2631                height: 88px;
2632            }
2633
2634            .ring-val {
2635                font-size: 0.95rem;
2636            }
2637
2638            .ring-fill {
2639                stroke-dasharray: 245;
2640                stroke-dashoffset: 74;
2641            }
2642
2643            /* Caps: compact */
2644            .caps-grid {
2645                gap: 6px;
2646            }
2647
2648            .cap {
2649                padding: 8px 8px 6px;
2650            }
2651
2652            .cap-val {
2653                font-size: 0.95rem;
2654            }
2655
2656            .cap-lbl {
2657                font-size: 0.5rem;
2658            }
2659
2660            /* Browsers ticker */
2661            .browsers {
2662                padding: 36px 0;
2663            }
2664
2665            /* Numbers: compact rows */
2666            .numbers {
2667                padding: 56px 0;
2668            }
2669
2670            .num-cell {
2671                padding: 32px 14px;
2672            }
2673
2674            /* Sections: tighter padding */
2675            .features,
2676            .privacy,
2677            .how,
2678            .audience {
2679                padding: 64px 0;
2680            }
2681
2682            .how .s-heading,
2683            .features .s-heading {
2684                margin-bottom: 36px;
2685            }
2686
2687            .features .s-sub {
2688                margin-bottom: 36px;
2689            }
2690
2691            /* Features: single column */
2692            .fg {
2693                grid-template-columns: 1fr;
2694            }
2695
2696            .fc {
2697                padding: 24px 20px;
2698            }
2699
2700            /* Steps */
2701            .steps {
2702                grid-template-columns: 1fr;
2703                gap: 20px;
2704            }
2705
2706            .audience-grid {
2707                grid-template-columns: 1fr;
2708            }
2709
2710            /* Privacy */
2711            .priv-layout {
2712                grid-template-columns: 1fr;
2713                gap: 28px;
2714            }
2715
2716            .priv-compare {
2717                padding: 18px 16px;
2718            }
2719
2720            .pc-flow {
2721                flex-direction: column;
2722                align-items: flex-start;
2723                gap: 10px;
2724            }
2725
2726            .pc-source {
2727                width: 100%;
2728            }
2729
2730            /* Statement */
2731            .statement {
2732                padding: 56px 0;
2733            }
2734
2735            .statement-text {
2736                font-size: clamp(1.5rem, 6vw, 2rem);
2737                letter-spacing: -0.02em;
2738            }
2739
2740            .statement-sub {
2741                font-size: 0.82rem;
2742            }
2743
2744            /* CTA */
2745            .cta {
2746                padding: 64px 0 72px;
2747            }
2748
2749            .cta h2 {
2750                font-size: clamp(1.9rem, 8vw, 2.8rem);
2751            }
2752
2753            .cta .sub {
2754                font-size: 0.9rem;
2755                margin-bottom: 28px;
2756            }
2757
2758            .footer-inner {
2759                flex-direction: column;
2760                gap: 24px;
2761                text-align: center;
2762            }
2763
2764            .footer-left {
2765                justify-content: center;
2766                flex-wrap: wrap;
2767            }
2768
2769            .footer-links {
2770                width: 100%;
2771                justify-content: center;
2772                flex-wrap: wrap;
2773            }
2774
2775            /* Performance: disable grain overlay on mobile (saves a composite layer) */
2776            body::before {
2777                display: none;
2778            }
2779        }
2780
2781        /* ── Small phones ≤480px ── */
2782        @media (max-width: 480px) {
2783            nav .inner {
2784                padding: 0 10px;
2785            }
2786
2787            .logo {
2788                font-size: 0.86rem;
2789                gap: 7px;
2790            }
2791
2792            .logo-icon {
2793                width: 22px;
2794                height: 22px;
2795                border-radius: 6px;
2796            }
2797
2798            .hero {
2799                padding: 96px 0 28px;
2800            }
2801
2802            .hero h1 {
2803                font-size: clamp(1.75rem, 9.5vw, 2.4rem);
2804            }
2805
2806            .hero .sub {
2807                font-size: 0.875rem;
2808            }
2809
2810            .hero-badge {
2811                font-size: 0.65rem;
2812            }
2813
2814            /* Dashboard: single column — each card gets full width */
2815            .dm-grid {
2816                grid-template-columns: 1fr;
2817                grid-template-areas:
2818                    "hero"
2819                    "caps"
2820                    "recent"
2821                    "cats";
2822                gap: 8px;
2823            }
2824
2825            /* Ring: center at full card width */
2826            .dm-ring-card {
2827                padding: 16px;
2828            }
2829
2830            /* Numbers */
2831            .numbers-grid {
2832                grid-template-columns: repeat(1, 1fr);
2833            }
2834
2835            .num-cell {
2836                padding: 24px 12px;
2837            }
2838
2839            .num-val {
2840                font-size: 1.75rem;
2841            }
2842
2843            /* Section headings */
2844            .how .s-heading,
2845            .features .s-heading,
2846            .priv-left .s-heading {
2847                font-size: 1.5rem;
2848            }
2849
2850            /* Statement */
2851            .statement-text {
2852                font-size: clamp(1.35rem, 7.5vw, 1.85rem);
2853            }
2854
2855            /* CTA */
2856            .cta h2 {
2857                font-size: clamp(1.65rem, 9vw, 2.2rem);
2858            }
2859
2860            /* Mob menu links: slightly larger tap targets */
2861            .mob-menu a {
2862                font-size: 1.1rem;
2863                padding: 16px 28px;
2864            }
2865
2866            .mob-menu .is-disabled {
2867                font-size: 1.1rem;
2868                padding: 16px 28px;
2869            }
2870        }
2871
2872        /* ── Reduced motion: respect user preference ── */
2873        @media (prefers-reduced-motion: reduce) {
2874            .ticker {
2875                animation-play-state: paused;
2876            }
2877
2878            .reveal {
2879                opacity: 1;
2880                transform: none;
2881                transition: none;
2882            }
2883
2884            .hero-anim {
2885                animation: none;
2886                opacity: 1;
2887                transform: none;
2888            }
2889
2890            .sb-tracking-dot,
2891            .hero-badge .dot::after,
2892            .dm-pulse {
2893                animation: none;
2894            }
2895
2896            .hero h1 .gradient {
2897                animation: none;
2898            }
2899
2900            .float-card {
2901                animation: none;
2902            }
2903        }
2904
2905        @supports not (overflow: clip) {
2906            html,
2907            body,
2908            nav,
2909            .hero,
2910            .how,
2911            .features {
2912                overflow-x: hidden;
2913            }
2914        }
2915
2916        /* Mobile menu */
2917        body.mob-menu-open {
2918            overflow: hidden;
2919        }
2920
2921        .mob-menu {
2922            display: none;
2923            position: fixed;
2924            inset: 0;
2925            z-index: 200;
2926            background: rgba(9, 9, 11, 0.97);
2927            backdrop-filter: blur(20px);
2928            -webkit-backdrop-filter: blur(20px);
2929            flex-direction: column;
2930            align-items: center;
2931            justify-content: center;
2932            gap: 6px;
2933            animation: fadeIn 0.3s var(--ease);
2934        }
2935
2936        .mob-menu.open {
2937            display: flex;
2938        }
2939
2940        @keyframes fadeIn {
2941            from {
2942                opacity: 0;
2943            }
2944
2945            to {
2946                opacity: 1;
2947            }
2948        }
2949
2950        .mob-menu a {
2951            font-size: 1rem;
2952            color: var(--text-2);
2953            padding: 14px 28px;
2954            border-radius: 8px;
2955            transition: color 0.15s, background 0.15s;
2956        }
2957
2958        .mob-menu .is-disabled {
2959            font-size: 1rem;
2960            color: var(--text-3);
2961            padding: 14px 28px;
2962            border-radius: 8px;
2963        }
2964
2965        .mob-menu a:hover {
2966            color: var(--text);
2967            background: rgba(255, 255, 255, 0.04);
2968        }
2969
2970        .mob-menu a:focus-visible {
2971            outline: 2px solid var(--primary);
2972            outline-offset: 2px;
2973        }
2974
2975        .mob-close {
2976            position: absolute;
2977            top: 16px;
2978            right: 24px;
2979            background: none;
2980            border: none;
2981            cursor: pointer;
2982            color: var(--text-2);
2983            padding: 8px;
2984            border-radius: 6px;
2985            transition: background-color 0.2s var(--ease);
2986        }
2987
2988        .mob-close:hover {
2989            background-color: rgba(255, 255, 255, 0.05);
2990        }
2991
2992        .mob-close:focus-visible {
2993            outline: 2px solid var(--primary);
2994            outline-offset: 2px;
2995        }
2996
2997        .mob-close svg {
2998            width: 22px;
2999            height: 22px;
3000        }
3001    </style>
3002    
3002<script src="/js/analytics.js"></script>
3002
3003    
3003<script type="module" src="https://get.microsoft.com/badge/ms-store-badge.bundled.js"></script>
3003
3004</head>
3005
3006<body>
3007
3008    <!-- Skip to content -->
3009    <a href="#main-content" class="skip-link">Skip to content</a>
3010
3011    <!-- SVG defs -->
3012    <svg style="position:absolute;width:0;height:0" aria-hidden="true">
3013        <defs>
3014            <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
3015                <stop offset="0%" stop-color="#FFFFFF" />
3016                <stop offset="100%" stop-color="#9CA8B8" />
3017            </linearGradient>
3018        </defs>
3019    </svg>
3020
3021    <!-- Logo SVG template (reused) -->
3022
3023    <!-- ── NAV ───────────────────────────────────── -->
3024    <nav id="nav" aria-label="Main">
3025        <div class="inner">
3026            <a href="/" class="logo" aria-label="Deskly home">
3027                <div class="logo-icon">
3028                    <img src="/assets/icon.svg" alt="Deskly" width="28" height="28" />
3029                </div>
3030                Deskly
3031            </a>
3032
3033            <div class="nav-links">
3034                <a href="/how-it-works" aria-label="Learn how it works">How it works</a>
3035                <a href="/#use-cases" aria-label="Who Deskly is for">Who it's for</a>
3036                <a href="/features" aria-label="View features">Features</a>
3037                <a href="/solutions" aria-label="Browse solutions">Solutions</a>
3038                <a href="/security" aria-label="Privacy and security">Security</a>
3039                <a href="/blog" aria-label="Deskly blog">Blog</a>
3040                <a href="/account" data-auth-link data-auth-label aria-label="Sign in to your account">Sign in</a>
3041                <a href="/download/windows?source=nav" class="nav-cta" data-analytics-event="web.cta.clicked" data-analytics-source="nav">Get from Microsoft Store</a>
3042            </div>
3043
3044            <button class="burger" aria-label="Open navigation menu" aria-expanded="false" aria-controls="mobile-menu"
3045                aria-haspopup="dialog">
3046                <span></span>
3047            </button>
3048        </div>
3049    </nav>
3050
3051    <!-- Mobile menu -->
3052    <div id="mobile-menu" class="mob-menu" role="dialog" aria-modal="true" aria-label="Navigation menu" aria-hidden="true"
3053        tabindex="-1">
3054        <button class="mob-close" aria-label="Close navigation menu">
3055            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
3056                <line x1="18" y1="6" x2="6" y2="18" />
3057                <line x1="6" y1="6" x2="18" y2="18" />
3058            </svg>
3059        </button>
3060        <a href="/how-it-works" aria-label="Learn how it works">How it works</a>
3061        <a href="/#use-cases" aria-label="Who Deskly is for">Who it's for</a>
3062        <a href="/features" aria-label="View features">Features</a>
3063        <a href="/solutions" aria-label="Browse solutions">Solutions</a>
3064        <a href="/security" aria-label="Privacy and security">Security</a>
3065        <a href="/blog" aria-label="Deskly blog">Blog</a>
3066        <a href="/account" data-auth-link data-auth-label aria-label="Sign in to your account">Sign in</a>
3067        <a href="/download/windows?source=mobile_menu" data-analytics-event="web.cta.clicked" data-analytics-source="mobile_menu">Get from Microsoft Store</a>
3068    </div>
3069
3070    <main id="main-content">
3071    <!-- ── HERO ──────────────────────────────────── -->
3072    <section class="hero">
3073        <div class="container">
3074            <h1 class="hero-anim" data-d="2">Your complete<br><span class="gradient serif-em">digital wellbeing</span> system</h1>
3075
3076            <p class="sub hero-anim" data-d="3">Track everything. Understand patterns. Build better habits. App limits, app locks, widgets, focus mode, timeline view, and browser intelligence—all working together on Windows.</p>
3077
3078            <div class="hero-actions hero-anim" data-d="4">
3079                <ms-store-badge
3080    productid="9N3XS93TJ82Q"
3081    productname="Deskly - Screen Time, App Lock, Widgets & More"
3082    window-mode="direct"
3083    theme="auto"
3084    size="large"
3085    language="en-us"
3086    animation="on">
3087    <a href="ms-windows-store://pdp/?ProductId=9N3XS93TJ82Q" class="ms-store-badge-fallback" data-analytics-event="web.cta.clicked" data-analytics-source="web_badge">
3088        <img src="https://get.microsoft.com/images/en-us%20dark.svg" alt="Get it from Microsoft Store" />
3089    </a>
3090</ms-store-badge>
3091                <a href="/how-it-works" class="btn btn-ghost" aria-label="Learn how it works">See how it works</a>
3092            </div>
3093
3094
3095        </div>
3096    </section>
3097
3098    <!-- ── APP WINDOW ────────────────────────────── -->
3099    <section class="mockup-section">
3100        <video class="mockup-video" loop muted playsinline preload="none" data-src="/videos/mockup-bg.mp4"></video>
3101        <div class="container" style="position: relative; z-index: 3;">
3102            <!-- Cutout Tabs -->
3103            <div class="mockup-tabs-wrapper reveal">
3104                <div class="mockup-tabs">
3105                    <div class="mtab active" data-target="pane-dashboard">
3106                        <span class="mtab-icon">dashboard</span>
3107                        <span>Dashboard</span>
3108                    </div>
3109                    <div class="mtab" data-target="pane-apps">
3110                        <span class="mtab-icon">apps</span>
3111                        <span>App usage</span>
3112                    </div>
3113                    <div class="mtab" data-target="pane-websites">
3114                        <span class="mtab-icon">public</span>
3115                        <span>Websites</span>
3116                    </div>
3117                    <div class="mtab" data-target="pane-limits">
3118                        <span class="mtab-icon">timer</span>
3119                        <span>Limits</span>
3120                    </div>
3121                    <div class="mtab" data-target="pane-timeline">
3122                        <span class="mtab-icon">timeline</span>
3123                        <span>Timeline</span>
3124                    </div>
3125                    <div class="mtab" data-target="pane-widgets">
3126                        <span class="mtab-icon">widgets</span>
3127                        <span>Widgets</span>
3128                    </div>
3129                </div>
3130            </div>
3131
3132            <div class="window reveal" aria-hidden="true">
3133                <div class="tb">
3134                    <div class="tb-drag">
3135                        <span class="tb-title-text">Deskly</span>
3136                        <div class="sb-tracking-status">
3137                            <span class="sb-tracking-dot"></span>
3138                            <span class="sb-tracking-label">Tracking active</span>
3139                        </div>
3140                    </div>
3141                    <div class="tb-win-controls">
3142                        <button class="tb-wbtn" aria-label="Minimize" tabindex="-1">
3143                            <svg viewBox="0 0 10 10"><line x1="1" y1="5" x2="9" y2="5"/></svg>
3144                        </button>
3145                        <button class="tb-wbtn" aria-label="Maximize" tabindex="-1">
3146                            <svg viewBox="0 0 10 10"><rect x="1.5" y="1.5" width="7" height="7" rx="0.5"/></svg>
3147                        </button>
3148                        <button class="tb-wbtn close" aria-label="Close" tabindex="-1">
3149                            <svg viewBox="0 0 10 10"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5"/></svg>
3150                        </button>
3151                    </div>
3152                </div>
3153                <div class="wb">
3154                    <!-- Dashboard Pane -->
3155                    <div class="dm mockup-pane active" id="pane-dashboard">
3156                        <div class="dm-header">
3157                            <div class="dm-greeting">Good morning</div>
3158                            <div class="dm-date">Wednesday, January 15</div>
3159                        </div>
3160
3161                        <div class="dm-grid">
3162                            <!-- Hero: Screen Time Ring -->
3163                            <div class="dm-card dm-ring-card dm-area-hero">
3164                                <div class="ring-wrap">
3165                                    <svg viewBox="0 0 110 110">
3166                                        <circle class="ring-track" cx="55" cy="55" r="46" />
3167                                        <circle class="ring-fill" cx="55" cy="55" r="46" />
3168                                    </svg>
3169                                    <div class="ring-center">
3170                                        <span class="ring-val">4h 32m</span>
3171                                        <span class="ring-label">Screen Time</span>
3172                                    </div>
3173                                </div>
3174                                <div class="ring-badge">57% of goal</div>
3175                            </div>
3176
3177                            <!-- Stats capsules -->
3178                            <div class="dm-card dm-area-caps" style="padding:12px">
3179                                <div class="caps-grid">
3180                                    <div class="cap">
3181                                        <span class="cap-icon" style="color:rgba(255,255,255,0.5)">laptop_windows</span>
3182                                        <span class="cap-val">12</span>
3183                                        <span class="cap-lbl">Apps Used</span>
3184                                    </div>
3185                                    <div class="cap">
3186                                        <span class="cap-icon" style="color:#f59e0b">local_fire_department</span>
3187                                        <span class="cap-val">5</span>
3188                                        <span class="cap-lbl">Day Streak</span>
3189                                    </div>
3190                                    <div class="cap">
3191                                        <span class="cap-icon" style="color:#7aa2ff">lock_open</span>
3192                                        <span class="cap-val">8</span>
3193                                        <span class="cap-lbl">Unlocks</span>
3194                                    </div>
3195                                    <div class="cap">
3196                                        <span class="cap-icon" style="color:#2dd4bf">timer</span>
3197                                        <span class="cap-val" style="font-size:0.75rem;color:rgba(255,255,255,0.5)">App Limits</span>
3198                                        <span class="cap-lbl">3 active</span>
3199                                    </div>
3200                                    <div class="cap">
3201                                        <span class="cap-icon" style="color:#7aa2ff">label</span>
3202                                        <span class="cap-val" style="font-size:0.75rem;color:rgba(255,255,255,0.5)">Categories</span>
3203                                        <span class="cap-lbl">4 set up</span>
3204                                    </div>
3205                                    <div class="cap">
3206                                        <span class="cap-icon" style="color:#f472b6">monitoring</span>
3207                                        <span class="cap-val" style="font-size:0.75rem;color:rgba(255,255,255,0.5)">Weekly</span>
3208                                        <span class="cap-lbl">Reports</span>
3209                                    </div>
3210                                </div>
3211                            </div>
3212
3213                            <!-- Balance card (spans rows) -->
3214                            <div class="dm-card dm-bal-card dm-area-bal">
3215                                <div class="dm-card-label">Balance</div>
3216                                <div class="bal-ring-wrap">
3217                                    <div class="bal-ring"></div>
3218                                </div>
3219                                <div class="bal-chip">Balance</div>
3220                            </div>
3221
3222                            <!-- Most used apps -->
3223                            <div class="dm-card dm-area-recent">
3224                                <div class="dm-card-label">Most Used</div>
3225                                <div class="app-row">
3226                                    <div class="app-ico" style="background:rgba(66,133,244,0.12)">
3227                                        <img src="https://cdn.simpleicons.org/googlechrome/4285F4" alt="" width="14" height="14" loading="lazy">
3228                                    </div>
3229                                    <div class="app-info">
3230                                        <div class="app-name">Chrome</div>
3231                                        <div class="app-time">1h 48m</div>
3232                                        <div class="app-bar">
3233                                            <div class="app-prog" style="width:72%;background:rgba(255,255,255,0.5)"></div>
3234                                        </div>
3235                                    </div>
3236                                </div>
3237                                <div class="app-row">
3238                                    <div class="app-ico" style="background:rgba(0,122,204,0.12)">
3239                                        <span style="font-size:0.55rem;font-weight:700;color:#60aee8">VS</span>
3240                                    </div>
3241                                    <div class="app-info">
3242                                        <div class="app-name">VS Code</div>
3243                                        <div class="app-time">1h 12m</div>
3244                                        <div class="app-bar">
3245                                            <div class="app-prog" style="width:52%;background:rgba(255,255,255,0.35)"></div>
3246                                        </div>
3247                                    </div>
3248                                </div>
3249                                <div class="app-row">
3250                                    <div class="app-ico" style="background:rgba(29,185,84,0.12)">
3251                                        <img src="https://cdn.simpleicons.org/spotify/1DB954" alt="" width="14" height="14" loading="lazy">
3252                                    </div>
3253                                    <div class="app-info">
3254                                        <div class="app-name">Spotify</div>
3255                                        <div class="app-time">42m</div>
3256                                        <div class="app-bar">
3257                                            <div class="app-prog" style="width:28%;background:rgba(255,255,255,0.25)"></div>
3258                                        </div>
3259                                    </div>
3260                                </div>
3261                            </div>
3262
3263                            <!-- Categories -->
3264                            <div class="dm-card dm-area-cats">
3265                                <div class="dm-card-label">Categories</div>
3266                                <div class="cat-item">
3267                                    <div class="cat-dot" style="background:#22c55e"></div>
3268                                    <div class="cat-info">
3269                                        <div class="cat-name">Development</div>
3270                                        <div class="cat-time">2h 14m</div>
3271                                    </div>
3272                                    <span class="cat-pct">49%</span>
3273                                </div>
3274                                <div class="cat-item">
3275                                    <div class="cat-dot" style="background:#f59e0b"></div>
3276                                    <div class="cat-info">
3277                                        <div class="cat-name">Entertainment</div>
3278                                        <div class="cat-time">1h 06m</div>
3279                                    </div>
3280                                    <span class="cat-pct">24%</span>
3281                                </div>
3282                                <div class="cat-item">
3283                                    <div class="cat-dot" style="background:#ec4899"></div>
3284                                    <div class="cat-info">
3285                                        <div class="cat-name">Social</div>
3286                                        <div class="cat-time">38m</div>
3287                                    </div>
3288                                    <span class="cat-pct">14%</span>
3289                                </div>
3290                                <div class="cat-item">
3291                                    <div class="cat-dot" style="background:#38bdf8"></div>
3292                                    <div class="cat-info">
3293                                        <div class="cat-name">Browsing</div>
3294                                        <div class="cat-time">34m</div>
3295                                    </div>
3296                                    <span class="cat-pct">13%</span>
3297                                </div>
3298                            </div>
3299                        </div>
3300                    </div>
3301
3302                    <!-- App Usage Pane -->
3303                    <div class="dm mockup-pane" id="pane-apps">
3304                        <div class="dm-header">
3305                            <div class="dm-greeting">App Usage Details</div>
3306                            <div class="dm-date">Detailed breakdown of time spent across apps</div>
3307                        </div>
3308                        <div class="dm-grid" style="grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'list stats' 'list cats';">
3309                            <div class="dm-card" style="grid-area: list;">
3310                                <div class="dm-card-label">Top Applications</div>
3311                                <div class="app-row">
3312                                    <div class="app-ico" style="background:rgba(66,133,244,0.12)">
3313                                        <img src="https://cdn.simpleicons.org/googlechrome/4285F4" alt="" width="14" height="14" loading="lazy">
3314                                    </div>
3315                                    <div class="app-info">
3316                                        <div class="app-name">Chrome</div>
3317                                        <div class="app-time">2h 45m</div>
3318                                        <div class="app-bar">
3319                                            <div class="app-prog" style="width:100%;background:rgba(255,255,255,0.5)"></div>
3320                                        </div>
3321                                    </div>
3322                                    <div class="app-pct">38%</div>
3323                                    <span class="app-tag" style="background:rgba(56,189,248,0.12);color:#38bdf8">Browsing</span>
3324                                </div>
3325                                <div class="app-row">
3326                                    <div class="app-ico" style="background:rgba(0,122,204,0.12)">
3327                                        <span style="font-size:0.55rem;font-weight:700;color:#60aee8">VS</span>
3328                                    </div>
3329                                    <div class="app-info">
3330                                        <div class="app-name">VS Code</div>
3331                                        <div class="app-time">1h 30m</div>
3332                                        <div class="app-bar">
3333                                            <div class="app-prog" style="width:60%;background:rgba(255,255,255,0.35)"></div>
3334                                        </div>
3335                                    </div>
3336                                    <div class="app-pct">21%</div>
3337                                    <span class="app-tag" style="background:rgba(34,197,94,0.12);color:#22c55e">Development</span>
3338                                </div>
3339                                <div class="app-row">
3340                                    <div class="app-ico" style="background:rgba(88,101,242,0.12)">
3341                                        <img src="https://cdn.simpleicons.org/discord/5865F2" alt="" width="14" height="14" loading="lazy">
3342                                    </div>
3343                                    <div class="app-info">
3344                                        <div class="app-name">Discord</div>
3345                                        <div class="app-time">45m</div>
3346                                        <div class="app-bar">
3347                                            <div class="app-prog" style="width:25%;background:rgba(255,255,255,0.25)"></div>
3348                                        </div>
3349                                    </div>
3350                                    <div class="app-pct">11%</div>
3351                                    <span class="app-tag" style="background:rgba(236,72,153,0.12);color:#ec4899">Social</span>
3352                                </div>
3353                                <div class="app-row">
3354                                    <div class="app-ico" style="background:rgba(29,185,84,0.12)">
3355                                        <img src="https://cdn.simpleicons.org/spotify/1DB954" alt="" width="14" height="14" loading="lazy">
3356                                    </div>
3357                                    <div class="app-info">
3358                                        <div class="app-name">Spotify</div>
3359                                        <div class="app-time">32m</div>
3360                                        <div class="app-bar">
3361                                            <div class="app-prog" style="width:18%;background:rgba(255,255,255,0.2)"></div>
3362                                        </div>
3363                                    </div>
3364                                    <div class="app-pct">8%</div>
3365                                    <span class="app-tag" style="background:rgba(251,191,36,0.12);color:#fbbf24">Entertainment</span>
3366                                </div>
3367                                <div class="app-row">
3368                                    <div class="app-ico" style="background:rgba(255,255,255,0.08)">
3369                                        <span style="font-size:0.55rem;font-weight:700;color:rgba(255,255,255,0.6)">SL</span>
3370                                    </div>
3371                                    <div class="app-info">
3372                                        <div class="app-name">Slack</div>
3373                                        <div class="app-time">22m</div>
3374                                        <div class="app-bar">
3375                                            <div class="app-prog" style="width:12%;background:rgba(255,255,255,0.15)"></div>
3376                                        </div>
3377                                    </div>
3378                                    <div class="app-pct">6%</div>
3379                                    <span class="app-tag" style="background:rgba(34,197,94,0.12);color:#22c55e">Work</span>
3380                                </div>
3381                            </div>
3382                            <div class="dm-card" style="grid-area: stats; padding:12px">
3383                                <div class="caps-grid" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;">
3384                                    <div class="cap">
3385                                        <span class="cap-icon" style="color:#7aa2ff">apps</span>
3386                                        <span class="cap-val">12</span>
3387                                        <span class="cap-lbl">Apps Tracked</span>
3388                                    </div>
3389                                    <div class="cap">
3390                                        <span class="cap-icon" style="color:rgba(255,255,255,0.5)">schedule</span>
3391                                        <span class="cap-val">7h 14m</span>
3392                                        <span class="cap-lbl">Total Time</span>
3393                                    </div>
3394                                    <div class="cap">
3395                                        <span class="cap-icon" style="color:#22c55e">trending_up</span>
3396                                        <span class="cap-val">Chrome</span>
3397                                        <span class="cap-lbl">Most Used</span>
3398                                    </div>
3399                                </div>
3400                            </div>
3401                            <div class="dm-card dm-area-cats" style="grid-area: cats;">
3402                                <div class="dm-card-label">By Category</div>
3403                                <div class="cat-item">
3404                                    <div class="cat-dot" style="background:#38bdf8"></div>
3405                                    <div class="cat-info">
3406                                        <div class="cat-name">Browsing</div>
3407                                        <div class="cat-time">2h 45m</div>
3408                                    </div>
3409                                    <span class="cat-pct">38%</span>
3410                                </div>
3411                                <div class="cat-item">
3412                                    <div class="cat-dot" style="background:#22c55e"></div>
3413                                    <div class="cat-info">
3414                                        <div class="cat-name">Development</div>
3415                                        <div class="cat-time">1h 30m</div>
3416                                    </div>
3417                                    <span class="cat-pct">21%</span>
3418                                </div>
3419                                <div class="cat-item">
3420                                    <div class="cat-dot" style="background:#ec4899"></div>
3421                                    <div class="cat-info">
3422                                        <div class="cat-name">Social</div>
3423                                        <div class="cat-time">45m</div>
3424                                    </div>
3425                                    <span class="cat-pct">11%</span>
3426                                </div>
3427                            </div>
3428                        </div>
3429                    </div>
3430
3431                    <!-- Websites Pane -->
3432                    <div class="dm mockup-pane" id="pane-websites">
3433                        <div class="dm-header">
3434                            <div class="dm-greeting">Browser Intelligence</div>
3435                            <div class="dm-date">Tracked across Chrome, Edge, and 54 other browsers</div>
3436                        </div>
3437                        <div class="dm-grid" style="grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'list stats' 'list cats';">
3438                            <div class="dm-card" style="grid-area: list;">
3439                                <div class="dm-card-label">Most Visited Websites</div>
3440                                <div class="app-row">
3441                                    <div class="app-ico" style="background:rgba(255,255,255,0.1)">
3442                                        <img src="https://cdn.simpleicons.org/github/FFFFFF" alt="" width="14" height="14" loading="lazy">
3443                                    </div>
3444                                    <div class="app-info">
3445                                        <div class="app-name">github.com</div>
3446                                        <div class="app-time">1h 15m</div>
3447                                        <div class="app-bar">
3448                                            <div class="app-prog" style="width:80%;background:#22c55e"></div>
3449                                        </div>
3450                                    </div>
3451                                    <div class="app-pct">33%</div>
3452                                    <span class="app-tag" style="background:rgba(34,197,94,0.12);color:#22c55e">Development</span>
3453                                </div>
3454                                <div class="app-row">
3455                                    <div class="app-ico" style="background:rgba(255,0,0,0.1)">
3456                                        <img src="https://cdn.simpleicons.org/youtube/FF0000" alt="" width="14" height="14" loading="lazy">
3457                                    </div>
3458                                    <div class="app-info">
3459                                        <div class="app-name">youtube.com</div>
3460                                        <div class="app-time">55m</div>
3461                                        <div class="app-bar">
3462                                            <div class="app-prog" style="width:50%;background:#ef4444"></div>
3463                                        </div>
3464                                    </div>
3465                                    <div class="app-pct">24%</div>
3466                                    <span class="app-tag" style="background:rgba(251,191,36,0.12);color:#fbbf24">Entertainment</span>
3467                                </div>
3468                                <div class="app-row">
3469                                    <div class="app-ico" style="background:rgba(29,161,242,0.1)">
3470                                        <img src="https://cdn.simpleicons.org/x/FFFFFF" alt="" width="14" height="14" loading="lazy">
3471                                    </div>
3472                                    <div class="app-info">
3473                                        <div class="app-name">x.com</div>
3474                                        <div class="app-time">32m</div>
3475                                        <div class="app-bar">
3476                                            <div class="app-prog" style="width:32%;background:#ec4899"></div>
3477                                        </div>
3478                                    </div>
3479                                    <div class="app-pct">14%</div>
3480                                    <span class="app-tag" style="background:rgba(236,72,153,0.12);color:#ec4899">Social</span>
3481                                </div>
3482                                <div class="app-row">
3483                                    <div class="app-ico" style="background:rgba(255,255,255,0.1)">
3484                                        <img src="https://cdn.simpleicons.org/stackoverflow/F58025" alt="" width="14" height="14" loading="lazy">
3485                                    </div>
3486                                    <div class="app-info">
3487                                        <div class="app-name">stackoverflow.com</div>
3488                                        <div class="app-time">24m</div>
3489                                        <div class="app-bar">
3490                                            <div class="app-prog" style="width:22%;background:#22c55e"></div>
3491                                        </div>
3492                                    </div>
3493                                    <div class="app-pct">10%</div>
3494                                    <span class="app-tag" style="background:rgba(34,197,94,0.12);color:#22c55e">Development</span>
3495                                </div>
3496                                <div class="app-row">
3497                                    <div class="app-ico" style="background:rgba(255,69,0,0.1)">
3498                                        <img src="https://cdn.simpleicons.org/reddit/FF4500" alt="" width="14" height="14" loading="lazy">
3499                                    </div>
3500                                    <div class="app-info">
3501                                        <div class="app-name">reddit.com</div>
3502                                        <div class="app-time">18m</div>
3503                                        <div class="app-bar">
3504                                            <div class="app-prog" style="width:16%;background:#38bdf8"></div>
3505                                        </div>
3506                                    </div>
3507                                    <div class="app-pct">8%</div>
3508                                    <span class="app-tag" style="background:rgba(56,189,248,0.12);color:#38bdf8">Browsing</span>
3509                                </div>
3510                            </div>
3511                            <div class="dm-card" style="grid-area: stats; padding:12px">
3512                                <div class="caps-grid" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;">
3513                                    <div class="cap">
3514                                        <span class="cap-icon" style="color:#7aa2ff">public</span>
3515                                        <span class="cap-val">28</span>
3516                                        <span class="cap-lbl">Sites Tracked</span>
3517                                    </div>
3518                                    <div class="cap">
3519                                        <span class="cap-icon" style="color:rgba(255,255,255,0.5)">schedule</span>
3520                                        <span class="cap-val">3h 49m</span>
3521                                        <span class="cap-lbl">Total Time</span>
3522                                    </div>
3523                                    <div class="cap">
3524                                        <span class="cap-icon" style="color:#22c55e">trending_up</span>
3525                                        <span class="cap-val">github.com</span>
3526                                        <span class="cap-lbl">Top Domain</span>
3527                                    </div>
3528                                </div>
3529                            </div>
3530                            <div class="dm-card dm-area-cats" style="grid-area: cats;">
3531                                <div class="dm-card-label">By Category</div>
3532                                <div class="cat-item">
3533                                    <div class="cat-dot" style="background:#22c55e"></div>
3534                                    <div class="cat-info">
3535                                        <div class="cat-name">Development</div>
3536                                        <div class="cat-time">1h 39m</div>
3537                                    </div>
3538                                    <span class="cat-pct">43%</span>
3539                                </div>
3540                                <div class="cat-item">
3541                                    <div class="cat-dot" style="background:#fbbf24"></div>
3542                                    <div class="cat-info">
3543                                        <div class="cat-name">Entertainment</div>
3544                                        <div class="cat-time">55m</div>
3545                                    </div>
3546                                    <span class="cat-pct">24%</span>
3547                                </div>
3548                                <div class="cat-item">
3549                                    <div class="cat-dot" style="background:#ec4899"></div>
3550                                    <div class="cat-info">
3551                                        <div class="cat-name">Social</div>
3552                                        <div class="cat-time">32m</div>
3553                                    </div>
3554                                    <span class="cat-pct">14%</span>
3555                                </div>
3556                            </div>
3557                        </div>
3558                    </div>
3559
3560                    <!-- Limits Pane -->
3561                    <div class="dm mockup-pane" id="pane-limits">
3562                        <div class="dm-header">
3563                            <div class="dm-greeting">App & Website Limits</div>
3564                            <div class="dm-date">Active restrictions for today</div>
3565                        </div>
3566                        <div class="dm-grid" style="grid-template-columns: 1fr 1.3fr; grid-template-rows: auto 1fr; grid-template-areas: 'hero list' 'stats list';">
3567                            <div class="dm-card dm-ring-card dm-area-hero" style="padding: 16px 10px;">
3568                                <div class="ring-wrap" style="width:82px;height:82px;">
3569                                    <svg viewBox="0 0 110 110">
3570                                        <circle class="ring-track" cx="55" cy="55" r="46" />
3571                                        <circle class="ring-fill" cx="55" cy="55" r="46" style="stroke:#ef4444;stroke-dashoffset:0;" />
3572                                    </svg>
3573                                    <div class="ring-center">
3574                                        <span class="ring-val" style="font-size:0.8rem;">100%</span>
3575                                        <span class="ring-label">Reached</span>
3576                                    </div>
3577                                </div>
3578                                <div class="ring-badge" style="color:#ef4444;border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.1);">Social Media Blocked</div>
3579                            </div>
3580                            <div class="dm-card" style="grid-area: stats; padding:12px">
3581                                <div class="caps-grid" style="grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr;">
3582                                    <div class="cap">
3583                                        <span class="cap-icon" style="color:#7aa2ff">timer</span>
3584                                        <span class="cap-val">5</span>
3585                                        <span class="cap-lbl">Active Limits</span>
3586                                    </div>
3587                                    <div class="cap">
3588                                        <span class="cap-icon" style="color:#ef4444">block</span>
3589                                        <span class="cap-val">1</span>
3590                                        <span class="cap-lbl">Blocked</span>
3591                                    </div>
3592                                    <div class="cap">
3593                                        <span class="cap-icon" style="color:#22c55e">savings</span>
3594                                        <span class="cap-val">2h 15m</span>
3595                                        <span class="cap-lbl">Saved Today</span>
3596                                    </div>
3597                                </div>
3598                            </div>
3599                            <div class="dm-card" style="grid-area: list;">
3600                                <div class="dm-card-label">All Limits</div>
3601                                <div class="app-row">
3602                                    <div class="app-ico" style="background:rgba(239,68,68,0.12)">
3603                                        <span style="font-family:'Material Symbols Rounded';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20;font-size:14px;color:#ef4444">groups</span>
3604                                    </div>
3605                                    <div class="app-info">
3606                                        <div class="app-name">Social Media Category</div>
3607                                        <div class="app-time">30m / 30m limit</div>
3608                                        <div class="app-bar">
3609                                            <div class="app-prog" style="width:100%;background:#ef4444"></div>
3610                                        </div>
3611                                    </div>
3612                                    <span class="app-tag" style="background:rgba(239,68,68,0.12);color:#ef4444">Blocked</span>
3613                                </div>
3614                                <div class="app-row">
3615                                    <div class="app-ico" style="background:rgba(255,0,0,0.1)">
3616                                        <img src="https://cdn.simpleicons.org/youtube/FF0000" alt="" width="14" height="14" loading="lazy">
3617                                    </div>
3618                                    <div class="app-info">
3619                                        <div class="app-name">YouTube</div>
3620                                        <div class="app-time">45m / 1h limit &middot; 15m left</div>
3621                                        <div class="app-bar">
3622                                            <div class="app-prog" style="width:75%;background:#eab308"></div>
3623                                        </div>
3624                                    </div>
3625                                    <span class="app-tag" style="background:rgba(234,179,8,0.12);color:#eab308">Warning</span>
3626                                </div>
3627                                <div class="app-row">
3628                                    <div class="app-ico" style="background:rgba(225,48,108,0.1)">
3629                                        <img src="https://cdn.simpleicons.org/instagram/E1306C" alt="" width="14" height="14" loading="lazy">
3630                                    </div>
3631                                    <div class="app-info">
3632                                        <div class="app-name">Instagram</div>
3633                                        <div class="app-time">20m / 45m limit &middot; 25m left</div>
3634                                        <div class="app-bar">
3635                                            <div class="app-prog" style="width:44%;background:#22c55e"></div>
3636                                        </div>
3637                                    </div>
3638                                    <span class="app-tag" style="background:rgba(34,197,94,0.12);color:#22c55e">On track</span>
3639                                </div>
3640                                <div class="app-row">
3641                                    <div class="app-ico" style="background:rgba(255,255,255,0.1)">
3642                                        <img src="https://cdn.simpleicons.org/steam/FFFFFF" alt="" width="14" height="14" loading="lazy">
3643                                    </div>
3644                                    <div class="app-info">
3645                                        <div class="app-name">Steam</div>
3646                                        <div class="app-time">0m / 2h limit &middot; paused until 6 PM</div>
3647                                        <div class="app-bar">
3648                                            <div class="app-prog" style="width:0%;background:#7aa2ff"></div>
3649                                        </div>
3650                                    </div>
3651                                    <span class="app-tag" style="background:rgba(156,163,175,0.15);color:rgba(255,255,255,0.6)">Paused</span>
3652                                </div>
3653                            </div>
3654                        </div>
3655                    </div>
3656
3657                    <!-- Timeline Pane -->
3658                    <div class="dm mockup-pane" id="pane-timeline">
3659                        <div class="dm-header">
3660                            <div class="dm-greeting">Today's Timeline</div>
3661                            <div class="dm-date">Hour-by-hour breakdown</div>
3662                        </div>
3663                        <div class="dm-card" style="padding: 20px; flex: 1;">
3664                            <div style="display:flex; flex-direction:column; gap:10px;">
3665                                <div style="display:flex; align-items:center; gap:10px;">
3666                                    <span style="font-size:0.62rem; color:rgba(255,255,255,0.4); width:34px;">9 AM</span>
3667                                    <div style="flex:1; height:14px; border-radius:4px; background:linear-gradient(90deg, #3d6bea 0%, #3d6bea 60%, transparent 60%);"></div>
3668                                </div>
3669                                <div style="display:flex; align-items:center; gap:10px;">
3670                                    <span style="font-size:0.62rem; color:rgba(255,255,255,0.4); width:34px;">10 AM</span>
3671                                    <div style="flex:1; height:14px; border-radius:4px; background:linear-gradient(90deg, #34d399 0%, #34d399 85%, transparent 85%);"></div>
3672                                </div>
3673                                <div style="display:flex; align-items:center; gap:10px;">
3674                                    <span style="font-size:0.62rem; color:rgba(255,255,255,0.4); width:34px;">11 AM</span>
3675                                    <div style="flex:1; height:14px; border-radius:4px; background:linear-gradient(90deg, #f472b6 0%, #f472b6 35%, transparent 35%);"></div>
3676                                </div>
3677                                <div style="display:flex; align-items:center; gap:10px;">
3678                                    <span style="font-size:0.62rem; color:rgba(255,255,255,0.4); width:34px;">12 PM</span>
3679                                    <div style="flex:1; height:14px; border-radius:4px; background:linear-gradient(90deg, #3d6bea 0%, #3d6bea 70%, transparent 70%);"></div>
3680                                </div>
3681                                <div style="display:flex; align-items:center; gap:10px;">
3682                                    <span style="font-size:0.62rem; color:rgba(255,255,255,0.4); width:34px;">1 PM</span>
3683                                    <div style="flex:1; height:14px; border-radius:4px; background:linear-gradient(90deg, #fbbf24 0%, #fbbf24 45%, transparent 45%);"></div>
3684                                </div>
3685                            </div>
3686                            <div style="display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;">
3687                                <span style="display:flex;align-items:center;gap:5px;font-size:0.62rem;color:rgba(255,255,255,0.5)"><span style="width:8px;height:8px;border-radius:2px;background:#3d6bea;display:inline-block"></span>Work</span>
3688                                <span style="display:flex;align-items:center;gap:5px;font-size:0.62rem;color:rgba(255,255,255,0.5)"><span style="width:8px;height:8px;border-radius:2px;background:#34d399;display:inline-block"></span>Dev</span>
3689                                <span style="display:flex;align-items:center;gap:5px;font-size:0.62rem;color:rgba(255,255,255,0.5)"><span style="width:8px;height:8px;border-radius:2px;background:#f472b6;display:inline-block"></span>Social</span>
3690                                <span style="display:flex;align-items:center;gap:5px;font-size:0.62rem;color:rgba(255,255,255,0.5)"><span style="width:8px;height:8px;border-radius:2px;background:#fbbf24;display:inline-block"></span>Entertainment</span>
3691                            </div>
3692                        </div>
3693                    </div>
3694
3695                    <!-- Widgets Pane -->
3696                    <div class="dm mockup-pane" id="pane-widgets">
3697                        <div class="dm-header">
3698                            <div class="dm-greeting">Desktop Widgets</div>
3699                            <div class="dm-date">Live, glanceable, always on</div>
3700                        </div>
3701                        <div class="dm-grid" style="grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto;">
3702                            <div class="dm-card dm-ring-card" style="padding: 18px 10px;">
3703                                <div class="ring-wrap" style="width:76px;height:76px;">
3704                                    <svg viewBox="0 0 110 110">
3705                                        <circle class="ring-track" cx="55" cy="55" r="46" />
3706                                        <circle class="ring-fill" cx="55" cy="55" r="46" />
3707                                    </svg>
3708                                    <div class="ring-center">
3709                                        <span class="ring-val" style="font-size:0.8rem;">3h 12m</span>
3710                                    </div>
3711                                </div>
3712                                <div class="ring-badge" style="font-size:0.55rem;">Screen Time</div>
3713                            </div>
3714                            <div class="dm-card" style="padding: 14px;">
3715                                <div class="dm-card-label">Top Apps</div>
3716                                <div class="app-row">
3717                                    <div class="app-ico" style="background:#5865F2;">D</div>
3718                                    <div class="app-info">
3719                                        <div class="app-name">Discord</div>
3720                                        <div class="app-time">1h 20m</div>
3721                                    </div>
3722                                </div>
3723                                <div class="app-row">
3724                                    <div class="app-ico" style="background:#181717;">C</div>
3725                                    <div class="app-info">
3726                                        <div class="app-name">VS Code</div>
3727                                        <div class="app-time">55m</div>
3728                                    </div>
3729                                </div>
3730                            </div>
3731                            <div class="dm-card" style="padding: 14px;">
3732                                <div class="dm-card-label">Top Sites</div>
3733                                <div class="app-row">
3734                                    <div class="app-ico" style="background:#FF0000;">Y</div>
3735                                    <div class="app-info">
3736                                        <div class="app-name">YouTube</div>
3737                                        <div class="app-time">32m</div>
3738                                    </div>
3739                                </div>
3740                                <div class="app-row">
3741                                    <div class="app-ico" style="background:#1DA1F2;">X</div>
3742                                    <div class="app-info">
3743                                        <div class="app-name">X.com</div>
3744                                        <div class="app-time">18m</div>
3745                                    </div>
3746                                </div>
3747                            </div>
3748                        </div>
3749                    </div>
3750                </div>
3751            </div>
3752        </div>
3753
3754    </section>
3755
3756    <!-- ── BROWSER TICKER ────────────────────────── -->
3757    <section class="browsers">
3758        <div class="browsers-label">Works with 56 browsers — no extension needed</div>
3759        <div class="ticker" aria-hidden="true">
3760            <div class="ticker-set">
3761                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/googlechrome/4285F4"
3762                        alt="" width="20" height="20" loading="lazy">Chrome</span>
3763                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/brave/FB542B" alt=""
3764                        width="20" height="20" loading="lazy">Brave</span>
3765                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/firefoxbrowser/FF7139"
3766                        alt="" width="20" height="20" loading="lazy">Firefox</span>
3767                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3768                        <circle cx="12" cy="12" r="11" fill="#0078D4" />
3769                        <path d="M7 13.5c0-3.3 2.5-6 5.5-6 1.6 0 2.8.9 2.8 2.3 0 1.3-1 2.2-2.8 2.2H7.5" fill="none"
3770                            stroke="#fff" stroke-width="2" stroke-linecap="round" />
3771                        <path d="M9.5 16c1 .6 2 .8 3 .8 2 0 3.5-1.2 3.5-3" fill="none" stroke="#35C1F1"
3772                            stroke-width="1.5" stroke-linecap="round" />
3773                    </svg>Edge</span>
3774                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/opera/FF1B2D" alt=""
3775                        width="20" height="20" loading="lazy">Opera</span>
3776                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/vivaldi/EF3939" alt=""
3777                        width="20" height="20" loading="lazy">Vivaldi</span>
3778                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/arc/FCBFBD" alt=""
3779                        width="20" height="20" loading="lazy">Arc</span>
3780                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/torbrowser/7D4698"
3781                        alt="" width="20" height="20" loading="lazy">Tor</span>
3782                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3783                        <circle cx="12" cy="12" r="11" fill="#4587F3" />
3784                        <circle cx="12" cy="12" r="6" fill="none" stroke="#fff" stroke-width="2" />
3785                        <circle cx="12" cy="6" r="1.5" fill="#fff" />
3786                    </svg>Chromium</span>
3787                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3788                        <circle cx="12" cy="12" r="11" fill="#5B4D9E" />
3789                        <path d="M7 10c0-3 2.5-5 5-5s4 1.5 4 3.5" fill="none" stroke="#fff" stroke-width="2"
3790                            stroke-linecap="round" />
3791                        <circle cx="16" cy="14" r="3" fill="none" stroke="#fff" stroke-width="1.5" />
3792                    </svg>Waterfox</span>
3793                <span class="ticker-item"><span class="ti-letter" style="background:#00AAFF">M</span>Mullvad</span>
3794                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/librewolf/00ACFF" alt=""
3795                        width="20" height="20" loading="lazy">LibreWolf</span>
3796                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/zenbrowser/7C6AEF"
3797                        alt="" width="20" height="20" loading="lazy">Zen</span>
3798                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3799                        <circle cx="12" cy="12" r="11" fill="#2E66F6" />
3800                        <rect x="6" y="6" width="5" height="12" rx="1.5" fill="#fff" opacity=".9" />
3801                        <rect x="13" y="6" width="5" height="12" rx="1.5" fill="#fff" opacity=".6" />
3802                    </svg>Polypane</span>
3803                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3804                        <circle cx="12" cy="12" r="11" fill="#45B855" />
3805                        <path d="M8 16V9l4-3 4 3v7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"
3806                            stroke-linejoin="round" />
3807                    </svg>Midori</span>
3808                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3809                        <circle cx="12" cy="12" r="11" fill="#00C170" />
3810                        <path d="M6 14c0-4 3-7 6-7s5 2 5 4-2 4-5 4c-2 0-3.5-1-3.5-2.5" fill="none" stroke="#fff"
3811                            stroke-width="2" stroke-linecap="round" />
3812                    </svg>Whale</span>
3813            </div>
3814            <div class="ticker-set">
3815                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/googlechrome/4285F4"
3816                        alt="" width="20" height="20" loading="lazy">Chrome</span>
3817                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/brave/FB542B" alt=""
3818                        width="20" height="20" loading="lazy">Brave</span>
3819                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/firefoxbrowser/FF7139"
3820                        alt="" width="20" height="20" loading="lazy">Firefox</span>
3821                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3822                        <circle cx="12" cy="12" r="11" fill="#0078D4" />
3823                        <path d="M7 13.5c0-3.3 2.5-6 5.5-6 1.6 0 2.8.9 2.8 2.3 0 1.3-1 2.2-2.8 2.2H7.5" fill="none"
3824                            stroke="#fff" stroke-width="2" stroke-linecap="round" />
3825                        <path d="M9.5 16c1 .6 2 .8 3 .8 2 0 3.5-1.2 3.5-3" fill="none" stroke="#35C1F1"
3826                            stroke-width="1.5" stroke-linecap="round" />
3827                    </svg>Edge</span>
3828                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/opera/FF1B2D" alt=""
3829                        width="20" height="20" loading="lazy">Opera</span>
3830                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/vivaldi/EF3939" alt=""
3831                        width="20" height="20" loading="lazy">Vivaldi</span>
3832                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/arc/FCBFBD" alt=""
3833                        width="20" height="20" loading="lazy">Arc</span>
3834                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/torbrowser/7D4698"
3835                        alt="" width="20" height="20" loading="lazy">Tor</span>
3836                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3837                        <circle cx="12" cy="12" r="11" fill="#4587F3" />
3838                        <circle cx="12" cy="12" r="6" fill="none" stroke="#fff" stroke-width="2" />
3839                        <circle cx="12" cy="6" r="1.5" fill="#fff" />
3840                    </svg>Chromium</span>
3841                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3842                        <circle cx="12" cy="12" r="11" fill="#5B4D9E" />
3843                        <path d="M7 10c0-3 2.5-5 5-5s4 1.5 4 3.5" fill="none" stroke="#fff" stroke-width="2"
3844                            stroke-linecap="round" />
3845                        <circle cx="16" cy="14" r="3" fill="none" stroke="#fff" stroke-width="1.5" />
3846                    </svg>Waterfox</span>
3847                <span class="ticker-item"><span class="ti-letter" style="background:#00AAFF">M</span>Mullvad</span>
3848                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/librewolf/00ACFF" alt=""
3849                        width="20" height="20" loading="lazy">LibreWolf</span>
3850                <span class="ticker-item"><img class="ti-icon" src="https://cdn.simpleicons.org/zenbrowser/7C6AEF"
3851                        alt="" width="20" height="20" loading="lazy">Zen</span>
3852                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3853                        <circle cx="12" cy="12" r="11" fill="#2E66F6" />
3854                        <rect x="6" y="6" width="5" height="12" rx="1.5" fill="#fff" opacity=".9" />
3855                        <rect x="13" y="6" width="5" height="12" rx="1.5" fill="#fff" op
3855acity=".6" />
3856                    </svg>Polypane</span>
3857                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3858                        <circle cx="12" cy="12" r="11" fill="#45B855" />
3859                        <path d="M8 16V9l4-3 4 3v7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"
3860                            stroke-linejoin="round" />
3861                    </svg>Midori</span>
3862                <span class="ticker-item"><svg class="ti-svg" viewBox="0 0 24 24" width="20" height="20">
3863                        <circle cx="12" cy="12" r="11" fill="#00C170" />
3864                        <path d="M6 14c0-4 3-7 6-7s5 2 5 4-2 4-5 4c-2 0-3.5-1-3.5-2.5" fill="none" stroke="#fff"
3865                            stroke-width="2" stroke-linecap="round" />
3866                    </svg>Whale</span>
3867            </div>
3868        </div>
3869    </section>
3870
3871    <!-- ── NUMBERS ───────────────────────────────── -->
3872    <section class="numbers">
3873        <div class="container">
3874            <div class="numbers-grid reveal">
3875                <div class="num-cell">
3876                    <div class="num-val" data-target="56" data-suffix="">0</div>
3877                    <div class="num-label">Browsers tracked</div>
3878                </div>
3879                <div class="num-cell">
3880                    <div class="num-val" data-target="88" data-suffix="">0</div>
3881                    <div class="num-label">Websites auto-recognized</div>
3882                </div>
3883                <div class="num-cell">
3884                    <div class="num-val" data-target="1" data-suffix=" sec">0 sec</div>
3885                    <div class="num-label">Tracking precision</div>
3886                </div>
3887                <div class="num-cell">
3888                    <div class="num-val" data-target="0" data-suffix=" bytes">0 bytes</div>
3889                    <div class="num-label">Sent to any server</div>
3890                </div>
3891            </div>
3892        </div>
3893    </section>
3894
3895    <!-- ── HOW IT WORKS ──────────────────────────── -->
3896    <section class="audience" id="use-cases">
3897        <div class="container">
3898            <div class="s-eyebrow reveal">Who it's for</div>
3899            <h2 class="s-heading reveal" data-d="1">A real digital wellbeing system for daily Windows life</h2>
3900            <p class="s-sub reveal" data-d="2">Deskly is built for people who want more than raw numbers. It helps you
3901                understand patterns, lock down distractions, and make healthier screen decisions every day.</p>
3902
3903            <div class="audience-grid reveal" data-d="3">
3904                <article class="aud-card">
3905                    <h3>Students trying to stay focused</h3>
3906                    <p>Understand exactly where study time leaks, then use app locks and focus mode to protect your
3907                        learning blocks from distraction.</p>
3908                </article>
3909                <article class="aud-card">
3910                    <h3>Professionals building deep-work habits</h3>
3911                    <p>See your day on a visual timeline, uncover your biggest attention drains, and run dedicated
3912                        focus sessions to build stronger routines.</p>
3913                </article>
3914                <article class="aud-card">
3915                    <h3>People reducing unhealthy browsing cycles</h3>
3916                    <p>See browsing behavior clearly, set practical boundaries with limits and locks, and replace
3917                        mindless usage with intentional time.</p>
3918                </article>
3919                <article class="aud-card">
3920                    <h3>Anyone improving digital wellbeing</h3>
3921                    <p>Use desktop widgets for at-a-glance awareness and weekly reports to reflect and improve.
3922                        Deskly is designed as a long-term companion, not a one-time utility.</p>
3923                </article>
3924            </div>
3925        </div>
3926    </section>
3927
3928    <!-- ── PRIVACY ───────────────────────────────── -->
3929    <section class="cta">
3930        <div class="container">
3931            <h2 class="reveal">See where your time<br><span class="serif-em">
3931actually goes.</span></h2>
3932            <p class="sub reveal" data-d="1">Free. Private. Account required. Just install<br>and get honest answers about
3933                your screen time.</p>
3934
3935            <div class="reveal" data-d="2" style="display: flex; justify-content: center; margin-top: 32px;">
3936                <ms-store-badge
3937    productid="9N3XS93TJ82Q"
3938    productname="Deskly - Screen Time, App Lock, Widgets & More"
3939    window-mode="direct"
3940    theme="auto"
3941    size="large"
3942    language="en-us"
3943    animation="on">
3944    <a href="ms-windows-store://pdp/?ProductId=9N3XS93TJ82Q" class="ms-store-badge-fallback" data-analytics-event="web.cta.clicked" data-analytics-source="web_badge">
3945        <img src="https://get.microsoft.com/images/en-us%20dark.svg" alt="Get it from Microsoft Store" />
3946    </a>
3947</ms-store-badge>
3948            </div>
3949
3950        </div>
3951    </section>
3952
3953    <!-- ── FOOTER ────────────────────────────────── -->
3954    </main>
3955
3956        <footer class="site-footer">
3957        <div class="container">
3958            <div class="taped-card">
3959                <div class="fc-brand">
3960                    <a href="/" class="logo">
3961                        <div class="logo-icon">
3962                            <img src="/assets/icon.svg" alt="Deskly" width="24" height="24" />
3963                        </div>
3964                        Deskly
3965                    </a>
3966                    <p>A native Windows digital wellbeing companion for focus, awareness, and healthier habits.</p>
3967                </div>
3968                
3969                <div class="fc-links-wrap">
3970                    <div class="fc-col">
3971                        <h4>Solutions</h4>
3972                        <a href="/windows-screen-time-tracker">Screen time tracker</a>
3973                        <a href="/digital-wellbeing-windows">Digital wellbeing</a>
3974                        <a href="/windows-app-and-website-limits">App &amp; website limits</a>
3975                        <a href="/focus-app-for-windows">Focus app</a>
3976                        <a href="/app-blocker-for-windows">App blocker</a>
3977                        <a href="/solutions">All solutions →</a>
3978                    </div>
3979                    <div class="fc-col">
3980                        <h4>Explore</h4>
3981                        <a href="/features">Features</a>
3982                        <a href="/how-it-works">How it works</a>
3983                        <a href="/#use-cases">Who it's for</a>
3984                        <a href="/blog">Blog</a>
3985                        <a href="/download/windows?source=footer" class="nav-cta" style="width:fit-content; margin-top: 8px;">Get from Microsoft Store</a>
3986                    </div>
3987                    <div class="fc-col">
3988                        <h4>Legal</h4>
3989                        <a href="/privacy">Privacy Policy</a>
3990                        <a href="/security">Security & Data</a>
3991                        <a href="/terms">Terms of Service</a>
3992                    </div>
3993                </div>
3994            </div>
3995            
3996            <div class="footer-bottom">
3997                <span>© 2026 Deskly. All rights reserved.</span>
3998            </div>
3999        </div>
4000    </footer>
4001
4002    <!-- ── JS ────────────────────────────────────── -->
4003    
4003<script>
4004        (function () {
4005            'use strict';
4006
4007            const authHintStorageKey = 'deskly_web_auth_hint_v1';
4008
4009            // Delegates to the shared posthog-js wrapper loaded via /js/analytics.js.
4010            const captureAnalytics = (eventName, properties = {}) =>
4011                window.desklyAnalytics?.capture(eventName, properties);
4012
4013            const syncReleaseBadge = async () => {
4014                const versionNode = document.querySelector('[data-release-version]');
4015                if (!versionNode) return;
4016
4017                try {
4018                    const response = await fetch('/api/release-version', {
4019                        method: 'GET',
4020                        headers: { 'Accept': 'application/json' },
4021                    });
4022
4023                    if (!response.ok) {
4024                        return;
4025                    }
4026
4027                    const payload = await response.json();
4028                    const tag = typeof payload?.tag === 'string' ? payload.tag.trim() : '';
4029                    if (tag) {
4030                        versionNode.textContent = tag;
4031                    }
4032                } catch (_) {
4033                    // Keep fallback text when version lookup fails.
4034                }
4035            };
4036
4037            captureAnalytics('web.landing.viewed', {
4038                referrer: document.referrer ? 'external' : 'direct',
4039            });
4040            syncReleaseBadge();
4041
4042            const updateAuthLinks = (user) => {
4043                const authLinks = document.querySelectorAll('[data-auth-link]');
4044                if (!authLinks.length) return;
4045
4046                authLinks.forEach((link) => {
4047                    if (!(link instanceof HTMLAnchorElement)) return;
4048                    link.setAttribute('href', '/account');
4049
4050                    if (user) {
4051                        const displayName = (user.name || user.email || 'Account').trim();
4052                        const shortName = displayName.split(' ')[0].slice(0, 18);
4053                        link.textContent = `Account (${shortName})`;
4054                        link.setAttribute('aria-label', 'Open your account');
4055                    } else {
4056                        link.textContent = 'Sign in';
4057                        link.setAttribute('aria-label', 'Sign in to your account');
4058                    }
4059                });
4060            };
4061
4062            const readAuthHint = () => {
4063                try {
4064                    const raw = localStorage.getItem(authHintStorageKey);
4065                    if (!raw) return null;
4066                    const parsed = JSON.parse(raw);
4067                    if (!parsed || typeof parsed !== 'object') return null;
4068                    const ts = Number(parsed.ts || 0);
4069                    if (!Number.isFinite(ts) || Date.now() - ts > 14 * 24 * 60 * 60 * 1000) {
4070                        localStorage.removeItem(authHintStorageKey);
4071                        return null;
4072                    }
4073                    return parsed.user || null;
4074                } catch (_) {
4075                    return null;
4076                }
4077            };
4078
4079            const writeAuthHint = (user) => {
4080                try {
4081                    if (!user) {
4082                        localStorage.removeItem(authHintStorageKey);
4083                        return;
4084                    }
4085                    localStorage.setItem(authHintStorageKey, JSON.stringify({ user, ts: Date.now() }));
4086                } catch (_) {
4087                    // Ignore storage failures.
4088                }
4089            };
4090
4091            const syncAuthState = async () => {
4092                try {
4093                    const response = await fetch('/api/me', {
4094                        method: 'GET',
4095                        credentials: 'include',
4096                        headers: { 'Accept': 'application/json' },
4097                    });
4098
4099                    if (!response.ok) {
4100                        const hintedUser = readAuthHint();
4101                        updateAuthLinks(hintedUser);
4102                        return;
4103                    }
4104
4105                    const payload = await response.json();
4106                    const activeUser = payload?.user || null;
4107                    writeAuthHint(activeUser);
4108                    updateAuthLinks(activeUser);
4109                } catch (_) {
4110                    const hintedUser = readAuthHint();
4111                    updateAuthLinks(hintedUser);
4112                }
4113            };
4114
4115            syncAuthState();
4116            window.addEventListener('focus', syncAuthState);
4117            document.addEventListener('visibilitychange', () => {
4118                if (!document.hidden) syncAuthState();
4119            });
4120
4121            // ── Mobile menu (burger + close + nav links) ──
4122            const mobMenu = document.querySelector('.mob-menu');
4123            const burger = document.querySelector('.burger');
4124            const mobClose = document.querySelector('.mob-close');
4125            const focusableSelector = 'a[href]:not([tabindex="-1"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])';
4126            let lastFocusedElement = null;
4127
4128            const setBackgroundInert = (isInert) => {
4129                Array.from(document.body.children).forEach((child) => {
4130                    if (child === mobMenu || child.tagName === 'SCRIPT') return;
4131
4132                    if (isInert) {
4133                        child.dataset.prevAriaHidden = child.getAttribute('aria-hidden') ?? '';
4134                        child.setAttribute('aria-hidden', 'true');
4135                        child.setAttribute('inert', '');
4136                    } else {
4137                        const prevAriaHidden = child.dataset.prevAriaHidden;
4138                        if (prevAriaHidden === '') {
4139                            child.removeAttribute('aria-hidden');
4140                        } else if (prevAriaHidden !== undefined) {
4141                            child.setAttribute('aria-hidden', prevAriaHidden);
4142                        }
4143                        delete child.dataset.prevAriaHidden;
4144                        child.removeAttribute('inert');
4145                    }
4146                });
4147            };
4148
4149            const getMenuFocusable = () => {
4150                if (!mobMenu) return [];
4151                return Array.from(mobMenu.querySelectorAll(focusableSelector));
4152            };
4153
4154            const openMenu = () => {
4155                if (!mobMenu) return;
4156                lastFocusedElement = document.activeElement;
4157                mobMenu.classList.add('open');
4158                mobMenu.setAttribute('aria-hidden', 'false');
4159                document.body.classList.add('mob-menu-open');
4160                burger?.setAttribute('aria-expanded', 'true');
4161                setBackgroundInert(true);
4162                captureAnalytics('web.nav.opened', { nav_source: 'burger' });
4163
4164                const [firstFocusable] = getMenuFocusable();
4165                (firstFocusable || mobMenu).focus();
4166            };
4167
4168            const closeMenu = ({ restoreFocus = true } = {}) => {
4169                if (!mobMenu) return;
4170                mobMenu.classList.remove('open');
4171                mobMenu.setAttribute('aria-hidden', 'true');
4172                document.body.classList.remove('mob-menu-open');
4173                burger?.setAttribute('aria-expanded', 'false');
4174                setBackgroundInert(false);
4175                captureAnalytics('web.nav.closed', { nav_source: 'mobile_menu' });
4176
4177                if (restoreFocus && lastFocusedElement instanceof HTMLElement) {
4178                    lastFocusedElement.focus();
4179                } else if (restoreFocus) {
4180                    burger?.focus();
4181                }
4182            };
4183
4184            if (burger && mobMenu) {
4185                burger.addEventListener('click', () => {
4186                    if (mobMenu.classList.contains('open')) {
4187                        closeMenu();
4188                    } else {
4189                        openMenu();
4190                    }
4191                });
4192            }
4193
4194            if (mobClose) {
4195                mobClose.addEventListener('click', () => closeMenu());
4196            }
4197
4198            mobMenu?.addEventListener('click', (event) => {
4199                if (event.target === mobMenu) {
4200                    closeMenu({ restoreFocus: false });
4201                }
4202            });
4203
4204            mobMenu?.querySelectorAll('a[href]').forEach(link => {
4205                link.addEventListener('click', () => closeMenu({ restoreFocus: false }));
4206            });
4207
4208            // ── Nav scroll ──
4209            const nav = document.getElementById('nav');
4210            let ticking = false;
4211
4212            function onScroll() {
4213                if (!ticking) {
4214                    requestAnimationFrame(() => {
4215                        nav.classList.toggle('scrolled', window.scrollY > 8);
4216                        ticking = false;
4217                    });
4218                    ticking = true;
4219                }
4220            }
4221
4222            window.addEventListener('scroll', onScroll, { passive: true });
4223            onScroll();
4224
4225            // ── Intersection Observer reveal ──
4226            const seenSections = new Set();
4227            const observer = new IntersectionObserver((entries) => {
4228                entries.forEach(entry => {
4229                    if (entry.isIntersecting) {
4230                        entry.target.classList.add('visible');
4231
4232                        const section = entry.target.closest('section');
4233                        const sectionId = section?.id || section?.className?.split(' ')[0];
4234                        if (sectionId && !seenSections.has(sectionId)) {
4235                            seenSections.add(sectionId);
4236                            captureAnalytics('web.section.viewed', { section: sectionId });
4237                        }
4238
4239                        observer.unobserve(entry.target);
4240                    }
4241                });
4242            }, {
4243                threshold: 0.06,
4244                rootMargin: '0px 0px -40px 0px'
4245            });
4246
4247            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
4248
4249            // ── Smooth anchor scrolling ──
4250            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4251                anchor.addEventListener('click', e => {
4252                    const href = anchor.getAttribute('href');
4253                    if (!href || href === '#') return;
4254
4255                    captureAnalytics('web.nav.link_clicked', {
4256                        href,
4257                        nav_source: 'anchor',
4258                    });
4259
4260                    const target = document.querySelector(href);
4261                    if (target) {
4262                        e.preventDefault();
4263                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
4264                    }
4265                });
4266            });
4267
4268            // ── Dialog keyboard behavior (Escape + focus trap) ──
4269            document.addEventListener('keydown', e => {
4270                if (!mobMenu?.classList.contains('open')) return;
4271
4272                if (e.key === 'Escape') {
4273                    e.preventDefault();
4274                    closeMenu();
4275                    return;
4276                }
4277
4278                if (e.key === 'Tab') {
4279                    const focusables = getMenuFocusable();
4280                    if (focusables.length === 0) {
4281                        e.preventDefault();
4282                        mobMenu.focus();
4283                        return;
4284                    }
4285
4286                    const first = focusables[0];
4287                    const last = focusables[focusables.length - 1];
4288
4289                    if (e.shiftKey && document.activeElement === first) {
4290                        e.preventDefault();
4291                        last.focus();
4292                    } else if (!e.shiftKey && document.activeElement === last) {
4293                        e.preventDefault();
4294                        first.focus();
4295                    }
4296                }
4297            });
4298
4299            window.addEventListener('resize', () => {
4300                if (window.innerWidth > 640 && mobMenu?.classList.contains('open')) {
4301                    closeMenu({ restoreFocus: false });
4302                }
4303            }, { passive: true });
4304
4305            // ── Ticker behavior: pause on hover and when offscreen ──
4306            const ticker = document.querySelector('.ticker');
4307            const browsersSection = document.querySelector('.browsers');
4308            if (ticker) {
4309                ticker.addEventListener('mouseenter', () => ticker.style.animationPlayState = 'paused');
4310                ticker.addEventListener('mouseleave', () => ticker.style.animationPlayState = 'running');
4311
4312                if (browsersSection) {
4313                    const tickerObserver = new IntersectionObserver((entries) => {
4314                        const [entry] = entries;
4315                        ticker.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';
4316                    }, { threshold: 0.05 });
4317                    tickerObserver.observe(browsersSection);
4318                }
4319            }
4320
4321            // ── Animated number counters ──
4322            const numObserver = new IntersectionObserver((entries) => {
4323                entries.forEach(entry => {
4324                    if (entry.isIntersecting) {
4325                        const vals = entry.target.querySelectorAll('.num-val[data-target]');
4326                        vals.forEach(el => {
4327                            const target = parseInt(el.dataset.target);
4328                            const suffix = el.dataset.suffix || '';
4329                            const duration = 1400;
4330                            const start = performance.now();
4331                            function tick(now) {
4332                                const elapsed = now - start;
4333                                const progress = Math.min(elapsed / duration, 1);
4334                                const eased = 1 - Math.pow(1 - progress, 4); // easeOutQuart
4335                                const current = Math.round(eased * target);
4336                                el.textContent = current + suffix;
4337                                if (progress < 1) requestAnimationFrame(tick);
4338                            }
4339                            requestAnimationFrame(tick);
4340                        });
4341                        numObserver.unobserve(entry.target);
4342                    }
4343                });
4344            }, { threshold: 0.3 });
4345
4346            const numGrid = document.querySelector('.numbers-gri
4346d');
4347            if (numGrid) numObserver.observe(numGrid);
4348
4349            // ── Parallax mockup scroll ──
4350            const windowEl = document.querySelector('.window');
4351            const mockupSec = document.querySelector('.mockup-section');
4352            const prefersRM = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
4353            if (windowEl && mockupSec && window.innerWidth > 960 && !prefersRM) {
4354                let pTick = false;
4355                window.addEventListener('scroll', () => {
4356                    if (!pTick) {
4357                        requestAnimationFrame(() => {
4358                            if (!windowEl.classList.contains('visible')) { pTick = false; return; }
4359                            const rect = mockupSec.getBoundingClientRect();
4360                            const vh = window.innerHeight;
4361                            if (rect.top < vh && rect.bottom > 0) {
4362                                const p = (vh - rect.top) / (vh + rect.height);
4363                                windowEl.style.transform = `translateY(${(p - 0.5) * -24}px)`;
4364                            }
4365                            pTick = false;
4366                        });
4367                        pTick = true;
4368                    }
4369                }, { passive: true });
4370            }
4371
4372            // ── Feature card spotlight ──
4373            const fgEl = document.querySelector('.fg');
4374            if (fgEl) {
4375                const cards = Array.from(fgEl.querySelectorAll('.fc'));
4376                let cardRects = [];
4377                let rafId = null;
4378                let pointer = { x: 0, y: 0 };
4379
4380                const recalcRects = () => {
4381                    cardRects = cards.map(card => card.getBoundingClientRect());
4382                };
4383
4384                const flushSpotlight = () => {
4385                    cards.forEach((card, idx) => {
4386                        const r = cardRects[idx];
4387                        if (!r) return;
4388                        card.style.setProperty('--mx', (pointer.x - r.left) + 'px');
4389                        card.style.setProperty('--my', (pointer.y - r.top) + 'px');
4390                    });
4391                    rafId = null;
4392                };
4393
4394                recalcRects();
4395                fgEl.addEventListener('mouseenter', recalcRects);
4396                window.addEventListener('resize', recalcRects, { passive: true });
4397                window.addEventListener('scroll', recalcRects, { passive: true });
4398
4399                fgEl.addEventListener('mousemove', (e) => {
4400                    pointer = { x: e.clientX, y: e.clientY };
4401                    if (rafId === null) {
4402                        rafId = requestAnimationFrame(flushSpotlight);
4403                    }
4404                });
4405            }
4406
4407            // ── Prefers reduced motion ──
4408            if (prefersRM) {
4409                document.querySelectorAll('.hero-anim').forEach(el => {
4410                    el.style.animation = 'none';
4411                    el.style.opacity = '1';
4412                });
4413                document.querySelectorAll('.reveal').forEach(el => {
4414                    el.classList.add('visible');
4415                });
4416                if (ticker) ticker.style.animationPlayState = 'paused';
4417            }
4418
4419            // [data-analytics-event] clicks are handled globally by the shared
4420            // /js/analytics.js delegated listener — no per-page handler needed.
4421
4422            document.querySelectorAll('nav a[href]:not([data-analytics-event]), .mob-menu a[href]:not([data-analytics-event]), .footer-links a[href]:not([data-analytics-event])').forEach((link) => {
4423                link.addEventListener('click', () => {
4424                    captureAnalytics('web.nav.link_clicked', {
4425                        href: link.getAttribute('href') || '/',
4426                        nav_source: link.closest('nav') ? 'top_nav' : (link.closest('.mob-menu') ? 'mobile_nav' : 'footer_nav'),
4427                    });
4428                });
4429            });
4430        })();
4431    </script>
4431
4432
4433    
4433<script>
4434        document.addEventListener('DOMContentLoaded', () => {
4435            const tabs = document.querySelectorAll('.mtab');
4436            const panes = document.querySelectorAll('.mockup-pane');
4437            
4438            tabs.forEach(tab => {
4439                tab.addEventListener('click', () => {
4440                    tabs.forEach(t => t.classList.remove('active'));
4441                    tab.classList.add('active');
4442                    
4443                    const targetId = tab.dataset.target;
4444                    panes.forEach(p => p.classList.remove('active'));
4445
4446                    const targetPane = document.getElementById(targetId);
4447                    if (targetPane) targetPane.classList.add('active');
4448                });
4449            });
4450
4451            // Defer the 8MB background video fetch until its section is
4452            // about to scroll into view, so it doesn't compete with fonts/
4453            // CSS/JS for bandwidth during first paint.
4454            const bgVideo = document.querySelector('.mockup-video');
4455            if (bgVideo && bgVideo.dataset.src) {
4456                if (window.IntersectionObserver) {
4457                    const videoObserver = new IntersectionObserver((entries, observer) => {
4458                        entries.forEach((entry) => {
4459                            if (entry.isIntersecting) {
4460                                bgVideo.src = bgVideo.dataset.src;
4461                                bgVideo.play().catch(() => {});
4462                                observer.disconnect();
4463                            }
4464                        });
4465                    }, { rootMargin: '600px 0px' });
4466                    videoObserver.observe(bgVideo);
4467                } else {
4468                    bgVideo.src = bgVideo.dataset.src;
4469                    bgVideo.play().catch(() => {});
4470                }
4471            }
4472            // ── DYNAMIC HERO ARROW ──
4473            // ── DYNAMIC HERO ARROW ──
4474            (function() {
4475                const targetBtn = document.querySelector('.hero .btn-primary');
4476                const heroSection = document.querySelector('.hero');
4477                if (!targetBtn || !heroSection) return;
4478
4479                const canvas = document.createElement('canvas');
4480                canvas.style.position = 'absolute';
4481                canvas.style.top = '0';
4482                canvas.style.left = '0';
4483                canvas.style.pointerEvents = 'none';
4484                canvas.style.zIndex = '50';
4485                heroSection.appendChild(canvas);
4486
4487                const ctx = canvas.getContext('2d');
4488                let mousePos = { x: null, y: null };
4489                let rafId = null;
4490
4491                let targetCenter = { cx: 0, cy: 0, width: 0, height: 0 };
4492                let heroDocTop = 0;
4493                let heroDocLeft = 0;
4494                let heroRectHeight = 0;
4495
4496                const updatePositions = () => {
4497                    canvas.width = heroSection.offsetWidth;
4498                    canvas.height = heroSection.offsetHeight;
4499
4500                    const heroRect = heroSection.getBoundingClientRect();
4501                    const targetRect = targetBtn.getBoundingClientRect();
4502                    
4503                    heroDocTop = heroRect.top + window.scrollY;
4504                    heroDocLeft = heroRect.left + window.scrollX;
4505                    heroRectHeight = heroRect.height;
4506                    
4507                    targetCenter.cx = targetRect.left - heroRect.left + targetRect.width / 2;
4508                    targetCenter.cy = targetRect.top - heroRect.top + targetRect.height / 2;
4509                    targetCenter.width = targetRect.width;
4510                    targetCenter.height = targetRect.height;
4511                };
4512
4513                const handleMouseMove = (e) => {
4514                    // Use page coordinates for zero layout thrashing on scroll
4515                    mousePos.x = e.pageX - heroDocLeft;
4516                    mousePos.y = e.pageY - heroDocTop;
4517                    
4518                    if (mousePos.y > heroRectHeight || mousePos.y < 0) {
4519                        mousePos.x = null;
4520                        mousePos.y = null;
4521                    }
4522                };
4523
4524                window.addEventListener('resize', updatePositions);
4525                window.addEventListener('mousemove', handleMouseMove);
4526                updatePositions(); // Initial calculation
4527
4528                // Layout can still shift after this point (web font swap, hero
4529                // image/video finishing load), which would leave targetCenter
4530                // stale — re-measure once things settle.
4531                window.addEventListener('load', updatePositions);
4532                if (document.fonts && document.fonts.ready) {
4533                    document.fonts.ready.then(updatePositions);
4534                }
4535                if (window.ResizeObserver) {
4536                    const ro = new ResizeObserver(updatePositions);
4537                    ro.observe(heroSection);
4538                    ro.observe(targetBtn);
4539                }
4540
4541                const drawArrow = () => {
4542                    if (mousePos.x === null || mousePos.y === null) return;
4543
4544                    const { cx, cy, width, height } = targetCenter;
4545
4546                    const a = Math.atan2(cy - mousePos.y, cx - mousePos.x);
4547                    const x1 = cx - Math.cos(a) * (width / 2 + 12);
4548                    const y1 = cy - Math.sin(a) * (height / 2 + 12);
4549
4550                    const midX = (mousePos.x + x1) / 2;
4551                    const midY = (mousePos.y + y1) / 2;
4552                    const offset = Math.min(200, Math.hypot(x1 - mousePos.x, y1 - mousePos.y) * 0.5);
4553                    const t = Math.max(-1, Math.min(1, (mousePos.y - y1) / 200));
4554                    const controlX = midX;
4555                    const controlY = midY + offset * t;
4556
4557                    const r = Math.sqrt((x1 - mousePos.x)**2 + (y1 - mousePos.y)**2);
4558                    
4559                    // Fades in as mouse moves further away
4560                    const opacity = Math.min(1.0, (r - Math.max(width, height) / 2) / 400);
4561
4562                    if (opacity <= 0.01) return; // hide if very close
4563
4564                    // Deskly primary color: #3D6BEA
4565                    ctx.strokeStyle = `rgba(61, 107, 234, ${opacity})`;
4566                    ctx.lineWidth = 2;
4567
4568                    // Draw dashed curve
4569                    ctx.save();
4570                    ctx.beginPath();
4571                    ctx.moveTo(mousePos.x, mousePos.y);
4572                    ctx.quadraticCurveTo(controlX, controlY, x1, y1);
4573                    ctx.setLineDash([10, 8]);
4574                    ctx.stroke();
4575                    ctx.restore();
4576
4577                    // Draw arrowhead
4578                    const angle = Math.atan2(y1 - controlY, x1 - controlX);
4579                    const headLength = 10 * (ctx.lineWidth / 1.5);
4580                    ctx.beginPath();
4581                    ctx.moveTo(x1, y1);
4582                    ctx.lineTo(
4583                        x1 - headLength * Math.cos(angle - Math.PI / 6),
4584                        y1 - headLength * Math.sin(angle - Math.PI / 6)
4585                    );
4586                    ctx.moveTo(x1, y1);
4587                    ctx.lineTo(
4588                        x1 - headLength * Math.cos(angle + Math.PI / 6),
4589                        y1 - headLength * Math.sin(angle + Math.PI / 6)
4590                    );
4591                    ctx.stroke();
4592                };
4593
4594                const animateLoop = () => {
4595                    ctx.clearRect(0, 0, canvas.width, canvas.height);
4596                    drawArrow();
4597                    rafId = requestAnimationFrame(animateLoop);
4598                };
4599
4600                animateLoop();
4601
4602                // Stop redrawing every frame once the hero has scrolled out
4603                // of view — the loop otherwise runs for the whole session.
4604                if (window.IntersectionObserver) {
4605                    const heroVisibility = new IntersectionObserver((entries) => {
4606                        entries.forEach((entry) => {
4607                            if (entry.isIntersecting && rafId === null) {
4608                                animateLoop();
4609                            } else if (!entry.isIntersecting && rafId !== null) {
4610                                cancelAnimationFrame(rafId);
4611                                rafId = null;
4612                            }
4613                        });
4614                    });
4615                    heroVisibility.observe(heroSection);
4616                }
4617            })();
4618        });
4619    </script>
4619
4620
4621    
4622
4623    <!-- Lenis Smooth Scroll -->
4624    
4624<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
4624
4625    
4625<script>
4626        document.addEventListener("DOMContentLoaded", () => {
4627            try {
4628                new Lenis({
4629                    autoRaf: true,
4630                    duration: 1.5,
4631                    smoothWheel: true,
4632                    wheelMultiplier: 1.2,
4633                    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
4634                });
4635            } catch (e) {}
4636        });
4637    </script>
4637
4638</body>
4639
4640</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.