:root{
--bg-0:#0a0a0f;
--bg-1:#0b0b11;
--bg-2:#0c0c13;
--text:#ffffff;
--muted:#99a1af;
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.20);
--glass:rgba(255,255,255,.05);
--accent:#00d3f3;
--accent-2:#155dfc;
--radius-lg:24px;
--radius-md:16px;
--radius-sm:14px;
--shadow:0 24px 64px rgba(0,0,0,.35);
--ease:cubic-bezier(.22,.9,.24,1);
--dur-1:260ms;
--dur-2:520ms;
--container:1280px;
--gutter:24px;
--section-pad:128px;
--header-offset:92px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x:hidden}
body.demo-devcom-homehealth #wpadminbar{display:none!important}
html:has(body.demo-devcom-homehealth){margin-top:0!important}
body.demo-devcom-homehealth.admin-bar{margin-top:0!important;padding-top:0!important}
body{
margin:0;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--text);
background:var(--bg-0);
overflow-x:hidden;
} .hero,
.section,
.site-footer{
background:
linear-gradient(149.366deg, #0a0a0f 0%, #0b0b11 8.3333%, #0c0c13 16.667%, #0c0c14 25%, #0d0d16 33.333%, #0e0e18 41.667%, #0f0f1a 50%, #11111d 57.143%, #121220 64.286%, #141422 71.429%, #151525 78.571%, #171728 85.714%, #18182b 92.857%, #1a1a2e 100%);
}
.section--features{
background:
radial-gradient(640px 640px at 76% 38%, rgba(0,211,243,.10), transparent 60%),
linear-gradient(149.366deg, #0a0a0f 0%, #0b0b11 8.3333%, #0c0c13 16.667%, #0c0c14 25%, #0d0d16 33.333%, #0e0e18 41.667%, #0f0f1a 50%, #11111d 57.143%, #121220 64.286%, #141422 71.429%, #151525 78.571%, #171728 85.714%, #18182b 92.857%, #1a1a2e 100%);
}
.section--benefits{
background:
radial-gradient(560px 560px at 60% 28%, rgba(0,211,243,.09), transparent 62%),
linear-gradient(149.366deg, #0a0a0f 0%, #0b0b11 8.3333%, #0c0c13 16.667%, #0c0c14 25%, #0d0d16 33.333%, #0e0e18 41.667%, #0f0f1a 50%, #11111d 57.143%, #121220 64.286%, #141422 71.429%, #151525 78.571%, #171728 85.714%, #18182b 92.857%, #1a1a2e 100%);
}
.section--comparison{
background:
radial-gradient(560px 560px at 26% 54%, rgba(139,92,246,.10), transparent 62%),
linear-gradient(149.366deg, #0a0a0f 0%, #0b0b11 8.3333%, #0c0c13 16.667%, #0c0c14 25%, #0d0d16 33.333%, #0e0e18 41.667%, #0f0f1a 50%, #11111d 57.143%, #121220 64.286%, #141422 71.429%, #151525 78.571%, #171728 85.714%, #18182b 92.857%, #1a1a2e 100%);
}
.section--demo{
background:
radial-gradient(772px 772px at 35% 28%, rgba(0,211,243,.10), transparent 62%),
radial-gradient(656px 656px at 78% 30%, rgba(139,92,246,.10), transparent 62%),
linear-gradient(149.366deg, #0a0a0f 0%, #0b0b11 8.3333%, #0c0c13 16.667%, #0c0c14 25%, #0d0d16 33.333%, #0e0e18 41.667%, #0f0f1a 50%, #11111d 57.143%, #121220 64.286%, #141422 71.429%, #151525 78.571%, #171728 85.714%, #18182b 92.857%, #1a1a2e 100%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0}
.sr-only{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:12px;top:12px;
padding:10px 12px;
border-radius:12px;
background:#000;
border:1px solid var(--line);
transform:translateY(-140%);
transition:transform var(--dur-1) var(--ease);
z-index:1000;
}
.skip-link:focus{transform:translateY(0)}
.container{
width:min(var(--container), calc(100% - (var(--gutter) * 2)));
margin-inline:auto;
}
#main{
overflow: hidden;
} .site-header{
position:sticky;top:0;z-index:50;
background:rgba(10,10,15,.55);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
height:80px;
display:flex;align-items:center;justify-content:space-between;
gap:24px;
}
body.demo-devcom-homehealth .demo-all-demos-link{
display:inline-flex;
align-items:center;
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(0,211,243,.45);
background:rgba(0,211,243,.12);
color:#00d3f3;
font-size:14px;
font-weight:600;
line-height:1;
text-decoration:none;
white-space:nowrap;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
body.demo-devcom-homehealth .demo-all-demos-link:hover,
body.demo-devcom-homehealth .demo-all-demos-link:focus-visible{
background:rgba(0,211,243,.22);
border-color:#00d3f3;
color:#fff;
}
body.demo-devcom-homehealth .demo-all-demos-link--header{
position:absolute;
top:50%;
left:clamp(8px, 1.5vw, 16px);
transform:translateY(-50%);
z-index:60;
}
@media (max-width: 1560px) {
body.demo-devcom-homehealth .brand {
margin-left: 9.75rem;
}
}
@media (max-width: 768px) {
body.demo-devcom-homehealth .demo-all-demos-link--header {
display: none;
}
body.demo-devcom-homehealth .brand {
margin-left: 0;
}
}
body.demo-devcom-homehealth.homehealth-menu-open {
overflow: hidden;
}
body.demo-devcom-homehealth .nav .demo-all-demos-link--mobile{
display: none;
}
.brand{
text-decoration:none;
color:inherit;
}
.brand-mark{font-weight: 700;
font-size: 24px;
letter-spacing: .4px;
color: #00D3F3;}
.nav{
display:flex;align-items:center;
gap:32px;
color:rgba(255,255,255,.8);
font-size:16px;
line-height:1;
}
.nav-link{position:relative;padding:8px 0;color: #99A1AF;transition:color var(--dur-1) var(--ease)}
.nav-link:hover{color:#fff}
.nav-link::after{
content:"";
position:absolute;left:0;right:0;bottom:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(0,211,243,.8), transparent);
opacity:0;
transform:translateY(4px);
transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.nav-link:hover::after{opacity:0;transform:translateY(0)} .menu-toggle{
display:none;
width:44px;height:44px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
padding:0;
place-items:center;
color:#fff;
cursor:pointer;
transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.menu-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.menu-toggle__bars{
position:relative;
width:18px;height:12px;
display:block;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after{
content:"";
position:absolute;left:0;right:0;
height:2px;border-radius:999px;
background:rgba(255,255,255,.92);
transition:transform var(--dur-1) var(--ease), top var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.menu-toggle__bars::before{top:0;box-shadow:0 5px 0 rgba(255,255,255,.92)}
.menu-toggle__bars::after{top:10px} .site-header.nav-open .menu-toggle__bars::before{
top:5px;
box-shadow:none;
transform:rotate(45deg);
}
.site-header.nav-open .menu-toggle__bars::after{
top:5px;
transform:rotate(-45deg);
} .btn{
display:inline-flex;align-items:center;justify-content:center;
gap:10px;
height:58px;
padding:0 22px;
border-radius:var(--radius-sm);
border:1px solid transparent;
font-weight:600;
font-size:16px;
line-height:24px;
transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
will-change:transform;
transition: all 0.3s ease-in-out;
}
.btn--sm{height:48px;padding:0 18px;font-size:14px}
.btn--primary{
background:linear-gradient(90deg, #00b8db 0%, var(--accent-2) 100%);
color:#fff;
box-shadow:0 18px 44px rgba(0,0,0,.32);
border: none;
transition: all 0.3s ease-in-out;
}
.btn--primary:hover{box-shadow: 0 0 25px rgba(0, 180, 219, 0.7); transform:translateY(-1px)}
.btn--ghost{
background:rgba(255,255,255,.05);
border-color:rgba(255,255,255,.10);
color:#fff;
}
.btn--ghost:hover{border-color: #00d3f342;transform:translateY(-1px)}
.btn--wide{width:100%;height:76px;border-radius:18px;font-size:18px}
.btn-arrow{font-size:20px;transform:translateY(-1px)} section[id]{
scroll-margin-top:var(--header-offset);
} .site-header .btn.btn--sm{
height:44px;
padding:0 16px;
border-radius:14px;
font-size:13px;
letter-spacing:.01em;
}
.site-header .btn.btn--ghost{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.14);
background: linear-gradient(90deg, #00b8db 0%, #155dfc 100%);
border: none;
}
.site-header .btn.btn--ghost:hover{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.22);
} .reveal-mask{
overflow:hidden;
clip-path:inset(0 0 calc((1 - var(--reveal, 0)) * 100%) 0 round 0);
}
.reveal-item{
transform:translate3d(0, calc((1 - var(--reveal, 0)) * 24px), 0);
opacity:var(--reveal, 0);
transition:opacity 80ms linear;
will-change:transform,opacity;
}
[data-reveal-item]{--reveal:0}
[data-reveal-section]{--section-reveal:0}
[data-reveal-section] .reveal-mask,
[data-reveal-section] [data-reveal-item]{--reveal:var(--section-reveal,0)} .h2{
font-size: 72px;
line-height: 72px;
font-weight: 700;
letter-spacing: -.6px;
}
.h2--xl{font-size:60px;line-height:60px}
.h3{font-size:30px;line-height:36px;font-weight:700}
.h4{font-size:24px;line-height:32px;font-weight:700}
.lead{font-size:18px;line-height:29.25px;color:var(--muted)}
.section-lead{font-size:20px;line-height: 28px;color:var(--muted);max-width: 795px;
margin-top: 26px;}
.section-lead--center{margin-inline:auto;text-align:center}
.kicker{margin-top:18px;font-size:30px;line-height:36px;font-weight:700;text-align:center} .hero{
position:relative; min-height:100svh;
display:flex;
}
.hero-bg{
position:absolute;inset:-34px -58px auto -58px;
height:1372px;
opacity:.16;
background:radial-gradient(circle at 50% 50%, rgba(6,182,212,.20) 0%, rgba(3,91,106,.10) 30%, transparent 60%);
pointer-events:none;
}
.hero-grid{
position:absolute;inset:0;
opacity:.05;
background:
linear-gradient(180deg, rgba(6,182,212,.4) 0%, transparent 0%),
linear-gradient(90deg, rgba(6,182,212,.4) 0%, transparent 0%);
mask-image:radial-gradient(circle at 50% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,.6) 40%, transparent 72%);
pointer-events:none;
}
.hero-inner{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap:48px;
margin:auto;
padding-top:clamp(140px, 16svh, 240px);
padding-bottom:clamp(64px, 10svh, 160px);
}
.hero-title{
font-size:72px;
line-height:82.8px;
font-weight:700;
letter-spacing:-1.8px;
}
.hero-title__line{display:block;white-space:nowrap}
.hero-title__line--accent{color:var(--accent)}
.hero-subtitle{
margin-top:22px;
font-size:30px;
line-height:36px;
font-weight:600;
max-width: 795px;
margin-right: -110px;
}
.hero-lead{margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:600px}
.hero-actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.hero-art{
position:relative;
min-height:652px;
}
.hero-icons{
position:absolute;
width:704px;height:652px;
right:0;
top:clamp(180px, 24svh, 308px);
opacity:.58;
filter:saturate(.9) brightness(.92) blur(.35px);
}
.hero-copy{max-width:1232px}
.hero-swoosh{
position:absolute;inset:0;
width:704px;height:652px;
opacity:1;
}
.icon-tile{
position:absolute;
left:0;top:0;
transform:translate3d(var(--x), var(--y), 0) rotate(var(--r));
width:52px;height:52px;
border-radius:9.5px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 16px 34px rgba(0,0,0,.25);
display:grid;place-items:center;
transform-origin:center;
will-change:transform;
}
.icon-tile img{
width:55%;
height:55%;
max-width:100%;
opacity:.55;
mix-blend-mode:screen;
filter:drop-shadow(0 0 10px rgba(0, 211, 243, 0.18)) blur(.15px);
}
.icon-tile::after{
content:"";
position:absolute;
inset:-10px;
border-radius:14px;
background:var(--glow, rgba(0,211,243,.4));
opacity:var(--glowA, .32);
filter:blur(22px);
z-index:-1;
}
.icon-tile--xs{width:42px;height:42px;border-radius:9px}
.icon-tile--sm{width:45px;height:45px;border-radius:9.5px}
.icon-tile--md{width:65px;height:65px;border-radius:14px}
.icon-tile--lg{width:81px;height:81px;border-radius:17px}
.hero-scroll-indicator{
position:absolute;
left:50%;
bottom:clamp(18px, 3.2svh, 36px);
transform:translateX(-50%);
}
.mouse{
display:block;
width:24px;height:40px;
border-radius:999px;
border:2px solid rgba(255,255,255,.30);
position:relative;
}
.mouse-dot{
position:absolute;
left:50%;top:12px;
width:4px;height:6px;
border-radius:999px;
background:#fff;
transform:translateX(-50%);
animation:mouseDot 1.35s var(--ease) infinite;
}
@keyframes mouseDot{
0%{transform:translate(-50%,0);opacity:.95}
70%{transform:translate(-50%,10px);opacity:.35}
100%{transform:translate(-50%,0);opacity:.95}
} .section{
position:relative;
padding:var(--section-pad) 0;
}
.section-head{margin-bottom: 55px;}
.section-head--center{text-align:center}
.subhead{margin:0 0 44px;text-align:center}
.grid-2{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:32px;
}
.card{
background:var(--glass);
border:1px solid rgba(255,255,255,.10);
border-radius:var(--radius-lg);
padding: 33px 33px 5px 33px;
min-height:162px;
display:flex;
gap:24px;
align-items:flex-start;
box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.card--hover{
transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.card--hover:hover{
border-color:var(--accent)!important;
transform:scale(1.02) !important;
}
.card-body p{margin-top:12px;font-size:16px;line-height:26px;color:var(--muted)}
.card-icon{
width:64px;height:64px;border-radius:16px;
background:linear-gradient(135deg, rgba(0,184,219,.20) 0%, rgba(21,93,252,.20) 100%);
display:grid;place-items:center;
flex:0 0 auto;
}
.icon-fallback{
width:32px;height:32px;
display:block;
opacity:.9;
background:rgba(0,211,243,.0);
mask-size:contain;
mask-repeat:no-repeat;
mask-position:center;
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
background:rgba(0,211,243,.92);
}
.icon-fallback[data-icon="auth"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="doc"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="review"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="billing"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="schedule"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="lag"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="leak"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="friction"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="blind"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="speed"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="scale"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.icon-fallback[data-icon="eye"]{mask-image:linear-gradient(#000,#000);-webkit-mask-image:linear-gradient(#000,#000)}
.bg-blob{
position:absolute;
width:596px;height:596px;
left:calc(50% - 298px);
top:180px;
border-radius:9999px;
filter:blur(178px);
opacity:.8;
pointer-events:none;
}
.bg-blob--cyan{background:rgba(0,184,219,.10)}
.bg-blob--violet{background:rgba(139,92,246,.12)}
.bg-blob--right{left:auto;right:10%} .section--workflow{padding:128px 0}
.workflow-bg{position:absolute;inset:0;pointer-events:none}
.workflow-curve{
position:absolute;left:0;right:0;top:180px;height:220px;width:100%;
opacity:.7;
animation:curveMove 4.2s var(--ease) infinite alternate;
}
@keyframes curveMove{
from{transform:translateX(-10px)}
to{transform:translateX(10px)}
}
.workflow-steps{
position:relative;
margin-top:80px;
}
.workflow-steps{
display: flex;
justify-content:space-between;
}
.workflow-steps::-webkit-scrollbar{height:12px}
.workflow-steps::-webkit-scrollbar-track{
background:rgba(255,255,255,.06);
border-radius:999px;
}
.workflow-steps::-webkit-scrollbar-thumb{
background:rgba(0,211,243,.75);
border-radius:999px;
border:3px solid rgba(0,0,0,0);
background-clip:padding-box;
}
.workflow-steps::-webkit-scrollbar-thumb:hover{background:rgba(0,211,243,.92)}
.step{
position: relative;
width: 20%;
min-height: 377px;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.step-top{
position:relative;
height:73.59375px; 
margin:0;
width: 100%;
}
.step-badge{
width:64px;
height:49.59375px;
border-radius:999px;
display:grid;place-items:center;
font-weight:800;
font-size: 20px;
color:#dff8ff;
background:linear-gradient(135deg, #00b8db 0%, #155dfc 100%);
border: none;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255,255,255,.06) inset;
position:absolute;
left:89.59375px;
top:0;
transform:rotate(0deg);
transform-origin:center;
transition:transform 1050ms cubic-bezier(.2,.9,.2,1);
will-change:transform;
}
.step-badge::before{
content:"";
position:absolute;
inset:-24px -30px;
border-radius:999px;
background:radial-gradient(circle at 50% 55%, rgba(0,211,243,.32), transparent 66%);
filter:blur(18px);
opacity:.55;
z-index:-1;
transform:scale(1);
animation:badgePulse 2.2s var(--ease) infinite;
}
.step-badge::after{
content:none;
}
.step-badge:hover{
transform:rotate(360deg);
}
@keyframes badgePulse{
0%{transform:scale(1);opacity:.50}
55%{transform:scale(1.28);opacity:.22}
100%{transform:scale(1);opacity:.50}
}
.step-mini-arrow{
position:absolute;
left:145.90625px;
top:32px;
width:97.265625px;
height:40px;
display:flex;
align-items:center;
justify-content:flex-start;
font-size:34px;
line-height:40px;
color:rgba(0,211,243,.65);
animation:miniArrow 1.7s var(--ease) infinite alternate;
font-family: Inter;
}
.step-mini-arrow--end{opacity:0}
.step-card{
background:var(--glass);
border:1px solid rgba(255,255,255,.10);
border-radius:24px;
padding:25px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.18);
width:243.1875px;
height:303.40625px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
.step-icon{
width:64px;height:64px;border-radius:16px;
margin:0 auto 16px;
background:rgba(255,255,255,.04);
display:grid;place-items:center;
background: linear-gradient(135deg, rgba(0, 184, 219, 0.2) 0%, rgba(21, 93, 252, 0.2) 100%);
}
.step-card .h3{
font-size: 18px;
line-height: 28px;
margin-top: 10px;
letter-spacing: .08em;
text-transform: uppercase;
}
.step-card p{margin-top: 10px;
font-size: 14px;
line-height: 22px;color:var(--muted)}
@keyframes miniArrow{
from{transform:translateX(0);opacity:.55}
to{transform:translateX(10px);opacity:.95}
}
.comparison-grid{
margin-top:56px;
display:flex;
flex-direction:column;
gap:18px;
}
.comparison-head{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:24px;
}
.comparison-head__cell{
height: 114px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-weight:800;
letter-spacing:.08em;
font-size: 24px;
color:#fff;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.comparison-head__cell--muted{color: #99a1af;}
.comparison-head__cell--adv{
color: #00d3f3;
background:rgba(255,255,255,.05);
}
.comparison-row{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:24px;
}
.comparison-card{
min-height: 78px;
border-radius:18px;
padding:18px 20px;
display:flex;
align-items:center;
gap:14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 12px 36px rgba(0,0,0,.26);
}
.comparison-card--feature{
background:rgba(255,255,255,.05);
}
.comparison-card--muted{
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.78);
}
.comparison-card--adv{
position:relative;
background:rgba(255,255,255,.05);
}
.comparison-card--adv::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
opacity:.9;
pointer-events:none;
}
.comparison-card > *{position:relative;z-index:1}
.comparison-feature{
font-weight:700;
font-size:16px;
color:#fff;
}
.comparison-text{
font-size: 16px;
line-height: 20px;
color: #D1D5DC;
}
.comparison-text--strong{
color:rgba(255,255,255,.90);
font-weight:600;
}
.comparison-bullet{
width: 20px;
height: 20px;
border-radius:999px;
display:inline-grid;
place-items:center;
flex:0 0 auto;
}
.comparison-bullet--muted{
border:2px solid rgba(255,255,255,.28);
background:transparent;
}
.comparison-bullet--adv{
width: 24px;
height: 24px;
}
.demo-inner{width:min(1024px, calc(100% - (var(--gutter) * 2)))}
.form-shell{
margin-top:64px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
border-radius:28px;
padding:41px;
box-shadow:var(--shadow);
}
.wpcf7-form,
.demo-form{display:flex;flex-direction:column;gap:32px}
.field--row{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.field__col{min-width:0}
.label{
display:flex;align-items:center;gap:8px;
font-size:16px;
color:rgba(255,255,255,.9);
margin-bottom:10px;
font-weight: 500;
}
.label-icon{
width:20px;height:20px;
display:inline-flex;
flex:0 0 auto;
}
.label-icon img{
width:20px;
height:20px;
display:block;
}
input,textarea{
width:100%;
border-radius:14px;
border: 1px solid rgba(255, 255, 255, 0.2);
background:rgba(255,255,255,.1);
color:#fff;
padding:19px 24px;
font-size:16px;
outline:none;
transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
textarea{border-radius:18px; height: 130px;resize:vertical}
input{height:58px}
textarea{min-height:130px}
input::placeholder,textarea::placeholder{color: #6a7282;}
input:focus,textarea:focus{
border-color:rgba(0,211,243,.55);
box-shadow:0 0 0 6px rgba(0,211,243,.08);
}
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #00d3f3;
padding: 10px 20px;
}
.trust-points{
margin:40px 0 0;
padding:0;
list-style:none;
display:flex;
gap:24px;
justify-content:center;
flex-wrap:wrap;
color:rgba(255,255,255,.85);
}
.trust-points li{display: flex;
align-items: center;
gap: 10px;
color: #99a1af;
font-size: 16px;}
.dot{
width:8px;height:8px;border-radius:999px;
background: #00b8db;
}
.fineprint{
margin-top: 40px;
text-align: center;
color: #fff;
font-size: 24px;
line-height: 32px;
font-weight: 400;
}
.site-footer{
padding:65px 0 40px;
border-top:1px solid rgba(255,255,255,.06);
background:rgba(0,0,0,.10);
}
.footer-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:32px;
align-items:start;
padding-bottom:48px;
}
.footer-title{font-size:18px;line-height:28px;font-weight:700}
.footer-subtitle{margin-top:14px;font-size:16px;line-height:24px;font-weight:700}
.footer-link{margin-top:10px;color:rgba(255,255,255,.80)}
.footer-muted{margin-top:10px;color:rgba(255,255,255,.65);line-height:24px}
.footer-spacer{height:18px}
.footer-links{
margin-top:14px;
display:flex;
flex-direction:column;
gap:10px;
color:rgba(255,255,255,.75);
}
.footer-links a{
display:block;
color:inherit;
text-decoration:none;
transition:color .2s ease;
}
.footer-links a:hover{color:#fff}
.footer-logo{font-weight:700;font-size:30px;line-height:36px;color: #00d3f3;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.06);
padding-top:28px;
text-align:center;
color:rgba(255,255,255,.6);
font-size:14px;
font-weight: 400;
font-size: 14px;
line-height: 143%;
text-align: center;
color: #6a7282;
}
.footer-bottom a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
transition: color .2s ease;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
color: #00d3f3;
}
#use-cases .section-lead {
line-height: 32px;
max-width: 870px;
margin-top: 26px;
}
#use-cases .section-head {
margin-bottom: 33px;
}
#use-cases .subhead {
margin: 0 0 50px;
}
#benefits .section-head {
margin-bottom: 88px;
}
.section--comparison .section-lead {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
.section--comparison .section-head {
margin-bottom: 82px;
}
@media (max-width: 1330px){
.workflow-steps{
display:flex;
gap:16px;
justify-content:flex-start;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:14px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin; scrollbar-color: rgba(0,211,243,.80) rgba(255,255,255,.06); }
.workflow-steps > .step{
flex:0 0 243.1875px;
scroll-snap-align:start;
}
}
@media (max-width: 960px){
:root{--section-pad:104px}
.hero-inner{grid-template-columns:1fr;gap:36px;padding-top:80px}
.hero-icons{position:relative;right:auto;top:auto;margin:0 auto}
.hero-art{margin-top: -600px;z-index: 1;min-height:520px}
.hero-icons,
.hero-swoosh{
width:min(704px, 100%);
}
.hero-icons{
height:auto;
aspect-ratio:704 / 652;
}
.hero-swoosh{
height:100%;
}
.hero-copy {
position: relative;
z-index: 99;
}
.hero-subtitle {
margin-right: 0px;
}
.comparison-head__cell {
font-size: 18px;
}
}
@media (max-width: 992px){
.footer-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 768px){
:root{--section-pad:88px;--header-offset:84px}
.menu-toggle{display:grid}
.header-inner{
display: flex;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:12px;
}
.header-inner .brand{justify-self:start;order: 1;}
.header-inner > .btn.btn--sm.btn--ghost{justify-self:center;order: 2;}
.menu-toggle{justify-self:end;order: 3;}
body.demo-devcom-homehealth .demo-all-demos-link--header{
font-size:12px;
padding:6px 10px;
}
body.demo-devcom-homehealth .brand {
margin-left: 0;
}
.nav{
display:flex;
position:fixed;
inset:0;
flex-direction:column;
align-items:center;
gap:14px;
padding:
calc(72px + 18px) 24px
28px
24px;
border-radius:0;
background:#0a0a0f;
border:none;
backdrop-filter:none;
transform:translate3d(100%,0,0);
pointer-events:none;
visibility:hidden;
opacity:0;
transition:transform 360ms var(--ease), opacity 240ms var(--ease), visibility 0s linear 360ms;
z-index:80;
}
body.demo-devcom-homehealth .nav .demo-all-demos-link--mobile{
display: inline-flex;
width: auto;
align-self: center;
justify-content: center;
margin: 0 auto 16px;
padding: 10px 20px;
}
.site-header.nav-open{
z-index: 10000;
}
.site-header.nav-open .nav{
transform: translate3d(0, 0, 0);
pointer-events: auto;
visibility: visible;
opacity: 1;
transition: transform 360ms var(--ease), opacity 240ms var(--ease), visibility 0s;
position: fixed;
height: 100%;
z-index: 9998;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100vh;
min-height: 100dvh;
background: #0a0a0f;
}
.menu-toggle[aria-expanded="true"] {
z-index: 9999;
}
.nav-link{
padding:16px 0;
border-radius:0;
background:transparent;
border:none;
font-size:26px; font-weight:600;
color:rgba(255,255,255,.92);
text-align:left;
}
.nav-link::after{content:none}
.nav-link:hover{color:#fff}
.header-inner{height:72px}
.hero-title{font-size:44px;line-height:52px;letter-spacing:-1px}
.hero-title__line{white-space:normal}
.hero-subtitle{font-size:20px;line-height:28px}
.h2{font-size:36px;line-height:44px}
.grid-2{grid-template-columns:1fr}
.comparison-head{ gap: 5px; grid-template-columns: 1fr 1fr 1fr;}
.comparison-head__cell{height:auto;font-size: 12px;border-radius: 10px;padding:10px}
.comparison-row{ gap: 5px; grid-template-columns: 1fr 1fr 1fr;}
.footer-grid{grid-template-columns:1fr}
.form-shell{padding:24px}
.field--row{grid-template-columns:1fr;gap:32px}
.comparison-card {
min-height: 60px;
border-radius: 10px;
padding: 10px 10px;
}
.comparison-feature {
font-size: 12px;
}
.comparison-text {
font-size: 12px;
line-height: 16px;
}
.comparison-grid {
gap: 5px;
}
}
@media (max-width: 560px){
.section--comparison .section-head,	
#benefits .section-head {
margin-bottom: 55px;
}
.comparison-bullet {
width: 12px;
height: 12px;
}
.comparison-bullet--adv {
width: 16px;
height: 17px;
}
.comparison-card {
padding: 8px 5px;
gap: 7px;
}
.comparison-text {
font-size: 10px;
}
.comparison-head__cell {
font-size: 10px;
}
.comparison-head {
grid-template-columns: 0.7fr 1fr 1fr;
}
.comparison-row {
grid-template-columns: 0.7fr 1fr 1fr;
}
.comparison-feature {
font-size: 9px;
}
.workflow-steps {
display: flex;
gap: 20px;
justify-content: flex-start;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 14px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(0, 211, 243, .80) rgba(255, 255, 255, .06);
flex-wrap: wrap;
justify-content: center;
}
.step {
position: relative;
width: 100%;
min-height: 377px;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.step-top {
width: 243.1875px;
margin-left: auto;
margin-right: auto;
}
.workflow-steps > .step {
flex: auto;
}
.step-card {
width: 280px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
}
@media (prefers-reduced-motion: reduce){
.mouse-dot,.arrow,.workflow-curve{animation:none !important}
.reveal-mask{clip-path:none}
.reveal-item{transform:none}
.step-badge::before,
.step-badge::after{animation:none !important}
.step-badge{transition:none}
}  .has-gsap .reveal-mask{
clip-path:none;
-webkit-clip-path:none;
overflow:visible;
}
.has-gsap .reveal-item{
transform:none;
opacity:1;
}
.has-gsap .js-reveal{
opacity:0;
clip-path:inset(0 0 24% 0);
-webkit-clip-path:inset(0 0 24% 0);
transform:translate3d(0, 24px, 0);
will-change:transform, opacity, clip-path;
}
@media (prefers-reduced-motion: reduce){
.has-gsap .js-reveal{
opacity:1;
clip-path:none;
-webkit-clip-path:none;
transform:none;
will-change:auto;
}
} .js-float-icon{
transform-origin:50% 50%;
will-change:transform;
}
@media (prefers-reduced-motion: reduce){
.js-float-icon{
will-change:auto;
}
}