@property --hapo-maps-border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.hapo-google-maps-ecosystem{position:relative;isolation:isolate;box-sizing:border-box;width:100%;overflow:hidden;background:#fff;color:#09090b;font-family:Manrope,sans-serif}
.hapo-google-maps-ecosystem *{box-sizing:border-box}
.hapo-google-maps-ecosystem--width-full{left:50%;width:100vw;margin-left:-50vw}
.hapo-google-maps-ecosystem__inner{width:min(1440px,100%);margin:auto;padding:80px 24px 100px}
.hapo-google-maps-ecosystem__header{text-align:center}
.hapo-google-maps-ecosystem__eyebrow{display:inline-flex;align-items:center;justify-content:center;min-width:318px;min-height:44px;margin:0 0 23px;padding:5px 24px;border-radius:999px;background:#dff9e6;color:#00bd4f;font-size:20px;font-weight:800;line-height:1.35}
.hapo-google-maps-ecosystem__heading{display:flex;flex-direction:column;align-items:center;gap:11px;margin:0;color:#09090b;font-size:38px;font-weight:800;line-height:1.25;letter-spacing:-1.2px}
.hapo-google-maps-ecosystem__heading-second{font-size:68px;line-height:1.13;letter-spacing:-1.8px}
.hapo-google-maps-ecosystem__letter--green{color:#00c14a}.hapo-google-maps-ecosystem__letter--yellow{color:#febc05}.hapo-google-maps-ecosystem__letter--red{color:#fd3727}
.hapo-google-maps-ecosystem__heading-suffix{color:#777}
.hapo-google-maps-ecosystem__description{max-width:1360px;margin:17px auto 0;color:#747474;font-size:18px;font-weight:500;line-height:1.33}
.hapo-google-maps-ecosystem__stage{position:relative;width:min(1020px,100%);height:720px;margin:68px auto 0}
.hapo-google-maps-ecosystem__orbit{position:absolute;top:206px;left:50%;width:821px;height:390px;transform:translateX(-50%);pointer-events:none}
.hapo-google-maps-ecosystem__orbit-svg{display:block;width:100%;height:100%}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__orbit-svg path{animation:hapo-maps-dash-flow 12s linear infinite}
.hapo-google-maps-ecosystem__center{position:absolute;z-index:2;top:0;left:50%;width:364px;height:364px;transform:translateX(-50%);pointer-events:none}
.hapo-google-maps-ecosystem__center-svg{display:block;width:100%;height:100%;overflow:visible}
.hapo-google-maps-ecosystem__center-svg>circle:nth-of-type(2){opacity:.13}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__center-svg{animation:hapo-maps-center-breathe 8s ease-in-out infinite;transform-origin:center}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__center-svg path[stroke]{animation:hapo-maps-center-draw 8s ease-in-out infinite}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__center-svg>path[fill]{animation:hapo-maps-center-letter 8s ease-in-out infinite}
.hapo-google-maps-ecosystem__connectors{position:absolute;inset:0;pointer-events:none}
.hapo-google-maps-ecosystem__connectors span{position:absolute;z-index:0;height:1px;background:repeating-linear-gradient(90deg,#1cca67 0 4px,transparent 4px 8px);opacity:.7}
.hapo-google-maps-ecosystem__connectors span:nth-child(1){top:130px;left:272px;width:75px}
.hapo-google-maps-ecosystem__connectors span:nth-child(2){top:130px;right:272px;width:75px;background-image:repeating-linear-gradient(90deg,#febc05 0 4px,transparent 4px 8px)}
.hapo-google-maps-ecosystem__connectors span:nth-child(3){top:348px;left:265px;width:125px;transform:rotate(-43deg);background-image:repeating-linear-gradient(90deg,#3788fe 0 4px,transparent 4px 8px)}
.hapo-google-maps-ecosystem__connectors span:nth-child(4){top:348px;right:265px;width:125px;transform:rotate(43deg)}
.hapo-google-maps-ecosystem__connectors span:nth-child(5){top:390px;left:50%;width:80px;transform:translateX(-50%) rotate(90deg);background-image:repeating-linear-gradient(90deg,#fd3727 0 4px,transparent 4px 8px)}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__connectors span{animation:hapo-maps-connector-flow 4s linear infinite}
.hapo-google-maps-ecosystem__items{position:absolute;z-index:3;inset:0;margin:0;padding:0;list-style:none;counter-reset:hapo-maps-item}
.hapo-google-maps-ecosystem__item{--hapo-maps-accent:#00c14a;position:absolute;width:273px;min-height:226px;counter-increment:hapo-maps-item}
.hapo-google-maps-ecosystem__item:nth-child(1){top:-10px;left:0}
.hapo-google-maps-ecosystem__item:nth-child(2){top:260px;left:0;--hapo-maps-accent:#3788fe}
.hapo-google-maps-ecosystem__item:nth-child(3){top:408px;left:50%;--hapo-maps-accent:#fd3727;transform:translateX(-50%)}
.hapo-google-maps-ecosystem__item:nth-child(4){top:260px;right:0;--hapo-maps-accent:#00c14a}
.hapo-google-maps-ecosystem__item:nth-child(5){top:-10px;right:0;--hapo-maps-accent:#febc05}
.hapo-google-maps-ecosystem__pin{position:absolute;z-index:4;top:0;left:50%;display:block;width:77px;height:77px;background:center/contain no-repeat url('../images/hapo-google-maps-ecosystem/tdesign_location-filled.svg');transform:translateX(-50%)}
.hapo-google-maps-ecosystem__pin:after{position:absolute;inset:0;content:""}
.hapo-google-maps-ecosystem__item:nth-child(2) .hapo-google-maps-ecosystem__pin{background-image:url('../images/hapo-google-maps-ecosystem/tdesign_location-filled-2.svg')}
.hapo-google-maps-ecosystem__item:nth-child(3) .hapo-google-maps-ecosystem__pin{background-image:url('../images/hapo-google-maps-ecosystem/tdesign_location-filled-4.svg')}
.hapo-google-maps-ecosystem__item:nth-child(4) .hapo-google-maps-ecosystem__pin{background-image:url('../images/hapo-google-maps-ecosystem/tdesign_location-filled-3.svg')}
.hapo-google-maps-ecosystem__item:nth-child(5) .hapo-google-maps-ecosystem__pin{background-image:url('../images/hapo-google-maps-ecosystem/tdesign_location-filled-1.svg')}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__pin{animation:hapo-maps-pin-render .9s cubic-bezier(.2,.8,.2,1) both}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__item:nth-child(2) .hapo-google-maps-ecosystem__pin{animation-delay:.15s}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__item:nth-child(3) .hapo-google-maps-ecosystem__pin{animation-delay:.3s}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__item:nth-child(4) .hapo-google-maps-ecosystem__pin{animation-delay:.45s}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__item:nth-child(5) .hapo-google-maps-ecosystem__pin{animation-delay:.6s}
.hapo-google-maps-ecosystem__card{position:relative;min-height:190px;margin-top:37px;padding:45px 23px 24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--hapo-maps-accent) 40%,#fff);border-radius:12px;background:#fff;box-shadow:0 10px 30px color-mix(in srgb,var(--hapo-maps-accent) 13%,transparent);text-align:center}
.hapo-google-maps-ecosystem__card-border{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
.hapo-google-maps-ecosystem.is-active .hapo-google-maps-ecosystem__card-border{padding:2px;background:conic-gradient(from var(--hapo-maps-border-angle),transparent 0 68%,var(--hapo-maps-accent) 82%,#fff 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:hapo-maps-border-run 5s linear infinite}
.hapo-google-maps-ecosystem__card h3{position:relative;margin:0;color:#09090b;font-size:18px;font-weight:800;line-height:1.24}
.hapo-google-maps-ecosystem__card-rule{display:block;width:66px;height:2px;margin:16px auto;background:var(--hapo-maps-accent)}
.hapo-google-maps-ecosystem__card p{position:relative;margin:0;color:#181818;font-size:14px;font-weight:500;line-height:1.4}
.hapo-google-maps-ecosystem__empty{position:absolute;top:400px;left:50%;transform:translateX(-50%);color:#777}
@keyframes hapo-maps-border-run{to{--hapo-maps-border-angle:360deg}}
@keyframes hapo-maps-dash-flow{to{stroke-dashoffset:-96}}
@keyframes hapo-maps-connector-flow{to{background-position:32px 0}}
@keyframes hapo-maps-center-draw{0%,9%{stroke-dasharray:1200;stroke-dashoffset:1200}48%,86%{stroke-dasharray:1200;stroke-dashoffset:0}100%{stroke-dasharray:1200;stroke-dashoffset:1200}}
@keyframes hapo-maps-center-letter{0%,16%{opacity:0;clip-path:inset(0 100% 0 0)}42%,87%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes hapo-maps-center-breathe{0%,100%{transform:scale(.985)}55%,80%{transform:scale(1.015)}}
@keyframes hapo-maps-pin-render{from{opacity:0;clip-path:inset(100% 0 0);transform:translateX(-50%) translateY(10px)}to{opacity:1;clip-path:inset(0);transform:translateX(-50%) translateY(0)}}
@media(min-width:1101px){.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)){height:auto;min-height:0}.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)) .hapo-google-maps-ecosystem__orbit,.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)) .hapo-google-maps-ecosystem__connectors{display:none}.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)) .hapo-google-maps-ecosystem__center{position:relative;top:auto;left:auto;margin:0 auto 40px;transform:none}.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)) .hapo-google-maps-ecosystem__items{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;inset:auto}.hapo-google-maps-ecosystem__stage:not(:has(.hapo-google-maps-ecosystem__item:nth-child(5):last-child)) .hapo-google-maps-ecosystem__item:nth-child(n){position:relative;top:auto;right:auto;left:auto;width:100%;min-height:0;transform:none}}
@media(max-width:1100px){.hapo-google-maps-ecosystem__inner{padding-top:64px}.hapo-google-maps-ecosystem__heading{font-size:clamp(28px,3.6vw,38px)}.hapo-google-maps-ecosystem__heading-second{font-size:clamp(42px,6vw,66px)}.hapo-google-maps-ecosystem__stage{height:auto;min-height:0;margin-top:48px}.hapo-google-maps-ecosystem__orbit,.hapo-google-maps-ecosystem__connectors{display:none}.hapo-google-maps-ecosystem__center{position:relative;top:auto;left:auto;margin:0 auto 40px;transform:none}.hapo-google-maps-ecosystem__items{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;inset:auto}.hapo-google-maps-ecosystem__item,.hapo-google-maps-ecosystem__item:nth-child(n){position:relative;top:auto;right:auto;left:auto;width:100%;min-height:0;transform:none}.hapo-google-maps-ecosystem__card{min-height:190px}.hapo-google-maps-ecosystem__empty{position:static;transform:none}}
@media(max-width:660px){.hapo-google-maps-ecosystem__inner{padding:46px 20px 70px}.hapo-google-maps-ecosystem__eyebrow{min-width:0;min-height:36px;margin-bottom:18px;font-size:14px}.hapo-google-maps-ecosystem__heading{gap:10px;font-size:clamp(25px,6.6vw,36px);letter-spacing:-.5px}.hapo-google-maps-ecosystem__heading-second{font-size:clamp(35px,9vw,52px);line-height:1.12}.hapo-google-maps-ecosystem__heading-suffix{display:block}.hapo-google-maps-ecosystem__description{font-size:15px;line-height:1.5}.hapo-google-maps-ecosystem__stage{margin-top:32px}.hapo-google-maps-ecosystem__center{width:min(290px,84vw);height:auto;margin-bottom:24px}.hapo-google-maps-ecosystem__items{grid-template-columns:1fr;gap:14px}.hapo-google-maps-ecosystem__item:nth-child(n){min-height:0}.hapo-google-maps-ecosystem__card{min-height:165px;padding:43px 24px 22px}}
@media(prefers-reduced-motion:reduce){.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__orbit-svg path,.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__center-svg,.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__center-svg path,.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__connectors span,.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__pin,.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__card-border{animation:none!important;clip-path:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none}.hapo-google-maps-ecosystem .hapo-google-maps-ecosystem__pin{transform:translateX(-50%)}}