/* Reset e Stili Globali */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Scrolling fluido per i link interni (se li usi) */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9; /* Sfondo leggermente grigio */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    width: 90%;
}

h1, h2, h3 {
    margin-bottom: 1rem;
    color: #2c3e50; /* Blu scuro */
}

h1 {
    font-size: 2.8rem;
    font-weight: 700;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

p {
    margin-bottom: 1rem;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    padding: 60px 0;
}

/* Header / Hero Section */
.hero {
    background: linear-gradient(135deg, #6dd5ed, #2193b0); /* Gradiente blu-azzurro */
    color: #fff;
    text-align: center;
    padding: 80px 0 60px 0;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero .logo {
    max-width: 200px; /* Hai aumentato questo, va bene */
    background-color: white;
    border-radius: 15px;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    /* Modifica/Aggiunta qui: */
    display: block; /* Assicura che sia trattato come blocco */
    margin-left: auto;  /* Aggiungi margine automatico a sinistra */
    margin-right: auto; /* Aggiungi margine automatico a destra */
    margin-bottom: 1rem; /* Mantieni il margine inferiore esistente */
}

.hero h1 {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.hero .subtitle {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

/* Call to Action (CTA) Button */
.cta-button {
    display: inline-block;
    background-color: #000; /* Bianco */
    color: #2193b0; /* Blu del gradiente */
    padding: 12px 25px;
       border-radius: 25px; /* Pulsante arrotondato */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.cta-button:hover {
    transform: translateY(-3px);
    background-color: #333; /* Leggermente più scuro al passaggio */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.cta-button.app-store-button {
    background-color: transparent; /* Rende lo sfondo trasparente */
    padding: 0;                 /* Rimuove il padding interno */
    border: none;               /* Rimuove eventuali bordi */
    box-shadow: none;           /* Rimuove l'ombra (l'immagine potrebbe averne una sua) */
    border-radius: 0;           /* Rimuove l'arrotondamento (lo gestiamo sull'immagine se serve) */
    /* Mantiene l'effetto al passaggio del mouse se desiderato */
    transition: transform 0.3s ease;
    display: inline-block;      /* Mantiene il comportamento a blocco in linea */
    vertical-align: middle;     /* Aiuta ad allineare se c'è testo vicino */
}

/* Stili per l'immagine dentro il bottone App Store */
.cta-button.app-store-button img {
    display: block; /* Evita spazi extra sotto l'immagine */
    height: 50px;   /* Imposta l'altezza desiderata per il badge (adatta se necessario) */
    width: auto;    /* Mantiene le proporzioni originali dell'immagine */
    /* Se l'immagine stessa non è arrotondata, potresti voler aggiungere: */
    /* border-radius: 8px; */
}

/* Rimuove stili di hover non necessari o li adatta */
.cta-button.app-store-button:hover {
    background-color: transparent; /* Nessun cambio di sfondo su hover */
    box-shadow: none;            /* Nessuna ombra su hover */
    /* Mantiene l'effetto di sollevamento */
    transform: translateY(-3px);
}


/* Specifico per App Store Button */
.app-store-button {
    /* Aggiungi eventuali stili specifici se usi un badge SVG o un'icona */
    /* Esempio: display: flex; align-items: center; gap: 8px; */
    color: #ffffff
}


/* Video Section */
.video-section {
    background-color: #fff; /* Sfondo bianco per staccare */
}

.video-wrapper {
    /* Riduci la larghezza massima per adattarla meglio a un video verticale */
    max-width: 360px;  /* Prova 360px o 400px, regola secondo necessità */
    margin: 0 auto; /* Mantiene il contenitore centrato */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 12px; /* Puoi aumentare leggermente per un look più stondato */
    overflow: hidden; /* Per arrotondare anche il video */
    background-color: #000; /* Sfondo nero per eventuale letterboxing */
}

.video-wrapper video,
.video-wrapper iframe {
    display: block;
    width: 100%; /* Fa sì che il video occupi la larghezza del .video-wrapper */
    /* Imposta l'aspect ratio per formato verticale (Portrait) */
    aspect-ratio: 9 / 16;
    /* (Opzionale) Controlla come il video si adatta se le proporzioni non sono esatte */
    object-fit: cover; /* Prova 'cover' (riempie) o 'contain' (mostra tutto) */
}

/* Screenshots Section */
.screenshots-section {
    text-align: center;
    background-color: #eef4f7; /* Azzurro molto chiaro */
}

/* iPhone Mockup (Simulato con CSS) */
.iphone-mockup {
    position: relative;
    width: 280px; /* Larghezza del mockup */
    height: 570px; /* Altezza del mockup */
    background-color: #1c1c1e; /* Grigio scuro quasi nero iPhone */
    border-radius: 40px; /* Bordi arrotondati iPhone */
    margin: 30px auto;
    padding: 15px; /* Spazio per la cornice */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 0 0 2px #555; /* Ombra e bordo interno */
    display: flex;
    justify-content: center;
    align-items: center;
}

.iphone-screen {
    width: 100%;
    height: 100%;
    background-color: #fff; /* Sfondo dello schermo (dove va lo screenshot) */
    border-radius: 25px; /* Arrotondamento interno dello schermo */
    overflow: hidden; /* Nasconde parti dell'immagine che escono */
    position: relative; /* Necessario per il notch */
}

.iphone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine copra l'area */
}

/* Notch/Isola Dinamica (Simulazione base) */
.iphone-notch {
    position: absolute;
    top: 15px; /* Posizione dall'alto dentro il padding */
    left: 50%;
    transform: translateX(-50%);
    width: 40%; /* Larghezza del notch */
    height: 20px; /* Altezza del notch */
    background-color: #1c1c1e; /* Stesso colore del bordo */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 10; /* Sopra lo schermo */
}

/* Screenshot Gallery */
.screenshot-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Spazio tra le miniature */
    margin-top: 30px;
}

.screenshot-gallery .thumb {
    width: 100px; /* Dimensione miniature */
    height: auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.screenshot-gallery .thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #2193b0;
}

.gallery-note {
    font-size: 0.9em;
    color: #666;
    margin-top: 15px;
}

/* Features Section */
.features-section {
    background-color: #fff;
}

.features-section ul {
    list-style: none; /* Rimuovi i punti elenco */
    padding-left: 0;
    max-width: 600px;
    margin: 0 auto;
}

.features-section li {
    margin-bottom: 1rem;
    padding-left: 30px; /* Spazio per l'icona/emoji */
    position: relative;
    font-size: 1.1rem;
}

.features-section li::before {
    content: '✓'; /* Icona di spunta (o usa emoji) */
    position: absolute;
    left: 0;
    color: #27ae60; /* Verde */
    font-weight: bold;
}
/* Puoi personalizzare le emoji/icone per ogni punto se vuoi */
.features-section li:nth-child(1)::before { content: '🐸'; }
.features-section li:nth-child(2)::before { content: '🏆'; }
.features-section li:nth-child(3)::before { content: '🎨'; }
.features-section li:nth-child(4)::before { content: '🎵'; }
.features-section li:nth-child(5)::before { content: '✨'; } /* Aggiornato per 'updates' */

/* Final CTA Section */
.cta-final {
    background: linear-gradient(135deg, #6dd5ed, #2193b0); /* Stesso gradiente dell'hero */
    color: #fff;
    text-align: center;
}

.cta-final h2 {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.cta-final .cta-button {
    background-color: #fff;
    color: #2193b0;
}
.cta-final .cta-button:hover {
    background-color: #f0f0f0;
}

/* Footer */
footer {
    background-color: #2c3e50; /* Blu scuro */
    color: #ecf0f1; /* Grigio chiaro */
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

footer a {
    color: #3498db; /* Blu link */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


/* Responsive Design */
@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .hero {
        padding: 60px 0 40px 0;
        min-height: auto; /* Altezza automatica su mobile */
    }
    .iphone-mockup {
        width: 220px; /* Riduci mockup su schermi piccoli */
        height: 450px;
        border-radius: 30px;
        padding: 12px;
    }
    .iphone-screen {
        border-radius: 20px;
    }
    .iphone-notch {
        height: 15px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .screenshot-gallery .thumb {
        width: 80px; /* Riduci miniature */
    }
    .features-section ul {
        padding-left: 10px; /* Riduci padding lista su mobile */
    }
    .features-section li {
        padding-left: 25px; /* Spazio ridotto per icona */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    .container {
        width: 95%; /* Usa più larghezza su schermi molto piccoli */
    }
    .cta-button {
        padding: 10px 20px;
        font-size: 1rem;
    }
    .iphone-mockup {
        width: 180px; /* Riduci ancora mockup */
        height: 370px;
        border-radius: 25px;
        padding: 10px;
    }
    .iphone-screen {
        border-radius: 15px;
    }
    .iphone-notch {
        height: 12px;
        width: 35%;
    }
    .screenshot-gallery .thumb {
        width: 70px;
    }
}