.cta {
    background:#fff; color:#000;
    padding:0.75rem 1.5rem; border-radius:999px;
    font-weight:600; display:inline-block;
    transition:transform .2s;
}
.cta:hover { transform:scale(1.05); }
.hero-img img {
    max-width:280px; margin-top:2rem;
    border-radius:1rem; box-shadow:0 12px 40px rgba(0,0,0,0.5);
}

/* FEATURES */
.features {
    display:grid;
    gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    padding:4rem 2rem;
    background: #101010;
    text-align:center;
}
.feature-card {
    background:#1a1a1a; border-radius:12px;
    padding:2rem; transition:transform .3s, box-shadow .3s;
}
.feature-card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,110,255,0.3);
}
.feature-card i {
    font-size:2.5rem; margin-bottom:1rem; color:#3af;
}
.feature-card h3 {
    font-size:1.3rem; margin-bottom:.5rem;
}
.feature-card p {
    color:#ccc; font-size:1rem; line-height:1.5;
}

/* 3D PREVIEW LAYOUT */
.preview-layout {
    display:flex; flex-wrap:wrap;
    align-items:center; justify-content:center;
    gap:2rem; padding:4rem 2rem;
    background:#0f0f0f;
}
.preview-left, .preview-right {
    flex:1; min-width:280px; max-width:400px;
}
.preview-left h2 {
    font-size:2rem; margin-bottom:1rem; color:#3af;
}
.preview-left p {
    font-size:1rem; color:#ccc; line-height:1.6;
}
.preview-right ul {
    list-style:none; background:#1a1a1a;
    border-radius:1rem; padding:1.5rem; font-size:0.95rem;
}
.preview-right li { margin-bottom:0.75rem; }

.mockup-3d {
    perspective:1000px; width:250px; height:500px;
}
.phone {
    width:100%; height:100%;
    background:#111; border-radius:30px;
    box-shadow:0 20px 60px rgba(0,0,0,0.8);
    transition:transform .5s;
}
.phone .screen {
    width:100%; height:100%; overflow:hidden;
    border-radius:30px;
}
.phone .screen img {
    width:100%; height:100%; object-fit:cover;
}

/* DOWNLOAD */
.download {
    text-align:center; padding:4rem 2rem; background:#121212;
}
.download h2 {
    font-size:2rem; margin-bottom:0.5rem;
}
.download p {
    font-size:1rem; color:#ccc; margin-bottom:1.5rem;
}
.buttons {
    display:flex; justify-content:center; gap:1rem;
}
.buttons button {
    padding:0.75rem 1.5rem;
    background:#1a1a1a; border:1px solid #3af;
    color:#fff; border-radius:999px;
    font-size:1rem; opacity:.6;
    cursor:not-allowed;
    transition:opacity .3s;
}
.buttons button:hover { opacity:.8; }

.preview-collage {
    padding: 4rem 2rem;
    background: #121212;
    text-align: center;
}

.preview-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.preview-header p {
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.screenshot-card {
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: rotateZ(0deg);
    transition: transform 0.3s ease;
}

.screenshot-card:hover {
    transform: scale(1.05);
}

.screenshot-card img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* FADE-IN ANIMATION */
.fade-in {
    opacity:0;
    transform:translateY(20px);
    animation:fadeInIn 1s ease-out forwards;
}
.delay { animation-delay:.3s; }
.delay2 { animation-delay:.6s; }
@keyframes fadeInIn {
    to { opacity:1; transform:translateY(0); }
}

/* RESPONSIVE */
@media(max-width:768px) {
    .hero, .preview-layout, .features {
        flex-direction:column;
        text-align:center;
    }
    .mockup-3d { width:200px; height:400px; }
}