body {
    font-family: Arial, 'Segoe UI', Helvetica, sans-serif;
    background: #f9f9f9;
    margin: 0;
    color: #222;
}

header {
    text-align: center;
    background: #073763;
    color: #fff;
    padding: 32px 10px 20px 10px;
}

.logo {
    width: 120px;
    margin-bottom: 16px;
}

.slogan, .footer-slogan {
    color: #FFD966;
    font-style: italic;
    margin: 8px 0;
}

nav {
    background: #FFD966;
    text-align: center;
    padding: 10px 0;
}
nav a {
    color: #073763;
    margin: 0 16px;
    font-weight: bold;
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 800px;
    margin: 32px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(7,55,99,0.07);
    padding: 32px 24px;
}

h1, h2 {
    color: #073763;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 16px;
}

.product {
    flex: 1 1 300px;
    background: #f2f7fb;
    border-radius: 8px;
    padding: 18px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

footer {
    text-align: center;
    background: #073763;
    color: #fff;
    padding: 20px 0 8px 0;
    margin-top: 32px;
}

@media (max-width: 700px) {
    .product-list {
        flex-direction: column;
    }
    main {
        padding: 16px 4px;
    }
}