/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; line-height: 1.6; }

/* Navigation */
nav { padding: 20px; text-align: center; }
nav a { margin: 0 15px; text-decoration: none; color: #007AFF; font-weight: 500; }

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background-color: #f9f9f9;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-content { max-width: 500px; text-align: left; }
.hero h1 { font-size: 2.5em; margin-bottom: 20px; color: #000; }
.hero p { font-size: 1.2em; color: #666; margin-bottom: 20px; }

/* App Store Badge Styling */
.app-store-link {
    display: inline-block;
    transition: transform 0.2s ease;
}

.app-store-link:hover {
    transform: scale(1.05); /* Subtle grow effect on hover */
}

.app-store-badge {
    width: 160px; /* Adjust this size to fit your layout perfectly */
    height: auto;
    display: block;
}

/* Hero Video Styling */
.hero-video {
    width: 250px;           /* Adjusts width to match your original placeholder */
    height: 500px;          /* Adjusts height to match your original placeholder */
    object-fit: cover;      /* This crops the video to fill the space without distortion */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Refined Logo Styling */
.logo {
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.logo-image {
    max-width: 80px; /* Forces it to never exceed 80px */
    width: 100%;     /* Ensures it fills the space up to the max-width */
    height: auto;
    display: block;
}

/* Optional: If you want the logo and nav links on the same line */
header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Footer */
footer { padding: 40px; text-align: center; font-size: 0.9em; color: #888; }