:root {
    --primary-color: #ffffff; /* White */
    --secondary-color: #a0a0a0; /* Light Gray */
    --text-color: #ffffff; /* White */
    --bg-color: #000000; /* Black */
    --border-color: #333333; /* Dark Gray for borders */
    --container-width: 960px; /* Slightly wider container */
    --base-font-size: 16px;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Use a standard sans-serif stack */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6; /* Adjusted line-height */
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    font-size: var(--base-font-size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* padding-top: 80px; */ /* Removed: Space for fixed header - Moved to main */
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: normal; /* Less bold headings */
    line-height: 1.3;
}

/* Specific heading sizes if needed, otherwise rely on browser defaults or main content styles */

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--bg-color);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

header .header-container { /* Use a specific container class for header */
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Style for the new nav links */
.header-nav-links {
    display: flex;
    gap: 1.5rem; /* Space between nav links */
}

.header-nav-links a {
    font-size: 0.9rem;
    font-weight: 500; /* Medium weight */
    text-transform: uppercase; /* Match image */
    letter-spacing: 0.5px;
}

.logo {
    /* Keep existing logo styles or adjust */
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
}

.logo img {
    height: 45px; /* Increased logo height */
    width: auto;
    display: block;
    /* Add filter to invert if the logo is dark */
    /* filter: invert(1); */
}

/* Main content area */
main {
    /* padding: 40px 0; */ /* Remove old padding */
    padding: 80px 0 40px 0; /* Add top padding for fixed header, keep bottom padding */
}

/* Styles for the numbered list */
.principles-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 600px; /* Constrain width like the image */
    margin-left: auto; /* Center the list */
    margin-right: auto;
}

.principles-list li {
    margin-bottom: 1rem;
    font-size: 1.5rem; /* Larger font size for list items */
    line-height: 1.4;
    display: flex; /* Use flex for number alignment */
    align-items: baseline; /* Align baseline of number and text */
}

.principles-list .item-number {
    color: var(--secondary-color); /* Gray number */
    font-size: 1.3rem; /* Slightly smaller number */
    font-weight: bold;
    min-width: 50px; /* Ensure space for two digits */
    padding-right: 1rem;
}

.principles-list .item-text {
    color: var(--primary-color); /* White text */
}

/* Footer */
footer {
    background-color: var(--bg-color);
    color: var(--secondary-color);
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem; /* Smaller font size for footer */
}

.footer-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Space out start/end links */
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-links-start,
.footer-links-end {
    display: flex;
    gap: 1rem; /* Space between footer links */
    flex-wrap: wrap;
}

.footer-links-start a,
.footer-links-end a {
    color: var(--secondary-color);
}

.footer-links-start a:hover,
.footer-links-end a:hover {
    color: var(--primary-color);
}

/* Hide elements we don't need anymore */
.intro-section,
.projects-section,
.services-section,
#begin-button,
#reveal-button,
#intro-paragraph,
#main-content-wrapper, /* Remove blur container if it exists */
.footer-logo, /* Hide old footer logo text */
.footer-links ul, /* Hide old footer list */
.begin-btn /* Hide old button class */
{
    display: none !important; /* Use !important cautiously, but helpful for overrides */
}

/* Responsive */
@media (max-width: 768px) {
    main { padding-top: 60px; } /* Adjust main padding for smaller mobile header */
    header .header-container { padding: 0 1rem; }
    .header-nav-links { gap: 1rem; }
    .header-nav-links a { font-size: 0.8rem; }
    .logo img { height: 20px; }

    .principles-list { max-width: 100%; padding: 0 1rem; }
    .principles-list li { font-size: 1.2rem; }
    .principles-list .item-number { font-size: 1.1rem; min-width: 40px; padding-right: 0.5rem;}

    .footer-content { flex-direction: column; align-items: center; gap: 15px; }
    .footer-links-start, .footer-links-end { justify-content: center; }
}

/* Remove any remaining specific styles for old sections/elements if they were missed */
/* e.g., .problem-section, .solution-section, etc. */
/* Remove button styles */
/* Remove blur/typing effects */
@keyframes blink { /* Keep or remove based on whether typing effect is kept */
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* Comment out or remove styles related to features not in the new design */
/*
.blur-content { ... }
.blur-content.unblurred { ... }
#intro-paragraph::after { ... }
#intro-paragraph.typing::after { ... }
*/

/* Banner Image Styles */
.banner-container {
    width: 100%;
    /* Adjust max-height as desired, or remove to let width control size */
    /* max-height: 250px; */ /* Commented out to show full height */
    /* overflow: hidden; */ /* Removed overflow */
    margin-bottom: 40px; /* Restored space below banner */
}

.banner-image {
    display: block; /* Remove extra space below image */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    /* object-fit: cover; */ /* Removed object-fit */
    /* object-position: bottom; */ /* Removed object-position */
}