/* --- SHARED BRAND STYLES --- */
:root {
    --brand-cyan: #75E6F5;
    --brand-cyan-main: #34C6DD;
    --brand-orange: #FFA366;
    --brand-orange-dark: #FF7C2C;
}

/* Brand Store Buttons - REUSABLE COMPONENT */
.store-btn-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
    color: #0F172A;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

.store-btn-live.apple {
    background: linear-gradient(180deg, var(--brand-cyan) 0%, var(--brand-cyan-main) 100%);
    box-shadow: 0 4px 14px 0 rgba(117, 230, 245, 0.39);
}

.store-btn-live.apple:hover {
    background: linear-gradient(180deg, #92EDF8 0%, var(--brand-cyan) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(117, 230, 245, 0.6);
}

.store-btn-live.google {
    background: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    box-shadow: 0 4px 14px 0 rgba(255, 163, 102, 0.39);
}

.store-btn-live.google:hover {
    background: linear-gradient(180deg, #FFB88A 0%, var(--brand-orange) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 163, 102, 0.6);
}

/* Shared Navigation Injection Styles */
nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: rgba(26, 29, 36, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0;
    transition: all 0.3s ease;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: 0.95rem; font-weight: 600; color: #D4DCE2; text-decoration: none; transition: color 0.2s ease; }
.nav-links a:not(.btn):hover { color: #75E6F5; }
.nav-links a.btn-primary {
    background: linear-gradient(180deg, var(--brand-cyan) 0%, var(--brand-cyan-main) 100%);
    color: #0F172A;
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    border-radius: 50px;
}
.mobile-menu-btn { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }

/* Shared Footer Injection Styles */
footer { padding: 4rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #D4DCE2; font-size: 0.9rem; background-color: #1C2025; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-links a { color: #D4DCE2; text-decoration: none; }
.footer-links a:hover { color: white; }

/* Responsive Nav behavior */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-links.mobile-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: #1A1D24; padding: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .mobile-menu-btn { display: block; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-links { flex-direction: column; gap: 1rem; align-items: center; }
}

/* Common Layout Utilities */
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }