:root {
    --primary-color: #E5D8C7;  /* Beige chiaro moya */
    --secondary-color: #7A5C50; /* Marrone caldo */
    --text-dark: #1D1D1D;       /* Nero vintage */
    --text-light: #8B7A6B;      /* Marrone chiaro */
    --accent-gold: #D4AF37;     /* Oro vintage */
    --background-dark: #2C2420; /* Marrone scuro */
    --shadow: rgba(26, 26, 26, 0.1);
    /* Phone mockup sizing (adjust --phone-border to increase/decrease the frame) */
    --phone-border: 8px; /* thickness of the outer frame */
    --phone-radius: 25px; /* outer phone radius - more iPhone-like */
    --phone-screen-radius: calc(var(--phone-radius) - var(--phone-border) - 4px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--primary-color);
    overflow-x: hidden;
}

/* Typography */
.playfair {
    font-family: 'Playfair Display', serif;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--primary-color);
    backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    width: 100%;
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-links {
    display: flex !important;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
    flex-direction: row !important;
}

/* Language switching logic - simplified and working */
/* Default: show Italian, hide English */
.content[data-lang="it"] {
    display: block;
}
    
.content[data-lang="en"] {
    display: none;
}
    
/* When body has lang-en class: hide Italian, show English */
body.lang-en .content[data-lang="it"] {
    display: none !important;
}
    
body.lang-en .content[data-lang="en"] {
    display: block !important;
}
    
/* Special handling for navigation links to keep them horizontal */
.nav-links.content[data-lang="it"] {
    display: flex !important;
}
    
.nav-links.content[data-lang="en"] {
    display: none !important;
}
    
body.lang-en .nav-links.content[data-lang="it"] {
    display: none !important;
}
    
body.lang-en .nav-links.content[data-lang="en"] {
    display: flex !important;
}

.logo {
    font-size: 2rem;
    font-weight: 700;
    color: #875438;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.nav-links a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--secondary-color);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.4;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--secondary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(122, 92, 80, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-dark);
    padding: 1rem 2rem;
    border: 2px solid var(--secondary-color);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(122, 92, 80, 0.4);
}

.btn-secondary:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-mobile {
    display: none; /* Hidden by default - shown only on mobile */
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
}

.phone-mockup {
    width: 240px;
    height: 520px; /* Adjusted for iPhone 15 Pro Max aspect ratio (19.5:9) */
    /* iPhone-like colors: space gray/black */
    background: linear-gradient(145deg, #1c1c1e, #000000);
    border-radius: var(--phone-radius);
    padding: var(--phone-border);
    box-shadow: none; /* Removed shadows */
    position: relative;
    overflow: hidden;
    /* Lock the mockup size to prevent deformation when resizing window */
    min-width: 240px !important;
    max-width: 240px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    flex-shrink: 0;
}

/* Add iPhone-like details */
.phone-mockup::before {
    /* Notch removed - display: none to hide it completely */
    display: none;
}

/* Home indicator */
.phone-mockup::after {
    /* Home indicator removed - display: none to hide it completely */
    display: none;
}

.phone-screen {
    width: 100%;
    height: 100%;
    /* make the screen background transparent so image meets edges */
    background: transparent;
    /* iPhone-like screen radius */
    border-radius: var(--phone-screen-radius);
    position: relative;
    overflow: hidden;
    /* remove flex centering so image can expand fully */
}

/* Ensure images inside the mockup perfectly fill the screen area */
.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    /* iPhone screen radius */
    border-radius: calc(var(--phone-screen-radius) - 3px);
}

/* Ensure the inner image uses full resolution and is not blurred by scaling on large screens */
.phone-image {
    image-rendering: auto; /* let browser choose best algorithm */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

.app-preview {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.preview-text {
    color: var(--text-light);
    text-align: center;
    padding: 0 2rem;
}

/* Features Section */
.features {
    padding: 8rem 2rem;
    background: white;
}

.features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
}

.feature-card {
    background: var(--primary-color);
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
}

/* Style SVG icons in feature cards to match emoji size */
.feature-icon svg {
    width: 3rem;
    height: 3rem;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* Screenshots Section */
.screenshots {
    padding: 8rem 2rem;
    background: linear-gradient(135deg, var(--background-dark) 0%, #1a1a1a 100%);
    color: white;
}

.screenshots-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.screenshots .section-title {
    color: white;
}

.screenshots .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.screenshot-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.screenshot-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.screenshot-placeholder {
    width: 100%;
    /* Match roughly the screenshot mockup height plus padding */
    height: 720px;
    background: transparent;
    border-radius: 15px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

/* iPhone mockup for screenshots */
.screenshot-phone-mockup {
    /* Use Pro Max-like dimensions close to the main .phone-mockup but slightly larger for showcase */
    width: 320px;
    height: 693px; /* iPhone Pro Max approximate ratio */
    background: linear-gradient(145deg, #1c1c1e, #000000);
    border-radius: var(--phone-radius);
    padding: var(--phone-border);
    box-shadow: none; /* Removed shadows */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.screenshot-phone-mockup::before {
    display: none;
}

.screenshot-phone-mockup::after {
    /* hide bottom home indicator / bar for screenshot mockups */
    display: none;
}

.screenshot-phone-screen {
    width: 100%;
    height: 100%;
    background: transparent; /* allow image to fill without visible letterboxing */
    border-radius: var(--phone-screen-radius);
    position: relative;
    overflow: hidden;
}

/* Make screenshots fully cover the screen area to avoid black bars */
.screenshot-phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill the screen area */
    object-position: center center;
    display: block;
    border-radius: calc(var(--phone-screen-radius) - 3px);
    background: transparent;
    image-rendering: auto; /* let browser choose best algorithm */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    /* Force hardware acceleration for better rendering */
    transform: translateZ(0);
    will-change: transform;
}

/* Chrome-specific optimizations for smoother images */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    .screenshot-phone-screen img {
        image-rendering: smooth;
        image-rendering: -webkit-optimize-contrast;
        filter: blur(0.3px) contrast(0.98);
        transform: translateZ(0) scale(1.001);
    }
}

/* CTA Section */
.cta-section {
    padding: 5rem 2rem;
    background: var(--primary-color);
    text-align: center;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.cta-subtitle {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.store-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: white;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: none;
    min-width: auto;
    justify-content: center;
}

.store-btn:hover {
    transform: translateY(-3px);
}

.appstore-badge {
    height: 220px;
    width: 330px;
    transition: all 0.3s ease;
}

.store-btn:hover .appstore-badge {
    transform: scale(1.05);
}

/* Footer */
.footer {
    background: var(--background-dark);
    color: white;
    padding: 4rem 2rem 2rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.footer-logo-img {
    height: 160px;
    width: auto;
}

.footer-text {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Footer Language Switcher */
.footer-language-switcher {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    gap: 4px;
}

.footer-language-switcher .lang-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-language-switcher .lang-option:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.footer-language-switcher .lang-option.active {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

.footer-language-switcher .lang-flag {
    font-size: 14px;
}

.footer-language-switcher .lang-text {
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .footer-language-switcher {
        margin: 1rem 0;
    }
    
    .footer-language-switcher .lang-option {
        padding: 5px 10px;
        gap: 3px;
    }
    
    .footer-language-switcher .lang-flag {
        font-size: 12px;
    }
    
    .footer-language-switcher .lang-text {
        font-size: 10px;
    }
}

/* Mobile Navigation */
.mobile-menu-btn {
    background: none;
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    display: none; /* Hidden by default */
}

.mobile-menu-btn:hover {
    background: var(--secondary-color);
    color: white;
    transform: scale(1.05);
}

/* Show mobile menu button on tablets and phones */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Content Language Switching */
.content[data-lang]:not([data-lang="it"]) {
    display: none;
}

html[lang="en"] .content[data-lang="it"] {
    display: none;
}

html[lang="en"] .content[data-lang="en"] {
    display: block;
}

html[lang="it"] .content[data-lang="it"] {
    display: block;
}

html[lang="it"] .content[data-lang="en"] {
    display: none;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Use dvh (dynamic viewport height) for better mobile support */
    height: 100dvh;
    background: rgba(229, 216, 199, 0.98);
    backdrop-filter: blur(20px);
    z-index: 99999; /* ensure it's above all content and avoids stacking issues */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none; /* disabled until active */
    overflow: hidden; /* prevent scrolling */
    /* Ensure it covers everything */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Disable body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* Additional fixes for iOS Safari and mobile browsers */
.mobile-menu-overlay {
    /* Force hardware acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Prevent rubber band scrolling on iOS */
    -webkit-overflow-scrolling: auto;
    /* Ensure full coverage on all devices */
    min-height: 100vh;
    min-height: 100dvh;
}

.mobile-menu-content {
    height: 100vh;
    height: 100dvh; /* Use dynamic viewport height */
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    z-index: 100000;
}

.mobile-menu-links {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
}

.mobile-menu-links li {
    margin: 1.5rem 0;
}

.mobile-menu-links a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mobile-menu-links a:hover {
    color: var(--secondary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-center {
        display: none !important;
    }
    
    .nav-links {
        display: none !important;
    }

    .nav-right {
        gap: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
    }

    /* hide inline language selector on tablet/phone to avoid duplicate controls */
    .nav-right .language-selector {
        display: none !important;
    }

    /* Make header static on mobile to prevent overlap */
    .header {
        position: static !important;
        padding: 0.75rem 0;
        min-height: 60px; /* Ensure consistent header height */
    }

    /* Mobile-specific menu improvements */
    .mobile-menu-overlay {
        /* Ensure menu covers the entire viewport on mobile */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        /* Prevent any potential scrolling */
        overflow: hidden !important;
        overscroll-behavior: none;
        /* Disable iOS bounce effect */
        -webkit-overflow-scrolling: auto;
    }
    
    .mobile-menu-content {
        /* Ensure content fills the entire menu area */
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
        /* Prevent content from being scrollable */
        touch-action: none;
    }

    .nav-container {
        padding: 0 1rem;
    }

    /* Remove top padding from hero since header is no longer fixed */
    .hero {
        padding-top: 2rem; /* Reduced from 7rem */
    }
}

@media (max-width: 480px) {
    .nav-center {
        display: none !important;
    }
    
    .nav-links {
        display: none !important;
    }
    
    /* Ensure header is static on small screens */
    .header {
        position: static !important;
        padding: 0.5rem 0;
        min-height: 50px;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        padding-top: 1rem; /* Reduced since header is no longer fixed */
    }

    .hero-content {
        order: 1; /* Title and content first on mobile */
    }

    .hero-image {
        order: 2; /* iPhone mockup second on mobile */
    }

    .phone-mockup {
        width: 200px;
        height: 400px;
    }

    .cta-buttons {
        justify-content: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .screenshots-grid {
        grid-template-columns: 1fr;
    }

    .store-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }

    /* Smaller screenshot mockups on mobile */
    .screenshot-phone-mockup {
        width: 210px;
        height: 415px;
    }

    .screenshot-placeholder {
        height: 440px;
    }

    /* Reduce padding for mobile sections */
    .features {
        padding: 4rem 1rem;
    }

    .screenshots {
        padding: 4rem 1rem;
    }

    .cta-section {
        padding: 4rem 1rem;
    }

    .hero {
        padding: 0 1rem;
        min-height: 100vh; /* Remove calc since header is static */
        padding-top: 2rem; /* Reduced from 8rem */
    }

    .phone-mockup {
        width: 180px;
        height: 360px;
    }

    /* Mobile menu adjustments for small screens */
    .mobile-menu-links a {
        font-size: 1.3rem;
    }

    .mobile-menu-content {
        padding: 1rem;
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    /* Keep mockup size stable - don't resize on larger screens */
    .phone-mockup {
        width: 240px !important; /* Lock to original size */
        height: 520px !important; /* Lock to original size */
    }
    
    .screenshot-phone-mockup {
        width: 300px;
        height: 590px;
    }
    .screenshot-placeholder {
        height: 640px;
    }
    
    /* Slightly larger notch for bigger mockup */
    .phone-mockup::before {
        width: 70px;
        height: 20px;
        border-radius: 10px;
    }
}

/* Ultra-wide screens: cap the mockup size */
@media (min-width: 1600px) {
    /* Keep mockup size stable - don't resize on ultra-wide screens */
    .phone-mockup {
        width: 240px !important; /* Lock to original size */
        height: 520px !important; /* Lock to original size */
    }
    
    .hero-container {
        max-width: 1400px; /* Limit container width on ultra-wide screens */
    }
}

/* Larger mockup on wide screens to show more detail */
@media (min-width: 1200px) and (max-width: 1399px) {
    /* Keep mockup size stable - don't resize on wide screens */
    .phone-mockup {
        width: 240px !important; /* Lock to original size */
        height: 520px !important; /* Lock to original size */
    }
    .phone-screen img {
        object-fit: contain;
    }
    
    .screenshot-phone-mockup {
        display: block; /* Ensure mockups are visible */
        width: 280px;
        height: 555px;
        margin: 0 auto;
    }
    
    .mobile-screenshot {
        display: none !important; /* Hide stretched images */
    }
    
    .screenshot-placeholder {
        height: 600px;
        overflow: visible; /* Ensure mockups aren't cut off */
    }
    
    .screenshot-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Medium laptops */
@media (min-width: 1025px) and (max-width: 1199px) {
    /* Keep mockup size stable - don't resize on medium laptops */
    .phone-mockup {
        width: 240px !important; /* Lock to original size */
        height: 520px !important; /* Lock to original size */
    }
    
    .screenshot-phone-mockup {
        display: block; /* Ensure mockups are visible */
        width: 260px;
        height: 520px;
        margin: 0 auto;
    }
    
    .mobile-screenshot {
        display: none !important; /* Hide stretched images */
    }
    
    .screenshot-placeholder {
        height: 570px;
        overflow: visible; /* Ensure mockups aren't cut off */
    }
    
    .screenshot-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Medium tablets and small laptops */
@media (max-width: 1024px) and (min-width: 769px) {
    .phone-mockup {
        width: 220px;
        height: 477px; /* Maintains iPhone 15 Pro Max ratio */
    }
    
    .screenshot-phone-mockup {
        display: block; /* Ensure mockups are visible */
        width: 240px;
        height: 475px;
        margin: 0 auto;
    }
    
    .mobile-screenshot {
        display: none !important; /* Hide stretched images */
    }
    
    .screenshot-placeholder {
        height: 520px;
        overflow: visible; /* Ensure mockups aren't cut off */
    }
    
    .screenshot-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Large phones and small tablets */
@media (max-width: 768px) and (min-width: 481px) {
    .hero-container {
        gap: 3rem;
        flex-direction: column;
    }
    
    .hero-content {
        order: 1;
    }

    .hero-image {
        display: none; /* Hide desktop image on mobile */
    }
    
    .hero-image-mobile {
        display: flex; /* Show mobile image */
        margin: 1.5rem auto;
        max-width: 250px;
    }
    
    .phone-mockup {
        width: 220px; /* Increased from 200px */
        height: 476px; /* Maintains iPhone 15 Pro Max ratio */
    }
    
    /* For tablets: also use mockups for better iPhone Pro Max proportions */
    .screenshot-phone-mockup {
        display: block; /* Show mockups on tablets */
        width: 280px; /* Slightly smaller for tablets */
        height: 607px; /* Maintain Pro Max ratio */
        margin: 0 auto;
    }
    
    .mobile-screenshot {
        display: none !important; /* Hide stretched images on tablets */
    }
    
    .screenshot-card {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-bottom: 3rem;
    }
    
    .screenshot-card h3 {
        font-size: 1.4rem;
        text-align: center;
        margin: 1rem 0 0.5rem 0;
    }
    
    .screenshot-card p {
        text-align: center;
        font-size: 1rem;
        max-width: 85%;
        margin: 0.5rem auto 0 auto;
    }
    
    .screenshot-placeholder {
        height: auto;
        background: transparent;
        padding: 0;
        border-radius: 0;
        overflow: visible;
    }
    
    /* Adjust notch for smaller mockup */
    .phone-mockup::before {
        width: 50px;
        height: 15px;
        border-radius: 7.5px;
    }
    
    .features {
        padding: 6rem 1.5rem;
    }
    
    .screenshots {
        padding: 6rem 1.5rem;
    }
    
    .cta-section {
        padding: 4rem 1.5rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .nav-container {
        padding: 0 1rem;
    }

    .hero {
        padding: 0 1rem;
        min-height: calc(100vh - 60px); /* Account for smaller header */
    }

    .features {
        padding: 4rem 1rem;
    }

    .screenshots {
        padding: 4rem 1rem;
    }

    .cta-section {
        padding: 4rem 1rem;
    }
    
    /* Modern mobile design for screenshots section */
    .screenshots {
        padding: 4rem 1rem !important; /* Increased padding */
    }
    
    .screenshots .section-title {
        font-size: 2.5rem !important; /* Larger title */
        margin-bottom: 1rem;
        text-align: center;
        color: white !important; /* White title for mobile */
    }
    
    .screenshots .section-subtitle {
        font-size: 1.1rem !important; /* Slightly larger */
        margin-bottom: 4rem; /* More space */
        max-width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        color: var(--text-light); /* Back to original color */
    }
    
    .screenshots-grid {
        display: block; /* Stack vertically */
        gap: 0;
        max-width: 100%;
    }
    
    .screenshot-card {
        background: transparent; /* Remove white containers */
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-bottom: 4rem; /* More space between sections */
        border: none;
        box-shadow: none;
        overflow: visible;
    }
    
    .screenshot-card h3 {
        font-size: 1.5rem; /* Larger headings */
        font-weight: 600;
        margin: 1rem 0 0.5rem 0; /* Positioned below image */
        color: white !important; /* White titles for mobile */
        text-align: center;
    }
    
    .screenshot-card p {
        margin: 0.5rem 0 0 0;
        color: var(--text-light);
        font-size: 1rem; /* Larger text */
        line-height: 1.6;
        text-align: center;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Mobile-first approach: hide mockups and show large images */
    .screenshot-phone-mockup {
        display: none;
    }
    
    .mobile-screenshot {
        display: block !important;
        width: auto; /* Auto width to maintain aspect ratio */
        max-width: 300px; /* Limit maximum width */
        height: 550px; /* Increased height to show more content */
        border-radius: 16px; /* Rounded corners */
        object-fit: contain; /* Show complete image without cropping */
        object-position: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Subtle shadow */
        margin: 0 auto 1.5rem auto; /* Center horizontally with auto margins */
        background: transparent; /* No white background */
    }
    
    .screenshot-placeholder {
        height: auto;
        background: transparent; /* Clean transparent background */
        padding: 0;
        border-radius: 0;
        overflow: visible;
        display: block;
        margin: 0;
        width: 100%;
    }

    .phone-mockup {
        width: 200px;
        height: 433px;
    }
    
    /* Further adjust notch for very small mockup */
    .phone-mockup::before {
        width: 40px;
        height: 12px;
        border-radius: 6px;
        top: calc(8px + (var(--phone-border) / 6));
    }
}

/* Default: show mockups on desktop, hide mobile screenshots */
@media (min-width: 769px) {
    .mobile-screenshot {
        display: none; /* Hide stretched images on desktop */
    }
    
    .screenshot-phone-mockup {
        display: block; /* Show iPhone mockups on desktop */
        width: 320px; /* iPhone Pro Max width */
        height: 693px; /* iPhone Pro Max height */
        margin: 0 auto;
    }
    
    .screenshot-card {
        background: rgba(255, 255, 255, 0.1); /* Restore original desktop styling */
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 3rem;
        transition: all 0.3s ease;
    }
    
    .screenshot-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.15);
    }
    
    .screenshot-placeholder {
        width: 100%;
        height: 750px; /* Increased to fit iPhone mockup + padding */
        background: transparent;
        border-radius: 15px;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* Allow mockup to be fully visible */
        position: relative;
    }
    
    .screenshot-card h3 {
        text-align: center;
        margin: 1.5rem 0 0.5rem 0;
        font-size: 1.5rem;
    }
    
    .screenshot-card p {
        text-align: center;
        max-width: 85%;
        margin: 0.5rem auto 0 auto;
        font-size: 1rem;
    }
}

/* Extra small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    /* Modern mobile design for very small screens */
    .screenshot-card {
        background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
        backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 0;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .screenshot-card h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 1.2rem 1.2rem 0.4rem;
        color: var(--text-dark);
    }
    
    .screenshot-card p {
        margin: 0 1.2rem 1.2rem;
        color: var(--text-light);
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .phone-mockup {
        width: 170px;
        height: 368px;
    }
    
    /* Hide mockups and show direct images on very small screens */
    .screenshot-phone-mockup {
        display: none;
    }
    
    .mobile-screenshot {
        display: block !important;
        width: 100%;
        height: 220px; /* Smaller height for small screens */
        border-radius: 0;
        object-fit: cover;
        object-position: center top;
        box-shadow: none;
    }
    
    .screenshot-placeholder {
        height: auto;
        background: transparent;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
        display: block;
        margin: 0;
    }
    
    /* Tiny notch for very small screens */
    .phone-mockup::before {
        width: 35px;
        height: 10px;
        border-radius: 5px;
        top: calc(6px + (var(--phone-border) / 6));
    }
    
    .hero-container {
        gap: 1.5rem;
        flex-direction: column;
    }
    
    .hero-content {
        order: 1;
    }

    .hero-image {
        display: none; /* Hide desktop image on mobile */
    }
    
    .hero-image-mobile {
        display: flex; /* Show mobile image */
        margin: 1rem auto;
        max-width: 200px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--primary-color);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dark);
}

/* ------------------------------------------------------------------
   Sticky footer + mobile layout tweaks
   - Use flex layout on body so footer can be pushed to the bottom with margin-top: auto
   - Add small mobile-specific spacing reductions and reduce footer logo size
   ------------------------------------------------------------------ */

html, body {
    height: 100%;
}

/* Make the page a vertical flex container so footer can be anchored */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Ensure main content doesn't collapse — keep default flow but allow footer to push down */
main, .hero, .features, .screenshots, .cta-section, .privacy-container, .terms-container {
    /* keep normal document flow; these elements will expand as needed */
    flex: 0 0 auto;
}

/* Push footer to the bottom when there isn't enough content */
.footer {
    margin-top: auto;
}

/* Mobile layout tweaks */
@media (max-width: 480px) {
    .footer {
        padding: 2rem 1rem 1rem;
    }

    .footer-logo-img {
        height: 80px;
    }

    .footer-links {
        gap: 1rem;
    }

    .footer-links a {
        font-size: 14px;
    }

    /* Reduce large hero area on small screens to avoid excessive scrolling */
    .hero {
        min-height: calc(100vh - 120px);
        padding-top: 1rem;
    }

    /* Make privacy/terms containers use less vertical padding on small screens */
    .privacy-container, .terms-container {
        padding: 1.25rem;
        margin: 2rem auto;
    }
}