/* Isolated hero. Shared brand assets and VIAS shader remain unchanged. */
.hero-candidate{padding:128px 0 102px;background:radial-gradient(ellipse at 82% 42%,#bdb3e428,transparent 60%),radial-gradient(ellipse at 43% 87%,#ed34a20a,transparent 55%),var(--dark)}
.hero-candidate .ecosystem-layout{position:relative;z-index:1;grid-template-columns:minmax(400px,.88fr) minmax(0,1.12fr);column-gap:20px}
.hero-candidate .ecosystem-intro h1{font-size:clamp(65px,6.15vw,86px);line-height:1.005;letter-spacing:-.064em;font-weight:630;margin:0 0 28px;text-wrap:initial}
.hero-candidate .ecosystem-intro h1>span{display:block;color:var(--paper)}
.hero-candidate .ecosystem-intro h1>span:last-child{color:var(--lavender)}
.hero-candidate .ecosystem-intro .hero-subtitle{font-size:21px;line-height:1.4;font-weight:400;letter-spacing:-.025em;max-width:none;color:#c2bbd4;margin:0}
.hero-subtitle strong{font-weight:500;color:var(--paper)}
.hero-candidate .ecosystem-stage{width:calc(100% + max(var(--gutter),(100vw - var(--max))/2) + 28px);aspect-ratio:1.24;margin:0 0 -5px -12px;overflow:visible}

/* Cities belong only to the illustration, never behind navigation or copy. */
.hero-wallpaper{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;mask-image:linear-gradient(180deg,transparent,#000b 8%,#000 24%,#0008 65%,transparent 90%);-webkit-mask-image:linear-gradient(180deg,transparent,#000b 8%,#000 24%,#0008 65%,transparent 90%)}
.hero-city-field{position:absolute;left:-14%;top:-12%;width:150%;height:125%;display:flex;flex-direction:column;justify-content:flex-start;gap:33px;transform:rotate(-13deg);transform-origin:left center}
.hero-city-row{display:flex;width:max-content;flex:none;animation:city-wallpaper-drift var(--city-duration) linear var(--city-delay) infinite;will-change:transform}
.hero-city-row:nth-child(even){animation-direction:reverse}
.hero-city-group{display:flex;gap:36px;padding-right:36px;flex:none}
.hero-city-group>span{font-size:16px;font-weight:690;line-height:1.2;letter-spacing:.005em;color:#bdb3e41c;white-space:nowrap}
.hero-city-row:nth-child(3n) .hero-city-group>span{color:#bdb3e414}
@keyframes city-wallpaper-drift{to{transform:translate3d(-33.333333%,0,0)}}

/* A shared ground plane, with foreground furniture and a bicycle further back. */
.hero-ground{position:absolute;z-index:2;left:1%;right:-8%;bottom:5%;height:26%;border-radius:50%;background:radial-gradient(ellipse,#bdb3e415,transparent 68%);transform:rotate(-3deg);pointer-events:none}
.hero-artwork{position:absolute;inset:0;z-index:3;isolation:isolate;pointer-events:none}
.hero-motif{position:absolute;width:var(--motif-width);left:var(--motif-x);bottom:var(--motif-bottom)}
.hero-motif-body{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%}
.hero-motif-car{--motif-x:50%;--motif-bottom:23%;--motif-width:84%;z-index:1}
.hero-motif-floor-lamp{--motif-x:65%;--motif-bottom:23%;--motif-width:15%;z-index:2}
.hero-motif-bicycle{--motif-x:40%;--motif-bottom:18%;--motif-width:42%;z-index:3}
.hero-motif-people{--motif-x:1%;--motif-bottom:11%;--motif-width:43%;z-index:4}
.hero-motif-chair{--motif-x:43%;--motif-bottom:6%;--motif-width:29%;z-index:5}
.hero-motif-washing-machine{--motif-x:76%;--motif-bottom:9%;--motif-width:21%;z-index:5}
.hero-motif-people .hero-motif-body{animation:none}
@keyframes travelers-breathe{0%,100%{transform:scaleY(1) rotate(-.16deg)}50%{transform:scaleY(1.005) rotate(.16deg)}}
.hero-lamp-light{position:absolute;z-index:2;left:8%;top:8%;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#fff3c452,#ffed401a 36%,transparent 70%);mix-blend-mode:screen;filter:blur(3px);transform:scale(1.5);animation:lamp-warmth 8s ease-in-out -3s infinite;pointer-events:none}
@keyframes lamp-warmth{0%,100%{opacity:.15;transform:scale(1.25)}45%,65%{opacity:.8;transform:scale(1.9)}}

/* Each original pearl has one of the three brand-color halos behind its glass. */
.hero-candidate .hero-vias{inset:-3% -1% -3% -2%;z-index:2}
.hero-candidate .vias-orb{animation-name:vias-candidate-sparkle;opacity:.72;isolation:isolate}
.hero-candidate .vias-orb:before{content:"";position:absolute;inset:-55%;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 48%,transparent) 0%,color-mix(in srgb,var(--glow) 18%,transparent) 28%,transparent 68%);filter:blur(3px);animation:vias-halo-breathe var(--duration) ease-in-out var(--delay) infinite}
.hero-candidate .vias-orb-glass{box-shadow:0 0 8px color-mix(in srgb,var(--glow) 22%,transparent),inset 0 0 0 .75px #f4f3f73b}
.hero-candidate .vias-orb-glass:before{content:"";position:absolute;top:8%;left:25%;width:3px;height:3px;border-radius:50%;background:#fff9;box-shadow:0 0 6px 2px #f4f3f744;z-index:3;animation:vias-rim-sparkle var(--duration) ease-in-out var(--delay) infinite}
.hero-candidate .vias-orb-glass:after{border-top-color:#f4f3f780;border-left-color:#f4f3f749}
@keyframes vias-candidate-sparkle{0%,100%{opacity:.08;transform:translate3d(0,7px,0) scale(.58)}22%{opacity:.8;transform:translate3d(4px,-5px,0) scale(1)}46%{opacity:.28;transform:translate3d(1px,-9px,0) scale(.8)}64%{opacity:.76;transform:translate3d(-4px,-5px,0) scale(.95)}86%{opacity:.15;transform:translate3d(-5px,3px,0) scale(.65)}}
@keyframes vias-halo-breathe{0%,100%{opacity:.38;transform:scale(.8)}28%,65%{opacity:1;transform:scale(1.12)}}
@keyframes vias-rim-sparkle{0%,15%,42%,75%,100%{opacity:.15;transform:scale(.7)}25%,59%{opacity:1;transform:scale(1.5)}}

/* Four substantial, full-surface links. No extra click or hidden explanation. */
.hero-candidate .entry-roles{gap:10px;margin:28px 0 25px;max-width:490px}
.hero-candidate .entry-roles>a{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:11px;row-gap:9px;min-height:111px;padding:16px 14px;border:1px solid #bdb3e425;border-radius:20px;background:linear-gradient(130deg,#bdb3e40a,#bdb3e403);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,border-color .2s,transform .2s}
.hero-candidate .entry-icon{grid-column:1;grid-row:1;width:40px;height:40px;flex-basis:40px;border-radius:13px;border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.hero-candidate .entry-icon>.icon{width:26px;height:26px;flex-basis:26px}
.hero-candidate .entry-roles>a>span:nth-child(2){display:contents}
.hero-candidate .entry-roles b{grid-column:1/-1;grid-row:2;font-size:16px;font-weight:640;letter-spacing:-.025em;line-height:1.2}
.hero-candidate .entry-roles small{grid-column:1/-1;grid-row:3;font-size:12px;line-height:1.4;margin-top:-3px;color:#c2bbd4}
.hero-candidate .entry-roles>a>.icon{grid-column:2;grid-row:1;justify-self:end;width:21px;height:21px;flex-basis:21px;margin:0;color:var(--accent)}
@media(hover:hover) and (pointer:fine){.hero-candidate .entry-roles>a:hover{border-color:color-mix(in srgb,var(--accent) 48%,transparent);background:color-mix(in srgb,var(--accent) 6%,#090919)}}
@media(hover:none){.hero-candidate .entry-roles>a:hover .entry-icon{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}.hero-candidate .entry-roles>a:hover .entry-icon,.hero-candidate .entry-roles>a:hover>.icon{transform:none}}
.hero-candidate .entry-roles>a:active{transform:scale(.975)}
.hero-candidate .entry-roles>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hero-candidate .ecosystem-action>.button{font-size:13px;min-height:52px}
.hero-preview-footer{position:relative;background:var(--paper);color:var(--ink);border-radius:40px 40px 0 0;margin-top:-40px;padding:23px 0 21px;z-index:4}
.hero-preview-footer>.container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-preview-footer .text-link{font-size:12px;font-weight:500;color:var(--ink)}
.hero-preview-footer .text-link .icon{width:17px;height:17px;flex-basis:17px}
.hero-preview-footer .motion-toggle{color:#706780;font-size:11px;min-height:44px}

/* Never mask the scene container: that clips pearls and people at its box edges. */
@media(min-width:1850px){.hero-candidate .ecosystem-stage{width:1040px}}
@media(max-width:1100px) and (min-width:761px){
 .hero-candidate{padding:124px 0 96px}
 .hero-candidate .ecosystem-layout{grid-template-columns:minmax(325px,.95fr) minmax(0,1.05fr);column-gap:10px}
 .hero-candidate .ecosystem-intro h1{font-size:clamp(56px,6.7vw,72px);margin-bottom:23px}
 .hero-candidate .ecosystem-intro .hero-subtitle{font-size:17px}
 .hero-candidate .ecosystem-stage{width:calc(100% + 67px);margin-left:-8px;aspect-ratio:1}
 .hero-candidate .entry-roles>a{padding:13px 12px;min-height:112px}
 .hero-candidate .entry-roles b{font-size:15px}
 .hero-candidate .entry-roles small{font-size:11px}
 .hero-city-group>span{font-size:14px}
}
@media(max-width:760px){
 .hero-candidate{padding:103px 0 81px;background:radial-gradient(ellipse at 80% 43%,#bdb3e42a,transparent 49%),var(--dark)}
 .hero-candidate .ecosystem-layout{grid-template-columns:minmax(0,1fr);gap:0;max-width:560px}
 .hero-candidate .ecosystem-intro h1{font-size:clamp(36px,11.3vw,58px);line-height:1.04;letter-spacing:-.052em;margin:0 0 20px}
 .hero-candidate .ecosystem-intro h1>span{display:inline}
 .hero-candidate .ecosystem-intro h1>span:last-child{display:block}
 .hero-candidate .ecosystem-intro .hero-subtitle{font-size:18px;line-height:1.4;letter-spacing:-.018em}
 .hero-candidate .ecosystem-stage{width:calc(100% + var(--gutter)*2);height:clamp(320px,99vw,555px);aspect-ratio:auto;margin:5px 0 0 calc(-1*var(--gutter))}
 .hero-candidate .hero-motif-people{--motif-x:1%;--motif-bottom:12%;--motif-width:48%}
 .hero-candidate .hero-motif-car{--motif-x:56%;--motif-bottom:25%;--motif-width:86%}
 .hero-candidate .hero-motif-bicycle{--motif-x:41%;--motif-bottom:19%;--motif-width:44%}
 .hero-candidate .hero-motif-floor-lamp{--motif-x:65%;--motif-bottom:23%;--motif-width:16%}
 .hero-candidate .hero-motif-chair{--motif-x:45%;--motif-bottom:7%;--motif-width:30%}
 .hero-candidate .hero-motif-washing-machine{--motif-x:78.5%;--motif-bottom:11%;--motif-width:20.5%}
 .hero-city-field{width:1800px;left:-50%;top:-12%;height:125%;gap:27px;transform:rotate(-12deg)}
 .hero-city-group{gap:26px;padding-right:26px}
 .hero-city-group>span{font-size:12px}
 .hero-candidate .hero-vias{inset:0 0 2%}
 .hero-candidate .entry-roles{margin:0 0 25px;gap:10px;max-width:none}
 .hero-candidate .entry-roles>a{padding:14px;min-height:127px;row-gap:9px}
 .hero-candidate .entry-roles b{font-size:16px}
 .hero-candidate .entry-roles small{font-size:12px;max-width:155px}
 .hero-candidate .ecosystem-action{gap:12px}
 .hero-candidate .ecosystem-action>.button{padding:14px 18px;font-size:12px}
 .hero-preview-footer{border-radius:28px 28px 0 0;margin-top:-28px;padding:16px 0}
 .hero-preview-footer>.container{gap:10px}
 .hero-preview-footer .text-link{font-size:11px;gap:8px}
 .hero-preview-footer .motion-toggle{font-size:10px}
}
@media(max-width:380px){
 .hero-candidate{padding-top:99px}
 .hero-candidate .ecosystem-intro .hero-subtitle{font-size:16px}
 .hero-candidate .ecosystem-intro h1{margin-bottom:17px}
 .hero-candidate .entry-roles>a{padding:12px 10px}
 .hero-candidate .entry-roles b{font-size:15px}
 .hero-candidate .ecosystem-action{align-items:flex-start;flex-direction:column;gap:9px}
 .hero-candidate .ecosystem-action>span{max-width:none}
}
.hero-is-resting .hero-city-row,.hero-is-resting .hero-motif-body,.hero-is-resting .hero-lamp-light,.hero-is-resting .vias-orb:before,.hero-is-resting .vias-orb-glass:before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-city-row,.hero-motif-body,.hero-lamp-light,.hero-candidate .vias-orb,.hero-candidate .vias-orb:before,.hero-candidate .vias-orb-glass:before{animation:none}.hero-candidate .entry-roles>a{transition:none}}
/* A brief two-part greeting, followed by a longer resting interval. */
.hero-wave{transform-origin:0 0;animation:traveler-greeting 5.6s ease-in-out -1s infinite}
@keyframes traveler-greeting{0%,18%,48%,100%{transform:translate(104px,444px) rotate(0deg) translate(-104px,-444px)}25%,37%{transform:translate(104px,444px) rotate(-7deg) translate(-104px,-444px)}31%,43%{transform:translate(104px,444px) rotate(5deg) translate(-104px,-444px)}}
.hero-is-resting .hero-wave{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-wave{animation:none}}

/* The driver faces the arriving travelers; furniture stays in front. */
.hero-person{transform-origin:0 0}
.hero-person-man{animation:traveler-idle-man 4.8s ease-in-out -.8s infinite}
.hero-person-woman{animation:traveler-idle-woman 5.7s ease-in-out -3s infinite}
@keyframes traveler-idle-man{0%,100%{transform:translate(300px,1400px) rotate(-.18deg) scaleY(1) translate(-300px,-1400px)}50%{transform:translate(300px,1400px) rotate(.22deg) scaleY(1.006) translate(-300px,-1400px)}}
@keyframes traveler-idle-woman{0%,100%{transform:translate(760px,1400px) rotate(.2deg) scaleY(1) translate(-760px,-1400px)}50%{transform:translate(760px,1400px) rotate(-.2deg) scaleY(1.005) translate(-760px,-1400px)}}
@keyframes driver-idle{0%,100%{transform:rotate(-.2deg) scaleY(1)}50%{transform:rotate(.25deg) scaleY(1.006)}}
.hero-blink{opacity:0;pointer-events:none}
.hero-blink-man{animation:blink-man 5.2s steps(1,end) -.7s infinite}
.hero-blink-woman{animation:blink-woman 6.7s steps(1,end) -2.8s infinite}
@keyframes blink-man{0%,43%,48%,100%{opacity:0}45%{opacity:1}}
@keyframes blink-woman{0%,61%,65%,72%,100%{opacity:0}63%,70%{opacity:1}}
.hero-is-resting .hero-person,.hero-is-resting .hero-blink{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-person,.hero-blink,.hero-motif-driver .hero-motif-body{animation:none}.hero-blink{opacity:0}}
.hero-blink-driver{animation:blink-driver 6.1s steps(1,end) -1.7s infinite}
@keyframes blink-driver{0%,53%,58%,100%{opacity:0}55%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-blink-driver{animation:none;opacity:0}}

/* Driver and open hatch form one coherent grounded illustration. */
.hero-motif-driver-car{--motif-x:45%;--motif-bottom:23%;--motif-width:94%;z-index:1}
@media(max-width:760px){.hero-candidate .hero-motif-driver-car{--motif-x:45%;--motif-bottom:25%;--motif-width:99%}}

/* Feather only the desktop city backdrop; keep people and objects crisp. */
@media(min-width:761px){
 .hero-candidate .hero-wallpaper{
  left:-32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 94%,transparent),linear-gradient(180deg,transparent,#000b 8%,#000 24%,#0008 65%,transparent 90%);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 94%,transparent),linear-gradient(180deg,transparent,#000b 8%,#000 24%,#0008 65%,transparent 90%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
 }
 .hero-candidate .vias-orb{width:calc(var(--size)*1.4);height:calc(var(--size)*1.4)}
}