/* hero-x1 (2026-11-03): immersive conversion hero */
.hx{position:relative;overflow:hidden;isolation:isolate;padding:28px 0 36px;background:#0D1117}
.hxbg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hxa{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hxa.a1{width:560px;height:560px;right:-120px;top:-160px;background:radial-gradient(closest-side,rgba(28,166,56,.55),transparent)}
.hxa.a2{width:460px;height:460px;left:-160px;bottom:-200px;background:radial-gradient(closest-side,rgba(20,140,120,.35),transparent)}
.hxa.a3{width:380px;height:380px;left:38%;top:20%;background:radial-gradient(closest-side,rgba(63,212,106,.18),transparent)}
.hxgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 75%)}
.hxw{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v" "tr" "d";row-gap:20px}
.hxt{grid-area:t;min-width:0}
.hxh{margin:14px 0 12px;font:800 clamp(34px,9vw,44px)/1.08 var(--ef-font-family-display,Montserrat,sans-serif);letter-spacing:-.02em;color:#F0F6FC;text-wrap:balance}
.hxs{background:linear-gradient(100deg,#1CA638 0%,#3FD46A 30%,#B9F5C9 50%,#3FD46A 70%,#1CA638 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px rgba(28,166,56,.35))}
.hxl{margin:0 0 22px;color:var(--ef-color-text-2,#ADBAC7);font-size:18px;line-height:28px;max-width:520px}
.hxcta{display:flex;flex-direction:column;gap:12px}
.hxpri{position:relative;overflow:hidden;justify-content:center;min-height:56px!important;padding:0 30px!important;font-size:17px!important;font-weight:700!important;border-radius:14px!important;box-shadow:0 0 0 1px rgba(63,212,106,.5),0 10px 30px rgba(28,166,56,.45),0 0 60px rgba(28,166,56,.35);transition:transform .2s,box-shadow .2s}
.hxpri:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.hxpri:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(63,212,106,.7),0 14px 40px rgba(28,166,56,.6),0 0 80px rgba(28,166,56,.45)}
.hxpri:hover:after{left:130%;transition:left .7s ease}
.hxpri .ic{transition:transform .2s}.hxpri:hover .ic{transform:translateX(4px)}
.hxgh{justify-content:center;min-height:56px!important;border-radius:14px!important;background:rgba(22,27,34,.55)!important;border:1px solid #30363D!important;color:#F0F6FC!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hxgh:hover{border-color:#3FD46A!important}
.hxnote{display:flex;align-items:center;gap:6px;margin:14px 0 0;color:var(--ef-color-text-2,#ADBAC7);font-size:14px}
.hxnote .ic{width:16px;height:16px;color:#3FD46A}
.hxv{grid-area:v;position:relative;min-width:0;margin:8px -16px 0}
.hxglow{position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(28,166,56,.45),transparent 75%);filter:blur(30px);z-index:-1}
.hxph{position:relative;aspect-ratio:16/9;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 62%,transparent 100%)}
.hxkb,.hxkb picture,.hxkb img{display:block;width:100%;height:100%}
.hxkb img{object-fit:cover;transform-origin:45% 45%}
.hxc{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(22,27,34,.72);border:1px solid rgba(240,246,252,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.hxc .ico{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(28,166,56,.16);color:#3FD46A;flex:none}
.hxc .ico svg{width:18px;height:18px}
.hxc b{display:block;color:#F0F6FC;font:700 14px/20px var(--ef-font-family-body,Inter,sans-serif);white-space:nowrap}
.hxc .syn{display:block;color:#8B949E;font-size:12px;line-height:16px;opacity:1!important;white-space:nowrap}
.hxc.c1{right:4px;top:-6px}.hxc.c1 b{color:#3FD46A}
.hxc.c2{left:4px;bottom:6px}
.hxc.c3{display:none}
.hxsp{display:none}
.hxlive{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:#3FD46A;box-shadow:0 0 0 2px #161B22}
.hxlive:after{content:"";position:absolute;inset:0;border-radius:50%;background:#3FD46A}
.hxtag{position:static!important;display:flex;width:max-content;margin:4px 8px 0 auto;height:22px}
.hxtrust{grid-area:tr;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid #30363D}
.hxtrust .sep{display:none}
.hxtrust li{display:flex;align-items:center;gap:8px;color:var(--ef-color-text-2,#ADBAC7);font-size:14px;line-height:20px}
.hxtrust .ic{width:16px;height:16px;color:#3FD46A;flex:none}
.hxdis{grid-area:d;margin:0;color:#6E7681;font-size:12px;line-height:18px}
@media (min-width:600px){.hxcta{flex-direction:row;flex-wrap:wrap}.hxpri{min-width:220px}.hxgh{min-width:140px}}
@media (min-width:1024px){
 .hx{padding:56px 0 48px;min-height:640px}
 .hxw{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"t v" "tr v" "d d";column-gap:24px;row-gap:0;align-items:center}
 .hxt{align-self:end;position:relative;z-index:3}
 .hxh{font-size:clamp(44px,4.4vw,64px);margin:18px 0 18px}
 .hxh .l1{display:block}
 .hxl{font-size:19px;margin-bottom:30px}
 .hxtrust{align-self:start;margin-top:28px;max-width:520px;gap:12px 24px}
 .hxv{margin:0 -96px 0 -40px}
 .hxph{-webkit-mask-image:radial-gradient(ellipse 66% 64% at 54% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 66% 64% at 54% 50%,#000 58%,transparent 100%)}
 .hxc{padding:12px 14px}
 .hxc.c1{right:12%;top:6%;flex-wrap:wrap;width:200px}
 .hxsp{display:block;width:100%;height:34px;margin-top:2px}
 .hxc.c2{left:10%;bottom:10%}
 .hxc.c3{display:flex;left:4%;top:34%}.hxc.c3 .ico{background:rgba(139,148,158,.14);color:#ADBAC7}
 .hxtag{margin:-28px 12% 0 auto;position:relative!important;z-index:2}
 .hxdis{text-align:right;margin-top:16px}
}
@media (prefers-reduced-motion:no-preference){
 .hxa.a1{animation:hxa1 16s ease-in-out infinite alternate}
 .hxa.a2{animation:hxa2 19s ease-in-out infinite alternate}
 .hxa.a3{animation:hxa3 13s ease-in-out infinite alternate}
 .hxs{animation:hxsh 4.5s linear infinite}
 .hxpri:after{animation:hxshine 5s ease-in-out 1.5s infinite}
 .hxpri{animation:hxpulse 3.2s ease-in-out infinite}
 .hxkb img{animation:hxkb 22s ease-in-out infinite alternate}
 .hxc.c1{animation:hxf 6s ease-in-out infinite}
 .hxc.c2{animation:hxf 7s ease-in-out -2s infinite}
 .hxc.c3{animation:hxf 8s ease-in-out -4s infinite}
 .hxlive:after{animation:hxping 1.8s cubic-bezier(0,0,.2,1) infinite}
 .hxspl{stroke-dasharray:200;stroke-dashoffset:200;animation:hxdraw 1.6s ease-out .4s forwards}
 .hxspa{opacity:0;animation:hxfade 1s ease-out 1.2s forwards}
 .hxt>*{animation:hxup .7s cubic-bezier(.2,.7,.2,1) both}
 .hxt>:nth-child(2){animation-delay:.08s}.hxt>:nth-child(3){animation-delay:.16s}.hxt>:nth-child(4){animation-delay:.24s}.hxt>:nth-child(5){animation-delay:.32s}
}
@keyframes hxa1{to{transform:translate(-80px,60px) scale(1.15)}}
@keyframes hxa2{to{transform:translate(90px,-50px) scale(1.2)}}
@keyframes hxa3{to{transform:translate(-60px,40px) scale(.85)}}
@keyframes hxsh{from{background-position:200% 0}to{background-position:-20% 0}}
@keyframes hxshine{0%,70%{left:-60%}100%{left:130%}}
@keyframes hxpulse{0%,100%{box-shadow:0 0 0 1px rgba(63,212,106,.5),0 10px 30px rgba(28,166,56,.4),0 0 40px rgba(28,166,56,.25)}50%{box-shadow:0 0 0 1px rgba(63,212,106,.7),0 12px 36px rgba(28,166,56,.55),0 0 70px rgba(28,166,56,.45)}}
@keyframes hxkb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
@keyframes hxf{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hxping{75%,100%{transform:scale(2.4);opacity:0}}
@keyframes hxdraw{to{stroke-dashoffset:0}}
@keyframes hxfade{to{opacity:1}}
@keyframes hxup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* hero-y1 (2026-11-03): office photo — larger bleeding photo, edge fades on left/bottom only, cards kept off face/logo */
.hxa.a1{background:radial-gradient(closest-side,rgba(28,166,56,.5),transparent);right:-80px;top:-120px}
.hxa.a2{background:radial-gradient(closest-side,rgba(36,160,140,.28),transparent)}
.hxa.a3{background:radial-gradient(closest-side,rgba(120,200,150,.12),transparent);left:30%;top:10%}
.hxgrid{opacity:.7}
.hxglow{inset:10% -4% 0 10%;background:radial-gradient(closest-side,rgba(28,166,56,.4),rgba(28,166,56,.12) 60%,transparent 80%)}
.hxv{margin:4px -16px 0}
.hxph{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 84%,transparent 100%)}
.hxkb img{transform-origin:70% 30%}
.hxc.c1{left:6px;right:auto;top:4px}
.hxc.c2{left:auto;right:6px;bottom:10px}
.hxtag{margin-top:2px}
@media (min-width:1024px){
 .hx{padding:44px 0 36px;min-height:0}
 .hxw{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);column-gap:8px}
 .hxv{margin:0 calc(-1*max(24px,(100vw - 1232px)/2)) 0 -64px}
 .hxph{aspect-ratio:16/9.6;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%),linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%),linear-gradient(180deg,transparent 0,#000 7%,#000 86%,transparent 100%);mask-composite:intersect}
 .hxkb img{object-position:60% 40%}
 .hxc.c1{left:6%;right:auto;top:7%;width:196px}
 .hxc.c3{left:auto;right:auto;left:7%;top:auto;bottom:30%}
 .hxc.c2{left:40%;right:auto;bottom:6%}
 .hxtag{margin:-30px 24px 0 auto}
 .hxdis{margin-top:10px}
}
.hxc.c1{top:-22px}.hxc.c2{left:6px;right:auto;bottom:12px}
@media (min-width:1024px){.hxc.c1{left:40%;top:1%}.hxc.c3{left:4%;bottom:32%}.hxc.c2{left:44%;bottom:5%}}

/* hero-z A: contained, grid-aligned photo */
.hxv{margin:28px 0 0}
.hxglow{inset:14% 6% -6% 6%;opacity:.8}
.hxph{aspect-ratio:16/10;border-radius:20px;-webkit-mask-image:none;mask-image:none;border:1px solid rgba(240,246,252,.08);box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(63,212,106,.06),inset 0 1px 0 rgba(255,255,255,.05)}
.hxkb{position:relative}
.hxkb img{object-position:58% 45%;filter:saturate(.88) contrast(1.06) brightness(.92)}
.hxkb:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,17,23,.25) 0,transparent 30%,transparent 62%,rgba(13,17,23,.55) 100%),radial-gradient(120% 80% at 80% 10%,rgba(63,212,106,.14),transparent 60%);mix-blend-mode:normal}
.hxc{padding:10px 12px}
.hxc.c1{left:12px;right:auto;top:12px}
.hxc.c2{left:12px;right:auto;bottom:12px;top:auto}
.hxtag{position:absolute!important;right:12px;bottom:12px;margin:0!important;z-index:3}
@media (min-width:1024px){
 .hx{padding:40px 0 32px}
 .hxw{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:center}
 .hxv{margin:0}
 .hxph{aspect-ratio:16/10.5;max-height:min(520px,calc(100vh - 220px));width:100%;border-radius:24px}
 .hxc{padding:12px 14px}
 .hxc.c1{left:24px;top:24px;width:196px}
 .hxc.c3{left:24px;top:50%;bottom:auto;margin-top:-31px}
 .hxc.c2{left:24px;bottom:24px}
 .hxtag{right:24px;bottom:24px}
 .hxdis{margin-top:20px}
}
@media (prefers-reduced-motion:no-preference){@keyframes hxf{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}}