.hapo-traffic-user-hero{position:relative;isolation:isolate;min-height:743px;overflow:hidden;background:linear-gradient(108deg,#1852d3 0%,#2165f2 74%,#2165f2 100%);color:#fff;font-family:Manrope,sans-serif}
.hapo-traffic-user-hero *{box-sizing:border-box}
.hapo-traffic-user-hero--full{left:50%;width:100vw;margin-left:-50vw}
.hapo-traffic-user-hero--container{width:100%}
.hapo-traffic-user-hero::before{position:absolute;inset:0 0 0 73.5%;z-index:-2;background:#0bce82;content:""}
.hapo-traffic-user-hero__shape{position:absolute;top:0;bottom:0;left:0;z-index:-1;width:916px;max-width:60%;background:url('../images/traffic-user-hero/background-shapes.svg') left top/916px 743px no-repeat;mix-blend-mode:multiply;opacity:.2;pointer-events:none}
.hapo-traffic-user-hero__inner{position:relative;width:min(1440px,calc(100% - 48px));min-height:743px;margin:auto;padding:119px 0 90px}
.hapo-traffic-user-hero__copy{position:relative;z-index:2;width:700px;max-width:51%}
.hapo-traffic-user-hero .hapo-traffic-user-hero__title{display:flex;flex-direction:column;margin:0;color:#fff;font-size:56px;font-weight:800;line-height:1.2;letter-spacing:-.03em}
.hapo-traffic-user-hero__title span{white-space:nowrap}
.hapo-traffic-user-hero__title em{color:#3ee46e;font-style:normal}
.hapo-traffic-user-hero .hapo-traffic-user-hero__description{margin:19px 0 0;color:#fff;font-size:18px;font-weight:500;line-height:1.5}
.hapo-traffic-user-hero__form-card{margin-top:17px;padding:24px;border-radius:12px;background:rgba(156,191,255,.45)}
.hapo-traffic-user-hero__badge{display:inline-block;padding:5px 13px;border-radius:999px;background:#fff;color:#0953bf;font-size:12px;font-weight:800;line-height:1.1;letter-spacing:.04em}
.hapo-traffic-user-hero__form-card form{margin:0}
.hapo-traffic-user-hero__form-card label{display:block;margin:14px 0;color:#fff;font-size:18px;font-weight:700;line-height:1.3}
.hapo-traffic-user-hero__form-row{display:flex;gap:8px}
.hapo-traffic-user-hero .hapo-traffic-user-hero__form-card .hapo-traffic-user-hero__form-row input[type="url"]{min-width:0;height:46px;min-height:46px;flex:1;margin:0;padding:10px 15px;border:2px solid #d8dce8;border-radius:7px;background:#fff;box-shadow:none;color:#12233f;font-family:Manrope,sans-serif;font-size:14px;line-height:22px}
.hapo-traffic-user-hero__form-row input::placeholder{color:#8293a4;opacity:1}
.hapo-traffic-user-hero__form-row input:focus-visible{outline:3px solid #4ae77e;outline-offset:2px}
.hapo-traffic-user-hero .hapo-traffic-user-hero__submit{min-width:148px;min-height:46px;gap:12px;margin:0;padding:10px 22px;border-radius:8px;background:#49e780;color:#0d1724;font-size:16px;font-weight:700;line-height:1.2;text-transform:none}
.hapo-traffic-user-hero .hapo-traffic-user-hero__submit:hover,.hapo-traffic-user-hero .hapo-traffic-user-hero__submit:focus-visible{color:#0d1724}
.hapo-traffic-user-hero .hapo-traffic-user-hero__submit:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hapo-traffic-user-hero__submit svg{width:20px;height:20px;flex:none}
.hapo-traffic-user-hero__notes{margin:14px 0 0;padding:0;list-style:none}
.hapo-traffic-user-hero__notes li{display:flex;align-items:flex-start;gap:8px;margin:0 0 5px!important;color:#fff;font-size:15px;font-weight:500;line-height:1.4;list-style:none}
.hapo-traffic-user-hero__notes svg{width:18px;height:18px;flex:none;margin-top:1px;color:#0ce578}
.hapo-traffic-user-hero__art{position:absolute;top:105px;right:-140px;z-index:1;width:812px;pointer-events:none;animation:hapo-traffic-art-float 7s ease-in-out infinite}
.hapo-traffic-user-hero__image{display:block;width:100%;height:auto}
.hapo-traffic-user-hero__motion{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hapo-traffic-user-hero__motion path{fill:none;stroke:#77f7b7;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;filter:drop-shadow(0 0 5px #31e983);animation:hapo-traffic-signal 6s ease-in-out infinite}
.hapo-traffic-user-hero__submit svg{transition:transform .3s ease}
.hapo-traffic-user-hero__submit:hover svg,.hapo-traffic-user-hero__submit:focus-visible svg{transform:translateX(4px)}
.hapo-traffic-user-hero__form-card{transition:box-shadow .35s ease,background-color .35s ease}
.hapo-traffic-user-hero__form-card:focus-within{background:rgba(156,191,255,.52);box-shadow:0 0 0 1px rgba(120,255,180,.65),0 12px 36px rgba(9,37,130,.16)}
@keyframes hapo-traffic-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hapo-traffic-signal{0%,15%{stroke-dashoffset:70;opacity:0}28%,65%{stroke-dashoffset:0;opacity:.9}78%,100%{stroke-dashoffset:-70;opacity:0}}
@media(max-width:1400px){.hapo-traffic-user-hero__copy{max-width:55%}.hapo-traffic-user-hero .hapo-traffic-user-hero__title{font-size:clamp(40px,4vw,56px)}.hapo-traffic-user-hero__art{right:-220px;width:58%}}
@media(max-width:900px){.hapo-traffic-user-hero__inner{min-height:0;padding:88px 0 70px}.hapo-traffic-user-hero__copy{width:100%;max-width:64%}.hapo-traffic-user-hero__art{top:190px;right:-110px;width:56%}.hapo-traffic-user-hero .hapo-traffic-user-hero__title{font-size:40px}.hapo-traffic-user-hero__title span{white-space:normal}.hapo-traffic-user-hero .hapo-traffic-user-hero__description{font-size:16px}}
@media(max-width:700px){.hapo-traffic-user-hero::before{inset:auto 0 0;height:28%;background:#0bce82}.hapo-traffic-user-hero__shape{max-width:100%;background-size:cover}.hapo-traffic-user-hero__inner{width:calc(100% - 36px);padding:70px 0 40px}.hapo-traffic-user-hero__copy{max-width:none}.hapo-traffic-user-hero .hapo-traffic-user-hero__title{font-size:clamp(34px,9vw,44px);line-height:1.16}.hapo-traffic-user-hero .hapo-traffic-user-hero__description{margin-top:20px;font-size:14px}.hapo-traffic-user-hero__form-card{margin-top:24px;padding:18px}.hapo-traffic-user-hero__form-card label{font-size:15px}.hapo-traffic-user-hero__form-row{flex-direction:column}.hapo-traffic-user-hero__form-row input{width:100%;flex:none}.hapo-traffic-user-hero .hapo-traffic-user-hero__submit{width:100%;min-height:46px}.hapo-traffic-user-hero__notes li{font-size:13px}.hapo-traffic-user-hero__art{position:relative;top:auto;right:auto;width:min(100%,540px);margin:18px auto 0}}
@media(prefers-reduced-motion:reduce){.hapo-traffic-user-hero .hapo-button,.hapo-traffic-user-hero__form-card,.hapo-traffic-user-hero__submit svg{transition:none}.hapo-traffic-user-hero__art,.hapo-traffic-user-hero__motion path{animation:none}.hapo-traffic-user-hero__motion path{stroke-dashoffset:0;opacity:.55}}

/* Mobile reference correction — 2026-10-20 (Traffic user.jpg, 391×25415, 375px content). Measured from the supplied mobile frame; local values, not shared tokens. */
@media(max-width:700px){
.hapo-traffic-user-hero::before{inset:0 0 auto;height:196px}
.hapo-traffic-user-hero__inner{display:flex;flex-direction:column;width:calc(100% - 32px);padding:24px 0 48px}
.hapo-traffic-user-hero__art{order:-1;width:min(100%,320px);margin:0 auto 28px}
.hapo-traffic-user-hero .hapo-traffic-user-hero__title{font-size:clamp(30px,8.6vw,34px)}
.hapo-traffic-user-hero .hapo-traffic-user-hero__description{margin-top:16px;font-size:16px;line-height:1.3}
}