/* Hero film: home + office learners, live Zoom lesson, phrase used at work */
@keyframes h-sa{0%,23.89%{opacity:1}26.67%,97.22%{opacity:0}100%{opacity:1}}
.h-sa{animation:h-sa 18.0s linear infinite}
@keyframes h-sb{0%,25.00%{opacity:0;}27.22%,73.33%{opacity:1;}75.56%,100%{opacity:0;}}
.h-sb{opacity:0;animation:h-sb 18.0s linear infinite}
@keyframes h-sc{0%,74.44%{opacity:0;}76.67%,96.67%{opacity:1;}98.89%,100%{opacity:0;}}
.h-sc{opacity:0;animation:h-sc 18.0s linear infinite}
@keyframes h-n1{0%,5.56%{opacity:0;transform:translateY(6px);}7.22%,22.78%{opacity:1;transform:none;}24.44%,100%{opacity:0;transform:translateY(6px);}}
.h-n1{opacity:0;animation:h-n1 18.0s linear infinite}
@keyframes h-n2{0%,7.78%{opacity:0;transform:translateY(6px);}9.44%,22.78%{opacity:1;transform:none;}24.44%,100%{opacity:0;transform:translateY(6px);}}
.h-n2{opacity:0;animation:h-n2 18.0s linear infinite}
@keyframes h-j1{0%,16.67%{opacity:0;}17.50%,23.61%{opacity:1;}24.44%,100%{opacity:0;}}
.h-j1{opacity:0;animation:h-j1 18.0s linear infinite}
@keyframes h-j2{0%,18.33%{opacity:0;}19.17%,23.61%{opacity:1;}24.44%,100%{opacity:0;}}
.h-j2{opacity:0;animation:h-j2 18.0s linear infinite}
@keyframes h-l0{0%,29.44%{opacity:0;transform:translateY(6px);}30.83%,40.28%{opacity:1;transform:none;}41.67%,100%{opacity:0;transform:translateY(6px);}}
.h-l0{opacity:0;animation:h-l0 18.0s linear infinite}
@keyframes h-l1{0%,42.78%{opacity:0;transform:translateY(6px);}44.17%,51.39%{opacity:1;transform:none;}52.78%,100%{opacity:0;transform:translateY(6px);}}
.h-l1{opacity:0;animation:h-l1 18.0s linear infinite}
@keyframes h-l2{0%,53.89%{opacity:0;transform:translateY(6px);}55.28%,61.39%{opacity:1;transform:none;}62.78%,100%{opacity:0;transform:translateY(6px);}}
.h-l2{opacity:0;animation:h-l2 18.0s linear infinite}
@keyframes h-l3{0%,63.89%{opacity:0;transform:translateY(6px);}65.28%,73.06%{opacity:1;transform:none;}74.44%,100%{opacity:0;transform:translateY(6px);}}
.h-l3{opacity:0;animation:h-l3 18.0s linear infinite}
@keyframes h-r1{0%,42.78%{opacity:0;}43.89%,51.67%{opacity:1;}52.78%,100%{opacity:0;}}
.h-r1{opacity:0;animation:h-r1 18.0s linear infinite}
@keyframes h-r0{0%,29.44%{opacity:0;}30.56%,40.56%{opacity:1;}41.67%,100%{opacity:0;}}
.h-r0{opacity:0;animation:h-r0 18.0s linear infinite}
@keyframes h-r0b{0%,53.89%{opacity:0;}55.00%,61.67%{opacity:1;}62.78%,100%{opacity:0;}}
.h-r0b{opacity:0;animation:h-r0b 18.0s linear infinite}
@keyframes h-r2{0%,63.89%{opacity:0;}65.00%,73.33%{opacity:1;}74.44%,100%{opacity:0;}}
.h-r2{opacity:0;animation:h-r2 18.0s linear infinite}
@keyframes h-m1{0%,43.28%{transform:scaleY(0)}43.33%{transform:scaleY(0.15)}44.56%{transform:scaleY(1)}45.78%{transform:scaleY(0.15)}47.00%{transform:scaleY(1)}48.22%{transform:scaleY(0.15)}49.44%{transform:scaleY(1)}50.67%{transform:scaleY(0.15)}51.67%,100%{transform:scaleY(0)}}
.h-m1{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:h-m1 18.0s linear infinite}
@keyframes h-m2{0%,64.39%{transform:scaleY(0)}64.44%{transform:scaleY(0.15)}65.67%{transform:scaleY(1)}66.89%{transform:scaleY(0.15)}68.11%{transform:scaleY(1)}69.33%{transform:scaleY(0.15)}70.56%{transform:scaleY(1)}71.78%{transform:scaleY(0.15)}73.00%{transform:scaleY(1)}73.33%,100%{transform:scaleY(0)}}
.h-m2{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:h-m2 18.0s linear infinite}
@keyframes h-q{0%,26.67%{opacity:0;}28.33%,43.33%{opacity:1;}45.00%,100%{opacity:0;}}
.h-q{opacity:0;animation:h-q 18.0s linear infinite}
@keyframes h-a{0%,45.00%{opacity:0;}46.67%,73.89%{opacity:1;}75.56%,100%{opacity:0;}}
.h-a{opacity:0;animation:h-a 18.0s linear infinite}
@keyframes h-x1{0%,50.00%{opacity:0;transform:translateY(0) scale(.6)}52.22%{opacity:1;transform:translateY(-10px) scale(1.1)}60.00%,100%{opacity:0;transform:translateY(-46px) scale(1)}}
.h-x1{opacity:0;animation:h-x1 18.0s ease-out infinite}
@keyframes h-x2{0%,52.22%{opacity:0;transform:translateY(0) scale(.6)}54.44%{opacity:1;transform:translateY(-10px) scale(1.1)}62.22%,100%{opacity:0;transform:translateY(-46px) scale(1)}}
.h-x2{opacity:0;animation:h-x2 18.0s ease-out infinite}
@keyframes h-x3{0%,71.11%{opacity:0;transform:translateY(0) scale(.6)}73.33%{opacity:1;transform:translateY(-10px) scale(1.1)}81.11%,100%{opacity:0;transform:translateY(-46px) scale(1)}}
.h-x3{opacity:0;animation:h-x3 18.0s ease-out infinite}
@keyframes h-b1{0%,77.78%{opacity:0;transform:translateY(6px);}79.44%,96.11%{opacity:1;transform:none;}97.78%,100%{opacity:0;transform:translateY(6px);}}
.h-b1{opacity:0;animation:h-b1 18.0s linear infinite}
@keyframes h-b2{0%,85.56%{opacity:0;transform:translateY(6px);}87.22%,96.11%{opacity:1;transform:none;}97.78%,100%{opacity:0;transform:translateY(6px);}}
.h-b2{opacity:0;animation:h-b2 18.0s linear infinite}
@keyframes h-m3{0%,78.28%{transform:scaleY(0)}78.33%{transform:scaleY(0.15)}79.56%{transform:scaleY(1)}80.78%{transform:scaleY(0.15)}82.00%{transform:scaleY(1)}83.22%{transform:scaleY(0.15)}84.44%,100%{transform:scaleY(0)}}
.h-m3{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:h-m3 18.0s linear infinite}
@keyframes h-m4{0%,86.06%{transform:scaleY(0)}86.11%{transform:scaleY(0.15)}87.33%{transform:scaleY(1)}88.56%{transform:scaleY(0.15)}89.78%{transform:scaleY(1)}91.00%{transform:scaleY(0.15)}91.11%,100%{transform:scaleY(0)}}
.h-m4{transform-box:fill-box;transform-origin:center;transform:scaleY(0);animation:h-m4 18.0s linear infinite}
@keyframes h-p1{0%,0.00%{transform:scaleX(0)}24.72%{transform:scaleX(1)}25.00%,100%{transform:scaleX(1)}}
.h-p1{transform-origin:left;transform:scaleX(0);animation:h-p1 18.0s linear infinite}
@keyframes h-p2{0%,25.00%{transform:scaleX(0)}74.72%{transform:scaleX(1)}75.00%,100%{transform:scaleX(1)}}
.h-p2{transform-origin:left;transform:scaleX(0);animation:h-p2 18.0s linear infinite}
@keyframes h-p3{0%,75.00%{transform:scaleX(0)}99.72%{transform:scaleX(1)}100.00%,100%{transform:scaleX(1)}}
.h-p3{transform-origin:left;transform:scaleX(0);animation:h-p3 18.0s linear infinite}
@keyframes h-nodk{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}
.h-nod{animation:h-nodk 2.6s ease-in-out infinite}
@keyframes h-livek{0%,100%{opacity:1}50%{opacity:.3}}
.h-live{animation:h-livek 1.6s infinite}
@keyframes h-pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,94,255,.5)}50%{box-shadow:0 0 0 6px rgba(31,94,255,0)}}
.h-join{animation:h-pulse 1.4s infinite}
.hero-film-wrap{width:100%;max-width:560px;border-radius:24px;overflow:hidden;background:#FFFFFF;box-shadow:0 24px 60px rgba(11,27,63,.18)}
.hero-film{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0B1B3F;font-family:var(--sans)}
.h-caption{position:relative;padding:12px 18px 14px;background:#FFFFFF;display:flex;flex-direction:column;gap:9px}
.h-progress{display:grid;grid-template-columns:1fr 2fr 1fr;gap:6px}
.h-progress span{height:4px;border-radius:2px;background:#E3E9F7;overflow:hidden}
.h-progress i{display:block;height:100%;background:#1F5EFF;border-radius:2px}
.h-capt{position:relative;min-height:2.6em}
.h-capt p{position:absolute;inset:0;margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.9vw,17px);font-weight:700;color:#0B1B3F;line-height:1.3}
.h-capt b{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#1F5EFF;color:#FFFFFF;font-size:12px;display:flex;align-items:center;justify-content:center}
.hero-film svg{display:block}
.h-panel>svg,.h-tile>svg,.h-scene>svg{width:100%;height:100%}
.h-scene{position:absolute;inset:0}
.h-panels{display:flex;height:100%;gap:2px;background:#FFFFFF}
.h-panel{position:relative;flex:1;min-width:0}
.h-chip{position:absolute;top:6%;left:5%;display:inline-flex;align-items:center;gap:6px;background:#FFFFFF;border-radius:999px;padding:4px 10px;font-size:clamp(9px,1.6vw,12px);font-weight:700;color:#0B1B3F;box-shadow:0 4px 12px rgba(11,27,63,.12);white-space:nowrap}
.h-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#1F5EFF}
.h-note{position:absolute;left:7%;right:7%;top:28%;justify-content:space-between;background:#FFFFFF;border-radius:12px;padding:7px 9px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 24px rgba(11,27,63,.16);white-space:nowrap}
.h-note-ic{width:22px;height:22px;border-radius:7px;background:#1F5EFF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.h-note b{display:block;font-size:clamp(9px,1.5vw,12px);color:#0B1B3F}
.h-note small{display:block;font-size:clamp(7px,1.2vw,9.5px);color:#4B5675}
.h-btn{position:relative;font-size:clamp(8px,1.3vw,10.5px);font-weight:700;color:#FFFFFF;background:#1F5EFF;border-radius:999px;padding:3px 9px}
.h-btn .h-joined{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#15803D;border-radius:999px}
.h-zoom{display:grid;grid-template-rows:7% 1fr 12%;height:100%;background:#0B1B3F}
.h-top{display:flex;align-items:center;justify-content:space-between;padding:0 3%;font-size:clamp(8px,1.4vw,11px);font-weight:600;color:#C9D3EA}
.h-top b{display:inline-flex;align-items:center;gap:5px;color:#FFFFFF}
.h-top i{width:7px;height:7px;border-radius:50%;background:#FF5A5A;font-style:normal}
.h-main{display:grid;grid-template-columns:2.15fr 1fr;gap:1.6%;padding:0 2%;min-height:0}
.h-cols{display:grid;grid-template-rows:repeat(3,1fr);gap:4%;min-height:0}
.h-tile{position:relative;border-radius:10px;overflow:hidden;background:#223A75;min-height:0}
.h-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.h-ring{position:absolute;inset:0;border:3px solid #22C55E;border-radius:10px}
.h-name{position:absolute;left:5px;bottom:5px;z-index:2;background:rgba(11,27,63,.75);color:#FFFFFF;font-size:clamp(7px,1.2vw,10px);font-weight:700;padding:1px 6px;border-radius:999px}
.h-card{position:absolute;top:6%;right:4%;background:#FFFFFF;border-radius:12px;padding:7px 11px;box-shadow:0 8px 20px rgba(11,27,63,.2);min-width:34%}
.h-card small{display:block;font-size:clamp(7px,1.15vw,9.5px);font-weight:800;color:#1F5EFF;letter-spacing:.6px}
.h-card .h-ph{position:relative;height:clamp(32px,6vw,44px)}
.h-card .h-ph > span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.h-card strong{font-size:clamp(13px,2.4vw,19px);color:#0B1B3F;line-height:1.15}
.h-card em{font-style:normal;font-size:clamp(8px,1.3vw,10.5px);color:#4B5675}
.h-sub{position:absolute;left:4%;right:4%;bottom:4%;background:rgba(11,27,63,.86);border-radius:10px;padding:5px 10px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.h-who{font-size:clamp(8px,1.3vw,10.5px);font-weight:800;color:#9DB8FF}
.h-line{font-family:var(--he);font-size:clamp(11px,2vw,16px);font-weight:600;color:#FFFFFF;text-align:right}
.h-gloss{grid-column:1/-1;font-size:clamp(7.5px,1.25vw,10px);color:#C9D3EA;text-align:right}
.h-bar{display:flex;align-items:center;justify-content:center;gap:2.4%}
.h-bar span{width:clamp(18px,3.4vw,28px);height:clamp(18px,3.4vw,28px);border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.h-bar .h-leave{width:auto;border-radius:999px;background:#E04848;color:#FFFFFF;font-size:clamp(8px,1.3vw,11px);font-weight:700;padding:0 12px}
.h-react{position:absolute;right:8%;bottom:14%}
.h-bubble{position:absolute;background:#FFFFFF;border-radius:14px;padding:6px 11px;box-shadow:0 10px 22px rgba(11,27,63,.16);display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.h-bubble.is-blue{background:#1F5EFF}
.h-bubble span[lang]{font-family:var(--he);font-size:clamp(11px,2vw,16px);font-weight:600;color:#0B1B3F}
.h-bubble.is-blue span[lang]{color:#FFFFFF}
.h-bubble small{font-size:clamp(7.5px,1.2vw,10px);color:#4B5675}
.h-bubble.is-blue small{color:#DCE6FF}
@media (prefers-reduced-motion: reduce){
.hero-film *{animation:none!important}
.h-sa,.h-sc{opacity:0!important}.h-progress i{transform:none!important}.h-sb,.h-a,.h-l1,.h-r1{opacity:1!important}.h-q{opacity:0!important}
}