/* 全局盒模型重置，防止水平溢出 */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

:root {
    --color-bg-darkest: #0F172A;
    --color-bg-medium: #1E293B;
    --color-bg-light: #2D3A4D;
    --color-bg-code: #101720;
    --color-primary: #3385FF;
    --color-secondary: #00BFFF;
    --color-accent: #06B6D4;
    --color-accent-light: #2BCDCF;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;
    --border-subtle: rgba(51, 133, 255, 0.2);
    --border-accent: rgba(51, 133, 255, 0.4);
    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-btn: 0 4px 8px rgba(51, 133, 255, 0.2);
    --shadow-btn-hover: 0 8px 16px rgba(51, 133, 255, 0.3);
    --shadow-glow-icon: none;
    --shadow-glow-text: none;
    --font-family-heading: 'Space Grotesk', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-family-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --section-padding-x: 2rem;
    --section-padding-y-lg: 6rem;
    --section-padding-y-md: 4rem;
    /* Adjusted container max width */
    --container-max-width: 1400px; /* Increased from 1280px */
    --header-height: 4.5rem; /* Adjusted slightly to accommodate the progress bar underneath */
}

/* 移动端响应式变量重定义 */
@media (max-width: 767px) {
    :root {
        --section-padding-x: 1rem;
        --section-padding-y-lg: 3rem;
        --section-padding-y-md: 2rem;
    }
}

@media (max-width: 480px) {
    :root {
        --section-padding-x: 0.75rem;
        --section-padding-y-lg: 2.5rem;
        --section-padding-y-md: 1.5rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-bg-darkest);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Removed min-height to ensure scrollable content */
    overflow-x: hidden;
    position: relative;
    background-attachment: fixed;
    padding-top: var(--header-height); /* Add padding equal to header height to prevent content hiding */
}

body.dark {
    background: var(--color-bg-darkest);
    color: var(--color-text-primary);
}

body.light {
    background: #F0F4F8;
    color: #2D3748;
}

body.light .text-white {
    color: #2D3748 !important;
}

body.light .text-gray-300 {
    color: #4A5568 !important;
}

body.light .text-gray-400 {
    color: #64748B !important;
}

body.light .text-blue-200 {
    color: #4A5568 !important;
}

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6 {
    color: #2D3748 !important;
}

body.light p {
    color: #4A5568 !important;
}

body.light .hero .bullet-point-text,
/* Removed light mode override for quick-start-step-item h4, as gradient-text handles it */
/* body.light .quick-start-step-item h4, */
body.light .faq-block summary {
    color: #2D3748;
}

body.light .quick-start-step-item p,
body.light .faq-block details p {
    color: #4A5568;
}

body.light .footer-col h3,
body.light .footer-col .logo-text {
    color: #2D3748;
}

body.light .footer-col p,
body.light .footer-col ul li a {
    color: #4A5568;
}

body.light .footer-col .contact-info ul li,
body.light .footer-col .contact-info ul li span {
    color: #4A5568;
}

body.light .footer-bottom p {
    color: #4A5568;
}

/* Updated .gradient-text styling for theme adaptability */
.gradient-text {
    /* Default for dark mode / modern browsers */
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback for browsers that don't support text clip, and used in light mode BEFORE the light mode override */
    color: var(--color-primary); /* Base fallback color */
    /* font-weight: 700; Added for emphasis, can adjust */
    /* Remove existing !important if present to allow light mode override */
}

body.light .gradient-text {
   /* Use a solid color in light mode */
   background: none; /* Remove gradient background */
   -webkit-background-clip: unset; /* Reset clip */
   background-clip: unset;
   -webkit-text-fill-color: unset; /* Reset fill color */
   color: var(--color-primary) !important; /* Use primary color, !important ensures it overrides the base color rule */
}

body.light .stat-value {
    -webkit-text-fill-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

body.light .bg-gray-900 {
    background-color: #E2E8F0 !important;
}

body.light .bg-gray-900\/50 {
    background-color: rgba(226, 232, 240, 0.5) !important;
}

body.light .border-gray-800 {
    border-color: #CBD5E1;
}

body.light .feature-card,
body.light .api-card,
body.light .model-card,
body.light .stat-card,
body.light .architecture-item,
body.light .faq-block details,
body.light .quick-start-block {
    background: #FFFFFF;
    color: #2D3748;
    border-color: rgba(51, 133, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

body.light .feature-card::before,
body.light .model-card::before {
    background: var(--color-primary);
}

body.light .feature-card:hover,
body.light .api-card:hover,
body.light .model-card:hover,
body.light .architecture-item:hover {
    border-color: var(--color-primary);
}

body.light .feature-content p,
body.light .workflow-desc,
body.light .architecture-feature p,
body.light .text-gray-400 {
    color: #718096;
}

body.light .tech-badge {
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
    border-color: rgba(51, 133, 255, 0.2);
}

body.light .denosi-outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.light .denosi-outline:hover {
    background: rgba(51, 133, 255, 0.05);
}

body.light .denosi-outline.btn-secondary {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

body.light .denosi-outline.btn-secondary:hover {
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
}

body.light .hero-workflow-container {
    background: #FFFFFF;
    border-color: rgba(51, 133, 255, 0.2);
}

body.light .hero-workflow-step {
    background: #F8FAFC;
    border-color: rgba(0, 0, 0, 0.05);
}

body.light .hero-workflow-step.core-step {
    background: rgba(51, 133, 255, 0.1);
    border-color: rgba(51, 133, 255, 0.3);
}

body.light .hero-workflow-text .title {
    color: #2D3748;
}

body.light .hero-workflow-text .subtitle {
    color: #64748B;
}

body.light .feature-icon,
body.light .hero .bullet-point-icon-wrapper,
body.light .quick-start-step-item .step-number-circle {
    color: var(--color-primary);
    background: rgba(51, 133, 255, 0.08);
    box-shadow: none;
    border-color: rgba(51, 133, 255, 0.2);
}

body.light .feature-item:hover .feature-icon {
    box-shadow: none;
}

body.light .architecture-icon {
    color: white;
}

body.light .feature-icon-small {
    color: var(--color-primary);
}

body.light .feature-icon-wrapper {
    background: rgba(51, 133, 255, 0.08);
}

body.light .tech-node,
body.light .architecture-node {
    background: var(--color-accent);
    box-shadow: none;
}

body.light .tech-line {
    background: var(--color-primary);
    opacity: 0.1;
}

body.light .glow-text {
    text-shadow: none;
    -webkit-text-stroke: none;
}

body.light .api-url-item {
    background: #F8FAFC;
}

body.light .api-url-code {
    color: var(--color-primary);
}

body.light .response-tag {
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
}

body.light .theme-toggle {
    background: #E2E8F0;
    color: #2D3748;
}

body.light .theme-toggle i {
    color: #2D3748;
}

body.light .header {
    background-color: #F8FAFC;
    border-bottom-color: #D9E2EC;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.light .header .logo-text {
    color: var(--color-bg-darkest);
}

body.light .header .nav-links ul li a {
    color: #4A5568;
}

body.light .header .nav-links ul li a:hover {
    color: var(--color-primary);
}

body.light .header-logo-image {
    border-color: rgba(51, 133, 255, 0.2);
}

body.light .api-card .code-block {
    background-color: #f8f8f8;
}

/* Styles for Highlight.js in Light Mode */
body.light .hljs {
    color: #383a42; /* Default text color */
    background: #f8f8f8; /* Background color */
}
body.light .hljs-comment,
body.light .hljs-quote {
    color: #a0a1a7;
}
body.light .hljs-keyword,
body.light .hljs-selector-tag,
body.light .hljs-subst {
    color: #a626a4;
}
body.light .hljs-number,
body.light .hljs-literal,
body.light .hljs-variable,
body.light .hljs-template-variable,
body.light .hljs-attribute {
    color: #986801;
}
body.light .hljs-string,
body.light .hljs-regexp,
body.light .hljs-symbol,
body.light .hljs-variable.constant_ {
    color: #50a14f;
}
body.light .hljs-class .hljs-title,
body.light .hljs-type,
body.light .hljs-selector-class {
    color: #0184bc;
}
body.light .hljs-function .hljs-title {
    color: #e45649;
}
body.light .hljs-title.class_ {
    color: #0184bc;
}
body.light .hljs-params {
    color: #383a42;
}

/* Styles for Highlight.js in Dark Mode (already mostly there) */
body.dark .hljs {
    color: #abb2bf;
    background: #282c34;
}
body.dark .hljs-comment,
body.dark .hljs-quote {
    color: #5c6370;
    font-style: italic;
}
body.dark .hljs-keyword,
body.dark .hljs-selector-tag,
body.dark .hljs-subst {
    color: #c678dd;
}
body.dark .hljs-number,
body.dark .hljs-literal,
body.dark .hljs-variable,
body.dark .hljs-template-variable,
body.dark .hljs-attribute {
    color: #d19a66;
}
body.dark .hljs-string,
body.dark .hljs-regexp,
body.dark .hljs-symbol,
body.dark .hljs-variable.constant_ {
    color: #98c379;
}
body.dark .hljs-class .hljs-title,
body.dark .hljs-type,
body.dark .hljs-selector-class {
    color: #e5c07b;
}
body.dark .hljs-function .hljs-title {
    color: #61aeee;
}
body.dark .hljs-title.class_ {
    color: #e5c07b;
}
body.dark .hljs-params {
    color: #abb2bf;
}


/* Code Block Visibility */
.api-card .code-block pre {
    padding: 1.5rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
    line-height: 1.5;
    display: none; /* Hide all code blocks by default */
    /* Background and color handled by theme-specific .hljs rules */
    cursor: text; /* Use text cursor for standard selection */
    position: relative; /* Needed for potential future effects */
}

.api-card .code-block pre.active {
    display: block; /* Only show the active code block */
}

/* --- Code Tabs Styling --- */
.api-card .code-tabs {
    display: flex;
    /* gap: 1rem; Removed gap to explicitly control spacing with margins */
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: center; /* Align tabs and button vertically */
    padding-bottom: 0.5rem; /* Add padding to prevent scrollbar overlap */
    flex-wrap: wrap; /* Allow tabs and button to wrap */
    /* Added justify-content to push items to the start and button to the end */
    justify-content: flex-start; /* Align tabs to the start */
    width: 100%; /* Ensure it takes full width to allow margin-left: auto on button */
}

/* Add right margin to tabs to create space before the button */
.api-card .lang-tab {
    margin-right: 1rem; /* Space between tabs and the button */
}

/* Ensure the last tab doesn't have extra large margin if the button wraps */
.api-card .lang-tab:last-of-type {
     margin-right: 1rem; /* Keep consistent gap */
}


.api-card .code-tabs::-webkit-scrollbar {
    display: none;
}

.api-card .lang-tab {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center; /* Vertically center icon and text */
    padding: 0.5rem 1rem;
    border-radius: 6px 6px 0 0;
    background: rgba(51, 133, 255, 0.2); /* Default bg (dark mode) */
    color: white; /* Default text (dark mode) */
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer; /* Indicate clickability */
    transition: background 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    user-select: none; /* Prevent text selection */
    border: 1px solid transparent; /* Added border for consistency and light mode */
     /* Removed margin-right here, using parent flex gap or specific margin */
}

/* Light mode specific styles for tabs */
body.light .api-card .lang-tab {
    background: #F7FAFC !important; /* Light background for unselected tabs in light mode */
    color: #4A5568 !important; /* Dark text for unselected tabs in light mode */
    border: 1px solid #E2E8F0 !important; /* Light border */
    box-shadow: none; /* Remove shadow */
}

/* Light mode hover styles - Make it more noticeable */
body.light .api-card .lang-tab:hover:not(.active) {
    background: #EDF2F7 !important; /* Slightly darker light background on hover */
    color: #2D3748 !important; /* Darker text on hover */
    border-color: #CBD5E1 !important; /* Darker border on hover */
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Active tab styles for light mode */
body.light .api-card .lang-tab.active {
    background: var(--color-primary) !important; /* Blue theme color for active tab in light mode */
    color: white !important; /* White text for active tab in light mode */
    border-color: var(--color-primary) !important; /* Blue theme border for active tab */
    box-shadow: none; /* Remove shadow */
}

/* Active tab styles for dark mode */
body.dark .api-card .lang-tab.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Style for icons within tabs */
.api-card .lang-tab i {
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Style for the new copy button */
.copy-code-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-subtle); /* Subtle border */
    background: rgba(51, 133, 255, 0.15); /* Slightly stronger bg than tabs */
    color: var(--color-text-primary); /* White/light text */
    margin-left: auto; /* Push button to the right */
    margin-right: 0; /* Ensure no margin right */
    flex-shrink: 0; /* Prevent shrinking */
    user-select: none; /* Prevent text selection */
    box-shadow: none;
}

.copy-code-button:hover {
    background: rgba(51, 133, 255, 0.3);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.copy-code-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.copy-code-button i {
    margin-right: 0.5rem;
    color: var(--color-accent-light); /* Icon color */
    transition: color 0.3s ease;
}

body.light .copy-code-button {
    background: rgba(51, 133, 255, 0.1);
    color: #2D3748;
    border-color: rgba(51, 133, 255, 0.2);
    box-shadow: none;
}

body.light .copy-code-button:hover {
    background: rgba(51, 133, 255, 0.2);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.light .copy-code-button:active {
     transform: translateY(0);
     box-shadow: none;
}

body.light .copy-code-button i {
     color: var(--color-primary);
}

/* Removed .code-tabs-tip styling */

/* Responsive adjustments for the button */
@media (max-width: 767px) {
     .api-card .code-tabs {
         gap: 0; /* Remove gap when wrapping to control spacing manually */
         justify-content: center; /* Center items if wrapped */
     }
     .api-card .lang-tab {
         padding: 0.4rem 0.8rem;
         font-size: 0.85rem;
         margin: 0.25rem 0.5rem; /* Add margin for spacing when wrapped */
     }
     .api-card .lang-tab:last-of-type {
         margin-right: 0.5rem; /* Ensure consistent right margin */
     }
    .copy-code-button {
        margin-left: 0; /* Remove desktop margin-left: auto */
        width: 100%; /* Take full width on the next line */
        text-align: center; /* Center the content */
        margin-top: 0.5rem; /* Add space above it if wrapped */
        justify-content: center; /* Center icon/text in button */
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        margin-right: 0; /* Explicitly remove the desktop margin-right */
    }
}


/* Copy feedback overlay styling */
.copy-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    z-index: 10001; /* Above everything */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.copy-feedback.show {
    opacity: 1;
    visibility: visible;
}

/* Success state */
.copy-feedback.success {
    background-color: rgba(34, 197, 94, 0.95); /* Green */
    color: white;
}

/* Failure state */
.copy-feedback.failed {
    background-color: rgba(239, 68, 68, 0.95); /* Red */
    color: white;
}


@media (max-width: 767px) {
    .copy-feedback {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }
}
/* --- End Code Tabs Styling --- */


/* Centering and max-width for the container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto; /* This centers the container */
    padding: 0 var(--section-padding-x); /* Apply horizontal padding */
}

/* Responsive padding for container at lower widths */
/* The padding adjustments in the media queries keep the content from touching the edges on smaller screens */
@media (max-width: calc(var(--container-max-width) + 3rem)) { /* Apply padding when viewport is close to or exceeds max-width + 2*1.5rem (for 1.5rem padding) */
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 767px) {
    .container {
        padding: 0 var(--section-padding-x); /* Revert to smaller padding on mobile */
    }
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.75rem;
    line-height: 1;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

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

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
}

/* 移动端按钮适配 */
@media (max-width: 767px) {
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

.denosi-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    box-shadow: var(--shadow-btn);
}

.denosi-gradient:hover {
    background: linear-gradient(135deg, #2A68CC, #00B0E0);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.denosi-outline {
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}

.denosi-outline:hover {
    background: rgba(51, 133, 255, 0.1);
    box-shadow: none;
}

body.light .denosi-outline.btn-secondary {
    color: var(--color-primary);
}

body.light .denosi-outline.btn-secondary:hover {
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
}

.tech-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    background: rgba(51, 133, 255, 0.2);
    color: var(--color-primary);
    font-weight: 500;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-subtle);
}

/* 移动端tech-badge适配 */
@media (max-width: 767px) {
    .tech-badge {
        padding: 0.4rem 1.1rem; /* Adjusted padding slightly */
        font-size: 0.85rem;
        letter-spacing: 0.3px;
        /* margin-top: 2.5rem; Removed as it was likely adding space unintentionally */
    }
}

@media (max-width: 480px) {
    .tech-badge {
        padding: 0.3rem 0.9rem; /* Adjusted padding slightly */
        font-size: 0.8rem;
        letter-spacing: 0.2px;
        /* margin-top: 2rem; Removed */
    }
}

.glow-text {
    text-shadow: var(--shadow-glow-text);
    -webkit-text-stroke: var(--shadow-glow-text);
    font-weight: 700;
}


.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

/* 移动端margin适配 */
@media (max-width: 767px) {
    .mb-4 {
        margin-bottom: 0.75rem;
    }

    .mb-6 {
        margin-bottom: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.5rem;
    }

    .mb-12 {
        margin-bottom: 2rem;
    }
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-16 {
    margin-top: 4rem;
}

.mr-2 {
    margin-right: 0.5rem;
}
.ml-auto {
    margin-left: auto; /* Used for the tips span */
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.hidden {
    display: none;
}

.w-full {
    width: 100%;
}

/* Header styling */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Header background spans full width */
    height: var(--header-height);
    background-color: var(--color-bg-medium);
    z-index: 1000;
    border-bottom: 1px solid #1e293b;
    /* Use flex on the header itself to center the inner container */
    display: flex;
    justify-content: center; /* Center the inner container horizontally */
    align-items: center; /* Vertically center the inner container within the header height */
}

body.light .header {
    background-color: #F8FAFC;
    border-bottom-color: #D9E2EC;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Inner container for header content */
.header-inner-container {
    max-width: var(--container-max-width);
    width: 100%; /* Allow inner container to take full width up to max-width */
    height: 100%; /* Make inner container fill header height */
    display: flex; /* Apply flexbox to arrange logo, nav, actions */
    justify-content: space-between;
    align-items: center; /* Vertically align items (logo, nav, actions) within the inner container */
    padding: 0 var(--section-padding-x); /* Apply padding */
}

/* Responsive padding for header inner container */
@media (max-width: calc(var(--container-max-width) + 3rem)) {
    .header-inner-container {
         padding: 0 1.5rem; /* Use 1.5rem padding when viewport is close to max-width */
    }
}

@media (max-width: 1023px) {
    /* Tablet and below */
    .header-inner-container {
        /* Allow header content to span closer to full width on smaller screens */
        max-width: 100vw; /* Allow it to use full width if needed */
        padding: 0 var(--section-padding-x); /* Use mobile section padding */
    }
}

@media (max-width: 767px) {
     .header-inner-container {
         padding: 0 var(--section-padding-x); /* Keep smaller mobile padding */
     }
}

/* Ensure header children participate correctly in alignment */
.header-inner-container > .logo-container,
.header-inner-container > .nav-links,
.header-inner-container > .actions {
    height: 100%; /* Ensure these direct flex children fill the height */
    display: flex; /* Use flex on these containers as well */
    align-items: center; /* Vertically align contents within these items */
}


/* Page Progress Bar Styling */
#page-progress-bar {
    position: fixed;
    top: var(--header-height); /* Position directly below the fixed header */
    left: 0;
    width: 0%; /* Starts empty */
    height: 4px; /* Thickness of the bar */
    background-color: var(--color-primary); /* Use primary color */
    z-index: 999; /* Below the header, above content */
    transition: width 0.1s linear; /* Smooth transition for progress updates */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
}

.header-logo-image {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid transparent;
}

body.dark .header-logo-image {
    border-color: rgba(255,255,255,0.1);
}

body.light .header-logo-image {
    border-color: rgba(51, 133, 255, 0.2);
}

.header .logo-text {
    font-size: 1.6rem;
    font-family: var(--font-family-heading);
    font-weight: bold;
    color: white;
    margin-left: 0.8rem;
}

body.light .header .logo-text {
    color: var(--color-bg-darkest);
}

.header .nav-links ul {
    list-style: none;
    display: flex;
    /* Adjusted gap for navigation items */
    gap: 2.5rem; /* Increased gap for better spacing */
}

.header .nav-links ul li a {
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
    position: relative;
    font-weight: 700;
    font-size: 1.1rem; /* Slightly adjusted font size */
    display: flex; /* Added flex to align icon and text */
    align-items: center; /* Align icon and text vertically */
}

body.light .header .nav-links ul li a {
    color: #4A5568;
}

body.light .header .nav-links ul li a:hover {
    color: var(--color-primary);
}

.header .nav-links ul li a:hover {
    color: var(--color-accent);
}

/* Style for icons in header navigation */
.header .nav-links ul li a i {
    margin-right: 0.5rem; /* Space between icon and text */
    color: var(--color-accent); /* Default icon color */
    transition: color 0.3s ease;
}
body.light .header .nav-links ul li a i {
    color: var(--color-primary); /* Icon color in light mode */
}
.header .nav-links ul li a:hover i {
    color: var(--color-accent-light); /* Change icon color on hover if desired */
}
body.light .header .nav-links ul li a:hover i {
    color: var(--color-primary); /* Keep light mode hover color consistent */
}


.header .nav-links ul li a::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--color-primary), var(--color-accent));
    transition: width 0.3s ease;
}

.header .nav-links ul li a:hover::after {
    width: 100%;
}

.header .actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


@media (min-width: 1024px) {
    /* Adjust spacing between flex items in the header inner container */
    .header-inner-container .logo-container {
        margin-right: 2rem;
    }
    .header-inner-container .nav-links {
        margin-right: 4rem;
    }
    .header-inner-container .actions {
        margin-left: 0;
        display: flex;
    }
}

@media (max-width: 1023px) {
    .header-inner-container .actions {
        margin-left: auto;
        margin-right: 0;
        padding-right: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        right: 0;
    }
    .header-inner-container .logo-container {
        margin-left: 0;
        padding-left: 0;
    }
     .header-inner-container .nav-links {
        display: none; /* Hide main nav on smaller screens */
     }
    .header .actions .btn {
        /* Adjust btn styles for smaller header */
        display: inline-flex;
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
}


@media (min-width: 1024px) {
    .header .nav-links {
        display: flex;
    }

    .header .actions .btn {
        display: inline-flex;
        padding: 0.5rem 1.2rem;
        font-size: 0.95rem;
    }

    .header .actions .mobile-menu-toggle {
        display: none;
    }
}

.header .theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    flex-shrink: 0;
}

body.light .header .theme-toggle {
    background: #E2E8F0;
    color: #2D3748;
}

body.light .header .theme-toggle:hover {
    background: rgba(51, 133, 255, 0.1);
}

body.light .header .theme-toggle i {
    color: #2D3748;
}

.header .theme-toggle:hover {
    background: rgba(51, 133, 255, 0.2);
}

.header .theme-toggle i {
    color: white;
}

.header .actions .mobile-menu-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--color-text-secondary);
    display: block;
    margin-left: 0;
    margin-right: 1rem;
}

body.light .header .actions .mobile-menu-toggle {
    color: #4A5568;
}

/* 移动端菜单样式 */
.mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: var(--color-bg-medium);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

body.light .mobile-menu {
    background: #F8FAFC;
}

.mobile-menu-content {
    padding: 2rem var(--section-padding-x); /* Use section padding */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

/* Responsive padding for mobile menu content */
@media (max-width: 767px) {
    .mobile-menu-content {
        padding: 2rem var(--section-padding-x);
    }
}
@media (max-width: 480px) {
    .mobile-menu-content {
        padding: 2rem var(--section-padding-x);
    }
}


.mobile-nav-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-links ul li a {
    color: var(--color-text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; /* Added flex to align icon and text */
    align-items: center; /* Align icon and text vertically */
    transition: color 0.3s ease;
}

body.light .mobile-nav-links ul li a {
    color: #2D3748;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.mobile-nav-links ul li a:hover {
    color: var(--color-primary);
}

/* Style for icons in mobile navigation */
.mobile-nav-links ul li a i {
    margin-right: 1rem; /* Space between icon and text */
    color: var(--color-text-primary); /* Default icon color (match text) */
    transition: color 0.3s ease;
}
body.light .mobile-nav-links ul li a i {
     color: #2D3748; /* Icon color in light mode (match text) */
}
.mobile-nav-links ul li a:hover i {
    color: var(--color-primary); /* Icon color on hover */
}
body.light .mobile-nav-links ul li a:hover i {
     color: var(--color-primary); /* Icon color on hover in light mode */
}


.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
    padding-top: 2rem;
}

.mobile-menu-actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }
}

.header .actions .btn i {
    margin-left: 0.8rem;
}

.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:linear-gradient(rgba(51, 133, 255, 0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(51, 133, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    opacity: 0.1;
    animation: moveGrid 90s linear infinite;
}

@keyframes moveGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 100%;
    }
}

.tech-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: none;
    z-index: -1;
    opacity: 0.5;
    animation: pulseNode 4s infinite alternate;
}

.tech-node:nth-child(2) {
    animation-delay: 0.5s;
}

.tech-node:nth-child(3) {
    animation-delay: 1s;
}

.tech-node:nth-child(4) {
    animation-delay: 1.5s;
}

@keyframes pulseNode {
    from {
        transform: scale(1);
        opacity: 0.5;
    }
    to {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(51, 133, 255, 0.1);
    z-index: -1;
    animation: floatParticle 15s ease-in-out infinite;
}

@keyframes floatParticle {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(20px) translateX(-10px);
    }
    50% {
        transform: translateY(0) translateX(10px);
    }
    75% {
        transform: translateY(-20px) translateX(-5px);
    }
}

.hero {
    position: relative;
    padding-bottom: var(--section-padding-y-lg);
    padding-top: calc(var(--header-height) + 6rem); /* Adjusted padding-top because body has padding */
    overflow: hidden;
    text-align: left;
    wangxiaz-index: 1;
}

@media (max-width: 767px) {
    .hero {
        padding-top: calc(var(--header-height) + 3rem); /* Adjusted padding-top for mobile */
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: calc(var(--header-height) + 2.5rem); /* Adjusted padding-top for smaller mobile */
    }
}

.section {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
    position: relative;
    z-index: 5;
}

@media (max-width: 767px) {
    .section {
        padding-top: var(--section-padding-y-md);
        padding-bottom: var(--section-padding-y-md);
    }
}

.footer {
    background-color: var(--color-bg-medium);
    color: var(--color-text-primary);
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 1px solid #1e293b;
}

body.light .footer {
    background-color: #E2E8F0;
    border-top-color: #CBD5E1;
}

.tech-line {
    position: absolute;
    height: 1px;
    background: var(--color-primary);
    opacity: 0.1;
    z-index: -1;
    animation: animateLine 12s linear infinite;
}

@keyframes animateLine {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(0);
        opacity: 0.1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr 1fr;
    }
}

.hero h1 {
    font-size: 3.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
}

.hero h1 span.block {
    display: block;
}

.hero h1 span.gradient-text {
    margin-top: 0.5rem;
    color: var(--color-primary);
}

.hero p {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
    max-width: 42rem;
}

@media (max-width: 767px) {
    .hero p {
        font-size: 1rem;
    }
}

.hero .bullet-points {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero .bullet-point-item {
    display: flex;
    align-items: flex-start;
}

.hero .bullet-point-icon-wrapper {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: rgba(51, 133, 255, 0.2);
    color: var(--color-accent);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
}

body.light .hero .bullet-point-text {
    color: #2D3748;
}

.hero .bullet-point-icon-wrapper i {
    font-size: 0.875rem;
}

.hero .bullet-point-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-left: 0.75rem;
    margin-bottom: 0;
}

/* 移动端bullet-point适配 */
@media (max-width: 767px) {
    .hero .bullet-point-icon-wrapper {
        width: 1.5rem;
        height: 1.5rem;
    }

    .hero .bullet-point-icon-wrapper i {
        font-size: 0.75rem;
    }

    .hero .bullet-point-text {
        font-size: 1rem;
        margin-left: 0.5rem;
    }

    .hero .bullet-points {
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero .bullet-point-icon-wrapper {
        width: 1.25rem;
        height: 1.25rem;
    }

    .hero .bullet-point-icon-wrapper i {
        font-size: 0.7rem;
    }

    .hero .bullet-point-text {
        font-size: 0.9rem;
        margin-left: 0.4rem;
    }

    .hero .bullet-points {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
}

.hero .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero .btn i {
    margin-left: 0.5rem;
}

@media (min-width: 768px) {
    .hero .btn i {
        margin-left: 1rem;
    }
}

@media (max-width: 767px) {
    .hero .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .hero .btn-group {
        flex-direction: column;
        align-items: center;
    }

    .hero .btn i {
        margin-left: 0.5rem;
    }
}

/* Hero Workflow Wrapper Styling */
.hero-workflow-wrapper {
    display: flex; /* Always display */
    justify-content: center;
    /* Add margin top for mobile spacing */
    margin-top: 3rem;
}

@media (min-width: 1024px) {
    .hero-workflow-wrapper {
        margin-top: 0; /* Remove margin top on desktop */
        justify-content: center;
    }
}


.hero-workflow-container {
    width: 350px;
    background: var(--color-bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-card);
    margin: 0 auto;
    animation: floating 8s ease-in-out infinite;
}

.hero-workflow-step {
    display: flex;
    align-items: center;
    background: var(--color-bg-light);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.hero-workflow-step:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
}

.hero-workflow-step.core-step {
    background: rgba(51, 133, 255, 0.2);
    border-color: var(--color-primary);
    box-shadow: none;
}

.hero-workflow-icon {
    font-size: 1.25rem;
    color: var(--color-accent);
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(51, 133, 255, 0.1);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.hero-workflow-text .title {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 1rem;
}

.hero-workflow-text .subtitle {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.hero-workflow-arrow {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0.25rem 0;
}

.hero-workflow-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--color-primary);
    opacity: 0.4;
    transform: translateX(-50%);
}

.hero-workflow-arrow i {
    color: var(--color-primary);
    animation: pulse-arrow 2s infinite;
    position: relative;
    z-index: 1;
}

@keyframes pulse-arrow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes floating {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(3deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

@media (max-width: 767px) {
    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 1.5rem;
    }
}

.section-header h2 {
    font-size: 2.25rem;
    font-family: var(--font-family-heading);
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.section-header p {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    max-width: 48rem;
    margin: 0 auto;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (max-width: 767px) {
    .grid-2-cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .grid-2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid-3-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (max-width: 767px) {
    .grid-3-cols {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .grid-3-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.feature-card {
    background: var(--color-bg-light);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 1023px) {
    .feature-card {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .feature-card .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .feature-card h3 {
        font-size: 1.25rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--color-primary);
}

.feature-card .feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: rgba(51, 133, 255, 0.1);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: none;
}

body.light .feature-card .feature-icon {
    color: var(--color-primary);
}

.feature-card:hover .feature-icon {
    background: rgba(51, 133, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: none;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-family: var(--font-family-heading);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

body.light .feature-card h3 {
    color: #2D3748;
}

.feature-card p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

body.light .feature-card p {
    color: #4A5568;
}


.api-example-section {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
}

.api-card {
    background: var(--color-bg-light);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
}

@media (max-width: 1023px) {
    .api-card {
        padding: 1.5rem;
    }
}

.api-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--color-primary);
}

/* Code Block Visibility - Simplified */
.api-card .code-block pre {
    padding: 1.5rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    -webkit-overflow-scrolling: touch;
    font-size: 0.9rem;
    line-height: 1.5;
    display: none; /* Hide all code blocks by default */
    /* Background and color should be handled by the theme-specific .hljs rules */
    cursor: text; /* Indicate it's text for selection */
    position: relative; /* Needed for potential future effects */
}

.api-card .code-block pre.active {
    display: block; /* Only show the active code block */
}

@media (max-width: 767px) {
    .api-card .code-block pre {
        padding: 1rem;
        font-size: 0.85rem;
    }
}

.api-card .code-block pre code {
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Droid Sans Mono', monospace;
}

.api-card .code-content {
    display: none;
}

.api-card .code-content.active {
    display: block;
}

.api-key-info-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 3rem;
}

@media (max-width: 1023px) {
    .api-key-info-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (min-width: 768px) {
    .api-key-info-section {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.api-key-block {
    padding: 1.5rem;
    background-color: var(--color-bg-medium);
    border-radius: 1rem;
    border: 1px solid var(--border-subtle);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-card);
}

body.light .api-key-block {
    background-color: #F8FAFC;
    border-color: rgba(51, 133, 255, 0.1);
}

.api-key-block h3 {
    font-size: 1.5rem;
    font-family: var(--font-family-heading);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

body.light .api-key-block h3 {
    color: #2D3748;
}

.api-key-block p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

body.light .api-key-block p {
    color: #4A5568;
}


.api-key-block .btn-wrapper {
    display: flex;
    align-items: center;
}

.api-key-block .btn-wrapper .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.api-key-block .btn i {
    margin-left: 0.5rem;
}

.api-key-block .info-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
}

body.light .api-key-block .info-text {
    color: #718096;
}

.api-url-list .api-url-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--color-bg-darkest);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
}

body.light .api-url-list .api-url-item {
    background: #E2E8F0;
    border-color: #CBD5E1;
}

.api-url-list .api-url-item:last-child {
    margin-bottom: 0;
}

.api-url-list .api-url-code {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 1rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    min-width: 0;
}

@media (max-width: 767px) {
    .api-url-list .api-url-code {
        font-size: 0.75rem;
        max-width: calc(100vw - 120px);
        word-break: break-all;
        white-space: normal;
        line-height: 1.3;
    }

    .api-url-list .api-url-item {
        padding: 0.5rem 0.75rem;
        align-items: flex-start;
    }
}

body.light .api-url-list .api-url-code {
    color: var(--color-primary);
}

.api-url-list .copy-url-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
}

body.light .api-url-list .copy-url-btn {
    color: #64748B;
}

.api-url-list .copy-url-btn:hover {
    color: var(--color-text-primary);
}

body.light .api-url-list .copy-url-btn:hover {
    color: #2D3748;
}

.architecture-section {
    position: relative;
    padding: var(--section-padding-y-lg) 0;
    overflow: hidden;
}

.architecture-section .architecture-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(51, 133, 255, 0.05), rgba(0, 191, 255, 0.05));
    z-index: 1;
}

body.light .architecture-section .architecture-bg {
    background: linear-gradient(135deg, rgba(51, 133, 255, 0.03), rgba(0, 191, 255, 0.03));
}

.architecture-section .container {
    position: relative;
    z-index: 10;
}

.architecture-section .architecture-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    position: relative;
    z-index: 10;
}

@media (max-width: 767px) {
    .architecture-section .architecture-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .architecture-section .architecture-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet 2 cols */
        gap: 2.5rem;
    }
}

/* New breakpoint for 4 columns on larger desktops */
@media (min-width: 1200px) {
    .architecture-section .architecture-grid {
        grid-template-columns: repeat(4, 1fr); /* Desktop 4 cols */
        gap: 2.5rem;
    }
}


.architecture-item {
    background: var(--color-bg-light);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

@media (max-width: 1023px) {
    .architecture-item {
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .architecture-item {
        padding: 1.5rem; /* Smaller padding on mobile */
    }
}


.architecture-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
}

.architecture-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    box-shadow: none;
}

@media (max-width: 767px) {
 .architecture-icon {
    width: 70px; /* Smaller icon on mobile */
    height: 70px;
    font-size: 2rem;
    margin-bottom: 1rem; /* Reduced margin on mobile */
 }
}


.architecture-item h3 {
    font-size: 1.8rem;
    font-family: var(--font-family-heading);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.light .architecture-item h3 {
    color: var(--color-primary);
}

@media (max-width: 767px) {
    .architecture-item h3 {
        font-size: 1.4rem; /* Smaller heading on mobile */
        margin-bottom: 1rem;
    }
}


.architecture-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(51, 133, 255, 0.3);
}

body.light .architecture-feature {
    border-bottom-color: rgba(51, 133, 255, 0.1);
}


.architecture-feature:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.feature-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(51, 133, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
}

body.light .feature-icon-wrapper {
    background: rgba(51, 133, 255, 0.08);
    border-color: rgba(51, 133, 255, 0.2);
}


.feature-icon-small {
    color: var(--color-primary);
    font-size: 1.2rem;
}

body.light .feature-icon-small {
    color: var(--color-primary);
}

.feature-content h4 {
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

body.light .feature-content h4 {
    color: #2D3748;
}


.feature-content p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

body.light .feature-content p {
    color: #4A5568;
}

.advantages-section .feature-item {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.advantages-section .feature-item .feature-icon {
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 1rem;
}

.advantages-section h3 {
    font-size: 1.25rem;
    font-family: var(--font-family-heading);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

body.light .advantages-section h3 {
    color: #2D3748;
}

.advantages-section p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

body.light .advantages-section p {
    color: #4A5568;
}


.stats-section {
    padding-top: var(--section-padding-y-md);
    padding-bottom: var(--section-padding-y-md);
    background-color: var(--color-bg-medium);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

body.light .stats-section {
    background-color: #E2E8F0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

@media (max-width: 767px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
}

.stat-card {
    background: var(--color-bg-light);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-subtle);
    text-align: center;
    box-shadow: var(--shadow-card);
}

body.light .stat-card {
    background: #FFFFFF;
    border-color: rgba(51, 133, 255, 0.1);
}

@media (max-width: 767px) {
    .stat-card .stat-value {
        font-size: 2rem;
    }

    .stat-card p {
        font-size: 0.9rem;
    }
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

body.light .stat-value {
    -webkit-text-fill-color: var(--color-primary);
    color: var(--color-primary);
}

.stat-card p {
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-bottom: 0;
}

body.light .stat-card p {
    color: #4A5568;
}


.models-section {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
}

.models-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (max-width: 767px) {
    .models-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .models-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.model-card {
    background: var(--color-bg-light);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.light .model-card {
    background: #FFFFFF;
    border-color: rgba(51, 133, 255, 0.1);
}


@media (max-width: 1023px) {
    .model-card {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .model-card .model-logo img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .model-card h3 {
        font-size: 1.15rem;
    }

    .model-card p {
        font-size: 0.9rem;
    }

    .model-card .response-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }
}

.model-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    background: var(--color-primary);
    transition: height 0.4s ease; /* Animate height */
    height: 0%; /* Start hidden */
}

.model-card:hover::before {
    height: 100%; /* Expand on hover */
}

.model-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card-hover);
}

.model-card .header-content {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.model-card .model-logo {
    width: 1.5rem; /* Ensure consistent size container */
    height: 1.5rem; /* Ensure consistent size container */
    display: flex; /* Center image */
    align-items: center; /* Center image */
    justify-content: center; /* Center image */
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.model-card .model-logo img {
    width: 1.5rem;
    height: 1.5rem;
}


.model-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-text-primary);
}

body.light .model-card h3 {
    color: #2D3748;
}

.model-card p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    flex-grow: 1;
}

body.light .model-card p {
    color: #4A5568;
}

.model-card .response-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
}

body.light .model-card .response-tag {
    background: rgba(51, 133, 255, 0.1);
    color: var(--color-primary);
}


.model-card .response-tag i {
    margin-right: 0.25rem;
    font-size: 0.8em;
}

.clickable-card {
    display: flex; /* Make the link cover the whole card area and use flex */
    flex-direction: column; /* Stack contents vertically */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
    height: 100%; /* Make the link fill the height of the card */
}


.cta-section {
    padding: var(--section-padding-y-lg) 0;
}

.cta-content {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, rgba(51, 133, 255, 0.15), rgba(0, 191, 255, 0.15));
    padding: 4rem 2rem;
    border-radius: 3rem;
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--border-subtle);
}

body.light .cta-content {
    background: linear-gradient(135deg, rgba(51, 133, 255, 0.05), rgba(0, 191, 255, 0.05));
    border-color: rgba(51, 133, 255, 0.1);
}

@media (max-width: 767px) {
    .cta-content {
        padding: 2rem 1rem;
        border-radius: 2rem;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .cta-content .btn {
        font-size: 0.9rem;
        padding: 0.7rem 1.3rem;
    }

    .cta-content .btn-group {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .cta-content h2 {
        font-size: 1.5rem;
    }
}

.cta-content h2 {
    font-size: 2.5rem;
    font-family: var(--font-family-heading);
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

body.light .cta-content h2 {
    color: #2D3748;
}


.cta-content p {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

body.light .cta-content p {
    color: #4A5568;
}

.cta-content .btn-group {
    justify-content: center;
    gap: 2rem;
}

@media (max-width: 1023px) {
    .cta-content .btn-group {
        gap: 1.8rem;
    }
}

@media (max-width: 767px) {
    .cta-content .btn-group {
        gap: 1rem;
    }
}

.cta-content .btn i {
    margin-left: 0.5rem;
}

.contact-section {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 4rem;
}

@media (max-width: 767px) {
    .contact-methods-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .contact-methods-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

.contact-methods-grid .btn i {
    margin-right: 0.5rem;
}

.contact-methods-grid .feature-card p.mb-6 {
    margin-bottom: 1rem;
}

.qrcode-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.qrcode-popup.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: all; /* Enable pointer events when active */
}

.qrcode-content {
    background: var(--color-bg-light);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-card-hover);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    pointer-events: all; /* Ensure content inside is interactive */
}

.qrcode-popup.active .qrcode-content {
    transform: scale(1);
}

body.light .qrcode-content {
    background: #FFFFFF;
    color: #2D3748; /* Ensure text color is dark */
}

.qrcode-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

body.light .qrcode-content h3 {
    color: #2D3748;
}

.qrcode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 767px) {
    .qrcode-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .qrcode-content {
        padding: 1.5rem;
        width: 95%;
    }

    .qrcode-item {
        padding: 1rem;
    }

    /* Responsive styles for QR code images */
    .qrcode-item img {
        width: 200px; /* Base size */
        height: 200px; /* Base size */
        max-width: 100%; /* Ensure it never overflows its container */
        margin: 0 auto 1rem;
        display: block;
        border-radius: 8px; /* Existing border-radius */
        object-fit: contain; /* Ensure image fits without distortion */
    }

    body.light .qrcode-item img {
         border: 1px solid rgba(51, 133, 255, 0.2); /* Existing light mode border */
    }

    @media (max-width: 767px) {
        .qrcode-item img {
            width: 150px !important;
            height: 150px !important;
            margin: 0 auto 0.75rem; /* Match mobile margin adjustment and center */
            display: block; /* Ensure centering works */
        }
    }
    @media (max-width: 480px) {
        .qrcode-item img {
            width: 120px !important;
            height: 120px !important;
            margin: 0 auto 0.5rem; /* Match mobile margin adjustment and center */
            display: block; /* Ensure centering works */
        }
    }

    .qrcode-content h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .qrcode-item h4 {
        font-size: 1rem;
    }

    .qrcode-item p {
        font-size: 0.9rem;
    }

    .qrcode-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}

.qrcode-item {
    padding: 1.5rem;
    background: var(--color-bg-medium);
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center; /* Center text within item */
}

body.light .qrcode-item {
    background: #F8FAFC;
}

/* Removed .qrcode-placeholder specific styles */
/* Moved responsive sizing to .qrcode-item img */

.qrcode-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

body.light .qrcode-item h4 {
    color: #2D3748;
}

.qrcode-item p {
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

body.light .qrcode-item p {
    color: #4A5568;
}

.qrcode-hint {
    margin-top: 0.5rem; /* Reduced margin */
    font-size: 0.85rem; /* Slightly smaller font */
    color: var(--color-text-muted);
    margin-bottom: 1rem; /* Added bottom margin */
}

body.light .qrcode-hint {
    color: #718096;
}

.close-popup {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

body.light .close-popup {
    color: #64748B;
}

.close-popup:hover {
    color: var(--color-accent);
}

body.light .close-popup:hover {
    color: var(--color-primary);
}

.qrcode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem; /* Adjusted margin top */
}

.qrcode-btn i {
    margin-left: 0.5rem;
}

/* QR Code buttons should use theme-adaptive gradient */
.qrcode-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    box-shadow: var(--shadow-btn);
}

.qrcode-btn:hover {
    background: linear-gradient(135deg, #2A68CC, #00B0E0);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

/* No special light mode rules needed if using variables correctly */
body.light .qrcode-btn {
     /* Use the same gradient variables, which are not overridden for light mode */
     /* This means the light mode button looks the same as the dark mode gradient button */
     /* If a different light mode style is desired, override here: */
     /* background: var(--color-primary); color: white; box-shadow: none; */
}
body.light .qrcode-btn:hover {
     /* background: rgba(51, 133, 255, 0.8); */
}

/* Style for temporary icons in QR code buttons for copy feedback */
.qrcode-btn i.fa-check,
.qrcode-btn i.fa-times {
    /* Ensure these override the default i styles within the button */
    margin-left: 0 !important; /* Remove ml-0.5rem from the feedback icon itself */
    margin-right: 0.5rem; /* Add mr-0.5rem for space before text */
}

.qrcode-btn i.fa-check {
    color: white !important; /* White checkmark for success on gradient */
}

.qrcode-btn i.fa-times {
    color: red !important; /* Red cross for failure */
}


.quick-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 4rem;
}

@media (max-width: 767px) {
    .quick-faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .quick-faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-start-block {
    padding: 2rem;
}

@media (max-width: 1023px) {
    .quick-start-block {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .quick-start-block h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* Apply centering to the Quick Start Block itself */
    .quick-start-block {
        align-items: center; /* Center flex items (step items) horizontally */
        /* Inherits display: flex; flex-direction: column; from space-y-4 */
    }

    /* Adjust the quick start item to allow it to shrink and be centered */
    .quick-start-step-item {
        width: 100%; /* Ensure it takes full width available in the centered block */
        max-width: 350px; /* Limit max-width for better readability if screen is wide */
        justify-content: center; /* Center the flex items (number and content) inside the item */
        /* Keep align-items: flex-start for vertical alignment of number and content */
    }


    .quick-start-step-item .step-number-circle {
        width: 2rem;
        height: 2.0rem;
        font-size: 1rem;
    }

    /* Adjusted spacing for mobile after removing icon */
    .quick-start-step-item .step-number-circle {
        margin-right: 0.75rem; /* Adjusted margin after number */
    }


    .quick-start-step-item .step-content {
    /* margin-left: 0.75rem; Removed, now controlled by number circle margin-right */
        flex-grow: 0; /* Prevent content from expanding unnecessarily when centered */
        flex-shrink: 1; /* Allow content to shrink if needed */
        text-align: left; /* Keep text left-aligned inside the content block */
    }

    .quick-start-step-item h4 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .quick-start-step-item p {
        font-size: 0.9rem;
    }
}

.quick-start-block h3,
.faq-block h3 {
    font-size: 1.5rem;
    font-family: var(--font-family-heading);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

body.light .quick-start-block h3,
body.light .faq-block h3 {
    color: #2D3748;
}

.quick-start-step-item {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 1.5rem;
}

.quick-start-step-item:last-child {
    margin-bottom: 0;
}

.quick-start-step-item .step-number-circle {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9999px;
    background-color: rgba(51, 133, 255, 0.2);
    color: var(--color-accent);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Adjusted margin-top for visual alignment with text start - removed */
    /* margin-top: 0.1rem; */
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1.1rem;
    border: 1px solid var(--border-subtle);
    /* Added margin-right to separate from content */
    margin-right: 1rem;
}

body.light .quick-start-step-item .step-number-circle {
    background-color: rgba(51, 133, 255, 0.08);
    color: var(--color-primary);
    border-color: rgba(51, 133, 255, 0.2);
}


.quick-start-step-item .step-content {
    margin-left: 0; /* Remove original margin */
    flex-grow: 1;
}

.quick-start-step-item h4 {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-primary); /* This will be overridden by .gradient-text */
    margin-bottom: 0.5rem;
}

/* Removed specific light mode color for these h4 as .gradient-text handles it */
/* body.light .quick-start-step-item h4 {
    color: #2D3748;
} */

body.light .quick-start-step-item p {
    color: #4A5568;
}

/* Style for quick start step icon (THIS IS NOW REMOVED IN HTML, KEEPING RULE FOR SAFETY BUT IT'S UNUSED) */
/*
.quick-start-step-item .step-content-icon {
    margin-right: 1rem;
    margin-left: 0.75rem;
    color: var(--color-accent);
    flex-shrink: 0;
    font-size: 1.125rem;
    margin-top: 0.1rem;
}

body.light .quick-start-step-item .step-content-icon {
    color: var(--color-primary);
}
*/


.faq-block {
    padding: 2rem;
}

@media (max-width: 1023px) {
    .faq-block {
        padding: 1.5rem;
    }
}

@media (max-width: 767px) {
    .faq-block h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .faq-block details {
        padding: 0.8rem 1rem;
    }

    .faq-block summary {
        font-size: 1rem;
        padding-right: 1.8rem;
    }

    .faq-block details p {
        padding-top: 0.8rem;
        margin-top: 0.8rem;
        font-size: 0.9rem;
    }
}

.faq-block details {
    background-color: var(--color-bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
    text-align: left;
    box-shadow: var(--shadow-card);
}

body.light .faq-block details {
    background-color: #F8FAFC;
    border-color: rgba(51, 133, 255, 0.1);
}

.faq-block details:last-child {
    margin-bottom: 0;
}

.faq-block details[open] {
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-accent);
}

body.light .faq-block details[open] {
    background-color: #FFFFFF;
    border-color: var(--color-primary);
}

.faq-block summary {
    font-weight: 500;
    cursor: pointer;
    padding-right: 2rem;
    position: relative;
    color: var(--color-text-primary);
    font-size: 1.125rem;
    line-height: 1.5;
    list-style: none;
    display: flex;
    align-items: center; /* Align items center */
}

body.light .faq-block summary {
    color: #2D3748;
}


.faq-block summary::marker,
.faq-block summary::-webkit-details-marker {
    display: none;
}

.faq-block summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    color: var(--color-accent);
    font-size: 0.9em;
}

body.light .faq-block summary::after {
    color: var(--color-primary);
}

.faq-block details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-block details p {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

body.light .faq-block details p {
    color: #4A5568;
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Style for FAQ summary icon */
.faq-block summary .summary-icon {
    margin-right: 0.75rem;
    color: var(--color-accent);
    flex-shrink: 0; /* Prevent shrinking */
    /* Vertically centered due to parent summary's align-items: center */
}

body.light .faq-block summary .summary-icon {
    color: var(--color-primary);
}


.footer {
    background-color: var(--color-bg-medium);
    color: var(--color-text-primary);
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 1px solid #1e293b;
}

body.light .footer {
    background-color: #E2E8F0;
    border-top-color: #CBD5E1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        /* text-align: center; Removed general centering */
    }

    /* Mobile specific text alignment within columns */
    .footer-col {
        text-align: left; /* Default text alignment for most columns */
    }

    /* Keep the first column centered where appropriate */
    .footer-grid > .footer-col:first-child {
        text-align: center; /* Center the first column */
    }

    .footer-col .logo-container {
        justify-content: center;
        margin-left: auto; /* Center the flex container */
        margin-right: auto; /* Center the flex container */
    }

    .footer-col h3 {
         text-align: center; /* Center headings in mobile */
         margin-bottom: 1rem; /* Adjusted spacing */
    }

    .footer-col p {
         text-align: center; /* Center paragraphs in mobile */
    }


    .footer-col ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* Remove align-items: center from UL, handle LI alignment instead */
        /* align-items: center; */
    }

    .footer-col ul li {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Align list items to the left */
        /* Remove centering margins */
        margin-left: auto;
        margin-right: auto;
        max-width: fit-content; /* Prevent list items from taking full width if not needed */
    }


    .footer-col .contact-info ul li {
        display: flex;
        align-items: flex-start; /* Align to top because of potential multi-line text */
        justify-content: center; /* Center the list item block */
        text-align: left; /* Keep text alignment left for multi-line addresses */
        margin-left: auto; /* Center the list item block */
        margin-right: auto; /* Center the list item block */
        max-width: 250px; /* Limit width to help with centering multi-line text */
    }

    .footer-col .social-links {
        justify-content: center;
    }
}

.footer-col .logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer-col .header-logo-image {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    margin-right: 0.75rem;
    border: 1px solid transparent;
}

body.dark .footer-col .header-logo-image {
    border-color: rgba(255,255,255,0.1);
}

body.light .footer-col .header-logo-image {
    border-color: rgba(51, 133, 255, 0.2);
}

.footer-col .logo-text {
    font-size: 1.5rem;
    font-family: var(--font-family-heading);
    font-weight: bold;
    color: white;
}

body.light .footer-col .logo-text {
    color: #2D3748;
}

.footer-col p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

body.light .footer-col p {
    color: #4A5568;
}

.footer-col .social-links {
    /* This section is now removed or hidden as per requirements */
    display: none; /* Or remove the div entirely */
}

.footer-col h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    /* Added margin-bottom for spacing */
    margin-bottom: 1.5rem;
}

body.light .footer-col h3 {
    color: #2D3748;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-col ul li a {
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
    text-decoration: none;
}

body.light .footer-col ul li a {
    color: #4A5568;
}

.footer-col ul li a:hover {
    color: var(--color-accent);
}

/* Added styles for Footer lists with icons */
.footer-col ul li {
    display: flex;
    align-items: center; /* Vertically center icon and text */
}

.footer-col ul li i {
    color: var(--color-accent); /* Default icon color */
    margin-right: 0.5rem; /* Spacing for icons */
    flex-shrink: 0;
}

body.light .footer-col ul li i {
    color: var(--color-primary); /* Icon color in light mode */
}


.footer-col .contact-info ul li {
    display: flex;
    align-items: flex-start; /* Align to top because of potential multi-line text */
}

body.light .footer-col .contact-info ul li i {
    color: var(--color-primary);
}

.footer-col .contact-info ul li i {
    color: var(--color-accent);
    margin-top: 0.25rem; /* Adjusted margin-top for better alignment */
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.footer-col .contact-info ul li span {
    flex-grow: 1;
    word-break: break-word;
    color: var(--color-text-secondary);
}

body.light .footer-col .contact-info ul li span {
    color: #4A5568;
}

.footer-col .contact-info ul li a {
    color: var(--color-text-secondary);
}

body.light .footer-col .contact-info ul li a {
    color: #4A5568;
}

body.light .footer-col .contact-info ul li a:hover {
    color: var(--color-accent);
}

/* Added styles for Footer Payment Methods */
.footer-payment-methods {
    margin-top: 2rem; /* Adjusted spacing */
    padding-top: 1.5rem;
    border-top: 1px solid #1e293b;
    text-align: center;
}

body.light .footer-payment-methods {
    border-top-color: #CBD5E1;
}

.footer-payment-methods h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

body.light .footer-payment-methods h4 {
    color: #2D3748;
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 2rem;
    color: var(--color-text-secondary); /* Default color for generic icons */
}

body.light .payment-icons {
    color: #64748B;
}

.payment-icons i {
    transition: color 0.3s ease;
}

/* Specific colors for payment methods */
.payment-icons .fa-weixin {
    color: #2DC100; /* WeChat green */
}

.payment-icons .fa-alipay {
    color: #00A3EE; /* Alipay blue */
}

/* Generic card icons */
.payment-icons .fa-credit-card,
.payment-icons .fa-cc-visa,
.payment-icons .fa-cc-mastercard {
    color: var(--color-accent); /* Use accent color for dark mode */
}

body.light .payment-icons .fa-weixin {
    color: #2DC100;
}

body.light .payment-icons .fa-alipay {
    color: #00A3EE;
}

/* Generic card icons in light mode - using primary blue for consistency */
body.light .payment-icons .fa-credit-card,
body.light .payment-icons .fa-cc-visa,
body.light .payment-icons .fa-cc-mastercard {
    color: var(--color-primary);
}


@media (max-width: 767px) {
    .footer-payment-methods {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    .footer-payment-methods h4 {
        margin-bottom: 0.75rem;
    }
    .payment-icons {
        gap: 1.5rem;
        font-size: 1.8rem;
    }
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #1e293b;
    text-align: center;
}

body.light .footer-bottom {
    border-top-color: #CBD5E1;
}

.footer-bottom p {
    color: #6b7280;
    margin-bottom: 0;
    font-size: 0.9rem;
}

body.light .footer-bottom p {
    color: #4A5568;
}

/* Responsive adjustments for container padding - Keep these */
@media (max-width: calc(var(--container-max-width) + 3rem)) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 1023px) {
    .hero h1 {
        font-size: 3rem;
    }

    .hero p {
        font-size: 1.15rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .section-header p {
        font-size: 1.1rem;
    }

    /* Adjusted padding for cards on tablet */
    .feature-card,
    .api-card,
    .model-card,
    .stat-card,
    .architecture-item,
    .quick-start-block,
    .faq-block details {
        padding: 1.5rem;
    }

    /* Specific adjustment for architecture item padding on tablet */
    /* .architecture-item {
        padding: 2rem; Removed specific tablet padding
    } */


    .api-key-info-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .grid-2-cols {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .models-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .contact-methods-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quick-faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cta-content {
        padding: 3rem 1.5rem;
    }

    .cta-content h2 {
        font-size: 2.2rem;
    }

    .cta-content p {
        font-size: 1.1rem;
    }

    .cta-content .btn-group {
        gap: 1.8rem;
    }

    /* Footer layout adjustments for tablet (same as mobile in current media query) */
    @media (max-width: 767px) {
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        .footer-col {
             text-align: left;
        }

        .footer-grid > .footer-col:first-child {
            text-align: center;
        }

        .footer-col .logo-container {
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-col h3 {
             text-align: center;
        }

        .footer-col p {
             text-align: center;
        }

        .footer-col ul li {
            justify-content: flex-start;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-col .contact-info ul li {
            justify-content: center;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.header .actions .btn {
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    height: auto;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1023px) {
    /* Hide desktop header buttons on tablet/mobile */
    .header .actions .btn {
        display: none;
    }
    /* Show mobile menu toggle */
    .header .actions .mobile-menu-toggle {
        display: block;
    }
}

@media (min-width: 1024px) {
    /* Show desktop header buttons on desktop */
    .header .actions .btn {
        display: inline-flex;
        padding: 0.5rem 1.2rem;
        font-size: 0.95rem;
    }
    /* Hide mobile menu toggle on desktop */
    .header .actions .mobile-menu-toggle {
        display: none;
    }
}


.header .actions .btn i {
    margin-left: 0.8rem;
}

.contact-methods-grid .btn i {
    margin-right: 0.5rem;
}

.qrcode-btn i {
    margin-left: 0.5rem;
}

@media (max-width: 767px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .hero .btn-group {
        flex-direction: column;
        align-items: center;
    }

    .hero .btn i {
        margin-left: 0.5rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-header p {
        font-size: 0.95rem;
    }

    .grid-2-cols,
    .grid-3-cols,
    .stats-grid,
    .models-grid,
    .contact-methods-grid,
    .quick-faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .feature-card h3 {
        font-size: 1.25rem;
    }

    .feature-card p {
        font-size: 0.9rem;
    }

    .api-card .lang-tab {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .api-card .code-block pre {
        padding: 1rem;
        font-size: 0.85rem;
    }

    .stat-card .stat-value {
        font-size: 2rem;
    }

    .stat-card p {
        font-size: 0.9rem;
    }

    .model-card .model-logo img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .model-card h3 {
        font-size: 1.15rem;
    }

    .model-card p {
        font-size: 0.9rem;
    }

    .model-card .response-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
    }

    .cta-content {
        padding: 2rem 1rem;
        border-radius: 2rem;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .cta-content .btn-group {
        gap: 1rem;
    }

    .quick-start-block h3,
    .faq-block h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    /* Apply centering to the Quick Start Block itself */
    .quick-start-block {
        align-items: center; /* Center flex items (step items) horizontally */
    }

    /* Adjust the quick start item to allow it to shrink and be centered */
    .quick-start-step-item {
        width: 100%; /* Ensure it takes full width available in the centered block */
        max-width: 350px; /* Limit max-width for better readability if screen is wide */
        justify-content: center; /* Center the flex items (number and content) inside the item */
        /* Keep align-items: flex-start for vertical alignment of number and content */
    }


    .quick-start-step-item .step-number-circle {
        width: 2rem;
        height: 2.0rem;
        font-size: 1rem;
    }

    /* Adjusted spacing for mobile after removing icon */
    .quick-start-step-item .step-number-circle {
        margin-right: 0.75rem; /* Adjusted margin after number */
    }


    .quick-start-step-item .step-content {
    /* margin-left: 0.75rem; Removed */
        flex-grow: 0; /* Prevent content from expanding unnecessarily when centered */
        flex-shrink: 1; /* Allow content to shrink if needed */
        text-align: left; /* Keep text left-aligned inside the content block */
    }

    .quick-start-step-item h4 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .quick-start-step-item p {
        font-size: 0.9rem;
    }

    .faq-block details {
        padding: 0.8rem 1rem;
    }

    .faq-block summary {
        font-size: 1rem;
        padding-right: 1.8rem;
    }

    .faq-block details p {
        padding-top: 0.8rem;
        margin-top: 0.8rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .cta-content h2 {
        font-size: 1.5rem;
    }
}

/* --- 复制代码反馈提示样式 --- */

/* 1. 为代码块的父容器（.api-card）设置相对定位，
      以便内部的提示框可以相对于它进行绝对定位。*/
.api-card {
    position: relative;
}

/* 2. 复制反馈提示框本身的样式 */
.copy-feedback {
    /* 核心定位逻辑：实现水平垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 关键：根据自身大小进行位移，实现完美居中 */
    z-index: 100; /* 确保提示在代码之上 */

    /* 外观样式，模仿您提供的图片 */
    background-color: #2ecc71; /* 成功的绿色 */
    color: white;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 1.25rem; /* 约 20px */
    font-weight: bold;
    white-space: nowrap; /* 防止文字换行 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    /* 初始状态：完全透明且不可见，为动画做准备 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 隐藏时不可交互 */

    /* 过渡动画：当 opacity 和 visibility 变化时，平滑过渡 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 3. 当提示框需要显示时，添加 .show 类 */
.copy-feedback.show {
    opacity: 1;
    visibility: visible;
}

/* 4. （可选）为失败状态定义不同颜色 */
.copy-feedback.failed {
    background-color: #e74c3c; /* 失败的红色 */
}