/* --- ULTRA-PREMIUM ARTISTIC BENTO OVERHAUL --- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    --bg-dark: #000000;
    --text-primary: #ffffff;
    --text-muted: #8a8f98;
    --card-surface: rgba(20, 20, 20, 0.4);
    --card-border: rgba(255, 255, 255, 0.06);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.theme-light, body[data-theme="light"] {
    --bg-dark: #fafafa;
    --text-primary: #111827;
    --text-muted: #6b7280;
    --card-surface: rgba(255, 255, 255, 0.6);
    --card-border: rgba(0, 0, 0, 0.06);
}

html, body {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
    overflow-x: hidden;
    margin: 0;
}

/* Hide old noisy elements */
.pulse-ring, .floating-badge, .grid-lines-modern, .demo-window-header { 
    display: none !important; 
}

/* 1. First Screen Earth Background (Fixed & Artistic) */
.hero {
    position: relative;
    padding-top: 240px !important; /* Increased from 180px to move the title down further */
    padding-bottom: 120px !important;
    min-height: 120vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.85) 60%, #000000 100%), url("../img/hero-earth-bg.jpeg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-bottom: none !important; /* Removed the visible seam/border */
}

body.theme-light .hero {
    /* Use Earth image for light mode as requested, but with a bright overlay so black text is readable */
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.9) 60%, #fafafa 100%) !important; /* Removed broken Unsplash image */
}

/* 2. Compact & Elegant Typography for Hero */
.hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    z-index: 10;
}
.hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

h1, h2, h3, .logo-title, p {
    color: var(--text-primary);
}

h1 {
    font-size: clamp(40px, 6vw, 64px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
    margin-bottom: 24px !important;
    /* Ensure text fill allows fade in */
    -webkit-text-fill-color: var(--text-primary);
}
body.theme-light h1 { text-shadow: 0 4px 20px rgba(255,255,255,0.8); }

.hero-copy p {
    color: #ebe9e4 !important; /* Milky white, 3 shades lower than pure white */
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    max-width: 580px !important;
    font-weight: 400 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
body.theme-light .hero-copy p { text-shadow: none; }

/* Buttons */
.hero-actions {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    margin: 40px 0 0 !important;
}
.btn.primary {
    background: var(--text-primary) !important;
    color: var(--bg-dark) !important;
    border-radius: 999px !important; 
    font-weight: 500 !important;
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
    border: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255,255,255,0.15) !important;
}
.btn.secondary {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    backdrop-filter: blur(10px);
}

/* Navbar Full-Width Minimalist (Reverted to the approved version) */
.hero-nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100% !important;
    max-width: none !important;
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important; 
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 0 !important; 
    padding: 16px 40px !important; 
    z-index: 1000 !important;
    transform: none !important;
}
.hero-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    white-space: nowrap !important;
}
.hero-nav .nav-links a {
    white-space: nowrap !important;
}
body.theme-light .hero-nav {
    background: rgba(255,255,255,0.8) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* 3. Section Sizing & Artistic Bento Boxes */
.section {
    background: transparent !important;
    padding: 120px 0 !important;
    border: none !important;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Back to Top Guide */
.back-to-top-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.back-to-top-guide:hover {
    opacity: 1;
}
.back-to-top-guide .guide-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.back-to-top-guide .guide-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.2rem;
    animation: bounceUpGuide 2s infinite ease-in-out;
}
body.theme-light .back-to-top-guide .guide-arrow {
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.08);
}
@keyframes bounceUpGuide {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.section-title {
    text-align: center !important;
    margin-bottom: 64px !important;
}
.section-title h2 {
    font-size: clamp(32px, 5vw, 44px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 16px !important;
}

/* --- THE MINIMALIST ELEGANT GRID (Apple/Linear Style) --- */
.intro-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
@media (max-width: 900px) {
    .intro-features { grid-template-columns: 1fr !important; }
}

/* Elegant Dark Cards */
.intro-feature-card, .ai-feature-item, .copilot-card, article {
    display: flex !important;
    flex-direction: column !important;
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
}

.intro-feature-card::before, .ai-feature-item::before, .copilot-card::before {
    display: none !important; /* Remove the old highlight line */
}

.intro-feature-card:hover, .ai-feature-item:hover, .copilot-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: #121212 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}

body.theme-light .intro-feature-card, body.theme-light .ai-feature-item, body.theme-light .copilot-card, body.theme-light article {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .intro-feature-card:hover, body.theme-light .ai-feature-item:hover, body.theme-light .copilot-card:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
    background: #fdfdfd !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
}

/* Naked Icons (No background boxes) */
.feature-icon-wrapper {
    margin-bottom: 24px !important;
}
.feature-icon {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
    box-shadow: none !important;
}
.feature-icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke: #ffffff !important;
    stroke-width: 1.5 !important;
}
body.theme-light .feature-icon svg { stroke: #000000 !important; }

/* Pure Typography */
.feature-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}
.feature-content h3, .copilot-card h3, article h3 {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.theme-light .feature-content h3 { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }

.feature-content p, .copilot-card p, article p {
    color: #888888 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 0 32px 0 !important;
    font-weight: 400 !important;
}
body.theme-light .feature-content p { color: #666666 !important; }

/* Naked Stats (Destroy original boxes) */
.feature-stat {
    margin-top: auto !important; /* Push to bottom */
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
}
.stat-value {
    font-size: 2.5rem !important;
    font-weight: 300 !important;
    letter-spacing: -0.04em !important;
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.theme-light .stat-value { color: #000000 !important; -webkit-text-fill-color: #000000 !important; }

.stat-label {
    font-size: 0.9rem !important;
    color: #666666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* AI Feature Grid (Sidebar Layout Override) */
.ai-flow-container {
    display: flex !important;
    gap: 40px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    align-items: flex-start !important;
}
.ai-flow-sidebar {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}
.ai-flow-demo {
    flex: 1 !important;
    position: sticky !important;
    top: 120px !important;
}
@media (max-width: 900px) {
    .ai-flow-container {
        flex-direction: column !important;
    }
    .ai-flow-sidebar {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    .ai-flow-demo {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
    }
}
.ai-feature-item {
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
}
.feature-number {
    font-family: "SF Mono", "Fira Code", monospace !important;
    font-size: 1.2rem !important;
    color: rgba(255,255,255,0.2) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
body.theme-light .feature-number {
    color: rgba(0,0,0,0.2) !important;
}

/* Copilot & VSCode Grids */
.copilot-grid, .vscode-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 24px !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}
/* 4. Bottom Glow Transition */
.vscode-section {
    position: relative;
    padding-bottom: 120px !important;
}
.vscode-section::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 600px;
    background: radial-gradient(circle at 50% 100%, rgba(90, 100, 255, 0.12), transparent 70%);
    z-index: -1;
    pointer-events: none;
}
body.theme-light .vscode-section::after {
    background: radial-gradient(circle at 50% 100%, rgba(90, 100, 255, 0.04), transparent 70%);
}

/* Fix Compare Table Sizes */
.compare-table {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-top: 1px solid var(--card-border) !important;
    font-size: 0.95rem !important;
    margin-top: 40px !important;
}
.table-header {
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text-muted) !important;
    padding: 16px 0 !important;
}
.table-row {
    border-bottom: 1px solid var(--card-border) !important;
    padding: 16px 0 !important;
}

/* Changelog Restyling */
.changelog-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    margin-bottom: 60px !important; padding-top: 80px !important;
}
.changelog-badge {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    margin-bottom: 24px !important;
}
.timeline-content {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 12px !important;
    padding: 24px !important;
}






/* Artistic Hover Glow for Cards */
.intro-feature-card:hover, .ai-feature-item:hover, .copilot-card:hover, article:hover {
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: #111111 !important;
}
body.theme-light .intro-feature-card:hover, body.theme-light .ai-feature-item:hover, body.theme-light .copilot-card:hover, body.theme-light article:hover {
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    background: #f8f8f8 !important;
}

/* Ensure icons have no weird boxes */
.intro-feature-card .feature-icon-wrapper {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}
.intro-feature-card .feature-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body.theme-light .intro-feature-card .feature-icon {
    background: rgba(0,0,0,0.02) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.intro-feature-card .feature-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--text-primary) !important;
}


h1 {
    -webkit-text-fill-color: #ffffff !important;
}
body.theme-light h1 {
    -webkit-text-fill-color: #000000 !important;
}


/* Changelog specific background alignment */
.changelog-section {
    position: relative;
    padding-top: 160px !important;
    min-height: 100vh;
}
.changelog-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90vh; /* Covers the first screen and fades out */
    z-index: -1;
    /* High-end Earth horizon from space (Unsplash) */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 70%, #000000 100%), url("../img/hero-earth-bg.jpeg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
}
body.theme-light .changelog-section::before {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.8) 60%, #fafafa 100%), url("../img/hero-earth-bg.jpeg");
}
/* Ensure the empty hero header in changelog does not take up space */
header.hero:empty {
    min-height: 0 !important;
    padding: 0 !important;
    background-image: none !important;
}
/* Fix the header taking up 85vh on changelog because it only has navbar */
html body .hero:not(:has(.hero-grid)) {
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}


/* Changelog specific background alignment */
.changelog-section {
    position: relative;
    padding-top: 160px !important;
    min-height: 100vh;
}
.changelog-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90vh; /* Covers the first screen and fades out */
    z-index: -1;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 70%, #000000 100%), url("../img/hero-earth-bg.jpeg") !important;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
}
body.theme-light .changelog-section::before {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.8) 60%, #fafafa 100%), url("../img/hero-earth-bg.jpeg") !important;
}

/* Ensure the empty hero header in changelog does not take up space */
html body .site-header {
    min-height: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}