/* ========================================
   LAYOUT A - 明亮简约 (默认)
   白色背景 · 宝蓝主色 · 飞书/Notion 风
   ======================================== */
body.layout-a {
    --color-primary: #1a56ff;
    --color-primary-dark: #0d3bbf;
    --color-primary-light: #e8eeff;
    --color-bg: #ffffff;
    --color-bg-warm: #fafaf8;
    --color-bg-card: #f5f5f3;
    --color-text: #1a1a2e;
    --color-text-secondary: #6b7280;
    --color-text-light: #9ca3af;
    --color-border: #e5e7eb;
    --color-dark-bg: #0a1628;
}

/* ========================================
   LAYOUT B - 居中大气
   白色背景 · 深靛蓝主色 · Linear/Stripe 风
   ======================================== */
body.layout-b {
    --color-primary: #2d3af5;
    --color-primary-dark: #1e28c7;
    --color-primary-light: #ededff;
    --color-bg: #ffffff;
    --color-bg-warm: #f8f8ff;
    --color-bg-card: #f3f3fb;
    --color-text: #0f0f1a;
    --color-text-secondary: #5a5a7a;
    --color-text-light: #8e8ea8;
    --color-border: #e2e2f0;
    --color-dark-bg: #08081a;
    --radius-lg: 24px;
    --radius-md: 16px;
}

/* B: Hero - centered layout */
body.layout-b .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 800px;
}

body.layout-b .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.layout-b .hero h1 {
    font-size: 3.6rem;
    letter-spacing: -0.03em;
}

body.layout-b .hero-desc {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

body.layout-b .hero-actions {
    justify-content: center;
}

body.layout-b .hero-stats {
    justify-content: center;
}

body.layout-b .hero-visual {
    display: none;
}

/* B: Section headers larger */
body.layout-b .section-header h2 {
    font-size: 2.8rem;
    letter-spacing: -0.03em;
}

/* B: Bento -> equal grid */
body.layout-b .bento-grid {
    grid-template-columns: repeat(2, 1fr);
}

body.layout-b .bento-card-large {
    grid-column: span 1;
}

body.layout-b .bento-card-tall {
    grid-row: span 1;
}

body.layout-b .bento-card {
    text-align: center;
    padding: 40px 32px;
}

body.layout-b .bento-icon {
    margin: 0 auto 20px;
}

body.layout-b .bento-features {
    justify-content: center;
}

body.layout-b .bento-visual {
    justify-content: center;
}

/* B: Features -> 2 col */
body.layout-b .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

body.layout-b .feature-card {
    padding: 36px;
}

/* B: Process steps - bigger circles */
body.layout-b .step-number {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
}

/* B: CTA */
body.layout-b .cta-inner h2 {
    font-size: 2.8rem;
}

/* B: Page hero */
body.layout-b .page-hero-content h1 {
    font-size: 3.4rem;
}

/* B: Blog */
body.layout-b .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* B: Solutions */
body.layout-b .solution-block,
body.layout-b .solution-block.reverse {
    grid-template-columns: 1fr 1fr;
}

/* B: About */
body.layout-b .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

body.layout-b .value-card {
    text-align: center;
    padding: 40px 28px;
}

body.layout-b .value-number {
    font-size: 2.4rem;
}

/* ========================================
   LAYOUT C - 深色科技
   深色背景 · 亮蓝发光 · Vercel/GitHub 风
   ======================================== */
body.layout-c {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: rgba(59,130,246,0.12);
    --color-bg: #0a0e1a;
    --color-bg-warm: #0d1220;
    --color-bg-card: #141a2e;
    --color-text: #e8eaed;
    --color-text-secondary: #8b95a8;
    --color-text-light: #5a6478;
    --color-border: rgba(255,255,255,0.08);
    --color-dark-bg: #060a14;
    --color-dark-card: #111827;
    background: var(--color-bg);
    color: var(--color-text);
}

/* C: Header */
body.layout-c .site-header {
    background: rgba(10,14,26,0.85);
    border-bottom-color: rgba(255,255,255,0.06);
}

body.layout-c .site-header.scrolled {
    box-shadow: 0 1px 20px rgba(0,0,0,0.4);
}

body.layout-c .site-logo span {
    color: #e8eaed;
}

body.layout-c .main-nav a {
    color: #8b95a8;
}

body.layout-c .main-nav a:hover {
    color: var(--color-primary);
}

body.layout-c .btn-outline {
    border-color: rgba(255,255,255,0.15);
    color: #e8eaed;
}

body.layout-c .btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(59,130,246,0.1);
}

body.layout-c .main-nav.active {
    background: #141a2e;
    border-top-color: rgba(255,255,255,0.06);
}

/* C: Hero */
body.layout-c .hero {
    background: var(--color-bg);
}

body.layout-c .hero::before {
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
}

body.layout-c .hero::after {
    background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
}

body.layout-c .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 800px;
}

body.layout-c .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.layout-c .hero h1 {
    font-size: 3.4rem;
    color: #fff;
}

body.layout-c .hero h1 .highlight {
    background: linear-gradient(135deg, var(--color-primary), #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.layout-c .hero-badge {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.2);
}

body.layout-c .hero-desc {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

body.layout-c .hero-actions {
    justify-content: center;
}

body.layout-c .hero-stats {
    justify-content: center;
}

body.layout-c .hero-stat .stat-number {
    color: #fff;
}

body.layout-c .hero-visual {
    display: none;
}

body.layout-c .btn-primary {
    box-shadow: 0 4px 20px rgba(59,130,246,0.4);
}

body.layout-c .btn-primary:hover {
    box-shadow: 0 6px 30px rgba(59,130,246,0.5);
}

body.layout-c .btn-ghost {
    color: #8b95a8;
}

/* C: Background grid dots */
body.layout-c .bg-grid-pattern {
    background-image: radial-gradient(circle, rgba(59,130,246,0.08) 1px, transparent 1px);
}

/* C: Sections */
body.layout-c .section-warm {
    background: var(--color-bg-warm);
}

body.layout-c .section-tag {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.15);
}

/* C: Cards - glass morphism */
body.layout-c .bento-card,
body.layout-c .feature-card,
body.layout-c .blog-card,
body.layout-c .learn-card,
body.layout-c .learn-cat-card,
body.layout-c .solution-stat-card,
body.layout-c .solution-tech-item,
body.layout-c .value-card,
body.layout-c .team-cap-card,
body.layout-c .faq-item {
    background: rgba(20,26,46,0.8);
    border-color: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
}

body.layout-c .bento-card:hover,
body.layout-c .feature-card:hover,
body.layout-c .blog-card:hover,
body.layout-c .learn-card:hover,
body.layout-c .learn-cat-card:hover,
body.layout-c .value-card:hover,
body.layout-c .team-cap-card:hover {
    border-color: rgba(59,130,246,0.2);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 1px rgba(59,130,246,0.3);
}

body.layout-c .bento-card::before {
    background: var(--color-primary);
    opacity: 0.8;
}

body.layout-c .bento-card h3,
body.layout-c .feature-card h3,
body.layout-c .blog-card-title a,
body.layout-c .learn-card-body h3 a,
body.layout-c .learn-cat-card h3,
body.layout-c .value-card h3,
body.layout-c .team-cap-card h3,
body.layout-c .faq-question span,
body.layout-c .solution-feature-item h4,
body.layout-c .timeline-content h3 {
    color: #e8eaed;
}

body.layout-c .bento-feature-tag,
body.layout-c .tech-tag,
body.layout-c .team-cap-tags span {
    background: rgba(255,255,255,0.06);
    color: #8b95a8;
    border: 1px solid rgba(255,255,255,0.06);
}

body.layout-c .bento-mini-stat {
    background: rgba(255,255,255,0.04);
}

body.layout-c .feature-icon {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.15);
}

body.layout-c .feature-card:hover .feature-icon {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(59,130,246,0.4);
}

/* C: Process */
body.layout-c .step-number {
    box-shadow: 0 4px 20px rgba(59,130,246,0.4);
    border-color: var(--color-bg);
}

body.layout-c .process-steps::before {
    background: linear-gradient(90deg, rgba(59,130,246,0.6), rgba(59,130,246,0.1));
}

/* C: CTA Banner */
body.layout-c .cta-banner {
    background: linear-gradient(135deg, #0a0e1a 0%, #111d33 50%, #1e3a5f 100%);
    border-top: 1px solid rgba(59,130,246,0.1);
}

body.layout-c .btn-white {
    background: #fff;
    color: var(--color-primary);
}

/* C: Footer */
body.layout-c .site-footer {
    background: #060a14;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* C: Page Hero */
body.layout-c .page-hero {
    background: var(--color-bg-warm);
}

body.layout-c .page-hero-content h1 {
    color: #fff;
}

/* C: Blog */
body.layout-c .filter-bar {
    background: rgba(10,14,26,0.9);
    border-bottom-color: rgba(255,255,255,0.06);
}

body.layout-c .filter-tab {
    background: rgba(255,255,255,0.04);
    color: #8b95a8;
}

body.layout-c .filter-tab:hover {
    background: rgba(59,130,246,0.1);
    color: var(--color-primary);
}

body.layout-c .filter-tab.active {
    background: var(--color-primary);
    color: #fff;
}

body.layout-c .blog-card-image {
    background: rgba(255,255,255,0.03);
}

body.layout-c .blog-card-cat {
    background: rgba(59,130,246,0.15);
}

/* C: Solutions */
body.layout-c .solution-stat-card.accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, #818cf8 100%);
    box-shadow: 0 8px 30px rgba(59,130,246,0.3);
}

body.layout-c .solution-feature-icon {
    background: rgba(255,255,255,0.04);
}

body.layout-c .solution-tech-item:hover {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.3);
}

/* C: About */
body.layout-c .about-number-card {
    background: rgba(20,26,46,0.8);
    border-color: rgba(255,255,255,0.06);
}

body.layout-c .about-number-card.accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, #818cf8 100%);
    box-shadow: 0 8px 30px rgba(59,130,246,0.3);
}

body.layout-c .about-number {
    color: #fff;
}

body.layout-c .value-number {
    color: rgba(59,130,246,0.3);
}

body.layout-c .value-card:hover .value-number {
    color: var(--color-primary);
}

/* C: Timeline */
body.layout-c .timeline::before {
    background: linear-gradient(to bottom, var(--color-primary), rgba(59,130,246,0.2));
}

body.layout-c .timeline-marker {
    border-color: var(--color-bg-warm);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 0 15px rgba(59,130,246,0.2);
}

body.layout-c .timeline-year {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.2);
}

/* C: Learn */
body.layout-c .learn-cta-box {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
}

body.layout-c .learn-cta-content h2 {
    color: #e8eaed;
}

body.layout-c .learn-card-placeholder {
    border: 1px solid rgba(255,255,255,0.06);
}

body.layout-c .learn-ph-blue { background: rgba(59,130,246,0.1); }
body.layout-c .learn-ph-orange { background: rgba(255,107,53,0.1); }
body.layout-c .learn-ph-green { background: rgba(5,150,105,0.1); }

/* C: FAQ */
body.layout-c .faq-question {
    color: #e8eaed;
}

/* C: Pagination */
body.layout-c .pagination-wrap .page-numbers a,
body.layout-c .pagination-wrap .page-numbers span {
    background: rgba(255,255,255,0.04);
    color: #8b95a8;
}

body.layout-c .pagination-wrap .page-numbers a:hover {
    background: rgba(59,130,246,0.1);
    color: var(--color-primary);
}

body.layout-c .pagination-wrap .page-numbers .current {
    background: var(--color-primary);
    color: #fff;
}

/* C: Entry content */
body.layout-c .entry-content {
    color: #c8cdd5;
}

body.layout-c .entry-content h1,
body.layout-c .entry-content h2,
body.layout-c .entry-content h3 {
    color: #e8eaed;
}

/* C: 404 */
body.layout-c section > .container > div:first-child {
    color: rgba(59,130,246,0.15);
}

/* ========================================
   Responsive overrides
   ======================================== */
@media (max-width: 768px) {
    body.layout-b .hero h1,
    body.layout-c .hero h1 {
        font-size: 2.2rem;
    }

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

    body.layout-b .bento-grid {
        grid-template-columns: 1fr;
    }

    body.layout-b .page-hero-content h1 {
        font-size: 2.2rem;
    }

    body.layout-b .cta-inner h2 {
        font-size: 2rem;
    }
}