:root {
        --background-color: #111111;
        --grid-color: rgba(255, 255, 255, 0.05);
        --text-color: #eaeaea;
        --accent-color: #ffffff;
        --button-bg: #000000;
        --button-text: #ffffff;
      }

      ::selection {
        background: #FFF;
        color: #000;
      }
      /* For Firefox */
      ::-moz-selection {
        background: #FFF;
        color: #000;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Roboto", sans-serif;
        background-color: var(--background-color);
        color: var(--text-color);
        background-image:
          linear-gradient(var(--grid-color) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
        background-size: 30px 30px;
        /* --- MODIFIED FLEXBOX RULES TO PIN THE FOOTER --- */
        display: flex; /* Make body a flex container */
        flex-direction: column; /* Stack children vertically */
        min-height: 100vh; /* Ensure body is at least the viewport height */
        padding: 2rem;
        /*opacity: 0;*/
        /*animation: fadeIn 1s ease-in-out forwards;*/
      }

      /* --- NEW RULE --- */
      /* This is the key. The main wrapper will now grow to fill the available vertical space, pushing the footer down. */
      .container {
        max-width: 1200px;
        width: 100%;
        text-align: center;
        margin: auto; /* This centers the container horizontally */
        flex-grow: 1; /* This makes the container take up all available space */
        display: flex;
        flex-direction: column;
        justify-content: center; /* This centers the content within the container */
      }

      /* --- NEW RULE --- */
      /* Add some styling to the footer for visual separation. */
      .site-footer {
        text-align: center;
        padding-top: 1rem;
        border-top: 1px solid var(--grid-color);
      }

      /*@keyframes fadeIn {*/
        /*to {*/
          /*opacity: 1;*/
        /*}*/
      /*}*/

      header {
        width: 100%;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--grid-color);
      }

      .logo {
        font-family: "Roboto Mono", monospace;
        font-size: 1.25rem;
        font-weight: 400;
        color: var(--accent-color);
        letter-spacing: 2px;
      }

      .status-tag {
        font-family: "Roboto Mono", monospace;
        color: #888;
        margin-bottom: 1rem;
      }

      .headline {
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 900;
        color: var(--accent-color);
        line-height: 1.1;
        margin-bottom: 1.5rem;
      }

      .description {
        font-size: 1.1rem;
        font-weight: 300;
        line-height: 1.7;
        max-width: 600px;
        margin: 0 auto 2.5rem auto;
        color: #b1b1b1;
      }

      .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;

        background-color: var(--button-bg);
        color: var(--button-text);
        border: 1px solid var(--accent-color);
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        padding: 1rem 2.5rem;
        border-radius: 5px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 1rem;
      }

      .cta-button svg {
        width: 1.2em;
        height: 1.2em;
      }

      .cta-button:hover {
        background-color: var(--accent-color);
        color: var(--background-color);
      }

	.product-showcase {
	  display: flex;
	  flex-direction: column;
	  gap: 3.5rem;
	  margin-top: 4rem;
	  text-align: left;
	}

	.product-block {
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	  position: relative;
	  overflow: hidden;
	  border-radius: 10px;
	  padding: 2rem;
	  z-index: 1; 
  	}

	.product-block::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-size: cover;
	  background-position: center;
	  z-index: -2; 
	  transition: transform 0.5s ease;
	}

	.product-block:hover::after {
	  transform: scale(1.1);
	}

	/* Create a semi-transparent overlay to fade the background images */
	.product-block::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.6);
	  z-index: -1;
	}

	.product-block h3, .product-block p, .product-block a {
	  position: relative;
	  z-index: 2; /* Ensure the text is above the overlay */
	}

	/* MEDIA QUERY FOR HORIZONTAL LAYOUT */
	@media (min-width: 600px) {
	  .product-showcase {
		flex-direction: row; /* Change to row for desktop */
		gap: 2rem; /* Reduced gap for a tighter look */
	  }
	  .product-block {
		flex: 1; /* Distribute space equally */
	  }
	}

	/* Individual background image styling is now applied to the ::after pseudo-element */
	.rc-car-block::after {
	  background-image: url('');
	}

	.avenar-communicator-block::after {
	  background-image: url('/static/image/cyclists.jpg');
	}

	.product-block h3 {
	  font-size: 2.25rem;
	  font-weight: 900;
	  color: var(--accent-color);
	}
	.product-block p {
	  font-size: 1.1rem;
	  color: #b1b1b1;
	  line-height: 1.6;
	}
	.product-link {
		display: inline-block;
		align-self: flex-start; /* This is the new line */
		font-size: 1rem;
		font-weight: 700;
		color: var(--accent-color);
		text-decoration: none;
		margin-top: 0.5rem;
		padding: 0.5rem 1rem;
		border: 1px solid white;
		transition: all 0.3s ease;
	}
	.product-link::after {
	  content: " \2192"; /* Unicode for a right arrow */
	  display: inline-block;
	  transform: translateX(0);
	  transition: transform 0.3s ease;
	}
	.product-link:hover {
	  color: var(--background-color);
	  background-color: var(--accent-color);
	  border-color: var(--accent-color);
	}
	.product-link:hover::after {
	  transform: translateX(5px);
	}

	.back-link {
		color: var(--accent-color);
		text-decoration: none;
		font-family: "Roboto Mono", monospace;
		font-size: 1rem;
		position: absolute;
		left: 2rem;
		top: 2rem;
		opacity: 0.7;
		transition: opacity 0.3s ease;
	}

	.back-link:hover {
		opacity: 1;
	}