/* Base styles */
:root {
    --color-background: #ffffff;
    --color-foreground: #1a1a1a; /* Darker gray for text */
    --color-gray-50: #f9fafb;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-black: #000000;
    --font-sans: 'Inter', sans-serif
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-foreground);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Utility classes (mimicking Tailwind where applicable) */
.text-balance {
    text-wrap: balance;
}

/* Layout Container */
.page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1.5rem; /* px-6 py-8 */
}

@media (min-width: 768px) { /* md */
    .header {
        padding: 2rem 3rem; /* md:px-12 */
    }
}

@media (min-width: 1024px) { /* lg */
    .header {
        padding: 2rem 5rem; /* lg:px-20 */
    }
}

.header-button {
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    color: var(--color-gray-600);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.header-button:hover {
    color: var(--color-black);
}

/* Main Content */
.main-content {
    max-width: 72rem; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    padding-bottom: 6rem; /* pb-24 */
}

@media (min-width: 768px) { /* md */
    .main-content {
        padding-left: 3rem; /* md:px-12 */
        padding-right: 3rem; /* md:px-12 */
    }
}

@media (min-width: 1024px) { /* lg */
    .main-content {
        padding-left: 5rem; /* lg:px-20 */
        padding-right: 5rem; /* lg:px-20 */
    }
}

/* Back Button */
.back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    font-size: 0.875rem; /* text-sm */
    color: var(--color-gray-600);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    margin-bottom: 3rem; /* mb-12 */
}

.back-button:hover {
    color: var(--color-black);
}

.back-button svg {
    width: 1rem; /* size-4 */
    height: 1rem; /* size-4 */
}

/* Article Meta */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem; /* gap-x-8 gap-y-4 */
    font-size: 0.875rem; /* text-sm */
    color: var(--color-gray-500);
    margin-bottom: 4rem; /* mb-16 */
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

.meta-item svg {
    width: 1rem; /* size-4 */
    height: 1rem; /* size-4 */
}

/* Article Title */
.article-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 300; /* font-light */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 4rem; /* mb-16 */
    max-width: 56rem; /* max-w-4xl */
    text-wrap: balance; /* text-balance */
}

@media (min-width: 768px) { /* md */
    .article-title {
        font-size: 3.75rem; /* md:text-6xl */
    }
}

@media (min-width: 1024px) { /* lg */
    .article-title {
        font-size: 4.5rem; /* lg:text-7xl */
    }
}

/* Introduction */
.introduction {
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75; /* leading-relaxed */
    color: var(--color-gray-700);
    margin-bottom: 5rem; /* mb-20 */
    max-width: 48rem; /* max-w-3xl */
}

@media (min-width: 768px) { /* md */
    .introduction {
        font-size: 1.5rem; /* md:text-2xl */
    }
}

/* Hero Image Section */
.hero-image-container {
    position: relative;
    width: 100%;
    height: 450px; /* h-[450px] */
    margin-bottom: 6rem; /* mb-24 */
    overflow: hidden;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
}

@media (min-width: 768px) { /* md */
    .hero-image-container {
        height: 600px; /* md:h-[600px] */
    }
}

@media (min-width: 1024px) { /* lg */
    .hero-image-container {
        height: 700px; /* lg:h-[700px] */
    }
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Article Sections */
.article-sections {
    display: flex;
    flex-direction: column;
    gap: 6rem; /* space-y-24 */
}

.article-section {
    display: grid;
    gap: 3rem; /* gap-12 */
    align-items: center;
}

@media (min-width: 768px) { /* md */
    .article-section {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
    .article-section.reverse-order > div:first-child {
        order: 2;
    }
    .article-section.reverse-order > div:last-child {
        order: 1;
    }
}

.section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* gap-4 */
    margin-bottom: 1.5rem; /* mb-6 */
}

.section-icon {
    font-size: 1.875rem; /* text-3xl */
}

.section-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) { /* md */
    .section-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.section-text {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75; /* leading-relaxed */
    color: var(--color-gray-700);
}

.section-list {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 1.5rem; /* ml-6 */
    font-size: 1.125rem; /* text-lg */
    color: var(--color-gray-700);
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.section-image-container {
    position: relative;
    height: 16rem; /* h-64 */
    width: 100%;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    overflow: hidden;
}

@media (min-width: 768px) { /* md */
    .section-image-container {
        height: 20rem; /* md:h-80 */
    }
}

.section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quote Section */
.quote-section {
    position: relative;
    background-color: var(--color-gray-50);
    padding: 3rem; /* p-12 */
    margin-top: 6rem; /* my-24 */
    margin-bottom: 6rem; /* my-24 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */
    overflow: hidden;
}

@media (min-width: 768px) { /* md */
    .quote-section {
        padding: 4rem; /* md:p-16 */
    }
}

@media (min-width: 1024px) { /* lg */
    .quote-section {
        padding: 5rem; /* lg:p-20 */
    }
}

.quote-marks {
    position: absolute;
    font-size: 6rem; /* text-6xl */
    font-family: serif; /* font-serif */
    color: var(--color-gray-300);
    opacity: 0.75;
    z-index: 0;
}

.quote-marks.top-left {
    top: 1.5rem; /* top-6 */
    left: 1.5rem; /* left-6 */
}

.quote-marks.bottom-right {
    bottom: 1.5rem; /* bottom-6 */
    right: 1.5rem; /* right-6 */
}

.quote-content {
    display: grid;
    gap: 3rem; /* gap-12 */
    align-items: center;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) { /* md */
    .quote-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

.quote-text {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    font-style: italic;
    line-height: 1.75; /* leading-relaxed */
    color: var(--color-gray-800);
    margin-bottom: 1.5rem; /* mb-6 */
}

@media (min-width: 768px) { /* md */
    .quote-text {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.quote-cite {
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    color: var(--color-gray-500);
}

/* Statistics Section */
.statistics-section {
    background-color: #0080ff;
    color: var(--color-background);
    padding: 3rem; /* p-12 */
    margin-top: 6rem; /* my-24 */
    margin-bottom: 6rem; /* my-24 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

@media (min-width: 768px) { /* md */
    .statistics-section {
        padding: 4rem; /* md:p-16 */
    }
}

@media (min-width: 1024px) { /* lg */
    .statistics-section {
        padding: 5rem; /* lg:p-20 */
    }
}

.statistics-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    margin-bottom: 3rem; /* mb-12 */
    text-align: center;
}

@media (min-width: 768px) { /* md */
    .statistics-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    gap: 2rem; /* gap-8 */
    text-align: center;
}

@media (min-width: 768px) { /* md */
    .statistics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* md:grid-cols-4 */
    }
}

.statistic-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.statistic-number {
    font-size: 3rem; /* text-5xl */
    font-weight: 300; /* font-light */
    margin-bottom: 0.5rem; /* mb-2 */
}

@media (min-width: 768px) { /* md */
    .statistic-number {
        font-size: 3.75rem; /* md:text-6xl */
    }
}

.statistic-label {
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    color: var(--color-gray-300);
}

/* Conclusion Section */
.conclusion-section {
    background-color: var(--color-black);
    color: var(--color-background);
    padding: 3rem; /* p-12 */
    margin-left: -1.5rem; /* -mx-6 */
    margin-right: -1.5rem; /* -mx-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

@media (min-width: 768px) { /* md */
    .conclusion-section {
        padding: 4rem; /* md:p-16 */
        margin-left: -3rem; /* md:-mx-12 */
        margin-right: -3rem; /* md:-mx-12 */
    }
}

@media (min-width: 1024px) { /* lg */
    .conclusion-section {
        padding: 5rem; /* lg:p-20 */
        margin-left: -5rem; /* lg:-mx-20 */
        margin-right: -5rem; /* lg:-mx-20 */
    }
}

.conclusion-section .section-header {
    margin-bottom: 1.5rem; /* mb-6 */
}

.conclusion-section .section-icon {
    font-size: 1.875rem; /* text-3xl */
}

.conclusion-section .section-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    line-height: 1.25; /* leading-tight */
}

@media (min-width: 768px) { /* md */
    .conclusion-section .section-title {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.conclusion-text {
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75; /* leading-relaxed */
    max-width: 48rem; /* max-w-3xl */
    margin-bottom: 2rem; /* mb-8 */
}

.conclusion-call-to-action {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 300; /* font-light */
    max-width: 48rem; /* max-w-3xl */
}

/* Footer */
.footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 6rem; /* mt-24 */
    padding-top: 3rem; /* pt-12 */
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.875rem; /* text-sm */
    color: var(--color-gray-500);
}

@media (min-width: 768px) { /* md */
    .footer {
        flex-direction: row;
    }
}

.footer-copyright {
    margin-bottom: 1rem; /* mb-4 */
}

@media (min-width: 768px) { /* md */
    .footer-copyright {
        margin-bottom: 0;
    }
}

.footer-social {
    display: flex;
    gap: 1.5rem; /* gap-6 */
}