/* Reset and Base Styles */
body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #ffffff; /* White background */
    color: #1d1d1f; /* Apple's primary text color */
    -webkit-font-smoothing: antialiased; /* Smoother fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

/* Header and Navigation */
header {
    background: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    backdrop-filter: saturate(180%) blur(20px); /* Frosted glass effect */
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #d2d2d7; /* Subtle border */
    padding: 0.8rem 0;
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 100;
    width: 100%;
}

header nav {
    max-width: 980px; /* Consistent width */
    margin: 0 auto;
    padding: 0 20px;
    display: flex; /* Use flexbox for alignment */
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between; /* Space out logo, links, actions */
    align-items: center;
    width: 100%;
}

.nav-brand {
    font-weight: 600;
    font-size: 1.1rem;
    color: #1d1d1f;
}

header nav ul {
    list-style: none;
    padding-left: 0; /* Ensure no default padding */
}

header nav ul li {
    display: inline-block; /* Use inline-block for spacing */
    margin: 0 15px;
}

header nav ul li:first-child {
    margin-left: 0; /* Align first item to the left */
}

header nav ul li a {
    color: #1d1d1f;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

header nav ul li a.active {
    color: #007aff; /* Highlight active page */
    font-weight: 500;
}

header nav ul li a:hover {
    color: #007aff; /* Apple's blue accent color */
}

.nav-actions .nav-button {
    background-color: #007aff;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.nav-actions .nav-button:hover {
    background-color: #0056b3;
}

/* Hero Section Styles */
.hero {
    text-align: center;
    padding: 60px 20px; /* More vertical padding */
    margin-bottom: 40px; /* Space below hero */
}

.hero h1 {
    font-size: 3rem; /* Even larger hero heading */
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem; /* Larger paragraph text */
    color: #515154;
    max-width: 600px; /* Limit width for readability */
    margin: 0 auto 2rem auto; /* Center paragraph and add bottom margin */
}

.cta-button {
    display: inline-block;
    background-color: #007aff;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

/* Main Content Area */
main {
    flex: 1;
    padding: 40px 20px; /* Increased padding */
    max-width: 980px; /* Consistent width */
    margin: 0 auto; /* Center content */
    width: 100%;
}

main h1 {
    font-size: 2.5rem; /* Larger heading */
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    color: #1d1d1f;
}

main p {
    font-size: 1.1rem;
    color: #515154; /* Slightly lighter text color */
    text-align: center;
    margin-bottom: 3rem;
}

/* Software List Section */
#software-list {
    margin-top: 40px;
}

#software-list h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #1d1d1f;
}

#software-list ul {
    display: grid; /* Use grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px; /* Spacing between items */
}

#software-list li {
    background-color: #f5f5f7;
    padding: 0; /* Remove padding if image is edge-to-edge */
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    overflow: hidden; /* To ensure child elements with rounding are clipped */
}

#software-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.05);
}

.software-icon {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    margin-bottom: 15px;
}

#software-list li .card-link-wrapper h3 {
    padding: 0 20px; /* Add padding back to text elements */
    margin-top: 10px; /* Space above title */
}

#software-list li .card-link-wrapper p {
    padding: 0 20px; /* Add padding back to text elements */
    font-size: 0.9rem; /* Slightly smaller for card */
}

#software-list h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d1d1f;
}

#software-list p {
    font-size: 0.95rem;
    color: #515154;
    text-align: center; /* Ensure description is centered */
    margin-bottom: 15px; /* Add space before potential link */
}

#software-list .learn-more {
    padding: 10px 20px; /* Add padding to learn more link */
    margin-top: auto; /* Push to bottom */
    background-color: #ffffff; /* Give it a background to stand out from image */
    border-top: 1px solid #e5e5e5; /* Separator line */
    width: 100%; /* Make it full width of the card */
}

.learn-more {
    color: #007aff;
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 10px; /* Adjust spacing */
    display: inline-block; /* Make it blocky for easier clicking */
    position: relative; /* Ensure learn more is clickable */
    z-index: 2;
}

.learn-more:hover {
    text-decoration: underline;
}

.card-link-wrapper {
    display: block; /* Make the link cover the area */
    color: inherit; /* Inherit text color */
    text-decoration: none;
}

.card-link-wrapper h3,
.card-link-wrapper p {
    position: relative; /* Ensure text is above the link wrapper if needed */
    z-index: 1;
}

/* Software Card Image */
.card-image-container {
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #e9ecef; /* Background for letterboxing */
    /* Allow the container to grow with the image */
    height: auto; 
}

.software-card-image {
    width: 100%;
    height: auto; /* Allow image to define its height based on aspect ratio */
    display: block;
    object-fit: contain; /* Ensures the whole image is visible */
    /* Removed fixed height: 180px; */
}

/* Software Detail Page Styles */
.software-detail {
    padding: 20px 0; /* Add some padding top/bottom */
}

.software-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;
}

.software-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tagline {
    font-size: 1.2rem;
    color: #515154;
}

/* Optional Visuals Section */
.software-visuals {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px; /* Add some horizontal padding */
}

.software-visuals img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; /* Rounded corners for the main image */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e5e5; /* Subtle border */
}

/* Description and Features Sections */
.software-description,
.software-features,
.software-actions {
    margin-bottom: 40px;
}

.software-description h2,
.software-features h2,
.software-actions h2 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.software-description p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    text-align: left; /* Override centered p from main */
    margin-bottom: 1rem; /* Reset margin */
    margin-left: 20px; /* Add left margin for indentation */
}

.software-features ul {
    list-style: disc; /* Use standard bullet points */
    margin-left: 20px; /* Indent list */
}

.software-features li {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333;
}

/* Action Buttons */
.software-actions {
    text-align: center; /* Center the buttons container */
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.button-primary {
    background-color: #007aff;
    color: white;
}

.button-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.button-secondary {
    background-color: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.button-secondary:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
}

/* Purchase Information Section */
.purchase-info {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9; /* Light background to make it stand out */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: left; /* Align text to the left for readability */
}

.purchase-info p strong {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px; /* Space below the main heading */
    display: block; /* Make it block to take full width */
}

.purchase-info ul {
    list-style-type: disc; /* Use standard bullets */
    margin-left: 20px; /* Indent list items */
    padding-left: 0; /* Reset padding if any */
}

.purchase-info li {
    font-size: 0.95rem;
    color: #555; /* Slightly lighter text for list items */
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Download Page Styles */
.download-page {
    text-align: center;
    padding: 40px 20px;
}

.download-page h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.download-page p {
    font-size: 1.1rem;
    color: #515154;
    margin-bottom: 15px;
    text-align: center; /* Override any other p alignments */
}

.download-link-container {
    margin: 30px auto;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    max-width: 600px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.download-link-container .button {
    margin-bottom: 15px;
    padding: 15px 30px; /* Make button larger */
    font-size: 1.1rem;
}

.extraction-code {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    background-color: #e9ecef;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
    border: 1px dashed #adb5bd;
}

.download-instructions {
    font-size: 0.95rem;
    color: #6c757d;
    margin-top: 20px;
}

/* Styles for the new downloads page */
.downloads-page {
    padding: 20px;
    max-width: 980px; /* Consistent width with other pages */
    margin: 0 auto; /* Center content */
}

.tabs {
    overflow: hidden;
    margin-bottom: 20px;
    display: flex; /* Use flexbox for better alignment and spacing */
    border-bottom: 2px solid #dee2e6; /* Add a bottom border for separation */
}

.tabs button {
    background-color: transparent; /* Make button background transparent */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 20px; /* Adjust padding */
    transition: 0.3s;
    font-size: 1rem; /* Adjust font size */
    color: #495057; /* Softer text color */
    border-bottom: 2px solid transparent; /* For active state indicator */
    margin-bottom: -2px; /* Align with the container's bottom border */
}

.tabs button:hover {
    color: #007aff; /* Apple's blue accent color on hover */
    border-bottom-color: #007aff; /* Indicate hover with border color */
}

.tabs button.active {
    color: #007aff; /* Active tab text color */
    font-weight: 600; /* Make active tab font bolder */
    border-bottom-color: #007aff; /* Highlight active tab with a thicker border */
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.tabcontent h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.tabcontent table {
    width: 100%;
    border-collapse: collapse;
}

.tabcontent th, .tabcontent td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.tabcontent th {
    background-color: #f2f2f2;
}

/* Footer */
footer {
    background: #f5f5f7; /* Light gray background */
    color: #515154; /* Footer text color */
    text-align: center;
    padding: 2rem 0;
    margin-top: auto;
    border-top: 1px solid #d2d2d7; /* Subtle top border */
    font-size: 0.85rem;
}

footer p {
    margin-bottom: 0.5rem;
    color: #6e6e73; /* Slightly muted footer text */
    font-size: 0.8rem;
    text-align: center; /* Ensure footer text is centered */
}

footer p:last-child {
    margin-bottom: 0;
}

footer a {
    color: #007aff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}