/* ==========================================================================
   基础样式与变量定义 (Base Styles & Variables) - From Response #6
   ========================================================================== */

   :root {
    /* Original Variables + Adjustments */
    --primary-color: #10b981; /* 翡翠绿 */
    --secondary-color: #065f46; /* 深绿 */
    --accent-color: #55cf6d; /* 琥珀黄 */
    --primary-color-light: #34d399; /* 稍亮的绿色 (暗色模式用) */
    --secondary-color-light: #6ee7b7; /* 暗色模式辅助绿 - Lighter */
    --accent-color-light: #fcd34d; /* 暗色模式琥珀黄 */

    /* Backgrounds - Adjusted */
    --bg-light: #f8fcf9; /* Very light green/gray base */
    --bg-dark: #0c1a14; /* Very dark desaturated green base */
    --bg-card-light: rgba(255, 255, 255, 0.7); /* Card base light - More transparent */
    --bg-card-dark: rgba(20, 32, 28, 0.6);  /* Card base dark - More transparent */
    --bg-subtle-light: #f3f4f6; /* gray-100 */
    --bg-subtle-dark: #1f2937; /* gray-800 */
    --bg-hover-light: #e5f8f1; /* Lighter green tint */
    --bg-hover-dark: #1a3a2f; /* Darker green tint */

    /* Text Colors - Adjusted */
    --text-base-light: #1f2937; /* gray-800 */
    --text-base-dark: #cdd4d9; /* Lighter gray for dark bg */
    --text-heading-light: #064e3b; /* Dark green */
    --text-heading-dark: #e5f8f1; /* Very light green/white */
    --text-muted-light: #526a5f; /* Muted green/gray */
    --text-muted-dark: #9cb3a9; /* Lighter muted green/gray */
    --text-link-light: var(--primary-color);
    --text-link-dark: var(--primary-color-light);
    --text-on-primary: #ffffff;

    /* Borders - Adjusted */
    --border-light: rgba(16, 185, 129, 0.15);
    --border-dark: rgba(52, 211, 153, 0.2);
    --border-input-light: #d1d5db; /* gray-300 */
    --border-input-dark: #4b5563; /* gray-600 */
    --border-hover-light: rgba(16, 185, 129, 0.4); /* primary/40 */
    --border-hover-dark: rgba(52, 211, 153, 0.5); /* primary-light/50 */
    --border-card-light: rgba(0, 0, 0, 0.05); /* New */
    --border-card-dark: rgba(255, 255, 255, 0.08); /* New */

    /* Gradients - Kept Original */
    --bg-gradient-start-light: rgba(16, 185, 129, 0.08);
    --bg-gradient-end-light: rgba(6, 95, 70, 0.03);
    --bg-gradient-start-dark: rgba(52, 211, 153, 0.07);
    --bg-gradient-end-dark: rgba(5, 150, 105, 0.1);

    /* Radii - Kept Original + Additions */
    --rounded-btn: 9999px;
    --rounded-card: 1rem; /* 16px - Keep for compatibility if needed */
    --rounded-input: 0.5rem;
    --rounded-img: 1rem;
    --rounded-icon-bg: 0.75rem; /* 12px */
    --rounded-lg: 0.75rem; /* Added */
    --rounded-xl: 1.25rem; /* Added - Standard card radius */
    --rounded-2xl: 1.5rem; /* Added - For images etc. */

    /* Shadows - Adjusted */
    --shadow-sm: 0 2px 5px rgba(10, 95, 60, 0.06);
    --shadow-md: 0 4px 10px rgba(10, 95, 60, 0.08);
    --shadow-lg: 0 12px 25px rgba(10, 95, 60, 0.1);
    --shadow-xl: 0 25px 50px rgba(10, 95, 60, 0.12);
    --shadow-dark-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-dark-md: 0 5px 15px rgba(0, 0, 0, 0.3);
    --shadow-dark-lg: 0 15px 35px rgba(0, 0, 0, 0.35);
    --shadow-dark-xl: 0 30px 60px rgba(0, 0, 0, 0.4);

    /* Transitions - Added */
    --transition-fast: all 0.2s ease-in-out;
    --transition-base: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Glow Effect - Added */
    --glow-primary-light: 0 0 15px rgba(16, 185, 129, 0.3);
    --glow-primary-dark: 0 0 20px rgba(52, 211, 153, 0.4);
}

/* 基本样式和字体设置 (保持原有) */
body {
    font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
    /* Background applied via global-gradient-bg class */
    color: var(--text-base-light);
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: 0;
}

/* 衬线字体用于标题 (保持原有) */
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Noto Serif SC', serif;
    color: var(--text-heading-light); /* Use updated var */
}

/* 暗色模式基础样式 (保持原有) */
html.dark body {
    /* Background applied via global-gradient-bg class */
    color: var(--text-base-dark);
}
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark .font-serif {
    color: var(--text-heading-dark); /* Use updated var */
}

/* 全局链接样式 (保持原有) */
.link {
    color: var(--text-link-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}
.link:hover { text-decoration: underline; }
html.dark .link { color: var(--text-link-dark); }

/* 全局背景 (保持原有实现方式，确保 body class 是 global-gradient-bg) */
.global-gradient-bg { background-color: var(--bg-light); } /* Apply base color */
html.dark .global-gradient-bg { background-color: var(--bg-dark); }
/* Fixed background SVGs are placed in HTML */

/* ==========================================================================
   通用组件样式 (Common Components) - Keeping original structure
   ========================================================================== */

.container { /* Keep original */
    width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

.section-padding { /* Keep original */
    padding-top: 0rem; padding-bottom: 0rem; /* Adjusted spacing slightly */
}
@media (min-width: 640px) { .section-padding { padding-top: 5rem; padding-bottom: 5rem; } }
@media (min-width: 768px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; } }

.heading { /* Keep original, vars updated */
    margin-top: 0.5rem; font-size: 1.875rem; line-height: 1.25; font-weight: 700;
    letter-spacing: -0.025em; font-family: 'Noto Serif SC', serif; color: var(--text-heading-light);
}
html.dark .heading { color: var(--text-heading-dark); }
@media (min-width: 640px) { .heading { font-size: 2.25rem; line-height: 2.5rem; } }

.subheading { /* Keep original, vars updated */
    font-size: 1rem; line-height: 1.75rem; font-weight: 600; letter-spacing: 0.05em;
    color: var(--primary-color);
}
html.dark .subheading { color: var(--primary-color-light); }
.subheading.text-secondary { color: var(--secondary-color); } /* Allow override */
html.dark .subheading.text-secondary { color: var(--secondary-color-light); }

.section-title-mb { /* Keep original */
    margin-bottom: 3rem; /* Adjusted spacing */
}
@media (min-width: 768px) { .section-title-mb { margin-bottom: 4rem; } }

/* 按钮样式 (保持原有 btn, btn-gradient-*) */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.75rem 2rem; border-radius: var(--rounded-btn); font-weight: 600;
    transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms;
    box-shadow: var(--shadow-lg); white-space: nowrap; letter-spacing: 0.5px; cursor: pointer; outline: none;
    border: 1px solid transparent;
}
html.dark .btn { box-shadow: var(--shadow-dark-lg); }
.btn:hover { transform: translateY(-4px); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4); }
html.dark .btn:focus-visible { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.5); }
.btn i { transition: transform 0.3s ease-in-out; display: inline-block; }

.btn-gradient-primary {
    background-image: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color-light) 50%, var(--primary-color) 100%);
    background-size: 200% auto; border: none; color: var(--text-on-primary);
}
html.dark .btn-gradient-primary { background-image: linear-gradient(to right, var(--primary-color-light) 0%, #6ee7b7 50%, var(--primary-color-light) 100%); }
.btn-gradient-primary:hover { background-position: right center; }

.btn-gradient-secondary {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(245, 250, 248, 0.9) 100%);
    border: 1px solid var(--border-light); color: var(--text-base-light); backdrop-filter: blur(4px);
    box-shadow: var(--shadow-md);
}
html.dark .btn-gradient-secondary {
    background-image: linear-gradient(to bottom, rgba(30, 45, 40, 0.8) 0%, rgba(20, 32, 28, 0.8) 100%);
    border-color: var(--border-dark); color: var(--text-base-dark); backdrop-filter: blur(4px);
    box-shadow: var(--shadow-dark-md);
}
.btn-gradient-secondary:hover {
    border-color: var(--border-hover-light);
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(250, 253, 251, 1) 100%);
}
html.dark .btn-gradient-secondary:hover {
    border-color: var(--border-hover-dark);
    background-image: linear-gradient(to bottom, rgba(35, 50, 45, 0.9) 0%, rgba(25, 40, 35, 0.9) 100%);
}


/* 导航链接 (保持原有 nav-link) */
.nav-link {
    color: var(--text-muted-light); font-weight: 500; border-radius: var(--rounded-lg);
    padding: 0.5rem 0.75rem; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    position: relative; text-decoration: none; background-color: transparent;
}
.nav-link:hover { color: var(--primary-color); background-color: rgba(16, 185, 129, 0.08); }
html.dark .nav-link { color: var(--text-muted-dark); }
html.dark .nav-link:hover { color: var(--primary-color-light); background-color: rgba(52, 211, 153, 0.1); }
.nav-link::after { /* Underline animation */
    content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 50%;
    background-color: var(--primary-color); transition: all 0.3s ease-in-out; transform: translateX(-50%);
}
html.dark .nav-link::after { background-color: var(--primary-color-light); }
.nav-link:hover::after { width: 50%; }

/* 页脚图标链接 (保持原有 footer-icon-link) */
.footer-icon-link {
    color: var(--text-muted-light); font-size: 1.25rem;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
html.dark .footer-icon-link { color: var(--text-muted-dark); }
.footer-icon-link:hover { color: var(--text-link-light); transform: scale(1.1); }
html.dark .footer-icon-link:hover { color: var(--text-link-dark); }

/* ==========================================================================
   特定区域样式 (Section Specific Styles) - Modify existing card styles
   ========================================================================== */

/* Header (保持原有) */
.theme-toggle-button, .github-link { /* Keep styles from response #6 */
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted-light); padding: 0.5rem; border-radius: var(--rounded-lg);
    transition: var(--transition-fast); background-color: transparent; border: none; cursor: pointer;
}
.theme-toggle-button:hover, .github-link:hover { color: var(--text-link-light); background-color: var(--bg-hover-light); }
html.dark .theme-toggle-button, html.dark .github-link { color: var(--text-muted-dark); }
html.dark .theme-toggle-button:hover, html.dark .github-link:hover { color: var(--text-link-dark); background-color: var(--bg-hover-dark); }
.theme-toggle-button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.github-link i { font-size: 1.25rem; }


/* Hero Section (保持原有 .text-gradient-primary) */
/* Vertical centering handled by Tailwind in HTML */
.hero-section .text-gradient-primary { /* Keep original definition */
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      display: inline-block; margin-top: 1rem;
}
html.dark .hero-section .text-gradient-primary {
      background: linear-gradient(90deg, var(--primary-color-light), var(--secondary-color-light));
      -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* NEW: Hero Subtitle Gradient */
.hero-subtitle-gradient {
    background-image: linear-gradient(95deg, var(--primary-color) 0%, var(--primary-color-light) 50%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block; /* Needed for gradient */
    padding: 0.1em 0; /* Add slight padding if needed for ascenders/descenders */
    font-size: 4rem; /* Adjust as needed */
    font-weight: 600; /* Adjust as needed */
    line-height: 4rem;
}
html.dark .hero-subtitle-gradient {
     background-image: linear-gradient(95deg, var(--primary-color-light) 0%, #6ee7b7 50%, var(--accent-color-light) 100%);
}

/* About Section (保持原有 first-letter-drop, img styles) */
.about-text-panel { /* Keep styles from response #6 */
    background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px);
    border-radius: var(--rounded-xl); padding: 2rem; box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark .about-text-panel {
    background-color: rgba(12, 26, 20, 0.5); border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-dark-lg);
}
  /* Corrected First Letter Drop */
  #about .first-letter-drop {
    margin-top: 1.5rem; /* mt-6 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75; /* leading-relaxed */
    color: var(--text-muted-light);
    padding-left: calc(4.5em * 0.15 + 0.05em);
}
html.dark #about .first-letter-drop { color: var(--text-base-dark); }
#about .first-letter-drop::first-letter {
    font-family: 'Noto Serif SC', serif;
    font-size: 4.5em; /* Adjusted size */
    font-weight: 600;
    float: left;
    line-height: 1; /* Crucial for vertical alignment */
    margin-right: 0.15em; /* Space after the letter */
    margin-top: 0.1em;   /* Fine-tune vertical position */
    margin-bottom: -0.2em; /* Avoid extra space below */
    color: var(--primary-color);
    transition: color 0.3s ease;
    position: relative; /* Helps in some rendering engines */
}
html.dark #about .first-letter-drop::first-letter {
    color: var(--primary-color-light);
}
/* Ensure following text clears the floated letter */
#about .first-letter-drop::after {
    content: "";
    display: table;
    clear: both;
}
#about .mt-5 { margin-top: 1.25rem; }
#about .leading-relaxed { line-height: 1.75; }
#about .mt-12 { margin-top: 3rem; } /* mt-12 */
@media (min-width: 1024px) { #about .lg\:mt-0 { margin-top: 0; } }
#about img {
    border-radius: var(--rounded-img);
    box-shadow: var(--shadow-xl);
    aspect-ratio: 16 / 9; /* aspect-video */
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
}
#about img:hover {
    transform: scale(1.05);
}
#about .text-xs { font-size: 0.75rem; line-height: 1rem; }
#about .text-gray-500 { color: var(--text-muted-light); }
html.dark #about .text-gray-400 { color: var(--text-muted-dark); }
#about .text-right { text-align: right; }
#about .mt-3 { margin-top: 0.75rem; }


/* Features Section (修改 .feature-card based on response #6) */
.feature-card {
    padding: 1.5rem;
    background-color: var(--bg-card-light);
    border-radius: var(--rounded-xl);
    border: 1px solid var(--border-card-light);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px) saturate(180%);
    transition: var(--transition-base);
    position: relative; overflow: hidden;
    transform-style: preserve-3d; perspective: 1000px;
}
html.dark .feature-card {
    background-color: var(--bg-card-dark);
    border-color: var(--border-card-dark);
    box-shadow: var(--shadow-dark-md);
}
.feature-card:hover {
    transform: translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.03);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover-light);
}
html.dark .feature-card:hover {
    box-shadow: var(--shadow-dark-lg);
    border-color: var(--border-hover-dark);
}
.feature-card::before { /* Hover Glow */
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    opacity: 0; transform: scale(0.8); border-radius: inherit; z-index: -1;
    transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
    pointer-events: none;
}
html.dark .feature-card::before { background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, transparent 70%); }
.feature-card:hover::before { opacity: 1; transform: scale(1); }

.feature-card .icon-wrapper { /* Styles from response #6 */
    height: 3rem; width: 3rem; border-radius: var(--rounded-lg);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-base); box-shadow: var(--shadow-sm);
}
html.dark .feature-card .icon-wrapper { box-shadow: var(--shadow-dark-sm); }
.feature-card:hover .icon-wrapper { transform: scale(1.15) rotate(-8deg); box-shadow: var(--shadow-md); }
html.dark .feature-card:hover .icon-wrapper { box-shadow: var(--shadow-dark-md); }

.feature-icon-bg-1 { background-color: #d1fae5; color: #047857;} html.dark .feature-icon-bg-1 { background-color: #064e3b; color: #a7f3d0;}
.feature-icon-bg-2 { background-color: #dbeafe; color: #1d4ed8;} html.dark .feature-icon-bg-2 { background-color: #1e3a8a; color: #93c5fd;}
.feature-icon-bg-3 { background-color: #fef3c7; color: #92400e;} html.dark .feature-icon-bg-3 { background-color: #78350f; color: #fcd34d;}

.feature-title { font-size: 1.125rem; font-weight: 600; color: var(--text-heading-light); }
html.dark .feature-title { color: var(--text-heading-dark); }
.feature-description { font-size: 0.9rem; color: var(--text-muted-light); line-height: 1.7; margin-top: 0.5rem; }
html.dark .feature-description { color: var(--text-muted-dark); }


/* How it Works / Visualization Section (Use styles from response #6) */
.flowchart-container {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem;
    padding: 2rem; border: none; box-shadow: none; background-color: transparent; backdrop-filter: none;
}
@media (min-width: 1024px) { .flowchart-container { flex-wrap: nowrap; gap: 0; align-items: stretch; } }
.flowchart-group { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.flowchart-node {
    width: 10rem; height: 10rem; padding: 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    border-radius: 50%; border: 2px solid transparent;
    background: radial-gradient(circle at center, var(--bg-card-light) 0%, transparent 100%);
    box-shadow: var(--shadow-sm), inset 0 0 10px rgba(255,255,255,0.3);
    backdrop-filter: blur(10px) saturate(150%);
    position: relative; overflow: visible;
    transform-style: preserve-3d; perspective: 1000px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
html.dark .flowchart-node {
    background: radial-gradient(circle at center, var(--bg-card-dark) 0%, transparent 100%);
    box-shadow: var(--shadow-dark-sm), inset 0 0 15px rgba(0,0,0,0.4);
}
.flowchart-node.node-data { --node-color: var(--primary-color); --node-color-light: var(--primary-color-light); }
.flowchart-node.node-io { --node-color: #3b82f6; --node-color-light: #60a5fa; }
.flowchart-node.node-process { --node-color: #a855f7; --node-color-light: #c084fc; }
.flowchart-node.node-rag { --node-color: #eab308; --node-color-light: #facc15; }

.flowchart-node::before { /* Pulsing Glow */
    content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%; border: 2px solid var(--node-color, transparent);
    opacity: 0; animation: pulse-glow 2.5s infinite ease-out; z-index: -1;
    transition: opacity 0.4s ease; pointer-events: none;
}
html.dark .flowchart-node::before { border-color: var(--node-color-light, transparent); }

.flowchart-node:hover {
    transform: translateY(-10px) scale(1.08) rotateZ(5deg);
    border-color: var(--node-color); box-shadow: var(--shadow-lg), 0 0 25px var(--node-color);
}
html.dark .flowchart-node:hover { border-color: var(--node-color-light); box-shadow: var(--shadow-dark-lg), 0 0 30px var(--node-color-light); }
.flowchart-node:hover::before { opacity: 0.8; animation-play-state: paused; }

.flowchart-node i {
    font-size: 2rem; margin-bottom: 0.75rem; color: var(--node-color);
    transition: transform 0.5s ease, filter 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    transform: translateZ(20px);
}
html.dark .flowchart-node i { color: var(--node-color-light); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));}
.flowchart-node:hover i { transform: translateZ(40px) scale(1.2) rotateY(360deg); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.3)); }
html.dark .flowchart-node:hover i { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));}

.flowchart-node span { font-size: 0.8rem; font-weight: 500; color: var(--text-heading-light); }
html.dark .flowchart-node span { color: var(--text-heading-dark); }
.flowchart-node .node-subtitle { font-size: 0.65rem; color: var(--text-muted-light); margin-top: 0.1rem; }
html.dark .flowchart-node .node-subtitle { color: var(--text-muted-dark); }

/* Flowchart Arrows */
.flowchart-arrow-horizontal, .flowchart-arrow-vertical { position: relative; background-color: var(--border-dark); opacity: 0.4; flex-shrink: 0; }
html.dark .flowchart-arrow-horizontal, html.dark .flowchart-arrow-vertical { background-color: var(--border-light); }
.flowchart-arrow-horizontal { width: 3rem; height: 2px; margin: auto 1rem; }
.flowchart-arrow-horizontal::after { content: ''; position: absolute; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--border-dark); right: -8px; top: 50%; transform: translateY(-50%); }
html.dark .flowchart-arrow-horizontal::after { border-left-color: var(--border-light); }
.flowchart-arrow-vertical { width: 2px; height: 1.5rem; margin: 0.5rem auto; }
.flowchart-arrow-vertical::after { content: ''; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--border-dark); bottom: -8px; left: 50%; transform: translateX(-50%); }
html.dark .flowchart-arrow-vertical::after { border-top-color: var(--border-light); }

@media (min-width: 1024px) { .flowchart-group .flowchart-arrow-vertical { display: none; } }
@media (max-width: 1023px) {
     .flowchart-container > .flowchart-arrow-horizontal { display: none; }
     .flowchart-container { flex-direction: column; }
     .flowchart-group + .flowchart-group::before { content: ''; display: block; width: 2px; height: 2rem; margin: 1rem auto; background-color: var(--border-dark); opacity: 0.4; position: relative; }
     .flowchart-group + .flowchart-group::after { content: ''; position: absolute; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--border-dark); /* Arrowhead needs pseudo element on the ::before */ top: 100%; left: 50%; transform: translateX(-50%);} /* Adjusted for pseudo */
     html.dark .flowchart-group + .flowchart-group::before { background-color: var(--border-light); }
     html.dark .flowchart-group + .flowchart-group::after { border-top-color: var(--border-light); }
}

/* Technology Stack Section (Modify .tech-item based on response #6) */
.tech-item {
    padding: 1.5rem 1rem; text-align: center;
    background-color: var(--bg-card-light);
    border-radius: var(--rounded-xl);
    border: 1px solid var(--border-card-light);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    transition: var(--transition-base);
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
html.dark .tech-item {
    background-color: var(--bg-card-dark);
    border-color: var(--border-card-dark);
    box-shadow: var(--shadow-dark-md);
}
.tech-item:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover-light);
}
html.dark .tech-item:hover {
    box-shadow: var(--shadow-dark-lg);
    border-color: var(--border-hover-dark);
}
.tech-item .tech-icon {
    font-size: 2.25rem; margin-bottom: 1rem;
    transition: var(--transition-base);
}
.tech-item:hover .tech-icon { transform: scale(1.2) rotate(10deg) translateY(-5px); }
.tech-name { font-weight: 600; font-size: 0.9rem; color: var(--text-heading-light); }
html.dark .tech-name { color: var(--text-heading-dark); }
.tech-desc { font-size: 0.75rem; color: var(--text-muted-light); margin-top: 0.25rem; }
html.dark .tech-desc { color: var(--text-muted-dark); }

/* Benefits Section (Modify .benefit-item based on response #6) */
.benefit-item {
    background-color: var(--bg-card-light);
    border-radius: var(--rounded-xl);
    border: 1px solid var(--border-card-light);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    transition: var(--transition-base);
    position: relative;
    padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem;
}
html.dark .benefit-item {
    background-color: var(--bg-card-dark);
    border-color: var(--border-card-dark);
    box-shadow: var(--shadow-dark-md);
}
.benefit-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover-light);
}
html.dark .benefit-item:hover {
    box-shadow: var(--shadow-dark-lg);
    border-color: var(--border-hover-dark);
}
.benefit-icon-wrapper {
    flex-shrink: 0; height: 3rem; width: 3rem; border-radius: var(--rounded-lg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); transition: var(--transition-base);
}
.benefit-item:hover .benefit-icon-wrapper { transform: scale(1.15) rotate(-5deg); box-shadow: var(--shadow-lg); }
.benefit-icon-bg-1 { background-image: linear-gradient(to right, #10b981, #34d399); }
.benefit-icon-bg-2 { background-image: linear-gradient(to right, #3b82f6, #60a5fa); }
.benefit-icon-bg-3 { background-image: linear-gradient(to right, #6366f1, #818cf8); }
.benefit-icon-bg-4 { background-image: linear-gradient(to right, #f59e0b, #fcd34d); }

.benefit-content { flex-grow: 1; }
.benefit-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-heading-light); }
html.dark .benefit-title { color: var(--text-heading-dark); }
.benefit-description { font-size: 0.95rem; color: var(--text-muted-light); line-height: 1.7; }
html.dark .benefit-description { color: var(--text-muted-dark); }

/* Further Reading Section (Modify .reading-card based on response #6) */
.reading-card {
    background-color: var(--bg-card-light);
    padding: 1.25rem; border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-md); transition: var(--transition-base);
    position: relative; overflow: hidden;
    border: 1px solid var(--border-card-light); backdrop-filter: blur(10px);
    display: flex; align-items: flex-start; gap: 1rem;
}
html.dark .reading-card {
    background-color: var(--bg-card-dark);
    border-color: var(--border-card-dark); box-shadow: var(--shadow-dark-md);
}
.reading-card:hover {
    box-shadow: var(--shadow-lg); border-color: var(--border-hover-light);
    transform: translateY(-5px) scale(1.02);
}
html.dark .reading-card:hover { box-shadow: var(--shadow-dark-lg); border-color: var(--border-hover-dark); }
.reading-card::after { display: none; } /* Ensure no corner */

.reading-icon-wrapper {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--rounded-lg);
    background-color: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center;
    transition: var(--transition-base);
}
html.dark .reading-icon-wrapper { background-color: rgba(52, 211, 153, 0.15); }
.reading-card:hover .reading-icon-wrapper { background-color: rgba(16, 185, 129, 0.2); transform: scale(1.1); }
html.dark .reading-card:hover .reading-icon-wrapper { background-color: rgba(52, 211, 153, 0.25); }
.reading-icon-wrapper i { font-size: 1.25rem; color: var(--primary-color); }
html.dark .reading-icon-wrapper i { color: var(--primary-color-light); }

.reading-content { flex-grow: 1; }
.reading-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.25rem; color: var(--text-heading-light); }
html.dark .reading-title { color: var(--text-heading-dark); }
.reading-description { font-size: 0.85rem; color: var(--text-muted-light); line-height: 1.6; }
html.dark .reading-description { color: var(--text-muted-dark); }


/* ==========================================================================
   自定义动画 (Keep original animations + Add pulse-glow)
   ========================================================================== */
@keyframes pulse { /* Logo Pulse */
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(1.05); }
}
@keyframes bounce { /* Email Icon Bounce */
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-6px);}
    60% {transform: translateY(-3px);}
}
@keyframes pulse-glow { /* New for flowchart nodes */
    0% { transform: scale(0.95); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 0; }
}
/* @keyframes pulse-arrow removed */


/* ==========================================================================
   Flowchart Flex Layout Styles (NEW - Replaces ALL previous layout attempts)
   ========================================================================== */

   .flowchart-flex-container {
    display: flex;
    flex-direction: column; /* Mobile First: Vertical stack */
    align-items: center;
    gap: 1rem; /* Gap between stages/connectors */
    padding: 1rem 0;
}

.flowchart-flex-stage {
    display: flex;
    flex-direction: column; /* Nodes stack vertically within stage */
    align-items: center; /* Center nodes horizontally */
    gap: 1.5rem; /* Space between nodes in the same stage */
    width: 100%; /* Full width on mobile */
    padding: 1rem 0; /* Vertical padding within stage */
}

.flowchart-flex-connector {
    width: 2px; /* Vertical connector line */
    height: 3rem; /* Height of connector */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Arrow at the bottom */
    margin: 0.5rem 0; /* Vertical margin */
}

.flowchart-flex-connector .connector-line {
    width: 100%; /* Takes the width of the parent (2px) */
    height: 100%; /* Takes the height of the parent */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--border-dark) 30%,
        var(--border-dark) 70%,
        transparent 100%
    );
    opacity: 0.6;
    background-size: 100% 200%;
    animation: flow-gradient 2s linear infinite;
}
html.dark .flowchart-flex-connector .connector-line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--border-light) 30%,
        var(--border-light) 70%,
        transparent 100%
    );
    background-size: 100% 200%; animation: flow-gradient 2s linear infinite;
}

.flowchart-flex-connector .connector-arrow {
    position: absolute;
    bottom: -1px; /* Position at the bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--border-dark); /* Arrow color */
}
html.dark .flowchart-flex-connector .connector-arrow {
    border-top-color: var(--border-light);
}

/* --- Desktop Layout (Large Screens) --- */
@media (min-width: 1024px) {
    .flowchart-flex-container {
        flex-direction: row; /* Horizontal layout */
        align-items: stretch; /* Stretch stages vertically */
        justify-content: center; /* Center stages horizontally */
        gap: 0; /* Remove gap, connectors handle spacing */
        padding: 2rem 0;
    }

    .flowchart-flex-stage {
        flex-direction: column; /* Keep nodes vertical within stage */
        justify-content: center; /* Center nodes vertically in stage */
        align-items: center;
        gap: 2rem; /* Increase gap between nodes */
        width: auto; /* Allow content width */
        min-width: 11rem; /* Ensure enough space for node */
        padding: 0 1rem; /* Horizontal padding for stage */
    }

    .flowchart-flex-connector {
        width: 5rem; /* Horizontal connector length */
        height: auto; /* Height determined by alignment */
        align-self: center; /* Vertically center the connector */
        flex-direction: row; /* Align line and arrow horizontally */
        align-items: center; /* Center line/arrow vertically */
        margin: 0 1rem; /* Horizontal margin */
    }

    .flowchart-flex-connector .connector-line {
        width: 100%;
        height: 2px; /* Horizontal line thickness */
        background: linear-gradient(
            to right, /* Change gradient direction */
            transparent 0%,
            var(--border-dark) 30%,
            var(--border-dark) 70%,
            transparent 100%
        );
        background-size: 200% 100%;
        animation: flow-gradient-horizontal 2s linear infinite;
    }
    html.dark .flowchart-flex-connector .connector-line {
         background: linear-gradient(
            to right,
            transparent 0%,
            var(--border-light) 30%,
            var(--border-light) 70%,
            transparent 100%
        );
        background-size: 200% 100%; animation: flow-gradient-horizontal 2s linear infinite;
    }

    .flowchart-flex-connector .connector-arrow {
        position: absolute;
        right: -1px; /* Position at the right end */
        top: 50%;
        transform: translateY(-50%);
        left: auto; /* Reset left */
        bottom: auto; /* Reset bottom */
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 9px solid var(--border-dark); /* Arrow color */
        border-right: 0;
    }
     html.dark .flowchart-flex-connector .connector-arrow {
        border-left-color: var(--border-light);
    }

     /* Horizontal flow animation */
    @keyframes flow-gradient-horizontal {
        0% { background-position: 100% 0%; }
        100% { background-position: -100% 0%; }
    }
}

/* --- Keep Existing Flowchart Node Styles --- */
/* Ensure your previous .flowchart-node styles (circular, glow, hover, icon styles) are still present in style.css */
@keyframes pulse-glow { /* Keep this animation */
    0% { transform: scale(0.95); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 0; }
}
.flowchart-node {
    width: 10rem; height: 10rem; padding: 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    border-radius: 50%; border: 2px solid transparent;
    background: radial-gradient(circle at center, var(--bg-card-light) 0%, transparent 100%);
    box-shadow: var(--shadow-sm), inset 0 0 10px rgba(255,255,255,0.3);
    backdrop-filter: blur(10px) saturate(150%);
    position: relative; overflow: visible;
    transform-style: preserve-3d; perspective: 1000px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
html.dark .flowchart-node {
    background: radial-gradient(circle at center, var(--bg-card-dark) 0%, transparent 100%);
    box-shadow: var(--shadow-dark-sm), inset 0 0 15px rgba(0,0,0,0.4);
}
/* ... Rest of the .flowchart-node styles (::before, :hover, i, span, .node-subtitle, --node-color vars) from response #6 ... */
/* Ensure node type color variables are defined */
.flowchart-node.node-data { --node-color: var(--primary-color); --node-color-light: var(--primary-color-light); }
.flowchart-node.node-io { --node-color: #3b82f6; --node-color-light: #60a5fa; }
.flowchart-node.node-process { --node-color: #a855f7; --node-color-light: #c084fc; }
.flowchart-node.node-rag { --node-color: #eab308; --node-color-light: #facc15; }

.flowchart-node::before { /* Pulsing Glow */
    content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%; border: 2px solid var(--node-color, transparent);
    opacity: 0; animation: pulse-glow 2.5s infinite ease-out; z-index: -1;
    transition: opacity 0.4s ease; pointer-events: none;
}
html.dark .flowchart-node::before { border-color: var(--node-color-light, transparent); }

.flowchart-node:hover {
    transform: translateY(-10px) scale(1.08) rotateZ(5deg);
    border-color: var(--node-color); box-shadow: var(--shadow-lg), 0 0 25px var(--node-color);
}
html.dark .flowchart-node:hover { border-color: var(--node-color-light); box-shadow: var(--shadow-dark-lg), 0 0 30px var(--node-color-light); }
.flowchart-node:hover::before { opacity: 0.8; animation-play-state: paused; }

.flowchart-node i {
    font-size: 2rem; margin-bottom: 0.75rem; color: var(--node-color);
    transition: transform 0.5s ease, filter 0.3s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    transform: translateZ(20px);
}
html.dark .flowchart-node i { color: var(--node-color-light); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));}
.flowchart-node:hover i { transform: translateZ(40px) scale(1.2) rotateY(360deg); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.3)); }
html.dark .flowchart-node:hover i { filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));}

.flowchart-node span { font-size: 0.8rem; font-weight: 500; color: var(--text-heading-light); }
html.dark .flowchart-node span { color: var(--text-heading-dark); }
.flowchart-node .node-subtitle { font-size: 0.65rem; color: var(--text-muted-light); margin-top: 0.1rem; }
html.dark .flowchart-node .node-subtitle { color: var(--text-muted-dark); }

/* Flow gradient animation */
@keyframes flow-gradient {
    0% { background-position: 0% 100%; }
    100% { background-position: 0% -100%; }
}
@keyframes flow-gradient-horizontal {
    0% { background-position: 100% 0%; }
    100% { background-position: -100% 0%; }
}