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

/* Palette from user image */
:root {
    --primary: #539562; /* Moss Green */
    --primary-dark: #427A4F; /* Darker Moss Green */
    --text: #1D2729; /* Deep Moss */
    --text-light: #A1B9B9; /* Frost Gray */
    --bg: #FEFAE1; /* Ivory Cream */
    --bg-alt: #FFFFFF; /* White */
    --border: #CADEDF; /* Cloud Blue */

    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Inter', sans-serif;
    --transition-speed: 0.3s ease; /* Added for consistency */

    /* Added frost-gray from other pages for consistency */
    --frost-gray: #A1B9B9;
}

[data-theme="dark"] {
    --primary: #539562;
    --primary-dark: #6EBF80;
    --text: #FEFAE1;
    --text-light: #A1B9B9;
    --bg: #1D2729;
    --bg-alt: #2C3E40; /* Used for cards */
    --border: #3E5356;

    /* Added frost-gray from other pages for consistency */
    --frost-gray: #A1B9B9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
     overflow-x: hidden; /* Added for consistency */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem; /* Slightly reduced padding */
}

/* Typography */
h1, h2, h3 {
    font-family: var(--heading-font);
    letter-spacing: -0.02em;
    line-height: 1.2;
     color: var(--text); /* Added for consistency */
}

/* NEW: Eyebrow text style */
.eyebrow-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Header/Nav */
nav {
    padding: 1.25rem 0; /* Reduced padding */
    border-bottom: 1px solid var(--border);
    background: rgba(from var(--bg) r g b / 0.8);
    backdrop-filter: blur(5px);
    transition: background-color var(--transition-speed);
    position: sticky;
    top: 0;
    z-index: 100;
}

[data-theme="dark"] nav {
     background: rgba(from var(--bg) r g b / 0.8);
 }

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.logo {
    font-size: 1.4rem; /* Slightly smaller */
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    font-family: var(--heading-font);
     transition: color var(--transition-speed); /* Added */
}

.nav-links {
    display: flex;
    gap: 1.75rem; /* Adjusted gap */
    align-items: center;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem; /* Slightly smaller */
    font-weight: 600;
    transition: color var(--transition-speed); /* Added */
    position: relative; /* Added */
}

/* Added underline effect from other pages */
 .nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    transition: width var(--transition-speed);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--primary); }

/* NEW: Active nav link style */
.nav-links a.active {
    color: var(--primary);
}
.nav-links a.active::after {
    width: 100%;
}


/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px; /* Reduced padding */
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 22px; /* Slightly smaller */
    height: 2px; /* Thinner lines */
    background: var(--text);
    border-radius: 1px;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Corrected the hamburger 'X' transformation for perfect centering */
.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


.theme-toggle {
    position: relative;
    width: 48px; /* Slightly smaller */
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
    display: flex; /* MODIFIED */
    align-items: center; /* MODIFIED */
}

.theme-toggle:hover {
    opacity: 0.8;
}

.theme-toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* Smaller slider */
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* --- CORRECTED SECTION --- */
/* SVG Icon styling for toggle */
.theme-toggle .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    stroke: var(--primary);
    fill: none;
    display: none; /* Hide BOTH icons by default */
}

/* Explicitly show sun ONLY in light mode (or default) */
html:not([data-theme="dark"]) .icon-sun {
    display: block;
    stroke: var(--primary);
}
[data-theme="light"] .icon-sun {
    display: block;
    stroke: var(--primary);
}

/* Explicitly show moon ONLY in dark mode */
[data-theme="dark"] .icon-moon {
    display: block;
    stroke: var(--primary);
}
/* --- END CORRECTED SECTION --- */


[data-theme="dark"] .theme-toggle {
    background: var(--bg-alt);
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(24px); /* Adjusted translation */
}

/* Hero (from index.html) */
.hero {
    text-align: center; /* MODIFIED: Reverted */
    padding: 4rem 0; /* Reduced padding */
    background: var(--bg);
    transition: background 0.3s ease;
    /* border-bottom: 1px solid var(--border); */ /* REMOVED border */
}

.badge {
    display: inline-block;
    padding: 0.4rem 0.9rem; /* Smaller padding */
    background: var(--primary);
    color: var(--bg);
    border-radius: 16px; /* Pill shape */
    font-size: 0.8rem; /* Smaller text */
    font-weight: 600;
    margin-bottom: 1.25rem;
}

[data-theme="dark"] .badge {
    background: var(--primary);
    color: var(--bg);
}

h1 {
    font-size: 3rem; /* Slightly smaller */
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
     color: var(--text); /* Added */
}

.subtitle {
    font-size: 1.15rem; /* Slightly smaller */
    color: var(--text-light);
    margin-bottom: 2rem; /* Reduced margin */
    line-height: 1.6;
    max-width: 650px; /* MODIFIED: Reverted */
    margin-left: auto; /* MODIFIED: Reverted */
    margin-right: auto; /* MODIFIED: Reverted */
}

.cta-buttons {
    display: flex;
    gap: 0.75rem; /* Reduced gap */
    justify-content: center; /* MODIFIED: Reverted */
    flex-wrap: wrap;
}

.btn {
    padding: 0.75rem 1.5rem; /* Smaller padding */
    border: none;
    border-radius: 8px; /* Slightly less rounded */
    font-size: 0.95rem; /* Smaller text */
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border); /* Thinner border */
}

.btn-secondary:hover {
    border-color: var(--text);
    color: var(--text);
    transform: translateY(-1px); /* NEW */
}

/* Sections */
section {
    padding: 3.5rem 0; /* MODIFIED: Reduced padding */
    transition: background-color 0.3s ease;
    border-top: 1px solid var(--border); /* NEW: Added top border for separation */
}

/* Special rule for the first section after hero */
.hero + section {
    border-top: none; /* Remove border from the very first section */
}


h2 {
    font-size: 2rem; /* Slightly smaller */
    font-weight: 700;
    margin-bottom: 0.75rem; /* Reduced margin */
     color: var(--text); /* Added */
}

.section-intro {
    font-size: 1.05rem; /* Smaller text */
    color: var(--text-light);
    margin-bottom: 2.5rem; /* Reduced margin */
    max-width: 650px;
}

/* NEW: Section intro with eyebrow */
.section-header {
    margin-bottom: 2.5rem;
}
.section-header .section-intro {
    margin-bottom: 0;
}


/* Features Grid (from index.html) */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
    gap: 1.5rem; /* Reduced gap */
}

.feature-box {
    padding: 1.75rem; /* Reduced padding */
    background: var(--bg-alt); /* MODIFIED: Use alt background for cards now */
    border-radius: 10px; /* Slightly less rounded */
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.feature-box:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); /* Softer shadow */
    transform: translateY(-2px);
}

.feature-icon {
    color: var(--primary);
    margin-bottom: 0.75rem; /* Reduced margin */
}

.feature-icon svg {
    width: 28px; /* Smaller icon */
    height: 28px;
    stroke-width: 1.8; /* Thinner stroke */
}

.feature-box h3 {
    font-size: 1.15rem; /* Smaller heading */
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 600;
}

.feature-box p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem; /* Smaller text */
}

/* Status Card (from index.html) */
.status-card {
    background: var(--primary);
    color: var(--bg);
    padding: 2rem; /* Reduced padding */
    border-radius: 12px; /* Less rounded */
    margin: 3rem 0; /* Reduced margin */
}

.status-card h2 {
    color: var(--bg);
    margin-bottom: 1rem;
    font-size: 1.75rem; /* Smaller heading */
}

.status-card ul {
    list-style: none;
    margin: 1rem 0;
}

.status-card li {
    padding: 0.6rem 0; /* Reduced padding */
    padding-left: 1.75rem; /* Adjusted indent */
    position: relative;
    font-size: 1rem; /* Smaller text */
}

.status-card li:before {
    /* MODIFIED: Using SVG Check */
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FEFAE1'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Progress List (from index.html) */

.progress-list {
    list-style: none;
    margin: 1.5rem 0;
}

.progress-list li {
    font-size: 1rem; /* Smaller text */
    padding: 1rem 0; /* Reduced padding */
    padding-left: 2rem; /* Adjusted indent */
    position: relative;
    border-bottom: 1px solid var(--border);
}

.progress-list li:last-child {
    border-bottom: none;
}

.progress-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* Smaller dot */
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg);
}

.progress-list li.done:before {
    background: #22c55e;
    border-color: #22c55e;
}

.progress-list li.progress:before {
    background: #f59e0b;
    border-color: #f59e0b;
}

.progress-list li.planned:before {
    background: var(--border);
}

/* Page Header (from contact, about, roadmap) */
.page-header {
    text-align: center;
    padding: 4rem 0 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}
.page-header h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}
/* Specific container overrides for non-index pages */
.container {
    max-width: 1100px; /* Default max-width */
}
body:has(.container .page-header) .container {
    max-width: 800px; /* Default for pages with .page-header */
}
body:has(div.phase) .container {
    max-width: 1000px; /* Wider for roadmap */
}

/* Contact Page Styles */
.intro {
    text-align: center;
    margin: 2.5rem 0;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-box {
    background: var(--bg-alt); /* MODIFIED: Use alt bg for cards */
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border-left: 4px solid var(--primary); /* Thicker accent */
    transition: all var(--transition-speed);
     opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
    position: relative; /* NEW */
    padding-top: 2.5rem; /* NEW: Make space for icon */
}
.contact-box:nth-of-type(1) { animation-delay: 0.1s; }
.contact-box:nth-of-type(2) { animation-delay: 0.2s; }
.contact-box:nth-of-type(3) { animation-delay: 0.3s; }
.contact-box:nth-of-type(4) { animation-delay: 0.4s; }

/* NEW: Contact box icon */
.contact-box-icon {
    position: absolute;
    top: -16px; /* Position half-in, half-out */
    left: 1.5rem;
    background: var(--primary);
    color: var(--bg);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border);
}
[data-theme="dark"] .contact-box-icon {
    border-color: var(--bg); /* MODIFIED: Use main bg for border */
}
.contact-box-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--bg);
    stroke-width: 2;
}


.contact-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
     border-left-color: var(--primary-dark);
}
.contact-box h2 {
    margin-top: 0;
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--primary);
}
.contact-box p {
    margin: 0.7rem 0;
    color: var(--frost-gray);
    font-size: 1rem;
    line-height: 1.7;
}

.email-link {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    display: inline-block;
    margin-top: 0.5rem;
    word-break: break-all;
    transition: color var(--transition-speed);
}
.email-link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

.follow-section {
    text-align: center;
    margin: 3.5rem 0;
    padding: 2.5rem;
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    border-radius: 10px;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
    border: 1px solid var(--border);
}
 .follow-section:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
 }
.follow-section h2 {
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 1.6rem;
}
.follow-section p {
    color: var(--frost-gray);
    margin: 1rem 0;
    font-size: 1rem;
}
 .follow-section p strong {
     color: var(--text);
     font-weight: 600;
 }
.follow-section a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-speed);
}
.follow-section a:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

.meta-info {
    text-align: center;
    margin: 2.5rem 0;
    color: var(--text-light);
    font-size: 0.9rem;
}
 .meta-info p {
     color: var(--text-light);
     font-size: 0.9rem;
      margin: 0.3rem 0;
 }
 .meta-info strong {
     color: var(--frost-gray);
     font-weight: 600;
 }

/* About Page Styles */
.about-page p { /* Differentiate from .contact-box p */
    margin: 1rem 0;
    color: var(--frost-gray);
    font-size: 1.05rem;
    line-height: 1.8;
}
.about-page strong {
     font-weight: 600;
     color: var(--text);
}

.mission-box {
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    padding: 2.5rem;
    border-radius: 10px;
    border-left: 4px solid var(--primary);
    margin: 2.5rem 0;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
     opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease 0.2s forwards;
}
 .mission-box:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
 }
.mission-box h2 {
    margin-top: 0;
    margin-bottom: 1rem;
     font-size: 1.7rem;
    color: var(--primary);
}
.mission-box p {
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.7;
}

.about-page h2 { /* Section titles */
    font-size: 1.85rem;
    margin: 3.5rem 0 1.5rem 0;
    font-weight: 700;
    color: var(--primary);
}

.values ul {
    list-style: none;
    margin: 1.5rem 0 2.5rem 0;
}
.values li {
    padding: 0.7rem 0;
    padding-left: 2.25rem;
    position: relative;
    color: var(--text);
    font-size: 1.05rem;
     line-height: 1.8;
}
.values li::before {
     /* MODIFIED: Using SVG Icon */
     content: "";
     position: absolute;
     left: 0;
     top: 0.6em;
     width: 18px;
     height: 18px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%23539562'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5' /%3E%3C/svg%3E");
     background-size: contain;
     background-repeat: no-repeat;
}
 .values li strong {
     color: var(--text);
     font-weight: 600;
 }

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
}
.status-item {
    padding: 1.5rem;
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all var(--transition-speed);
     opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}
.status-item:nth-of-type(1) { animation-delay: 0.1s; }
.status-item:nth-of-type(2) { animation-delay: 0.2s; }
.status-item:nth-of-type(3) { animation-delay: 0.3s; }
.status-item:nth-of-type(4) { animation-delay: 0.4s; }

.status-item:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}
.status-item strong {
    display: block;
    color: var(--primary);
    margin-bottom: 0.4rem;
    font-size: 1rem;
     font-family: var(--heading-font);
     font-weight: 600;
}
.status-item p {
    color: var(--frost-gray);
    margin: 0;
    font-size: 0.9rem;
}

.cta-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    margin-top: 1.5rem;
    transition: transform var(--transition-speed), color var(--transition-speed);
}
.cta-link:hover {
    text-decoration: underline;
    transform: translateX(4px);
     color: var(--primary-dark);
}

/* Roadmap Page Styles */
.roadmap-page .subtitle {
    color: var(--frost-gray);
    font-size: 1.1rem;
    margin: 0.5rem 0;
     line-height: 1.6;
}
 .roadmap-page .subtitle strong {
     color: var(--text);
     font-weight: 600;
 }

.status-badge {
    background: var(--primary);
    color: var(--bg);
    padding: 1.75rem 2.25rem;
    border-radius: 10px;
    margin: 2.5rem auto;
    text-align: center;
    max-width: 700px;
     opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease 0.2s forwards;
}
.status-badge strong {
    display: block;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
     font-family: var(--heading-font);
}
.status-badge p {
     font-size: 1rem;
     opacity: 0.95;
}
 .status-badge p:last-child {
     font-size: 0.85rem;
     margin-top: 0.5rem;
}

.phase {
    margin: 3.5rem 0;
    padding: 2.5rem;
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
     opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}
.phase:nth-of-type(1) { animation-delay: 0.1s; }
.phase:nth-of-type(2) { animation-delay: 0.2s; }
.phase:nth-of-type(3) { animation-delay: 0.3s; }
.phase:nth-of-type(4) { animation-delay: 0.4s; }
 .phase:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.07);
 }
.phase h2 {
    font-size: 1.85rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--primary);
}
.phase-meta {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
     font-weight: 600;
}

.week-block {
    margin: 1.5rem 0;
    padding: 1.75rem;
    background: var(--bg); /* Keep week blocks on main bg */
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all var(--transition-speed);
}
.week-block:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
     transform: translateY(-3px);
}
.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.week-title {
    font-size: 1.2rem;
    font-weight: 700;
     font-family: var(--heading-font);
}
.week-status {
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
}
.status-complete { background: #22c55e; color: white; }
.status-progress { background: #f59e0b; color: white; }
.status-planned { background: var(--border); color: var(--text); }

.checklist {
    list-style: none;
    margin: 1rem 0 0.5rem 0;
}
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    position: relative;
    color: var(--text);
    transition: color var(--transition-speed), opacity var(--transition-speed);
    font-size: 1rem;
     line-height: 1.6;
}
.checklist li::before {
    content: "";
    flex-shrink: 0;
    margin-top: 0.35em;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    border-radius: 3px;
    transition: all var(--transition-speed);
     display: flex;
     align-items: center;
     justify-content: center;

    /* NEW: SVG Icon for 'pending' */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23CADEDF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14' /%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
    border-color: var(--border);
}

.checklist li.progress::before {
    /* NEW: SVG Icon for 'progress' */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' /%3E%3C/svg%3E");
    background-size: 8px;
    border-color: #f59e0b;
    background-color: #f59e0b;
}

.checklist li:not(.pending):not(.progress) {
    /* MODIFIED: Removed strikethrough, using opacity */
    color: var(--text-light);
    /* text-decoration: line-through; */ /* REMOVED */
    opacity: 0.7;
}
.checklist li:not(.pending):not(.progress)::before {
    /* MODIFIED: Using SVG Check */
    border-color: var(--primary);
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FEFAE1'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-size: 12px;
}


.update-log, .tech-stack {
    margin: 3.5rem 0;
    padding: 2.5rem;
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}
.update-log { animation-delay: 0.5s; }
.tech-stack { animation-delay: 0.6s; }

 .update-log:hover, .tech-stack:hover {
      box-shadow: 0 8px 25px rgba(0,0,0,0.07);
 }
.update-log h3, .tech-stack h2 {
    font-size: 1.7rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}
.update-meta {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
}
.update-section {
    margin: 1.75rem 0;
}
.update-section h4 {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
    color: var(--primary);
}
.update-section ul {
    margin-left: 1.25rem;
    list-style-type: disc;
    color: var(--frost-gray);
    font-size: 1rem;
}
.update-section ul li {
    margin: 0.5rem 0;
    padding-left: 0.5rem;
     line-height: 1.7;
}
.tech-stack p:first-of-type {
     margin-bottom: 2rem;
     color: var(--frost-gray);
     font-size: 1rem;
     line-height: 1.7;
}
.tech-item {
    margin: 1.75rem 0;
}
.tech-item strong {
    display: block;
    color: var(--primary);
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
     font-family: var(--heading-font);
     font-weight: 600;
}
.tech-item p {
    color: var(--frost-gray);
    font-size: 1rem;
     line-height: 1.7;
}

/* Footer (Shared) */
footer {
    background: var(--bg-alt); /* MODIFIED: Use alt bg */
    border-top: 1px solid var(--border);
    padding: 3rem 0;
    margin-top: 3.5rem; /* MODIFIED: Reduced margin */
    transition: background-color var(--transition-speed);
}
.footer-content {
    /* MODIFIED: Aligned with container */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;

    display: flex;
    flex-direction: row; /* MODIFIED */
    align-items: center; /* MODIFIED */
    justify-content: space-between; /* MODIFIED */
    gap: 1.5rem;

    color: var(--text-light);
    font-size: 0.9rem;
    text-align: left; /* MODIFIED */
}
.footer-nav {
    display: flex;
    gap: 1.75rem;
    justify-content: center;
    flex-wrap: wrap;
    order: 2; /* NEW */
}
.footer-nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed);
     position: relative;
}
  .footer-nav a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 1px;
     bottom: -3px;
     left: 50%;
     transform: translateX(-50%);
     background-color: var(--primary);
     transition: width var(--transition-speed);
 }
 .footer-nav a:hover::after { width: 100%; }
.footer-nav a:hover {
    color: var(--primary);
    transform: translateY(-1px); /* NEW */
}
.footer-socials {
     display: flex;
     gap: 1.25rem;
     order: 3; /* NEW */
}
.footer-socials a {
    color: var(--frost-gray);
    transition: color var(--transition-speed), transform var(--transition-speed);
     display: inline-block;
}
.footer-socials a:hover {
    color: var(--primary);
    transform: scale(1.15) translateY(-1px);
}
.footer-socials svg {
     width: 22px;
     height: 22px;
     fill: currentColor;
}
.footer-bottom-text {
    order: 1; /* NEW */
    flex-grow: 1; /* NEW */
}
.footer-bottom-text p { margin: 0.2rem 0; }

/* Keyframe animation (Shared) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive (Shared) */
@media (max-width: 768px) {
    h1 {
        font-size: 2.25rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    .page-header h1 {
        font-size: 2.25rem;
    }
    .about-page h2, .roadmap-page h2, .contact-box h2 {
        font-size: 1.6rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        align-items: center;
        text-align: center;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: 1.5rem;
        z-index: 1000;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .nav-links.active {
        display: flex;
    }
    .nav-toggle {
        display: block;
    }

    /* MODIFIED: Hero mobile styles */
    .hero {
        text-align: center;
        padding: 3rem 0;
    }

    h1 {
        font-size: 2.5rem;
    }
    .subtitle {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }
    .cta-buttons {
        justify-content: center;
    }

    .features {
        grid-template-columns: 1fr;
    }

    section {
        padding: 3rem 0; /* Adjusted section padding */
    }


    /* MODIFIED: Footer mobile */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .footer-nav { order: 2; }
    .footer-socials { order: 3; }
    .footer-bottom-text { order: 1; }

    /* Page-specific responsive */
    .contact-box { padding: 1.5rem; margin: 1.5rem 0; padding-top: 2rem; }
    .status-grid { grid-template-columns: 1fr; }
    .phase, .update-log, .tech-stack { padding: 1.75rem; }
    .week-block { padding: 1.25rem; }
}