/* ─── Lanze Gene — Modern Minimalist Design System ───────────────────────── */

:root {
    --lanze-primary: #0284c7;
    --lanze-primary-dark: #0369a1;
    --lanze-ink: #0f172a;
    --lanze-muted: #64748b;
    --lanze-surface: #ffffff;
    --lanze-surface-soft: #f8fafc;
    --lanze-line: #e2e8f0;
}

html {
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.site-body {
    background-color: #ffffff;
    color: var(--lanze-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.ui-page-surface {
    background: #ffffff !important;
}

.ui-page-header {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.ui-page-title {
    color: var(--lanze-ink) !important;
    font-size: 1.875rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.ui-page-lead {
    max-width: 40rem;
    margin-inline: auto;
    color: var(--lanze-muted) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

.ui-card {
    background: #ffffff !important;
    border: 1px solid var(--lanze-line) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ui-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -6px rgba(15, 23, 42, 0.04) !important;
}

:focus-visible {
    outline: 2px solid rgba(2, 132, 199, 0.45);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .ui-page-title {
        font-size: 2.25rem !important;
    }

    .ui-page-lead {
        font-size: 1.0625rem !important;
    }
}

@media (min-width: 1024px) {
    .ui-page-title {
        font-size: 2.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ─── Header & Navigation ────────────────────────────────────────────────── */
.site-header {
    box-shadow: none;
}

.site-mega-menu,
.site-mobile-menu {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.site-header img {
    max-height: 2rem;
}

.site-mega-menu h4 {
    color: var(--lanze-muted) !important;
    border-color: var(--lanze-line) !important;
}

.site-mega-menu a {
    color: var(--lanze-ink) !important;
}

.site-mega-menu a:hover {
    color: var(--lanze-primary-dark) !important;
}

.site-mega-menu p {
    color: var(--lanze-muted) !important;
}

.site-mega-menu .border-white\/10,
.site-mega-menu .border-white\/20 {
    border-color: var(--lanze-line) !important;
}

/* Mobile navigation */
.site-mobile-menu > div > div:not(:last-child),
.site-mobile-menu .border-white\/20,
.site-mobile-menu .border-white\/10 {
    border-color: var(--lanze-line) !important;
}

.site-mobile-menu button,
.site-mobile-menu a,
.site-mobile-menu p,
.site-mobile-menu span {
    color: var(--lanze-ink) !important;
}

.site-mobile-menu a:hover,
.site-mobile-menu button:hover {
    color: var(--lanze-primary-dark) !important;
}

.site-mobile-menu .pt-4.pb-2 a {
    background: var(--lanze-surface-soft) !important;
    border: 1px solid var(--lanze-line);
}

.site-mobile-menu .pt-4.pb-2 a:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1;
}

.site-mobile-menu input,
.desktop-nav input {
    background: var(--lanze-surface-soft) !important;
    color: var(--lanze-ink) !important;
    border: 1px solid var(--lanze-line) !important;
    outline: none;
}

.site-mobile-menu input:focus,
.desktop-nav input:focus {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

::selection {
    background: #e0f2fe;
    color: var(--lanze-ink);
}

/* ─── Editorial Prose & Table Typography ─────────────────────────────────── */
.prose {
    max-width: none !important;
    color: #334155;
    line-height: 1.8;
}

.prose h2 {
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2.25em;
    margin-bottom: 0.85em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid #f1f5f9;
}

.prose h3 {
    color: #0f172a;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-top: 1.75em;
    margin-bottom: 0.6em;
}

.prose strong {
    color: #0f172a;
    font-weight: 600;
}

.prose a {
    color: var(--lanze-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    decoration-thickness: 1px;
}

.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
    font-size: 0.925rem;
    line-height: 1.6;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #ffffff;
}

.prose thead th {
    background-color: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.prose tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}

.prose tbody tr:last-child td {
    border-bottom: none;
}

.prose tbody tr:hover td {
    background-color: #f8fafc;
}

/* ─── Progressive Image Loading ──────────────────────────────────────────── */
.img-lazy {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.img-lazy.loaded {
    opacity: 1;
}

.img-blur-up {
    filter: blur(8px);
    transform: scale(1.01);
    transition: filter 0.4s ease-out, transform 0.4s ease-out;
}
.img-blur-up.loaded {
    filter: blur(0);
    transform: scale(1);
}

.img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9;
}

/* Public brochure and detail pages. Shared brand chrome stays blue. */
.site-container { width: min(100% - 3rem, 1200px); margin-inline: auto; }
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 44px; padding: .65rem 1.2rem; border: 1px solid transparent; border-radius: .5rem; font-size: .875rem; font-weight: 600; line-height: 1.5; text-align: center; transition: background-color .18s, border-color .18s; }
.ui-button-primary { background: var(--detail-accent, #075985); color: white; }
.ui-button-primary:hover { background: var(--detail-dark, #0c4a6e); }
.ui-button-secondary { border-color: var(--lanze-line); background: #fff; color: var(--lanze-ink); }
.ui-button-secondary:hover { border-color: var(--detail-accent, #075985); background: var(--detail-soft, #f8fafc); }
.theme-service { --detail-accent: #a7663d; --detail-dark: #533d30; --detail-soft: #f4eadd; --detail-line: #d8c6b4; }
.theme-product { --detail-accent: #087f83; --detail-dark: #123347; --detail-soft: #e6f0f1; --detail-line: #c7dcdd; }
.theme-platform { --detail-accent: #a7663d; --detail-dark: #533d30; --detail-soft: #f4eadd; --detail-line: #d8c6b4; }
.detail-hero { background: var(--detail-soft, #f8fafc); border-block: 1px solid var(--detail-line, #e2e8f0); padding-block: 3rem 2.6rem; }
.detail-eyebrow { color: var(--detail-accent, #075985); font-size: .75rem; font-weight: 600; letter-spacing: .07em; line-height: 1.8; }
.detail-eyebrow span { padding-inline: .6rem; opacity: .5; }
.detail-hero h1, .resource-header h1 { font-size: clamp(1.8rem, 3.3vw, 2.7rem); line-height: 1.3; font-weight: 700; letter-spacing: -.025em; max-width: 1000px; margin-top: .85rem; text-wrap: balance; }
.detail-lead { max-width: 780px; color: #526171; font-size: 1.02rem; line-height: 1.85; margin-top: 1.1rem; }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--detail-line, #e2e8f0); padding-top: 1.5rem; margin-top: 2rem; gap: 1.4rem; }
.detail-facts dt { font-size: .75rem; color: #64748b; margin-bottom: .55rem; }
.detail-facts dd { font-size: .9rem; line-height: 1.65; font-weight: 600; color: var(--detail-dark, #0f172a); }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.7rem; }
.detail-download { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem; color: var(--detail-accent, #075985); min-height: 44px; font-size: .875rem; }
.detail-download:hover { text-decoration: underline; text-underline-offset: 4px; }
.detail-version { font-size: .75rem; line-height: 1.6; margin-top: .8rem; color: #64748b; }
.detail-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 3.5rem; padding-block: 2.7rem 5rem; }
.detail-layout-full { display: block; }
.detail-sidebar { min-width: 0; }
.detail-toc { position: sticky; top: 88px; border-left: 1px solid var(--detail-line, #e2e8f0); padding-left: 1rem; }
.detail-toc p { color: #94a3b8; font-size: .7rem; letter-spacing: .08em; margin-bottom: .8rem; }
.detail-toc a { display: block; color: #526171; font-size: .8rem; line-height: 1.65; padding-block: .55rem; overflow-wrap: anywhere; }
.detail-toc a:hover, .detail-toc a:focus { color: var(--detail-accent, #075985); }
.detail-content { min-width: 0; }
.detail-section { scroll-margin-top: 92px; }
.detail-content .detail-section + .detail-section { border-top: 1px solid #edf0f2; }
.detail-content .detail-section > section { padding-block: 1.7rem; }
.detail-content .detail-section:first-child > section { padding-top: 0; }
.detail-content .detail-section > div { padding-block: 1.7rem; }
.detail-content .detail-section > div > div.bg-slate-50 { padding: 1.75rem; }
.detail-content .max-w-7xl { padding-inline: 0; }
.detail-content .prose { max-width: 48rem !important; overflow-wrap: anywhere; font-size: .96rem; line-height: 1.95; }
.detail-content .prose h3 { font-size: 1.13rem; }
.detail-content h2 { font-size: 1.4rem; line-height: 1.5; }
.detail-content .prose a { color: var(--detail-accent, #075985); }
.detail-content .text-only-block .max-w-2xl { max-width: 48rem; margin-inline: 0; }
.detail-content .block-raw_html { overflow-x: auto; }
.detail-content .block-rich_text { padding-block: 1.7rem; }
.detail-content .block-rich_text > div { padding: 0; }
.detail-content .ui-card { border-radius: .65rem; }
.detail-content .ui-card:hover { border-color: var(--detail-line, #cbd5e1) !important; }
.detail-content .ui-card h2 { font-size: 1.1rem; }
.detail-content .ui-card .text-primary-600, .detail-content .group:hover .group-hover\:text-primary-600 { color: var(--detail-accent, #075985); }
.detail-page .ui-page-surface { background: var(--detail-soft, white) !important; }

/* Resource center */
.resource-header { background: #edf1f5; border-bottom: 1px solid #d5dee6; padding-block: 3.3rem 2.7rem; }
.resource-header > div > p:last-child { font-size: .98rem; color: #64748b; line-height: 1.8; margin-top: 1rem; }
.resource-content { padding-block: 2rem 5rem; }
.resource-filters { padding: 1.25rem; background: #f3f5f7; border: 1px solid #dee4ea; border-radius: .65rem; }
.resource-filter-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.resource-kinds { display: flex; padding: .25rem; background: #f1f5f9; border-radius: .6rem; gap: .25rem; }
.resource-kinds a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem; border-radius: .4rem; font-size: .875rem; white-space: nowrap; color: #64748b; }
.resource-kinds a:hover { color: #0f172a; }
.resource-kinds .is-active { background: white; box-shadow: 0 1px 4px #0f172a12; color: #0f172a; font-weight: 600; }
.resource-search { display: flex; align-items: center; gap: .4rem; border: 1px solid #cbd5e1; border-radius: .5rem; overflow: hidden; max-width: 400px; flex: 1; }
.resource-search input { width: 100%; min-width: 0; background: transparent; padding: .75rem; font-size: .875rem; border: 0; }
.resource-search button { min-height: 44px; padding-inline: 1rem; font-size: .8rem; color: #075985; font-weight: 600; white-space: nowrap; }
.resource-topic-row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: .8rem; color: #64748b; }
.resource-topic-row select { border: 1px solid #cbd5e1; border-radius: .4rem; min-height: 42px; padding: .5rem 2rem .5rem .75rem; color: #334155; background: white; max-width: 220px; }
.resource-apply, .resource-reset { color: #075985; padding-block: .7rem; }
.resource-reset { margin-left: auto; color: #64748b; text-decoration: underline; text-underline-offset: 4px; }
.resource-count { margin-block: 1.4rem; font-size: .8rem; color: #64748b; }
.resource-count strong { color: #0f172a; font-weight: 600; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.resource-card { border: 1px solid #e2e8f0; border-radius: .75rem; overflow: hidden; display: flex; flex-direction: column; background: white; transition: border-color .18s; min-width: 0; }
.resource-card:hover { border-color: #94a3b8; }
.resource-cover { display: flex; align-items: center; justify-content: center; position: relative; height: 235px; background: #e2ebef; border-bottom: 1px solid #ccdbe2; overflow: hidden; padding: 22px; }
.resource-card-service { --detail-accent: #a7663d; --detail-dark: #533d30; --detail-soft: #fffcf7; }
.resource-card-service .resource-cover { background: #ebddcb; border-color: #d8c6b4; }
.resource-cover img { width: auto; height: 100%; box-shadow: 0 3px 12px #2636481a; object-fit: contain; }
.resource-cover-hint { position: absolute; bottom: .65rem; right: .75rem; font-size: .7rem; color: #475569; background: #ffffffed; border-radius: .25rem; padding: .2rem .45rem; }
.resource-file-icon { border: 1px solid #cbd5e1; border-radius: .5rem; padding: 2rem 1.2rem; color: #64748b; font-size: 1.3rem; font-weight: 600; }
.resource-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.resource-meta { display: flex; align-items: center; justify-content: space-between; color: #64748b; font-size: .7rem; }
.resource-type { color: var(--detail-accent, #075985); font-weight: 600; }
.resource-card h2 { font-size: 1rem; font-weight: 600; line-height: 1.7; margin-top: .75rem; overflow-wrap: anywhere; }
.resource-card h2 a:hover { color: var(--detail-accent, #075985); }
.resource-file-meta { color: #64748b; font-size: .75rem; margin-top: .6rem; }
.resource-file-meta span { padding-inline: .25rem; }
.resource-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .85rem 1.2rem; }
.resource-tags span { border-radius: .25rem; background: #f8fafc; font-size: .7rem; color: #64748b; padding: .2rem .4rem; }
.resource-card-actions { display: flex; gap: .6rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.resource-card-actions .ui-button { flex: 1; font-size: .8rem; }
.resource-empty { text-align: center; padding-block: 4rem; }
.resource-empty h2 { font-size: 1.15rem; font-weight: 600; }
.resource-empty p { margin-block: .75rem 1.5rem; color: #64748b; }
.resource-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; font-size: .8rem; color: #64748b; }
.resource-pagination > div { display: flex; gap: .5rem; }

/* Home keeps its existing carousel, section order and three business cards. */
.home-business-card { border-top: 3px solid var(--business-accent) !important; }
.home-business-card:hover h3, .home-business-card:hover .home-business-link { color: var(--business-accent) !important; }
.home-business-card[data-business="service"] { --business-accent: #a7663d; }
.home-business-card[data-business="product"] { --business-accent: #087f83; }
.home-business-card[data-business="platform"] { --business-accent: #075985; }
.site-mobile-menu a, .site-mobile-menu button { min-height: 44px; }
html { scroll-behavior: smooth; }
@media (max-width: 1023px) {
    .detail-layout { gap: 2rem; grid-template-columns: 160px minmax(0, 1fr); }
    .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .site-container { width: calc(100% - 2.5rem); }
    .detail-hero { padding-block: 2rem; }
    .detail-lead { font-size: .94rem; }
    .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: 1.5rem; }
    .detail-facts dd { font-size: .82rem; }
    .detail-actions > .ui-button { flex: 1; padding-inline: .8rem; }
    .detail-download { padding-left: 0; }
    .detail-layout { display: block; padding-top: 0; }
    .detail-sidebar { margin-inline: -1.25rem; position: sticky; top: 64px; z-index: 20; background: white; border-bottom: 1px solid #e2e8f0; }
    .detail-toc { position: static; display: flex; gap: 1.3rem; padding: .35rem 1.25rem; border: 0; overflow-x: auto; }
    .detail-toc p { display: none; }
    .detail-toc a { white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
    .detail-content { padding-top: 1.75rem; }
    .detail-content .prose { font-size: .91rem; line-height: 1.9; }
    .detail-section { scroll-margin-top: 140px; }
    .resource-header { padding-block: 2rem; }
    .resource-filter-top { align-items: stretch; flex-direction: column; }
    .resource-search { max-width: none; }
    .resource-kinds a { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding-inline: .6rem; }
    .resource-reset { margin-left: 0; }
}
@media (max-width: 539px) {
    .resource-grid { grid-template-columns: minmax(0, 1fr); }
    .resource-cover { height: 220px; }
    .resource-pagination { align-items: flex-start; gap: 1rem; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Reading content stays visible without waiting for scroll animations. */
.detail-content [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
.detail-content .block-cta .bg-slate-50 { background: var(--detail-soft, #f8fafc); border-color: var(--detail-line, #e2e8f0); }
.detail-content .block-cta .bg-slate-900 { background: var(--detail-accent, #075985); }
.detail-content .block-cta .bg-slate-900:hover { background: var(--detail-dark, #0c4a6e); }