/* Hero Section */
.hero { 
    /* Reduced bottom padding so screenshots start closer to buttons */
    padding: 6rem 1rem 3rem; 
    text-align: center; 
    max-width: 900px; 
    margin: 0 auto; 
    overflow-x: hidden; 
}

.hero h1 { 
    font-size: 3.5rem; 
    font-weight: 800; 
    letter-spacing: -0.04em; 
    line-height: 1.1; 
    margin-bottom: 2rem; 
    color: var(--text-main); 
}
.hero h1 .highlight { color: var(--primary-color); }

.hero p { 
    font-size: 1.25rem; 
    color: var(--text-muted); 
    line-height: 1.6; 
    max-width: 650px; 
    margin: 0 auto 4rem; 
}

/* Stats Row */
.stats-row {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 1.5rem; 
    font-size: 0.95rem; color: var(--text-muted); font-weight: 500;
    margin-bottom: 1.5rem; 
}

.avatar-group { display: flex; align-items: center; }
.avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 3px solid #fff; 
    margin-left: -12px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
}
.avatar:first-child { margin-left: 0; }

.stat-item { display: flex; align-items: center; gap: 6px; }
.stat-item i { color: var(--primary-color); font-size: 1.1rem; }

/* YELLOW STARS */
.stars { display: flex; gap: 2px; }
.stars i, .stars svg, .stars .ph-fill { color: #FBBF24 !important; fill: #FBBF24 !important; }

/* Review Stripe (Edge-to-Edge) */
.review-stripe-container {
    width: 100vw; 
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-color: var(--primary-color);
    padding: 3.5rem 0; 
    margin-bottom: 3rem;
    display: flex; justify-content: center; align-items: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) inset;
}

.stripe-content { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 800px; width: 100%; padding: 0 20px; opacity: 0; }
.anim-enter { animation: slideInRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.anim-exit { animation: slideOutLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.stripe-avatar { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); background-size: cover; background-position: center; flex-shrink: 0; }
.stripe-text-group { text-align: left; display: flex; flex-direction: column; justify-content: center; }
.stripe-quote { font-size: 1.1rem; font-weight: 500; line-height: 1.4; }
.stripe-author { font-size: 0.85rem; opacity: 0.8; margin-top: 4px; font-weight: 400; }
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-50px); } }

/* Store Buttons */
.store-buttons { 
    display: flex; justify-content: center; gap: 24px; 
    align-items: center;
    margin-bottom: 4rem; 
}

.store-badge {
    height: 65px; width: auto; cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s; display: block;
}
.store-badge:hover { transform: translateY(-3px); opacity: 0.9; }

/* 
   SCREENSHOTS SECTION 
   - No Borders!
   - Pure flow from section above
*/
.screenshots { 
    background: #ffffff;
    /* REMOVED: border-top */
    
    /* Reduced top padding so it flows nicely from the buttons */
    padding: 1rem 0 8rem; 
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.grid-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }

.phone-frame {
    border-radius: 40px; overflow: hidden;
    /* Clean shadow on white */
    box-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.12);
    background: #fff; 
    border: 10px solid #fff;
    outline: 1px solid #f3f4f6;
    transition: transform 0.4s ease; aspect-ratio: 9/19;
}
.phone-frame:hover { transform: translateY(-15px); }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }

@media (max-width: 900px) { .grid-wrapper { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 3rem; } }
@media (max-width: 600px) { 
    .grid-wrapper { grid-template-columns: 1fr; } 
    .store-buttons { flex-direction: column; align-items: center; gap: 15px; } 
}