/* style.css */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #FAFAFA; 
    overflow-x: hidden; 
    color: #334155; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Animation beaucoup plus douce (type Apple) */
.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #667FFF, #9333EA);
}

.phone-mockup { 
    position: relative; 
    width: 100%; 
    max-width: 320px; 
    z-index: 10; 
}

@media (min-width: 640px) { 
    .phone-mockup { max-width: 340px; } 
}

.phone-mockup video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.phone-mockup > img.frame { 
    position: relative; 
    z-index: 10; 
    display: block; 
    width: 100%; 
    height: auto; 
    pointer-events: none; 
    drop-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
}

.os-choice-btn { 
    transition: all 0.2s ease; 
}

.os-choice-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
}

.step-item {
    transition: all 0.5s ease;
}