
.hy-call-art{flex:1;min-height:0;display:grid;place-items:center;position:relative;padding:9px 0}
.hy-wave{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;max-height:90px}
.hy-wave i{display:block;border-radius:4px;width:4px;height:22%;background:var(--cyan);opacity:.65;transform-origin:center}
.hy-wave i:nth-child(3n){height:72%}.hy-wave i:nth-child(4n){height:96%}.hy-wave i:nth-child(5n){height:54%}.hy-wave i:nth-child(2n+1){height:42%}
.hy-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#3762c4dd;border:1px solid #eaf1fc5c;box-shadow:0 4px 16px #18243820;backdrop-filter:blur(6px)}
.hy-phone svg{width:29px;height:29px;stroke:#fff;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.hy-chat{--tilt:7deg;right:0;top:51%;width:43%;height:40%;background:linear-gradient(145deg,#fff,var(--blue-wash));z-index:4}
.hy-chat-art{position:relative;flex:1;min-height:0;max-width:160px;width:90%;align-self:center}
.hy-bubble{position:absolute;border-radius:16px;width:76%;height:59%;min-height:40px;box-shadow:0 5px 14px #18243808}
.hy-bubble:after{content:"";position:absolute;width:14px;height:14px;bottom:-5px;left:15px;background:inherit;transform:skewY(-28deg);border-radius:0 0 3px 0}
.hy-bubble-back{top:0;left:0;background:var(--blue-soft);padding:15px}
.hy-bubble-back span{display:block;height:4px;border-radius:4px;width:69%;background:#4573de90}.hy-bubble-back span+span{margin-top:7px;width:46%}
.hy-bubble-front{right:0;bottom:0;background:var(--blue-strong);display:flex;gap:8px;align-items:center;justify-content:center}
.hy-bubble-front:after{left:auto;right:15px;transform:skewY(28deg)}
.hy-bubble-front i{width:6px;height:6px;border-radius:50%;background:white}
@media(hover:hover) and (pointer:fine){.hy-card:hover{z-index:8;transform:rotate(0) translateY(-8px) scale(1.07);box-shadow:0 28px 45px -20px #18243880}.hy-scene:has(.hy-card:hover) .hy-card:not(:hover){filter:saturate(.85)}.hy-card:hover .ddc-arrow{transform:translate(2px,-2px)}}
.ddc-motion .hy-copy{animation:hy-arrive .85s var(--ease) both}
.ddc-motion .hy-card{animation:hy-card-arrive 1s var(--ease) both}.ddc-motion .hy-web{animation-delay:.12s}.ddc-motion .hy-call{animation-delay:.25s}.ddc-motion .hy-chat{animation-delay:.38s}
.ddc-motion .hy-web-mark{animation:hy-mark-float 5s ease-in-out infinite}.ddc-motion .hy-web-pointer{animation:hy-pointer 6s ease-in-out infinite}
.ddc-motion .hy-wave i{animation:hy-wave 1.7s ease-in-out infinite alternate}.ddc-motion .hy-wave i:nth-child(3n){animation-delay:-.9s}.ddc-motion .hy-wave i:nth-child(4n){animation-delay:-.4s}.ddc-motion .hy-wave i:nth-child(5n){animation-delay:-1.3s}
.ddc-motion .hy-bubble-front i{animation:hy-dot 2.4s ease-in-out infinite}.ddc-motion .hy-bubble-front i:nth-child(2){animation-delay:.15s}.ddc-motion .hy-bubble-front i:nth-child(3){animation-delay:.3s}
@keyframes hy-arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes hy-card-arrive{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes hy-mark-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes hy-pointer{0%,100%{translate:0 0}50%{translate:8px -6px}}
@keyframes hy-wave{from{scale:1 .45}to{scale:1 1}}
@keyframes hy-dot{0%,35%,100%{translate:0 0;opacity:.55}17%{translate:0 -4px;opacity:1}}
@media(min-width:1600px){.hy-scene{max-width:760px}.hy-hero{padding-top:66px;padding-bottom:76px}.hy-intro{font-size:15px;max-width:420px}}
@media(max-width:1100px){.hy-hero{padding-top:45px;padding-bottom:54px}.hy-grid{grid-template-columns:45% 55%}.hy-copy{padding-right:15px}.hy-copy h1{font-size:7.4vw}.hy-eyebrow{font-size:8px;margin-bottom:25px}.hy-intro{font-size:13px;max-width:330px}.hy-actions{gap:20px}.hy-actions .ddc-pill{font-size:11px;padding:16px 18px;gap:18px}.hy-actions .ddc-link{font-size:11px;gap:15px}.hy-scene{aspect-ratio:.97}.hy-card{padding:18px;border-radius:14px}.hy-web{padding:15px 20px 18px}.hy-card-caption h2{font-size:20px}.hy-web .hy-card-caption h2{font-size:22px}.hy-card-caption p{font-size:11px}.hy-call{width:47%}.hy-chat{width:44%}.hy-phone{width:52px;height:52px}.hy-phone svg{width:25px}.hy-wave{gap:4px}.hy-wave i{width:3px}.hy-bubble-front{gap:6px}.hy-bubble-front i{width:5px;height:5px}.hy-layout-lines>i{height:7px}.hy-layout-lines>b{height:12px}}
@media(max-width:800px){.hy-hero{padding-top:36px;padding-bottom:46px}.hy-grid{grid-template-columns:1fr}.hy-copy{padding-right:0;max-width:610px}.hy-copy h1{font-size:clamp(72px,11.5vw,92px)}.hy-eyebrow{font-size:9px}.hy-intro{font-size:14px;max-width:420px;margin-top:24px}.hy-actions{gap:25px;margin-top:24px}.hy-proof{margin-top:25px}.hy-scene{width:min(100%,610px);aspect-ratio:1.16;justify-self:center;margin-top:35px}.hy-web{left:6%;width:85%}.hy-card-caption h2{font-size:22px}.hy-web .hy-card-caption h2{font-size:25px}.hy-card-caption p{font-size:12px}.hy-call{left:5%;width:43%;top:55%;height:43%}.hy-chat{right:1%;width:43%}.hy-card{padding:21px}.hy-web{padding:16px 23px 20px}.hy-phone{width:58px;height:58px}.hy-chat-art{width:80%}}
@media(max-width:560px){.hy-hero{padding-top:31px;padding-bottom:32px}.hy-copy h1{font-size:clamp(58px,15.9vw,86px);letter-spacing:-.07em;line-height:1.02}.hy-eyebrow{font-size:8px;letter-spacing:.07em;margin-bottom:24px}.hy-intro{font-size:13px;line-height:1.8;max-width:350px;margin-top:22px}.hy-actions{gap:20px;flex-wrap:nowrap}.hy-actions .ddc-pill{font-size:10px;gap:14px;padding:16px 17px}.hy-actions .ddc-link{font-size:10px;gap:12px}.hy-actions .ddc-arrow{width:16px;height:16px;flex-basis:16px}.hy-proof{margin-top:23px;gap:12px}.hy-proof p{font-size:9px}.hy-proof .ddc-client-avatars img{width:33px;height:33px}.hy-proof>.ddc-arrow{margin-left:0;width:13px;height:13px;flex-basis:13px}.hy-scene{margin-top:32px;aspect-ratio:.96}.hy-card{padding:16px;border-radius:13px}.hy-web{--tilt:-4deg;top:4%;left:5%;width:88%;height:48%;padding:12px 19px 15px}.hy-browser-bar{height:17px;padding-bottom:10px}.hy-card-caption{padding-top:12px;gap:5px}.hy-card-caption h2{font-size:17px;letter-spacing:-.045em}.hy-card-caption p{font-size:10px;line-height:1.5;margin-top:4px}.hy-card-caption>.ddc-arrow{width:14px;height:14px;flex-basis:14px}.hy-web .hy-card-caption h2{font-size:21px}.hy-web .hy-card-caption p{font-size:11px}.hy-web-art{padding:8px 4% 0}.hy-web-mark{max-height:80px}.hy-layout-lines>i{height:6px}.hy-layout-lines>i:nth-child(2){margin-top:6px}.hy-layout-lines>i:nth-child(3){margin-top:9px;height:3px}.hy-layout-lines>b{height:11px;margin-top:9px}.hy-web-pointer{width:21px;height:27px;left:43%}.hy-call{--tilt:-5deg;left:3%;top:56%;width:45%;height:40%}.hy-chat{--tilt:6deg;right:1%;top:54%;width:44%;height:38%}.hy-call-art{padding:2px 0}.hy-phone{width:46px;height:46px}.hy-phone svg{width:22px;height:22px}.hy-wave{gap:3px;max-height:62px}.hy-wave i{width:3px}.hy-chat-art{width:100%;max-width:120px}.hy-bubble{border-radius:11px;min-height:32px}.hy-bubble-back{padding:11px}.hy-bubble-back span{height:3px}.hy-bubble-back span+span{margin-top:5px}.hy-bubble-front{gap:6px}.hy-bubble-front i{width:5px;height:5px}.hy-bubble:after{width:10px;height:10px;bottom:-3px;left:12px}.hy-bubble-front:after{left:auto;right:12px}.hy-pixel-one{width:15px;height:15px;left:0}.hy-pixel-three{width:10px;height:10px}.hy-card:focus-visible{transform:rotate(0) scale(1.03)}}
@media(max-width:370px){.hy-actions{gap:14px}.hy-actions .ddc-pill{padding:15px 14px;gap:9px}.hy-actions .ddc-link{gap:8px}.hy-card{padding:13px}.hy-web{padding:12px 17px 15px}.hy-card-caption p{font-size:9px}.hy-card-caption h2{font-size:16px}}
.ddc-motion-paused .hy-copy,.ddc-motion-paused .hy-card,.ddc-motion-paused .hy-web-mark,.ddc-motion-paused .hy-web-pointer,.ddc-motion-paused .hy-wave i,.ddc-motion-paused .hy-bubble-front i{animation:none!important}
.ddc-motion-paused .hy-scene{transform:none!important}
@media(prefers-reduced-motion:reduce){.hy-scene{transform:none!important}.hy-copy,.hy-card,.hy-web-mark,.hy-web-pointer,.hy-wave i,.hy-bubble-front i{animation:none!important}}


/* Personal headlines, clear service labels: two useful layers per card. */
.hy-card-caption{align-items:flex-end;gap:14px}
.hy-card-caption>div{min-width:0}
.hy-card-caption h2{text-wrap:balance}
.hy-call .hy-card-caption,.hy-chat .hy-card-caption{display:block}
.hy-call .hy-card-caption>.ddc-arrow,.hy-chat .hy-card-caption>.ddc-arrow{position:absolute;right:20px;top:20px;width:17px;height:17px;opacity:.65}
.hy-card-caption h2{font-size:clamp(22px,1.85vw,28px);line-height:1.18;letter-spacing:-.04em;font-weight:600;margin:8px 0 0}
.hy-web .hy-card-caption h2{font-size:clamp(24px,2.05vw,31px)}
.hy-card-caption p{font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin:0;color:var(--muted)}