:root {
    --primary-color: #8c1e14;
    --primary-darker: #b92e1f;
    --text-color: #333;
    --light-text-color: #555;
    --background-color: #f8f9fa; /* Slightly lighter background */
    --card-background: #ffffff;
    --footer-background: #343a40; /* Darker footer */
    --footer-text: #e9ecef;
    --font-primary: 'Open Sans', sans-serif;
    --border-radius: 8px; /* Slightly smaller radius */
    --box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    --box-shadow-hover: 0 8px 25px rgba(140, 30, 20, 0.15);
    --transition-speed: 0.3s;
    --focus-outline-color: #4a90e2; /* Example focus color */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.7; /* Increased line-height for readability */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 0; /* Adjusted padding for logo height */
    /* text-align: center; Removed, handled by flex */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Updated container within header for flex layout */
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push items apart */
    gap: 1.5rem; /* Space between items */
    position: relative; 
}

.header-logo {
    height: 50px; /* Control logo size */
    width: auto; /* Maintain aspect ratio */
    filter: brightness(0) invert(1); /* Make logo white */
}

/* Style for header title (previously h1, now h2) */
h2 {
    font-weight: 700;
    font-size: 1.8rem; /* Adjusted size for header */
    margin: 0 1rem 0 0; /* Add some right margin, remove flex-grow */
    /* flex-grow: 1; /* Removed */
    /* text-align: center; /* Removed */
    /* Optional: Add padding-right equal to logo width + gap if perfect centering is needed */
    /* padding-right: calc(50px + 1.5rem); */ 
}

/* Keep specific styling for intro text h2 */
.intro-text h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Removed justify-content: center to allow content to flow naturally */
    padding: 3rem 1rem; /* Increased top/bottom padding */
}

.container {
    width: 100%;
    max-width: 1100px; /* Slightly wider container */
    margin: 0 auto;
    padding: 0 1rem; /* Add padding for smaller screens */
}

.intro-text {
    text-align: center;
    margin-bottom: 4rem; /* More space before grid */
}

.intro-text p {
    font-size: 1.1rem;
    color: var(--light-text-color);
    max-width: 750px; /* Slightly wider text block */
    margin: 0 auto;
}

.app-grid {
    display: grid; /* Using grid for better alignment */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid columns */
    justify-content: center;
    gap: 2.5rem; /* Increased gap */
    width: 100%;
}

.app-box {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    /* width: 300px; Removed fixed width, handled by grid */
    /* height: 250px; Removed fixed height, let content decide */
    min-height: 260px; /* Ensure a minimum height */
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    outline: none; /* Remove default browser outline */
}

.app-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-hover);
}

/* Add focus state for accessibility */
.app-box:focus-visible {
    box-shadow: var(--box-shadow-hover), 0 0 0 3px var(--focus-outline-color);
    transform: translateY(-8px); /* Optional: match hover transform */
}

.app-header {
    /* background: linear-gradient(135deg, var(--primary-color), var(--primary-darker)); Changed gradient */
    background: var(--primary-color);
    color: white;
    padding: 1.5rem; /* Keep padding */
    text-align: center;
    min-height: 7rem; /* Ensure consistent header height */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

.app-header h3 {
    font-size: 1.5rem; /* Adjusted size */
    font-weight: 700;
    margin: 0; /* Remove default margin */
}

.app-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.app-description {
    font-size: 1rem; 
    color: var(--light-text-color);
    margin-bottom: 1rem; 
    font-weight: 400; /* Make description slightly lighter */
}

.app-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 0;
    text-align: left; 
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
    border-radius: 4px; /* Add radius for background hover */
    padding: 0.5rem 0.8rem; /* Adjust padding for background */
    margin-left: -0.8rem; /* Counteract added padding */
}

.app-link:hover, 
.app-link:focus-visible {
    color: var(--primary-darker);
    background-color: rgba(140, 30, 20, 0.08); /* Subtle background on hover/focus */
    text-decoration: underline; /* Add underline on hover/focus */
    outline: none; /* Remove default focus outline if using background */
}

/* Styles for the Coming Soon section */
.coming-soon {
    text-align: center;
    margin-top: 4rem; /* Space above the section */
    padding: 2rem;
    background-color: rgba(140, 30, 20, 0.03); /* Very subtle background */
    border-radius: var(--border-radius);
    color: var(--light-text-color);
}

.coming-soon p {
    font-size: 1.1rem;
    font-style: italic;
    margin: 0;
}

footer {
    background-color: var(--footer-background);
    color: var(--footer-text);
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: 3rem; /* Add space above footer */
}

/* Style footer container */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1rem; /* Add gap for wrapping */
}

.footer-content p {
    margin: 0; /* Reset default paragraph margin */
}

.contact-button {
    display: inline-block;
    background-color: var(--primary-color); 
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
    border: none;
    cursor: pointer;
    white-space: nowrap; /* Prevent button text wrapping */
}

.contact-button:hover, 
.contact-button:focus-visible {
    background-color: var(--primary-darker);
    transform: translateY(-2px);
    outline: none;
}

/* Hide screen notice by default */
.screen-notice {
    display: none;
}

/* Show and style screen notice on smaller screens */
.screen-notice {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin: -1rem auto 2rem auto; /* Adjust margins to place between grid and footer */
    padding: 0 1rem;
    max-width: 90%;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjusted breakpoint */
    /* Style for header title (previously h1, now h2) */
    h2 {
        font-size: 1.5rem; /* Smaller title on smaller screens */
        margin-right: 0.5rem; /* Reduce margin */
        /* Optional: Adjust padding-right for responsive logo size */
        /* padding-right: calc(40px + 1.5rem); */ 
    }

    .header-logo {
        height: 40px; /* Smaller logo */
    }

    .contact-button {
        padding: 0.5rem 0.8rem; /* Smaller padding */
        font-size: 0.9rem; /* Smaller text */
    }

    .intro-text h2 {
        font-size: 1.6rem;
    }

    .intro-text p {
        font-size: 1rem;
    }
    
    .app-grid {
        grid-template-columns: 1fr; /* Stack boxes on smaller screens */
        gap: 2rem;
        max-width: 400px; /* Limit width on mobile */
        margin-left: auto;
        margin-right: auto;
    }
    
    .app-box {
        min-height: auto; /* Allow height to shrink */
    }

    /* Center footer content on small screens */
    .footer-content {
        flex-direction: column; /* Stack items */
        justify-content: center; /* Center items vertically */
    }

    .contact-button {
        width: 100%; /* Make button full width */
        text-align: center;
    }
}

@media (max-width: 480px) {
    main {
        padding: 2rem 1rem;
    }
    header, footer {
        padding: 1.5rem 1rem;
    }

    header .container {
        gap: 0.8rem; /* Further reduce gap */
    }

    h2 {
        font-size: 1.1rem; /* Further reduce title size */
        /* Optional: Adjust padding-right for responsive logo size */
        /* padding-right: calc(35px + 1rem); */
    }

    .header-logo {
        height: 35px;
    }

    /* Center footer content on small screens */
    .footer-content {
        flex-direction: column; /* Stack items */
        justify-content: center; /* Center items vertically */
    }

    .contact-button {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}