*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:Arial,sans-serif}
.hero{height:100vh;background:url('foule-cides.png') center/cover no-repeat;display:flex;justify-content:center;align-items:center;position:relative}
.overlay{position:absolute;inset:0;background:rgba(255,255,255,0.8)}
.card{position:relative;z-index:2;text-align:center;width:min(700px,92vw)}
.logo{width:260px;max-width:55vw;margin:auto;display:block}
.sep{display:flex;align-items:center;gap:16px;margin:8px 0 16px;color:#111;font-size:24px}
.sep span{flex:1;height:2px;background:#111}
h1{font-size:clamp(2rem,4vw,4rem);font-weight:900;color:#111}
p{margin-top:18px;font-size:clamp(1rem,1.7vw,1.45rem);color:#111}
h2{margin-top:16px;font-size:clamp(1.1rem,2vw,1.8rem);font-weight:800;color:#111}
.dots{margin-top:20px;display:flex;justify-content:center}
.dots span{width:16px;height:16px;border-radius:50%;background:#111}
@media(max-height:700px){.logo{width:200px}h1{font-size:2.3rem}p,h2{font-size:1rem}.sep{margin:4px 0 10px}}