/**/.hamburgerButton{display:block;background-color:transparent;border:0;padding:0;margin:0}.hamburgerButton,.hamburgerButton svg{width:100%;height:100%}/**/.dmNewParagraph[data-version] .text-align-left{text-align:left!important}.dmNewParagraph[data-version] .text-align-center{text-align:center!important}.dmNewParagraph[data-version] .text-align-right{text-align:right!important}
.dmNewParagraph[data-version] .text-align-justify{text-align:justify!important}.dmNewParagraph[data-version] .ql-indent-1{padding:0 1em;padding-inline-end:0;padding-inline-start:3em}.dmNewParagraph[data-version] .ql-indent-2{padding:0 2em;padding-inline-end:0;padding-inline-start:6em}
.dmNewParagraph[data-version] .ql-indent-3{padding:0 3em;padding-inline-end:0;padding-inline-start:9em}.dmNewParagraph[data-version] .ql-indent-4{padding:0 4em;padding-inline-end:0;padding-inline-start:12em}
.dmNewParagraph[data-version] .ql-indent-5{padding:0 5em;padding-inline-end:0;padding-inline-start:15em}.dmNewParagraph[data-version] .ql-indent-6{padding:0 6em;padding-inline-end:0;padding-inline-start:18em}
.dmNewParagraph[data-version] .ql-indent-7{padding:0 7em;padding-inline-end:0;padding-inline-start:21em}.dmNewParagraph[data-version] .ql-indent-8{padding:0 8em;padding-inline-end:0;padding-inline-start:24em}
.dmNewParagraph[data-version] .ql-indent-9{padding:0 9em;padding-inline-end:0;padding-inline-start:27em}.dmNewParagraph[data-version]{line-height:initial}.dmNewParagraph[data-version] [class*=size-]{width:auto!important;height:auto!important}
.dmNewParagraph[data-version] h1,.dmNewParagraph[data-version] h2,.dmNewParagraph[data-version] h3,.dmNewParagraph[data-version] h4,.dmNewParagraph[data-version] h5,.dmNewParagraph[data-version] h6,.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] p,.dmNewParagraph[data-version] ul{margin-top:0;margin-bottom:0}
.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] ul{padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.dmNewParagraph[data-version] ol>li,.dmNewParagraph[data-version] ul>li{list-style-type:none;text-indent:-1.5em;margin:0 1em;margin-inline-end:0;margin-inline-start:2em}
.dmNewParagraph[data-version] ol>li:before,.dmNewParagraph[data-version] ul>li:before{min-width:1em;display:inline-block;margin-right:.5em;margin-inline-start:0;margin-inline-end:.5em;text-align:right;text-align:end}
.dmNewParagraph[data-version] ul .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ul .ql-indent-1:before{font-weight:700;content:"○"}
.dmNewParagraph[data-version] ul .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ul .ql-indent-2:before,.dmNewParagraph[data-version] ul .ql-indent-3:before,.dmNewParagraph[data-version] ul .ql-indent-4:before,.dmNewParagraph[data-version] ul .ql-indent-5:before,.dmNewParagraph[data-version] ul .ql-indent-6:before,.dmNewParagraph[data-version] ul .ql-indent-7:before,.dmNewParagraph[data-version] ul .ql-indent-8:before,.dmNewParagraph[data-version] ul .ql-indent-9:before{font-weight:700;content:"■"}
.dmNewParagraph[data-version] ul .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ul .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}
.dmNewParagraph[data-version] ul .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ul .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}
.dmNewParagraph[data-version] ul .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ul .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ul .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}
.dmNewParagraph[data-version] ul>li:before{font-weight:700;content:"•";font-family:Arial}.dmNewParagraph[data-version] ul.custom-list-1>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"○";transform:scale(1);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-2>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"★";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-3>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"➞";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-4>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"＋";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-5>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"－";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-6>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✓";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-7>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✗";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ol .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ol .ql-indent-1:before{content:counter(list-1,lower-alpha)". "}
.dmNewParagraph[data-version] ol .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ol .ql-indent-2:before{content:counter(list-2,lower-roman)". "}
.dmNewParagraph[data-version] ol .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ol .ql-indent-3:before{content:counter(list-3,decimal)". "}
.dmNewParagraph[data-version] ol .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}.dmNewParagraph[data-version] ol .ql-indent-4:before{content:counter(list-4,lower-alpha)". "}
.dmNewParagraph[data-version] ol .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ol .ql-indent-5:before{content:counter(list-5,lower-roman)". "}
.dmNewParagraph[data-version] ol .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}.dmNewParagraph[data-version] ol .ql-indent-6:before{content:counter(list-6,decimal)". "}
.dmNewParagraph[data-version] ol .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ol .ql-indent-7:before{content:counter(list-7,lower-alpha)". "}
.dmNewParagraph[data-version] ol .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ol .ql-indent-8:before{content:counter(list-8,lower-roman)". "}
.dmNewParagraph[data-version] ol .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}.dmNewParagraph[data-version] ol .ql-indent-9:before{content:counter(list-9,decimal)". "}
.dmNewParagraph[data-version] ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.dmNewParagraph[data-version] ol li:before{content:counter(list-0,decimal)". "}
.dmNewParagraph[data-version] a{vertical-align:initial}@media(min-width:768px) and (max-width:1024px){.dmNewParagraph[data-version] .t-text-align-left{text-align:left!important}.dmNewParagraph[data-version] .t-text-align-center{text-align:center!important}
.dmNewParagraph[data-version] .t-text-align-right{text-align:right!important}.dmNewParagraph[data-version] .t-text-align-justify{text-align:justify!important}}@media(max-width:767px){.dmRoot .dmNewParagraph[data-version] .m-text-align-left{text-align:left!important}
.dmRoot .dmNewParagraph[data-version] .m-text-align-center{text-align:center!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-right{text-align:right!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-justify{text-align:justify!important}
}.inlineBindingLink{color:inherit!important;text-decoration:inherit!important}
/* Custom Widgets Styles */
@charset "UTF-8";
.widget-afdf88 {
/* ── CSS custom properties ── */
--hero-section-bg: #101626;
--hero-kicker-color: #C7D2FE;
--hero-kicker-bg: rgba(255, 255, 255, 0.06);
--hero-kicker-border: rgba(255, 255, 255, 0.14);
--hero-headline-color: #FFFFFF;
--hero-subtext-color: #94A3B8;
--hero-available-label-color: #64748B;
--hero-glow-1: rgba(99, 102, 241, 0.25);
--hero-glow-2: rgba(20, 110, 245, 0.20);
--hero-glow-3: rgba(129, 140, 248, 0.15);
box-sizing: border-box;
font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
/* ════════════════════════════════════════
SECTION & LAYOUT
════════════════════════════════════════ */
/* ── Background glows — disabled ── */
/* ── Content wrapper ── */
/* ── Animate items ── */
/* ── Kicker pill ── */
/* ── Headline ── */
/* ── Subtext ── */
/* ── Available in section ── */
/* ════════════════════════════════════════
PARENT TAB BAR
════════════════════════════════════════ */
/* ── Content wrapper ── */
/* ════════════════════════════════════════
GREEN CARD CONTAINER
════════════════════════════════════════ */
/* (hero-watch-demo-btn removed — top-right button deleted) */
/* ── Tab panels host ── */
/* ════════════════════════════════════════
FEATURED PRICING CARD (Tabs 1 & 3)
════════════════════════════════════════ */
/* Kicker pills */
/* Price row */
/* Right column */
/* CTA row */
/* Payment / cancellation note */
/* Benefits */
/* ════════════════════════════════════════
PLUG & PLAY — TWO CARD GRID
════════════════════════════════════════ */
/* PnP CTA row — two buttons side by side */
/* ── Comparison strip (Tab 2) ── */
/* ── Callout box (Tab 2) ── */
/* ════════════════════════════════════════
FULL COMPARISON TABLE (shared)
════════════════════════════════════════ */
/* Header row */
/* Single-column header (Tab 1): centered, two side-by-side sections - name+price on the left, CTA on the right */
/* Active column highlight */
/* Group label */
/* Tab 2 dark group bands */
/* Feature rows */
/* Tab 2 table: only Detailed + Detailed/Feasibility columns remain */
/* Tab 1 table: Concreters template only */
/* PnP value line, helper, benefit header, section note, time callout */
/* Green check icon (CSS-drawn) */
/* ════════════════════════════════════════
MOBILE: stacked comparison (< 768px)
════════════════════════════════════════ */
/* ════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════ */
/* Reduced motion */
}
.widget-afdf88 .hero-section {
position: relative;
overflow: hidden;
width: 100%;
background-color: var(--hero-section-bg);
border-radius: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.widget-afdf88 .hero-section::before {
display: none;
}
.widget-afdf88 .hero-glow {
display: none;
}
.widget-afdf88 .hero-content {
position: relative;
z-index: 1;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 64px 60px 120px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
}
.widget-afdf88 .animate-item, .widget-afdf88 .animate-logos {
opacity: 0;
transform: translateY(20px);
transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-afdf88 .animate-item.is-visible, .widget-afdf88 .animate-logos.is-visible {
opacity: 1;
transform: translateY(0);
}
.widget-afdf88 .animate-logos {
transform: translateY(20px) scale(0.96);
}
.widget-afdf88 .animate-logos.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.widget-afdf88 .hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 8px 18px;
background: var(--hero-kicker-bg);
border: 1px solid var(--hero-kicker-border);
border-radius: 99px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: 28px;
}
.widget-afdf88 .hero-kicker__text {
font-size: 13px;
font-weight: 500;
color: var(--hero-kicker-color);
line-height: 1;
}
.widget-afdf88 .hero-headline {
font-size: var(--hero-headline-font-size, 56px);
font-weight: 700;
color: var(--hero-headline-color);
line-height: 1 !important;
letter-spacing: -0.03em;
text-align: center;
max-width: 680px;
margin: 0 0 24px 0;
padding: 0;
}
.widget-afdf88 .hero-subtext {
font-size: 17px;
font-weight: 400;
color: var(--hero-subtext-color);
line-height: 1.6;
text-align: center;
max-width: 680px;
margin: 0 0 40px 0;
padding: 0;
}
.widget-afdf88 .hero-available {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.widget-afdf88 .hero-available__label {
font-size: 12px;
font-weight: 600;
color: var(--hero-available-label-color);
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
}
.widget-afdf88 .hero-logos {
display: flex;
align-items: center;
gap: 28px;
}
.widget-afdf88 .hero-logo-divider {
display: none;
}
.widget-afdf88 .hero-logo-separator {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
.widget-afdf88 .hero-logo {
max-height: 36px;
width: auto;
object-fit: contain;
opacity: 0.9;
display: block;
}
.widget-afdf88 .hero-logo--buildxact {
max-height: 30px;
}
.widget-afdf88 .ptab-bar {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
max-width: 100%;
overflow-x: auto;
padding: 4px;
scrollbar-width: none;
}
.widget-afdf88 .ptab-bar::-webkit-scrollbar {
display: none;
}
.widget-afdf88 .ptab-bar--top {
width: 100%;
margin-top: 8px;
margin-bottom: 32px;
}
.widget-afdf88 .ptab-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
font-family: inherit;
line-height: 1;
}
.widget-afdf88 .ptab-pill svg {
flex-shrink: 0;
transition: color 0.2s ease;
}
.widget-afdf88 .ptab-pill:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.25);
color: white;
}
.widget-afdf88 .ptab-pill--active {
background: #FCC60C;
border: 1.5px solid #FCC60C;
color: #101626;
font-weight: 700;
box-shadow: 0 4px 12px rgba(252, 198, 12, 0.35);
}
.widget-afdf88 .ptab-pill--active:hover {
background: #FCC60C;
border-color: #FCC60C;
color: #101626;
}
.widget-afdf88 .ptab-content-wrapper {
width: 100%;
transition: opacity 0.25s ease;
}
.widget-afdf88 .ptab-content-wrapper.is-fading {
opacity: 0;
transition: opacity 0.2s ease;
}
.widget-afdf88 .hero-bottom-box {
width: 100%;
background: linear-gradient(135deg, #e8f9f0 0%, #f2fce0 40%, #f7fdf5 75%, #fcfffe 100%);
border-radius: 45px;
padding: 56px 64px;
margin-top: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.widget-afdf88 .hero-bottom-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.widget-afdf88 .hero-bottom-header__left {
display: flex;
align-items: center;
}
.widget-afdf88 .hero-bottom-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 99px;
}
.widget-afdf88 .hero-bottom-kicker__text {
font-size: 12px;
font-weight: 500;
color: #4F46E5;
line-height: 1;
}
.widget-afdf88 .hero-bottom-headline {
font-size: 48px;
font-weight: 700;
color: #0F172A;
line-height: 1 !important;
letter-spacing: -0.03em;
text-align: left;
max-width: 760px;
margin: 0 0 2px 0;
padding: 0;
}
.widget-afdf88 .hero-bottom-subtext {
font-size: 13px;
font-weight: 400;
color: #475569;
line-height: 1.6;
text-align: left;
max-width: 680px;
margin: 0 0 40px 0;
padding: 0;
}
.widget-afdf88 .ptab-panels-host {
width: 100%;
}
.widget-afdf88 .ptab-panel {
width: 100%;
animation: ptab-fade-in 0.25s ease forwards;
}
@keyframes ptab-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-afdf88 .feat-card {
background: #FFFFFF;
border-radius: 20px;
padding: 40px;
display: grid;
grid-template-columns: 340px 1fr;
gap: 48px;
align-items: center;
margin-bottom: 32px;
box-shadow: 0 12px 32px rgba(16, 22, 38, 0.08);
box-sizing: border-box;
}
.widget-afdf88 .feat-card__left {
display: flex;
flex-direction: column;
}
.widget-afdf88 .feat-kicker {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 20px;
width: fit-content;
}
.widget-afdf88 .feat-kicker--purple {
background: rgba(91, 63, 230, 0.1);
border: 1px solid rgba(91, 63, 230, 0.3);
color: #5B3FE6;
}
.widget-afdf88 .feat-kicker--blue {
background: rgba(45, 108, 224, 0.1);
border: 1px solid rgba(45, 108, 224, 0.3);
color: #2D6CE0;
}
.widget-afdf88 .feat-kicker--pink {
background: rgba(230, 78, 155, 0.1);
border: 1px solid rgba(230, 78, 155, 0.3);
color: #E64E9B;
}
.widget-afdf88 .feat-kicker--white {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
}
.widget-afdf88 .feat-price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 0;
}
.widget-afdf88 .feat-price-num {
font-size: 64px;
font-weight: 800;
color: #101626;
line-height: 1 !important;
letter-spacing: -0.03em;
}
.widget-afdf88 .feat-price-num--sm {
font-size: 52px;
}
.widget-afdf88 .feat-price-num--consult {
font-family: "Geist", sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: #101626;
display: inline-block;
}
.widget-afdf88 .feat-price-unit {
font-size: 20px;
font-weight: 500;
color: #6B7280;
}
.widget-afdf88 .feat-billing {
font-size: 14px;
font-weight: 500;
color: #6B7280;
margin-top: 8px;
margin-bottom: 0;
}
.widget-afdf88 .feat-req {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
color: #6B7280;
}
.widget-afdf88 .feat-req svg {
flex-shrink: 0;
}
.widget-afdf88 .feat-req span {
font-size: 13px;
font-weight: 500;
color: #6B7280;
}
.widget-afdf88 .feat-card__right {
display: flex;
flex-direction: column;
}
.widget-afdf88 .feat-headline {
font-size: 30px;
font-weight: 700;
color: #101626;
line-height: 1.15 !important;
letter-spacing: -0.01em;
margin: 0 0 12px 0;
}
.widget-afdf88 .feat-desc {
font-size: 15px;
font-weight: 400;
color: #4B5563;
line-height: 1.55;
margin: 0 0 24px 0;
}
.widget-afdf88 .feat-cta-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
width: 100%;
}
.widget-afdf88 .feat-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 49px !important;
border-radius: 7px !important;
font-size: 15px;
font-weight: 600;
white-space: nowrap !important;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
font-family: inherit;
}
.widget-afdf88 .feat-cta--primary {
flex: 1.5;
background: #2D6CE0;
color: white;
padding: 0 20px;
border: none;
}
.widget-afdf88 .feat-cta-row > a {
display: flex;
flex: 1 1 100%;
width: 100%;
text-decoration: none;
}
.widget-afdf88 .feat-cta-row > a > .feat-cta {
width: 100%;
flex: 1 1 100%;
}
.widget-afdf88 .feat-cta--primary:hover {
background: #2460CC;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 108, 224, 0.35);
}
.widget-afdf88 .feat-cta--watch-demo {
flex: 1;
background: transparent;
color: #374151;
padding: 0 18px;
border: 1.5px solid #D1D5DB;
}
.widget-afdf88 .feat-cta--watch-demo:hover {
background: #F9FAFB;
border-color: #9CA3AF;
transform: translateY(-1px);
}
.widget-afdf88 .card-payment-note {
font-size: 12px;
font-weight: 400;
color: #6B7280;
line-height: 1.5;
text-align: center;
margin-top: 12px;
margin-bottom: 20px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.widget-afdf88 .card-payment-note--white {
color: rgba(255, 255, 255, 0.65);
}
.widget-afdf88 .feat-benefits {
display: flex;
flex-direction: column;
gap: 8px;
}
.widget-afdf88 .feat-benefit {
display: flex;
align-items: center;
gap: 10px;
}
.widget-afdf88 .feat-benefit span {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.widget-afdf88 .feat-check {
flex-shrink: 0;
}
.widget-afdf88 .pnp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 48px;
}
.widget-afdf88 .pnp-card {
border-radius: 20px;
padding: 36px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.widget-afdf88 .pnp-card--light {
background: white;
border: 1px solid #E5E7EB;
}
.widget-afdf88 .pnp-card--gradient {
background: linear-gradient(135deg, #5B3FE6 0%, #2D6CE0 100%);
box-shadow: 0 20px 48px rgba(91, 63, 230, 0.35);
color: white;
}
.widget-afdf88 .pnp-popular-badge {
position: absolute;
top: -12px;
right: 24px;
background: #FCC60C;
color: #101626;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
padding: 6px 14px;
border-radius: 99px;
white-space: nowrap;
}
.widget-afdf88 .pnp-headline {
font-size: 26px;
font-weight: 700;
color: #101626;
line-height: 1.15 !important;
margin: 0 0 6px 0;
text-align: left;
}
.widget-afdf88 .pnp-headline--white {
color: white;
}
.widget-afdf88 .pnp-sub {
font-size: 14px;
font-weight: 400;
color: #6B7280;
line-height: 1.4;
margin: 0 0 24px 0;
text-align: left;
}
.widget-afdf88 .pnp-sub--white {
color: rgba(255, 255, 255, 0.85);
}
.widget-afdf88 .pnp-price-row {
margin-bottom: 0;
}
.widget-afdf88 .pnp-price-num {
font-size: 56px;
font-weight: 800;
color: #101626;
line-height: 1 !important;
letter-spacing: -0.03em;
text-align: left;
}
.widget-afdf88 .pnp-price-num--white {
color: white;
}
.widget-afdf88 .pnp-price-unit {
font-size: 18px;
font-weight: 500;
color: #6B7280;
}
.widget-afdf88 .pnp-price-unit--white {
color: rgba(255, 255, 255, 0.75);
}
.widget-afdf88 .pnp-billing {
font-size: 14px;
font-weight: 400;
color: #6B7280;
text-align: left;
}
.widget-afdf88 .pnp-billing--white {
color: rgba(255, 255, 255, 0.75);
}
.widget-afdf88 .pnp-req {
color: #6B7280;
}
.widget-afdf88 .pnp-req--white {
color: rgba(255, 255, 255, 0.75);
}
.widget-afdf88 .pnp-req--white span {
color: rgba(255, 255, 255, 0.75);
}
.widget-afdf88 .pnp-cta-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
.widget-afdf88 .pnp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 49px !important;
border-radius: 7px !important;
font-size: 15px;
font-weight: 600;
white-space: nowrap !important;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
font-family: inherit;
}
.widget-afdf88 .pnp-cta--blue {
flex: 1.5;
background: #2D6CE0;
color: white;
border: none;
padding: 0 32px;
align-self: center;
margin-top: 20px;
margin-bottom: 0;
}
.widget-afdf88 .pnp-cta--blue:hover {
background: #2460CC;
transform: translateY(-1px);
}
.widget-afdf88 .pnp-cta--white {
flex: 1.5;
background: white;
color: #5B3FE6;
border: none;
padding: 0 32px;
align-self: center;
margin-top: 20px;
margin-bottom: 0;
}
.widget-afdf88 .pnp-cta--white:hover {
background: #F3F4F6;
transform: translateY(-1px);
}
.widget-afdf88 .pnp-cta--watch-demo {
flex: 1;
background: transparent;
color: #374151;
padding: 0 18px;
border: 1.5px solid #D1D5DB;
}
.widget-afdf88 .pnp-cta--watch-demo:hover {
background: #F9FAFB;
border-color: #9CA3AF;
transform: translateY(-1px);
}
.widget-afdf88 .pnp-cta--watch-demo-white {
color: white;
border-color: rgba(255, 255, 255, 0.4);
}
.widget-afdf88 .pnp-cta--watch-demo-white:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.7);
}
.widget-afdf88 .pnp-benefits {
display: flex;
flex-direction: column;
gap: 8px;
}
.widget-afdf88 .pnp-benefit-text {
font-size: 14px;
font-weight: 500;
color: white;
}
.widget-afdf88 .pnp-benefit-text--bold {
font-weight: 700;
}
.widget-afdf88 .pnp-strip {
margin-bottom: 24px;
}
.widget-afdf88 .pnp-strip-headline {
font-size: 22px;
font-weight: 700;
color: #101626;
text-align: center;
margin: 0 0 24px 0;
line-height: 1.25 !important;
}
.widget-afdf88 .pnp-strip-table {
background: white;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.widget-afdf88 .pnp-strip-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1.5fr;
gap: 24px;
padding: 20px 28px;
border-bottom: 1px solid #F3F4F6;
align-items: center;
}
.widget-afdf88 .pnp-strip-row--last {
border-bottom: none;
}
.widget-afdf88 .pnp-strip-row--header {
background: #F9FAFB;
padding: 14px 28px;
}
.widget-afdf88 .pnp-strip-cell--left {
font-size: 15px;
font-weight: 700;
color: #101626;
}
.widget-afdf88 .pnp-strip-cell--mid {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #6B7280;
}
.widget-afdf88 .pnp-strip-cell--mid span:not(.cmp-dash) {
font-size: 14px;
font-weight: 500;
color: #374151;
text-transform: none;
letter-spacing: 0;
}
.widget-afdf88 .pnp-strip-cell--right {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #5B3FE6;
}
.widget-afdf88 .pnp-strip-cell--right span:not(.cmp-dash) {
font-size: 14px;
font-weight: 500;
color: #374151;
text-transform: none;
letter-spacing: 0;
}
.widget-afdf88 .pnp-strip-check {
flex-shrink: 0;
}
.widget-afdf88 .pnp-callout {
background: linear-gradient(135deg, rgba(252, 198, 12, 0.1), rgba(230, 78, 155, 0.05));
border: 1px solid rgba(252, 198, 12, 0.35);
border-radius: 16px;
padding: 28px 32px;
margin-top: 0;
margin-bottom: 48px;
}
.widget-afdf88 .pnp-callout-headline {
font-size: 20px;
font-weight: 700;
color: #101626;
line-height: 1.25 !important;
margin: 0 0 10px 0;
}
.widget-afdf88 .pnp-callout-body {
font-size: 15px;
font-weight: 400;
color: #4B5563;
line-height: 1.55;
margin: 0;
}
.widget-afdf88 .cmp-table {
background: white;
border: 1px solid #E5E7EB;
border-radius: 20px;
overflow: hidden;
margin-top: 24px;
width: 100%;
box-sizing: border-box;
}
.widget-afdf88 .cmp-header {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
background: #F9FAFB;
border-bottom: 1px solid #E5E7EB;
padding: 24px 20px;
align-items: start;
}
.widget-afdf88 .cmp-header__feature-cell { /* empty */ }
.widget-afdf88 .cmp-header__plan-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
padding: 0 4px;
}
.widget-afdf88 .cmp-header--single {
display: flex;
justify-content: center;
}
.widget-afdf88 .cmp-header__plan-cell--split {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: left;
width: 100%;
max-width: 560px;
padding: 4px 20px;
}
.widget-afdf88 .cmp-header__plan-cell--split .cmp-plan-info {
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
}
.widget-afdf88 #cmp-table-tab2 .cmp-plan-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.widget-afdf88 .cmp-plan-name {
font-size: 14px;
font-weight: 700;
color: #101626;
line-height: 1.2;
}
.widget-afdf88 .cmp-plan-price {
font-size: 20px;
font-weight: 800;
color: #101626;
line-height: 1 !important;
}
.widget-afdf88 .cmp-plan-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 16px;
border-radius: 7px !important;
font-size: 13px;
font-weight: 600;
white-space: nowrap !important;
text-decoration: none;
cursor: pointer;
background: #F3F4F6;
color: #374151;
border: none;
transition: background 200ms ease, transform 200ms ease;
font-family: inherit;
}
.widget-afdf88 .cmp-plan-cta--active {
background: #101626;
color: white;
}
.widget-afdf88 .cmp-plan-cta:hover {
transform: translateY(-1px);
}
.widget-afdf88 .cmp-table[data-active-col="1"] .cmp-col--1,
.widget-afdf88 .cmp-table[data-active-col="2-3"] .cmp-col--2,
.widget-afdf88 .cmp-table[data-active-col="2-3"] .cmp-col--3,
.widget-afdf88 .cmp-table[data-active-col="4"] .cmp-col--4 {
background: rgba(45, 108, 224, 0.04);
}
.widget-afdf88 .cmp-group-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #6B7280;
padding: 24px 20px 12px 20px;
background: white;
}
.widget-afdf88 .cmp-group-label.js-cmp-tab2-group1-heading,
.widget-afdf88 .cmp-group-label.js-cmp-tab2-group2-heading,
.widget-afdf88 .cmp-group-label.js-cmp-tab2-group3-heading,
.widget-afdf88 .cmp-group-label.cmp-group-label--band {
background: #16201e;
color: #ffffff;
font-weight: 700;
padding: 13px 20px;
margin-top: 8px;
border-radius: 6px;
}
.widget-afdf88 .cmp-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
padding: 16px 20px;
border-bottom: 1px solid #F3F4F6;
align-items: center;
}
.widget-afdf88 .cmp-row--last {
border-bottom: none;
}
.widget-afdf88 .cmp-table[data-active-col="2-3"] .cmp-header,
.widget-afdf88 .cmp-table[data-active-col="2-3"] .cmp-row {
grid-template-columns: 1.4fr 1fr 1fr;
}
.widget-afdf88 .cmp-table[data-active-col="1"] .cmp-header,
.widget-afdf88 .cmp-table[data-active-col="1"] .cmp-row {
grid-template-columns: 1.4fr 1fr;
}
.widget-afdf88 .cmp-cell {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.widget-afdf88 .cmp-cell--feature {
text-align: left;
justify-content: flex-start;
font-size: 14px;
font-weight: 500;
color: #101626;
gap: 6px;
}
.widget-afdf88 .cmp-row-label-text {
display: inline;
}
.widget-afdf88 .cmp-info-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
font-size: 11px;
color: #9CA3AF;
cursor: pointer;
flex-shrink: 0;
}
.widget-afdf88 .cmp-tooltip {
display: none;
position: absolute;
bottom: 130%;
left: 0;
background: #101626;
color: white;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
padding: 10px 12px;
border-radius: 8px;
width: 240px;
z-index: 5;
text-align: left;
}
.widget-afdf88 .cmp-info-icon:hover .cmp-tooltip,
.widget-afdf88 .cmp-info-icon:focus .cmp-tooltip,
.widget-afdf88 .cmp-info-icon.is-open .cmp-tooltip {
display: block;
}
.widget-afdf88 .pnp-value-line {
font-size: 15px;
font-style: italic;
font-weight: 500;
color: #374151;
text-align: left;
margin: 0 0 16px 0;
}
.widget-afdf88 .pnp-value-line--white {
color: rgba(255, 255, 255, 0.85);
}
.widget-afdf88 .pnp-helper {
font-size: 13px;
font-weight: 400;
color: #6B7280;
text-align: left;
margin: 10px 0 0 0;
}
.widget-afdf88 .pnp-helper--white {
color: rgba(255, 255, 255, 0.65);
}
.widget-afdf88 .pnp-benefit-header {
font-size: 14px;
font-style: italic;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
text-align: left;
margin: 16px 0 8px 0;
}
.widget-afdf88 .pnp-section-note {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
margin-bottom: 32px;
}
.widget-afdf88 .pnp-section-note-text {
font-size: 14px;
font-weight: 400;
color: #6B7280;
margin: 0;
}
.widget-afdf88 .pnp-section-note-link {
font-size: 14px;
font-weight: 600;
color: #5B3FE6;
text-decoration: underline;
}
.widget-afdf88 .pnp-time-callout {
font-size: 14px;
font-style: italic;
font-weight: 400;
color: #6B7280;
text-align: center;
max-width: 640px;
margin: 24px auto 0;
}
.widget-afdf88 .cmp-text {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.widget-afdf88 .cmp-dash {
font-size: 20px;
color: #D1D5DB;
font-weight: 400;
line-height: 1;
}
.widget-afdf88 .cmp-check-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
position: relative;
}
.widget-afdf88 .cmp-check-icon::after {
content: "";
display: block;
width: 9px;
height: 5px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg) translateY(-1px);
}
.widget-afdf88 .cmp-table-mobile {
display: none;
}
@media (max-width: 1024px) {
.widget-afdf88 .hero-content {
padding: 48px 40px 90px;
max-width: 1440px;
}
.widget-afdf88 .hero-headline {
--hero-headline-font-size: 44px;
}
.widget-afdf88 .hero-bottom-headline {
font-size: 40px;
}
.widget-afdf88 .hero-bottom-box {
padding: 44px 40px;
}
.widget-afdf88 .feat-card {
grid-template-columns: 280px 1fr;
gap: 32px;
padding: 32px;
}
.widget-afdf88 .feat-price-num {
font-size: 52px;
}
.widget-afdf88 .feat-price-num--sm {
font-size: 44px;
}
.widget-afdf88 .cmp-header {
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
overflow-x: auto;
}
.widget-afdf88 .ptab-pill {
padding: 10px 16px;
font-size: 14px;
}
}
@media (max-width: 768px) {
.widget-afdf88 {
/* Featured card: stack vertically */
/* PnP cards: stack */
/* Comparison table: horizontal scroll */
}
.widget-afdf88 .hero-content {
padding: 40px 24px 72px;
}
.widget-afdf88 .hero-headline {
--hero-headline-font-size: 36px;
}
.widget-afdf88 .hero-bottom-headline {
font-size: 32px;
}
.widget-afdf88 .hero-bottom-box {
padding: 36px 28px;
border-radius: 32px;
}
.widget-afdf88 .hero-subtext {
font-size: 16px;
}
.widget-afdf88 .feat-card {
grid-template-columns: 1fr;
gap: 28px;
}
.widget-afdf88 .pnp-grid {
grid-template-columns: 1fr;
}
.widget-afdf88 .cmp-table {
overflow-x: auto;
}
.widget-afdf88 .cmp-header,
.widget-afdf88 .cmp-row {
min-width: 640px;
}
.widget-afdf88 .pnp-strip-row {
grid-template-columns: 1fr 0.6fr 1.2fr;
gap: 12px;
padding: 16px 20px;
}
.widget-afdf88 .hero-glow--1 {
width: 266px;
height: 266px;
}
.widget-afdf88 .hero-glow--2 {
width: 294px;
height: 294px;
}
.widget-afdf88 .hero-glow--3 {
width: 210px;
height: 210px;
}
}
@media (max-width: 600px) {
.widget-afdf88 {
/* Smaller price on small screens */
/* Stack CTA rows on small mobile */
}
.widget-afdf88 .hero-headline {
--hero-headline-font-size: 30px;
}
.widget-afdf88 .hero-bottom-headline {
font-size: 26px;
}
.widget-afdf88 .hero-kicker__text {
font-size: 12px;
}
.widget-afdf88 .hero-logos {
gap: 20px;
}
.widget-afdf88 .hero-logo {
max-height: 28px;
}
.widget-afdf88 .hero-logo--buildxact {
max-height: 20px;
}
.widget-afdf88 .feat-price-num {
font-size: 48px;
}
.widget-afdf88 .feat-price-num--sm {
font-size: 44px;
}
.widget-afdf88 .feat-price-num--consult {
font-size: 22px;
}
.widget-afdf88 .pnp-price-num {
font-size: 44px;
}
.widget-afdf88 .ptab-pill {
padding: 9px 14px;
font-size: 13px;
gap: 6px;
}
.widget-afdf88 .hero-bottom-box {
padding: 28px 20px;
border-radius: 24px;
}
.widget-afdf88 .feat-card {
padding: 24px 20px;
}
.widget-afdf88 .feat-cta-row,
.widget-afdf88 .pnp-cta-row {
flex-direction: column;
gap: 8px;
}
.widget-afdf88 .feat-cta--primary,
.widget-afdf88 .feat-cta--watch-demo,
.widget-afdf88 .pnp-cta--blue,
.widget-afdf88 .pnp-cta--white,
.widget-afdf88 .pnp-cta--watch-demo {
flex: none;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.widget-afdf88 .animate-item, .widget-afdf88 .animate-logos, .widget-afdf88 .ptab-panel, .widget-afdf88 .ptab-content-wrapper {
animation: none !important;
transition: none !important;
}
.widget-afdf88 .animate-item, .widget-afdf88 .animate-logos {
opacity: 1;
transform: none;
}
}
@charset "UTF-8";
.widget-f7f8d9 {
--subscriber-login-bg: #FCC60C;
--subscriber-login-color: #101626;
--subscriber-login-bg-hover: #E3B10B;
/* ─── Reset & base ─── */
pointer-events: none;
/* ─── NAV BAR ─── */
/* Subtle black-to-transparent gradient behind the nav so links are readable over any page content */
/* Fade out the gradient once the solid background kicks in */
/* Background appears only when the JS adds is-scrolled (on scroll or on non-homepage load)
or is-hovered (homepage hover). Uses !important to override the transparent base rule above,
and reads the design-panel colour variable for the actual colour. */
/* ─── LOGO ─── */
/* ─── NAV LINKS ─── */
/* ─── CTA ─── */
/* ─── HAMBURGER ─── */
/* ─── MEGA MENU ─── */
/* ─── MEGA GRID ─── */
/* ─── MEGA FOOTER ─── */
/* Pricing footer — left-aligned */
/* ─── IMAGE CARDS ─── */
/* ─── SOLUTIONS PHOTO CARDS ─── */
/* ─── PRICING ANIMATED BARS (vertical) ─── */
/* The .gb-bars-layer and .gb-bar classes used by Pricing */
/* ─── RESOURCES HORIZONTAL ANIMATED BARS ─── */
/* ─── LIST-STYLE MEGA INNER (legacy, kept for fallback) ─── */
/* ─── RESOURCES 3-COLUMN INNER (skeleton matches Solutions; grey background is the intentional distinction) ─── */
/* Column 1 — right border divider, same spacing as Solutions col 1 */
/* Column 2 — right border divider, same spacing as Solutions col 2 */
/* Column 3 */
/* ─── FEATURED BLOG (Col 2) ─── */
/* ─── ROI PROMO TILE (Col 3) — sizing/padding/radius matched to Solutions col 3 promo tile ─── */
/* ─── SOLUTIONS 3-COLUMN MEGA MENU ─── */
/* Override the global mega background for solutions */
/* Column 1 */
/* Column 2 */
/* Column 3 */
/* Kicker spacing adjustment for Col 1 */
/* Kicker in col 2 */
/* ─── SERVICE ITEM (Column 1) ─── */
/* Service item icon */
/* Service item text block */
/* Service item chevron */
/* ─── SUBLIST (Column 2) ─── */
/* Fade transition for sublist swap */
/* ─── SUB ITEM (Columns 1 mobile accordion + Column 2) ─── */
/* ─── SOLUTIONS COLUMN 3: Feasibility Promo Tile ─── */
/* Wrapping — the whole column is one clickable link */
/* Preview image container */
/* Layer 1 — light blue-purple gradient fill */
/* Layer 2 — side panels */
/* Hover: fan panels outward */
/* Layer 3 — central mockup card */
/* Hover: scale up central mockup */
/* Mockup header row */
/* Category rows */
/* Divider */
/* Total row */
/* Body: title row + description */
/* Mobile accordion for solutions (hidden on desktop) */
/* ─── SOLUTIONS RESPONSIVE: tablet (768–1023px) ─── */
/* ─── SOLUTIONS RESPONSIVE: mobile (< 768px) ─── */
/* ─── Solutions col 3 — 900px breakpoint ─── */
/* ─── RESOURCES RESPONSIVE: tablet (< 1024px) ─── */
/* ─── RESOURCES RESPONSIVE: mobile (< 768px) ─── */
/* ─── PRICING THREE-COLUMN INNER ─── */
/* Override the global mega background for pricing (matches solutions) */
/* Column 1 */
/* Column 2 */
/* Column 3 */
/* Kicker labels */
/* Pricing column 1 service items use the same style as solutions */
/* Pricing column 2 sublist */
/* Sub-items in column 2: no descriptor, label only, full font weight matches solutions */
/* Featured items gradient bg in col 3 — preserve from original */
/* ─── PRICING RESPONSIVE: tablet (768–1023px) ─── */
/* ─── PRICING RESPONSIVE: mobile (< 768px) ─── */
/* Featured icon gradient (pricing right column) — now scoped to #mega-pricing in the 3-col block above */
/* ─── BADGE PILL ─── */
/* Popular — indigo */
/* New — green */
/* ─── ROW LIST ─── */
/* ─── ICON WRAP ─── */
/* ─── TEXT ─── */
/* ─── MOBILE SUB-SECTION LABEL ─── */
/* Pricing 2-col breakpoint removed — pricing now uses 3-col layout */
/* ─── TABLET / MOBILE BREAKPOINTS ─── */
/* ─── MOBILE: Solutions photo cards ─── */
}
.widget-f7f8d9 *, .widget-f7f8d9 *::before, .widget-f7f8d9 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.widget-f7f8d9 .ce-nav {
pointer-events: auto;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 72px;
/* Transparent by default. !important prevents the design panel from injecting
an inline background that would show on all pages instead of just on scroll/hover. */
background: transparent !important;
z-index: 100;
border-bottom: none;
box-shadow: none;
transition: background 350ms ease, box-shadow 350ms ease;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-nav::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 180px;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: -1;
transition: opacity 350ms ease;
}
.widget-f7f8d9 .ce-nav.is-scrolled::before,
.widget-f7f8d9 .ce-nav.is-hovered::before {
opacity: 0;
}
.widget-f7f8d9 .ce-nav.is-scrolled,
.widget-f7f8d9 .ce-nav.is-hovered {
background: var(--ce-nav-solid-bg, linear-gradient(180deg, #101626 0%, #0e142a 100%)) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.widget-f7f8d9 .ce-nav__inner {
display: flex;
align-items: center;
height: 100%;
padding: 0 48px;
max-width: 100%;
gap: 32px;
}
.widget-f7f8d9 .ce-nav__logo {
flex-shrink: 0;
margin-left: 72px;
}
.widget-f7f8d9 .ce-nav__logo {
pointer-events: auto;
}
.widget-f7f8d9 .ce-nav__logo > * {
pointer-events: auto;
}
.widget-f7f8d9 .ce-nav__logo-link {
display: flex;
align-items: center;
text-decoration: none;
outline: none;
pointer-events: auto;
cursor: pointer;
}
.widget-f7f8d9 .ce-nav__logo-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 4px;
border-radius: 4px;
}
.widget-f7f8d9 .ce-nav__wordmark {
width: auto;
}
.widget-f7f8d9 .ce-nav__logo-img {
width: auto;
max-width: 240px;
max-height: 40px;
object-fit: contain;
display: block;
}
.widget-f7f8d9 .ce-nav__item > a,
.widget-f7f8d9 .ce-nav__item > a:visited,
.widget-f7f8d9 .ce-nav__item > a:hover,
.widget-f7f8d9 .ce-nav__item > a:active {
text-decoration: none !important;
color: inherit;
}
.widget-f7f8d9 .ce-nav__links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0 auto 0 10%;
padding: 0;
}
.widget-f7f8d9 .ce-nav__item {
position: static;
}
.widget-f7f8d9 .ce-nav__link,
.widget-f7f8d9 .ce-nav__trigger {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
font-size: 15.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
text-decoration: none !important;
background: none;
border: none;
cursor: pointer;
border-radius: 6px;
letter-spacing: 0;
transition: color 200ms ease, background 150ms ease;
white-space: nowrap;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-nav__link:hover,
.widget-f7f8d9 .ce-nav__trigger:hover {
background: -webkit-linear-gradient(135deg, #4f8ef7, #7c3aed, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.widget-f7f8d9 .ce-nav__link:focus-visible,
.widget-f7f8d9 .ce-nav__trigger:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-nav__trigger.is-active {
color: #ffffff;
}
.widget-f7f8d9 .ce-nav__chevron {
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform 200ms ease;
}
.widget-f7f8d9 .ce-nav__trigger.is-active .ce-nav__chevron {
transform: rotate(180deg);
}
.widget-f7f8d9 .ce-nav__cta-group {
display: flex;
align-items: center;
flex-direction: row;
column-gap: 12px;
flex-shrink: 0;
}
.widget-f7f8d9 .ce-nav__cta-wrap {
flex-shrink: 0;
}
.widget-f7f8d9 .ce-nav__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
background: #ffffff;
color: #101626;
font-size: 14px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
text-decoration: none;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 150ms ease, transform 100ms ease;
white-space: nowrap;
}
.widget-f7f8d9 .ce-nav__cta:hover {
background: #F5F4F1;
}
.widget-f7f8d9 .ce-nav__cta:active {
transform: scale(0.98);
}
.widget-f7f8d9 .ce-nav__cta:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-nav__cta--subscriber {
background: var(--subscriber-login-bg, #FCC60C);
color: var(--subscriber-login-color, #101626);
}
.widget-f7f8d9 .ce-nav__cta--subscriber:hover {
background: var(--subscriber-login-bg-hover, #E3B10B);
}
.widget-f7f8d9 .ce-nav__hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 6px;
flex-shrink: 0;
position: relative;
z-index: 101;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.widget-f7f8d9 .ce-nav__hamburger:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-nav__hamburger span {
display: block;
width: 22px;
height: 1.5px;
background: rgba(255, 255, 255, 0.85);
border-radius: 2px;
transition: transform 200ms ease, opacity 200ms ease;
}
.widget-f7f8d9 .ce-mega {
pointer-events: none;
position: fixed;
top: 72px;
left: 0;
width: 100vw;
background: #F5F4F1;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
z-index: 99;
opacity: 0;
transform: translateY(-8px);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.widget-f7f8d9 .ce-mega:not([hidden]) {
display: block;
}
.widget-f7f8d9 .ce-mega[hidden] {
display: block;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
visibility: hidden;
}
.widget-f7f8d9 .ce-mega.is-open {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.widget-f7f8d9 .ce-mega__inner {
max-width: 1400px;
margin: 0 auto;
padding: 48px 48px 32px;
}
.widget-f7f8d9 .ce-mega__grid {
display: grid;
gap: 16px;
}
.widget-f7f8d9 .ce-mega__grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.widget-f7f8d9 .ce-mega__grid--5 {
grid-template-columns: repeat(5, 1fr);
}
.widget-f7f8d9 .ce-mega__footer {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
.widget-f7f8d9 #mega-pricing .ce-mega__footer {
justify-content: flex-start;
}
.widget-f7f8d9 .ce-mega__explore {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #101626;
text-decoration: none !important;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
transition: gap 150ms ease;
}
.widget-f7f8d9 .ce-mega__explore:hover {
gap: 10px;
}
.widget-f7f8d9 .ce-mega__explore:focus-visible {
outline: 2px solid rgba(16, 22, 38, 0.5);
outline-offset: 2px;
border-radius: 4px;
}
.widget-f7f8d9 .ce-mega__explore svg {
width: 16px;
height: 16px;
}
.widget-f7f8d9 .ce-mega a,
.widget-f7f8d9 .ce-mega a:link,
.widget-f7f8d9 .ce-mega a:visited,
.widget-f7f8d9 .ce-mega a:hover,
.widget-f7f8d9 .ce-mega a:active,
.widget-f7f8d9 .ce-mega span[class] {
text-decoration: none !important;
}
.widget-f7f8d9 .ce-card {
display: block;
text-decoration: none !important;
cursor: default;
outline: none;
}
.widget-f7f8d9 .ce-card__img-link {
display: block;
text-decoration: none !important;
outline: none;
color: inherit;
cursor: pointer;
}
.widget-f7f8d9 .ce-card__img-link:focus-visible .ce-card__img-wrap {
outline: 2px solid rgba(16, 22, 38, 0.5);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-card__img-link:hover .ce-card__title {
text-decoration: none;
}
.widget-f7f8d9 .ce-card__img-wrap {
display: block;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/2;
width: 100%;
position: relative;
}
.widget-f7f8d9 .sol-photo-card {
position: relative;
height: 200px;
aspect-ratio: unset;
background: #0a0f1a;
}
.widget-f7f8d9 .sol-photo-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.4s ease;
}
.widget-f7f8d9 .ce-card__img-link:hover .sol-photo-card__img {
transform: scale(1.05);
}
.widget-f7f8d9 .pricing-card__wrap {
position: relative;
background: var(--pri-card-bg, #0A0A0A);
display: block;
}
.widget-f7f8d9 .pricing-card__wrap::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, var(--pri-overlay, 0.25));
z-index: 1;
pointer-events: none;
border-radius: inherit;
}
.widget-f7f8d9 .pricing-card-label {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
padding: 12px 12px 18px;
font-size: 15px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
color: var(--pri-label-color, rgba(255, 255, 255, 0.92));
letter-spacing: -0.01em;
line-height: 1.2;
pointer-events: none;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.widget-f7f8d9 .pricing-card[data-pri-index="1"] .pricing-card-label {
color: var(--pri-label-color-1, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .pricing-card[data-pri-index="2"] .pricing-card-label {
color: var(--pri-label-color-2, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .pricing-card[data-pri-index="3"] .pricing-card-label {
color: var(--pri-label-color-3, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .pricing-card[data-pri-index="4"] .pricing-card-label {
color: var(--pri-label-color-4, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .gb-bars-layer {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
overflow: hidden;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
border-radius: inherit;
}
.widget-f7f8d9 .gb-bar {
flex: 1 0 14.2857142857%;
max-width: 14.2857142857%;
height: 100%;
transform-origin: bottom;
transform: scaleY(var(--initial-scale, 0.5));
transition: transform 500ms ease-in-out;
animation: gbPulseBar 2s ease-in-out infinite alternate;
outline: 1px solid rgba(0, 0, 0, 0);
box-sizing: border-box;
}
@keyframes gbPulseBar {
0% {
transform: scaleY(var(--initial-scale));
}
100% {
transform: scaleY(calc(var(--initial-scale) * 0.7));
}
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .gb-bar {
animation: none;
}
}
@media (max-width: 767px) {
.widget-f7f8d9 .gb-bar {
animation-duration: 3s;
}
}
.widget-f7f8d9 .resources-card__wrap {
position: relative;
background: var(--res-card-bg, #0A0A0A);
display: block;
}
.widget-f7f8d9 .resources-card__wrap::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, var(--res-overlay, 0.65));
z-index: 1;
pointer-events: none;
border-radius: inherit;
}
.widget-f7f8d9 .hb-bars-layer {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
border-radius: inherit;
}
.widget-f7f8d9 .hb-bar {
flex: 1 0 14.2857142857%;
max-height: 14.2857142857%;
width: 100%;
transform-origin: right;
transform: scaleX(var(--initial-scale, 0.5));
transition: transform 500ms ease-in-out;
animation: hbPulseBar 2s ease-in-out infinite alternate;
outline: 1px solid rgba(0, 0, 0, 0);
box-sizing: border-box;
}
@keyframes hbPulseBar {
0% {
transform: scaleX(var(--initial-scale));
}
100% {
transform: scaleX(calc(var(--initial-scale) * 0.7));
}
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .hb-bar {
animation: none;
}
}
.widget-f7f8d9 .resources-card-label {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
padding: 12px 12px 18px;
font-size: 15px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
color: var(--res-label-color, rgba(255, 255, 255, 0.92));
letter-spacing: -0.01em;
line-height: 1.2;
pointer-events: none;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.widget-f7f8d9 .resources-card[data-res-index="1"] .resources-card-label {
color: var(--res-label-color-1, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .resources-card[data-res-index="2"] .resources-card-label {
color: var(--res-label-color-2, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .resources-card[data-res-index="3"] .resources-card-label {
color: var(--res-label-color-3, rgba(255, 255, 255, 0.92)) !important;
}
.widget-f7f8d9 .resources-card[data-res-index="4"] .resources-card-label {
color: var(--res-label-color-4, rgba(255, 255, 255, 0.92)) !important;
}
@media (max-width: 767px) {
.widget-f7f8d9 .hb-bar {
animation-duration: 3s;
}
}
.widget-f7f8d9 .ce-card__img {
display: block;
width: 100%;
height: 100%;
border-radius: 16px;
transition: transform 250ms ease-out;
background-size: cover;
background-position: center;
}
.widget-f7f8d9 .ce-card__img-link:hover .ce-card__img {
transform: scale(1.03);
}
.widget-f7f8d9 .ce-card__title {
font-size: 16px;
font-weight: 500;
color: #0D0D0D;
margin-top: 16px;
margin-bottom: 6px;
font-family: "Geist-Medium", "Geist", system-ui, sans-serif;
letter-spacing: -0.01em;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-card__desc {
font-size: 13px;
font-weight: 400;
color: rgba(13, 13, 13, 0.65);
line-height: 1.5;
margin-top: 16px;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-mega__inner--list {
max-width: 540px;
padding: 32px 40px 28px;
}
.widget-f7f8d9 .ce-mega__inner--res-3col {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 0;
max-width: 1340px;
padding: 40px 56px;
margin-left: auto;
margin-right: auto;
align-items: stretch;
position: relative;
}
.widget-f7f8d9 .ce-res-col--1 {
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid rgba(16, 22, 38, 0.08);
padding-right: 56px;
}
.widget-f7f8d9 .ce-res-col--2 {
display: flex;
flex-direction: column;
gap: 0;
border-right: 1px solid rgba(16, 22, 38, 0.08);
padding-left: 56px;
padding-right: 56px;
}
.widget-f7f8d9 .ce-res-col--3 {
padding-left: 56px;
}
.widget-f7f8d9 .ce-res-col--1 .ce-mega__section-label,
.widget-f7f8d9 .ce-res-col--2 .ce-mega__section-label,
.widget-f7f8d9 .ce-res-col--3 .ce-mega__section-label {
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #6B7280;
}
.widget-f7f8d9 .ce-res-blog__logo {
display: block;
height: 44px;
width: auto;
object-fit: contain;
margin-bottom: 20px;
}
.widget-f7f8d9 .ce-res-blog__headline {
font-size: 18px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
color: #101626;
line-height: 1.35;
letter-spacing: -0.02em;
margin-bottom: 20px;
max-width: 320px;
}
.widget-f7f8d9 .ce-res-blog__cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
color: #101626;
text-decoration: none !important;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
cursor: pointer;
transition: gap 150ms ease;
}
.widget-f7f8d9 .ce-res-blog__cta:hover {
text-decoration: underline !important;
}
.widget-f7f8d9 .ce-res-blog__cta-arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.widget-f7f8d9 .ce-res-blog__cta:hover .ce-res-blog__cta-arrow {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-res-blog__cta-arrow {
transition: none;
}
}
.widget-f7f8d9 .ce-res-promo {
display: flex;
flex-direction: column;
gap: 20px;
text-decoration: none !important;
color: inherit;
cursor: pointer;
outline: none;
}
.widget-f7f8d9 .ce-res-promo:focus-visible {
outline: 2px solid rgba(16, 22, 38, 0.4);
outline-offset: 4px;
border-radius: 14px;
}
.widget-f7f8d9 .ce-res-promo__img-wrap {
position: relative;
display: block;
width: 100%;
max-width: 200px;
aspect-ratio: 16/10;
border-radius: 12px;
overflow: hidden;
background: rgba(13, 13, 13, 0.06);
flex-shrink: 0;
}
.widget-f7f8d9 .ce-res-promo__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-f7f8d9 .ce-res-promo__img-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8e6f0 0%, #d4d0e8 100%);
border-radius: 12px;
}
.widget-f7f8d9 .ce-res-promo:hover .ce-res-promo__img {
transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-res-promo__img {
transition: none;
}
}
.widget-f7f8d9 .ce-res-promo__body {
display: flex;
flex-direction: column;
gap: 10px;
}
.widget-f7f8d9 .ce-res-promo__title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.widget-f7f8d9 .ce-res-promo__title {
font-size: 17px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
color: #101626;
line-height: 1.25;
letter-spacing: -0.01em;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-res-promo__arrow {
width: 16px;
height: 16px;
color: #101626;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.widget-f7f8d9 .ce-res-promo:hover .ce-res-promo__arrow {
transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-res-promo__arrow {
transition: none;
}
}
.widget-f7f8d9 .ce-res-promo__desc {
font-size: 14px;
font-weight: 400;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
color: #4B5563;
line-height: 1.5;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-mega__inner--solutions-3col {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 0;
max-width: 1340px;
padding: 40px 56px;
margin-left: auto;
margin-right: auto;
align-items: stretch;
position: relative;
background: #FFFFFF;
border-radius: 0;
}
.widget-f7f8d9 #mega-solutions {
background: #FFFFFF;
}
.widget-f7f8d9 .ce-sol-col--1 {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 56px;
border-right: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-sol-col--2 {
display: flex;
flex-direction: column;
gap: 0;
padding-left: 56px;
padding-right: 56px;
border-right: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-sol-col--3 {
padding-left: 56px;
}
.widget-f7f8d9 .ce-sol-col--1 .ce-mega__section-label {
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #6B7280;
}
.widget-f7f8d9 .ce-sol-col--2 .ce-mega__section-label {
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #6B7280;
}
.widget-f7f8d9 .ce-sol-service-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
position: relative;
transition: background 0.2s ease, border-left-color 0.2s ease;
border-left: 3px solid transparent;
outline: none;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
}
.widget-f7f8d9 .ce-sol-service-item:focus-visible {
outline: 2px solid rgba(91, 63, 230, 0.4);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-sol-service-item:hover,
.widget-f7f8d9 .ce-sol-service-item--active {
background: rgba(91, 63, 230, 0.06);
border-left-color: #5B3FE6;
}
.widget-f7f8d9 .ce-sol-service-item:hover .ce-sol-service-item__chevron svg,
.widget-f7f8d9 .ce-sol-service-item--active .ce-sol-service-item__chevron svg {
transform: translateX(3px) rotate(0deg);
}
.widget-f7f8d9 .ce-sol-service-item__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(16, 22, 38, 0.04);
display: flex;
align-items: center;
justify-content: center;
}
.widget-f7f8d9 .ce-sol-service-item__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.widget-f7f8d9 .ce-sol-service-item__title {
font-size: 15px;
font-weight: 600;
color: #101626;
line-height: 1.2;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-sol-service-item__desc {
font-size: 12px;
font-weight: 400;
color: #6B7280;
line-height: 1.35;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-sol-service-item__chevron {
flex-shrink: 0;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
}
.widget-f7f8d9 .ce-sol-service-item__chevron svg {
transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-sol-service-item__chevron svg {
transition: none;
}
}
.widget-f7f8d9 .ce-sol-sublist {
display: flex;
flex-direction: column;
gap: 2px;
/* Lock height to tallest state (4 items) so the 3-item Estimating list doesn't cause reflow */
min-height: 230px;
position: relative;
}
.widget-f7f8d9 .ce-sol-sublist__set {
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.widget-f7f8d9 .ce-sol-sublist__set[hidden] {
display: none;
}
.widget-f7f8d9 .ce-sol-sublist--fading {
opacity: 0.4;
}
.widget-f7f8d9 .ce-sol-sublist--fading .ce-sol-sublist__set {
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-sol-sublist {
transition: none;
}
}
.widget-f7f8d9 .ce-sol-sub-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
text-decoration: none !important;
transition: background 0.2s ease;
outline: none;
color: inherit;
}
.widget-f7f8d9 .ce-sol-sub-item:hover {
background: rgba(16, 22, 38, 0.04);
}
.widget-f7f8d9 .ce-sol-sub-item:focus-visible {
outline: 2px solid rgba(91, 63, 230, 0.4);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-sol-sub-item__title {
font-size: 14px;
font-weight: 600;
color: #101626;
line-height: 1.2;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-sol-sub-item__title--indigo {
color: #5B3FE6;
}
.widget-f7f8d9 .ce-sol-sub-item__desc {
font-size: 12px;
font-weight: 400;
color: #6B7280;
line-height: 1.4;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-sol-promo {
display: flex;
flex-direction: column;
gap: 20px;
text-decoration: none !important;
color: inherit;
cursor: pointer;
outline: none;
}
.widget-f7f8d9 .ce-sol-promo:focus-visible {
outline: 2px solid rgba(91, 63, 230, 0.4);
outline-offset: 4px;
border-radius: 14px;
}
.widget-f7f8d9 .ce-sol-promo__img-wrap {
position: relative;
width: 100%;
max-width: 200px;
aspect-ratio: 16/10;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, rgba(91, 63, 230, 0.1) 0%, rgba(45, 108, 224, 0.06) 100%);
flex-shrink: 0;
}
.widget-f7f8d9 .ce-sol-promo__img-bg {
display: block;
position: absolute;
inset: 0;
background: linear-gradient(135deg, #EEF2FF 0%, #DBEAFE 100%);
border-radius: inherit;
}
.widget-f7f8d9 .ce-sol-promo__panel {
display: block;
position: absolute;
top: 12%;
width: 20%;
height: 76%;
background: rgba(255, 255, 255, 0.55);
border-radius: 8px;
box-shadow: 0 8px 20px rgba(16, 22, 38, 0.06);
transition: transform 0.3s ease;
}
.widget-f7f8d9 .ce-sol-promo__panel--left {
left: 8px;
}
.widget-f7f8d9 .ce-sol-promo__panel--right {
right: 8px;
}
.widget-f7f8d9 .ce-sol-promo:hover .ce-sol-promo__panel--left {
transform: translateX(-2px);
}
.widget-f7f8d9 .ce-sol-promo:hover .ce-sol-promo__panel--right {
transform: translateX(2px);
}
.widget-f7f8d9 .ce-sol-promo__mockup {
display: flex;
flex-direction: column;
gap: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72%;
height: 82%;
background: linear-gradient(160deg, #FFFFFF 0%, #F5F4F1 100%);
border: 1px solid rgba(16, 22, 38, 0.08);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(16, 22, 38, 0.12);
padding: 14px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.widget-f7f8d9 .ce-sol-promo:hover .ce-sol-promo__mockup {
transform: translate(-50%, -50%) scale(1.03);
}
.widget-f7f8d9 .ce-sol-promo__mockup-header {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
}
.widget-f7f8d9 .ce-sol-promo__mockup-pill {
font-size: 7px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5B3FE6;
background: rgba(91, 63, 230, 0.12);
padding: 2px 6px;
border-radius: 3px;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
line-height: 1.4;
flex-shrink: 0;
}
.widget-f7f8d9 .ce-sol-promo__mockup-doc {
font-size: 8px;
font-weight: 600;
color: #101626;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-f7f8d9 .ce-sol-promo__mockup-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-f7f8d9 .ce-sol-promo__mockup-cat {
font-size: 7px;
font-weight: 400;
color: #9CA3AF;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-sol-promo__mockup-val {
font-size: 7px;
font-weight: 500;
color: #6B7280;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
font-variant-numeric: tabular-nums;
}
.widget-f7f8d9 .ce-sol-promo__mockup-divider {
display: block;
height: 1px;
background: rgba(16, 22, 38, 0.08);
margin: 3px 0 4px;
}
.widget-f7f8d9 .ce-sol-promo__mockup-total-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-f7f8d9 .ce-sol-promo__mockup-total-label {
font-size: 6px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6B7280;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-sol-promo__mockup-total-val {
font-size: 9px;
font-weight: 700;
color: #5B3FE6;
font-variant-numeric: tabular-nums;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-sol-promo__body {
display: flex;
flex-direction: column;
gap: 10px;
}
.widget-f7f8d9 .ce-sol-promo__title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.widget-f7f8d9 .ce-sol-promo__title {
font-size: 17px;
font-weight: 600;
color: #101626;
line-height: 1.25;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
letter-spacing: -0.01em;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-sol-promo__arrow {
width: 16px;
height: 16px;
color: #101626;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.widget-f7f8d9 .ce-sol-promo:hover .ce-sol-promo__arrow {
transform: translate(2px, -2px);
}
.widget-f7f8d9 .ce-sol-promo__desc {
font-size: 14px;
font-weight: 400;
color: #4B5563;
line-height: 1.5;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
text-decoration: none !important;
}
@media (prefers-reduced-motion: reduce) {
.widget-f7f8d9 .ce-sol-promo__panel,
.widget-f7f8d9 .ce-sol-promo__mockup,
.widget-f7f8d9 .ce-sol-promo__arrow {
transition: none;
}
}
.widget-f7f8d9 .ce-sol-mob-accordion {
display: none;
}
@media (min-width: 768px) and (max-width: 1023px) {
.widget-f7f8d9 .ce-mega__inner--solutions-3col {
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 36px 40px;
max-width: 100%;
}
.widget-f7f8d9 .ce-sol-col--2 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-sol-col--3 {
grid-column: 1/-1;
padding-left: 0;
padding-top: 32px;
border-top: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-sol-promo__img-wrap {
aspect-ratio: 21/9;
}
}
@media (max-width: 767px) {
.widget-f7f8d9 {
/* On mobile, the mega is hidden; the mobile menu handles navigation */
/* But if it were shown, stack all columns */
/* Mobile accordion for col 1 items */
/* Col 3 promo: when full-width, let image expand naturally */
}
.widget-f7f8d9 .ce-mega__inner--solutions-3col {
grid-template-columns: 1fr;
gap: 0;
padding: 32px 24px;
}
.widget-f7f8d9 .ce-sol-col--1 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-sol-col--2 {
display: none;
}
.widget-f7f8d9 .ce-sol-col--3 {
padding-left: 0;
padding-top: 32px;
border-top: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-sol-mob-accordion.is-open {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 12px;
padding-bottom: 8px;
}
.widget-f7f8d9 .ce-sol-promo__img-wrap {
max-width: 100%;
aspect-ratio: 16/10;
}
}
@media (min-width: 768px) and (max-width: 900px) {
.widget-f7f8d9 #mega-solutions .ce-sol-promo__img-wrap {
aspect-ratio: 16/9;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.widget-f7f8d9 .ce-mega__inner--res-3col {
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 36px 40px;
}
.widget-f7f8d9 .ce-res-col--2 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-res-col--3 {
grid-column: 1/-1;
border-top: 1px solid rgba(16, 22, 38, 0.08);
padding-top: 32px;
}
.widget-f7f8d9 .ce-res-promo__img-wrap {
aspect-ratio: 21/9;
}
}
@media (max-width: 767px) {
.widget-f7f8d9 .ce-mega__inner--res-3col {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px 24px;
}
.widget-f7f8d9 .ce-res-col--1 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-res-col--2 {
border-right: none;
border-top: 1px solid rgba(16, 22, 38, 0.08);
padding-right: 0;
padding-top: 32px;
}
.widget-f7f8d9 .ce-res-col--3 {
border-top: 1px solid rgba(16, 22, 38, 0.08);
padding-top: 32px;
}
.widget-f7f8d9 .ce-res-promo__img-wrap {
aspect-ratio: 16/10;
}
}
.widget-f7f8d9 .ce-mega__inner--pricing-3col {
display: grid;
grid-template-columns: var(--dropdown-col1-width, 1fr) var(--dropdown-col2-width, 1fr) var(--dropdown-col3-width, 1.2fr);
gap: 0;
max-width: 1340px;
padding: 40px 56px;
margin-left: auto;
margin-right: auto;
align-items: stretch;
position: relative;
background: #FFFFFF;
border-radius: 0;
}
.widget-f7f8d9 #mega-pricing {
background: #FFFFFF;
}
.widget-f7f8d9 .ce-pri-col--1 {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 56px;
border-right: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-pri-col--2 {
display: flex;
flex-direction: column;
gap: 0;
padding-left: 56px;
padding-right: 56px;
border-right: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 .ce-pri-col--3 {
padding-left: 56px;
}
.widget-f7f8d9 .ce-pri-col--1 .ce-mega__section-label,
.widget-f7f8d9 .ce-pri-col--2 .ce-mega__section-label,
.widget-f7f8d9 .ce-pri-col--3 .ce-mega__section-label {
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #6B7280;
}
.widget-f7f8d9 #mega-pricing .ce-sol-service-item:hover,
.widget-f7f8d9 #mega-pricing .ce-sol-service-item--active {
background: var(--dropdown-item-hover-bg, rgba(91, 63, 230, 0.06));
border-left-color: var(--dropdown-item-active-border-color, #5B3FE6);
}
.widget-f7f8d9 #mega-pricing .ce-sol-sublist {
min-height: 180px;
}
.widget-f7f8d9 #mega-pricing .ce-sol-sub-item__title {
font-size: var(--dropdown-item-label-font-size, 14px);
font-weight: var(--dropdown-item-label-font-weight, 600);
color: var(--dropdown-item-label-color, #101626);
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon-wrap {
background: linear-gradient(135deg, #a78bfa 0%, #6366f1 40%, #ec4899 100%);
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__link:hover .ce-row-item__icon-wrap {
background: linear-gradient(135deg, #c4b5fd 0%, #818cf8 40%, #f472b6 100%);
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default path,
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default rect,
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default line,
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default polyline,
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default circle {
stroke: rgba(255, 255, 255, 0.92);
fill: none;
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--default [fill="#0D0D0D"] {
fill: rgba(255, 255, 255, 0.92);
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__icon--hover {
opacity: 0;
}
.widget-f7f8d9 #mega-pricing [data-pri-feat-index] .ce-row-item__link:hover .ce-row-item__icon--hover {
opacity: 1;
}
@media (min-width: 768px) and (max-width: 1023px) {
.widget-f7f8d9 .ce-mega__inner--pricing-3col {
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 36px 40px;
max-width: 100%;
}
.widget-f7f8d9 .ce-pri-col--2 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-pri-col--3 {
grid-column: 1/-1;
padding-left: 0;
padding-top: 32px;
border-top: 1px solid rgba(16, 22, 38, 0.08);
}
}
@media (max-width: 767px) {
.widget-f7f8d9 {
/* Mobile accordion for pricing cat items */
}
.widget-f7f8d9 .ce-mega__inner--pricing-3col {
grid-template-columns: 1fr;
gap: 0;
padding: 32px 24px;
}
.widget-f7f8d9 .ce-pri-col--1 {
border-right: none;
padding-right: 0;
}
.widget-f7f8d9 .ce-pri-col--2 {
display: none;
}
.widget-f7f8d9 .ce-pri-col--3 {
padding-left: 0;
padding-top: 32px;
border-top: 1px solid rgba(16, 22, 38, 0.08);
}
.widget-f7f8d9 #mega-pricing .ce-sol-mob-accordion.is-open {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 12px;
padding-bottom: 8px;
}
}
.widget-f7f8d9 .ce-row-item__title-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.widget-f7f8d9 .ce-row-item__title-row .ce-row-item__title {
white-space: normal;
overflow: visible;
text-overflow: unset;
flex-shrink: 1;
min-width: 0;
}
.widget-f7f8d9 .ce-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 99px;
line-height: 1;
flex-shrink: 0;
}
.widget-f7f8d9 .ce-badge--popular {
background: rgba(45, 108, 224, 0.1);
border: 1px solid rgba(45, 108, 224, 0.35);
color: #2D6CE0;
}
.widget-f7f8d9 .ce-badge--new {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.35);
color: #059669;
}
.widget-f7f8d9 .ce-mega__section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(13, 13, 13, 0.4);
text-transform: uppercase;
margin: 0 0 12px 0;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-row-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.widget-f7f8d9 .ce-row-item {
display: block;
}
.widget-f7f8d9 .ce-row-item__link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none !important;
cursor: pointer;
transition: background 150ms ease;
outline: none;
}
.widget-f7f8d9 .ce-row-item__link:hover {
background: rgba(13, 13, 13, 0.05);
}
.widget-f7f8d9 .ce-row-item__link:focus-visible {
outline: 2px solid rgba(16, 22, 38, 0.4);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-row-item__icon-wrap {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(13, 13, 13, 0.06);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 150ms ease;
}
.widget-f7f8d9 .ce-row-item__link:hover .ce-row-item__icon-wrap {
background: rgba(13, 13, 13, 0.08);
}
.widget-f7f8d9 .ce-row-item__icon {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
position: absolute;
transition: opacity 200ms ease;
}
.widget-f7f8d9 .ce-row-item__icon--default {
opacity: 1;
}
.widget-f7f8d9 .ce-row-item__icon--hover {
opacity: 0;
}
.widget-f7f8d9 .ce-row-item__link:hover .ce-row-item__icon--default {
opacity: 0;
}
.widget-f7f8d9 .ce-row-item__link:hover .ce-row-item__icon--hover {
opacity: 1;
}
.widget-f7f8d9 .ce-row-item__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.widget-f7f8d9 .ce-row-item__title {
font-size: 14.5px;
font-weight: 500;
color: #0D0D0D;
font-family: "Geist-Medium", "Geist", system-ui, sans-serif;
letter-spacing: -0.01em;
white-space: nowrap;
text-decoration: none !important;
}
.widget-f7f8d9 .ce-row-item__desc {
font-size: 12.5px;
font-weight: 400;
color: rgba(13, 13, 13, 0.55);
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
white-space: nowrap;
text-decoration: none !important;
}
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item__link {
border-radius: 10px;
padding: 10px 12px;
border-left: 3px solid transparent;
transition: background 0.2s ease, border-left-color 0.2s ease;
}
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item__link:hover,
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item--active .ce-row-item__link {
background: rgba(91, 63, 230, 0.06);
border-left-color: #5B3FE6;
}
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item__icon-wrap {
width: 36px;
height: 36px;
border-radius: 8px;
}
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item__title {
font-size: 15px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
color: #101626;
line-height: 1.2;
white-space: normal;
}
.widget-f7f8d9 #mega-resources .ce-res-col--1 .ce-row-item__desc {
font-size: 12px;
font-weight: 400;
color: #6B7280;
line-height: 1.35;
white-space: normal;
}
.widget-f7f8d9 .ce-mobile {
pointer-events: none;
display: none;
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background: linear-gradient(180deg, #101626 0%, #0e142a 100%);
z-index: 200;
flex-direction: column;
transform: translateX(100%);
transition: transform 300ms ease-out;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.widget-f7f8d9 .ce-mobile.is-open {
pointer-events: auto;
transform: translateX(0);
}
.widget-f7f8d9 .ce-mobile__backdrop {
pointer-events: none;
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 190;
opacity: 0;
transition: opacity 300ms ease;
}
.widget-f7f8d9 .ce-mobile__backdrop.is-visible {
pointer-events: auto;
opacity: 1;
}
.widget-f7f8d9 .ce-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 64px;
flex-shrink: 0;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.widget-f7f8d9 .ce-mobile__logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.widget-f7f8d9 .ce-mobile__close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.85);
border-radius: 6px;
transition: color 150ms ease;
}
.widget-f7f8d9 .ce-mobile__close:hover {
color: #ffffff;
}
.widget-f7f8d9 .ce-mobile__close:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.widget-f7f8d9 .ce-mobile__close svg {
width: 24px;
height: 24px;
}
.widget-f7f8d9 .ce-mobile__links {
list-style: none;
padding: 24px 24px 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.widget-f7f8d9 .ce-mobile__item {
border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.widget-f7f8d9 .ce-mobile__link {
display: block;
padding: 16px 0;
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
transition: color 150ms ease;
}
.widget-f7f8d9 .ce-mobile__link:hover {
color: #ffffff;
}
.widget-f7f8d9 .ce-mobile__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 0;
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
background: none;
border: none;
cursor: pointer;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
text-align: left;
transition: color 150ms ease;
}
.widget-f7f8d9 .ce-mobile__trigger:hover {
color: #ffffff;
}
.widget-f7f8d9 .ce-mobile__trigger:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
border-radius: 4px;
}
.widget-f7f8d9 .ce-mobile__chevron {
width: 16px;
height: 16px;
transition: transform 200ms ease;
flex-shrink: 0;
}
.widget-f7f8d9 .ce-mobile__trigger.is-active .ce-mobile__chevron {
transform: rotate(180deg);
}
.widget-f7f8d9 .ce-mobile__accordion-body {
display: none;
flex-direction: column;
gap: 0;
padding-bottom: 8px;
}
.widget-f7f8d9 .ce-mobile__accordion-body.is-open {
display: flex;
}
.widget-f7f8d9 .ce-mobile__sub-link {
display: block;
padding: 12px 16px;
font-size: 15px;
font-weight: 400;
color: rgba(255, 255, 255, 0.65);
text-decoration: none !important;
border-radius: 6px;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
transition: color 150ms ease, background 150ms ease;
}
.widget-f7f8d9 .ce-mobile__sub-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.05);
}
.widget-f7f8d9 .ce-mobile__sub-explore {
display: block;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
text-decoration: none !important;
font-family: "Geist-Regular", "Geist", system-ui, sans-serif;
transition: color 150ms ease;
}
.widget-f7f8d9 .ce-mobile__sub-explore:hover {
color: rgba(255, 255, 255, 0.75);
}
.widget-f7f8d9 .ce-mobile__cta-wrap {
display: flex;
flex-direction: column;
row-gap: 8px;
padding: 24px;
flex-shrink: 0;
}
.widget-f7f8d9 .ce-mobile__cta {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
background: #ffffff;
color: #101626;
font-size: 16px;
font-weight: 600;
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
text-decoration: none;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 150ms ease, transform 100ms ease;
}
.widget-f7f8d9 .ce-mobile__cta:hover {
background: #F5F4F1;
}
.widget-f7f8d9 .ce-mobile__cta:active {
transform: scale(0.98);
}
.widget-f7f8d9 .ce-mobile__cta--subscriber {
background: var(--subscriber-login-bg, #FCC60C);
color: var(--subscriber-login-color, #101626);
}
.widget-f7f8d9 .ce-mobile__cta--subscriber:hover {
background: var(--subscriber-login-bg-hover, #E3B10B);
}
.widget-f7f8d9 .ce-mobile__sub-section-label {
display: block;
padding: 10px 16px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
font-family: "Geist-SemiBold", "Geist", system-ui, sans-serif;
}
.widget-f7f8d9 .ce-mobile__sub-link--badged {
display: flex;
align-items: center;
gap: 8px;
}
.widget-f7f8d9 .ce-badge--mobile {
flex-shrink: 0;
}
@media (max-width: 1023px) {
.widget-f7f8d9 .ce-nav {
height: 64px;
}
.widget-f7f8d9 .ce-nav__inner {
padding: 0 24px;
}
.widget-f7f8d9 .ce-nav__links,
.widget-f7f8d9 .ce-nav__cta-group {
display: none;
}
.widget-f7f8d9 .ce-nav__hamburger {
display: flex;
margin-left: auto;
position: relative;
z-index: 101;
pointer-events: auto;
}
.widget-f7f8d9 .ce-mobile {
display: flex;
}
.widget-f7f8d9 .ce-mobile__backdrop {
display: block;
}
.widget-f7f8d9 .ce-mega {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.widget-f7f8d9 .ce-nav__inner {
padding: 0 32px;
}
.widget-f7f8d9 .ce-nav__logo {
margin-left: 48px;
}
}
@media (max-width: 767px) {
.widget-f7f8d9 .sol-photo-card {
height: 160px;
}
.widget-f7f8d9 .ce-nav__logo {
margin-left: 16px;
}
}
@media (max-width: 480px) {
.widget-f7f8d9 .ce-nav__logo {
margin-left: 0;
}
}
@charset "UTF-8";
.widget-7d1971 {
/* =============================================
GLOBAL FOOTER STYLES
============================================= */
/* ── Rounded dark box wrapping bands 3–5 ─── */
/* =============================================
BAND 1 — MARQUEE CTA
============================================= */
/* ── Marquee container & track ─────────────── */
/* ── Avatar clusters ────────────────────────── */
/* ── Avatar placeholders ────────────────────── */
/* ── CTA Buttons ────────────────────────────── */
/* =============================================
BAND 2 — TWO-CARD SHOWCASE
============================================= */
/* Overlay activates on the left CTA card only when a custom image is set */
/* ── LEFT CARD — CTA ─────────────────────── */
/* ── RIGHT CARD — ROI MOCKUP ─────────────── */
/* Frosted-glass chrome frame */
/* ── DASHBOARD MOCKUP INTERNALS ─────────────── */
/* Chrome / title bar */
/* Body layout */
/* Sidebar */
/* Main content */
/* Stat cards */
/* Chart area */
/* Deals bottom row */
/* Column headers */
/* =============================================
BAND 3 — MAIN FOOTER
============================================= */
/* Newsletter */
/* Contact section */
/* =============================================
BAND 4 — WORDMARK
============================================= */
/* =============================================
BAND 5 — BOTTOM BAR
============================================= */
/* =============================================
TABLET STYLES (768px – 1023px)
============================================= */
/* =============================================
MOBILE STYLES (below 768px)
============================================= */
/* =============================================
ROI CALCULATOR LAPTOP SCREEN CONTENT
============================================= */
/* Overall screen content wrapper */
/* Browser chrome bar */
/* App layout */
/* Sidebar */
/* Main content area */
/* ROI calculator grid */
/* Inputs panel */
/* Results panel */
/* Reclaim summary card */
/* Footnote */
/* =============================================
REDUCED MOTION
============================================= */
}
.widget-7d1971 .cb-footer {
background: #FFFFFF;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #FFFFFF;
width: 100%;
display: block;
padding: 0 24px 24px;
box-sizing: border-box;
}
.widget-7d1971 .footer-dark-box {
background: #101626;
border-radius: 24px;
overflow: hidden;
}
.widget-7d1971 .footer-cta-marquee {
background: #FFFFFF;
padding: 96px 0 4px;
text-align: center;
position: relative;
overflow: hidden;
}
.widget-7d1971 .marquee-container {
width: 100%;
overflow: hidden;
margin-bottom: 64px;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.widget-7d1971 .marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll 40s linear infinite;
animation-play-state: paused;
}
.widget-7d1971 .marquee-track.marquee-running {
animation-play-state: running;
}
.widget-7d1971 .marquee-segment {
display: inline-flex;
align-items: center;
gap: 28px;
padding-right: 28px;
}
.widget-7d1971 .marquee-text {
font-size: 88px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.04em;
color: #0D0D0D;
white-space: nowrap;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.widget-7d1971 .avatar-cluster {
display: inline-flex;
align-items: center;
margin: 0 16px;
flex-shrink: 0;
}
.widget-7d1971 .avatar-cluster.circles {
gap: 0;
}
.widget-7d1971 .avatar-cluster.circles .avatar:not(:first-child) {
margin-left: -16px;
}
.widget-7d1971 .avatar-cluster.squares {
gap: 0;
}
.widget-7d1971 .avatar-cluster.squares .avatar:not(:first-child) {
margin-left: -16px;
}
.widget-7d1971 .avatar {
width: 88px;
height: 88px;
object-fit: cover;
flex-shrink: 0;
}
.widget-7d1971 .avatar.circle {
border-radius: 50%;
border: 4px solid #FFFFFF;
box-shadow: 0 2px 8px rgba(13, 13, 13, 0.08);
}
.widget-7d1971 .avatar.square {
border-radius: 18px;
border: 4px solid #FFFFFF;
box-shadow: 0 2px 8px rgba(13, 13, 13, 0.08);
}
.widget-7d1971 .avatar-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
}
.widget-7d1971 .avatar-placeholder.circle-1 {
background: linear-gradient(135deg, #5B3FE6, #E64E9B);
}
.widget-7d1971 .avatar-placeholder.circle-2 {
background: linear-gradient(135deg, #2D6CE0, #9B45E6);
}
.widget-7d1971 .avatar-placeholder.circle-3 {
background: linear-gradient(135deg, #E64E9B, #FCC60C);
}
.widget-7d1971 .avatar-placeholder.square-1 {
background: linear-gradient(135deg, #FCC60C, #E64E9B);
}
.widget-7d1971 .avatar-placeholder.square-2 {
background: linear-gradient(135deg, #5B3FE6, #2D6CE0);
}
.widget-7d1971 .avatar-placeholder.square-3 {
background: linear-gradient(135deg, #9B45E6, #E64E9B);
}
.widget-7d1971 .footer-cta-marquee .cta-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
padding: 0 24px;
margin-top: 0;
}
.widget-7d1971 .footer-cta-marquee .cta-buttons a {
text-decoration: none;
display: inline-flex;
align-items: center;
}
.widget-7d1971 .cta-primary {
background: linear-gradient(135deg, #5B3FE6 0%, #E64E9B 100%);
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
padding: 17px 34px;
border-radius: 999px;
text-decoration: none;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: transform 200ms ease, box-shadow 200ms ease;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.widget-7d1971 .cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(91, 63, 230, 0.3);
}
.widget-7d1971 .cta-secondary {
background: transparent;
color: #0D0D0D;
font-size: 16px;
font-weight: 500;
padding: 17px 34px;
border-radius: 999px;
border: 0.5px solid rgba(13, 13, 13, 0.2);
text-decoration: none;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background 200ms ease;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.widget-7d1971 .cta-secondary:hover {
background: rgba(13, 13, 13, 0.04);
}
.widget-7d1971 .footer-showcase {
background: #FFFFFF;
padding: 24px 56px 80px;
}
.widget-7d1971 .showcase-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
.widget-7d1971 .showcase-card {
position: relative;
border-radius: 24px;
overflow: hidden;
min-height: 380px;
display: flex;
flex-direction: column;
}
.widget-7d1971 .card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-size: cover;
background-position: center;
}
.widget-7d1971 .card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(13, 13, 13, 0);
transition: background 200ms ease;
pointer-events: none;
}
.widget-7d1971 .cta-card[data-has-image=true] .card-overlay {
background: rgba(13, 13, 13, 0.4);
}
.widget-7d1971 .cta-card .card-bg {
background-color: #0D0D0D;
background-image: radial-gradient(circle at 30% 70%, rgba(91, 63, 230, 0.2) 0%, transparent 60%);
}
.widget-7d1971 .cta-card .card-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 56px 48px;
flex: 1;
}
.widget-7d1971 .card-headline {
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1 !important;
letter-spacing: -0.01em;
color: #FFFFFF;
max-width: 360px;
margin: 0 0 56px;
}
.widget-7d1971 .cta-card a {
text-decoration: none;
display: inline-flex;
align-items: center;
}
.widget-7d1971 .card-cta-button {
background: #FFFFFF;
color: #0D0D0D;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
font-weight: 500;
padding: 14px 28px;
border-radius: 999px;
text-decoration: none;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.widget-7d1971 .card-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}
.widget-7d1971 .card-cta-button:active {
transform: scale(0.98);
}
.widget-7d1971 .roi-card .card-bg {
background: linear-gradient(140deg, #e0e7ff 0%, #f0e6ff 40%, #fce7f3 75%, #fff1e6 100%);
}
.widget-7d1971 .roi-card {
padding: 40px 36px 0;
justify-content: flex-start;
}
.widget-7d1971 .laptop-mockup {
position: relative;
z-index: 2;
width: 96%;
max-width: 520px;
margin: auto auto 0;
}
.widget-7d1971 .laptop-frame {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.9);
border-bottom: none;
border-radius: 12px 12px 0 0;
padding: 6px 6px 0;
box-shadow: 0 2px 0 rgba(255, 255, 255, 0.95) inset, 0 20px 56px rgba(80, 60, 180, 0.18), 0 4px 16px rgba(80, 60, 180, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.widget-7d1971 .laptop-screen {
width: 100%;
aspect-ratio: 16/10;
background: #f8f9fc;
border-radius: 8px 8px 0 0;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
}
.widget-7d1971 .laptop-screen-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.widget-7d1971 .dmock-root {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #f7f8fb;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow: hidden;
}
.widget-7d1971 .dmock-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.85);
border-bottom: 0.5px solid rgba(13, 13, 13, 0.07);
flex-shrink: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.widget-7d1971 .dmock-dots {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.widget-7d1971 .dmock-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: block;
flex-shrink: 0;
}
.widget-7d1971 .dmock-dot-r {
background: #ff5f57;
}
.widget-7d1971 .dmock-dot-y {
background: #febc2e;
}
.widget-7d1971 .dmock-dot-g {
background: #28c840;
}
.widget-7d1971 .dmock-chrome-nav {
display: flex;
align-items: center;
gap: 5px;
margin-left: 6px;
}
.widget-7d1971 .dmock-chrome-spacer {
flex: 1;
}
.widget-7d1971 .dmock-chrome-actions {
display: flex;
align-items: center;
gap: 5px;
}
.widget-7d1971 .dmock-chrome-icon {
width: 11px;
height: 11px;
color: rgba(13, 13, 13, 0.4);
flex-shrink: 0;
}
.widget-7d1971 .dmock-body {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
.widget-7d1971 .dmock-sidebar {
width: 72px;
background: rgba(255, 255, 255, 0.9);
border-right: 0.5px solid rgba(13, 13, 13, 0.07);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
gap: 0;
flex-shrink: 0;
}
.widget-7d1971 .dmock-sidebar-logo {
margin-bottom: 12px;
}
.widget-7d1971 .dmock-sidebar-logo-icon {
width: 22px;
height: 22px;
}
.widget-7d1971 .dmock-sidebar-logo-icon svg {
width: 22px;
height: 22px;
display: block;
}
.widget-7d1971 .dmock-nav {
display: flex;
flex-direction: column;
width: 100%;
gap: 1px;
flex: 1;
}
.widget-7d1971 .dmock-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 5px 4px;
cursor: pointer;
color: rgba(13, 13, 13, 0.35);
transition: color 150ms ease;
position: relative;
}
.widget-7d1971 .dmock-nav-item svg {
width: 12px;
height: 12px;
}
.widget-7d1971 .dmock-nav-item span {
font-size: 5.5px;
font-weight: 400;
letter-spacing: 0.01em;
white-space: nowrap;
}
.widget-7d1971 .dmock-nav-active {
color: #4f46e5;
background: rgba(79, 70, 229, 0.07);
border-radius: 6px;
margin: 0 6px;
}
.widget-7d1971 .dmock-sidebar-user {
margin-top: auto;
padding-top: 8px;
}
.widget-7d1971 .dmock-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #a855f7);
}
.widget-7d1971 .dmock-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 10px 12px 6px;
gap: 8px;
min-width: 0;
}
.widget-7d1971 .dmock-content-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-shrink: 0;
}
.widget-7d1971 .dmock-content-title {
font-size: 9px;
font-weight: 600;
color: #0d0d0d;
line-height: 1.2;
}
.widget-7d1971 .dmock-content-sub {
font-size: 6px;
color: rgba(13, 13, 13, 0.45);
margin-top: 1px;
}
.widget-7d1971 .dmock-header-actions {
display: flex;
gap: 5px;
align-items: center;
flex-shrink: 0;
}
.widget-7d1971 .dmock-btn-outline {
font-size: 6px;
font-weight: 500;
color: #0d0d0d;
border: 0.5px solid rgba(13, 13, 13, 0.2);
border-radius: 4px;
padding: 3px 7px;
white-space: nowrap;
background: rgba(255, 255, 255, 0.8);
}
.widget-7d1971 .dmock-btn-fill {
font-size: 6px;
font-weight: 500;
color: #fff;
background: #0d0d0d;
border-radius: 4px;
padding: 3px 7px;
white-space: nowrap;
}
.widget-7d1971 .dmock-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
flex-shrink: 0;
}
.widget-7d1971 .dmock-stat-card {
background: rgba(255, 255, 255, 0.85);
border: 0.5px solid rgba(13, 13, 13, 0.07);
border-radius: 6px;
padding: 6px 7px 5px;
display: flex;
flex-direction: column;
gap: 2px;
backdrop-filter: blur(4px);
}
.widget-7d1971 .dmock-stat-icon {
width: 11px;
height: 11px;
color: rgba(13, 13, 13, 0.3);
margin-bottom: 1px;
}
.widget-7d1971 .dmock-stat-label {
font-size: 5.5px;
color: rgba(13, 13, 13, 0.45);
font-weight: 400;
}
.widget-7d1971 .dmock-stat-value {
font-size: 7px;
font-weight: 600;
color: #0d0d0d;
white-space: nowrap;
}
.widget-7d1971 .dmock-up {
color: #16a34a;
font-size: 5.5px;
font-weight: 500;
}
.widget-7d1971 .dmock-down {
color: #dc2626;
font-size: 5.5px;
font-weight: 500;
}
.widget-7d1971 .dmock-chart-area {
background: rgba(255, 255, 255, 0.85);
border: 0.5px solid rgba(13, 13, 13, 0.07);
border-radius: 8px;
padding: 8px 10px 4px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
backdrop-filter: blur(4px);
}
.widget-7d1971 .dmock-chart-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-shrink: 0;
}
.widget-7d1971 .dmock-chart-label {
font-size: 5.5px;
color: rgba(13, 13, 13, 0.45);
}
.widget-7d1971 .dmock-chart-balance {
font-size: 9px;
font-weight: 700;
color: #0d0d0d;
margin-top: 1px;
}
.widget-7d1971 .dmock-chart-legend {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
}
.widget-7d1971 .dmock-legend-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.widget-7d1971 .dmock-legend-green {
background: #22c55e;
}
.widget-7d1971 .dmock-legend-orange {
background: #f97316;
}
.widget-7d1971 .dmock-legend-text {
font-size: 5px;
color: rgba(13, 13, 13, 0.5);
}
.widget-7d1971 .dmock-chart-tabs {
display: flex;
gap: 3px;
align-items: center;
flex-shrink: 0;
}
.widget-7d1971 .dmock-tab {
font-size: 5.5px;
color: rgba(13, 13, 13, 0.4);
padding: 2px 5px;
border-radius: 3px;
cursor: pointer;
}
.widget-7d1971 .dmock-tab-active {
background: #0d0d0d;
color: #fff;
}
.widget-7d1971 .dmock-chart-svg-wrap {
flex: 1;
min-height: 0;
overflow: hidden;
}
.widget-7d1971 .dmock-chart-svg {
width: 100%;
height: 100%;
display: block;
}
.widget-7d1971 .dmock-deals-row {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding-bottom: 2px;
}
.widget-7d1971 .dmock-deals-title {
font-size: 7px;
font-weight: 600;
color: #0d0d0d;
flex: 1;
}
.widget-7d1971 .dmock-search-mock,
.widget-7d1971 .dmock-filter-mock {
display: flex;
align-items: center;
gap: 3px;
font-size: 5.5px;
color: rgba(13, 13, 13, 0.45);
border: 0.5px solid rgba(13, 13, 13, 0.12);
border-radius: 4px;
padding: 2px 6px;
background: rgba(255, 255, 255, 0.8);
}
.widget-7d1971 .dmock-search-mock svg,
.widget-7d1971 .dmock-filter-mock svg {
width: 8px;
height: 8px;
color: rgba(13, 13, 13, 0.35);
}
.widget-7d1971 .dmock-col-headers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
flex-shrink: 0;
padding-bottom: 4px;
}
.widget-7d1971 .dmock-col-headers span {
font-size: 5.5px;
font-weight: 500;
color: rgba(13, 13, 13, 0.4);
background: rgba(255, 255, 255, 0.7);
border: 0.5px solid rgba(13, 13, 13, 0.07);
border-radius: 4px;
padding: 3px 5px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-7d1971 .footer-main {
background: transparent;
padding: 64px 56px 32px;
}
.widget-7d1971 .footer-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr 1.6fr;
gap: 32px;
}
.widget-7d1971 .footer-col {
display: flex;
flex-direction: column;
}
.widget-7d1971 .footer-col-group + .footer-col-group {
margin-top: 28px;
}
.widget-7d1971 .col-header {
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4) !important;
margin: 0 0 18px !important;
}
.widget-7d1971 .footer-col a,
.widget-7d1971 .footer-col-link {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
margin-bottom: 12px;
transition: color 200ms ease;
display: block;
cursor: pointer;
}
.widget-7d1971 .footer-col a:hover,
.widget-7d1971 .footer-col a:hover .footer-col-link {
color: #FFFFFF;
}
.widget-7d1971 .footer-col > a > .footer-col-link:hover {
color: #FFFFFF;
}
.widget-7d1971 .footer-newsletter {
display: flex;
flex-direction: column;
}
.widget-7d1971 .newsletter-headline {
font-size: 17px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
margin: 0 0 8px !important;
letter-spacing: 0.01em !important;
word-spacing: 0.1em !important;
}
.widget-7d1971 .newsletter-subtext {
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.6) !important;
margin: 0 0 16px !important;
}
.widget-7d1971 .newsletter-form {
display: flex;
gap: 8px;
}
.widget-7d1971 .newsletter-input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 0.5px solid rgba(255, 255, 255, 0.15);
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
color: #FFFFFF;
outline: none;
transition: border-color 200ms ease;
}
.widget-7d1971 .newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.widget-7d1971 .newsletter-input:focus {
border-color: rgba(91, 63, 230, 0.6);
}
.widget-7d1971 .newsletter-button {
background: linear-gradient(135deg, #5B3FE6, #E64E9B);
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
padding: 10px 18px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: filter 200ms ease;
white-space: nowrap;
}
.widget-7d1971 .newsletter-button:hover {
filter: brightness(1.1);
}
.widget-7d1971 .newsletter-fineprint {
font-size: 11px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.4) !important;
margin: 8px 0 0 !important;
}
.widget-7d1971 .contact-section {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.widget-7d1971 .contact-item {
display: flex;
flex-direction: column;
}
.widget-7d1971 .contact-label {
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.4) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 2px !important;
}
.widget-7d1971 .contact-text {
font-size: 13px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.7) !important;
line-height: 1.5;
margin: 0 !important;
text-decoration: none;
}
.widget-7d1971 .contact-link {
text-decoration: none;
transition: color 200ms ease;
}
.widget-7d1971 .contact-link:hover {
color: #FFFFFF !important;
}
.widget-7d1971 .footer-wordmark-band {
background: transparent;
width: 100%;
overflow: hidden;
padding: 40px 0 0 0;
line-height: 0.85;
margin-top: 0;
}
.widget-7d1971 .footer-wordmark {
--wordmark-font: "Geist", "Inter", sans-serif;
--wordmark-weight: 700;
--wordmark-size-min: 80px;
--wordmark-size-max: 280px;
--wordmark-letter-spacing: -0.04em;
--wordmark-color-top: #FFFFFF;
--wordmark-color-bottom: #FCC60C;
font-family: var(--wordmark-font);
font-weight: var(--wordmark-weight);
font-size: clamp(var(--wordmark-size-min), 18vw, var(--wordmark-size-max));
letter-spacing: var(--wordmark-letter-spacing);
line-height: 0.85 !important;
text-transform: none;
white-space: nowrap;
margin: 32px 0 0 0 !important;
padding: 0 !important;
display: block;
background: linear-gradient(to top, #146ef5 0%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-7d1971 .footer-wordmark.wm-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 600px) {
.widget-7d1971 .footer-wordmark {
line-height: 0.9 !important;
}
}
.widget-7d1971 .footer-bottom {
background: transparent;
border-top: 0.5px solid rgba(255, 255, 255, 0.06);
padding: 24px 56px;
}
.widget-7d1971 .bottom-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.widget-7d1971 .bottom-logo {
justify-self: flex-start;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.widget-7d1971 .bottom-logo a {
display: inline-flex;
align-items: center;
}
.widget-7d1971 .bottom-logo img {
max-height: 28px;
width: auto;
display: block;
}
.widget-7d1971 .bottom-copyright {
justify-self: center;
text-align: center;
font-size: 12px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.35) !important;
margin: 0 !important;
}
.widget-7d1971 .bottom-social {
justify-self: flex-end;
display: flex;
gap: 16px;
align-items: center;
}
.widget-7d1971 .bottom-social a {
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: color 200ms ease, transform 200ms ease;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.widget-7d1971 .social-icon {
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, 0.4);
transition: color 200ms ease, transform 200ms ease;
cursor: pointer;
}
.widget-7d1971 .social-icon svg {
width: 20px;
height: 20px;
}
.widget-7d1971 .bottom-social a:hover .social-icon {
color: #FFFFFF;
transform: scale(1.1);
}
.widget-7d1971 .bottom-social a:hover {
color: #FFFFFF;
}
@media (min-width: 768px) and (max-width: 1024px) {
.widget-7d1971 .cb-footer {
padding: 0 16px 16px;
}
.widget-7d1971 .footer-dark-box {
border-radius: 20px;
}
.widget-7d1971 .footer-cta-marquee {
padding: 72px 0 4px;
}
.widget-7d1971 .marquee-text {
font-size: 64px;
}
.widget-7d1971 .avatar,
.widget-7d1971 .avatar-placeholder {
width: 64px;
height: 64px;
}
.widget-7d1971 .marquee-track {
animation-duration: 32s;
}
.widget-7d1971 .marquee-container {
margin-bottom: 48px;
}
.widget-7d1971 .footer-featured {
padding: 32px 32px;
}
.widget-7d1971 .featured-grid {
gap: 20px;
}
.widget-7d1971 .footer-showcase {
padding: 20px 32px 64px;
}
.widget-7d1971 .card-headline {
font-size: 26px;
}
.widget-7d1971 .laptop-mockup {
max-width: 420px;
}
.widget-7d1971 .footer-main {
padding: 48px 32px 24px;
}
.widget-7d1971 .footer-grid {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.widget-7d1971 .footer-newsletter {
grid-column: 3;
grid-row: 1/span 2;
}
.widget-7d1971 .footer-col-group + .footer-col-group {
margin-top: 20px;
}
.widget-7d1971 .footer-bottom {
padding: 24px 32px;
}
}
@media (max-width: 767px) {
.widget-7d1971 .cb-footer {
padding: 0 12px 12px;
}
.widget-7d1971 .footer-dark-box {
border-radius: 16px;
}
.widget-7d1971 .footer-cta-marquee {
padding: 48px 0 4px;
}
.widget-7d1971 .marquee-text {
font-size: 40px;
}
.widget-7d1971 .avatar,
.widget-7d1971 .avatar-placeholder {
width: 40px;
height: 40px;
}
.widget-7d1971 .avatar.circle {
border-width: 2px;
}
.widget-7d1971 .avatar-placeholder svg {
width: 18px;
height: 18px;
}
.widget-7d1971 .marquee-track {
animation-duration: 24s;
}
.widget-7d1971 .marquee-container {
margin-bottom: 48px;
}
.widget-7d1971 .footer-cta-marquee .cta-buttons {
flex-direction: column;
width: 100%;
align-items: stretch;
}
.widget-7d1971 .footer-cta-marquee .cta-primary,
.widget-7d1971 .footer-cta-marquee .cta-secondary {
width: 100%;
justify-content: center;
}
.widget-7d1971 .footer-featured {
padding: 32px 24px;
}
.widget-7d1971 .featured-grid {
grid-template-columns: 1fr;
}
.widget-7d1971 .footer-showcase {
padding: 16px 24px 56px;
}
.widget-7d1971 .showcase-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.widget-7d1971 .showcase-card {
min-height: 320px;
}
.widget-7d1971 .cta-card .card-content {
padding: 40px 28px;
}
.widget-7d1971 .card-headline {
font-size: 24px;
}
.widget-7d1971 .roi-card {
padding: 32px 20px 0;
}
.widget-7d1971 .laptop-mockup {
max-width: 320px;
width: 100%;
}
.widget-7d1971 .footer-main {
padding: 48px 24px 24px;
}
.widget-7d1971 .footer-grid {
grid-template-columns: 1fr;
}
.widget-7d1971 .footer-col-group {
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
padding-bottom: 4px;
}
.widget-7d1971 .footer-col-group + .footer-col-group {
margin-top: 0;
}
.widget-7d1971 .col-header {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
margin: 0 !important;
user-select: none;
}
.widget-7d1971 .col-header::after {
content: "+";
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
transition: transform 200ms ease;
}
.widget-7d1971 .footer-col-group.open .col-header::after {
content: "−";
}
.widget-7d1971 .footer-col-group .footer-col-links-wrap {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease;
}
.widget-7d1971 .footer-col-group.open .footer-col-links-wrap {
max-height: 600px;
}
.widget-7d1971 .footer-newsletter {
order: -1;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
padding-bottom: 24px;
margin-bottom: 8px;
}
.widget-7d1971 .newsletter-form {
flex-direction: column;
}
.widget-7d1971 .newsletter-button {
width: 100%;
}
.widget-7d1971 .footer-bottom {
padding: 24px 24px;
}
.widget-7d1971 .bottom-grid {
grid-template-columns: 1fr;
justify-items: center;
gap: 16px;
}
.widget-7d1971 .bottom-logo {
justify-self: center;
}
.widget-7d1971 .bottom-copyright {
justify-self: center;
}
.widget-7d1971 .bottom-social {
justify-self: center;
}
}
.widget-7d1971 .laptop-screen-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #F5F4F1;
overflow: hidden;
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.widget-7d1971 .browser-chrome {
background: rgba(13, 13, 13, 0.04);
border-bottom: 0.5px solid rgba(13, 13, 13, 0.08);
padding: 4px 8px;
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
height: 18px;
box-sizing: border-box;
}
.widget-7d1971 .traffic-dots {
display: flex;
gap: 3px;
align-items: center;
flex-shrink: 0;
}
.widget-7d1971 .traffic-dots .dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: block;
flex-shrink: 0;
}
.widget-7d1971 .traffic-dots .red {
background: #FF5F57;
}
.widget-7d1971 .traffic-dots .yellow {
background: #FEBC2E;
}
.widget-7d1971 .traffic-dots .green {
background: #28C840;
}
.widget-7d1971 .url-bar {
background: rgba(255, 255, 255, 0.9);
border: 0.5px solid rgba(13, 13, 13, 0.08);
border-radius: 4px;
padding: 2px 8px;
font: 400 8px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.55);
display: inline-flex;
align-items: center;
gap: 4px;
flex: 1;
max-width: 70%;
margin-left: 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-7d1971 .url-bar svg {
flex-shrink: 0;
}
.widget-7d1971 .url-bar span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.widget-7d1971 .app-layout {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
}
.widget-7d1971 .app-sidebar {
width: 14%;
min-width: 30px;
background: #FFFFFF;
border-right: 0.5px solid rgba(13, 13, 13, 0.06);
padding: 8px 4px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
box-sizing: border-box;
}
.widget-7d1971 .sidebar-logo {
width: 18px;
height: 18px;
border-radius: 5px;
background: linear-gradient(135deg, #5B3FE6, #E64E9B);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font: 600 9px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin-bottom: 8px;
flex-shrink: 0;
}
.widget-7d1971 .sidebar-item {
width: 22px;
height: 22px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.widget-7d1971 .sidebar-item svg {
color: rgba(13, 13, 13, 0.35);
flex-shrink: 0;
}
.widget-7d1971 .sidebar-item.active {
background: linear-gradient(135deg, rgba(91, 63, 230, 0.15), rgba(230, 78, 155, 0.15));
}
.widget-7d1971 .sidebar-item.active svg {
color: #5B3FE6;
}
.widget-7d1971 .app-main {
flex: 1;
padding: 10px 12px;
overflow: hidden;
background: #FFFFFF;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
box-sizing: border-box;
}
.widget-7d1971 .roi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
flex: 1;
min-height: 0;
overflow: hidden;
}
.widget-7d1971 .roi-inputs {
background: #FFFFFF;
border: 0.5px solid rgba(13, 13, 13, 0.08);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
box-sizing: border-box;
}
.widget-7d1971 .roi-kicker {
font: 600 7px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5B3FE6;
display: block;
}
.widget-7d1971 .roi-title {
font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: #0D0D0D !important;
margin: 0 0 4px !important;
padding: 0 !important;
text-transform: none !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
}
.widget-7d1971 .slider-row {
display: flex;
flex-direction: column;
gap: 3px;
}
.widget-7d1971 .slider-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-7d1971 .slider-label {
font: 500 8px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.75);
}
.widget-7d1971 .slider-value {
font: 600 9px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #5B3FE6;
}
.widget-7d1971 .slider-track {
height: 3px;
background: rgba(13, 13, 13, 0.1);
border-radius: 999px;
position: relative;
margin: 2px 0;
}
.widget-7d1971 .slider-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #5B3FE6;
border-radius: 999px;
}
.widget-7d1971 .slider-thumb {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #5B3FE6;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 1px 2px rgba(13, 13, 13, 0.15);
}
.widget-7d1971 .slider-range {
display: flex;
justify-content: space-between;
font: 400 6px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.4);
}
.widget-7d1971 .reset-link {
font: 400 7px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.5);
margin-top: 2px;
display: inline-flex;
align-items: center;
gap: 2px;
}
.widget-7d1971 .roi-results {
display: flex;
flex-direction: column;
gap: 6px;
overflow: hidden;
min-height: 0;
}
.widget-7d1971 .stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.widget-7d1971 .stat-card {
background: rgba(13, 13, 13, 0.04);
border-radius: 6px;
padding: 6px 7px;
display: flex;
flex-direction: column;
gap: 1px;
box-sizing: border-box;
}
.widget-7d1971 .stat-top {
font: 500 6px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(13, 13, 13, 0.5);
line-height: 1.2;
}
.widget-7d1971 .stat-num {
font: 700 12px/1 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #5B3FE6;
letter-spacing: -0.01em;
}
.widget-7d1971 .stat-desc {
font: 400 6px/1.3 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.55);
}
.widget-7d1971 .reclaim-card {
background: rgba(13, 13, 13, 0.04);
border-radius: 6px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-shrink: 0;
box-sizing: border-box;
}
.widget-7d1971 .reclaim-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.widget-7d1971 .reclaim-num {
font: 700 15px/1 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #5B3FE6;
letter-spacing: -0.015em;
}
.widget-7d1971 .reclaim-sub {
font: 400 5.5px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: rgba(13, 13, 13, 0.4);
}
.widget-7d1971 .reclaim-btn {
background: linear-gradient(135deg, #5B3FE6, #E64E9B);
color: #FFFFFF;
font: 600 7px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
padding: 5px 9px;
border-radius: 5px;
border: none;
box-shadow: 0 2px 6px rgba(91, 63, 230, 0.3);
flex-shrink: 0;
cursor: default;
white-space: nowrap;
}
.widget-7d1971 .roi-footnote {
font: 400 5.5px Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
color: rgba(13, 13, 13, 0.4) !important;
text-align: center;
margin: 0 !important;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.widget-7d1971 .marquee-track,
.widget-7d1971 .marquee-track.marquee-running {
animation: none;
}
.widget-7d1971 .cta-primary,
.widget-7d1971 .cta-secondary,
.widget-7d1971 .featured-link,
.widget-7d1971 .card-cta-button,
.widget-7d1971 .footer-col a,
.widget-7d1971 .newsletter-button,
.widget-7d1971 .social-icon,
.widget-7d1971 .bottom-social a,
.widget-7d1971 .contact-link {
transition: none;
}
.widget-7d1971 .cta-primary:hover {
transform: none;
box-shadow: none;
}
.widget-7d1971 .bottom-social a:hover .social-icon {
transform: none;
}
}
@charset "UTF-8";
.widget-31ce05 {
--hero-section-bg: #F1F3F5;
--hero-headline-color: #0F172A;
--hero-headline-size: 56px;
--hero-kicker-bg: #FFFFFF;
--hero-kicker-text: #475569;
--hero-primary-bg: #101626;
--hero-primary-color: #FFFFFF;
--hero-secondary-bg: #FFFFFF;
--hero-secondary-color: #0F172A;
--hero-card-radius: 24px;
--hero-overlay-strength: 0.40;
--hero-tab-pill-bg: rgba(15,23,42,0.35);
--hero-active-tab-bg: #FFFFFF;
--hero-active-tab-color: #0F172A;
/* Gradient stops */
--hero-grad-start: #F4F1FF;
--hero-grad-mid: #EAF1FE;
--hero-grad-end: #FCF6EA;
/* Blob colors */
--hero-blob-1: rgba(180, 165, 240, 0.35);
--hero-blob-2: rgba(160, 195, 255, 0.40);
--hero-blob-3: rgba(255, 235, 200, 0.45);
/* Cloud drift toggle: 1 = enabled, 0 = disabled */
--hero-cloud-drift: 1;
/* Card shadow strength multiplier (0–1) → stored as CSS var, applied in JS */
--hero-card-shadow-strength: 0.5;
/* Card shadow tint */
--hero-card-shadow-tint: rgba(80, 70, 180, 0.06);
/* Card hover lift toggle: read by JS */
--hero-card-hover-lift: 1;
/* Tab bar CTA button vars */
--tab-cta-bg: #2D6CE0;
--tab-cta-hover-bg: #1E5AC7;
--tab-cta-text-color: #FFFFFF;
/* Pill selector vars */
--pill-bg: #F3F4F6;
--pill-border: #E5E7EB;
--pill-text-color: #374151;
--pill-hover-bg: #E5E7EB;
--pill-active-accent: #6366F1;
font-family: "Inter", "Geist-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
.widget-31ce05 *,
.widget-31ce05 *::before,
.widget-31ce05 *::after {
box-sizing: border-box;
}
/* ===== SECTION ===== */
.widget-31ce05 .hero-section {
/* Soft dreamy gradient wash */
background: linear-gradient(180deg, var(--hero-grad-start) 0%, #EFF0FF 30%, var(--hero-grad-mid) 60%, var(--hero-grad-end) 100%);
width: 100%;
position: relative;
overflow: hidden;
}
/* ===== CLOUD BLOBS ===== */
.widget-31ce05 .hero-blob {
position: absolute;
pointer-events: none;
z-index: 0;
border-radius: 50%;
}
/* Blob 1 — top-left lavender wisp */
.widget-31ce05 .hero-blob--1 {
top: -10%;
left: -15%;
width: 50%;
height: 60%;
background: radial-gradient(ellipse at center, var(--hero-blob-1) 0%, rgba(180, 165, 240, 0.1) 50%, transparent 80%);
filter: blur(60px);
animation: heroCloudDrift1 35s ease-in-out infinite alternate;
animation-delay: 0s;
}
/* Blob 2 — right-center sky blue wisp */
.widget-31ce05 .hero-blob--2 {
top: 20%;
right: -10%;
width: 55%;
height: 55%;
background: radial-gradient(ellipse at center, var(--hero-blob-2) 0%, rgba(160, 195, 255, 0.1) 50%, transparent 80%);
filter: blur(70px);
animation: heroCloudDrift2 40s ease-in-out infinite alternate;
animation-delay: -8s;
}
/* Blob 3 — bottom-left warm cream wisp */
.widget-31ce05 .hero-blob--3 {
bottom: -10%;
left: 20%;
width: 50%;
height: 50%;
background: radial-gradient(ellipse at center, var(--hero-blob-3) 0%, rgba(255, 235, 200, 0.15) 50%, transparent 80%);
filter: blur(75px);
animation: heroCloudDrift3 38s ease-in-out infinite alternate;
animation-delay: -15s;
}
/* Cloud drift keyframes */
@keyframes heroCloudDrift1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(8%, 5%);
}
}
@keyframes heroCloudDrift2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-6%, 8%);
}
}
@keyframes heroCloudDrift3 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(5%, -4%);
}
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.widget-31ce05 .hero-blob {
animation: none !important;
}
}
/* Disable drift when toggle is off (set via JS) */
.widget-31ce05.no-cloud-drift .hero-blob {
animation: none !important;
}
.widget-31ce05 .hero-outer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px 80px;
position: relative;
z-index: 1;
}
/* ===== HEADER ===== */
.widget-31ce05 .hero-header {
position: relative;
margin-bottom: 64px;
margin-top: 40px;
width: 100%;
}
/* Left column — pill selector: absolutely pinned to the left edge */
.widget-31ce05 .hero-header-left {
position: absolute;
left: 0;
top: 8px;
width: auto;
}
/* ===== PILL SELECTOR ===== */
.widget-31ce05 .hero-pill-selector {
position: relative;
display: inline-block;
}
.widget-31ce05 .hero-pill-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 18px;
height: 54px;
background: #FFFFFF;
border: 1px solid var(--pill-border, #E5E7EB);
border-radius: 99px;
font-size: 14px;
font-weight: 500;
color: var(--pill-text-color, #374151);
cursor: pointer;
font-family: "Inter", sans-serif;
line-height: 1;
transition: background 150ms ease, border-color 150ms ease;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.widget-31ce05 .hero-pill-trigger:hover {
background: #F3F4F6;
border-color: #D1D5DB;
}
.widget-31ce05 .hero-pill-chevron {
flex-shrink: 0;
transition: transform 0.2s ease;
color: var(--pill-text-color, #374151);
}
.widget-31ce05 .hero-pill-trigger[aria-expanded=true] .hero-pill-chevron {
transform: rotate(180deg);
}
/* Pill icon */
.widget-31ce05 .hero-pill-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.widget-31ce05 .hero-pill-icon svg {
display: block;
}
/* Dropdown */
.widget-31ce05 .hero-pill-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: max(100%, 240px);
background: #FFFFFF;
border: 1px solid #E5E7EB;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 20;
overflow: hidden;
display: none;
flex-direction: column;
}
.widget-31ce05 .hero-pill-dropdown.is-open {
display: flex;
}
.widget-31ce05 .hero-pill-option {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 14px;
font-weight: 500;
color: #374151;
cursor: pointer;
background: transparent;
border: none;
text-align: left;
font-family: "Inter", sans-serif;
width: 100%;
line-height: 1.4;
transition: background 120ms ease;
}
.widget-31ce05 .hero-pill-option-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.widget-31ce05 .hero-pill-option-icon svg {
display: block;
}
.widget-31ce05 .hero-pill-option:hover {
background: #F3F4F6;
}
.widget-31ce05 .hero-pill-option.is-selected {
font-weight: 600;
}
.widget-31ce05 .hero-pill-option-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: transparent;
transition: background 150ms ease;
}
.widget-31ce05 .hero-pill-option.is-selected .hero-pill-option-dot {
background: var(--pill-active-accent, #6366F1);
}
/* ===== KICKER LABEL (legacy — hidden now, pill used instead) ===== */
.widget-31ce05 .kicker-label {
font-size: 14px;
font-weight: 500;
color: var(--hero-kicker-text);
letter-spacing: 0.01em;
line-height: 1.5;
font-family: "Inter", "Geist-Regular", sans-serif;
}
/* Right column — headline, subtext, CTA: occupies the right 65% */
.widget-31ce05 .hero-header-right {
width: 65%;
margin-left: calc(22% + 80px);
text-align: left;
}
/* Headline */
.widget-31ce05 .hero-headline {
font-size: 56px;
font-weight: 800;
color: #0F172A;
line-height: 1.05;
letter-spacing: -0.03em !important;
margin: 0 0 18px !important;
padding: 0;
font-family: "Inter", "Geist-SemiBold", sans-serif;
text-align: left;
}
/* Subtext */
.widget-31ce05 .hero-subtext {
font-size: 17px;
font-weight: 400;
color: #64748B;
line-height: 1.55;
max-width: 480px;
margin: 0 0 32px;
font-family: "Inter", "Geist-Regular", sans-serif;
text-align: left;
}
/* Hero content crossfade */
.widget-31ce05 .hero-headline,
.widget-31ce05 .hero-subtext,
.widget-31ce05 .cta-row {
transition: opacity 0.2s ease;
}
.widget-31ce05 .hero-headline.is-switching,
.widget-31ce05 .hero-subtext.is-switching,
.widget-31ce05 .cta-row.is-switching {
opacity: 0;
}
/* CTA row */
.widget-31ce05 .cta-row {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* Primary CTA */
.widget-31ce05 .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
height: 49px;
padding: 0 28px;
background: #101626;
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
border-radius: 99px;
white-space: nowrap;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
font-family: "Inter", sans-serif;
letter-spacing: -0.01em;
}
.widget-31ce05 .btn-primary:hover {
background: #1E293B;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(16, 22, 38, 0.25);
color: #FFFFFF;
text-decoration: none;
}
/* Secondary CTA */
.widget-31ce05 .btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
height: 49px;
padding: 0 28px;
background: #FFFFFF;
color: #0F172A;
font-size: 14px;
font-weight: 600;
border-radius: 99px;
white-space: nowrap;
border: 1px solid #E5E7EB;
cursor: pointer;
text-decoration: none;
transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
font-family: "Inter", sans-serif;
letter-spacing: -0.01em;
}
.widget-31ce05 .btn-secondary:hover {
background: #F8FAFC;
border-color: #CBD5E1;
transform: translateY(-2px);
color: var(--hero-secondary-color);
text-decoration: none;
}
.widget-31ce05 .btn-secondary .play-icon {
flex-shrink: 0;
}
/* ===== MOCKUP CARD WRAPPER (handles floating shadow + hover) ===== */
.widget-31ce05 .mockup-card-wrapper {
position: relative;
z-index: 1;
}
/* Ground contact shadow (::after pseudo-element) */
.widget-31ce05 .mockup-card-wrapper::after {
content: "";
position: absolute;
bottom: -30px;
left: 8%;
right: 8%;
height: 40px;
background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.04) 50%, transparent 80%);
filter: blur(20px);
z-index: -1;
pointer-events: none;
}
/* ===== MOCKUP CARD ===== */
.widget-31ce05 .mockup-card {
position: relative;
width: 100%;
min-height: 480px;
border-radius: var(--hero-card-radius);
overflow: hidden;
isolation: isolate;
/* Multi-layer floating shadow */
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04), 0 20px 40px rgba(15, 23, 42, 0.08), 0 40px 80px rgba(15, 23, 42, 0.1), 0 60px 120px var(--hero-card-shadow-tint);
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hover lift — enabled by default, can be disabled via JS class on wrapper */
.widget-31ce05 .mockup-card-wrapper:not(.no-card-hover) .mockup-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05), 0 28px 56px rgba(15, 23, 42, 0.1), 0 56px 112px rgba(15, 23, 42, 0.12), 0 80px 160px var(--hero-card-shadow-tint);
}
/* LAYER 1 — Backdrop */
.widget-31ce05 .backdrop-layer {
position: absolute;
inset: 0;
z-index: 0;
}
.widget-31ce05 .backdrop-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.widget-31ce05 .backdrop-placeholder {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.3) 0%, rgba(30, 27, 75, 0.6) 40%, transparent 70%), linear-gradient(160deg, #1E293B 0%, #0F172A 50%, #1E1B4B 100%);
}
.widget-31ce05 .backdrop-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.5) 100%);
z-index: 1;
pointer-events: none;
}
/* LAYER 2 — Tab pills */
.widget-31ce05 .tab-pills-row {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 6px 6px 6px;
background: var(--hero-tab-pill-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 99px;
border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
gap: 8px;
}
/* Left group: the three tab pills */
.widget-31ce05 .tab-pills-left {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
/* Right group: watch demo + download CTA */
.widget-31ce05 .tab-pills-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding-right: 2px;
}
.widget-31ce05 .tab-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 99px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 250ms ease;
background: transparent;
color: rgba(255, 255, 255, 0.75);
border: none;
font-family: "Inter", sans-serif;
line-height: 1;
white-space: nowrap;
}
.widget-31ce05 .tab-pill svg {
flex-shrink: 0;
stroke: currentColor;
}
.widget-31ce05 .tab-pill.is-active {
background: var(--hero-active-tab-bg);
color: var(--hero-active-tab-color);
}
.widget-31ce05 .tab-pill:not(.is-active):hover {
background: rgba(255, 255, 255, 0.1);
color: #FFFFFF;
}
/* Tab label crossfade */
.widget-31ce05 .tab-label {
transition: opacity 0.2s ease;
}
.widget-31ce05 .tab-label.is-switching {
opacity: 0;
}
/* ===== TAB BAR CTA BUTTON ===== */
/* custom_link wraps content in an ; we style the directly */
.widget-31ce05 .tab-pills-right a {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
background: var(--tab-cta-bg, #2D6CE0);
color: var(--tab-cta-text-color, #FFFFFF);
font-size: 14px;
font-weight: 600;
border-radius: 7px !important;
white-space: nowrap !important;
border: none;
cursor: pointer;
text-decoration: none;
font-family: "Inter", sans-serif;
letter-spacing: -0.01em;
transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
flex-shrink: 0;
line-height: 1;
}
.widget-31ce05 .tab-pills-right a:hover {
background: var(--tab-cta-hover-bg, #1E5AC7);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 108, 224, 0.3);
color: var(--tab-cta-text-color, #FFFFFF);
text-decoration: none;
}
/* The inside custom_link */
.widget-31ce05 .tab-cta {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
}
.widget-31ce05 .tab-cta-icon {
flex-shrink: 0;
stroke: currentColor;
display: block;
}
.widget-31ce05 .tab-cta-text {
display: inline;
}
/* Tab CTA crossfade — target the wrapping */
.widget-31ce05 .tab-pills-right a.is-switching {
opacity: 0;
}
/* ===== WATCH DEMO BUTTON ===== */
.widget-31ce05 .tab-pills-right a.watch-demo-anchor {
display: inline-flex !important;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
background: #FFFFFF !important;
color: #0F172A !important;
font-size: 14px;
font-weight: 600;
border-radius: 7px !important;
white-space: nowrap !important;
border: 1px solid #E5E7EB !important;
cursor: pointer;
text-decoration: none;
font-family: "Inter", sans-serif;
letter-spacing: -0.01em;
transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
line-height: 1;
box-sizing: border-box;
}
.widget-31ce05 .tab-pills-right a.watch-demo-anchor:hover {
background: #F8FAFC !important;
border-color: #CBD5E1 !important;
transform: translateY(-1px);
color: #0F172A !important;
text-decoration: none;
}
.widget-31ce05 .watch-demo-cta {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
background: #FFFFFF;
color: #0F172A;
font-size: 14px;
font-weight: 600;
border-radius: 7px;
white-space: nowrap;
border: 1px solid #E5E7EB;
cursor: pointer;
font-family: "Inter", sans-serif;
letter-spacing: -0.01em;
transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
line-height: 1;
box-sizing: border-box;
}
.widget-31ce05 .tab-pills-right .watch-demo-cta:hover {
background: #F8FAFC;
border-color: #CBD5E1;
transform: translateY(-1px);
}
.widget-31ce05 .watch-demo-text {
display: inline;
}
/* LAYER 3 — Dashboard image */
.widget-31ce05 .dashboard-layer {
position: absolute;
top: 104px;
left: 24px;
right: 24px;
bottom: 0;
z-index: 2;
border-radius: 16px 16px 0 0;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
background: #0F172A;
}
.widget-31ce05 .dashboard-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
flex-shrink: 0;
}
/* Dashboard slides — one visible at a time */
.widget-31ce05 .dashboard-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0;
background: #0F172A;
overflow: hidden;
}
.widget-31ce05 .dashboard-slide.is-active {
opacity: 1;
pointer-events: auto;
}
/* ===== CSS-ONLY DASHBOARD PLACEHOLDER ===== */
.widget-31ce05 .dashboard-placeholder {
width: 100%;
height: 100%;
background: #0F172A;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 300px;
}
.widget-31ce05 .dp-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.widget-31ce05 .dp-search {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.07);
border-radius: 8px;
padding: 7px 14px;
color: rgba(255, 255, 255, 0.3);
font-size: 12px;
flex: 1;
max-width: 300px;
font-family: "Inter", sans-serif;
}
.widget-31ce05 .dp-actions {
display: flex;
gap: 8px;
align-items: center;
}
.widget-31ce05 .dp-action-btn {
width: 72px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
}
.widget-31ce05 .dp-action-btn--accent {
background: rgba(99, 102, 241, 0.6);
}
.widget-31ce05 .dp-tabs {
display: flex;
gap: 4px;
padding: 12px 20px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
overflow-x: auto;
}
.widget-31ce05 .dp-tab {
padding: 6px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
white-space: nowrap;
font-family: "Inter", sans-serif;
}
.widget-31ce05 .dp-tab--active {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
.widget-31ce05 .dp-table {
flex: 1;
overflow: hidden;
padding: 8px 0;
}
.widget-31ce05 .dp-table-header {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr 1fr 0.8fr;
padding: 6px 20px;
gap: 12px;
}
.widget-31ce05 .dp-th {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: "Inter", sans-serif;
}
.widget-31ce05 .dp-row {
display: grid;
grid-template-columns: 2fr 1fr 1.2fr 1fr 0.8fr;
padding: 9px 20px;
gap: 12px;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.04);
transition: background 150ms ease;
}
.widget-31ce05 .dp-row:hover {
background: rgba(255, 255, 255, 0.03);
}
.widget-31ce05 .dp-cell {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
font-family: "Inter", sans-serif;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.widget-31ce05 .dp-cell--company {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.widget-31ce05 .dp-cell--company > div {
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
min-width: 0;
}
.widget-31ce05 .dp-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
flex-shrink: 0;
display: block;
}
.widget-31ce05 .dp-name {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-31ce05 .dp-sub {
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
}
.widget-31ce05 .dp-muted {
color: rgba(255, 255, 255, 0.4);
}
.widget-31ce05 .dp-green {
color: #34D399;
}
.widget-31ce05 .dp-red {
color: #F87171;
}
.widget-31ce05 .dp-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 99px;
font-size: 10px;
font-weight: 600;
font-family: "Inter", sans-serif;
}
.widget-31ce05 .dp-badge--blue {
background: rgba(59, 130, 246, 0.18);
color: #93C5FD;
}
.widget-31ce05 .dp-badge--green {
background: rgba(16, 185, 129, 0.18);
color: #6EE7B7;
}
.widget-31ce05 .dp-badge--amber {
background: rgba(245, 158, 11, 0.18);
color: #FCD34D;
}
.widget-31ce05 .dp-badge--red {
background: rgba(239, 68, 68, 0.18);
color: #FCA5A5;
}
.widget-31ce05 .dp-badge--purple {
background: rgba(139, 92, 246, 0.18);
color: #C4B5FD;
}
/* ===== ANIMATIONS ===== */
.widget-31ce05 .anim-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-31ce05 .anim-item.anim-visible {
opacity: 1;
transform: translateY(0);
}
.widget-31ce05 .dashboard-layer.anim-item {
transform: translateY(20px) scale(0.98);
}
.widget-31ce05 .dashboard-layer.anim-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.widget-31ce05 .hero-headline {
font-size: 42px;
}
.widget-31ce05 .hero-header-right {
width: 78%;
margin-left: 22%;
}
.widget-31ce05 .dashboard-layer {
top: 88px;
left: 16px;
right: 16px;
bottom: 0;
}
/* Reduce blob blur on tablet */
.widget-31ce05 .hero-blob--1 {
filter: blur(50px);
}
.widget-31ce05 .hero-blob--2 {
filter: blur(50px);
}
.widget-31ce05 .hero-blob--3 {
filter: blur(50px);
}
}
@media (max-width: 767px) {
.widget-31ce05 .hero-outer {
padding: 56px 24px;
}
.widget-31ce05 .hero-header {
padding-top: 0;
}
.widget-31ce05 .hero-header-left {
position: static;
width: 100%;
top: auto;
left: auto;
margin-bottom: 12px;
}
.widget-31ce05 .hero-header-right {
width: 100%;
margin-left: 0;
}
.widget-31ce05 .hero-headline {
font-size: 32px;
}
.widget-31ce05 .cta-row {
flex-direction: column;
align-items: flex-start;
}
.widget-31ce05 .btn-primary,
.widget-31ce05 .btn-secondary {
max-width: 280px;
justify-content: center;
}
.widget-31ce05 .tab-pills-row {
left: 12px;
right: 12px;
border-radius: 12px;
}
.widget-31ce05 .tab-pills-left {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-shrink: 1;
min-width: 0;
}
.widget-31ce05 .tab-pills-left::-webkit-scrollbar {
display: none;
}
.widget-31ce05 .tab-pills-right a {
height: 36px;
padding: 0 14px;
font-size: 13px;
}
.widget-31ce05 .mockup-card {
min-height: 360px;
/* Reduce shadow strength 30% on mobile */
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.03), 0 14px 28px rgba(15, 23, 42, 0.056), 0 28px 56px rgba(15, 23, 42, 0.07), 0 42px 84px var(--hero-card-shadow-tint);
}
.widget-31ce05 .dashboard-layer {
top: 88px;
left: 12px;
right: 12px;
bottom: 0;
}
/* Pill dropdown: adjust min-width for small screens */
.widget-31ce05 .hero-pill-dropdown {
min-width: 200px;
}
}
@media (max-width: 599px) {
.widget-31ce05 .hero-outer {
padding: 48px 16px;
}
.widget-31ce05 .hero-headline {
font-size: 26px;
}
.widget-31ce05 .hero-subtext {
font-size: 15px;
}
.widget-31ce05 .mockup-card {
min-height: 320px;
}
.widget-31ce05 .tab-pill .tab-label {
display: none;
}
.widget-31ce05 .tab-pill {
padding: 10px 12px;
}
/* Disable blob drift on small mobile to save battery */
.widget-31ce05 .hero-blob {
animation: none !important;
}
}
/* Below 480px: icon-only CTA button */
@media (max-width: 479px) {
.widget-31ce05 .tab-cta-text,
.widget-31ce05 .watch-demo-text {
display: none;
}
.widget-31ce05 .tab-pills-right a {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
border-radius: 8px !important;
}
}
@charset "UTF-8";
.widget-041a37 {
--faq-bg: var(--color_1);
--faq-item-bg: rgba(255, 255, 255, 0.04);
--faq-item-bg-hover: rgba(255, 255, 255, 0.07);
--faq-item-bg-open: rgba(39, 65, 131, 0.18);
--faq-border-color: rgba(255, 255, 255, 0.1);
--faq-border-open: rgba(39, 65, 131, 0.6);
--faq-accent: var(--color_4);
--faq-title-color: var(--color_3);
--faq-subtitle-color: var(--color_10);
--faq-question-color: var(--color_3);
--faq-answer-color: var(--color_10);
--faq-icon-color: var(--color_4);
--faq-radius: 25px;
--faq-gap: 12px;
--faq-padding: 24px;
--faq-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
box-sizing: border-box;
background: var(--faq-bg);
font-family: "Geist-Regular", sans-serif;
/* ── Light / White theme ── */
/* Number badge variant */
/* Scroll-driven entrance animation */
/* Responsive */
}
.widget-041a37.theme-light {
--faq-bg: var(--color_15);
--faq-item-bg: rgba(255, 255, 255, 0.85);
--faq-item-bg-hover: rgba(255, 255, 255, 1);
--faq-item-bg-open: rgba(39, 65, 131, 0.07);
--faq-border-color: rgba(0, 0, 0, 0.08);
--faq-border-open: rgba(39, 65, 131, 0.4);
--faq-accent: var(--color_4);
--faq-title-color: var(--color_1);
--faq-subtitle-color: var(--color_2);
--faq-question-color: var(--color_1);
--faq-answer-color: var(--color_2);
--faq-icon-color: var(--color_4);
}
.widget-041a37.theme-light .faq-item:hover {
border-color: rgba(0, 0, 0, 0.14);
}
.widget-041a37.theme-light .faq-item.is-open {
box-shadow: 0 4px 32px rgba(39, 65, 131, 0.09);
}
.widget-041a37.theme-light .faq-item.is-open .faq-question-text {
color: var(--color_1);
}
.widget-041a37.theme-light .faq-icon {
background: rgba(39, 65, 131, 0.1);
border-color: rgba(39, 65, 131, 0.2);
}
.widget-041a37.theme-light .faq-answer-inner {
border-top-color: rgba(0, 0, 0, 0.07);
}
.widget-041a37 .faq-wrapper {
max-width: 860px;
margin: 0 auto;
padding: 60px 24px;
box-sizing: border-box;
border-radius: 25px;
overflow: hidden;
}
.widget-041a37 .faq-header {
text-align: center;
margin-bottom: 52px;
}
.widget-041a37 .faq-title {
font-family: "Geist-SemiBold", sans-serif;
font-size: 42px;
font-weight: 400;
color: var(--faq-title-color);
letter-spacing: -0.05em;
margin: 0 0 16px 0;
line-height: 1.15;
}
.widget-041a37 .faq-subtitle {
font-family: "Geist-Regular", sans-serif;
font-size: 18px;
color: var(--faq-subtitle-color);
margin: 0;
line-height: 1.6;
letter-spacing: -0.02em;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.widget-041a37 .faq-accordion {
display: flex;
flex-direction: column;
gap: var(--faq-gap);
}
.widget-041a37 .faq-item {
background: var(--faq-item-bg);
border: 1px solid var(--faq-border-color);
border-radius: var(--faq-radius);
overflow: hidden;
transition: background var(--faq-transition), border-color var(--faq-transition), box-shadow var(--faq-transition);
}
.widget-041a37 .faq-item:hover {
background: var(--faq-item-bg-hover);
border-color: rgba(255, 255, 255, 0.18);
}
.widget-041a37 .faq-item.is-open {
background: var(--faq-item-bg-open);
border-color: var(--faq-border-open);
box-shadow: 0 4px 32px rgba(39, 65, 131, 0.18);
}
.widget-041a37 .faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: var(--faq-padding);
background: none;
border: none;
cursor: pointer;
text-align: left;
color: var(--faq-question-color);
transition: color var(--faq-transition);
}
.widget-041a37 .faq-question:focus-visible {
outline: 2px solid var(--faq-accent);
outline-offset: -2px;
border-radius: var(--faq-radius);
}
.widget-041a37 .faq-question-text {
font-family: "Geist-Medium", sans-serif;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.4;
flex: 1;
color: var(--faq-question-color);
transition: color var(--faq-transition);
}
.widget-041a37 .faq-item.is-open .faq-question-text {
color: var(--color_3);
}
.widget-041a37 .faq-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(39, 65, 131, 0.2);
border: 1px solid rgba(39, 65, 131, 0.35);
display: flex;
align-items: center;
justify-content: center;
color: var(--faq-icon-color);
transition: background var(--faq-transition), transform var(--faq-transition), border-color var(--faq-transition);
}
.widget-041a37 .faq-item.is-open .faq-icon {
background: var(--faq-accent);
border-color: var(--faq-accent);
color: var(--color_3);
transform: rotate(180deg);
}
.widget-041a37 .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
opacity: 0;
}
.widget-041a37 .faq-item.is-open .faq-answer {
max-height: 800px;
opacity: 1;
}
.widget-041a37 .faq-answer-inner {
padding: 0 var(--faq-padding) var(--faq-padding) var(--faq-padding);
font-family: "Geist-Regular", sans-serif;
font-size: 16px;
line-height: 1.75;
color: var(--faq-answer-color);
letter-spacing: -0.01em;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding-top: 20px;
}
.widget-041a37 .faq-answer-inner p {
margin: 0 0 12px 0;
}
.widget-041a37 .faq-answer-inner p:last-child {
margin-bottom: 0;
}
.widget-041a37 .faq-answer-inner a {
color: var(--color_4);
text-decoration: underline;
text-underline-offset: 3px;
}
.widget-041a37 .faq-item[data-index]::before {
display: none;
}
.widget-041a37 .faq-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease, background var(--faq-transition), border-color var(--faq-transition), box-shadow var(--faq-transition);
}
.widget-041a37 .faq-item.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, background var(--faq-transition), border-color var(--faq-transition), box-shadow var(--faq-transition);
}
.widget-041a37 .faq-item.is-visible.is-open,
.widget-041a37 .faq-item.is-visible:hover {
transform: translateY(0);
transition: background var(--faq-transition), border-color var(--faq-transition), box-shadow var(--faq-transition);
}
@media (max-width: 1024px) {
.widget-041a37 .faq-wrapper {
padding: 48px 20px;
}
.widget-041a37 .faq-title {
font-size: 32px;
}
.widget-041a37 .faq-subtitle {
font-size: 16px;
}
.widget-041a37 .faq-question-text {
font-size: 16px;
}
}
@media (max-width: 767px) {
.widget-041a37 .faq-wrapper {
padding: 36px 16px;
}
.widget-041a37 .faq-title {
font-size: 26px;
margin-bottom: 12px;
}
.widget-041a37 .faq-subtitle {
font-size: 15px;
}
.widget-041a37 .faq-header {
margin-bottom: 32px;
}
.widget-041a37 .faq-question {
padding: 18px;
}
.widget-041a37 .faq-question-text {
font-size: 15px;
}
.widget-041a37 .faq-answer-inner {
padding: 0 18px 18px 18px;
padding-top: 16px;
font-size: 14px;
}
.widget-041a37 .faq-icon {
width: 28px;
height: 28px;
}
}
@charset "UTF-8";
.widget-eede41 {
/* ── Global CSS custom properties ── */
--active-pill-bg: #101626;
--active-pill-text: #ffffff;
--inactive-pill-text: #6B7280;
--pill-border-color: rgba(0, 0, 0, 0.1);
--transition-spring: cubic-bezier(0.16, 1, 0.3, 1);
--top-kicker-bg: #ffffff;
--top-kicker-text: #101626;
--headline-color: #101626;
--subtext-color: #6B7280;
/* ── Plug & Play editable properties ── */
--pnp-mockup-bg: #0f0e2a;
--pnp-shimmer-color-1: #6366f1;
--pnp-shimmer-color-2: #ec4899;
/* ── Outer wrapper ── */
/* ── SECTION HEADER ── */
/* Top kicker pill */
/* Section headline */
/* ── WUNDERBUILD GRADIENT WORD ── */
/* Section subtext */
/* ── POWERED BY ROW ── */
/* ── PILL ROW ── */
/* ── Individual pill ── */
/* ── Plug & Play NEW badge on tab pill ── */
/* ── CARDS CONTAINER ── */
/* ── Feature card (base) ── */
/* ── TEXT COLUMN ── */
/* CTA ROW — wraps primary + secondary for standard cards */
/* Secondary CTA — ghost/outline style */
/* ── IMAGE COLUMN ── */
/* Uploaded dashboard image placed inside the same rounded-box treatment as .pnp-mockup */
/* ─────────────────────────────────────────────
MOCKUP SHARED STYLES
───────────────────────────────────────────── */
/* ── Shared inner elements ── */
/* ─────────────────────────────────────────────
CARD 1 — PRICE LISTS
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
CARD 2 — TRADES TEMPLATE
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
CARD 3 — BUILDERS TEMPLATE
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
CARD 4 (index 4) — CUSTOM TEMPLATE
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
CARD 3 (index 3) — PLUG & PLAY SYSTEM
───────────────────────────────────────────── */
/* Override image col for PnP to remove aspect-ratio constraint */
/* PnP text column spacing overrides */
/* MOST POPULAR PILL */
/* HEADLINE */
/* BODY */
/* PRICE LINE */
/* CTA ROW */
/* ── PNP MOCKUP (dark navy dashboard) ── */
/* Inner glow */
/* Inner content wrapper */
/* — PNP HEADER ROW — */
/* — PNP STATS ROW — */
/* — PNP USAGE BAR — */
/* Shimmer fill — pure CSS animation, continuous */
/* — PNP RECENT QBES — */
/* — PNP FOOTER ROW — */
/* ── PNP ENTRANCE ANIMATIONS ── */
/* pnp-anim-item: pill, headline, body, price, CTAs, mockup */
/* Mockup has a slightly different enter */
/* pnp-inner-anim: elements inside the mockup */
/* ─────────────────────────────────────────────
RESPONSIVE — Tablet (≤1024px)
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
RESPONSIVE — Mobile (≤767px)
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
RESPONSIVE — Small mobile (≤600px)
───────────────────────────────────────────── */
}
.widget-eede41 .tabs-wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 40px;
background: transparent;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
box-sizing: border-box;
}
.widget-eede41 .section-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.widget-eede41 .section-kicker {
display: inline-flex;
align-items: center;
align-self: center;
padding: 6px 16px;
background: var(--top-kicker-bg, #ffffff);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 99px;
font-size: 13px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: var(--top-kicker-text, #101626);
margin: 0 auto 24px auto;
white-space: nowrap;
opacity: 1;
transform: translateY(0);
animation: headerKickerIn 500ms var(--transition-spring) 0ms both;
}
@keyframes headerKickerIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .section-headline {
font-size: 44px;
font-weight: 700;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
color: var(--headline-color, #101626);
line-height: 1 !important;
letter-spacing: -0.025em;
text-align: center;
max-width: 720px;
margin: 0;
opacity: 1;
transform: translateY(0);
animation: headerHeadlineIn 700ms var(--transition-spring) 150ms both;
}
@keyframes headerHeadlineIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .headline-small {
font-size: 0.62em;
font-weight: 600;
}
.widget-eede41 .wb-word {
display: inline-block;
position: relative;
white-space: nowrap;
}
.widget-eede41 .wb-black {
display: inline;
position: relative;
}
.widget-eede41 .wb-grad {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
background: linear-gradient(90deg, #06b750, #52d650, #a7fa50);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
opacity: 0;
pointer-events: none;
}
.widget-eede41 .wb-grad.wb-fade-in {
animation: wbFadeInGrad 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wbFadeInGrad {
from {
opacity: 0;
filter: blur(2px);
}
to {
opacity: 1;
filter: blur(0px);
}
}
.widget-eede41 .wb-grad.wb-fade-out {
animation: wbFadeOutGrad 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wbFadeOutGrad {
from {
opacity: 1;
filter: blur(0px);
}
to {
opacity: 0;
filter: blur(2px);
}
}
.widget-eede41 .wb-grad::after {
content: "";
position: absolute;
top: -4px;
bottom: -4px;
left: -10%;
width: 28%;
background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.55) 52%, rgba(255, 255, 255, 0) 70%, transparent 80%);
opacity: 0;
pointer-events: none;
border-radius: 2px;
transform: skewX(-12deg);
}
.widget-eede41 .wb-grad.wb-glow::after {
opacity: 1;
animation: wbGlowSweep 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes wbGlowSweep {
from {
left: -10%;
}
to {
left: 110%;
}
}
.widget-eede41 .section-subtext {
font-size: 17px;
font-weight: 400;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: var(--subtext-color, #6B7280);
line-height: 1.6;
text-align: center;
max-width: 560px;
margin: 20px auto 0 auto;
opacity: 1;
transform: translateY(0);
animation: headerSubtextIn 600ms var(--transition-spring) 300ms both;
}
@keyframes headerSubtextIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .powered-by-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: fit-content;
margin: 16px auto 0 auto;
opacity: 1;
transform: translateY(0);
animation: poweredByRowIn 500ms var(--transition-spring) 400ms both;
}
@keyframes poweredByRowIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .powered-by-label {
font-size: 13px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: var(--powered-by-label-color, #6B7280);
letter-spacing: 0.12em;
text-transform: uppercase;
background: none;
border: none;
vertical-align: middle;
white-space: nowrap;
}
.widget-eede41 .powered-by-logo-wrap {
display: flex;
align-items: center;
}
.widget-eede41 .powered-by-logo-img {
max-height: var(--powered-by-logo-height, 48px);
width: auto;
object-fit: contain;
display: block;
}
.widget-eede41 .powered-by-logo-link {
display: flex;
align-items: center;
text-decoration: none;
transition: opacity 200ms ease;
}
.widget-eede41 .powered-by-logo-link:hover {
opacity: 0.7;
}
.widget-eede41 .powered-by-logo-placeholder {
width: 140px;
height: var(--powered-by-logo-height, 48px);
background: rgba(0, 0, 0, 0.06);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.widget-eede41 .powered-by-placeholder-text {
font-size: 11px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.35);
}
.widget-eede41 .pill-row {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
width: fit-content;
opacity: 1;
transform: translateY(0);
animation: pillRowIn 600ms var(--transition-spring) 600ms both;
}
@keyframes pillRowIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 99px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 300ms var(--transition-spring);
border: 1px solid var(--pill-border-color);
background: transparent;
color: var(--inactive-pill-text);
outline: none;
white-space: nowrap;
position: relative;
}
.widget-eede41 .pill .pill-icon {
display: flex;
align-items: center;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--inactive-pill-text);
transition: color 300ms var(--transition-spring);
}
.widget-eede41 .pill .pill-icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
}
.widget-eede41 .pill:not(.active):hover {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.15);
color: #374151;
}
.widget-eede41 .pill:not(.active):hover .pill-icon {
color: #374151;
}
.widget-eede41 .pill.active {
background: var(--active-pill-bg);
border-color: var(--active-pill-bg);
color: var(--active-pill-text);
box-shadow: 0 2px 8px rgba(16, 22, 38, 0.15);
}
.widget-eede41 .pill.active .pill-icon {
color: var(--active-pill-text);
}
.widget-eede41 .pill:focus-visible {
outline: 2px solid var(--active-pill-bg);
outline-offset: 2px;
}
.widget-eede41 .pnp-new-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
background: #10b981;
color: #fff;
padding: 2px 6px;
border-radius: 99px;
line-height: 1;
margin-left: 2px;
flex-shrink: 0;
}
.widget-eede41 .cards-container {
width: 100%;
position: relative;
opacity: 1;
transform: translateY(0);
animation: cardContainerIn 700ms var(--transition-spring) 750ms both;
}
@keyframes cardContainerIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .feature-card {
width: 100%;
border-radius: 24px;
padding: 28px 48px;
min-height: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: background-color 600ms var(--transition-spring), opacity 250ms var(--transition-spring), visibility 250ms var(--transition-spring), transform 250ms var(--transition-spring);
transform: translateX(10px);
}
.widget-eede41 .feature-card.active {
position: relative;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
transition: background-color 600ms var(--transition-spring), opacity 400ms var(--transition-spring) 300ms, visibility 400ms var(--transition-spring) 300ms, transform 400ms var(--transition-spring) 300ms;
}
.widget-eede41 .card-text-col {
display: flex;
flex-direction: column;
gap: 0;
}
.widget-eede41 .card-kicker {
display: inline-flex;
align-self: flex-start;
padding: 5px 12px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 99px;
font-size: 12px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: #101626;
margin-bottom: 14px;
white-space: nowrap;
}
.widget-eede41 .card-headline {
font-size: 32px;
font-weight: 700;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
color: #101626;
line-height: 1.15;
letter-spacing: -0.025em;
margin: 0 0 12px 0;
max-width: 100%;
}
.widget-eede41 .card-description {
font-size: 15px;
font-weight: 400;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: #475569;
line-height: 1.55;
margin: 0 0 22px 0;
max-width: 90%;
}
.widget-eede41 .card-cta {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 10px 20px;
background: #101626;
color: #ffffff;
font-size: 14px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
border-radius: 7px;
border: none;
cursor: pointer;
transition: all 300ms var(--transition-spring);
text-decoration: none;
white-space: nowrap;
}
.widget-eede41 .card-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.widget-eede41 .card-cta-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.widget-eede41 .card-cta.card-cta-secondary {
background: transparent;
color: #374151;
border: 1.5px solid #d1d5db;
}
.widget-eede41 .card-cta.card-cta-secondary:hover {
border-color: #9ca3af;
color: #111827;
box-shadow: none;
}
.widget-eede41 .card-image-col {
width: 100%;
aspect-ratio: 4/3;
border-radius: 16px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
}
.widget-eede41 .card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}
.widget-eede41 .pnp-image-rounded {
padding: 0;
overflow: hidden;
min-height: 320px;
opacity: 1;
transform: none;
}
.widget-eede41 .pnp-rounded-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 16px;
}
.widget-eede41 .mockup-container {
width: 100%;
height: 100%;
background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
border-radius: 16px;
padding: 22px;
overflow: hidden;
position: relative;
box-sizing: border-box;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2), 0 8px 20px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
transform: scale(0.97);
}
.widget-eede41 .mockup-container.mockup-visible {
animation: mockupEnter 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mockupEnter {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
.widget-eede41 .mockup-blob {
position: absolute;
top: -50%;
right: -20%;
width: 60%;
height: 100%;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(40px);
}
.widget-eede41 .mockup-blob-green {
background: radial-gradient(ellipse, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
}
.widget-eede41 .mockup-blob-blue {
background: radial-gradient(ellipse, rgba(20, 110, 245, 0.15) 0%, transparent 70%);
}
.widget-eede41 .mockup-blob-indigo {
background: radial-gradient(ellipse, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}
.widget-eede41 .mockup-blob-purple {
background: radial-gradient(ellipse, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
}
.widget-eede41 .mockup-content {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.widget-eede41 .mk-header-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.widget-eede41 .mk-header-row-split {
align-items: flex-start;
}
.widget-eede41 .mk-header-title-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.widget-eede41 .mk-section-title {
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
letter-spacing: -0.01em;
}
.widget-eede41 .mk-subtitle-muted {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-count-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 99px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap;
}
.widget-eede41 .mk-badge-blue {
color: #146EF5;
background: rgba(20, 110, 245, 0.15);
}
.widget-eede41 .mk-badge-purple {
color: #7C3AED;
background: rgba(124, 58, 237, 0.15);
}
.widget-eede41 .mk-status-bar {
position: absolute;
bottom: 12px;
left: 22px;
right: 22px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.widget-eede41 .mk-status-bar-split {
justify-content: space-between;
}
.widget-eede41 .mk-status-left {
display: flex;
align-items: center;
gap: 6px;
}
.widget-eede41 .mk-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.widget-eede41 .mk-status-dot-green {
background: #10B981;
}
.widget-eede41 .mk-status-label {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-status-right {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-muted {
color: rgba(255, 255, 255, 0.4);
}
.widget-eede41 .mk-live-indicator {
display: flex;
align-items: center;
gap: 7px;
}
.widget-eede41 .mk-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
}
.widget-eede41 .mk-live-pulse {
animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.4;
}
}
.widget-eede41 .mk-live-text {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-updated-text {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-search-bar {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 32px;
margin-top: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0 12px;
box-sizing: border-box;
flex-shrink: 0;
}
.widget-eede41 .mk-search-icon {
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.widget-eede41 .mk-search-placeholder {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-filter-row {
display: flex;
gap: 8px;
margin-top: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.widget-eede41 .mk-filter-pill {
padding: 4px 12px;
border-radius: 99px;
font-size: 10px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.08);
white-space: nowrap;
}
.widget-eede41 .mk-filter-active {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
border-color: rgba(16, 185, 129, 0.3);
}
.widget-eede41 .mk-table {
margin-top: 14px;
flex: 1;
overflow: hidden;
min-height: 0;
}
.widget-eede41 .mk-table-header {
display: grid;
grid-template-columns: 1.6fr 1fr 0.9fr 0.7fr;
padding: 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.widget-eede41 .mk-th {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-th-rate, .widget-eede41 .mk-th-delta {
text-align: right;
}
.widget-eede41 .mk-table-row {
display: grid;
grid-template-columns: 1.6fr 1fr 0.9fr 0.7fr;
padding: 7px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
align-items: center;
}
.widget-eede41 .mk-table-row {
opacity: 0;
transform: translateY(4px);
}
.widget-eede41 .mk-table-row.row-visible {
animation: rowFadeIn 300ms var(--transition-spring) forwards;
}
@keyframes rowFadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .mk-td {
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-eede41 .mk-td-item {
font-size: 11px;
font-weight: 500;
color: #FFFFFF;
}
.widget-eede41 .mk-td-supplier {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
}
.widget-eede41 .mk-td-rate {
font-size: 11px;
font-weight: 600;
color: #FFFFFF;
text-align: right;
}
.widget-eede41 .mk-delta {
font-size: 10px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
text-align: right;
white-space: nowrap;
}
.widget-eede41 .mk-delta-up {
color: #10B981;
}
.widget-eede41 .mk-delta-flat {
color: rgba(255, 255, 255, 0.4);
}
.widget-eede41 .mk-delta-down {
color: #EF4444;
}
.widget-eede41 .mk-tree {
margin-top: 14px;
flex: 1;
overflow: hidden;
min-height: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.widget-eede41 .mk-tree-parent {
position: relative;
margin-bottom: 4px;
}
.widget-eede41 .mk-tree-accent-line {
position: absolute;
left: 0;
top: 0;
width: 2px;
border-radius: 2px;
background: transparent;
bottom: 0;
}
.widget-eede41 .mk-tree-accent-line.mk-accent-blue {
background: #146EF5;
}
.widget-eede41 .mk-tree-accent-line.line-draw {
animation: accentLineDraw 400ms var(--transition-spring) forwards;
}
@keyframes accentLineDraw {
from {
transform: scaleY(0);
transform-origin: top;
}
to {
transform: scaleY(1);
transform-origin: top;
}
}
.widget-eede41 .mk-tree-parent-row {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 0 5px 10px;
}
.widget-eede41 .mk-expand-icon {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
.widget-eede41 .mk-tree-parent-label {
font-size: 11px;
font-weight: 600;
color: #FFFFFF;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
flex: 1;
}
.widget-eede41 .mk-tree-count {
font-size: 9px;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap;
}
.widget-eede41 .mk-tree-children {
padding-left: 10px;
}
.widget-eede41 .mk-tree-child {
display: flex;
align-items: center;
gap: 7px;
padding: 3px 0 3px 20px;
}
.widget-eede41 .mk-check {
font-size: 10px;
flex-shrink: 0;
}
.widget-eede41 .mk-check-green {
color: #10B981;
}
.widget-eede41 .mk-check-empty {
color: rgba(255, 255, 255, 0.4);
}
.widget-eede41 .mk-child-label {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-tree-collapsed {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 0 5px 10px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.widget-eede41 .mk-tree-parent,
.widget-eede41 .mk-tree-child,
.widget-eede41 .mk-tree-collapsed {
opacity: 0;
transform: translateY(4px);
}
.widget-eede41 .mk-tree-parent.row-visible,
.widget-eede41 .mk-tree-child.row-visible,
.widget-eede41 .mk-tree-collapsed.row-visible {
animation: rowFadeIn 300ms var(--transition-spring) forwards;
}
.widget-eede41 .mk-progress-label {
font-size: 10px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap;
}
.widget-eede41 .mk-label-indigo {
color: #6366F1;
}
.widget-eede41 .mk-progress-track {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
margin-top: 10px;
overflow: hidden;
flex-shrink: 0;
}
.widget-eede41 .mk-progress-fill {
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #6366F1, #818CF8);
width: 0;
transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-eede41 .mk-progress-fill.fill-active {
width: 76%;
}
.widget-eede41 .mk-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 14px;
flex-shrink: 0;
}
.widget-eede41 .mk-total-label {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.widget-eede41 .mk-total-value {
font-size: 16px;
font-weight: 800;
color: #FFFFFF;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
letter-spacing: -0.02em;
}
.widget-eede41 .mk-stack-bar {
width: 100%;
height: 36px;
border-radius: 8px;
overflow: hidden;
display: flex;
margin-top: 10px;
flex-shrink: 0;
}
.widget-eede41 .mk-stack-seg {
height: 100%;
width: 0;
transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}
.widget-eede41 .mk-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 12px;
flex-shrink: 0;
}
.widget-eede41 .mk-legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.widget-eede41 .mk-legend-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.widget-eede41 .mk-legend-name {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-legend-pct {
font-size: 10px;
font-weight: 600;
color: #FFFFFF;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
flex-shrink: 0;
}
.widget-eede41 .mk-summary-card {
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
.widget-eede41 .mk-summary-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-summary-value {
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
line-height: 1;
}
.widget-eede41 .mk-workflow {
margin-top: 16px;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.widget-eede41 .mk-stage {
display: flex;
align-items: stretch;
gap: 14px;
min-height: 0;
}
.widget-eede41 .mk-stage-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 24px;
}
.widget-eede41 .mk-connector {
flex: 1;
width: 1px;
min-height: 6px;
}
.widget-eede41 .mk-connector-none {
background: transparent;
}
.widget-eede41 .mk-connector-solid {
background: #7C3AED;
}
.widget-eede41 .mk-connector-dashed {
background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0px, rgba(255, 255, 255, 0.2) 3px, transparent 3px, transparent 6px);
}
.widget-eede41 .mk-stage-circle {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #FFFFFF;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
flex-shrink: 0;
opacity: 0;
transform: scale(0);
}
.widget-eede41 .mk-stage-circle.circle-popped {
animation: circlePop 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes circlePop {
0% {
opacity: 0;
transform: scale(0);
}
60% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.widget-eede41 .mk-circle-complete {
background: #10B981;
}
.widget-eede41 .mk-circle-active {
background: #7C3AED;
}
.widget-eede41 .mk-circle-upcoming {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.4);
}
.widget-eede41 .mk-stage-content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 2px 0 14px 0;
justify-content: center;
}
.widget-eede41 .mk-stage-title {
font-size: 11px;
font-weight: 600;
color: #FFFFFF;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .mk-stage-desc {
font-size: 10px;
color: rgba(255, 255, 255, 0.65);
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
line-height: 1.4;
max-width: 220px;
}
.widget-eede41 .mk-mini-progress {
width: 80px;
height: 3px;
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
overflow: hidden;
flex-shrink: 0;
align-self: center;
}
.widget-eede41 .mk-mini-fill {
width: 50%;
height: 100%;
background: #7C3AED;
border-radius: 99px;
}
.widget-eede41 .pnp-image-col {
aspect-ratio: unset !important;
height: 100%;
min-height: 320px;
overflow: visible;
}
.widget-eede41 .pnp-text-col {
gap: 0;
}
.widget-eede41 .pnp-pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: #fff;
color: #6366f1;
border: 1px solid #e5e7eb;
font-size: 12px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
padding: 6px 14px;
border-radius: 99px;
align-self: flex-start;
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
}
.widget-eede41 .pnp-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.widget-eede41 .pnp-headline {
color: #0a0a0a;
font-size: 42px;
font-weight: 700;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
line-height: 1.05 !important;
letter-spacing: -0.02em;
margin: 20px 0 0 0;
opacity: 0;
transform: translateY(8px);
}
.widget-eede41 .pnp-body {
color: #4b5563;
font-size: 15px;
font-weight: 400;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
line-height: 1.6;
max-width: 460px;
margin: 18px 0 0 0;
opacity: 0;
transform: translateY(8px);
}
.widget-eede41 .pnp-price-line {
color: #6b7280;
font-size: 13px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
margin: 16px 0 0 0;
opacity: 0;
transform: translateY(8px);
}
.widget-eede41 .pnp-cta-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 28px;
opacity: 0;
transform: translateY(8px);
}
.widget-eede41 .pnp-cta-primary {
background: #0a0a0a;
color: #fff;
border: none;
border-radius: 99px;
height: 49px;
padding: 0 24px;
font-size: 14px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap !important;
cursor: pointer;
transition: opacity 200ms ease, transform 200ms ease;
flex-shrink: 0;
}
.widget-eede41 .pnp-cta-primary:hover {
opacity: 0.85;
transform: translateY(-1px);
}
.widget-eede41 .pnp-cta-secondary {
background: transparent;
color: #374151;
border: 1.5px solid #d1d5db;
border-radius: 99px;
height: 49px;
padding: 0 22px;
font-size: 14px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
white-space: nowrap;
cursor: pointer;
transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
flex-shrink: 0;
}
.widget-eede41 .pnp-cta-secondary:hover {
border-color: #9ca3af;
color: #111827;
transform: translateY(-1px);
}
.widget-eede41 .pnp-mockup {
width: 100%;
height: 100%;
background: var(--pnp-mockup-bg, #0f0e2a);
border-radius: 16px;
padding: 24px;
color: #fff;
position: relative;
overflow: hidden;
min-height: 320px;
display: flex;
flex-direction: column;
gap: 0;
box-sizing: border-box;
box-shadow: 0 24px 60px rgba(15, 14, 42, 0.3), 0 8px 20px rgba(15, 14, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
transform: translateY(10px);
}
.widget-eede41 .pnp-mockup-glow {
position: absolute;
top: -40%;
right: -20%;
width: 60%;
height: 120%;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.widget-eede41 .pnp-mockup-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
}
.widget-eede41 .pnp-mock-header {
display: flex;
justify-content: space-between;
align-items: center;
opacity: 0;
transform: translateY(6px);
}
.widget-eede41 .pnp-mock-title {
color: #fff;
font-size: 14px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .pnp-active-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(52, 211, 153, 0.15);
color: #6ee7b7;
font-size: 10px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
}
.widget-eede41 .pnp-active-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #6ee7b7;
flex-shrink: 0;
animation: livePulse 1.5s ease-in-out infinite;
}
.widget-eede41 .pnp-stats-row {
display: flex;
gap: 10px;
opacity: 0;
transform: translateY(6px);
}
.widget-eede41 .pnp-stat-card {
flex: 1;
background: rgba(255, 255, 255, 0.04);
border: 0.5px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
}
.widget-eede41 .pnp-stat-label {
font-size: 10px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.widget-eede41 .pnp-stat-number {
color: #fff;
font-size: 24px;
font-weight: 700;
font-family: "Geist-SemiBold", "Inter", system-ui, sans-serif;
line-height: 1;
margin-top: 4px;
letter-spacing: -0.02em;
}
.widget-eede41 .pnp-stat-green {
color: #6ee7b7 !important;
}
.widget-eede41 .pnp-stat-sub {
font-size: 10px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
.widget-eede41 .pnp-usage-wrap {
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 14px;
opacity: 0;
transform: translateY(6px);
}
.widget-eede41 .pnp-usage-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-eede41 .pnp-usage-label {
color: rgba(255, 255, 255, 0.7);
font-size: 11px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .pnp-usage-unlimited {
color: #6ee7b7;
font-size: 11px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .pnp-usage-track {
margin-top: 10px;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 99px;
overflow: hidden;
position: relative;
}
.widget-eede41 .pnp-usage-shimmer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.widget-eede41 .pnp-usage-shimmer::after {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--pnp-shimmer-color-1, #6366f1), var(--pnp-shimmer-color-2, #ec4899), transparent);
border-radius: 99px;
animation: pnpShimmer 3s linear infinite;
}
@keyframes pnpShimmer {
0% {
left: -50%;
}
100% {
left: 110%;
}
}
.widget-eede41 .pnp-qbes-wrap {
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
padding: 12px 14px;
flex: 1;
opacity: 0;
transform: translateY(6px);
}
.widget-eede41 .pnp-qbes-label {
display: block;
font-size: 10px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 10px;
}
.widget-eede41 .pnp-qbe-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
font-size: 11px;
gap: 8px;
}
.widget-eede41 .pnp-qbe-last {
border-bottom: none;
}
.widget-eede41 .pnp-qbe-left {
display: flex;
align-items: center;
gap: 7px;
flex: 1;
min-width: 0;
}
.widget-eede41 .pnp-qbe-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.widget-eede41 .pnp-qbe-name {
font-size: 11px;
font-weight: 500;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-eede41 .pnp-qbe-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.widget-eede41 .pnp-qbe-time {
font-size: 10px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
}
.widget-eede41 .pnp-qbe-badge {
font-size: 9px;
font-weight: 600;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
padding: 2px 8px;
border-radius: 99px;
white-space: nowrap;
}
.widget-eede41 .pnp-badge-green {
background: rgba(52, 211, 153, 0.15);
color: #6ee7b7;
}
.widget-eede41 .pnp-badge-blue {
background: rgba(96, 165, 250, 0.15);
color: #93c5fd;
}
.widget-eede41 .pnp-badge-purple {
background: rgba(167, 139, 250, 0.15);
color: #c4b5fd;
}
.widget-eede41 .pnp-mock-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 0.5px solid rgba(255, 255, 255, 0.06);
margin-top: auto;
opacity: 0;
transform: translateY(6px);
}
.widget-eede41 .pnp-footer-sub {
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
}
.widget-eede41 .pnp-footer-link {
color: #93c5fd;
font-size: 10px;
font-family: "Geist-Regular", "Inter", system-ui, sans-serif;
text-decoration: none;
transition: opacity 150ms ease;
}
.widget-eede41 .pnp-footer-link:hover {
opacity: 0.75;
}
.widget-eede41 .pnp-anim-item.pnp-animated {
animation: pnpItemIn 500ms var(--transition-spring) both;
}
@keyframes pnpItemIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.widget-eede41 .pnp-mockup.pnp-animated {
animation: pnpMockupIn 600ms var(--transition-spring) both;
}
@keyframes pnpMockupIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.widget-eede41 .pnp-inner-anim.pnp-inner-animated {
animation: pnpInnerIn 400ms var(--transition-spring) both;
}
@keyframes pnpInnerIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.widget-eede41 {
/* PnP tablet */
}
.widget-eede41 .tabs-wrapper {
padding: 48px 32px;
}
.widget-eede41 .section-headline {
font-size: 36px;
}
.widget-eede41 .section-subtext {
font-size: 16px;
}
.widget-eede41 .feature-card {
padding: 28px 36px;
gap: 28px;
}
.widget-eede41 .card-headline {
font-size: 26px;
}
.widget-eede41 .mk1-row-hide-md {
display: none;
}
.widget-eede41 .mk2-row-hide-md {
display: none;
}
.widget-eede41 .mk-updated-text {
display: none;
}
.widget-eede41 .mk-status-right {
display: none;
}
.widget-eede41 .pnp-headline {
font-size: 34px;
}
.widget-eede41 .pnp-stat-number {
font-size: 20px;
}
}
@media (max-width: 767px) {
.widget-eede41 {
/* PnP mobile overrides */
}
.widget-eede41 .tabs-wrapper {
padding: 40px 20px;
}
.widget-eede41 .section-headline {
font-size: 28px;
}
.widget-eede41 .section-subtext {
font-size: 15px;
margin-bottom: 16px;
}
.widget-eede41 .powered-by-row {
gap: 10px;
margin-bottom: 32px;
}
.widget-eede41 .powered-by-label {
font-size: 12px;
}
.widget-eede41 .powered-by-logo-img {
max-height: min(var(--powered-by-logo-height, 48px), 40px);
}
.widget-eede41 .powered-by-logo-placeholder {
height: min(var(--powered-by-logo-height, 48px), 40px);
}
.widget-eede41 .pill-row {
flex-wrap: wrap;
justify-content: center;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
}
.widget-eede41 .pill-row::-webkit-scrollbar {
display: none;
}
.widget-eede41 .feature-card {
grid-template-columns: 1fr;
padding: 24px 22px;
gap: 18px;
}
.widget-eede41 .card-headline {
font-size: 22px;
}
.widget-eede41 .card-image-col {
aspect-ratio: 4/3;
height: 320px;
}
.widget-eede41 .mk1-row-hide-sm {
display: none;
}
.widget-eede41 .mk2-row-hide-sm {
display: none;
}
.widget-eede41 .mk-section-title {
font-size: 11px;
}
.widget-eede41 .mk-td-item {
font-size: 10px;
}
.widget-eede41 .mk-td-rate {
font-size: 10px;
}
.widget-eede41 .mk-stage-title {
font-size: 10px;
}
.widget-eede41 .mk-tree-parent-label {
font-size: 10px;
}
.widget-eede41 .pnp-headline {
font-size: 32px;
}
.widget-eede41 .pnp-image-col {
aspect-ratio: unset !important;
height: auto !important;
min-height: 380px;
}
.widget-eede41 .pnp-mockup {
min-height: 360px;
}
.widget-eede41 .pnp-stat-number {
font-size: 20px;
}
.widget-eede41 .pnp-cta-row {
flex-wrap: wrap;
}
}
@media (max-width: 1024px) {
.widget-eede41 .powered-by-row {
gap: 12px;
}
}
@media (max-width: 600px) {
.widget-eede41 {
/* PnP small mobile */
/* Stack stats vertically on very small screens */
}
.widget-eede41 .tabs-wrapper {
padding: 40px 20px;
}
.widget-eede41 .section-kicker {
padding: 5px 14px;
}
.widget-eede41 .section-headline {
font-size: 24px;
}
.widget-eede41 .section-subtext {
font-size: 14px;
}
.widget-eede41 .powered-by-row {
gap: 8px;
}
.widget-eede41 .powered-by-label {
font-size: 11px;
}
.widget-eede41 .powered-by-logo-img {
max-height: min(var(--powered-by-logo-height, 48px), 32px);
}
.widget-eede41 .powered-by-logo-placeholder {
height: min(var(--powered-by-logo-height, 48px), 32px);
}
.widget-eede41 .feature-card {
padding: 20px 16px;
}
.widget-eede41 .card-headline {
font-size: 20px;
}
.widget-eede41 .card-description {
font-size: 15px;
}
.widget-eede41 .card-cta {
width: 100%;
justify-content: center;
}
.widget-eede41 .card-cta-row {
flex-direction: column;
}
.widget-eede41 .mk1-row-hide-sm {
display: none;
}
.widget-eede41 .mk1-row-hide-md {
display: none;
}
.widget-eede41 .mk2-row-hide-sm {
display: none;
}
.widget-eede41 .mk2-row-hide-md {
display: none;
}
.widget-eede41 .pnp-headline {
font-size: 26px;
}
.widget-eede41 .pnp-stats-row {
flex-direction: column;
gap: 8px;
}
.widget-eede41 .pnp-stat-number {
font-size: 18px;
}
.widget-eede41 .pnp-cta-primary,
.widget-eede41 .pnp-cta-secondary {
width: 100%;
justify-content: center;
display: flex;
align-items: center;
}
.widget-eede41 .pnp-cta-row {
flex-direction: column;
}
}
.widget-eede41 {
/* ─────────────────────────────────────────────
NEW SIDE-SCROLLING FEATURE ROW (Card 3 mint box)
───────────────────────────────────────────── */
/* Feasibility "What's Included" row: matches Builders Templates card width exactly (RULE 1) */
/* RULE 2: all 5 mockup boxes share one fixed height, sized to the tallest card's content (Card 2) */
/* Slide 1: question rows */
/* Slide 2: categorised cost list */
/* Slide 3: room checklist */
/* Slide 4: PC sums quote table */
/* Slide 5: single-page quote preview */
}
.widget-eede41 .wbt-extra-row {
grid-column: 1/-1;
width: 100%;
margin-top: 8px;
}
.widget-eede41 .wbt-track-viewport {
width: 100%;
overflow: hidden;
}
.widget-eede41 .wbt-track {
display: flex;
transition: transform 420ms var(--transition-spring);
}
.widget-eede41 .wbt-slide {
flex: 0 0 33.3333%;
max-width: 33.3333%;
box-sizing: border-box;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.widget-eede41 .wbt-slide-card {
background: #f6f7f4;
border: 1px solid rgba(16, 22, 38, 0.06);
border-radius: 20px;
padding: 22px 22px 0 22px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
position: relative;
overflow: hidden;
height: 420px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.widget-eede41 .wbt-slide-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #0f3d2e;
color: #a7fa50;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.widget-eede41 .wbt-slide-title {
font-size: 17px;
font-weight: 600;
color: #101626;
margin: 0 0 8px 0;
}
.widget-eede41 .wbt-slide-desc {
font-size: 14px;
line-height: 1.1 !important;
color: #4b5563;
margin: 0 0 16px 0;
}
.widget-eede41 .wbt-slide-panel {
background: #ffffff;
border-radius: 16px 16px 0 0;
padding: 16px;
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
display: flex;
flex-direction: column;
gap: 7px;
font-size: 11px;
color: #101626;
position: absolute;
bottom: 0;
right: 6%;
left: auto;
width: 88%;
min-height: 0;
max-height: 210px;
overflow: hidden;
border: 1px solid rgba(16, 22, 38, 0.06);
}
.widget-eede41 .wbt-slide-image {
position: absolute;
bottom: 0;
right: 6%;
left: auto;
width: 88%;
height: 210px;
max-height: 210px;
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
border: 1px solid rgba(16, 22, 38, 0.06);
object-fit: cover;
object-position: top center;
}
.widget-eede41 .wbt-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 13px;
}
.widget-eede41 .wbt-panel-title {
font-weight: 600;
}
.widget-eede41 .wbt-panel-muted {
color: #6B7280;
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.widget-eede41 .wbt-panel-total {
font-size: 20px;
font-weight: 700;
color: #101626;
}
.widget-eede41 .wbt-progress-track {
width: 100%;
height: 6px;
border-radius: 4px;
background: #E5E7EB;
overflow: hidden;
}
.widget-eede41 .wbt-progress-fill {
height: 100%;
background: #6366F1;
border-radius: 4px;
}
.widget-eede41 .wbt-panel-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: #6B7280;
}
.widget-eede41 .wbt-margin-badge {
background: #DCFCE7;
color: #16A34A;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
}
.widget-eede41 .wbt-draft-badge {
background: #FEF3C7;
color: #B45309;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
}
.widget-eede41 .wbt-po-meta {
font-size: 10px;
color: #6B7280;
}
.widget-eede41 .wbt-po-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #374151;
}
.widget-eede41 .wbt-po-amt {
margin-left: auto;
font-weight: 600;
}
.widget-eede41 .wbt-po-total {
font-size: 12px;
font-weight: 700;
color: #101626;
}
.widget-eede41 .wbt-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.widget-eede41 .wbt-dots {
display: flex;
gap: 6px;
}
.widget-eede41 .wbt-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(16, 22, 38, 0.18);
}
.widget-eede41 .wbt-dots span.wbt-dot-active {
background: #101626;
}
.widget-eede41 .wbt-arrows {
display: flex;
gap: 8px;
}
.widget-eede41 .wbt-arrow-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #101626;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
color: #ffffff;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.widget-eede41 .wbt-arrow-btn:disabled {
background: rgba(16, 22, 38, 0.18);
color: rgba(16, 22, 38, 0.45);
opacity: 1;
cursor: not-allowed;
}
.widget-eede41 .wbt-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.widget-eede41 .wbt-dot-red {
background: #EF4444;
color: #EF4444;
}
.widget-eede41 .wbt-dot-blue {
background: #3B82F6;
}
.widget-eede41 .wbt-rate-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
font-size: 11px;
color: #374151;
padding: 3px 0;
}
.widget-eede41 .wbt-rate-head {
font-size: 9px;
letter-spacing: 0.05em;
color: #9CA3AF;
font-weight: 600;
}
.widget-eede41 .wbt-muted-sm {
color: #6B7280;
}
.widget-eede41 .wbt-rate-up {
color: #16A34A;
}
.widget-eede41 .wbt-rate-down {
color: #DC2626;
}
.widget-eede41 .wbt-search-bar {
background: #F3F4F6;
border-radius: 8px;
padding: 6px 10px;
font-size: 11px;
color: #9CA3AF;
}
.widget-eede41 .wbt-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22C55E;
}
.widget-eede41 .wbt-extra-row-v2 .wbt-slide {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.widget-eede41 .wbt-extra-row-v2 .wbt-slide-card {
height: 420px;
}
.widget-eede41 .wbt-extra-row-v2 .wbt-slide-title {
line-height: 1 !important;
}
.widget-eede41 .wbt-extra-row-v2 .wbt-slide-desc {
margin-bottom: 12px;
}
.widget-eede41 .wbt-extra-row-v2 .wbt-slide-panel {
height: 172px;
max-height: none;
justify-content: flex-start;
}
@media (max-width: 767px) {
.widget-eede41 .wbt-extra-row-v2 .wbt-slide {
flex: 0 0 100%;
max-width: 100%;
}
}
.widget-eede41 .wbt-q-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: #374151;
padding: 3px 0;
}
.widget-eede41 .wbt-q-answer {
font-weight: 600;
color: #16A34A;
background: #DCFCE7;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
}
.widget-eede41 .wbt-cat-row {
font-size: 11px;
font-weight: 700;
color: #101626;
margin-top: 4px;
}
.widget-eede41 .wbt-more-items {
font-size: 10px;
color: #9CA3AF;
font-style: italic;
margin-top: 4px;
display: block;
}
.widget-eede41 .wbt-room-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
padding: 3px 0;
}
.widget-eede41 .wbt-room-active {
color: #101626;
}
.widget-eede41 .wbt-room-muted {
color: #9CA3AF;
text-decoration: line-through;
}
.widget-eede41 .wbt-room-amt {
margin-left: auto;
font-weight: 600;
}
.widget-eede41 .wbt-room-active .wbt-check-box.wbt-check-done {
color: #16A34A;
}
.widget-eede41 .wbt-quote-row {
display: grid;
grid-template-columns: 1.8fr 0.8fr 0.7fr 0.9fr;
font-size: 10px;
color: #374151;
padding: 3px 0;
gap: 4px;
}
.widget-eede41 .wbt-quote-head {
font-size: 9px;
letter-spacing: 0.05em;
color: #9CA3AF;
font-weight: 600;
}
.widget-eede41 .wbt-qtag {
font-size: 8px;
font-weight: 600;
color: #6366F1;
background: #EEF2FF;
padding: 1px 5px;
border-radius: 999px;
margin-left: 4px;
}
.widget-eede41 .wbt-pdf-panel-single {
display: flex;
justify-content: flex-start;
}
.widget-eede41 .wbt-pdf-front-single {
position: relative;
width: 78%;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
border: 1px solid rgba(16, 22, 38, 0.06);
padding: 14px;
display: flex;
flex-direction: column;
gap: 5px;
}
.widget-eede41 .wbt-pdf-badge {
position: absolute;
top: 10px;
right: 10px;
font-size: 8px;
font-weight: 700;
color: #16A34A;
background: #DCFCE7;
padding: 2px 7px;
border-radius: 999px;
}
.widget-eede41 .wbt-pdf-front-eyebrow {
font-size: 8px;
font-weight: 600;
letter-spacing: 0.08em;
color: #6B7280;
}
.widget-eede41 .wbt-pdf-front-title {
font-size: 16px;
font-weight: 800;
color: #0f3d2e;
margin-bottom: 4px;
}
.widget-eede41 .wbt-pdf-front-photo {
width: 100%;
height: 46px;
border-radius: 4px;
background: rgba(16, 22, 38, 0.08);
margin-bottom: 4px;
}
.widget-eede41 .wbt-pdf-front-footer {
display: flex;
justify-content: space-between;
font-size: 8px;
color: #9CA3AF;
}
.widget-eede41 .wbt-spec-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #374151;
padding: 3px 0;
}
.widget-eede41 .wbt-spec-indent {
padding-left: 18px;
}
.widget-eede41 .wbt-spec-active {
background: #F0FDF4;
border-radius: 6px;
font-weight: 600;
}
.widget-eede41 .wbt-check-box {
width: 14px;
height: 14px;
border-radius: 3px;
border: 1.5px solid #D1D5DB;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
flex-shrink: 0;
}
.widget-eede41 .wbt-check-done {
background: #16A34A;
border-color: #16A34A;
color: #ffffff;
}
.widget-eede41 .wbt-takeoff-grid {
position: relative;
width: 100%;
height: 110px;
border: 1.5px solid #D1D5DB;
border-radius: 8px;
background: #FAFAFA;
}
.widget-eede41 .wbt-grid-line-h {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: #D1D5DB;
}
.widget-eede41 .wbt-grid-line-v {
position: absolute;
height: 1px;
background: #3B82F6;
border-top: 1px dashed #3B82F6;
}
.widget-eede41 .wbt-tag-pill {
background: #DBEAFE;
color: #1D4ED8;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
}
@media (max-width: 767px) {
.widget-eede41 .wbt-slide {
flex: 0 0 100%;
max-width: 100%;
}
}
.widget-7b4ab1 {
/* Gradient glow blob */
/* Grain texture overlay */
/* Left column */
/* Right column */
/* Cards cluster container */
/* Shared card styles */
/* Single floating card */
/* Tablet */
/* Mobile */
}
.widget-7b4ab1 .cta-section {
padding: 64px 56px;
background: transparent;
}
.widget-7b4ab1 .cta-container {
max-width: 1280px;
margin: 0 auto;
}
.widget-7b4ab1 .cta-inner {
background: #101626;
border-radius: 24px;
padding: 96px 72px;
position: relative;
overflow: hidden;
min-height: 480px;
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start;
}
.widget-7b4ab1 .gradient-glow {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 0;
filter: blur(48px);
z-index: 0;
pointer-events: none;
opacity: 0.9;
}
.widget-7b4ab1 .gradient-glow .glow-layer {
position: absolute;
inset: 0;
border-radius: 0;
transition: opacity 2s ease-in-out;
}
.widget-7b4ab1 .gradient-glow .glow-layer-1 {
background: radial-gradient(circle at 100% 100%, rgba(255, 200, 80, 0.95) 0%, rgba(230, 78, 155, 0.75) 18%, rgba(155, 69, 230, 0.45) 38%, rgba(91, 63, 230, 0.2) 58%, transparent 75%);
}
.widget-7b4ab1 .gradient-glow .glow-layer-2 {
background: radial-gradient(circle at 100% 100%, rgba(80, 220, 255, 0.9) 0%, rgba(78, 155, 230, 0.7) 18%, rgba(230, 69, 120, 0.4) 38%, rgba(230, 130, 63, 0.2) 58%, transparent 75%);
opacity: 0;
}
.widget-7b4ab1 .gradient-glow .glow-layer-3 {
background: radial-gradient(circle at 100% 100%, rgba(120, 255, 160, 0.9) 0%, rgba(63, 200, 230, 0.65) 18%, rgba(155, 69, 230, 0.4) 38%, rgba(230, 78, 100, 0.2) 58%, transparent 75%);
opacity: 0;
}
.widget-7b4ab1 .gradient-glow .glow-layer-4 {
background: radial-gradient(circle at 100% 100%, rgba(255, 100, 80, 0.95) 0%, rgba(230, 160, 50, 0.7) 18%, rgba(200, 63, 230, 0.4) 38%, rgba(63, 100, 230, 0.2) 58%, transparent 75%);
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.widget-7b4ab1 .gradient-glow .glow-layer {
transition: none;
}
}
.widget-7b4ab1 .grain-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.4;
z-index: 1;
pointer-events: none;
mix-blend-mode: overlay;
}
.widget-7b4ab1 .cta-left {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
}
.widget-7b4ab1 .cta-headline {
font-family: Geist-SemiBold, Geist, sans-serif;
font-size: 56px;
font-weight: 600;
line-height: 1 !important;
letter-spacing: -0.015em;
color: #FFFFFF;
max-width: 580px;
margin: 0 0 24px;
}
.widget-7b4ab1 .cta-subtext {
font-family: Geist-Regular, Geist, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 480px;
margin: 0 0 32px;
letter-spacing: normal;
}
.widget-7b4ab1 .cta-button,
.widget-7b4ab1 .cta-button *,
.widget-7b4ab1 .cta-left a,
.widget-7b4ab1 .cta-left a *,
.widget-7b4ab1 .cta-left > a,
.widget-7b4ab1 .cta-left > div > a,
.widget-7b4ab1 .cta-left > span,
.widget-7b4ab1 .cta-left > div {
white-space: nowrap !important;
word-break: keep-all !important;
}
.widget-7b4ab1 .cta-button {
background: #FFFFFF !important;
color: #0D0D0D !important;
font-family: Geist-Medium, Geist, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 14px 26px !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
align-self: flex-start;
white-space: nowrap !important;
word-break: keep-all !important;
width: max-content !important;
max-width: none !important;
flex-shrink: 0 !important;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.widget-7b4ab1 .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15) !important;
background: #FFFFFF !important;
color: #0D0D0D !important;
}
.widget-7b4ab1 .cta-button:active {
transform: scale(0.98);
}
.widget-7b4ab1 .cta-button:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 3px;
}
.widget-7b4ab1 .cta-right {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
justify-content: center;
flex-shrink: 0;
margin-right: 40px;
}
.widget-7b4ab1 .cards-cluster {
position: relative;
width: 260px;
height: 320px;
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.widget-7b4ab1 .logo-card {
position: absolute;
width: 232px;
height: 290px;
border-radius: 20px;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding: 36px;
box-sizing: border-box;
box-shadow: 0 32px 64px rgba(13, 13, 13, 0.45), 0 16px 32px rgba(13, 13, 13, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.95), inset 0 4px 8px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(13, 13, 13, 0.12), inset 0 -6px 12px rgba(13, 13, 13, 0.06), inset 2px 0 4px rgba(255, 255, 255, 0.4), inset -2px 0 4px rgba(13, 13, 13, 0.08);
}
.widget-7b4ab1 .card-logo {
width: 100%;
height: auto;
max-height: 55%;
object-fit: contain;
}
.widget-7b4ab1 .card-placeholder {
font-family: Geist-Medium, Geist, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(13, 13, 13, 0.3);
}
.widget-7b4ab1 .card-solo {
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(5deg);
animation: float-card-solo 4.5s ease-in-out infinite;
}
@keyframes float-card-solo {
0%, 100% {
transform: translate(-50%, -50%) rotate(5deg);
}
50% {
transform: translate(-50%, calc(-50% - 12px)) rotate(5deg);
}
}
@media (prefers-reduced-motion: reduce) {
.widget-7b4ab1 .card-solo {
animation: none;
}
.widget-7b4ab1 .cta-button {
transition: none;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.widget-7b4ab1 .cta-section {
padding: 40px 32px;
}
.widget-7b4ab1 .cta-inner {
padding: 64px 48px;
gap: 40px;
}
.widget-7b4ab1 .cta-headline {
font-size: 44px;
}
.widget-7b4ab1 .cards-cluster {
width: 220px;
height: 272px;
}
.widget-7b4ab1 .logo-card {
width: 188px;
height: 236px;
padding: 28px;
}
}
@media (max-width: 767px) {
.widget-7b4ab1 .cta-section {
padding: 40px 24px;
}
.widget-7b4ab1 .cta-inner {
grid-template-columns: 1fr;
padding: 48px 28px;
gap: 40px;
min-height: auto;
}
.widget-7b4ab1 .cta-headline {
font-size: 32px;
max-width: 100%;
}
.widget-7b4ab1 .cta-subtext {
max-width: 100%;
}
.widget-7b4ab1 .cta-right {
justify-content: center;
min-height: auto;
}
.widget-7b4ab1 .cards-cluster {
width: 188px;
height: 236px;
}
.widget-7b4ab1 .logo-card {
width: 160px;
height: 200px;
padding: 24px;
}
}
@charset "UTF-8";
.widget-d5471f {
/* ── CSS Custom Properties ── */
--qbe-card-bg: #fafafa;
--qbe-card-border: #f0f0f0;
--qbe-icon-tint: #6366f1;
--qbe-icon-bg: #eef2ff;
--qbe-glow-opacity: 0.55;
/* Band 1 editable text */
--qbe-headline-text: "Unlimited QBE creation + your Builders Template";
--qbe-subheadline-text: "In our Plug & Play Templated System, our Builders Template subscribers get unlimited access...";
--qbe-body-text: "The QBE is the single most valuable lead qualification tool...";
/* Left (value) box */
--qbe-value-label: "WHAT THIS IS WORTH";
--qbe-value-number: "$5,500+";
--qbe-value-suffix: "per month";
--qbe-value-caption: "in QBE value, if you qualify just 10 leads a month";
--qbe-value-sublabel: "Standard QBE pricing";
--qbe-value-formula: "$550 × 12 months × 10 QBEs = $66,000/year";
--qbe-value-gradient-start: #6366f1;
--qbe-value-gradient-end: #8b5cf6;
/* Right (price) box */
--qbe-price-label: "OUR OFFER";
--qbe-price-number: "$150";
--qbe-price-suffix: "/mo";
--qbe-price-caption: "paid annually with your Builders Template";
--qbe-price-sublabel: "Annual investment";
--qbe-price-formula: "$249/mo Builders Template + $150/mo QBE = $4,788/year";
--qbe-price-gradient-start: #a855f7;
--qbe-price-gradient-end: #ec4899;
/* Reset site-theme colour bleed */
color: #0a0a0a;
/* ══════════════════════════════
BAND 1
══════════════════════════════ */
/* — — — SUB-ROW A: CENTERED INTRO — — — */
/* — Kicker Pill — */
/* — Headline — */
/* — Subheadline — */
/* — — — SUB-ROW B: TWO GRADIENT BOXES — — — */
/* Shared box styles */
/* — — — SUB-ROW C: BODY + CTAs — — — */
/* — Body — */
/* — CTA Row — */
/* Primary CTA wrapper (glow) */
/* ══════════════════════════════
BAND 2
══════════════════════════════ */
/* ══════════════════════════════
ENTRANCE ANIMATIONS
══════════════════════════════ */
/* ══════════════════════════════
RESPONSIVE — TABLET
══════════════════════════════ */
/* ══════════════════════════════
RESPONSIVE — MOBILE
══════════════════════════════ */
/* ══════════════════════════════
RESPONSIVE — SMALL MOBILE
══════════════════════════════ */
/* ══════════════════════════════
PREFERS REDUCED MOTION
══════════════════════════════ */
}
.widget-d5471f .qbe-section {
width: 100%;
background: #ffffff;
padding: 96px 48px;
box-sizing: border-box;
font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.widget-d5471f .qbe-inner {
max-width: 1200px;
margin: 0 auto;
}
.widget-d5471f .qbe-band1 {
/* stacked sub-rows — each is a block-level child */
}
.widget-d5471f .qbe-intro {
text-align: center;
max-width: 960px;
margin: 0 auto 56px;
}
.widget-d5471f .qbe-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
background: #f3f4f6;
color: #4f46e5;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 99px;
}
.widget-d5471f .qbe-kicker-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #6366f1;
flex-shrink: 0;
}
.widget-d5471f .qbe-headline {
margin-top: 24px;
color: #0a0a0a;
font-family: "Geist-SemiBold", "Geist", Georgia, serif;
font-size: 52px;
font-weight: 700;
line-height: 1 !important;
letter-spacing: -0.02em;
text-align: center;
}
.widget-d5471f .qbe-subheadline {
margin: 20px auto 0;
color: #4b5563;
font-size: 17px;
line-height: 1.55;
font-weight: 400;
text-align: center;
max-width: 680px;
}
.widget-d5471f .qbe-boxes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 56px;
}
.widget-d5471f .qbe-box {
position: relative;
border-radius: 24px;
padding: 40px 36px;
color: #fff;
overflow: hidden;
box-sizing: border-box;
}
.widget-d5471f .qbe-box--value {
background: linear-gradient(135deg, var(--qbe-value-gradient-start) 0%, var(--qbe-value-gradient-end) 100%);
box-shadow: 0 20px 60px rgba(99, 102, 241, 0.25);
}
.widget-d5471f .qbe-box--price {
background: linear-gradient(135deg, var(--qbe-price-gradient-start) 0%, var(--qbe-price-gradient-end) 100%);
box-shadow: 0 20px 60px rgba(236, 72, 153, 0.25);
}
.widget-d5471f .qbe-box-glow {
position: absolute;
top: -50%;
right: -30%;
width: 80%;
height: 160%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.widget-d5471f .qbe-box-content {
position: relative;
z-index: 1;
}
.widget-d5471f .qbe-box-label {
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 18px;
}
.widget-d5471f .qbe-box-number-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.widget-d5471f .qbe-big-number {
color: #fff;
font-family: "Geist-SemiBold", "Geist", Georgia, serif;
font-size: 64px;
font-weight: 700;
line-height: 1 !important;
letter-spacing: -0.03em;
display: inline-block;
}
.widget-d5471f .qbe-number-suffix {
color: rgba(255, 255, 255, 0.85);
font-size: 18px;
font-weight: 500;
margin-left: 8px;
vertical-align: baseline;
}
.widget-d5471f .qbe-box-caption {
margin-top: 12px;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.widget-d5471f .qbe-box-divider {
margin: 24px 0;
height: 1px;
background: rgba(255, 255, 255, 0.2);
}
.widget-d5471f .qbe-box-sublabel {
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.widget-d5471f .qbe-box-formula {
display: inline-block;
font-family: "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
font-size: 13px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
padding: 6px 10px;
border-radius: 8px;
}
.widget-d5471f .qbe-bottom-row {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
}
.widget-d5471f .qbe-body {
color: #6b7280;
font-size: 15px;
line-height: 1.65;
max-width: 560px;
}
.widget-d5471f .qbe-cta-row {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}
.widget-d5471f .qbe-primary-wrap {
position: relative;
display: inline-block;
}
.widget-d5471f .qbe-primary-wrap::before {
content: "";
position: absolute;
top: 40%;
left: 10%;
right: 10%;
bottom: -10px;
border-radius: 99px;
background: linear-gradient(135deg, #ec4899, #a855f7, #6366f1, #3b82f6, #06b6d4, #10b981);
filter: blur(16px);
opacity: var(--qbe-glow-opacity);
z-index: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.widget-d5471f .qbe-primary-wrap:hover::before {
opacity: 0.8;
}
.widget-d5471f .qbe-btn-primary,
.widget-d5471f a.qbe-btn-primary {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
background: #0a0a0a;
color: #fff;
border: none;
border-radius: 99px;
height: 49px;
padding: 0 28px;
font-size: 15px;
font-weight: 600;
white-space: nowrap !important;
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease;
}
.widget-d5471f .qbe-btn-primary:hover,
.widget-d5471f a.qbe-btn-primary:hover {
background: #1a1a1a;
}
.widget-d5471f .qbe-btn-secondary,
.widget-d5471f a.qbe-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
background: transparent;
color: #374151;
border: 1.5px solid #d1d5db;
border-radius: 99px;
height: 49px;
padding: 0 24px;
font-size: 15px;
font-weight: 500;
white-space: nowrap !important;
cursor: pointer;
font-family: inherit;
transition: border-color 0.2s ease, color 0.2s ease;
}
.widget-d5471f .qbe-btn-secondary:hover,
.widget-d5471f a.qbe-btn-secondary:hover {
border-color: #9ca3af;
color: #0a0a0a;
}
.widget-d5471f .qbe-band2 {
margin-top: 96px;
}
.widget-d5471f .qbe-band2-header {
text-align: center;
margin-bottom: 48px;
}
.widget-d5471f .qbe-band2-label {
color: #6366f1;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.widget-d5471f .qbe-band2-subheadline {
color: #0a0a0a;
font-family: "Geist-SemiBold", "Geist", Georgia, serif;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
max-width: 640px;
margin: 12px auto 0;
}
.widget-d5471f .qbe-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.widget-d5471f .qbe-card {
background: var(--qbe-card-bg);
border: 1px solid var(--qbe-card-border);
border-radius: 16px;
padding: 32px 28px;
transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.widget-d5471f .qbe-card:hover {
transform: translateY(-4px);
border-color: #e0e0e0;
background: #ffffff;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}
.widget-d5471f .qbe-card-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--qbe-icon-bg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0;
}
.widget-d5471f .qbe-card-icon svg {
stroke: var(--qbe-icon-tint);
}
.widget-d5471f .qbe-card-title {
color: #0a0a0a;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 10px;
font-family: "Geist-SemiBold", "Geist", Georgia, serif;
}
.widget-d5471f .qbe-card-body {
color: #6b7280;
font-size: 14px;
line-height: 1.55;
}
.widget-d5471f .qbe-anim {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.widget-d5471f .qbe-anim.is-in-view {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1024px) {
.widget-d5471f .qbe-headline {
font-size: 42px;
}
.widget-d5471f .qbe-big-number {
font-size: 56px;
}
}
@media (max-width: 768px) {
.widget-d5471f .qbe-section {
padding: 64px 24px;
}
.widget-d5471f .qbe-headline {
font-size: 34px;
}
.widget-d5471f .qbe-boxes {
grid-template-columns: 1fr;
gap: 16px;
}
.widget-d5471f .qbe-big-number {
font-size: 48px;
}
.widget-d5471f .qbe-bottom-row {
grid-template-columns: 1fr;
}
.widget-d5471f .qbe-cta-row {
margin-top: 24px;
}
.widget-d5471f .qbe-box {
padding: 32px 28px;
}
.widget-d5471f .qbe-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.widget-d5471f .qbe-section {
padding: 64px 20px;
}
.widget-d5471f .qbe-headline {
font-size: 28px;
}
.widget-d5471f .qbe-big-number {
font-size: 42px;
}
.widget-d5471f .qbe-box {
padding: 28px 22px;
}
.widget-d5471f .qbe-btn-primary,
.widget-d5471f a.qbe-btn-primary,
.widget-d5471f .qbe-btn-secondary,
.widget-d5471f a.qbe-btn-secondary {
width: 100%;
justify-content: center;
}
.widget-d5471f .qbe-cta-row {
flex-direction: column;
align-items: stretch;
}
.widget-d5471f .qbe-primary-wrap {
width: 100%;
}
.widget-d5471f .qbe-primary-wrap .qbe-btn-primary,
.widget-d5471f .qbe-primary-wrap a.qbe-btn-primary {
width: 100%;
}
.widget-d5471f .qbe-card {
padding: 24px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.widget-d5471f .qbe-anim {
opacity: 0;
transform: none;
transition: opacity 0.2s ease;
}
.widget-d5471f .qbe-anim.is-in-view {
opacity: 1;
transform: none;
}
.widget-d5471f .qbe-card {
transition: none;
}
}