:root { --primary: #7c3aed; --primary-dark: #6d28d9; --secondary: #06b6d4; --accent: #10b981; --background: #0a0a0f; --surface: #151521; --surface-light: #2d3748; --text: #ffffff; --text-secondary: #94a3b8; --error: #ef4444; --warning: #f59e0b; --success: #10b981; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--background); color: var(--text); line-height: 1.6; overflow-x: hidden; }
.header { position: fixed; top: 0; left: 0; right: 0; background: rgba(10, 10, 15, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--surface-light); z-index: 1000; padding: 0 2rem; }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { height: 64px; width: 64px; }
.nav { display: flex; gap: 2rem; align-items: center; }
.nav-link { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s; padding: 8px 0; position: relative; }
.nav-link:hover { color: var(--text); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transition: transform 0.3s; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-button { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; padding: 8px 20px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: transform 0.3s, box-shadow 0.3s; }
.nav-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3); }
.main-content { margin-top: 80px; min-height: calc(100vh - 200px); }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.footer { background: var(--surface); border-top: 1px solid var(--surface-light); padding: 2rem; text-align: center; }
.footer-content { max-width: 1200px; margin: 0 auto; color: var(--text-secondary); font-size: 0.9rem; }
.feature-primary { color: var(--primary); }
.feature-secondary { color: var(--secondary); }
.feature-accent { color: var(--accent); }

@media (max-width: 768px) {
    .header { padding: 0 1rem; }
    .header-container { height: auto; padding: 1rem 0; }
    .nav { gap: 1rem; }
    .nav-link { font-size: 0.85rem; }
    .nav-button { padding: 6px 16px; font-size: 0.85rem; }
    .container { padding: 1rem; }
    .main-content { margin-top: 70px; }
}

@media (max-width: 480px) {
    .nav { gap: 0.75rem; }
    .nav-link { font-size: 0.8rem; }
    .nav-button { display: block; }
}

/* iPhone 13 (390px) specific */
@media (max-width: 390px) {
    .header-container {
        flex-direction: column;
        height: auto;
        padding: 0.5rem;
    }

    .logo-img {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 0.5rem;
    }

    .nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .nav-link, .nav-button {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .nav-button {
        margin-top: 0.5rem;
    }

    /* Fix footer stacking */
    .footer-content {
        padding: 0.5rem;
        line-height: 1.4;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* Hero section fixes */
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.95rem !important;
        padding: 0 0.5rem;
    }
    
    .capsule-preview {
        gap: 1rem !important;
    }
    
    .capsule {
        width: 120px !important;
        height: 120px !important;
    }
    
    .starters-showcase {
        gap: 0.5rem !important;
    }
    
    .starter {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    
    .cta-primary, .cta-secondary {
        width: 100% !important;
        max-width: 280px !important;
        padding: 0.8rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* iPhone 13 Header Optimization */
@media only screen and (max-width: 390px) {
    .header {
        padding: 0 0.5rem;
    }
    
    .header-container {
        padding: 0.5rem 0;
        gap: 0.8rem;
        flex-wrap: wrap;
    }
    
    .logo {
        order: 1;
        flex: 0 0 auto;
    }
    
    .nav {
        order: 2;
        width: 100%;
        justify-content: center;
        gap: 0.8rem;
        flex-wrap: wrap;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
        margin: 0.1rem;
    }
    
    .nav-button {
        font-size: 0.8rem;
        padding: 0.4rem 0.9rem;
        margin-top: 0.2rem;
    }
    
    .main-content {
        margin-top: 110px;
    }
}

/* Extra small iPhone screens */
@media only screen and (max-width: 360px) {
    .nav-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .nav-button {
        font-size: 0.75rem;
        padding: 0.35rem 0.8rem;
    }
}

@media only screen and (max-width: 390px) {
    .header {
        padding: 0 0.5rem;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .header-container {
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        padding: 0.4rem 0;
        gap: 0.5rem;
    }
    
    .logo {
        flex: 0 0 auto;
        margin: 0;
    }
    
    .logo-img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .nav {
        width: 100%;
        justify-content: center;
        gap: 0.6rem;
        margin: 0;
        padding: 0.2rem 0;
    }
    
    .nav-link {
        font-size: 0.78rem;
        padding: 0.35rem 0.65rem;
        margin: 0;
    }
    
    .nav-button {
        font-size: 0.78rem;
        padding: 0.4rem 0.85rem;
        margin: 0.1rem;
        display: inline-block;
    }
    
    .main-content {
        margin-top: 95px;
    }
}

@media only screen and (max-width: 375px) {
    .nav {
        gap: 0.5rem;
    }
    
    .nav-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .nav-button {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }
}