.hero{min-height:624px;background:#020b14;--hero-glare-duration:0s;--hero-zoom-duration:2.8s}
/* Fill the area exposed by the smaller opening frame, without a hard image edge. */
@property --hero-edge-feather{syntax:"<length>";inherits:false;initial-value:0px}
.hero::before{display:block;inset:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;z-index:0;pointer-events:none;background:url("../images/hero-globe.png") center/cover no-repeat;filter:blur(24px) brightness(.55);transform:scale(1.15);animation:hero-zoom-fill var(--hero-zoom-duration) linear var(--hero-glare-duration) both}
.hero::after{inset:0;width:auto;height:auto;transform:none;background:linear-gradient(90deg,#02080e 0%,rgba(2,8,14,.96) 26%,rgba(2,8,14,.45) 44%,transparent 63%),url("../images/hero-globe.png") center/cover no-repeat;opacity:1}
.hero-animation{display:none}
.hero::after{z-index:0}
.hero>.container{position:relative;z-index:2}
.hero-sun-glare{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,8,14,.84),rgba(2,8,14,.35) 38%,transparent 68%),radial-gradient(ellipse at 68% 18%,#fffef1 0%,#fff3c9 14%,#f6d78f 32%,#d79a4c 62%,#855024 100%);transform-origin:68% 18%;animation:hero-sun-reveal var(--hero-glare-duration) cubic-bezier(.22,.61,.36,1) both}
@keyframes hero-sun-reveal{0%,20%{opacity:1;transform:scale(1.06);visibility:visible}100%{opacity:0;transform:scale(1);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hero-sun-glare{display:none;animation:none}}
.hero-connections{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;mask-image:linear-gradient(90deg,transparent 26%,#0008 44%,#000 63%)}
.hero-connections.connections-visible{opacity:1}
.hero-connections svg{position:absolute;max-width:none;overflow:hidden;pointer-events:none}
.hero-connections path{fill:none;stroke-linecap:round}
.connection-track-glow{stroke:#008fff;stroke-width:4;opacity:.16;filter:blur(2px)}
.connection-track{stroke:#3caee9;stroke-width:1;opacity:.48}
.hero-connections .connection-glow,.hero-connections .connection-light{stroke-dasharray:2 98;animation:connection-transfer var(--duration) linear var(--delay) infinite;animation-play-state:paused}
.connection-glow{stroke:#009fff;stroke-width:8;filter:blur(3px)}
.connection-light{stroke:#c4f3ff;stroke-width:1.8}
.connection-pulse{fill:#76d8ff;animation:connection-pulse 3s ease-out var(--delay) infinite;animation-play-state:paused}
.connections-running .connection-glow,.connections-running .connection-light,.connections-running .connection-pulse{animation-play-state:running}
@keyframes connection-transfer{0%{stroke-dashoffset:2;opacity:0}10%,85%{opacity:.95}100%{stroke-dashoffset:-98;opacity:0}}
@keyframes connection-pulse{0%,100%{opacity:0;transform:scale(.6)}25%{opacity:.65}80%{opacity:0;transform:scale(2.4)}}
@media(max-width:700px){.hero-connections{mask-image:linear-gradient(180deg,transparent 0%,#0002 25%,#000b 65%,#000)}}
@media(prefers-reduced-motion:reduce){.hero-connections{display:none}}
.hero::after,.hero-connections{transform-origin:80% 50%;animation:hero-globe-arrive var(--hero-zoom-duration) cubic-bezier(.22,.61,.36,1) var(--hero-glare-duration) both}
.hero::after{mask-image:linear-gradient(90deg,transparent,#000 var(--hero-edge-feather),#000 calc(100% - var(--hero-edge-feather)),transparent),linear-gradient(180deg,transparent,#000 var(--hero-edge-feather),#000 calc(100% - var(--hero-edge-feather)),transparent);mask-composite:intersect;animation-name:hero-globe-arrive,hero-edge-reveal}
@keyframes hero-globe-arrive{from{transform:scale(.9)}to{transform:scale(1)}}
@keyframes hero-edge-reveal{from{--hero-edge-feather:90px}to{--hero-edge-feather:0px}}
@keyframes hero-zoom-fill{0%,65%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hero::before{display:none;animation:none}.hero::after,.hero-connections{animation:none;transform:none;mask-image:none}}
.hero>.container{width:min(1136px,calc(100% - 72px));padding:0}
.hero .navbar{height:86px;padding:0;align-items:center;border:0}
.hero .navbar:before{content:"";position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(2,11,20,.2);z-index:-1;pointer-events:none}
.hero .navbar:after{content:"";position:absolute;left:50%;bottom:0;width:100vw;transform:translateX(-50%);border-bottom:1px solid #ffffff12;pointer-events:none}
.hero .brand-logo{width:220px}
.hero .nav-actions{gap:18px}
.hero .btn-primary{padding:15px 27px;min-height:52px;border-radius:16px;font-size:17px;background:linear-gradient(100deg,#00adf1,#0055ff);box-shadow:0 5px 20px #008bff42}
.hero .language-toggle{height:52px;padding:0 20px;gap:10px;border:1px solid #536171;border-radius:18px;background:#020a13a6}
.hero .lang-code{font-size:16px;font-weight:400}
.hero .hero-content{min-height:538px;display:block;padding:44px 0 36px}
.hero-copy-wrap{position:relative;z-index:2;max-width:550px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero .eyebrow{font-size:14px;letter-spacing:.055em;margin:0;white-space:nowrap}
.hero h1{font-size:60px;line-height:.99;letter-spacing:-.035em;font-weight:750;max-width:550px;margin:20px 0}
.hero .hero-copy{max-width:445px;font-size:18px;line-height:1.45;margin:0 0px 28px}
.hero .hero-features{display:flex;flex-wrap:nowrap;gap:42px;margin-top:32px}
.hero .feature{min-width:0;gap:12px;font-size:14px;line-height:1.4}
.hero .feature-icon{width:42px;height:42px;flex-shrink:0;border:0;border-radius:0;background:none;color:#00a6f5}
.hero .feature-icon svg{width:100%;height:100%}
.hero .hero-visual{position:absolute;right:0;bottom:64px;min-height:0;margin:0;display:block;pointer-events:none}
.hero-motto{margin:0;color:#a5cce4;font-family:"CEO Signature",cursive;font-size:65px;line-height:.8;text-align:center;transform:rotate(-13deg);text-shadow:0 2px 10px #000}
.hero-motto:after{content:"";display:block;width:120px;height:7px;margin:17px auto 0;border-top:2px solid #a5cce4;border-bottom:2px solid #a5cce4;transform:skewX(-30deg)}
@media(max-width:1000px){.hero .hero-visual{bottom:48px}.hero-motto{font-size:52px}.hero .hero-features{gap:25px}.hero h1{font-size:56px}.hero .eyebrow{font-size:12px}}
@media(max-width:700px){
.hero{min-height:auto}.hero>.container{width:calc(100% - 36px)}
.hero .navbar{height:auto;min-height:82px;flex-wrap:wrap;gap:16px;padding:18px 0}
.hero .brand-logo{width:180px;max-width:100%}.hero .nav-actions{gap:10px;flex-wrap:wrap}
.hero .nav-actions .btn{font-size:13px;padding:12px 16px;min-height:44px}.hero .language-toggle{height:44px;padding:0 12px}.hero .lang-code{font-size:13px}
.hero::after{top:0;background:linear-gradient(180deg,#020b14 0%,rgba(2,11,20,.85) 25%,rgba(2,11,20,.3) 65%,transparent),url("../images/hero-globe.png") 65% bottom/auto 72% no-repeat}
.hero .hero-content{padding:32px 0 36px;min-height:0}.hero .eyebrow{white-space:normal;font-size:10px;line-height:1.6;letter-spacing:.05em}
.hero h1{font-size:clamp(39px,8.5vw,56px);line-height:1.04}.hero .hero-copy{font-size:16px;max-width:420px}
.hero .hero-features{gap:18px;justify-content:space-between;flex-wrap:wrap;margin-top:28px}.hero .feature{font-size:12px;gap:7px}.hero .feature-icon{width:30px;height:30px}
.hero .hero-visual{right:12px;bottom:40px}.hero-motto{font-size:54px}
}