/* Inverted colors: Bold white and black scheme for a fresh, high-contrast masculine feel */
        body {
            background-color: #ffffff; /* Solid white background */
            color: #000000; /* Pure black text for high contrast */
            font-family: 'Spartan', sans-serif;
            margin: 0;
            padding: 0;
            text-transform: uppercase; /* Uppercase for bold, aggressive typography */
        }
        header {
            background-color: #ffffff; /* Fully white header */
            padding: 20px;
            text-align: center;
            border-bottom: 2px solid #000000; /* Black border for separation */
        }
        header h1 {
            margin: 0;
            color: #000000;
            font-weight: 700;
            font-size: 2.5em;
            letter-spacing: 2px; /* Spaced for impact */
        }
        nav a {
            color: #000000;
            margin: 0 15px;
            text-decoration: none;
            font-weight: 700;
        }
        nav a:hover {
            color: #333333; /* Subtle dark grey hover */
        }
        section {
            padding: 50px 20px; /* Increased padding for prominence */
            text-align: center;
            margin: 0 auto;
            max-width: 1200px; /* Centered content for modern layout */
        }
        h2, h3 {
            color: #000000;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }
        p {
            color: #000000;
            font-size: 1.1em;
            margin: 10px 0;
        }
        /* Hero section inspired by promotional banners */
        .hero {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #eeeeee; /* Lighter shade for banner feel */
            padding: 60px 20px;
            border-bottom: 4px solid #000000; /* Bold black underline */
        }
        .logo-container {
            margin-right: 50px;
        }
        .logo-container img {
            width: 250px; /* Larger logo for prominence */
            height: auto;
            max-width: 100%; /* Ensure responsiveness */
        }
        .intro-text {
            max-width: 600px;
            text-align: left;
        }
        .intro-text h2 {
            font-size: 2em;
            margin-bottom: 15px;
        }
        /* Product cards inspired by clean grids with bold pricing */
        .arsenal {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .product {
            background-color: #e5e5e5; /* Light grey for contrast */
            padding: 25px;
            border-radius: 0; /* Sharp edges for edgy feel */
            width: 28%;
            margin: 10px;
            border: 1px solid #000000; /* Black border for definition */
            box-sizing: border-box; /* Ensure padding doesn't add to width */
        }
        .product h3 {
            font-size: 1.5em;
        }
        .product p.price {
            font-size: 1.8em;
            font-weight: 700;
            color: #000000;
        }
        .product a {
            background-color: #000000; /* Black button */
            color: #ffffff; /* White text */
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 0; /* Square buttons */
            display: inline-block;
            font-weight: 700;
            margin-top: 10px;
        }
        .product a:hover {
            background-color: #222222;
        }
        /* Contact form */
        form {
            background-color: #e5e5e5;
            padding: 30px;
            border-radius: 0;
            max-width: 500px;
            margin: 0 auto;
            border: 1px solid #000000;
        }
        input, textarea {
            width: 100%;
            padding: 12px;
            margin: 12px 0;
            background-color: #ffffff;
            color: #000000;
            border: 1px solid #000000;
            border-radius: 0;
            box-sizing: border-box;
        }
        button {
            background-color: #000000;
            color: #ffffff;
            padding: 12px 25px;
            border: none;
            border-radius: 0;
            cursor: pointer;
            font-weight: 700;
            width: 100%; /* Full width on mobile */
        }
        button:hover {
            background-color: #222222;
        }
        footer {
            background-color: #ffffff;
            color: #000000;
            text-align: center;
            padding: 15px;
            border-top: 2px solid #000000;
            font-size: 0.9em;
        }
        /* Hero button */
        .hero a {
            background-color: #000000;
            color: #ffffff;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 0;
            font-size: 1.2em;
            font-weight: 700;
            display: inline-block;
            margin-top: 20px;
        }
        .hero a:hover {
            background-color: #222222;
        }
        /* Mobile optimizations */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2em; /* Slightly smaller for mobile */
            }
            nav a {
                margin: 0 10px;
                font-size: 0.9em; /* Adjust nav for touch */
            }
            section {
                padding: 30px 10px; /* Reduce padding for mobile */
            }
            .hero {
                flex-direction: column; /* Stack logo and text vertically */
                padding: 40px 10px;
            }
            .logo-container {
                margin-right: 0;
                margin-bottom: 30px; /* Space below logo */
            }
            .logo-container img {
                width: 200px; /* Smaller logo on mobile */
            }
            .intro-text {
                text-align: center; /* Center text for better mobile read */
                max-width: 100%;
            }
            .intro-text h2 {
                font-size: 1.5em;
            }
            .arsenal {
                flex-direction: column; /* Stack products */
                align-items: center;
            }
            .product {
                width: 90%; /* Full width on mobile */
                margin: 10px 0;
            }
            form {
                max-width: 90%; /* Wider form on mobile */
            }
            .hero a, .product a, button {
                padding: 10px 20px; /* Slightly smaller buttons for touch */
                font-size: 1em;
            }
        }
        @media (max-width: 480px) {
            header h1 {
                font-size: 1.8em;
            }
            nav {
                display: flex;
                flex-direction: column; /* Stack nav links if needed */
            }
            nav a {
                margin: 5px 0;
            }
        }