/* Intégration isolée du modèle alex : palette et sections existantes conservées. */
.hero{min-height:720px;height:100svh;overflow:hidden}
.hero-rectangle{width:min(1400px,96vw);height:auto;background:rgba(255,0,229,.2);border:2px solid #FF00E5;border-radius:15px;box-shadow:0 0 60px rgba(255,0,229,.15);overflow:hidden;transform:none;filter:none}
.hero-rectangle:hover{transform:none;filter:none;box-shadow:0 0 120px rgba(255,0,229,.55);background:rgba(255,0,229,.2)}
.hero-content{width:100%;position:relative}
#alex-stage{width:100%;height:clamp(320px,43vw,620px);position:relative}
#alex-stage canvas{display:block;width:100%;height:100%}
.alex-fallback{margin:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 clamp(80px,20vw,250px) Telegraf,sans-serif;color:#ffe600}
#alex-stage.is-ready .alex-fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.hero{min-height:640px}#alex-stage{height:330px}.cta-left{left:15px;font-size:10px;padding:0 10px}.cta{right:15px}.center-title{top:100px}.runner{transform:scale(.7)}}

/* Hide the DOM duplicate only after its WebGL texture has loaded. */
.hero-rectangle.runner-in-webgl > .runner{display:none}