@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }
.feature-item{
            transition: all 0.2s ease;
        }
.feature-item:hover{
            transform: translateX(4px);
        }
.gradient-bg{
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
.gradient-bg-dark{
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }
.feature-card{
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
.feature-card:hover{
            transform: translateY(-8px);
        }
.animate-on-scroll{
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
.animate-on-scroll.animated{
            opacity: 1;
            transform: translateY(0);
        }
.glass-effect{
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
.hero-gradient{
            background: linear-gradient(130deg, #F4F4FF 0%, #FFF 22.64%, #EEEBFF 49.32%, #F2F2FF 72.5%, #F3F0FF 100%);
        }
.productivity-hero{
            padding-top: 7.25rem;
            padding-bottom: 0;
        }
.productivity-hero__badge{
            box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.04);
        }
.productivity-hero__title{
            font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
            line-height: 1.08 !important;
            letter-spacing: -0.045em !important;
        }
.productivity-hero__title-accent{
            display: block;
            background: linear-gradient(90deg, #635bff 0%, #7278ff 55%, #6258f4 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
.productivity-hero__preview{
            width: min(100%, 1280px);
            margin: 1.75rem auto 0;
            overflow: hidden;
            border: 1px solid rgba(99, 102, 241, 0.18);
            border-radius: 1.25rem 1.25rem 0 0;
            box-shadow: 0 28px 70px rgba(54, 47, 120, 0.18);
        }
.productivity-hero__preview img{
            display: block;
            width: 100%;
            height: auto;
        }
.productivity-overview{
            background: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
        }
.productivity-overview__title-accent{
            display: block;
            background: linear-gradient(90deg, #635bff 0%, #746df6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
.productivity-overview__grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.25rem;
        }
.productivity-overview__card{
            display: flex;
            min-width: 0;
            flex-direction: column;
            padding: 1.25rem;
            border: 1px solid #e9e9f5;
            border-radius: 1.25rem;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 20px 50px rgba(78, 70, 140, 0.08);
        }
.productivity-overview__visual{
            height: 214px;
            overflow: hidden;
            padding: 0.875rem;
            border-radius: 0.875rem;
            background: #f7f8ff;
            color: #334155;
        }
.productivity-overview__card-heading{
            display: flex;
            align-items: center;
            gap: 0.875rem;
            margin-top: 1rem;
        }
.productivity-overview__icon{
            display: inline-flex;
            width: 3.25rem;
            height: 3.25rem;
            flex: 0 0 3.25rem;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(99, 102, 241, 0.16);
            border-radius: 0.875rem;
            background: #f0edff;
            color: #635bff;
        }
.productivity-overview__icon--blue{
            border-color: rgba(59, 130, 246, 0.18);
            background: #eaf5ff;
            color: #2684ff;
        }
.productivity-overview__card h3{
            color: #111827;
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.25;
        }
.productivity-overview__card-copy{
            margin: 0.875rem 0 1rem 4.125rem;
            color: #526078;
            font-size: 0.975rem;
            line-height: 1.55;
        }
.productivity-overview__link{
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            align-self: flex-start;
            margin-top: auto;
            padding: 0.625rem 0.875rem;
            border-radius: 0.625rem;
            background: #f1efff;
            color: #635bff;
            font-weight: 600;
            transition: background-color 180ms ease, transform 180ms ease;
        }
.productivity-overview__link:hover{
            background: #e7e3ff;
            transform: translateY(-1px);
        }
.productivity-board__top,.productivity-activity__top,.productivity-analytics__stats{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }
.productivity-board__top{
            padding-bottom: 0.75rem;
            font-size: 0.625rem;
        }
.productivity-board__project{
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: #1e293b;
            font-weight: 600;
        }
.productivity-board__project span:first-child{
            display: inline-flex;
            width: 1.25rem;
            height: 1.25rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.35rem;
            background: #6d5dfc;
            color: #fff;
        }
.productivity-board__tabs{
            display: flex;
            gap: 0.9rem;
            color: #526078;
        }
.productivity-board__tabs span:first-child{
            color: #635bff;
        }
.productivity-board__columns{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
        }
.productivity-board__column{
            min-width: 0;
            padding: 0.5rem;
            border: 1px solid #e4e8f3;
            border-radius: 0.5rem;
            background: #fff;
        }
.productivity-board__column-title{
            margin-bottom: 0.4rem;
            color: #475569;
            font-size: 0.625rem;
            font-weight: 600;
        }
.productivity-board__column--done .productivity-board__column-title{
            color: #059669;
        }
.productivity-board__task{
            margin-top: 0.35rem;
            padding: 0.45rem;
            border-radius: 0.4rem;
            background: #f5f7ff;
            color: #1e293b;
            font-size: 0.56rem;
            line-height: 1.35;
        }
.productivity-board__meta{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 0.35rem;
            color: #526078;
            font-size: 0.5rem;
        }
.productivity-board__priority{
            padding: 0.15rem 0.3rem;
            border-radius: 999px;
            background: rgba(245, 158, 11, 0.16);
            color: #b45309;
        }
.productivity-activity__top{
            color: #1e293b;
            font-size: 0.7rem;
            font-weight: 600;
        }
.productivity-activity__filter{
            padding: 0.25rem 0.45rem;
            border: 1px solid #dce3f0;
            border-radius: 0.35rem;
            color: #526078;
            font-size: 0.55rem;
            font-weight: 400;
        }
.productivity-activity__timeline{
            display: flex;
            height: 1.45rem;
            margin: 0.8rem 0 0.35rem;
            overflow: hidden;
            border-radius: 0.25rem;
            background: #e5eaf5;
        }
.productivity-activity__timeline span:nth-child(1){ width: 24%; background: #43d48f; }
.productivity-activity__timeline span:nth-child(2){ width: 12%; background: #36a5e8; }
.productivity-activity__timeline span:nth-child(3){ width: 25%; background: #4fda7e; }
.productivity-activity__timeline span:nth-child(4){ width: 14%; background: #f8b84d; }
.productivity-activity__timeline span:nth-child(5){ width: 17%; background: #7367f8; }
.productivity-activity__timeline span:nth-child(6){ width: 8%; background: #45a8e8; }
.productivity-activity__hours{
            display: flex;
            justify-content: space-between;
            color: #526078;
            font-size: 0.5rem;
        }
.productivity-activity__label{
            margin: 0.65rem 0 0.3rem;
            color: #526078;
            font-size: 0.55rem;
        }
.productivity-activity__row{
            display: grid;
            grid-template-columns: minmax(0, 1fr) 2.5rem minmax(3.5rem, 1fr);
            align-items: center;
            gap: 0.5rem;
            padding: 0.34rem 0;
            color: #334155;
            font-size: 0.58rem;
        }
.productivity-activity__app{
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
.productivity-activity__app-icon{
            display: inline-flex;
            width: 1rem;
            height: 1rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
            background: #2778ea;
            color: white;
            font-size: 0.5rem;
        }
.productivity-activity__bar{
            height: 0.5rem;
            overflow: hidden;
            border-radius: 999px;
            background: #e5eaf5;
        }
.productivity-activity__bar span{
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #7569ff, #9b83ff);
        }
.productivity-analytics__stats{
            align-items: stretch;
        }
.productivity-analytics__stat{
            flex: 1;
            min-width: 0;
            padding: 0.55rem;
            border-radius: 0.45rem;
            background: #fff;
            box-shadow: inset 0 0 0 1px #e4e8f3;
        }
.productivity-analytics__number{
            color: #059669;
            font-size: 1rem;
            line-height: 1;
        }
.productivity-analytics__stat:nth-child(2) .productivity-analytics__number{ color: #2563eb; }
.productivity-analytics__stat:nth-child(3) .productivity-analytics__number{ color: #dc2626; }
.productivity-analytics__stat:nth-child(4) .productivity-analytics__number{ color: #7c3aed; }
.productivity-analytics__stat-label{
            margin-top: 0.35rem;
            color: #526078;
            font-size: 0.45rem;
            white-space: nowrap;
        }
.productivity-analytics__trend{
            margin-top: 0.25rem;
            color: #059669;
            font-size: 0.45rem;
        }
.productivity-analytics__trend--down{ color: #dc2626; }
.productivity-analytics__panels{
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 0.55rem;
            margin-top: 0.6rem;
        }
.productivity-analytics__panel{
            padding: 0.6rem;
            border-radius: 0.45rem;
            background: #fff;
            box-shadow: inset 0 0 0 1px #e4e8f3;
        }
.productivity-analytics__panel-title{
            margin-bottom: 0.65rem;
            color: #1e293b;
            font-size: 0.58rem;
            font-weight: 600;
        }
.productivity-analytics__progress,.productivity-analytics__alert{
            display: grid;
            grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
            align-items: center;
            gap: 0.3rem;
            margin-top: 0.55rem;
            color: #475569;
            font-size: 0.46rem;
        }
.productivity-analytics__progress-bar{
            height: 0.35rem;
            overflow: hidden;
            border-radius: 999px;
            background: #e5eaf5;
        }
.productivity-analytics__progress-bar span{
            display: block;
            height: 100%;
            border-radius: inherit;
            background: #4aa8ee;
        }
.productivity-analytics__alert{
            grid-template-columns: 1rem minmax(0, 1fr);
            padding: 0.4rem;
            border-radius: 0.35rem;
            background: #fff4f4;
            color: #334155;
        }
.productivity-analytics__alert-icon{
            color: #dc2626;
        }

        @media (max-width: 1024px) {
.productivity-overview__grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
.productivity-hero{
                padding-top: 6rem;
            }
.productivity-hero__title{
                font-size: clamp(2.25rem, 11vw, 3.25rem) !important;
            }
.productivity-hero__preview{
                margin-top: 2.5rem;
                border-radius: 0.875rem 0.875rem 0 0;
            }
.productivity-overview__grid{
                grid-template-columns: 1fr;
            }
.productivity-overview__card-copy{
                margin-left: 0;
            }
.productivity-overview__visual{
                height: 200px;
            }
        }
.productivity-visibility{
            --visibility-purple: #7160ff;
            --visibility-ink: #0d1221;
            --visibility-muted: #637087;
            --vs-font-size-section-title: clamp(2rem, 4.3vw, 3.5rem);
            --vs-font-size-section-lead: 18px;
            --vs-font-size-section-lead-lg: 18px;
            padding: 42px 24px 12px;
            overflow: hidden;
            background: linear-gradient(135deg, #fff 0%, #fefeff 55%, #fff 100%);
        }
.productivity-visibility,.productivity-visibility *,.productivity-visibility *::before,.productivity-visibility *::after{ box-sizing: border-box; }
.productivity-visibility__inner{ max-width: 1280px; margin: 0 auto; }
.productivity-visibility__header{ max-width: 900px; margin: 0 auto 28px; text-align: center; }
.productivity-visibility__badge{
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 6px 17px;
            border-radius: 100px;
            background: #efecff;
            color: #6554ff;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
        }
.productivity-visibility__badge svg{ width: 18px; height: 18px; }
.productivity-visibility__header h2{ margin: 20px 0 16px; color: var(--visibility-ink); }
.productivity-visibility__accent{ display: block; color: var(--visibility-purple); }
.productivity-visibility__header p{ max-width: 790px; margin: 0 auto; color: var(--visibility-muted); }
.productivity-visibility__row{
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
            min-height: 360px;
        }
.productivity-visibility__row + .productivity-visibility__row{ border-top: 1px solid #ececf8; }
.productivity-visibility__row::before{
            content: "";
            position: absolute;
            top: 0;
            bottom: -20px;
            left: 50%;
            width: 1px;
            background: linear-gradient(to bottom, transparent, #e9e9f7 12%, #e9e9f7);
        }
.productivity-visibility__header + .productivity-visibility__row::before{ background: #e9e9f7; }
.productivity-visibility__row:not(:last-child)::after{
            content: "";
            position: absolute;
            bottom: -4px;
            left: calc(50% - 4px);
            z-index: 2;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d7d8ef;
        }
.productivity-visibility__row--projects{ grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 400px; }
.productivity-visibility__row--projects::before{ left: 60%; }
.productivity-visibility__row--projects:not(:last-child)::after{ left: calc(60% - 4px); }
.productivity-visibility__row--updates{ grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.productivity-visibility__row--updates::before{ left: 46%; bottom: 0; }
.productivity-visibility__copy{ min-width: 0; padding: 48px 36px; }
.productivity-visibility__eyebrow{
            display: block;
            margin-bottom: 20px;
            color: var(--visibility-purple);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
        }
.productivity-visibility__copy h3{
            margin: 0 0 18px;
            color: var(--visibility-ink);
            font-size: clamp(1.6rem, 2.8vw, 2.25rem);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.045em;
        }
.productivity-visibility__copy p{ margin: 0; color: var(--visibility-muted); font-size: 18px; line-height: 1.5; }
.productivity-visibility__visual{
            position: relative;
            min-width: 0;
            height: 340px;
            margin: 0 12px 0 26px;
            container-type: inline-size;
            isolation: isolate;
            color: #222b3d;
        }
.productivity-visibility__visual::before{
            content: "";
            position: absolute;
            z-index: -1;
            inset: 10% -5% 0;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(127, 104, 255, .12), transparent 70%);
            filter: blur(18px);
        }
.productivity-visibility__window{
            position: absolute;
            inset: 30px 10px 35px 0;
            overflow: hidden;
            border: 1px solid #e4e2fc;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 8px 34px #e9e6ff;
            opacity: .5;
            transform: perspective(900px) rotateY(-6deg) rotateZ(-1deg);
            filter: blur(2px);
        }
.productivity-visibility__window-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 42px;
            padding: 0 12px;
            border-bottom: 1px solid #efedf9;
            color: #7d75b4;
            font-size: 10px;
        }
.productivity-visibility__window-brand{ display: flex; align-items: center; gap: 7px; font-weight: 700; }
.productivity-visibility__window-brand img{ width: 14px; height: 14px; }
.productivity-visibility__window-tools{ color: #b8aef6; letter-spacing: 7px; }
.productivity-visibility__window-body{ display: grid; grid-template-columns: 23% 1fr; height: calc(100% - 42px); }
.productivity-visibility__window-nav{ display: grid; align-content: start; gap: 15px; padding: 16px 10px; border-right: 1px solid #efedf9; }
.productivity-visibility__window-nav span{ height: 8px; border-left: 7px solid #b9a8ff; background: #f0edfa; }
.productivity-visibility__window-content{ padding: 18px; }
.productivity-visibility__window-stats{ display: flex; gap: 10px; height: 46px; margin-bottom: 18px; }
.productivity-visibility__window-stats span{ flex: 1; border: 1px solid #e9e5fa; border-top: 5px solid #c5bbf7; border-radius: 5px; }
.productivity-visibility__window-stats span:nth-child(2){ border-top-color: #a9e3da; }
.productivity-visibility__window-stats span:nth-child(3){ border-top-color: #f5c4bf; }
.productivity-visibility__window-lines{ height: 125px; background: repeating-linear-gradient(#f0eef8 0 6px, transparent 6px 27px); }
.productivity-visibility__panel{
            position: absolute;
            z-index: 1;
            padding: 1.2em;
            border: 1px solid #efedff;
            border-radius: 13px;
            background: rgba(255, 255, 255, .97);
            box-shadow: 0 14px 40px rgba(110, 91, 223, .08);
            font-size: clamp(6px, 2.3cqw, 13px);
            line-height: 1.45;
        }
.productivity-visibility__panel-heading{ display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: 1em; font-weight: 600; }
.productivity-visibility__panel-heading strong{ display: inline-flex; align-items: center; gap: .65em; font-weight: 600; }
.productivity-visibility__count{ display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.8em; border-radius: 50%; background: #ff6576; color: #fff; font-size: .85em; }
.productivity-visibility__chevron{ color: #b9bdd7; font-weight: 400; }
.productivity-visibility__attention{ top: 90px; right: 0; width: 84%; }
.productivity-visibility__attention-list{ padding: .2em .65em; border: 1px solid #f2f2fa; border-radius: 10px; background: linear-gradient(120deg, #fff, #fafbff); }
.productivity-visibility__attention-item{ display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 6.2em 6.2em; align-items: center; gap: .7em; padding: .7em 0; }
.productivity-visibility__attention-item + .productivity-visibility__attention-item{ border-top: 1px solid #f6f5fc; }
.productivity-visibility__alert-icon{ display: flex; align-items: center; justify-content: center; width: 2.4em; height: 2.7em; border-radius: .55em; background: #ffe3e7; color: #ff596b; }
.productivity-visibility__alert-icon svg{ width: 1.5em; height: 1.5em; }
.productivity-visibility__alert-icon--orange{ color: #ffa51f; background: #fff0d4; }
.productivity-visibility__alert-icon--yellow{ color: #f4b000; background: #fff3b5; }
.productivity-visibility__task{ font-size: .93em; font-weight: 500; white-space: nowrap; }
.productivity-visibility__detail{ display: block; margin-top: .2em; color: #7d889e; font-size: .92em; font-weight: 400; }
.productivity-visibility__person{ display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; color: #525d73; font-size: .93em; }
.productivity-visibility__avatar{ width: 2em; height: 2em; flex: 0 0 2em; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.productivity-visibility__mock-button{ padding: .45em .4em; border: 1px solid #cdc5ff; border-radius: .35em; background: #faf9ff; color: #7863ff; text-align: center; white-space: nowrap; font-size: .95em; }
.productivity-visibility__visual--projects{ height: 360px; margin: 0 28px 0 36px; }
.productivity-visibility__visual--projects .productivity-visibility__window{ inset: 18px 20px 35px 7px; transform: none; }
.productivity-visibility__projects{ top: 64px; left: 0; width: 100%; font-size: clamp(5px, 1.9cqw, 12px); }
.productivity-visibility__search{ width: 42%; padding: .5em .7em; border: 1px solid #eeeef7; border-radius: .4em; background: #fafbff; color: #8a94a7; font-size: .85em; font-weight: 400; }
.productivity-visibility__filter{ padding: .4em .65em; border: 1px solid #eeeef7; border-radius: .35em; background: #fafbff; color: #7a8498; font-size: .85em; font-weight: 400; white-space: nowrap; }
.productivity-visibility__table{ width: 100%; border-collapse: collapse; text-align: left; font-size: .88em; white-space: nowrap; }
.productivity-visibility__table th{ padding: .8em .45em; border-top: 1px solid #f3f3f9; color: #8590a4; font-weight: 400; }
.productivity-visibility__table td{ padding: .65em .45em; border-top: 1px solid #f6f6fb; vertical-align: middle; }
.productivity-visibility__project-name{ display: flex; align-items: center; gap: .5em; font-weight: 500; }
.productivity-visibility__project-icon{ display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.9em; border-radius: .4em; background: linear-gradient(135deg, #a78bfa, #704cf0); color: #fff; }
.productivity-visibility__project-icon svg{ width: 1.2em; height: 1.2em; }
.productivity-visibility__project-icon--blue{ background: #5684ff; }
.productivity-visibility__project-icon--violet{ background: #9b68ff; }
.productivity-visibility__progress{ display: flex; align-items: center; gap: .4em; }
.productivity-visibility__bar{ display: block; width: 5.5em; height: .65em; overflow: hidden; border-radius: 100px; background: #eeedf8; }
.productivity-visibility__bar span{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a898ff, #7a6aff); }
.productivity-visibility__status{ display: inline-flex; align-items: center; gap: .4em; padding: .25em .5em; border-radius: 100px; background: #fff0f2; color: #f35e70; font-size: .9em; }
.productivity-visibility__status::before{ content: ""; width: .55em; height: .55em; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.productivity-visibility__status--green{ color: #16b46c; background: #e9faf1; }
.productivity-visibility__table .productivity-visibility__overdue{ color: #ff6177; text-align: center; }
.productivity-visibility__visual--updates{ margin-left: 30px; }
.productivity-visibility__updates{ top: 64px; left: 3%; width: 55%; font-size: clamp(6px, 2.3cqw, 12px); }
.productivity-visibility__timeline{ position: relative; display: grid; gap: .9em; }
.productivity-visibility__timeline::before{ content: ""; position: absolute; top: 1em; bottom: 1em; left: .95em; width: 1px; background: #e8edf8; }
.productivity-visibility__event{ position: relative; display: grid; grid-template-columns: 1.9em 4.6em minmax(0, 1fr); align-items: start; gap: .7em; font-size: .85em; }
.productivity-visibility__event-icon{ display: flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #e4faf3; color: #20b689; font-size: 1.12em; font-weight: 600; }
.productivity-visibility__event-icon--blue{ background: #e8edff; color: #5b82ff; }
.productivity-visibility__event-icon--red{ background: #ffe9ed; color: #ff6174; }
.productivity-visibility__event-icon--yellow{ background: #fff7de; color: #efb221; }
.productivity-visibility__event-icon svg{ width: 1.1em; height: 1.1em; }
.productivity-visibility__event time{ padding-top: .3em; color: #7e89a0; font-size: .9em; white-space: nowrap; }
.productivity-visibility__event-text{ padding-top: .2em; font-weight: 500; }
.productivity-visibility__event-text--red{ color: #ff576c; }
.productivity-visibility__workload{ top: 74px; right: 0; width: 41%; opacity: .7; }
.productivity-visibility__workload-row{ display: grid; grid-template-columns: 6.2em 2.7em minmax(0, 1fr); align-items: center; gap: .45em; margin-top: 1.5em; font-size: .9em; }
.productivity-visibility__workload-row > span:nth-child(2){ color: #8891a4; text-align: right; }
.productivity-visibility__workload-row .productivity-visibility__bar{ width: 100%; }

        @media (min-width: 768px) {
.productivity-visibility__row--projects .productivity-visibility__copy{ grid-column: 2; grid-row: 1; padding-left: 44px; padding-right: 8px; }
.productivity-visibility__row--projects h3{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.productivity-visibility__visual--projects{ grid-column: 1; grid-row: 1; }
        }

        @media (max-width: 1024px) {
.productivity-visibility__copy{ padding: 40px 24px; }
.productivity-visibility__copy p{ font-size: 17px; }
.productivity-visibility__visual--projects{ margin-left: 20px; margin-right: 20px; }
        }

        @media (max-width: 767px) {
.productivity-visibility{ --vs-font-size-section-lead: 16px; --vs-font-size-section-lead-lg: 16px; padding: 48px 20px 20px; }
.productivity-visibility__header{ margin-bottom: 22px; }
.productivity-visibility__header h2{ margin-top: 18px; }
.productivity-visibility__header p{ font-size: 16px; }
.productivity-visibility__row{ grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 24px 0; }
.productivity-visibility__row::before,.productivity-visibility__row::after{ display: none; }
.productivity-visibility__copy{ grid-row: 1; padding: 16px 4px 10px; }
.productivity-visibility__eyebrow{ margin-bottom: 14px; font-size: 12px; }
.productivity-visibility__copy h3{ font-size: clamp(1.6rem, 5vw, 2rem); margin-bottom: 14px; }
.productivity-visibility__copy p{ max-width: 540px; font-size: 16px; }
.productivity-visibility__visual{ width: 100%; max-width: 560px; height: auto; aspect-ratio: 1.5; margin: 0 auto; }
.productivity-visibility__window{ inset: 9% 3% 5% 1%; }
.productivity-visibility__attention{ top: 26%; width: 88%; }
.productivity-visibility__visual--projects .productivity-visibility__window{ inset: 8% 3% 8% 2%; }
.productivity-visibility__projects{ top: 20%; }
.productivity-visibility__updates{ top: 18%; left: 0; width: 57%; }
.productivity-visibility__workload{ top: 25%; }
        }
.progress-bar{
            transition: width 1s ease-out;
        }

        @keyframes gradient-shift {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }
.animated-gradient{
            background: linear-gradient(270deg, #7041FF, #6366F1, #A801db, #7041FF);
            background-size: 400% 400%;
        }