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 · 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 · 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 · 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 & 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.