/* ===== variables.css ===== */
:root {
    /* ===== UI设计方案 - 新变量体系 ===== */
    /* --- 主题色系统（双色橙色分层） --- */
    --theme-dark: #1A2332;
    --theme-darker: #0B1120;
    --theme-accent: #CC7A28;
    --theme-accent-soft: #E8913A;
    --theme-accent-hover: #B06A1C;
    --theme-accent-light: #FEF3E7;
    --theme-accent-30: rgba(232,145,58,0.3);
    --theme-accent-10: rgba(232,145,58,0.1);

    /* --- 背景系统 --- */
    --bg-page: #FFFFFF;
    --bg-section-light: #F5F7FA;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #FAFBFC;
    --bg-dark: var(--theme-dark);
    --bg-dark-card: var(--theme-darker);
    --bg-dark-raised: #243142;

    /* --- 文字系统 --- */
    --text-primary: #1A1A2E;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --text-inverse: #FFFFFF;
    --text-inverse-muted: rgba(255,255,255,0.7);

    /* --- 字体与排版 --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --spacing-paragraph: 1em;
    --spacing-heading-bottom: 0.75em;
    --spacing-heading-top: 1.5em;

    /* --- 边框系统 --- */
    --border-color: #E2E8F0;
    --border-dark: #334155;
    --border-color-light: #F1F5F9;
    --border-accent: var(--theme-accent-soft);

    /* --- 状态反馈背景 --- */
    --bg-success: #F0FFF4;
    --bg-danger: #FFF5F5;
    --bg-warning: #FFF9EB;
    --bg-info: #F0FAFB;
    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-warning: #FFC107;
    --color-info: #17A2B8;

    /* --- 阴影系统 --- */
    --shadow-sm: 0 1px 2px rgba(26,35,50,0.04);
    --shadow-md: 0 4px 12px rgba(26,35,50,0.08);
    --shadow-lg: 0 10px 30px rgba(26,35,50,0.12);
    --shadow-focus: 0 0 0 3px var(--theme-accent-30);

    /* --- 圆角系统 --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* ===== UI设计方案 - 暗色模式变量覆盖 ===== */
        --theme-dark: #0B1120;
        --theme-darker: #0B1120;
        --theme-accent: #CC7A28;
        --theme-accent-soft: #E8913A;
        --theme-accent-hover: #B06A1C;
        --theme-accent-light: #2D241A;
        --theme-accent-30: rgba(232,145,58,0.25);
        --theme-accent-10: rgba(232,145,58,0.08);
        --bg-page: #0F172A;
        --bg-section-light: #1A2332;
        --bg-surface: #1E293B;
        --bg-surface-hover: #243142;
        --bg-dark: #0B1120;
        --bg-dark-card: #0B1120;
        --bg-dark-raised: #243142;
        --text-primary: #F1F5F9;
        --text-secondary: rgba(255,255,255,0.88);
        --text-muted: rgba(255,255,255,0.48);
        --text-inverse: #FFFFFF;
        --text-inverse-muted: rgba(255,255,255,0.65);
        --border-color: #334155;
        --border-dark: #475569;
        --border-color-light: #1E293B;
        --border-accent: var(--theme-accent);
        --color-success: #28A745;
        --color-danger: #DC3545;
        --color-warning: #FFC107;
        --color-info: #17A2B8;
        --bg-success: #0A2E1A;
        --bg-danger: #2E0A0A;
        --bg-warning: #2E2406;
        --bg-info: #0A282D;
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
        --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
    }
}

html.dark {
    /* ===== UI设计方案 - 暗色模式变量覆盖（手动触发） ===== */
    --theme-dark: #0B1120;
    --theme-darker: #0B1120;
    --theme-accent: #CC7A28;
    --theme-accent-soft: #E8913A;
    --theme-accent-hover: #B06A1C;
    --theme-accent-light: #2D241A;
    --theme-accent-30: rgba(232,145,58,0.25);
    --theme-accent-10: rgba(232,145,58,0.08);
    --bg-page: #0F172A;
    --bg-section-light: #1A2332;
    --bg-surface: #1E293B;
    --bg-surface-hover: #243142;
    --bg-dark: #0B1120;
    --bg-dark-card: #0B1120;
    --bg-dark-raised: #243142;
    --text-primary: #F1F5F9;
    --text-secondary: rgba(255,255,255,0.88);
    --text-muted: rgba(255,255,255,0.48);
    --text-inverse: #FFFFFF;
    --text-inverse-muted: rgba(255,255,255,0.65);
    --border-color: #334155;
    --border-dark: #475569;
    --border-color-light: #1E293B;
    --border-accent: var(--theme-accent);
    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-warning: #FFC107;
    --color-info: #17A2B8;
    --bg-success: #0A2E1A;
    --bg-danger: #2E0A0A;
    --bg-warning: #2E2406;
    --bg-info: #0A282D;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

/* ===== UI设计方案 - 文字排版规范 ===== */

/* 全局基础排版 */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    background: var(--bg-page);
}

/* 标题层级 H1-H6 */
h1, .h1 {
    font-size: var(--font-size-5xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-heading-bottom);
    letter-spacing: -0.02em;
}
h2, .h2 {
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-top: var(--spacing-heading-top);
    margin-bottom: var(--spacing-heading-bottom);
    letter-spacing: -0.01em;
}
h3, .h3 {
    font-size: var(--font-size-3xl);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: var(--spacing-heading-top);
    margin-bottom: 0.5em;
}
h4, .h4 {
    font-size: var(--font-size-2xl);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}
h5, .h5 {
    font-size: var(--font-size-xl);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h6, .h6 {
    font-size: var(--font-size-lg);
    line-height: var(--leading-snug);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

/* 深色背景标题适配 */
.section-dark h1, .section-dark .h1,
.section-dark h2, .section-dark .h2,
.section-dark h3, .section-dark .h3,
.section-dark h4, .section-dark .h4,
.section-dark h5, .section-dark .h5,
.section-dark h6, .section-dark .h6 {
    color: var(--text-inverse);
}

/* 正文与段落 */
p {
    margin-top: 0;
    margin-bottom: var(--spacing-paragraph);
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}
.section-dark p {
    color: var(--text-inverse-muted);
}
.lead {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    font-weight: var(--font-weight-light);
}
.section-dark .lead {
    color: var(--text-inverse-muted);
}
.text-sm {
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}
.section-dark .text-sm {
    color: var(--text-inverse-muted);
}
.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}
strong, b {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.section-dark strong, .section-dark b {
    color: var(--text-inverse);
}

/* 引用块 */
blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    background: var(--bg-section-light);
    border-left: 4px solid var(--theme-accent-soft);
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
}
.section-dark blockquote {
    background: var(--bg-dark-card);
    color: var(--text-inverse-muted);
}

/* 列表 */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--spacing-paragraph);
    padding-left: 1.5em;
    color: var(--text-secondary);
}
li {
    margin-bottom: 0.35em;
    line-height: var(--leading-relaxed);
}
.section-dark ul, .section-dark ol {
    color: var(--text-inverse-muted);
}

/* 分隔线 */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2.5em 0;
}

/* 排版工具类 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== base.css ===== */

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

img, video, canvas, svg {
    display: block;
}

@font-face {
    font-display: swap;
}

@media print {
    .no-print,
    .mobile-menu-btn,
    .mobile-nav,
    .back-to-top,
    .reading-progress,
    .mobile-sticky-cta,
    .hp-topbar-close,
    .carousel-arrow,
    .tab-header {
        display: none !important;
    }
    body {
        background: var(--bg-page) !important;
        color: #000 !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline;
    }
    main {
        padding-top: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
:focus {
    outline: none;
}
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}
::selection {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
::-moz-selection {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-sans);
    background-color: var(--bg-page);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .animate-on-scroll { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto !important; }
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    font-size: var(--font-size-sm);
}
figure {
    margin: 0;
}
[class*="-image"]:not(.hp-hero-image),
.product-image,
.solution-image,
.card-image,
.logo-wrap,
.gallery-thumb {
   
    display: block;
    overflow: hidden;
}
.product-image img,
.solution-image img,
.card-image img,
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
a {
    text-decoration: none;
    color: var(--theme-accent-soft);
    transition: all 0.2s ease;
}
a:hover {
    text-decoration: none;
    color: var(--theme-accent-hover);
}
a:not(.btn):not(.article-link):hover {
    color: var(--theme-accent-soft);
}
::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    margin: 0;
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); margin-bottom: 1.5rem; }
h3 { font-size: var(--font-size-2xl); margin-bottom: 1.25rem; }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}
ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
li {
    margin-bottom: 0.5rem;
}
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}
a, .btn, .card-clickable, .clickable,
[role="button"], .tab-btn, .filter-link, .download-link,
.hot-product-card, .service-item, .article-item {
    cursor: pointer;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    
    background: rgba(255, 255, 255, 0.90);
    color: var(--text-primary);
    transition: all 0.2s ease;
    outline: none;
    font-size: var(--font-size-sm);
    margin: 0.2rem auto;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.12);
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.article-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
}
.article-content,
.content-card .article-body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}
.article-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: var(--leading-tight);
}
.article-content h2 {
    font-size: var(--font-size-2xl);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(26, 35, 50, 0.10);
}
.article-content h3 {
    font-size: var(--font-size-xl);
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.article-content h4 {
    font-size: var(--font-size-lg);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.article-content p {
    margin-bottom: 1.25rem;
}
.article-content ul,
.article-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.article-content li {
    margin-bottom: 0.5rem;
    list-style: disc;
}
.section-padding {
    padding: 4rem 0;
}
.section-padding-sm {
    padding: 2.5rem 0;
}
.section-padding-lg {
    padding: 5rem 0;
}
.section-padding + .section-padding {
    position: relative;
}
.bg-secondary { background: var(--bg-section-light); }
.bg-deep { 
    
    background: var(--bg-dark); 
}
.bg-surface { background: var(--bg-surface); }
.bg-white { background: var(--bg-page); }
.bg-dark { background: var(--bg-dark); }
.bg-light { background: var(--bg-section-light); }

/* 深色区块工具类 */
.section-dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 4rem 0;
}
.section-dark-darker {
  background: var(--bg-dark-card);
  color: var(--text-inverse);
  padding: 4rem 0;
}

/* 浅色卡片 */
.card-light {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  transition: all 0.2s;
}
.card-light:hover {
  background: var(--bg-surface-hover);
  border-color: var(--theme-accent-soft);
  box-shadow: var(--shadow-md);
}
.card-light .card-icon img { height: 48px; margin-bottom: 1rem; }
.card-light h3 { color: var(--text-primary); }
.card-light p { color: var(--text-secondary); }

/* 深色卡片 */
.card-dark {
  background: var(--bg-dark-card);
  border-radius: var(--radius-md);
  padding: 2rem;
  color: var(--text-inverse);
}
.card-dark .card-icon {
  font-size: 2.5rem;
  color: var(--theme-accent-soft);
  margin-bottom: 1rem;
}
.card-dark h3 {
  color: var(--text-inverse);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.card-dark p {
  color: var(--text-inverse-muted);
  font-size: 0.95rem;
}
.text-white { color: var(--bg-page); }
.text-gray { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.accent-text { color: var(--theme-accent-soft); }
.text-primary-color { color: var(--theme-accent); }
.text-white-80 { color: var(--text-white-80); }
.text-white-60 { color: var(--text-white-60); }
.text-link {
  color: var(--theme-accent-soft);
  text-decoration: none;
  font-weight: 500;
}
.text-link:hover { color: var(--theme-accent-hover); }
.dark-text-primary { color: var(--text-inverse); }
.dark-text-secondary { color: var(--text-inverse-muted); }
.dark-text-tertiary { color: var(--text-inverse-muted); }
.dark-text-muted { color: rgba(255,255,255,0.48); }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; } .mt-8 { margin-top: calc(4rem + 2rem); }
.mt-sm { margin-top: 0.75rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 2rem; } .mb-5 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 4rem; } .mb-8 { margin-bottom: 2rem; }
.ml-0 { margin-left: 0; } .ml-1 { margin-left: 0.5rem; }
.ml-2 { margin-left: 1rem; } .ml-3 { margin-left: 1.5rem; }
.ml-4 { margin-left: 2rem; } .ml-5 { margin-left: 3rem; }
.ml-6 { margin-left: 4rem; }
.mr-0 { margin-right: 0; } .mr-1 { margin-right: 0.5rem; }
.mr-2 { margin-right: 1rem; } .mr-3 { margin-right: 1.5rem; }
.mr-4 { margin-right: 2rem; } .mr-5 { margin-right: 3rem; }
.mr-6 { margin-right: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4 { padding-left: 2rem; padding-right: 2rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1 1 0%; }
.w-full { width: 100%; }
.max-w-full { max-width: 100%; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 512px; }
.max-w-xl { max-width: 640px; }
.max-w-2xl { max-width: 768px; }
.max-w-3xl { max-width: 896px; }
.min-w-20 { min-width: 5rem; }
.min-w-24 { min-width: 6rem; }
.min-w-32 { min-width: 8rem; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }
.border { border: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-t { border-top: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.space-y-4 > * + * { margin-top: 2rem; }
.px-8 { padding-left: 4rem; padding-right: 4rem; }
.py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.py-8 { padding-top: 4rem; padding-bottom: 4rem; }
.gap-6 { gap: 4rem; }
.inline-link {
    color: var(--theme-dark);
    text-decoration: underline;
    text-decoration-color: rgba(26, 35, 50, 0.15);
    transition: color 0.2s, text-decoration-color 0.2s;
}
.inline-link:hover {
    color: var(--theme-accent-soft);
    text-decoration-color: var(--theme-accent-soft);
}
.highlight-text {
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-semibold);
}
.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 35, 50, 0.15), transparent);
}
.align-center {
    align-items: center;
}
.align-items-center {
    align-items: center;
}
.align-items-start {
    align-items: flex-start;
}
.align-items-end {
    align-items: flex-end;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-between {
    justify-content: space-between;
}
.justify-content-start {
    justify-content: flex-start;
}
.justify-content-end {
    justify-content: flex-end;
}
.justify-content-around {
    justify-content: space-around;
}
.justify-content-evenly {
    justify-content: space-evenly;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-grow-0 {
    flex-grow: 0;
}
.flex-grow {
    flex-grow: 1;
}
.flex-basis-auto {
    flex-basis: auto;
}
.flex-basis-0 {
    flex-basis: 0%;
}
.order-first {
    order: -9999;
}
.order-last {
    order: 9999;
}
.order-none {
    order: 0;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}
.order-5 {
    order: 5;
}
.grid {
    display: grid;
}
.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-6 {
    grid-column: span 6 / span 6;
}
.row-span-1 {
    grid-row: span 1 / span 1;
}
.row-span-2 {
    grid-row: span 2 / span 2;
}
.row-span-3 {
    grid-row: span 3 / span 3;
}
.gap-1 {
    gap: 0.5rem;
}
.gap-2 {
    gap: 1rem;
}
.gap-3 {
    gap: 1.5rem;
}
.gap-4 {
    gap: 2rem;
}
.gap-5 {
    gap: 3rem;
}
.gap-7 {
    gap: 5rem;
}
.gap-8 {
    gap: 6rem;
}
.m-auto {
    margin: auto;
}
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.mx-1 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-2 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-3 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
.mx-4 {
    margin-left: 2rem;
    margin-right: 2rem;
}
.mx-5 {
    margin-left: 3rem;
    margin-right: 3rem;
}
.mx-6 {
    margin-left: 4rem;
    margin-right: 4rem;
}
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-3 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.my-4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.my-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.my-6 {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: 0.5rem;
}
.pt-2 {
    padding-top: 1rem;
}
.pt-3 {
    padding-top: 1.5rem;
}
.pt-4 {
    padding-top: 2rem;
}
.pt-5 {
    padding-top: 3rem;
}
.pt-6 {
    padding-top: 4rem;
}
.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: 0.5rem;
}
.pb-2 {
    padding-bottom: 1rem;
}
.pb-3 {
    padding-bottom: 1.5rem;
}
.pb-4 {
    padding-bottom: 2rem;
}
.pb-5 {
    padding-bottom: 3rem;
}
.pb-6 {
    padding-bottom: 4rem;
}
.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: 0.5rem;
}
.pl-2 {
    padding-left: 1rem;
}
.pl-3 {
    padding-left: 1.5rem;
}
.pl-4 {
    padding-left: 2rem;
}
.pl-5 {
    padding-left: 3rem;
}
.pl-6 {
    padding-left: 4rem;
}
.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: 0.5rem;
}
.pr-2 {
    padding-right: 1rem;
}
.pr-3 {
    padding-right: 1.5rem;
}
.pr-4 {
    padding-right: 2rem;
}
.pr-5 {
    padding-right: 3rem;
}
.pr-6 {
    padding-right: 4rem;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.text-lowercase {
    text-transform: lowercase;
}
.font-normal {
    font-weight: var(--font-weight-normal);
}
.font-light {
    font-weight: var(--font-weight-light);
}
.font-black {
    font-weight: 900;
}
.italic {
    font-style: italic;
}
.normal-case {
    text-transform: none;
}
.line-through {
    text-decoration: line-through;
}
.no-underline {
    text-decoration: none;
}
.w-100 {
    width: 100%;
}
.w-50 {
    width: 50%;
}
.w-25 {
    width: 25%;
}
.w-75 {
    width: 75%;
}
.w-auto {
    width: auto;
}
.h-full {
    height: 100%;
}
.h-auto {
    height: auto;
}
.min-h-full {
    min-height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.max-h-full {
    max-height: 100%;
}
.border-none {
    border: none;
}
.border-0 {
    border-width: 0;
}
.border-2 {
    border-width: 2px;
}
.border-dashed {
    border-style: dashed;
}
.border-dotted {
    border-style: dotted;
}
.border-double {
    border-style: double;
}
.border-primary {
    border-color: var(--theme-dark);
}
.border-secondary {
    border-color: var(--border-color);
}
.border-accent {
    border-color: var(--theme-accent-soft);
}
.border-success {
    border-color: var(--color-success);
}
.border-warning {
    border-color: var(--color-warning);
}
.border-danger {
    border-color: var(--color-danger);
}
.border-info {
    border-color: var(--color-info);
}
.border-light {
    border-color: var(--border-color-light);
}
.border-dark {
    border-color: var(--border-dark);
}
.bg-transparent {
    background-color: transparent;
}
.bg-primary {
    background-color: var(--theme-dark);
}
.bg-primary-light {
    background-color: rgba(26, 35, 50, 0.05);
}
.bg-accent {
    background-color: var(--theme-accent-soft);
}
.bg-accent-light {
    background-color: var(--theme-accent-10);
}
.bg-success {
    background-color: var(--color-success);
}
.bg-success-light {
    background-color: rgba(40, 167, 69, 0.05);
}
.bg-warning {
    background-color: var(--color-warning);
}
.bg-warning-light {
    background-color: rgba(255, 193, 7, 0.05);
}
.bg-danger {
    background-color: var(--color-danger);
}
.bg-danger-light {
    background-color: rgba(220, 53, 69, 0.05);
}
.bg-info {
    background-color: var(--color-info);
}
.bg-info-light {
    background-color: rgba(23, 162, 184, 0.05);
}
.text-primary {
    color: var(--theme-dark);
}
.text-secondary {
    color: var(--text-secondary);
}
.text-accent {
    color: var(--theme-accent-soft);
}
.text-success {
    color: var(--color-success);
}
.text-warning {
    color: var(--color-warning);
}
.text-danger {
    color: var(--color-danger);
}
.text-info {
    color: var(--color-info);
}
.text-dark {
    color: var(--text-primary);
}
.text-light {
    color: var(--text-muted);
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
.text-decoration-none {
    text-decoration: none;
}
.letter-spacing-wide {
    letter-spacing: 0.05em;
}
.letter-spacing-wider {
    letter-spacing: 0.1em;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-default {
    cursor: default;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.user-select-none {
    user-select: none;
}
.user-select-auto {
    user-select: auto;
}
.pointer-events-none {
    pointer-events: none;
}
.pointer-events-auto {
    pointer-events: auto;
}
.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-100 {
    opacity: 1;
}
.rotate-0 {
    transform: rotate(0deg);
}
.rotate-90 {
    transform: rotate(90deg);
}
.rotate-180 {
    transform: rotate(180deg);
}
.rotate-270 {
    transform: rotate(270deg);
}
.scale-100 {
    transform: scale(1);
}
.scale-95 {
    transform: scale(0.95);
}
.scale-90 {
    transform: scale(0.9);
}
.scale-105 {
    transform: scale(1.05);
}
.scale-110 {
    transform: scale(1.1);
}
.translate-x-0 {
    transform: translateX(0);
}
.translate-x-1 {
    transform: translateX(0.5rem);
}
.translate-x-2 {
    transform: translateX(1rem);
}
.translate-y-0 {
    transform: translateY(0);
}
.translate-y-1 {
    transform: translateY(0.5rem);
}
.translate-y-2 {
    transform: translateY(1rem);
}
.skew-x-0 {
    transform: skewX(0deg);
}
.skew-y-0 {
    transform: skewY(0deg);
}
.transition-all {
    transition: all 0.3s ease;
}
.transition-none {
    transition: none;
}
.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.transition-opacity {
    transition: opacity 0.3s ease;
}
.transition-transform {
    transition: transform 0.3s ease;
}
.transition-shadow {
    transition: box-shadow 0.3s ease;
}
.duration-75 {
    transition-duration: 75ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}
.duration-500 {
    transition-duration: 500ms;
}
.ease-linear {
    transition-timing-function: linear;
}
.ease-in {
    transition-timing-function: ease-in;
}
.ease-out {
    transition-timing-function: ease-out;
}
.ease-in-out {
    transition-timing-function: ease-in-out;
}
.delay-75 {
    transition-delay: 75ms;
}
.delay-150 {
    transition-delay: 150ms;
}
.delay-200 {
    transition-delay: 200ms;
}
.delay-300 {
    transition-delay: 300ms;
}
.delay-500 {
    transition-delay: 500ms;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
}
.text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}
.backdrop-blur {
    backdrop-filter: blur(8px);
}
.backdrop-blur-md {
    backdrop-filter: blur(12px);
}
.backdrop-blur-lg {
    backdrop-filter: blur(16px);
}
.isolation-isolate {
    isolation: isolate;
}
.isolation-auto {
    isolation: auto;
}
.mix-blend-normal {
    mix-blend-mode: normal;
}
.mix-blend-multiply {
    mix-blend-mode: multiply;
}
.mix-blend-screen {
    mix-blend-mode: screen;
}
.mix-blend-overlay {
    mix-blend-mode: overlay;
}
.mix-blend-darken {
    mix-blend-mode: darken;
}
.mix-blend-lighten {
    mix-blend-mode: lighten;
}
.mix-blend-color-dodge {
    mix-blend-mode: color-dodge;
}
.mix-blend-color-burn {
    mix-blend-mode: color-burn;
}
.mix-blend-hard-light {
    mix-blend-mode: hard-light;
}
.mix-blend-soft-light {
    mix-blend-mode: soft-light;
}
.mix-blend-difference {
    mix-blend-mode: difference;
}
.mix-blend-exclusion {
    mix-blend-mode: exclusion;
}
.mix-blend-hue {
    mix-blend-mode: hue;
}
.mix-blend-saturation {
    mix-blend-mode: saturation;
}
.mix-blend-color {
    mix-blend-mode: color;
}
.mix-blend-luminosity {
    mix-blend-mode: luminosity;
}
.saturate-0 {
    filter: saturate(0);
}
.saturate-50 {
    filter: saturate(0.5);
}
.saturate-100 {
    filter: saturate(1);
}
.saturate-150 {
    filter: saturate(1.5);
}
.saturate-200 {
    filter: saturate(2);
}
.grayscale {
    filter: grayscale(100%);
}
.sepia {
    filter: sepia(100%);
}
.invert {
    filter: invert(100%);
}
.brightness-50 {
    filter: brightness(0.5);
}
.brightness-75 {
    filter: brightness(0.75);
}
.brightness-100 {
    filter: brightness(1);
}
.brightness-125 {
    filter: brightness(1.25);
}
.brightness-150 {
    filter: brightness(1.5);
}
.contrast-50 {
    filter: contrast(0.5);
}
.contrast-75 {
    filter: contrast(0.75);
}
.contrast-100 {
    filter: contrast(1);
}
.contrast-125 {
    filter: contrast(1.25);
}
.contrast-150 {
    filter: contrast(1.5);
}
.blur-sm {
    filter: blur(2px);
}
.blur {
    filter: blur(4px);
}
.blur-md {
    filter: blur(8px);
}
.blur-lg {
    filter: blur(12px);
}
.drop-shadow-sm {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
.drop-shadow {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.10));
}
.drop-shadow-md {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10));
}
.drop-shadow-lg {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.10));
}
.hue-rotate-0 {
    filter: hue-rotate(0deg);
}
.hue-rotate-90 {
    filter: hue-rotate(90deg);
}
.hue-rotate-180 {
    filter: hue-rotate(180deg);
}
.hue-rotate-270 {
    filter: hue-rotate(270deg);
}
.filter-none {
    filter: none;
}
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.bg-primary\/10 {
    background-color: rgba(26, 35, 50, 0.10);
}
.bg-primary\/20 {
    background-color: rgba(26, 35, 50, 0.20);
}
.bg-primary\/30 {
    background-color: rgba(26, 35, 50, 0.30);
}
.bg-accent\/10 {
    background-color: var(--theme-accent-10);
}
.bg-accent\/20 {
    background-color: var(--theme-accent-30);
}
.bg-accent\/30 {
    background-color: var(--theme-accent-30);
}
.bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.80);
}
.bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.90);
}
.bg-black\/5 {
    background-color: rgba(0, 0, 0, 0.05);
}
.bg-black\/10 {
    background-color: rgba(0, 0, 0, 0.10);
}
.bg-black\/20 {
    background-color: rgba(0, 0, 0, 0.20);
}
.bg-primary\/10 {
    background-color: rgba(26, 35, 50, 0.10);
}
.align-start {
    align-items: flex-start;
}
.align-stretch {
    align-items: stretch;
}
.d-flex {
    display: flex;
}
.flex-column {
    flex-direction: column;
}
.space-y-2 > * + * {
    margin-top: 1rem;
}
.space-y-3 > * + * {
    margin-top: 1.5rem;
}
.h-20 {
    height: 5rem;
}
.w-20 {
    width: 5rem;
}
.w-min {
    width: min-content;
}
.pl-8 {
    padding-left: 4rem;
}
.py-12 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.p-5 {
    padding: 3rem;
}
.p-6 {
    padding: 4rem;
}
.ms-2 {
    margin-left: 1rem;
}
.mt-auto {
    margin-top: auto;
}
.object-contain {
    object-fit: contain;
}
.fw-bold {
    font-weight: var(--font-weight-bold);
}
.leading-relaxed {
    line-height: var(--leading-relaxed);
}
.list-disc {
    list-style-type: disc;
}
.rounded {
    border-radius: 6px;
}
.required {
    color: var(--color-danger);
}
.intro-image {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.image-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.70);
    color: var(--bg-page);
    padding: 0.5rem;
    font-size: var(--font-size-xs);
}
.industry-icon {
    font-size: 2rem;
    color: var(--theme-accent-soft);
    margin-bottom: 0.75rem;
}
.need-icon {
    font-size: 2rem;
    color: var(--theme-dark);
    margin-bottom: 0.75rem;
}
.need-item {
    text-align: center;
    padding: 1.25rem;
}
.needs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.section-divider {
    text-align: center;
    padding: 1.5rem 0;
    position: relative;
}
.section-divider::before,
.section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20%;
    height: 1px;
    background: var(--border-color-light);
}
.section-divider::before {
    left: 0;
}
.section-divider::after {
    right: 0;
}
.section-divider-icon {
    color: var(--theme-accent-soft);
    margin-right: 0.5rem;
}
.section-num {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--theme-accent-soft);
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
}
.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-top: 0.75rem;
}
.process {
    padding: 2rem 0;
}
.process-step {
    text-align: center;
    padding: 1rem;
}
.product-content {
    padding: 1.5rem;
}
.product-specs {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.products-showcase {
    padding: 4rem 0;
}
.profile-content {
    padding: 1rem;
}
.profile-list-item {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color-light);
}
.project-cases {
    padding: 4rem 0;
}
.qr-code-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}
.qr-code {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-section-light);
    border-radius: 6px;
}
.qr-code img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}
.qr-code p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

.remark-line {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: 0.75rem;
    background: var(--bg-warning);
    border-radius: 4px;
}
.search-box {
    display: flex;
    gap: 0.5rem;
}
.search-btn {
    padding: 0.75rem 1.5rem;
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.search-section {
    padding: 2rem 0;
}
.section {
    padding: 3rem 0;
}
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.service-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.service-team-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}
.slide-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.solution-articles {
    padding: 3rem 0;
}
.solution-details {
    margin-top: 1rem;
}
.solutions-articles {
    padding: 3rem 0;
}
.solutions-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}
.solutions-hero {
    padding: 4rem 0;
}
.solutions-intro {
    padding: 3rem 0;
}
.solutions-landscape {
    padding: 1.5rem;
}
.solutions-list-section {
    padding: 3rem 0;
}
.solutions-nav {
    padding: 3rem 0;
}
.solution-support-section {
    padding: 3rem 0;
}
.stats-section {
    padding: 3rem 0;
}
.stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.summary-item {
    text-align: center;
    padding: 1rem;
}
.summary-section {
    padding: 3rem 0;
}
.support-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.s-val {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--theme-accent-soft);
}
.tag-red {
    background: var(--bg-danger);
    color: var(--color-danger);
    border-color: rgba(220, 53, 69, 0.20);
}
.tech-name {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.technical-solutions {
    padding: 3rem 0;
}
.text-accent-orange {
    color: var(--theme-accent-soft);
}
.toc-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}
.toc-h3 {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    padding-left: 1rem;
}
.toc-h4 {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding-left: 1.5rem;
}
.toc-sub {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding-left: 2rem;
}
.update-date {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.hero-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(300 + 10);
}
.header-left {
    display: flex;
    align-items: center;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.company-info-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.company-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}
.company-sub {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.company-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
}
.conclusion-box {
    background: rgba(204, 122, 40, 0.1);
    border-left: 3px solid var(--theme-accent);
    padding: 1rem;
    margin: 1rem 0;
}
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-text {
    flex: 1;
}
.contact-text h4 {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: 2px;
}
.contact-text p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}
.cta-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.custom-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 0.5rem;
    background: var(--bg-info);
    border-radius: 4px;
}
.file-type {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background: var(--bg-section-light);
    border-radius: 2px;
}
.filter-bar {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color-light);
}
.filter-stats {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.form-submit {
    margin-top: 1rem;
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.info-item {
    padding: 0.75rem;
}
.info-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.info-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}
.instructions {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}
.landscape-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.landscape-links a {
    padding: 0.5rem 1rem;
    background: var(--bg-section-light);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}
.landscape-links a:hover {
    background: var(--theme-dark);
    color: var(--bg-page);
}
.landscape-text {
    padding: 1.5rem;
}
.list-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    border-radius: 2px;
    font-size: var(--font-size-xs);
}
.list-icon {
    color: var(--theme-accent-soft);
    margin-right: 0.5rem;
}
.logo {
    height: 40px;
    width: auto;
}
main,
#main-content,
.page {
    min-height: calc(100vh - 136px);
    padding-top: 0;
}
.page-small-logo {
    height: 32px;
    width: auto;
}
.rectify-table {
    width: 100%;
    border-collapse: collapse;
}
.rectify-table th,
.rectify-table td {
    padding: 0.75rem;
    border: 1px solid var(--border-color-light);
    text-align: left;
    font-size: var(--font-size-sm);
}
.rectify-table th {
    background: var(--bg-section-light);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.rectify-table tr:hover td {
    background: var(--bg-section-light);
}
.table-responsive {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}
.table-responsive::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.05));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.table-responsive.is-overflowing::after {
    opacity: 1;
}
.card .table-responsive {
    margin-bottom: 0;
}
.col-check {
    width: 60px;
}
.col-item {
    width: auto;
}
.col-method {
    width: 200px;
}
.col-no {
    width: 60px;
}
.col-remark {
    width: 250px;
}
.col-standard {
    width: 150px;
}
.checklist {
    list-style: none;
    padding: 0;
}
.checklist li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.checklist li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}
.checkbox-cell {
    text-align: center;
}
.checkbox-group {
    margin-top: 0.75rem;
}
.cert-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.cert-placeholder {
    aspect-ratio: 4/3;
    background: var(--bg-section-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cert-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cert-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-top: 0.5rem;
    text-align: center;
}
.cert-caption {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
}
.cert-link {
    display: block;
    text-decoration: none;
}

.client-logo-card:hover {
    background: rgba(26, 35, 50, 0.10);
    color: var(--theme-dark);
    border-color: rgba(26, 35, 50, 0.20);
    transform: translateY(-2px);
}
.case-industry-tag {
    display: flex;
    justify-content: center;
}
.case-row {
    display: flex;
    flex-direction: column;
}
.cases-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}
.expert-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
.expert-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-accent-10);
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.expert-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}
.expert-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.expert-contact {
    margin-top: 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--theme-dark);
}
.features-list {
    list-style: none;
    padding: 0;
}
.features-list li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.download-action {
    margin-top: 1.5rem;
    text-align: center;
}
.download-btn,
.download-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--theme-dark);
    color: var(--bg-page);
    border-radius: 6px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.2s ease;
}
.download-btn:hover,
.download-button:hover {
    background: var(--theme-accent-soft);
    box-shadow: 0 4px 16px rgba(232, 145, 58, 0.25);
}
.download-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.download-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 1rem;
}
.download-description {
    margin-top: 1rem;
}
.download-description h3 {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.download-description p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.download-detail {
    max-width: 800px;
    margin: 0 auto;
}
.download-detail-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-light);
    margin-bottom: 1.5rem;
}
.download-detail-header h2 {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
}
.download-detail-content {
    padding: 1.5rem;
    background: var(--bg-surface);
    border-radius: 8px;
}
.download-icon {
    width: 60px;
    height: 60px;
    background: var(--theme-accent-10);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.download-info {
    flex: 1;
    margin-left: 1rem;
}
.download-info h4 {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.download-info p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}
.download-info-section {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--bg-section-light);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.download-list-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}
.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.meta-item {
    display: flex;
    gap: 0.25rem;
}
.article-header {
    background: var(--bg-section-light);
    text-align: center;
}
.article-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

footer,
.footer {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-dark);
    color: var(--text-inverse-muted);
    font-size: var(--font-size-sm);
}
.hover\:accent-text:hover {
    color: var(--theme-accent-soft);
}
.hover\:text-accent-orange:hover {
    color: var(--theme-accent-soft);
}
.text-dark-primary { color: var(--text-inverse); }
.text-dark-secondary { color: var(--text-inverse-muted); }
.text-dark-tertiary { color: var(--text-inverse-muted); }
.text-leading-relaxed { line-height: var(--leading-relaxed); }
.text-leading-2 { line-height: 2; }
.text-leading-7 { line-height: 1.75; }
.primary-text { color: var(--text-primary); }
.mt-xs { margin-top: 0.25rem; }
.bg-dark-card { background: rgba(255,255,255,0.06); }
.bg-dark-overlay { background: rgba(255,255,255,0.04); }
.border-top-accent { border-top: 3px solid var(--theme-accent-soft); }
.badge-padded { padding: 0.25rem 1rem; }
.product-image-aspect { aspect-ratio: 9/9; margin: 0.75rem 0; }
.bg-secondary-card { background: var(--bg-section-light); border-color: var(--border-color-light); }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.bg-accent-gradient { background: linear-gradient(135deg, var(--theme-accent-soft) 0%, var(--theme-accent) 100%); }

/* ===== components.css ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    text-align: center;
    min-height: 44px;
}

a.btn.btn-outline-light {
    background: white;
}
.btn:active {
    transform: translateY(1px);
}
@media (pointer: coarse) {
    .btn:active,
    .card:active,
    .tab-btn:active,
    .product-card:active,
    .hot-product-card:active,
    .carousel-arrow:active,
    .carousel-toggle:active {
        transform: scale(0.98);
        transition-duration: 0.05s;
    }
}
.btn:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--theme-accent-10);
}
.btn i {
    font-size: 0.9em;
}
.btn-primary {
    background: var(--theme-accent);
    color: var(--bg-page);
    border-color: var(--theme-accent);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--theme-accent-hover);
    border-color: var(--theme-accent-hover);
    color: var(--bg-page);
    box-shadow: 0 6px 18px rgba(204, 122, 40, 0.28), var(--shadow-sm);
}
.btn-accent, .btn-secondary {
    background: var(--theme-accent-soft);
    color: var(--text-primary);
    border-color: var(--theme-accent-soft);
    box-shadow: var(--shadow-sm);
}
.btn-accent:hover, .btn-secondary:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--bg-page);
    box-shadow: 0 6px 18px rgba(232, 145, 58, 0.30), var(--shadow-sm);
}
.btn-outline {
    background: transparent;
    color: var(--theme-accent);           
    border-color: var(--theme-accent);
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-outline:hover {
    background: var(--theme-accent);
    color: var(--bg-page);
    border-color: var(--theme-accent-hover);
    box-shadow: 0 6px 18px rgba(204, 122, 40, 0.30);
}
.btn-outline-accent {
    background: transparent;
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.btn-outline-accent:hover {
    background: var(--theme-accent);
    color: var(--bg-page);
    box-shadow: 0 6px 18px rgba(204, 122, 40, 0.30);
}
.btn-light {
    background: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-light:hover {
    background: var(--bg-section-light);
    border-color: #CBD5E0;
    color: var(--theme-accent);
    box-shadow: var(--shadow-sm);
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--bg-section-light);
    color: var(--theme-accent);
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
    border-radius: 4px;
    min-height: 34px;
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-base);
    border-radius: 8px;
    min-height: 52px;
}
.btn-xl {
    padding: 1.25rem 2.5rem;
    font-size: var(--font-size-lg);
    border-radius: 8px;
    min-height: 52px;
}
.btn-block {
    width: 100%;
    display: flex;
}
.btn-small {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
    border-radius: 4px;
    min-height: 34px;
}
.btn-large {
    padding: 1.25rem 2.5rem;
    font-size: var(--font-size-lg);
    border-radius: 8px;
    min-height: 52px;
}
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.card {
    --card-padding-x: 1.25rem;
    --card-padding-y: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}
.card-hover-lift:hover {
    box-shadow: var(--shadow-lg);
}
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-accent-30);
}
.card-header {
    padding: 1rem var(--card-padding-x);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card-header h3, .card-header h4 {
    flex: 1;
    font-size: var(--font-size-lg);
    margin: 0;
}
.card-header i {
    color: var(--theme-accent-soft);
    font-size: var(--font-size-lg);
}
.card-body {
    padding: var(--card-padding-y) var(--card-padding-x);
}
.card-footer {
    padding: 1rem var(--card-padding-x);
    border-top: 1px solid var(--border-color-light);
    background: var(--bg-section-light);
}
.badge, .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-primary, .tag-primary {
    background: rgba(204, 122, 40, 0.1);
    color: var(--theme-accent);
    border-color: rgba(204, 122, 40, 0.15);
}
.badge-accent, .tag-accent, .tag {
    background: rgba(232, 145, 58, 0.12);
    color: var(--theme-accent);
    border-color: rgba(232, 145, 58, 0.2);
}
.badge-success {
    background: var(--bg-success);
    color: #1E7E34;
    border-color: var(--bg-success);
}
.badge-danger {
    background: var(--bg-danger);
    color: #A71D2A;
    border-color: var(--bg-danger);
}
.badge-warning {
    background: var(--bg-warning);
    color: #D39E00;
    border-color: var(--bg-warning);
}
.badge-info {
    background: var(--bg-info);
    color: #0F7E90;
    border-color: var(--bg-info);
}
.badge-new {
    background: linear-gradient(135deg, var(--color-danger), #A71D2A);
    color: var(--bg-page);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
}
.badge-hot {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-soft));
    color: var(--bg-page);
    font-weight: var(--font-weight-semibold);
}
.section-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}
.section-title h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.section-title h2 i {
    color: var(--theme-accent-soft);
    font-size: 0.9em;
}
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    border-radius: 9999px;
}
.section-title p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    max-width: 720px;
    margin: 1.25rem auto 0;
    line-height: var(--leading-relaxed);
}
.section-title.text-left {
    text-align: left;
}
.section-title.text-left h2::after {
    left: 0;
    transform: none;
}
.section-title.text-left p {
    margin-left: 0;
}
.feature-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
}
.feature-item i {
    font-size: 2rem;
    color: var(--theme-dark);
    margin-bottom: 0.25rem;
}
.feature-item h4 {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin: 0;
}
.feature-item p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}
.link-list {
    padding: 0.5rem 1.25rem 1rem;
}
.link-list li {
    border-bottom: 1px dashed var(--border-color-light);
}
.link-list li:last-child {
    border-bottom: none;
}
.link-list li a {
  display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.5rem 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
}
.link-list li a:hover {
    color: var(--theme-dark);
    padding-left: 0.5rem;
}
.link-list li a::before {
    content: '›';
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-bold);
    margin-right: 0.5rem;
    transition: all 0.2s ease;
}
.link-list li a:hover::before {
    margin-right: 0.75rem;
    color: var(--theme-dark);
}
.link-list .list-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 0.75rem;
}
.more-link {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color-light);
    text-align: right;
}
.more-link .text-link {
    font-size: var(--font-size-sm);
    color: var(--bg-page);
    font-weight: var(--font-weight-medium);
}
.more-link .text-link:hover {
    color: var(--theme-accent-soft);
}
.more-link .text-link i {
    transition: transform 0.2s;
    margin-left: 2px;
}
.more-link .text-link:hover i {
    transform: translateX(3px);
}
.price {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}
.price-lg {
    font-size: var(--font-size-2xl);
}
.price-sm {
    font-size: var(--font-size-sm);
}
.price-strike {
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: var(--font-weight-normal);
    margin-left: 0.5rem;
    font-size: 0.85em;
}
.price-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}
.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.input-group:focus-within {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.12);
}
.input-group input {
    flex: 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.75rem 1rem;
}
.input-group .input-group-btn {
    padding: 0 1.25rem;
    background: var(--theme-dark);
    color: var(--bg-page);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}
.input-group .input-group-btn:hover {
    background: var(--theme-dark);
}
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.stagger-delay-4 { transition-delay: 0.4s; }
.stagger-delay-5 { transition-delay: 0.5s; }
.stagger-delay-6 { transition-delay: 0.6s; }
.fade-in-up {
    animation: fadeInUp 0.8s ease both;
}
.fade-in {
    animation: fadeIn 0.8s ease both;
}
.mobile-sticky-cta.show ~ .back-to-top {
    bottom: calc(70px + 1rem + env(safe-area-inset-bottom));
}
.carousel-indicators {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}
.carousel-indicators button {
    width: 32px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}
.carousel-indicators button.active {
    background: var(--bg-page);
    width: 48px;
}
.carousel-indicators.dark button {
    background: rgba(0, 0, 0, 0.20);
}
.carousel-indicators.dark button.active {
    background: var(--theme-dark);
}
.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.9);
    color: var(--text-primary);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}
.carousel-nav-btn.prev { left: 1rem; }
.carousel-nav-btn.next { right: 1rem; }
:hover > .carousel-nav-btn { opacity: 1; }
.carousel-nav-btn:hover {
    background: var(--theme-dark);
    color: var(--bg-page);
}
.stat-item {
    text-align: center;
    padding: 0.75rem;
}
.stat-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.stat-link:hover .stat-number {color: var(--theme-dark);background: white;}
.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--theme-accent-soft);
    transition: all 0.2s ease;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--theme-accent-soft);
    display: block;
}
.mobile-sticky-cta {
    display: none;
}
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    z-index: calc(300 + 1);
    transition: width 0.1s;
}
.notification {
    --notif-bg: var(--bg-page);
    --notif-color: var(--text-primary);
    --notif-icon-color: var(--theme-dark);
    --notif-border: var(--border-color-light);
    --notif-shadow: var(--shadow-lg);
    position: fixed;
    top: calc(136px + 0.75rem);
    left: 50%;
    transform: translate(-50%, -140%);
    min-width: 280px;
    max-width: calc(100vw - 2 * 1rem);
    background: var(--notif-bg);
    color: var(--notif-color);
    border: 1px solid var(--notif-border);
    border-left: 4px solid var(--notif-icon-color);
    border-radius: 6px;
    box-shadow: var(--notif-shadow);
    padding: 0.75rem 1rem;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.8,.2,1), visibility 0.28s;
}
.notification.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}
.notification-icon {
    font-size: 1.25rem;
    color: var(--notif-icon-color);
    flex-shrink: 0;
}
.notification.success {
    --notif-icon-color: var(--color-success);
    --notif-border: var(--bg-success);
    background: var(--bg-success);
}
.notification.error {
    --notif-icon-color: var(--color-danger);
    --notif-border: var(--bg-danger);
    background: var(--bg-danger);
}
.notification.warning {
    --notif-icon-color: #D39E00;
    --notif-border: var(--bg-warning);
    background: var(--bg-warning);
}
.notification.info {
    --notif-icon-color: #0F7E90;
    --notif-border: var(--bg-info);
    background: var(--bg-info);
}
.collapse-header {
    padding: 0.75rem 1rem;
    background: var(--bg-section-light);
    border-radius: 4px;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}
.collapse-header:hover {
    background: #E9EEF4;
}
.collapse-header.active {
    background: rgba(26, 35, 50, 0.10);
}
.collapse-header i {
    transition: transform 0.25s ease;
}
.collapse-header.active i {
    transform: rotate(180deg);
}
.section-title-large {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
}
.section-title-large h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.section-title-large h2 i {
    color: var(--theme-accent-soft);
    font-size: 1em;
}
.section-title-large h2::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    border-radius: 9999px;
}
.section-title-large p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 800px;
    margin: 1.5rem auto 0;
    line-height: var(--leading-relaxed);
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.key-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.spec-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-section-light);
    color: var(--text-secondary);
    white-space: nowrap;
}
.gallery-prev, .gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}
.gallery-prev { left: 0.75rem; }
.gallery-next { right: 0.75rem; }
.gallery-prev:hover, .gallery-next:hover {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    box-shadow: var(--shadow-md);
}
.gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.gallery-thumbs .thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gallery-thumbs .thumbnail.active,
.gallery-thumbs .thumbnail:hover {
    border-color: var(--theme-accent-soft);
}
.content-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}
.content-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
.spec {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    background: var(--bg-section-light);
    border-radius: 2px;
    margin-right: 0.25rem;
}
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.form-select:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.12);
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.article-meta .tag {
    font-size: var(--font-size-xs);
}
.border-accent-top {
    border-top: 3px solid var(--theme-accent-soft);
}
.highlight {
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-semibold);
}
.step-number {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon {
    font-size: 2rem;
    color: var(--theme-accent-soft);
    margin-bottom: 0.75rem;
    display: block;
    text-align: center;
}
.article-link {
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}
.article-link:hover {
    color: var(--theme-accent);
    text-decoration: underline;
}
.product-image-container {
    background: var(--bg-page);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}
.product-image-container:hover {
    box-shadow: var(--shadow-md);
}
.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-image-container:hover img {
    transform: scale(1.02);
}
.tag-accent {
    background: var(--theme-accent-soft);
    color: var(--bg-dark);
}
.tag-blue {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
.tag-green {
    background: var(--color-success);
    color: var(--bg-dark);
}
.tag-yellow {
    background: var(--color-warning);
    color: var(--bg-dark);
}
.marker-title {
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}
.marker-content {
    color: var(--text-secondary);
    margin: 0;
}
.profile-list li i,
.link-list li i,
.feature-list li i,
.check-list li i {
    color: var(--theme-accent-soft);
    margin-right: 0.75rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
pre, code {
    background: var(--bg-section-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}
pre {
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    line-height: 1.6;
}
pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
}
.code-block {
    background: var(--bg-section-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    position: relative;
}
.code-block code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--text-primary);
}
.card-product,
.product-card,
.service-card,
.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-product .card-body,
.product-card .card-body,
.service-card .card-body,
.solution-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-product .card-footer,
.product-card .card-footer,
.service-card .card-footer,
.solution-card .card-footer {
    margin-top: auto;
}
.page-led-floodlight-topic .bg-primary .section-padding + .section-padding {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.page-led-floodlight-topic .carousel-wrapper .dot {
    background: rgba(255, 255, 255, 0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 0.25rem;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.page-led-floodlight-topic .carousel-wrapper .dot.dot-active {
    background: var(--theme-accent-soft);
    transform: scale(1.2);
}
.page-led-floodlight-topic .product-table tr:hover td {
    background: rgba(255, 255, 255, 0.08);
}
.page-led-floodlight-topic .card-accent-top-blue i { color: var(--theme-dark); }
.page-led-floodlight-topic .card-accent-top-green i { color: var(--color-success); }
.page-led-floodlight-topic .card-accent-top-yellow i { color: #D39E00; }
.page-led-floodlight-topic .card-accent-top-purple i { color: #6B46C1; }
.page-led-floodlight-topic .card-accent-top-orange i { color: var(--theme-accent-soft); }
.page-led-floodlight-topic .grid-2 .card-flex-col,
.page-led-floodlight-topic .grid-3 .card-flex-col,
.page-led-floodlight-topic .grid-4 .card-flex-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.page-led-floodlight-topic .grid-2 .card-flex-col > *:last-child,
.page-led-floodlight-topic .grid-3 .card-flex-col > *:last-child,
.page-led-floodlight-topic .grid-4 .card-flex-col > *:last-child {
    margin-top: auto;
}
.page-led-floodlight-topic .slide-image {
    aspect-ratio: 1 / 1;
    background: var(--bg-section-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}
.page-led-floodlight-topic .slide-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.page-led-floodlight-topic .diagram-box,
.page-led-floodlight-topic .diagram-box-install {
    background: var(--bg-section-light);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-led-floodlight-topic .diagram-box img,
.page-led-floodlight-topic .diagram-box-install img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.services-article-enhanced {
    padding-top: calc(36px + 136px);
}
.article-header-enhanced {
    padding: 2rem 0;
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    color: var(--bg-page);
}
.article-header-inner {
    text-align: center;
}
.article-title-enhanced {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.article-subtitle-enhanced {
    font-size: var(--font-size-base);
    opacity: 0.88;
    margin-bottom: 1rem;
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
}
.article-meta-enhanced {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: var(--font-size-sm);
    opacity: 0.82;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.main-content-wrapper-enhanced {
    padding: 2rem 0;
}
.article-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}
.content-card-enhanced {
    background: var(--bg-page);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.post-navigation-enhanced {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-light);
}
.nav-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    min-width: 200px;
    overflow: visible;
    background: var(--bg-surface-hover);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
}
.nav-card:hover {
    background: var(--theme-dark);
    color: var(--bg-page);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.nav-card.prev {
    justify-content: flex-start;
}
.nav-card.next {
    justify-content: flex-end;
}
.nav-info {
    flex: 1;
}
.nav-label {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    display: block;
}
.nav-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
}
.sidebar-enhanced {
    position: sticky;
    top: calc(36px + 136px + 1rem);
    height: fit-content;
}
.news-card {
    background: var(--bg-page);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.news-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}
.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.news-card:hover .news-image img {
    transform: scale(1.05);
}
.news-content {
    padding: 0.75rem;
}
.news-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-excerpt {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.news-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}
.author-card {
    background: var(--bg-page);
    border-radius: 6px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    background: var(--theme-accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.author-info {
    margin-bottom: 0.75rem;
}
.author-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 4px;
}
.author-title {
    font-size: var(--font-size-xs);
    color: var(--theme-accent-soft);
    margin-bottom: 0.5rem;
}
.author-bio {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.related-posts {
    margin-top: 1.5rem;
}
.related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.related-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
    transition: background-color 0.2s ease;
}
.related-item:last-child {
    border-bottom: none;
}
.related-item:hover {
    background: var(--bg-surface-hover);
}
.related-item a {
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.share-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-light);
}
.share-links {
    display: flex;
    gap: 0.5rem;
}
.share-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}
.share-item:hover {
    background: var(--theme-dark);
    color: var(--bg-page);
    transform: translateY(-2px);
}
.comment-section {
    margin-top: 2rem;
}
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.comment-item {
    padding: 1rem;
    background: var(--bg-surface-hover);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.comment-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}
.comment-content {
    flex: 1;
}
.comment-author {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: 4px;
}
.comment-time {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.comment-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.comment-form {
    margin-top: 1rem;
    background: var(--bg-page);
    border-radius: 6px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.comment-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.comment-input:focus {
    outline: none;
    border-color: var(--theme-accent-soft);
    box-shadow: 0 0 0 3px var(--theme-accent-10);
}
.comment-submit {
    background: var(--theme-dark);
    color: var(--bg-page);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}
.comment-submit:hover {
    background: var(--theme-dark);
    transform: translateY(-1px);
}

.product-image,
.intro-image .image-wrapper,
.category-image,
.gallery-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image img,
.intro-image .image-wrapper img,
.category-image img,
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card,
.hot-product-card,
.product-card,
.service-item {
    display: flex;
    flex-direction: column;
    height: auto;
}
.card .card-body,
.hot-product-card .product-info,
.product-card .product-info,
.service-item .service-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card .card-footer,
.hot-product-card .product-footer,
.product-card .product-footer,
.service-item .service-footer {
    margin-top: auto;
}

.product-filter-bar {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.filter-search {
    position: relative;
    margin-bottom: 0.75rem;
}
.filter-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.filter-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
}
.filter-input:focus {
    outline: none;
    border-color: var(--theme-accent-soft);
    box-shadow: 0 0 0 3px var(--theme-accent-10);
}
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.filter-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--bg-section-light);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.filter-tag:hover {
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
}
.filter-tag.active {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
@media (max-width: 768px) {
    .product-filter-bar {
        padding: 0.75rem;
    }
    .filter-tags {
        gap: 0.25rem;
    }
    .filter-tag {
        padding: 0.25rem 0.75rem;
        font-size: var(--font-size-xs);
    }
}

/* ===== effects.css ===== */
.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.clip-diagonal-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}
.glass {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--theme-accent-30);
    color: var(--text-inverse);
}
.glass-dark {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--theme-accent-30);
    color: var(--text-inverse);
}
.glass-light {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color-light);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
    .glass-light {
        background: rgba(30, 41, 59, 0.75);
        border-color: var(--border-dark);
        color: var(--text-inverse);
    }
    .glass-light input[type="text"],
    .glass-light input[type="search"],
    .glass-light select,
    .glass-light .form-select,
    .glass-light .search-input {
        background: var(--theme-dark);
        border-color: var(--border-dark);
        color: var(--text-inverse);
    }
    .glass-light input[type="text"]::placeholder,
    .glass-light input[type="search"]::placeholder {
        color: var(--text-inverse-muted);
    }
}
.inner-glow {
    box-shadow: inset 0 0 30px var(--theme-accent-10);
}
.industrial-texture {
    background-image: 
        repeating-linear-gradient(
            45deg, 
            transparent, 
            transparent 2px, 
            rgba(255,255,255,0.01) 2px, 
            rgba(255,255,255,0.01) 4px
        ),
        repeating-linear-gradient(
            -45deg, 
            transparent, 
            transparent 2px, 
            rgba(0,0,0,0.02) 2px, 
            rgba(0,0,0,0.02) 4px
        );
}
.scanlines::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
    z-index: 1;
}
.glitch-hover:hover {
    animation: glitch 0.3s ease;
}
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}
.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px var(--theme-accent-30); }
    50% { box-shadow: 0 0 20px var(--theme-accent-30), 0 0 30px var(--theme-accent-10); }
}
.shadow-xs {
    box-shadow: var(--shadow-xs);
}
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}
.card-shadow {
    box-shadow: var(--card-shadow);
}
.hover-shadow {
    box-shadow: var(--hover-shadow);
}
.inner-shadow {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.inner-shadow-lg {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
}
.glow-accent {
    box-shadow: 0 0 0 1px var(--theme-accent-30);
}
.glow-accent-lg {
    box-shadow: 0 0 0 3px var(--theme-accent-10);
}
.multi-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.multi-shadow-lg {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.slide-in-left {
    animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.slide-in-right {
    animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.shake {
    animation: shake 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}
.animate-fast {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-slow {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.accelerate {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ===== sections.css ===== */

header[role="banner"] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(300 + 10);
    background: var(--bg-page);
    box-shadow: var(--shadow-sm);
}
.hp-topbar {
    background: var(--bg-dark);
    color: var(--text-inverse);
    height: 36px;
    line-height: 36px;
    font-size: var(--font-size-xs);
    overflow: hidden;
    border-bottom: 1px solid var(--border-dark);
}
.hp-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}
.hp-topbar-slider {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
}
.hp-topbar-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-topbar-slide.active { opacity: 1; }
.hp-topbar-slide a {
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-medium);
}
.hp-topbar-slide a:hover { color: var(--bg-page); }
.hp-topbar-slide .hp-badge-mini {
    display: inline-block;
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    font-size: 10px;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}
.hp-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-dark);
    margin-left: 1rem;
    height: 36px;
}
.hp-topbar-right a {
    color: var(--text-inverse-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.hp-topbar-right a:hover { color: var(--bg-page); }
.hp-topbar-right i { font-size: 13px; }
.hp-topbar-close {
    color: var(--text-inverse-muted);
    padding: 0 0.25rem;
    margin-left: 0.5rem;
    transition: color 0.2s;
}
.hp-topbar-close:hover { color: var(--text-inverse); }
.hp-utilbar {
    background: var(--bg-dark);
    height: 40px;
    border-bottom: 1px solid var(--border-color-light);
    padding: 1rem;
    height: auto;
}
.hp-utilbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.hp-utilbar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    border-bottom: 2px solid var(--theme-accent);
    padding: 0.25rem 1rem;
    box-shadow: 0 1px 2px rgba(26, 35, 50, 0.06);
}
.hp-utilbar-logo .logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 1px rgba(26, 35, 50, 0.35)) drop-shadow(0 1px 1px rgba(26, 35, 50, 0.20));
}
.hp-utilbar-logo .company-tagline {
    font-size: var(--font-size-xs);
    color: var(--bg-page);
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-color);
    line-height: 1.3;
    white-space: nowrap;
}
.hp-utilbar-search {
    flex: 1;
    max-width: 540px;
    margin: 0 2rem;
    position: relative;
}
.hp-utilbar-search .search-input-wrap {
    position: relative;
    display: flex;
    border: 2px solid var(--theme-accent-soft);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.hp-utilbar-search .search-input-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.15);
}
.hp-utilbar-search .search-category {
    padding: 0 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--bg-section-light);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}
.hp-utilbar-search .search-input,
.hp-utilbar-search input[type="search"] {
    flex: 1;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    background: var(--bg-page);
    color: var(--text-primary);
    outline: none;
}
.hp-utilbar-search .search-submit {
    background: var(--theme-accent);
    color: var(--bg-page);
    padding: 0 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.hp-utilbar-search .search-submit:hover {
    background: var(--theme-accent-hover);
}
.hp-search-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1rem;
    z-index: 100;
    display: none;
}
.hp-search-suggest.open { display: block; }
.hp-search-suggest .hot-search-label {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    display: block;
    margin-bottom: 0.25rem;
}
.hp-search-suggest .hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.hp-search-suggest .hot-tags span {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    flex-shrink: 0;
    line-height: 2;
}
.hp-search-suggest .hot-tags a {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--bg-section-light);
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    transition: all 0.2s ease;
}
.hp-search-suggest .hot-tags a:hover {
    background: rgba(204, 122, 40, 0.1);
    color: var(--theme-accent);
}
.hp-utilbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.hp-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    color: var(--bg-page);
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 11px;
    line-height: 1.3;
    position: relative;
    min-width: 56px;
}
.hp-action-btn i {
    font-size: 18px;
    color: var(--theme-accent-soft);
    margin-bottom: 2px;
    transition: color 0.2s;
}
.hp-action-btn:hover {
    background: rgba(26, 35, 50, 0.15);
    color: var(--bg-page);
}
.hp-action-btn:hover i { color: var(--theme-accent); }
.hp-action-btn.hp-phone {
    flex-direction: row;
    gap: 0.5rem;
    min-width: auto;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color-light);
    margin-left: 0.5rem;
}
.hp-action-btn.hp-phone i { margin-bottom: 0; color: var(--theme-accent); font-size: 16px; }
.hp-action-btn.hp-phone strong {
    display: block;
    color: var(--theme-accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}
.hp-action-btn.hp-phone small {
    display: block;
    color: var(--bg-page);
    font-size: 10px;
}
.hp-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-danger);
    color: var(--bg-page);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translate(30%, -10%);
}
.hp-mainnav {
    background: var(--bg-page);
    border-bottom: 2px solid var(--theme-accent);
    height: 52px;
    position: relative;
}
.hp-mainnav .container {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 1rem;
}
.hp-mainnav-category {
    flex-shrink: 0;
    width: 240px;
    background: var(--theme-accent);
    color: var(--bg-page);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 0.75rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    position: relative;
    z-index: 5;
}
.hp-mainnav-category i { font-size: 1.1em; }
.hp-mainnav-category:hover { background: var(--theme-accent-hover); }
.hp-mainnav-menu {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hp-mainnav-menu > li {
    position: relative;
    height: 100%;
}
.hp-mainnav-menu > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.25rem;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    position: relative;
}
.hp-mainnav-menu > li > a:hover,
.hp-mainnav-menu > li > a.active,
.hp-mainnav-menu > li:hover > a {
    color: var(--theme-accent);
}
.hp-mainnav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--theme-accent-soft);
    transition: width 0.25s ease;
}
.hp-mainnav-menu > li:hover > a::after,
.hp-mainnav-menu > li > a.active::after {
    width: 70%;
}
.hp-mainnav-menu .menu-hot {
    display: inline-block;
    background: var(--color-danger);
    color: var(--bg-page);
    font-size: 9px;
    padding: 1px 0.25rem;
    border-radius: 2px;
    font-weight: var(--font-weight-bold);
    margin-left: 4px;
    vertical-align: super;
    line-height: 1.2;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.hp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
}
.hp-mainnav-menu > li:hover > .hp-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.hp-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.hp-dropdown a:hover {
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
    padding-left: calc(1.25rem + 6px);
}
.hp-dropdown a i {
    font-size: 10px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}
.hp-dropdown a:hover i { color: var(--theme-accent-soft); }
.hp-dropdown.hp-mega {
    left: -160px;
    min-width: 760px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
}
.hp-mega-col h5 {
    font-size: var(--font-size-sm);
    color: var(--theme-accent-soft);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
}
.hp-mega-col a {
    padding: 0.5rem 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: none;
}
.hp-mega-col a:hover {
    padding-left: 0.5rem;
}
.hp-category-panel {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(calc(-50% - 520px + 120px));
    width: 240px;
    background: var(--bg-page);
    border: 1px solid var(--theme-dark);
    border-top: none;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: calc(100 - 1);
}
.hp-mainnav-category:hover + .hp-category-panel,
.hp-category-panel:hover {
    opacity: 1;
    visibility: visible;
}
.hp-category-panel > a {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.hp-category-panel > a:hover {
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
}
.hp-category-panel > a i {
    width: 18px;
    text-align: center;
    color: var(--theme-accent-soft);
}

/* ===== 头部滚动收缩 ===== */
header {
    transition: box-shadow 0.3s ease;
}
header.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
header.scrolled .hp-topbar {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}
header.scrolled .hp-utilbar {
    padding: 0.5rem 0;
    transition: padding 0.3s ease;
}
header.scrolled .company-tagline {
    display: none;
}
header.scrolled .hp-utilbar-search {
    max-width: 320px;
}
header.scrolled .hp-utilbar-search .search-input {
    height: 36px;
}
header.scrolled .hp-action-btn span:not(.phone-text-wrap) {
    display: none;
}
header.scrolled .hp-action-btn.hp-phone .phone-text-wrap small {
    display: none;
}
header.scrolled .hp-mainnav {
    padding: 0.25rem 0;
    transition: padding 0.3s ease;
}

.hp-category-shortcuts {
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-color-light);
    padding: 0.75rem 0;
    
}
.hp-shortcuts-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
    padding: 3rem 0;
}
.hp-shortcut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    
    position: relative;
    outline: 1px solid #30313310;
    outline-offset: 1px;
    
}

.hp-shortcut-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--border-color-light);
}
.hp-shortcut-item:last-child::after { display: none; }
.hp-shortcut-item:hover {
    
    color: var(--theme-dark);
    transform: translateY(-2px);
}
.hp-shortcut-item i {
    font-size: 26px;
    color: var(--theme-dark);
    margin-bottom: var(--space-2);
    transition: var(--transition-base);
}
.hp-shortcut-item:hover i { color: var(--theme-accent-soft); }
.hp-shortcut-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--theme-dark);
    margin-bottom: 2px;
    
}

.hp-shortcut-name:hover{
    
}

.hp-shortcut-price {
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}
.hp-shortcut-price::before {
    content: '起价: ';
    color: var(--theme-dark);
    font-weight: var(--font-weight-normal);
}
.hp-hero {
    background: var(--bg-section-light);
    position: relative;
    overflow: hidden;
}
.hp-hero .container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.hp-hero-sidebar {
    background: var(--bg-page);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: fit-content;
}
.hp-hero-sidebar-title {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-hover));
    color: var(--bg-page);
    padding: 0.75rem 1rem;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hp-hero-sidebar-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    /*! border-bottom: 1px solid var(--border-color-light); */
    transition: all 0.2s ease;
}
.hp-hero-sidebar-list a:hover {
    background: rgba(204, 122, 40, 0.08);
    color: var(--theme-accent);
    padding-left: calc(1rem + 4px);
}
.hp-hero-sidebar-list a .hp-cat-arrow {
    color: var(--text-muted);
    transition: all 0.2s ease;
}
.hp-hero-sidebar-list a:hover .hp-cat-arrow {
    color: var(--theme-accent);
    transform: translateX(3px);
}
.hp-hero-sidebar-list a:last-child { border-bottom: none; }
.hp-hero-sidebar-list a .side-cat-icon {
    width: 22px;
    color: var(--theme-accent-soft);
    text-align: center;
    margin-right: 0.5rem;
}
.hp-hero-sidebar-list a span.text { flex: 1; }
.hp-hero-sidebar-list a i.arrow { color: var(--text-muted); font-size: 10px; }
.hp-hero-carousel {
    position: relative;
    overflow: hidden;
 box-shadow: var(--shadow-md);min-height:500px;
}
.hp-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    padding: 2.5rem 3rem;
}
.hp-hero-slide.active { opacity: 1; visibility: visible; }
.hp-hero-slide.slide-1 { background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%); }
.hp-hero-slide.slide-2 { background: linear-gradient(135deg, var(--theme-accent-soft) 0%, var(--theme-accent) 100%); }
.hp-hero-slide.slide-3 { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--theme-dark) 100%); }
.hp-hero-slide.slide-4 { background: linear-gradient(135deg, rgba(26, 35, 50, 0.80) 0%, var(--theme-dark) 100%); }
.hp-hero-content * { color: var(--bg-page); }
.hp-hero-tag {
    display: inline-block;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-bottom: 1rem;
}
.hp-hero-content h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    margin-bottom: 0.75rem;
}
.hp-hero-content h1 span.dark{color: var(--text-inverse);text-shadow: 1px 1px 5px #000;}
.hp-hero-content h1 span {
    display: block;
    color: var(--theme-accent-soft);
    font-size: 0.7em;
    font-weight: var(--font-weight-medium);
    margin-top: 0.5rem;
}
.hp-hero-desc {
    font-size: var(--font-size-lg);
    color: var(--text-inverse);
    margin-bottom: 1.5rem;
    line-height: var(--leading-relaxed);
    max-width: 480px;
}
.hp-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.hp-hero-features div {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--text-inverse-muted);
}
.hp-hero-features div i { color: var(--theme-accent-soft); }
.hp-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hp-hero-actions .btn { padding: 1rem 2rem; }
.hp-hero-actions .btn-accent {
    background: var(--bg-page);
    color: var(--theme-accent);
    border-color: var(--bg-page);
}
.hp-hero-actions .btn-accent:hover {
    background: var(--theme-accent);
    color: var(--bg-page);
    border-color: var(--theme-accent);
}
.hp-hero-actions .btn-outline {
    border-color: rgba(255,255,255,0.30);
    color: var(--bg-page);
}
.hp-hero-actions .btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: var(--bg-page);
}
.hp-hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg,
        var(--bg-section-light) 0%,
        #E9EEF4 50%,
        var(--bg-section-light) 100%);
    overflow: hidden;
    min-width: 0;
}
.hp-hero-image img {
    max-height: 360px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.30));
    
}
.carousel-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}
.carousel-indicators .indicator {
    width: 28px;
    height: 4px;
    background: var(--text-inverse-muted);
    border-radius: 2px;
    transition: background-color 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}
.carousel-indicators .indicator.active {
    width: 44px;
    background: var(--theme-accent-soft);
    box-shadow: 0 0 0 3px rgba(232, 145, 58, 0.25);
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);
    color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
                transform 0.3s ease, opacity 0.3s ease;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.30);
    opacity: 0;
}
.hp-hero-carousel:hover .carousel-arrow { opacity: 1; }
.hp-hero-carousel .carousel-arrow:focus-visible {
    opacity: 1;
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
}
.carousel-arrow:hover {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
    transform: translateY(-50%) scale(1.08);
}
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
.carousel-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.30);
}
.carousel-toggle:hover {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
    transform: scale(1.08);
}
.carousel-toggle:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
}
.hp-trust-bar {
    background: var(--bg-page);
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color-light);
}
.hp-trust-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 0 0 2rem;
}
.hp-trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--border-color-light);
    transition: all 0.2s ease;
    background: var(--bg-section-light);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
}
.hp-trust-item i {
    color: var(--theme-accent-soft);
}

.hp-trust-item:last-child { border-right: none; }
.hp-trust-item:hover { transform: translateX(4px); }
.hp-trust-icon {
    width: 52px;
    height: 52px;
    background: rgba(26, 35, 50, 0.10);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--theme-dark);
    font-size: 22px;
    transition: all 0.2s ease;
}
.hp-trust-item:hover .hp-trust-icon {
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    transform: rotate(-6deg) scale(1.08);
}
.hp-trust-text h5 {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin: 0 0 2px;
}
.hp-trust-text p {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.hp-trust-text p strong { color: var(--theme-accent-soft); font-weight: var(--font-weight-semibold); }
.hp-solutions { background: var(--bg-page); }
.solutions-tabs {
    background: var(--bg-page);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.tab-header {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color-light);
    background: var(--bg-section-light);
    padding: 0 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.tab-btn {
    padding: 1rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    text-align: left;
}
.tab-btn:hover { color: var(--theme-accent); background: var(--bg-page); }
.tab-btn:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}
.tab-btn.active {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-accent-soft);
    background: var(--bg-page);
}
.tab-content {
    position: relative;
    min-height: 200px;
    padding: 1.5rem;
    transition: min-height 0.4s ease;
}
.tab-pane {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tab-pane.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.solution-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.solution-text h4 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.solution-text p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: 1.25rem;
}
.solution-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.solution-features .feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--theme-dark);
    padding: 1rem;
    box-shadow: 1px 1px 3px #808080;
    border-radius: 0.2rem;
}
.solution-features .feature i {
    color: var(--theme-accent-soft);
    width: 20px;
    text-align: center;
}
.solution-image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(90deg,
        var(--bg-section-light) 0%,
        #E9EEF4 50%,
        var(--bg-section-light) 100%);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.solution-image img {
    width: 100%;
    height: 100%;
    box-shadow: var(--shadow-md);
    object-fit: cover;
}
.hp-products {background: var(--bg-page);}

.hp-products .section-title h2,
.hp-products .section-title h2 i {
    color: var(--text-primary);
}
.hp-products .section-title p {
    color: var(--text-secondary);
}

.hp-products .feature-item h4 {
    color: var(--text-primary);
}
.hp-products .feature-item p {
    color: var(--text-secondary);
}
.hp-products .feature-item i {
    color: var(--theme-accent-soft);
}
.product-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    
}
.product-features .feature-item {
    background: var(--bg-section-light);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color-light);
    display: inline-block;
    box-shadow: var(--shadow-sm);
}
.product-features .feature-item:hover {
    transform: translateY(-4px);
    border-color: var(--theme-accent-30);
    box-shadow: var(--shadow-md);
}
.product-features .feature-item i {
    font-size: 32px;
    color: var(--theme-accent-soft);
    margin-bottom: 0.75rem;
    display: block;
    transition: all 0.2s ease;
}
.product-features .feature-item:hover i {
    color: var(--theme-accent);
    transform: scale(1.15);
}
.product-features .feature-item h4 {
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.product-features .feature-item p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}
.hot-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.hot-product-card {
    background: var(--bg-page);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}
.hot-product-card:hover {
    border-color: rgba(26, 35, 50, 0.15);
    box-shadow: 0 16px 36px rgba(0, 94, 184, 0.15);
    transform: translateY(-8px);
}
.product-image {
    position: relative;
    background: linear-gradient(180deg, var(--bg-section-light) 0%, var(--bg-page) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;   
}
.hot-product-card .product-image {
    aspect-ratio: 4 / 3;
}
.hot-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-image img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: contain;   
    transition: transform 0.5s ease;
}
.hot-product-card:hover .product-image img { transform: scale(1.08); }
.product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
}
.product-action-bar {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
}
.hot-product-card:hover .product-action-bar {
    opacity: 1;
    transform: translateX(0);
}
.product-action-bar button {
    width: 36px;
    height: 36px;
    background: var(--bg-page);
    border-radius: 9999px;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}
.product-action-bar button:hover {
    background: var(--theme-dark);
    color: var(--bg-page);
}
.product-info {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-info h3 {
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    min-height: 2.8em;
    color: var(--text-primary);
}
.product-info h3 a {
    color: var(--bg-page);
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-info h3 a:hover {
    color: var(--theme-dark);
}
.product-info h3 a:hover { color: var(--theme-dark); }
.product-info > p {
    font-size: var(--font-size-xs);
    color: var(--bg-page);
    line-height: var(--leading-none);
    margin-bottom: var(--font-size-base);
    min-height: 4em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    min-height: 28px;
}
.product-tags .tag {
    font-size: 10px;
    padding: 1px 0.5rem;
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
    border-color: rgba(26, 35, 50, 0.10);
}
.product-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.product-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.product-price .cur {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}
.product-price .amount {
    color: var(--color-danger);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}
.product-price .from {
    color: var(--theme-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.product-buy-btn {
    background: var(--theme-dark);
    color: var(--bg-page);
    font-size: var(--font-size-xs);
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.product-buy-btn:hover {
    
    color: var(--bg-page);
    box-shadow: 0 4px 16px rgba(232, 145, 58, 0.25);
}
.view-all-products {
    text-align: center;
    margin-top: 2.5rem;
}
.view-all-products .btn {
    padding: 1rem 2.5rem;
    font-size: var(--font-size-base);
}
.hp-company { background: var(--bg-section-light); }
.intro-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.intro-text h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.intro-text h3 i { color: var(--theme-accent-soft); }
.intro-text p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: 1.5rem;
    font-size: var(--font-size-base);
}
.intro-stats{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
 
}
.intro-stats .stat-item{
 background: linear-gradient(135deg, rgba(26, 35, 50, 0.80) 0%, var(--theme-dark) 100%); 
}
.profile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}
.profile-card {
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.80) 0%, var(--theme-dark) 100%);
    border-radius: 8px;
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(26, 35, 50, 0.15);
}
.profile-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(26, 35, 50, 0.10);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}
.profile-card h3 i {
    color: var(--theme-accent-soft);
    font-size: 1em;
}
.cert-item, .tech-item, .service-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-color-light);
}
.cert-item:last-child,
.tech-item:last-child,
.service-item:last-child { border-bottom: none; }
.cert-item::before,
.tech-item::before,
.service-item::before {
    content: '✓';
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
    margin-right: 0.5rem;
    font-size: 14px;
}
.client-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.client-logo {
    background: var(--bg-section-light);
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
 color: var(--text-secondary);
 text-align: center;
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}
.client-logo:hover .client-logo:hover {
background: var(--theme-accent-soft);
    color: var(--theme-dark);
    border-color: rgba(26, 35, 50, 0.15);
}
.client-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}
.hp-industry { 
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    color: var(--bg-page);
}
.hp-industry .section-title h2,
.hp-industry .section-title h2 i { color: var(--bg-page); }
.hp-industry .section-title h2::after { background: linear-gradient(90deg, var(--theme-accent-soft), var(--bg-page)); }
.hp-industry .section-title p { color: var(--text-inverse-muted); }
.hp-industry .industry-sector {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-color: var(--border-dark);
}
.hp-industry .industry-sector h3 { color: var(--bg-page); }
.hp-industry .industry-sector .sector-content p { color: var(--text-inverse-muted); }
.hp-industry .industry-sector .stat-label { color: var(--text-inverse-muted); }
.hp-industry .industry-sector .stat-value { color: var(--theme-accent-soft); }

.hp-certificates { 
    background: var(--bg-page); 
}

.hp-updates { background: var(--bg-page); }
.landscape-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.industry-sector {
    background: var(--bg-section-light);
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--border-color-light);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.industry-sector::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    opacity: 0;
    transition: opacity 0.3s;
}
.industry-sector:hover::before { opacity: 1; }
.industry-sector:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(26, 35, 50, 0.15);
}
.sector-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.75rem;
}
.sector-header h3 {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.3;
}
.sector-header h3 .sector-icon {
    color: var(--theme-accent-soft);
    font-size: 1em;
}
.sector-progress {
    position: relative;
    flex-shrink: 0;
    text-align: center;
}
.progress-ring {
    width: 68px;
    height: 38px;
    margin-bottom: 2px;
    overflow: visible;
}
.progress-ring path:last-child {
    transition: stroke-dashoffset 1.2s ease;
}
.sector-progress .percentage {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: white;
}
.sector-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
}
.sector-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.sector-stats .stat {
    background: var(--bg-page);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--border-color-light);
}
.sector-stats .stat-value {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--theme-accent-soft);
}
.span-label{
    
color:var(--theme-dark);
}
    
    color: var(--theme-dark);
    font-weight: ;
    font-weight: 4;
    font-weight: 40;
    font-weight: 400;
    font-weight: 40;
    font-weight: 4;
    font-weight: ;
    font-weight: 6;
    font-weight: 60;
    font-weight: 600;
    font-weight: 60;
    font-weight: 6;
    font-weight: ;
    font-weight: 5;
    font-weight: 50;
    font-weight: 500;
    font-weight: 50;
    font-weight: 5;
    font-weight: ;
    font-weight: 4;
    font-weight: 40;
    font-weight: 400;
}

.sector-stats .span-label {
    font-size: 11px;
    color: var(--theme-dark);
    display: block;
    margin-top: 2px;
    font-weight: 700;
}
 #update-services{ background: var(--bg-page);}
.new-solutions-card, .new-services-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hp-integrated {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    color: var(--bg-page);
    position: relative;
    overflow: hidden;
}
.hp-integrated::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(232, 145, 58, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.06) 0%, transparent 40%);
    pointer-events: none;
}
.hp-integrated > * { position: relative; z-index: 1; }
.hp-integrated .section-title h2,
.hp-integrated .section-title p,
.hp-integrated .section-title h2 i { color: var(--bg-page); }
.hp-integrated .section-title h2::after { background: linear-gradient(90deg, var(--theme-accent-soft), var(--bg-page)); }
.hp-integrated .section-title p { opacity: 0.85; }
.hp-integrated .card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-dark);
    color: var(--bg-page);
}
.hp-integrated .card i { color: var(--theme-accent-soft); }
.hp-integrated .card h3 { color: var(--bg-page); }
.hp-integrated .card p { color: var(--text-inverse-muted); }
.hp-cta {
 background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);;
    position: relative;
    overflow: hidden;
}
.hp-cta::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background:
        radial-gradient(ellipse at top right, rgba(26, 35, 50, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, var(--theme-accent-10) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 1rem auto;
    background: var(--bg-dark);
    padding: 3rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color-light);
    text-align: center;
}
.bg-primary .cta-content,
.bg-deep .cta-content,
.bg-dark .cta-content {
    background: var(--theme-dark);
    border-color: var(--border-dark);
}
.bg-primary .cta-content h2,
.bg-deep .cta-content h2,
.bg-dark .cta-content h2 {
    color: var(--text-inverse);
    -webkit-text-fill-color: currentColor;
    background: none;
    -webkit-background-clip: border-box;
}
.bg-primary .cta-content p,
.bg-deep .cta-content p,
.bg-dark .cta-content p {
    color: var(--text-inverse-muted) !important;
}
.cta-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-soft));
    color: var(--bg-page);
    padding: 0.25rem 1.25rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(232, 145, 58, 0.25);
}
.cta-content h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
 margin-bottom: 1rem;
background: var(--bg-page);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
 background-clip: text;
}
.cta-content > p {
    font-size: var(--font-size-lg);
   
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: var(--leading-relaxed);
}
.cta-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cta-input {
    width: 100%;
    padding: 1rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    background: var(--bg-section-light);
    color: var(--text-primary);
}
.cta-input:focus {
    outline: none;
    border-color: var(--theme-accent);
    background: var(--bg-page);
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.12);
}
.bg-primary .cta-input,
.bg-dark .cta-input {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-inverse);
}
.bg-primary .cta-input:focus,
.bg-dark .cta-input:focus {
    border-color: var(--theme-accent);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(204, 122, 40, 0.30);
}
.bg-primary .cta-input::placeholder,
.bg-dark .cta-input::placeholder {
    color: rgba(255, 255, 255, 0.50);
}
.cta-section .cta-input {
  background: #80808050;
  border-color: rgba(255,255,255,0.25);
  color: var(--bg-page);
}
.page-led-floodlight-topic .cta-section .cta-input{
      border-color: rgba(33,33,33,0.2);
      color: var(--theme-accent-soft);
}
.cta-section .cta-input::placeholder {
    color: rgba(255,255,255,0.50);
}
.cta-section .cta-input:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--theme-accent-soft);
    box-shadow: 0 0 0 3px rgba(232,145,58,0.25);
}
.cta-submit {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--theme-accent-soft), var(--theme-accent));
    color: var(--bg-page);
    border: none;
    border-radius: 6px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    box-shadow: 0 4px 16px rgba(232, 145, 58, 0.25);
    white-space: nowrap;
}
.cta-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(232, 145, 58, 0.35);
    filter: brightness(1.04);
}
.cta-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}
.cta-note i { color: var(--color-success); margin-right: 0.25rem; }
footer[role="contentinfo"] {
    background: var(--bg-dark);
    color: var(--text-inverse-muted);
    padding-top: 4rem;
}
footer[role="contentinfo"] h3,
footer[role="contentinfo"] h4 {
    color: var(--text-inverse);
    font-size: var(--font-size-base);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-dark);
}
footer[role="contentinfo"] p,
footer[role="contentinfo"] li {
    font-size: var(--font-size-sm);
    line-height: 2;
    color: var(--text-inverse-muted);
}
footer[role="contentinfo"] a {
    color: var(--text-inverse-muted);
    font-size: var(--font-size-sm);
    transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
}
footer[role="contentinfo"] a:hover {
    color: var(--theme-accent-soft);
    padding-left: 3px;
}
footer[role="contentinfo"] .text-gray,
footer[role="contentinfo"] .text-white-80,
footer[role="contentinfo"] .text-white-60,
footer[role="contentinfo"] .text-white {
    color: var(--text-inverse-muted);
}
footer[role="contentinfo"] .text-muted {
    color: var(--text-inverse-muted);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-dark);
}
.footer-about h3 {
    color: var(--bg-page);
    margin-bottom: 0.75rem;
    font-size: var(--font-size-lg);
}
.footer-about h3 i {
    color: var(--theme-accent-soft);
    margin-right: 8px;
}
.footer-about .footer-logo-img {
    height: 44px;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0,0,0,0.55));
}
.footer-about > p { line-height: var(--leading-relaxed); margin-bottom: 1rem; }
.footer-links-list h3 i {
    color: var(--theme-accent-soft);
    margin-right: 6px;
}
.footer-links-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-info h3 i {
    color: var(--theme-accent-soft);
    margin-right: 6px;
}
.footer-contact-info .contact-label {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.55);
    display: block;
}
.footer-contact-info .contact-value {
    color: var(--theme-accent-soft);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}
.footer-qr-section {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-qr-section > .flex {
    width: 100%;
    gap: 2rem;
}
.footer-qr-section h3 {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}
.footer-qr-section h3 i {
    color: var(--theme-accent-soft);
    margin-right: 6px;
}
.footer-qr-section p {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.70);
    line-height: 1.8;
}
.qr-text-section {
    flex: 1;
    min-width: 260px;
    max-width: 420px;
}
.qr-text-section h3 { font-size: var(--font-size-lg); }
.qr-text-section p { max-width: none; }
.brand-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.brand-extras span {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-dark);
    color: var(--text-inverse-muted);
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.brand-extras span i { color: var(--theme-accent-soft); }
.footer-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.30), var(--theme-accent-30));
    border: 1px solid rgba(255,255,255,0.30);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-inverse);
    font-weight: var(--font-weight-medium);
}
.footer-trust-no-margin { margin: 0; }
.footer-contact-info ul { padding: 0; margin: 0 0 1rem; }
.footer-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.footer-contact-info li i {
    color: var(--theme-accent-soft);
    width: 16px;
    text-align: center;
    margin-top: 4px;
    flex-shrink: 0;
}
.footer-service-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-service-links .service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}
.footer-service-links .service-link:hover {
    background: rgba(204, 122, 40, 0.2);
    color: var(--text-inverse);
    padding-left: 1rem;
}
.footer-service-links .service-link i { color: var(--theme-accent-soft); }
.footer-links-list a {
    display: block;
    padding: 0.25rem 0;
}
.qr-dual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
.qr-triple { grid-template-columns: repeat(3, 1fr); }
.qr-item {
    text-align: center;
    padding: 1rem;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 6px;
    min-width: 0;
}
.qr-code-placeholder {
    background: var(--bg-page);
    padding: 0.5rem;
    border-radius: 6px;
    margin: 0 auto 0.75rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    max-width: 160px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.qr-label {
    font-size: var(--font-size-sm);
    color: var(--text-inverse);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-weight: var(--font-weight-medium);
}
.qr-label i { color: var(--theme-accent-soft); }
.qr-hint {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.48);
    display: block;
    line-height: 1.4;
}
.cert-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--border-dark);
}
.cert-badges li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-dark);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cert-badges li:hover {
    background: rgba(204, 122, 40, 0.2);
    border-color: var(--theme-accent);
}
.cert-badges li i { color: var(--color-success); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
}
.copyright p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
    line-height: 1.6;
}
.footer-links-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.footer-links-horizontal a {
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
    position: relative;
}
.footer-links-horizontal a::after {
    content: '|';
    position: absolute;
    right: calc(-1 * 1rem / 2);
    color: var(--border-dark);
}
.footer-links-horizontal a:last-child::after { display: none; }
.footer-links-horizontal a:hover {
    color: var(--theme-accent-soft);
    padding-left: 0;
}
.page-header {
        background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    padding: 4rem 0 3rem;
    position: relative;
    border-bottom: 1px solid var(--border-color-light);
    clip-path: none;
}
.page-header::before { display: none; }
.page-header h1 {
    font-size: var(--font-size-4xl);
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.75rem;
    text-align: center;
}
.page-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    max-width: 720px;
    margin: 0 auto;
}
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--theme-accent); }
.breadcrumbs i { font-size: 10px; }
.breadcrumbs .current { color: var(--theme-accent); font-weight: var(--font-weight-medium); }
.article-detail-header {
    background: var(--bg-section-light);
    padding: 4rem 0 3rem;
    border-bottom: 1px solid var(--border-color-light);
}
.article-detail-header h1 {
    color: var(--text-primary);
    font-size: var(--font-size-4xl);
}
.article-detail-header p {
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
}
.section-padding::before,
.section-padding::after {
    display: none;
}
.section-padding + .section-padding {
    /* border-top: 1px solid var(--border-color-light); */
    /* background: var(--bg-page); */
}
.block-left, .block-highlight {
    background: var(--bg-dark);
    color: var(--text-inverse-muted);
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm);
}
.block-left h4, .block-highlight h4 {
    color: var(--text-inverse-muted);
    margin: 0.5rem;
}
.bg-primary .section-padding + .section-padding,
.bg-dark .section-padding + .section-padding {
    border-top: 1px solid var(--border-dark);
}

.bg-dark > .container > h1,
.bg-dark > .container > h2,
.bg-dark > .container > h3,
.bg-dark > .container > h4,
.bg-dark > .container > h5,
.bg-dark > .container > h6,
.bg-primary > .container > h1,
.bg-primary > .container > h2,
.bg-primary > .container > h3,
.bg-primary > .container > h4,
.bg-primary > .container > h5,
.bg-primary > .container > h6,
.bg-deep > .container > h1,
.bg-deep > .container > h2,
.bg-deep > .container > h3,
.bg-deep > .container > h4,
.bg-deep > .container > h5,
.bg-deep > .container > h6 {
    color: var(--text-inverse);
}
.bg-dark .card h1,
.bg-dark .card h2,
.bg-dark .card h3,
.bg-dark .card h4,
.bg-dark .card h5,
.bg-dark .card h6,
.bg-primary .card h1,
.bg-primary .card h2,
.bg-primary .card h3,
.bg-primary .card h4,
.bg-primary .card h5,
.bg-primary .card h6,
.bg-deep .card h1,
.bg-deep .card h2,
.bg-deep .card h3,
.bg-deep .card h4,
.bg-deep .card h5,
.bg-deep .card h6 {
    color: var(--text-primary);
}

.bg-dark .culture-card h4,
.bg-dark .honor-card h3,
.bg-dark .strength-card h4,
.bg-primary .culture-card h4,
.bg-primary .honor-card h3,
.bg-primary .strength-card h4,
.bg-deep .culture-card h4,
.bg-deep .honor-card h3,
.bg-deep .strength-card h4 {
    color: var(--text-inverse);
}

.bg-dark > .container > p,
.bg-dark > .container > li,
.bg-primary > .container > p,
.bg-primary > .container > li,
.bg-deep > .container > p,
.bg-deep > .container > li {
    color: var(--text-inverse-muted);
}

.bg-dark .card p,
.bg-dark .card li,
.bg-primary .card p,
.bg-primary .card li,
.bg-deep .card p,
.bg-deep .card li {
    color: var(--text-secondary);
}

.bg-dark .culture-card p,
.bg-dark .honor-card p,
.bg-dark .strength-card p,
.bg-primary .culture-card p,
.bg-primary .honor-card p,
.bg-primary .strength-card p,
.bg-deep .culture-card p,
.bg-deep .honor-card p,
.bg-deep .strength-card p {
    color: var(--text-inverse-muted);
}
.bg-dark .text-muted, .bg-primary .text-muted, .bg-deep .text-muted {
    color: var(--text-inverse-muted);
}

.bg-dark a,
.bg-primary a,
.bg-deep a {
    color: var(--theme-accent-soft);
}
.bg-dark a:hover,
.bg-primary a:hover,
.bg-deep a:hover {
    color: var(--theme-accent-soft);
    text-decoration: underline;
}

.bg-dark li a,
.bg-primary li a,
.bg-deep li a {
    color: var(--text-inverse);
}
.bg-dark li a:hover,
.bg-primary li a:hover,
.bg-deep li a:hover {
    color: var(--theme-accent-soft);
}

.bg-primary .card:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark),
.bg-dark .card:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark),
.bg-deep .card:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark) {
    
    border-color: var(--border-color-light);
}
.bg-primary .card:hover:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark),
.bg-dark .card:hover:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark),
.bg-deep .card:hover:not(.culture-card):not(.honor-card):not(.strength-card):not(.bg-primary):not(.bg-deep):not(.bg-dark) {
    
    border-color: var(--theme-accent);
    box-shadow: var(--shadow-md);
}

.card.bg-primary,
.card.bg-deep,
.card.bg-dark {
    background: var(--theme-dark);
    border-color: var(--border-dark);
}

.bg-primary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) .text-white,
.bg-primary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h2.text-white,
.bg-primary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h3.text-white,
.bg-primary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h4.text-white,
.bg-deep .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) .text-white,
.bg-deep .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h2.text-white,
.bg-deep .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h3.text-white,
.bg-deep .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h4.text-white,
.bg-dark .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) .text-white,
.bg-dark .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h2.text-white,
.bg-dark .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h3.text-white,
.bg-dark .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h4.text-white {
    color: var(--text-primary) !important;
}

main .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) .text-white,
main .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h2.text-white,
main .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h3.text-white,
main .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg):not(.glass):not(.cta-content) h4.text-white {
    color: var(--text-primary) !important;
}

.card.bg-primary:hover,
.card.bg-deep:hover,
.card.bg-dark:hover {
    background: var(--theme-dark);
    border-color: var(--theme-accent);
}
.bg-primary a:not(.btn):not(.article-link),
.bg-dark a:not(.btn):not(.article-link),
.bg-deep a:not(.btn):not(.article-link) {
    color: var(--theme-accent-soft);
}
.bg-primary a:not(.btn):not(.article-link):hover,
.bg-dark a:not(.btn):not(.article-link):hover {
    color: var(--bg-page);
}
.bg-primary .card-title,
.bg-dark .card-title {
    color: var(--text-inverse);
}
.bg-primary .card-subtitle,
.bg-dark .card-subtitle {
    color: var(--text-inverse-muted);
}

.bg-primary .card-text,
.bg-dark .card-text,
.bg-deep .card-text {
    color: var(--text-secondary);
}

.bg-primary .glass-light .card-text,
.bg-dark .glass-light .card-text,
.bg-deep .glass-light .card-text {
    color: var(--text-inverse-muted);
}
.bg-primary .card-title,
.bg-dark .card-title,
.bg-deep .card-title {
    color: var(--text-primary);
}
.bg-primary .glass-light .card-title,
.bg-dark .glass-light .card-title,
.bg-deep .glass-light .card-title {
    color: var(--text-inverse);
}
.bg-primary .card-subtitle,
.bg-dark .card-subtitle,
.bg-deep .card-subtitle {
    color: var(--text-muted);
}
.bg-primary .glass-light .card-subtitle,
.bg-dark .glass-light .card-subtitle,
.bg-deep .glass-light .card-subtitle {
    color: var(--text-inverse-muted);
}

.hp-products .hot-product-card,
.bg-primary .hot-product-card,
.bg-dark .hot-product-card,
.bg-deep .hot-product-card {
    background: var(--bg-page);
    border-color: var(--border-color-light);
}
.hp-products .hot-product-card .product-info h3,
.bg-primary .hot-product-card .product-info h3,
.bg-dark .hot-product-card .product-info h3,
.bg-deep .hot-product-card .product-info h3 {
    color: var(--text-primary);
}
.hp-products .hot-product-card .product-info h3 a,
.bg-primary .hot-product-card .product-info h3 a,
.bg-dark .hot-product-card .product-info h3 a,
.bg-deep .hot-product-card .product-info h3 a {
    color: var(--text-primary);
}
.hp-products .hot-product-card .product-info > p,
.bg-primary .hot-product-card .product-info > p,
.bg-dark .hot-product-card .product-info > p,
.bg-deep .hot-product-card .product-info > p {
    color: var(--text-secondary);
}
.hp-products .hot-product-card .product-tags .tag,
.bg-primary .hot-product-card .product-tags .tag,
.bg-dark .hot-product-card .product-tags .tag,
.bg-deep .hot-product-card .product-tags .tag {
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
    border-color: rgba(26, 35, 50, 0.10);
}
.hp-products .hot-product-card .product-buy-btn,
.bg-primary .hot-product-card .product-buy-btn,
.bg-dark .hot-product-card .product-buy-btn,
.bg-deep .hot-product-card .product-buy-btn {
    background: var(--theme-dark);
    color: var(--bg-page);
}
.hp-products .section-title h2,
.bg-primary .section-title h2 {
    color: var(--text-inverse);
}
.hp-products .section-title p,
.bg-primary .section-title p {
    color: var(--text-inverse-muted);
}
.bg-primary .card-header,
.bg-dark .card-header {
    color: var(--text-inverse);
    border-bottom-color: var(--border-dark);
}
.bg-primary .card-link,
.bg-dark .card-link {
    color: var(--theme-accent-soft);
}
.bg-primary .text-gray,
.bg-dark .text-gray,
.bg-deep .text-gray {
    color: var(--text-inverse-muted) !important;
}
.bg-primary .text-muted,
.bg-dark .text-muted,
.bg-deep .text-muted {
    color: var(--text-inverse-muted) !important;
}
.bg-primary .text-primary,
.bg-dark .text-primary,
.bg-deep .text-primary {
    color: var(--text-inverse) !important;
}

.industry-card {
    background: var(--bg-page);
    
}
.industry-card h3 {
    color: var(--text-primary);
}

.bg-primary .industry-card,
.bg-deep .industry-card,
.bg-dark .industry-card {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-dark);
}
.bg-primary .industry-card h3,
.bg-deep .industry-card h3,
.bg-dark .industry-card h3 {
    color: var(--text-inverse);
}

.industry-card p {
    color: var(--text-secondary);
}
.bg-primary .industry-card p,
.bg-deep .industry-card p,
.bg-dark .industry-card p {
    color: var(--text-inverse-muted);
}
.product-categories-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    
    
    
}
.category-section {
    background: var(--bg-page);
    border: 1px solid var(--border-color-light);
    
    overflow: hidden;
    transition: all 0.2s ease;
    margin: 2rem 1rem;
}
.category-section:hover {
    border-color: var(--theme-accent-soft);
    box-shadow: 0 8px 24px rgba(232, 145, 58, 0.15);
}
.category-desc-row {
    padding: 1.25rem 1.5rem;
    
}
.category-desc {
    width: 100%;
}
.category-desc .category-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-inverse);
    margin-bottom: var(--space-3);
}
.category-desc .category-text {
    font-size: var(--font-size-base);
    color: var(--text-inverse);
    line-height: var(--leading-relaxed);
}
.category-media-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;

}
.category-image {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.05) 0%, var(--theme-accent-10) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
}
.category-section:hover .category-image {
    transform: scale(1.03);
}
.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-soft);
    text-decoration: none;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    position: relative;
}
.link-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.25rem 0.75rem;
    
    border-radius: 9999px;
    margin-top: 0.25rem;
    position: absolute;
    bottom: 0;
}
.category-specs {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
    padding: 0.75rem 1rem;
    background: var(--bg-section-light);
    border-radius: 4px;
}
.spec-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.spec-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.customize-section {
    padding: 2rem;
}
.customize-content h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.customize-content p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
}
.customize-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.customize-features li {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.service-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    background: var(--theme-accent-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-soft);
    font-size: 1.5rem;
}
.contact-info-card, .contact-form-card, .map-card {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-dark);
}
.contact-info-card h3, .contact-form-card h3, .map-card h3 {
    color: var(--text-inverse);
}
.contact-info-card p, .contact-form-card p, .map-card p {
    color: var(--text-inverse-muted);
}
.qr-code p {
    color: var(--text-inverse-muted);
}
.step-number {
    width: 40px;
    height: 40px;
    background: var(--theme-accent-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-soft);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0 auto 0.75rem;
}
.hp-integrated .card h3 {
    color: var(--text-inverse);
}
.hp-integrated .card p {
    color: var(--text-inverse-muted);
    margin-top: 1rem;
}
.cta-section {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    padding: 3rem 0;
}
.cta-section h2 {
    color: var(--text-inverse);
}

.culture-card, .honor-card, .strength-card {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    border-color: var(--border-dark);
}
.culture-card h4, .honor-card h3, .strength-card h4 {
    color: var(--text-inverse);
}
.culture-card p, .honor-card p, .strength-card p {
    color: var(--text-inverse-muted);
}
.card-icon-wrapper, .honor-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    background: var(--theme-accent-10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-accent-soft);
    font-size: 1.5rem;
}
.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    text-align: center;
}
.products-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.article-list { display: flex; flex-direction: column; gap: 1.25rem; }
.article-item {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    background: var(--bg-page);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.article-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(26, 35, 50, 0.15);
}
.article-item .article-thumb img {
    width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
}
.article-item .article-body { padding: 1.25rem; }
.article-item h3 a { color: var(--text-primary); }
.article-item h3 a:hover { color: var(--theme-dark); }
.timeline-wrapper {
    position: relative;
    padding-left: 1.5rem;
}
.timeline-line {
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--theme-dark), var(--theme-accent-soft));
    border-radius: 9999px;
}
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: calc(1.5rem * -1);
    top: 0.25rem;
    width: 12px;
    height: 12px;
    background: var(--theme-accent-soft);
    border: 3px solid var(--bg-page);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.20);
}
.timeline-item.current .timeline-dot {
    background: var(--theme-accent-soft);
    box-shadow: 0 0 0 6px var(--theme-accent-30);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.timeline-year {
    flex-shrink: 0;
    width: 100px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--theme-dark);
    text-align: right;
}
.timeline-content {
    flex: 1;
    background: var(--bg-section-light);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--theme-accent-soft);
}
.timeline-content h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.timeline-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.pagination a {
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    border-radius: 0;
    color: var(--text-secondary);
    /*! background: var(--bg-page); */
    transition: all 0.2s ease;
    margin: 0 0.1rem;
}
.pagination a:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
    background: rgba(204, 122, 40, 0.08);
}
.pagination .current {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--bg-page);
    font-weight: var(--font-weight-semibold);
}
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 110px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--theme-accent);
    color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26, 35, 50, 0.20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.2s ease;
    z-index: 300;
    border: none;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--theme-accent-hover);
    transform: translateY(-4px);
}
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    z-index: calc(300 + 10);
    transition: width 0.1s linear;
}
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: calc(36px + 40px + 8px);
    right: 16px;
    width: 44px;
    height: 44px;
    background: var(--theme-dark);
    color: var(--bg-page);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: calc(300 + 2);
    box-shadow: var(--shadow-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mobile-menu-btn:hover { background: var(--theme-accent-soft); }
.mobile-menu-btn.active { background: var(--color-danger); }
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: min(84vw, 340px);
    height: 100vh;
    background: var(--bg-page);
    color: #16202E;
    box-shadow: var(--shadow-lg);
    z-index: calc(300 + 3);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding-top: 0;                
}
.mobile-nav.active { transform: translateX(0); }
.mobile-nav-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--theme-dark), var(--theme-dark));
    border-bottom: 2px solid var(--theme-accent-soft);
    position: sticky;
    top: 0;
    z-index: 2;
}
.mobile-nav-logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    background: rgba(255,255,255,0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-dark);
}
.mobile-nav-logo-img {
    height: 28px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(0,0,0,0.4));
}
.mobile-nav-close {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    color: var(--bg-page);
    border: 1px solid rgba(255,255,255,0.30);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mobile-nav-close:hover {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
    transform: scale(1.05);
}
.mobile-nav-close:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
}
.mobile-nav .mobile-main-menu { list-style: none; padding: 0; margin: 0; }
.mobile-nav .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base);
    color: #16202E;
    border-bottom: 1px solid var(--border-color-light);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}
.mobile-nav .mobile-nav-link:hover,
.mobile-nav .mobile-nav-link.active {
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
    padding-left: calc(1.25rem + 6px);
}
.mobile-arrow-icon { font-size: 12px; opacity: .7; transition: transform .2s; }
.mobile-dropdown.open .mobile-arrow-icon { transform: rotate(180deg); }
.mobile-dropdown.open .fa-chevron-down { transform: rotate(180deg); }
.mobile-dropdown .fa-chevron-down { transition: transform .2s; }
.mobile-dropdown-content {
    display: none;
    background: var(--bg-section-light);
}
.mobile-dropdown.open .mobile-dropdown-content { display: block; }
.mobile-dropdown-content a {
    display: block;
    padding: 0.5rem 1.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color-light);
    transition: all 0.2s ease;
}
.mobile-dropdown-content a:hover {
    color: var(--theme-dark);
    background: rgba(26, 35, 50, 0.05);
    padding-left: calc(1.5rem + 4px);
}
.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: calc(300 + 2);
    opacity: 0;
    transition: opacity .3s;
}
.menu-overlay.active { display: block; opacity: 1; }
.mobile-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border-color-light);
    padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    z-index: 300;
    box-shadow: var(--shadow-md);
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}
.mobile-sticky-cta.show { display: grid; }
.mobile-sticky-cta .mcta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.25rem;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    gap: 2px;
}
.mobile-sticky-cta .mcta-item i { font-size: 18px; }
.mobile-sticky-cta .mcta-item:hover { background: var(--bg-section-light); }
.mobile-sticky-cta .mcta-call { color: var(--theme-dark); }
.mobile-sticky-cta .mcta-call i { color: var(--theme-dark); }
.mobile-sticky-cta .mcta-service { color: var(--theme-accent-soft); }
.mobile-sticky-cta .mcta-service i { color: var(--theme-accent-soft); }
.mobile-sticky-cta .mcta-quote {
    background: linear-gradient(135deg, var(--theme-dark), var(--theme-dark));
    color: var(--bg-page);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 4px 16px rgba(26, 35, 50, 0.20);
}
.mobile-sticky-cta .mcta-quote i { color: var(--bg-page); }
.footer-contact-info .contact-info-list ul { list-style: none; padding: 0; margin: 0; }
.footer-contact-info .contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.footer-contact-info .contact-info-list li i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    margin-top: 3px;
}
.footer-contact-info .contact-info-list li > div { flex: 1; min-width: 0; }
.footer-contact-info .contact-info-list li span { display: block; }
.solution-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.carousel-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
    min-height: 300px;
}
.carousel-wrapper {
    position: relative;
    overflow: hidden;
}
.carousel-track {
    display: flex;
    transition: transform 0.3s ease;
}
.carousel-track .carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 1rem;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--text-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: var(--shadow-sm);
}
.carousel-btn:hover {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
.carousel-btn.prev-btn { left: 0.75rem; }
.carousel-btn.next-btn { right: 0.75rem; }
.slide-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.slide-image img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}
.slide-params {
    padding: 1rem;
}
.slide-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    display: inline-block;
    margin: 0 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dot.dot-active {
    background: var(--theme-accent-soft);
}
.card-accent-top {
    position: relative;
    overflow: hidden;
}
.card-accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 8px 8px 0 0;
}
.card-accent-top-blue::before {
    background: linear-gradient(90deg, var(--theme-dark), var(--color-info));
}
.card-accent-top-green::before {
    background: linear-gradient(90deg, var(--color-success), #1E7E34);
}
.card-accent-top-yellow::before {
    background: linear-gradient(90deg, var(--color-warning), #D39E00);
}
.card-accent-top-purple::before {
    background: linear-gradient(90deg, #6B46C1, #553C9A);
}
.card-accent-top-orange::before {
    background: linear-gradient(90deg, var(--theme-accent-soft), var(--theme-accent));
}
.card-accent-left {
    position: relative;
    overflow: hidden;
}
.card-accent-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--theme-accent-soft), var(--theme-accent));
    border-radius: 8px 0 0 8px;
}
.card-flex-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-table {
    width: 100%;
    border-collapse: collapse;
    color:#333;
    background:var(--theme-dark);
}
.product-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.05);
    color: var(--text-inverse);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}
.product-table td {
    padding: 0.5rem 0.75rem;
    color: var(--text-inverse-muted);
    border-top: 1px solid var(--border-dark);
}
#sg-main .product-table td {
    color: var(--text-secondary);
    border: 2px solid var(--border-dark);
    text-align: center;
}
.product-table tr:hover td {
    background: rgba(255,255,255,0.03);
}
#sg-main .product-table tr:hover td {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
   
}

.step-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    padding: 1rem;
}
.step-card .step-content {
    flex: 1;
}
.step-card h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.step-card p {
    margin: 0;
}
.diagram-box {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-dark);
}
.diagram-box-install {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-dark);
}
.diagram-img {
    width: 100%;
    height: auto;
    display: block;
    background:var(--theme-dark)
}
.installation-section {
    padding: 2rem 0;
}
.installation-btn {
    margin-top: auto;
    text-align: center;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.service-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}
.service-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.service-card-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light);
}
.service-card-header h4 {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin: 0;
}
.service-card-body {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.solutions-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.main-content-wrapper {
    padding: 2rem 0;
}
.content-left {
    grid-column: 1;
    padding-bottom: 200px;
}
.content-right {
    grid-column: 2;
    position: sticky;
    top: calc(36px + 136px + 1rem);
    height: fit-content;
}
.doc-nav {
    background: var(--bg-surface);
    border-radius: 6px;
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
}
.doc-nav h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.doc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.doc-nav li {
    margin-bottom: 4px;
}
.doc-nav a {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.doc-nav a:hover {
    background: rgba(26, 35, 50, 0.05);
    color: var(--theme-dark);
}
.profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.section-title p,
.section-title h2 {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-primary);
}

.profile-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-primary);
}
.profile-list li:last-child {
    border-bottom: none;
}
.post-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.breadcrumb-item {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--theme-accent);
}
.breadcrumb-item.active {
    color: var(--theme-accent);
    font-weight: var(--font-weight-medium);
}
.conclusion {
    background: linear-gradient(135deg, rgba(26, 35, 50, 0.10) 0%, var(--theme-accent-10) 100%);
    border-left: 4px solid var(--theme-accent-soft);
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 6px 6px 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}
.btn-consult {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-hover));
    color: var(--bg-page);
    border-color: var(--theme-accent);
}
.btn-consult:hover {
    background: var(--theme-accent-hover);
    border-color: var(--theme-accent-hover);
}
.btn-learn-more {
    background: transparent;
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.btn-learn-more:hover {
    background: var(--theme-accent);
    color: var(--bg-page);
}
.btn-download {
    background: var(--color-success);
    color: var(--bg-page);
    border-color: var(--color-success);
}
.btn-download:hover {
    background: #1E7E34;
}
.btn-submit {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-hover));
    color: var(--bg-page);
    border-color: var(--theme-accent);
    box-shadow: 0 4px 16px rgba(232, 145, 58, 0.25);
}
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(204, 122, 40, 0.35);
}
.btn-quote {
    background: linear-gradient(135deg, var(--theme-accent-soft), var(--theme-accent));
    color: var(--bg-page);
    border-color: var(--theme-accent-soft);
}
.btn-quote:hover {
    background: var(--theme-accent-hover);
    border-color: var(--theme-accent-hover);
}
.btn-contact {
    background: var(--theme-accent);
    color: var(--bg-page);
    border-color: var(--theme-accent);
}
.btn-contact:hover {
    background: var(--theme-accent-hover);
    border-color: var(--theme-accent-hover);
}
.btn-primary-outline {
    background: transparent;
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}
.btn-primary-outline:hover {
    background: var(--theme-accent);
    color: var(--bg-page);
}
.btn-secondary {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background: var(--border-color-light);
}
.btn-success {
    background: var(--color-success);
    color: var(--bg-page);
    border-color: var(--color-success);
}
.btn-success:hover {
    background: #1E7E34;
}
.btn-warning {
    background: var(--color-warning);
    color: var(--bg-page);
    border-color: var(--color-warning);
}
.btn-warning:hover {
    background: #D39E00;
}
.btn-danger {
    background: var(--color-danger);
    color: var(--bg-page);
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background: #A71D2A;
}
.btn-info {
    background: var(--color-info);
    color: var(--bg-page);
    border-color: var(--color-info);
}
.btn-info:hover {
    background: #0F7E90;
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: var(--font-size-base);
}
.btn-block {
    width: 100%;
}
.btn-group {
    display: inline-flex;
    gap: 0.5rem;
}
.nav-item {
    margin-right: 0.5rem;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-link:hover {
    background: var(--bg-surface-hover);
    color: var(--theme-accent);
}
.nav-active {
    background: var(--theme-accent);
    color: var(--bg-page);
}
.tab-item {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.tab-item:hover {
    color: var(--theme-accent-soft);
}
.tab-item.active {
    border-bottom-color: var(--theme-accent);
    color: var(--theme-accent);
}
.tab-content {
 
    padding-top: 1rem;
}
.tab-content.active {
    display: block;
}
.accordion-item {
    border-bottom: 1px solid var(--border-color-light);
}
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    transition: background-color 0.2s ease;
}
.accordion-header:hover {
    background: var(--bg-surface-hover);
}
.accordion-header i {
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}
.accordion-content {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion-item.active .accordion-content {
    padding: 1rem;
    max-height: 500px;
}
.badge {
    display: inline-block;
    padding: 2px 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-primary {
    background: var(--theme-accent);
    color: var(--bg-page);
}
.badge-secondary {
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
}
.badge-accent {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
.badge-success {
    background: var(--color-success);
    color: var(--bg-page);
}
.badge-warning {
    background: var(--color-warning);
    color: var(--bg-page);
}
.badge-danger {
    background: var(--color-danger);
    color: var(--bg-page);
}
.badge-info {
    background: var(--color-info);
    color: var(--bg-page);
}
.badge-light {
    background: var(--bg-section-light);
    color: var(--text-primary);
}
.badge-dark {
    background: var(--bg-dark);
    color: var(--text-inverse);
}
.badge-pill {
    border-radius: 9999px;
}
.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    border-radius: 4px;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}
.tag-primary {
    background: rgba(204, 122, 40, 0.1);
    color: var(--theme-accent);
}
.tag-secondary {
    background: var(--bg-surface-hover);
    color: var(--text-secondary);
}
.tag-accent {
    background: rgba(232, 145, 58, 0.12);
    color: var(--theme-accent);
}
.tag-success {
    background: var(--bg-success);
    color: var(--color-success);
}
.tag-warning {
    background: var(--bg-warning);
    color: var(--color-warning);
}
.tag-danger {
    background: var(--bg-danger);
    color: var(--color-danger);
}
.tag-info {
    background: var(--bg-info);
    color: var(--color-info);
}
.tag-light {
    background: var(--bg-section-light);
    color: var(--text-primary);
}
.tag-dark {
    background: var(--bg-dark);
    color: var(--text-inverse);
}
.tag-pill {
    border-radius: 9999px;
}
.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
}
.alert-success {
    background: var(--bg-success);
    color: var(--color-success);
    border: 1px solid rgba(40, 167, 69, 0.20);
}
.alert-warning {
    background: var(--bg-warning);
    color: var(--color-warning);
    border: 1px solid rgba(255, 193, 7, 0.20);
}
.alert-danger {
    background: var(--bg-danger);
    color: var(--color-danger);
    border: 1px solid rgba(220, 53, 69, 0.20);
}
.alert-info {
    background: var(--bg-info);
    color: var(--color-info);
    border: 1px solid rgba(23, 162, 184, 0.20);
}
.alert-light {
    background: var(--bg-section-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color-light);
}
.alert-dark {
    background: var(--bg-dark);
    color: var(--text-inverse);
    border: 1px solid var(--border-dark);
}
.progress {
    height: 8px;
    background: var(--bg-surface-hover);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-soft));
    border-radius: 9999px;
    transition: width 0.6s ease;
}
.progress-stacked {
    display: flex;
    height: 8px;
    background: var(--bg-surface-hover);
    border-radius: 9999px;
    overflow: hidden;
}
.progress-stacked .progress-bar {
    border-radius: 0;
}
.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color-light);
    border-radius: 6px;
    overflow: hidden;
}
.list-group-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-secondary);
    transition: background-color 0.2s ease;
}
.list-group-item:last-child {
    border-bottom: none;
}
.list-group-item:hover {
    background: var(--bg-surface-hover);
}
.list-group-item-active {
    background: var(--theme-dark);
    color: var(--bg-page);
}
.list-group-item-success {
    background: var(--bg-success);
    color: var(--color-success);
}
.list-group-item-warning {
    background: var(--bg-warning);
    color: var(--color-warning);
}
.list-group-item-danger {
    background: var(--bg-danger);
    color: var(--color-danger);
}
.list-group-item-info {
    background: var(--bg-info);
    color: var(--color-info);
}
.card-img-top {
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}
.card-img-bottom {
    width: 100%;
    height: auto;
    border-radius: 0 0 8px 8px;
}
.card-body {
    padding: 1rem;
}
.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.card-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.card-link {
    color: var(--theme-dark);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.card-link:hover {
    text-decoration: underline;
}
.card-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color-light);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.card-header .text-white,
.card-header h2.text-white,
.card-header h3.text-white,
.card-header h4.text-white {
    color: var(--text-primary) !important;
}

.bg-primary .card-header .text-white,
.bg-deep .card-header .text-white,
.bg-dark .card-header .text-white,
.bg-primary .card-header h2.text-white,
.bg-deep .card-header h2.text-white,
.bg-dark .card-header h2.text-white {
    color: var(--bg-page) !important;
}
.card-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color-light);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.card-group {
    display: flex;
    gap: 1rem;
}
.card-group > .card {
    flex: 1;
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th {
    text-align: left;
    padding: 0.75rem;
    background: var(--bg-surface-hover);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    border-bottom: 2px solid var(--border-color-light);
}
.table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.table-striped tbody tr:nth-child(even) {
    background: var(--bg-surface-hover);
}
.table-hover tbody tr:hover {
    background: rgba(26, 35, 50, 0.05);
}
.table-bordered {
    border: 1px solid var(--border-color-light);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color-light);
}
.table-sm th,
.table-sm td {
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bg-deep .section-title h2,
.bg-primary .section-title h2,
.bg-dark .section-title h2 {
    color: var(--text-inverse);
}
.bg-deep .section-title p,
.bg-primary .section-title p,
.bg-dark .section-title p {
    color: var(--text-inverse-muted);
}
.bg-deep .section-title-large h2,
.bg-primary .section-title-large h2 {
    color: var(--text-inverse);
}

.bg-deep .tag,
.bg-primary .tag,
.bg-dark .tag {
    background: rgba(255,255,255,0.10);
    color: var(--text-inverse-muted);
    border-color: var(--border-dark);
}

.bg-deep .btn-outline,
.bg-primary .btn-outline,
.bg-dark .btn-outline {
    border-color: rgba(255,255,255,0.30);
    color: var(--bg-page);
}
.bg-deep .btn-outline:hover,
.bg-primary .btn-outline:hover,
.bg-dark .btn-outline:hover {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
    color: var(--bg-page);
}

/* ===== semantic-styles.css ===== */

.case-card {
    border: 1px solid var(--border-color-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.case-card .case-image {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg,
        var(--bg-section-light) 0%,
        #E9EEF4 50%,
        var(--bg-section-light) 100%);
    background-size: 200% 100%;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}
.case-card .case-content {
    padding: 2rem;
    flex: 1;
}
.case-card .case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.case-card:hover .case-image img { transform: scale(1.05); }
.case-btn-alt { margin-left: 0.75rem; }
.article-card {
    border: 1px solid var(--border-color-light);
    padding: 2rem;
    position: relative;
    z-index: 1;
}
.article-card h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.article-card p {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.article-card .article-meta {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.article-card .text-center {
    text-align: center;
    position: relative;
    z-index: 2;
}
.industry-card {
    border: 1px solid var(--border-color-light);
    padding: 2rem;
}
.industry-card h4 {
    text-align: center;
    margin-bottom: 1rem;
}
.industry-card p {
    text-align: center;
    margin-bottom: 1.5rem;
}
.industry-card .text-center { text-align: center; }
.solutions-tabs {
    border: 1px solid var(--border-color-light);
}
.new-solutions-card .card-header,
.new-services-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}
.new-solutions-card .card-header i,
.new-services-card .card-header i {
    font-size: var(--font-size-2xl);
}

main#index .hp-hero {
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--theme-dark) 100%);
}
main#index .hp-hero h1,
main#index .hp-hero p,
main#index .hp-hero .hp-hero-tag {
    color: var(--bg-page);
}

main#index .hp-hero-sidebar a {
    /*! color: var(--text-primary); */
}
main#index .hp-hero-sidebar a:hover {
    color: var(--theme-accent);
    background: rgba(204, 122, 40, 0.08);
}
main#index .hp-trust-bar {
    background: var(--bg-page);
}
main#index .hp-industry {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
}

main#about .bg-deep .culture-card h4 {
    color: var(--theme-accent-soft);
}
main#about .timeline-content h4 {
    color: var(--text-primary);
}
main#about .bg-deep .timeline-content h4,
main#about .bg-deep .timeline-content p {
    color: var(--text-inverse-muted);
}
main#about .bg-deep .timeline-content h4 {
    color: var(--theme-accent-soft);
}
main#about .company-metrics .metric-number {
    color: var(--text-primary);
}
main#about .bg-deep .company-metrics .metric-number {
    color: var(--theme-accent-soft);
}
main#about .company-metrics .metric-label {
    color: var(--text-secondary);
}
main#about .bg-deep .company-metrics .metric-label {
    color: var(--text-inverse-muted);
}
main#about .timeline-year {
    color: var(--text-primary);
}
main#about .bg-deep .timeline-year {
    color: var(--theme-accent-soft);
}

main#products .bg-primary .product-card h4 {
    color: var(--text-primary);
}
main#products .bg-primary .product-card p {
    color: var(--text-secondary);
}
main#products .bg-primary .product-image {
    background: var(--bg-section-light);
}
main#products .bg-deep .cta-content.card {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-dark);
    backdrop-filter: blur(8px);
}
main#products .bg-deep .cta-content.card h2 {
    color: var(--bg-page);
}
main#products .bg-deep .cta-content.card p {
    color: var(--text-inverse-muted);
}
main#products .bg-deep .cta-input {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.30);
    color: var(--bg-page);
}
main#products .bg-deep .cta-input::placeholder {
    color: var(--text-inverse-muted);
}
main#products .bg-deep .cta-input:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--theme-accent-soft);
}

main#services .bg-deep .service-icon {
    color: var(--theme-accent-soft);
    background: rgba(232, 145, 58, 0.15);
}
main#services .bg-deep .card:hover {
    border-color: var(--theme-accent-soft);
    transform: translateY(-4px);
}
main#services .bg-deep .card h3 {
    color: var(--text-inverse);
}
main#services .bg-deep .card p {
    color: var(--text-inverse-muted);
}

main#faq .bg-primary .hot-product-card h3 {
    color: var(--text-primary);
}
main#faq .bg-primary .hot-product-card p {
    color: var(--text-secondary);
}
main#faq .bg-deep .card h3,
main#faq .bg-deep .card p {
    color: var(--text-inverse-muted);
}
main#faq .bg-deep .card h3 {
    color: var(--text-inverse);
}
main#faq .bg-deep .hot-product-card {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-dark);
}
main#faq .bg-deep .hot-product-card h3 {
    color: var(--text-inverse);
}
main#faq .bg-deep .hot-product-card p {
    color: var(--text-inverse-muted);
}

main#fault .glass-light input[type="text"],
main#fault .glass-light input,
main#fault .cta-input {
    background: var(--bg-surface) !important;
    color: #16202E !important;
}
main#fault .glass-light input[type="text"]::placeholder,
main#fault .glass-light input::placeholder,
main#fault .cta-input::placeholder {
    color: rgba(22, 32, 46, 0.5) !important;
}
main#fault .fault-article-flow span,
main#fault .fault-article-flow p {
    color: var(--text-inverse-muted) !important;
}

main#services-article .content-card-enhanced,
main#services-article .sidebar-card {
    background: var(--bg-surface) !important;
}
main#services-article .content-card-enhanced h1,
main#services-article .content-card-enhanced h2,
main#services-article .content-card-enhanced h3,
main#services-article .content-card-enhanced h4,
main#services-article .content-card-enhanced h5,
main#services-article .content-card-enhanced h6 {
    color: var(--text-primary) !important;
}
main#services-article .content-card-enhanced p,
main#services-article .content-card-enhanced li,
main#services-article .content-card-enhanced span,
main#services-article .content-card-enhanced div,
main#services-article .content-card-enhanced td,
main#services-article .content-card-enhanced th {
    color: var(--text-secondary) !important;
}
main#services-article .content-card-enhanced a {
    color: var(--theme-accent-soft) !important;
}
main#services-article .sidebar-card h3,
main#services-article .sidebar-card .text-white,
main#services-article .sidebar-card .sidebar-card-title {
    color: var(--text-primary) !important;
}
main#services-article .sidebar-card p,
main#services-article .sidebar-card .text-gray,
main#services-article .sidebar-card .expert-bio,
main#services-article .sidebar-card .list-date {
    color: var(--text-secondary) !important;
}
main#services-article .sidebar-card a,
main#services-article .sidebar-card .related-link,
main#services-article .sidebar-card .expert-name {
    color: var(--text-primary) !important;
}
main#services-article .sidebar-card .btn-outline,
main#services-article .sidebar-card .download-btn {
    color: var(--theme-accent-soft) !important;
    border-color: var(--theme-accent-soft) !important;
}
main#services-article .post-navigation-enhanced .nav-card {
    background: var(--bg-section-light) !important;
}
main#services-article .post-navigation-enhanced .nav-title,
main#services-article .post-navigation-enhanced .text-white {
    color: var(--text-inverse) !important;
}
main#services-article .post-navigation-enhanced .nav-label,
main#services-article .post-navigation-enhanced .text-gray {
    color: var(--text-inverse-muted) !important;
}
main#services-article .cta-section .cta-content {
    background: var(--bg-dark) !important;
}
main#services-article .cta-section h2,
main#services-article .cta-section .text-white {
    color: var(--text-inverse) !important;
}
main#services-article .cta-section p,
main#services-article .cta-section .text-gray {
    color: var(--text-inverse-muted) !important;
}
main#services-article .product-card,
main#services-article .grid-2 .card {
    background: var(--bg-section-light) !important;
}
main#services-article .product-card h4,
main#services-article .product-card .text-white,
main#services-article .grid-2 .card a {
    color: var(--text-inverse) !important;
}
main#services-article .product-card .spec,
main#services-article .product-card .text-gray,
main#services-article .grid-2 .card p {
    color: var(--text-inverse-muted) !important;
}

main#main-content .card.bg-secondary .text-white,
main#main-content .card.bg-secondary h3.text-white,
main#main-content .card.bg-secondary h2.text-white {
    color: var(--text-primary) !important;
}

main#main-content .bg-secondary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg) .text-white,
main#main-content .bg-secondary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg) h3.text-white,
main#main-content .bg-secondary .card:not(.bg-primary):not(.bg-deep):not(.bg-dark):not(.card-dark-bg) h2.text-white {
    color: var(--text-primary) !important;
}

main#accessory .product-card .text-white,
main#accessory .product-card h4.text-white {
    color: var(--text-primary) !important;
}

main#product-topic .bg-secondary .text-white,
main#product-topic .bg-secondary h2.text-white,
main#product-topic .bg-secondary h3.text-white,
main#product-topic .card.bg-secondary .text-white,
main#product-topic .card.bg-secondary h3.text-white {
    color: var(--text-primary) !important;
}

main#project .bg-deep .card .text-white,
main#project .bg-deep .card h3.text-white,
main#project .bg-deep .card h4.text-white,
main#project .bg-secondary .card .text-white,
main#project .bg-secondary .card h4.text-white {
    color: var(--text-primary) !important;
}

main#services-article .sidebar-card.card .text-white,
main#services-article .sidebar-card.card .sidebar-card-title.text-white,
main#services-article .sidebar-card.card .related-link.text-white,
main#services-article .sidebar-card.card .expert-name.text-white,
main#services-article .sidebar-card.card h3.text-white,
main#services-article .sidebar-card.card h4.text-white,
main#services-article .sidebar-card.card .nav-title.text-white {
    color: var(--text-primary) !important;
}
main#services-article .nav-card.card .nav-title.text-white,
main#services-article .nav-card.card .text-white {
    color: var(--text-primary) !important;
}

main#services-article .product-card.card .text-white,
main#services-article .product-card.card h4.text-white,
main#services-article .card:not(.sidebar-card):not(.nav-card):not(.glass) .text-white,
main#services-article .card:not(.sidebar-card):not(.nav-card):not(.glass) a.text-white {
    color: var(--text-primary) !important;
}

main#box .card .card-header .text-white,
main#box .product-info .text-white,
main#box .product-info span.text-white {
    color: var(--text-primary) !important;
}

main#box .bg-deep .text-white,
main#box .spec-card.bg-deep .text-white,
main#box .spec-card.bg-deep span.text-white {
    color: var(--bg-page) !important;
}

main#led .product-info .text-white,
main#led .product-info span.text-white,
main#led .spec-card span.text-white {
    color: var(--text-primary) !important;
}

main#led .bg-deep .text-white,
main#led .spec-card.bg-deep .text-white,
main#led .spec-card.bg-deep span.text-white {
    color: var(--bg-page) !important;
}

main#sanfang .stat-card .text-white,
main#sanfang .stat-card h4.text-white {
    color: var(--text-inverse) !important;
}

main#contact .contact-info-card,
main#contact .contact-form-card {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%) !important;
    border-color: var(--border-dark) !important;
}
main#contact .contact-info-card h3,
main#contact .contact-form-card h3,
main#contact .map-card h3 {
    color: var(--text-inverse) !important;
}
main#contact .contact-info-card p,
main#contact .contact-form-card p,
main#contact .map-card p {
    color: var(--text-inverse-muted) !important;
}
main#contact .contact-item {
    background: rgba(255, 255, 255, 0.06) !important;
}
main#contact .contact-item h4 {
    color: var(--text-inverse) !important;
}
main#contact .contact-item p {
    color: var(--text-inverse-muted) !important;
}
main#contact .contact-icon {
    background: var(--theme-accent-10) !important;
    color: var(--theme-accent-soft) !important;
}
main#contact .form-group label {
    color: var(--text-inverse) !important;
}
main#contact .qr-code p {
    color: var(--text-inverse-muted) !important;
}
main#contact .contact-form-card input[type="text"],
main#contact .contact-form-card input[type="tel"],
main#contact .contact-form-card input[type="email"],
main#contact .contact-form-card input,
main#contact .contact-form-card textarea,
main#contact .contact-form-card select {
    background: var(--bg-surface) !important;
    color: #16202E !important;
    border-color: var(--border-color) !important;
}
main#contact .contact-form-card input[type="text"]::placeholder,
main#contact .contact-form-card input[type="tel"]::placeholder,
main#contact .contact-form-card input[type="email"]::placeholder,
main#contact .contact-form-card input::placeholder,
main#contact .contact-form-card textarea::placeholder {
    color: rgba(22, 32, 46, 0.5) !important;
}

.bg-deep .section-title h2,
.bg-primary .section-title h2,
.bg-dark .section-title h2 {
    color: var(--text-inverse);
}
.bg-deep .section-title p,
.bg-primary .section-title p,
.bg-dark .section-title p {
    color: var(--text-inverse-muted);
}
.bg-deep .section-title-large h2,
.bg-primary .section-title-large h2 {
    color: var(--text-inverse);
}

.bg-deep .tag,
.bg-primary .tag,
.bg-dark .tag {
    background: rgba(255,255,255,0.10);
    color: var(--text-inverse-muted);
    border-color: var(--border-dark);
}

.bg-deep .btn-outline,
.bg-primary .btn-outline,
.bg-dark .btn-outline {
    border-color: rgba(255,255,255,0.30);
    color: var(--bg-page);
}
.bg-deep .btn-outline:hover,
.bg-primary .btn-outline:hover,
.bg-dark .btn-outline:hover {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
    color: var(--bg-page);
}

main#index .hp-category-shortcuts .hp-shortcut-item {
    color: #24394F !important;
}

main#index .hp-category-shortcuts .hp-shortcut-name {
    color: #16202E !important;
}

main#index > section:nth-of-type(4) .section-title h2,
main#index > section:nth-of-type(4) .section-title p {
    color: var(--text-inverse) !important;
}

main#index > section:nth-of-type(4) .section-title p {
    color: var(--text-inverse-muted) !important;
}

main#index .product-features .feature-item h4 {
    color: var(--text-inverse) !important;
}

main#index .product-features .feature-item p {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-trust-item .hp-trust-text h5 {
    color: var(--text-inverse) !important;
}

main#index .hp-trust-item .hp-trust-text p {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-industry .section-title h2,
main#index .hp-industry .section-title p,
main#index .hp-solutions .section-title h2,
main#index .hp-solutions .section-title p,
main#index .hp-updates .section-title h2,
main#index .hp-updates .section-title p {
    color: #16202E !important;
}

main#index .hp-industry .section-title p,
main#index .hp-solutions .section-title p,
main#index .hp-updates .section-title p {
    color: #24394F !important;
}

main#index .hp-industry h3,
main#index .hp-industry h4,
main#index .hp-industry p,
main#index .hp-industry li,
main#index .hp-solutions h3,
main#index .hp-solutions h4,
main#index .hp-solutions p,
main#index .hp-solutions li,
main#index .hp-updates h3,
main#index .hp-updates h4,
main#index .hp-updates p,
main#index .hp-updates li {
    color: #24394F !important;
}

main#index .hp-industry h3,
main#index .hp-solutions h3,
main#index .hp-updates h3 {
    color: #16202E !important;
}

main#index .hp-updates .new-solutions-card h3,
main#index .hp-updates .new-services-card h3 {
    color: var(--text-inverse) !important;
}

main#index .hp-updates .new-solutions-card .link-list li a,
main#index .hp-updates .new-services-card .link-list li a {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-updates .new-solutions-card .link-list .list-date,
main#index .hp-updates .new-services-card .link-list .list-date {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-updates .new-solutions-card .more-link a,
main#index .hp-updates .new-services-card .more-link a {
    color: var(--theme-accent-soft) !important;
}

main#index .hp-updates .new-solutions-card .card-header i,
main#index .hp-updates .new-services-card .card-header i {
    color: var(--theme-accent-soft) !important;
}

main#index .hp-industry .industry-sector h3 {
    color: var(--bg-page) !important;
}

main#index .hp-industry .industry-sector .sector-content p {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-industry .industry-sector .stat-label {
    color: var(--text-inverse-muted) !important;
}

main#index .hp-industry .industry-sector .stat-value {
    color: var(--theme-accent-soft) !important;
}

/* ===== responsive.css ===== */
body.no-scroll {
    overflow: hidden;
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .section-padding { padding: 5rem 0; }
    .section-padding-lg { padding: 8rem 0; }
    .hp-hero-slide { padding: 4rem 3rem; }
    .hp-hero-content h1 { font-size: var(--font-size-5xl); }
}
@media (max-width: 1366px) {
    .hp-utilbar-search { margin: 0 1.5rem; }
    .hp-dropdown.hp-mega { min-width: 700px; }
}
@media (max-width: 1200px) {
    .hp-utilbar .hp-utilbar-actions .hp-action-btn span:not(.hp-phone) span { display: none; }
    .hp-utilbar-actions { gap: 0; }
    .hp-mainnav-menu > li > a { padding: 0 1rem; font-size: 15px; }
    .hp-mainnav-category { padding: 0 1rem; }
    .grid-4, .grid-5, .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {
    body { padding-top:0px}
    .hp-mainnav-menu > li:not(:first-child) { display: none; }
    .hp-mainnav-menu > li:first-child { display: inline-flex; }
    .hp-mainnav { display: block; }
    .hp-mainnav-category { min-width: 220px; flex: 0 0 220px; }
    .hp-mainnav .container { position: relative; }
    .hp-mainnav-menu { margin-left: 1rem; }
    .hp-utilbar-actions .hp-action-btn:not(.hp-phone) {
        display: none;
    }
    .hp-utilbar-search {
        margin: 0 1rem;
        max-width: none;
    }
    .mobile-menu-btn { display: inline-flex; }
    .mobile-nav { display: block; }
    
    .hp-category-panel {
        display: block;
        position: fixed;
        top: 136px;
        left: 0;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        transform: none;
        border: none;
        border-top: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        z-index: calc(100 + 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .hp-category-panel.open {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .hp-hero .container {
        grid-template-columns: 1fr;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .hp-hero-sidebar {
        display: block;
        position: relative;
        margin-bottom: 1rem;
    }
    .hp-hero-sidebar .hp-hero-sidebar-title {
        cursor: pointer;
        user-select: none;
    }
    .hp-hero-sidebar .hp-hero-sidebar-title::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: auto;
        transition: transform 0.3s;
        display: inline-block;
    }
    .hp-hero-sidebar.open .hp-hero-sidebar-title::after {
        transform: rotate(180deg);
    }
    .hp-hero-sidebar-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .hp-hero-sidebar.open .hp-hero-sidebar-list {
        max-height: 500px;
    }
    .hp-hero-carousel { min-height: 360px; }
    .hp-hero-slide {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        gap: 1rem;
    }
    .hp-hero-content h1 { font-size: var(--font-size-3xl); }
    .hp-hero-desc { font-size: var(--font-size-base); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .fault-quick-grid { grid-template-columns: repeat(4, 1fr); }
    .product-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .grid-auto { grid-template-columns: repeat(2, 1fr); }
    .hp-trust-wrap { grid-template-columns: 1fr; }
    .hp-trust-item { border-right: none; border-bottom: 1px solid var(--border-color-light); }
    .hp-trust-item:last-child { border-bottom: none; }
    .landscape-grid,
    .profile-grid,
    .product-features,
    .hot-products-grid,
    .qa-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid.footer-grid-redefined {
        grid-template-columns: 1fr 1fr;
    }
    .footer-about {
        grid-column: span 2;
    }
    .contact-with-qr { flex-direction: column; }
    .qr-code { margin-top: 1.5rem; align-self: flex-start; }
    .intro-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .intro-image {
        grid-template-columns: repeat(2, 1fr);
    }
    .intro-image > * {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .intro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .intro-stats { grid-template-columns: repeat(4, 1fr); }
    .solutions-process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .company-tagline { display: none; }
    .page-header h1,
    .article-detail-header h1,
    .solution-detail-header h1,
    .product-detail-header h1 {
        font-size: 2rem;
    }
    .section-title h2 { font-size: var(--font-size-2xl); }
    .hp-dropdown.hp-mega {
        left: 0;
        min-width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .solution-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .card {
        --card-padding-x: 1rem;
        --card-padding-y: 1rem;
    }
    .product-info { padding: 0.75rem 1rem 1rem; }
}
@media (max-width: 768px) {
    body { padding-top: 0; font-size: 15px; line-height: 1.6; }
    .hp-topbar {
        height: auto;
        min-height: 44px;
        padding: 0.5rem 0;
        overflow: hidden;
    }
    .hp-topbar-slide {
        white-space: normal;
        font-size: var(--font-size-xs);
        line-height: 1.4;
        padding: 0 0.5rem;
    }
    .hp-topbar .container {
        flex-wrap: nowrap;
        justify-content: center;
        position: relative;
    }
    .hp-topbar-slider {
        width: 100%;
        text-align: center;
    }
    .hp-topbar-right {
        display: none;
    }
    .hp-topbar-close {
        display: flex;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        color: var(--text-inverse-muted);
        cursor: pointer;
    }
    .hp-utilbar {
        height: auto;
        padding: 0.75rem 0;
    }
    .hp-utilbar .container {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .hp-utilbar-logo { max-width: 50%; }
    .hp-utilbar-logo .logo-img { height: 28px; }
    .company-tagline { display: none; }
    .hp-utilbar-search {
        order: 3;
        flex-basis: 100%;
        margin: 0;
    }
    .hp-utilbar-search .search-category { display: none; }
    .hp-search-suggest { display: none; }
    .hp-utilbar-actions { display: none; }
    .hp-mainnav { display: none; } 
    .mobile-menu-btn {
        display: inline-flex;
        position: static;
        width: 44px;
        height: 44px;
    }
    .mobile-nav { display: block; }
    .hp-hero-carousel {
        min-height: 320px;
        height: auto;
        border-radius: 6px;
    }
    .hp-hero-slide {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: auto;
        padding: 1rem;
        gap: 0.75rem;
        text-align: left;
    }
    .hp-hero-content { order: 1; }
    .hp-hero-image {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 160px;
        max-height: 50vh;
    }
    .hp-hero-image img {
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .hp-hero-content h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.25;
    }
    .hp-hero-tag { margin-bottom: 0.75rem; }
    .hp-hero-desc {
        font-size: var(--font-size-sm);
        max-width: none;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hp-hero-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    .hp-hero-features div {
        gap: 0.25rem;
        font-size: var(--font-size-xs);
        line-height: 1.5;
    }
    .hp-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hp-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .carousel-arrow {
        opacity: 1;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,0.28);
        color: var(--bg-page);
    }
    .carousel-arrow:active { background: var(--theme-accent-soft); }
    .carousel-indicators { bottom: 0.75rem; gap: 0.25rem; }
    .carousel-indicators .indicator { width: 24px; height: 4px; }
    .carousel-indicators .indicator.active { width: 36px; }
    .hp-shortcuts-wrap {
        grid-template-columns: repeat(4, 1fr);
    }
    .hp-shortcut-item::after { display: none; }
    .hp-trust-wrap { grid-template-columns: 1fr; }
    .hp-trust-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color-light);
        padding: 0.75rem;
    }
    .hp-trust-item:last-child { border-bottom: none; }
    .hp-trust-icon { width: 42px; height: 42px; font-size: 18px; }
    
    .grid-2:not(.grid-keep-2), 
    .grid-3:not(.grid-keep-3), 
    .grid-4:not(.grid-keep-4), 
    .grid-5:not(.grid-keep-5), 
    .grid-6:not(.grid-keep-6),
    .landscape-grid:not(.grid-keep-2), 
    .profile-grid:not(.grid-keep-2), 
    .product-features:not(.grid-keep-2),
    .hot-products-grid:not(.grid-keep-2), 
    .qa-grid:not(.grid-keep-2), 
    .footer-grid.footer-grid-redefined:not(.grid-keep-2),
    .solutions-process-steps:not(.grid-keep-2), 
    .solutions-article-grid:not(.grid-keep-2),
    .process-steps:not(.grid-keep-2), 
    .related-grid:not(.grid-keep-2),
    .article-layout:not(.grid-keep-2), 
    .fault-quick-grid:not(.grid-keep-2), 
    .product-stats-grid:not(.grid-keep-2) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .grid-2.grid-keep-2 { grid-template-columns: repeat(2, 1fr); }
    .intro-stats { grid-template-columns: repeat(2, 1fr); }
    .company-metrics { grid-template-columns: repeat(2, 1fr); }
    .footer-about { grid-column: span 1; }
    .footer-grid.footer-grid-redefined { gap: 1.5rem; }
    .container { padding: 0 1rem; }
    .section-padding { padding: 2.5rem 0; }
    .category-desc-row {
        padding: 1rem;
    }
    .category-desc .category-title {
        font-size: var(--font-size-xl);
    }
    .category-desc .category-text {
        font-size: var(--font-size-sm);
    }
    .category-media-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        gap: 1rem;
    }
    .category-section { 
        margin: 1.5rem 0.5rem; 
    }
    .category-image {
        max-width: 120px;
        width: 100%;
        aspect-ratio: 1 / 1;
        align-self: center;
    }
    .category-specs {
        width: 100%;
        justify-content: flex-start;
    }
    .spec-item {
        min-width: calc(50% - 0.5rem);
    }
    .customize-features {
        grid-template-columns: 1fr;
    }
    .section-padding-sm { padding: 2rem 0; }
    .section-padding-lg { padding: 5rem 0; }
    h1 { font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.3; }
    h2 { font-size: clamp(1.3rem, 4vw, 1.6rem); }
    h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); }
    h4 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
    
    .article-content,
    .content-card .article-body {
        font-size: 1rem;
        line-height: 1.7;
    }
    .section-title { margin-bottom: 2rem; }
    .section-title h2 { font-size: clamp(1.25rem, 4vw, 1.6rem); }
    .card {
        --card-padding-x: 1rem;
        --card-padding-y: 1rem;
    }
    .card-header { padding: 0.75rem 1rem; }
    .card-body { padding: 1rem 1rem; }
    .product-info { padding: 1rem; }
    .btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
        white-space: normal;
        text-align: center;
    }
    .btn-large { padding: 1rem 2rem; }
    .btn-small { padding: 0.5rem 1rem; }
    .cta-form {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .cta-input, .cta-submit {
        width: 100%;
    }
    .cta-content { padding: 2rem 1.25rem; }
    .cta-content h2 { font-size: 1.6rem; }
    .cta-content > p { font-size: var(--font-size-base); }
    .tab-header { flex-direction: column; align-items: stretch; }
    .tab-btn {
        text-align: center;
        min-height: 44px;
        padding: 0.75rem 1rem;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .solution-features { grid-template-columns: 1fr; }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    .footer-links-horizontal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }
    .footer-links-horizontal a::after { display: none; }
    .footer-links-horizontal a {
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }
    .cert-badges { padding: 0 0.5rem; justify-content: flex-start; overflow-x: auto; }
    .cert-badges li { white-space: nowrap; }
    .article-item {
        grid-template-columns: 1fr;
    }
    .pagination { gap: 0.25rem; }
    .pagination a, .pagination span { min-width: 36px; height: 44px; }
    .products-list-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .grid-auto { grid-template-columns: 1fr; }
    .back-to-top { display: none; }
    .mobile-sticky-cta.show { display: grid; padding-bottom: env(safe-area-inset-bottom); }
    .filter-link, .pagination-btn,
    .collapse-header, .qa-question,
    .download-link, .article-link,
    .tab-btn, input, select, textarea,
    .mobile-nav-link {
        min-height: 44px;
        min-width: 44px;
    }
    .mobile-nav-link { padding: 0 1.5rem; }
    .download-list .download-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1rem;
    }
    .download-item .download-link {
        width: 100%;
        text-align: center;
    }
    .form-row { grid-template-columns: 1fr; gap: 0.75rem; }
    .captcha-group {
        flex-direction: column; align-items: stretch;
    }
    .captcha-group .codeimg { width: 120px; height: auto; margin-top: 0.5rem; }
    .post-navigation { flex-direction: column; gap: 1rem; }
    .post-navigation a { text-align: center; }
    .contact-with-qr { flex-direction: column; align-items: center; }
    .contact-info-card,
    .contact-form-card {
        background: rgba(255, 255, 255, 0.06) !important;
    }
    #baiduMap {
        min-height: 280px;
        height: 40vh;
    }
    .stat-number {
        font-size: var(--font-size-2xl);
    }
    img, video, iframe { max-width: 100%; height: auto; margin: auto; }
    .animate-on-scroll {
        transform: none;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .card:hover,
    .hover-lift:hover,
    .card-hover-lift:hover {
        transform: none;
    }
    .table-responsive {
        overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem;
    }
    .table-responsive table { min-width: 600px; width: 100%; }
    table:not(.no-scroll) {
        display: block; overflow-x: auto;
    }
    table:not(.no-scroll) td {
        white-space: normal; word-break: break-word;
    }
    .carousel-slide {
        flex-direction: column;
    }
    .slide-image, .slide-params {
        width: 100%;
    }
    .slide-image img {
        max-height: 200px;
    }
    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-lg);
    }
    .dot {
        width: 8px;
        height: 8px;
    }
    .step-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .step-number {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-base);
    }
    .gallery-thumbs {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .gallery-thumbs .thumbnail {
        flex: 0 0 80px;
    }
    .compare-table,
    .product-table {
        display: block;
        width: 100%;
    }
    .compare-table thead,
    .product-table thead {
        display: none;
    }
    .compare-table tbody,
    .product-table tbody {
        display: block;
    }
    .compare-table tr,
    .product-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 1rem;
        background: var(--bg-page);
    }
    .compare-table td,
    .product-table td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px dashed var(--border-color-light);
        text-align: left;
    }
    .compare-table td:last-child,
    .product-table td:last-child {
        border-bottom: none;
    }
    .compare-table td::before,
    .product-table td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--text-primary);
        margin-right: 1rem;
    }
    .hot-product-card .product-image i {
        font-size: 2.5rem;
    }
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .timeline-year {
        width: auto;
        text-align: left;
        margin-bottom: 0.5rem;
    }
    .timeline-content {
        border-left: none;
        border-top: 3px solid var(--theme-accent-soft);
    }
}
@media (max-width: 550px) {
    .hp-hero-carousel { min-height: 500px; }
    .hp-hero-slide { padding: 1rem 1rem 1.25rem; }
    .hp-hero-content h1 { font-size: 1.4rem; line-height: 1.3; }
    .hp-hero-desc { font-size: 0.875rem; -webkit-line-clamp: 3; line-clamp: 3; }
    .hp-shortcuts-wrap { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    
    .mobile-nav {
        width: 90vw;
    }
    .container { padding: 0 0.75rem; }
    .section-padding { padding: 2rem 0; }
    .section-padding-sm { padding: 1.5rem 0; }
    .section-padding-lg { padding: 3rem 0; }
    .hp-utilbar-logo .logo-img { height: 24px; }
    .page-header h1,
    .article-detail-header h1,
    .solution-detail-header h1,
    .product-detail-header h1 {
        font-size: 1.5rem;
    }
    .hp-hero-carousel { min-height: 360px; height: auto; }
    .hp-hero-content h1 { font-size: 1.35rem; }
    .hp-hero-desc { font-size: 0.875rem; }
    .hp-hero-features div { font-size: 12px; gap: 0.25rem; }
    .hp-shortcuts-wrap { grid-template-columns: repeat(2, 1fr); }
    .hp-shortcut-name { font-size: var(--font-size-xs); }
    .company-metrics { grid-template-columns: 1fr; gap: 0.5rem; }
    .company-metrics .metric-item { padding: 0.75rem; }
    .products-list-grid,
    .hot-products-grid,
    .products-feature-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .product-info { padding: 1rem; }
    .card-product,
    .hot-product-card {
        max-width: 440px;
        margin: 0 auto;
    }
    .intro-stats { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 2rem; }
    .btn { padding: 0.75rem 1.25rem; font-size: 0.875rem; }
    .btn-large { padding: calc(0.75rem + 2px) calc(1.5rem + 4px); font-size: 0.95rem; }
    .btn-small { padding: 0.25rem 1rem; font-size: 0.75rem; }
    .card {
        --card-padding-x: 1rem;
        --card-padding-y: 1rem;
    }
    .product-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .gallery-badge {
        font-size: 8px;
        padding: 1px 6px;
        top: 0.25rem;
        right: 0.25rem;
    }
    .gallery-tag {
        font-size: 9px;
        padding: 0.5rem;
    }
    .transformer-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }
    .transformer-main .gallery-item,
    .transformer-side .gallery-item {
        min-height: 100px;
    }
    .topic-anchor-nav {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    .topic-anchor-nav .anchor-link {
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.5rem;
    }
    .topic-anchor-nav .anchor-label {
        font-size: var(--font-size-xs);
        width: 100%;
        text-align: center;
        margin-bottom: 0.25rem;
    }
}
@media (max-width: 320px) {
    .container { padding: 0 0.5rem; }
    .hp-hero-content h1 { font-size: 1.25rem; }
    .hp-hero-desc { font-size: 0.75rem; }
    .btn { min-height: 40px; }
}
@media (min-width: 1025px) {
    .mobile-menu-btn { display: none; }
    .mobile-nav { display: none; }
    .mobile-sticky-cta { display: none; }
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}

@media (hover: none) {
    .card:hover {
        transform: none;
    }
    .card:active {
        transform: scale(0.98);
    }
}

@media (max-width: 768px) {
    
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    
    a, button, .btn {
        /* min-height: 44px; */
    }
    
    
    input, select, textarea {
        font-size: 16px; 
    }
    
    
    .animate-on-scroll {
        transition: none;
    }
    
    
    .bg-deep .cta-input,
    .bg-primary .cta-input {
        background: rgba(255,255,255,0.10);
        color: var(--bg-page);
        border-color: rgba(255,255,255,0.30);
    }
    
    .bg-deep .cta-input::placeholder,
    .bg-primary .cta-input::placeholder {
        color: var(--text-inverse-muted);
    }
}

@media (max-width: 480px) {
    
    h1, h2, h3 {
        word-break: break-word;
        hyphens: auto;
    }
    
    
    .card {
        --card-padding-x: 0.75rem;
        --card-padding-y: 0.75rem;
    }
    
    
    .section-padding {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    
    .grid-2, .grid-3, .grid-4 {
        gap: 0.75rem;
    }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-sticky-cta {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    footer {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}

.hp-hero-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.hp-hero-features {
    overflow: hidden;
    word-break: break-word;
}
html, body {
    overflow-x: hidden;
}
@media (min-width: 768px) {
    .sm\:flex-row {
        flex-direction: row;
    }
    .order-md-2 {
        order: 2;
    }
}
@media (max-width: 768px) {
    .case-card .case-content { padding: 1.5rem; }
    .article-card { padding: 1.5rem; }
    .industry-card { padding: 1.5rem; }
    .mobile-dropdown-content {
        padding-left: 1.25rem;
        border-left: 2px solid var(--theme-accent-soft);
    }
    .mobile-nav-link {
        padding: 0.75rem 1rem;
        font-size: var(--font-size-base);
    }
    .mobile-dropdown-content a {
        padding: 0.75rem 1rem 0.75rem 1.5rem;
        font-size: var(--font-size-sm);
    }
}
@media (max-width: 480px) {
    .hero h1 {
        font-size: var(--font-size-3xl);
    }
    .cta-content {
        padding: 2rem 1rem;
    }
    .product-tags .tag {
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.5rem;
    }
    .pagination-btn {
        min-width: 38px;
        height: 38px;
    }
}
@media (max-width: 768px) {
    .grid-4, .profile-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--spacing-md);
    }
    .hero .container {
        gap: 1rem;
    }
    .hero-content { 
        padding: 1rem; 
    }
}
@media (max-width: 900px) {
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        justify-content: center;
    }
    .footer-qr-section .qr-dual.qr-triple .qr-item {
        width: auto;
        max-width: none;
    }
}
@media (max-width: 768px) {
    .footer-grid-redefined {
        gap: 1rem;
    }
    .brand-extras {
        justify-content: center;
    }
    .footer-service-links {
        justify-content: center;
    }
}
@media (max-width: 640px) {
    .footer-qr-section > .flex {
        flex-direction: column;
        gap: 1.5rem;
    }
.flex-wrap.items-start.justify-between.gap-4 {

    grid-template-columns: repeat(1, 1fr);
}
    
    .qr-text-section {
        max-width: 100%;
        text-align: center;
    }
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-width: 420px;
        margin: 0 auto;
    }
}
@media (max-width: 550px) {
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: repeat(2, 1fr);
        justify-items: stretch;
        gap: 0.75rem;
        max-width: 420px;
        margin: 0 auto;
    }
    .footer-qr-section .qr-dual.qr-triple .qr-item {
        width: 100%;
        max-width: none;
    }
    .qr-code-placeholder {
        max-width: 160px !important;
    }
    .cert-badges {
        gap: 0.5rem;
    }
    .cert-badges li {
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.5rem;
    }
}
@media (max-width: 420px) {
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: 1fr;
        max-width: 280px;
    }
    .qr-code-placeholder {
        max-width: 200px !important;
        padding: 12px !important;
    }
}
@media (max-width: 768px) {
    .grid-3, .grid-4 {
        gap: 1rem;
    }
    .related-links-section .card p {
        font-size: var(--font-size-sm);
    }
    .profile-list li {
        flex-wrap: wrap;
    }
}
@media (max-width: 992px) {
    #sg-main .sg-card-images { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem 1.2rem 0.6rem; }
    #sg-main .sg-card-head { padding: 1rem 1.2rem; }
    #sg-main .sg-card-body { padding: 1rem 1.2rem 1.2rem; }
    #sg-main .sg-card-footer { padding: 0.6rem 1.2rem 1rem; }
    #sg-main .sg-params-grid .param-key { min-width: 75px; }
}
@media (max-width: 768px) {
    #sg-main .sg-header h1 { font-size: 1.8rem; }
    #sg-main .sg-header p { font-size: 1rem; }
    #sg-main .sg-card-head { flex-direction: column; align-items: flex-start; }
    #sg-main .sg-card-head .badge-tag { margin-left: 0; }
    #sg-main .sg-card-images { grid-template-columns: 1fr 1fr; }
    #sg-main .sg-card-images .sg-img-item:last-child { grid-column: span 2; }
    #sg-main .sg-params-grid .param-key { min-width: 65px; }
    #sg-main .sg-quick-nav .container { gap: 0.3rem 0.4rem; }
    #sg-main .sg-quick-nav a { font-size: 0.7rem; padding: 0.15rem 0.6rem; }
    #sg-main .sg-card-footer { flex-direction: column; align-items: stretch; }
    #sg-main .sg-card-footer .link-detail { justify-content: center; }
}
@media (max-width: 480px) {
    #sg-main .sg-header { padding: 2rem 0 1.5rem; }
    #sg-main .sg-header h1 { font-size: 1.5rem; }
    #sg-main .sg-search-hint { font-size: 0.8rem; padding: 0.3rem 0.8rem; }
    #sg-main .sg-card-images { grid-template-columns: 1fr; }
    #sg-main .sg-card-images .sg-img-item:last-child { grid-column: span 1; }
    #sg-main .sg-card-head .model { font-size: 1.1rem; }
    #sg-main .sg-card-head .name { font-size: 0.95rem; }
    #sg-main .container { padding: 0 1rem; }
    #sg-main .sg-params-grid .param-key { min-width: 60px; font-size: 0.82rem; }
    #sg-main .sg-params-grid .param-value { font-size: 0.82rem; }
}
@media print {
    #sg-main .sg-quick-nav { display: none; }
    #sg-main .sg-product-card { break-inside: avoid; page-break-inside: avoid; }
    #sg-main .sg-card-footer .link-detail { background: #333; color: #fff; }
}
@media (max-width: 768px) {
    .article-layout {
        grid-template-columns: 1fr;
    }
    .grid-2, .grid-3, .grid-4, .grid-5 {
        grid-template-columns: 1fr;
    }
    .products-grid {
        grid-template-columns: 1fr;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }
    .solutions-industry-grid {
        grid-template-columns: 1fr;
    }
    .cta-form {
        grid-template-columns: 1fr;
    }
    .search-form {
        flex-direction: column;
    }
    .hp-hero .container {
        grid-template-columns: 1fr;
    }
    .article-title-enhanced {
        font-size: var(--font-size-2xl);
    }
    .article-meta-enhanced {
        gap: 0.5rem;
    }
    .post-navigation-enhanced {
        flex-direction: column;
    }
    .content-card-enhanced {
        padding: 1rem;
    }
    .page-led-floodlight-topic .carousel-slide {
        flex-direction: column;
        padding: 1rem;
    }
    .page-led-floodlight-topic .slide-image {
        aspect-ratio: 4 / 3;
        max-height: 280px;
        width: 100%;
    }
    .page-led-floodlight-topic .slide-image img {
        max-height: 280px;
        object-fit: contain;
    }
    .page-led-floodlight-topic .carousel-btn {
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 16px;
    }
    .page-led-floodlight-topic .carousel-btn:hover {
        background: var(--theme-accent-soft);
    }
    body.mobile-cta-active {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-width: 480px) {
    .page-led-floodlight-topic .slide-image {
        max-height: 220px;
    }
    .page-led-floodlight-topic .slide-image img {
        max-height: 220px;
    }
    .page-led-floodlight-topic .product-table {
        min-width: 400px;
    }
}
@media (max-width: 768px) {
    .product-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .gallery-item {
        padding: 0.5rem;
    }
    .fault-quick-card {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
@media (max-width: 1024px) {
    .hp-hero-carousel {
        min-height: 420px;
        height: auto;
    }
}

/* ===== visual-enhance.css ===== */
.card, .product-card, .solution-item, .hot-product-card {
    border-radius: 0;
    transition: all 0.25s ease;
    padding: 1.5rem;
}

.strength-card{
    padding: 1rem;
    box-shadow:1px 1px 2px #000000;
    border-radius:0.5rem;
}
.culture-card p, .honor-card p,.strength-card p,.strength-card i{
    opacity:0.8;
    color: var(--bg-page);
}
.card:hover, .hot-product-card:hover, .service-item:hover, .solution-item:hover, .product-card:hover {
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4), 0 0 0 1px var(--theme-accent-soft);
    transform: translateY(-4px);
    transition: all 0.3s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--theme-accent-soft);
    box-shadow: 0 0 0 3px var(--theme-accent-10);
    outline: none;
}
input:valid:not(:placeholder-shown) {
    border-color: var(--color-success);
}
input:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger);
}
.codeimg {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.table-responsive {
    position: relative;
}
.table-responsive::after {
    content: "◀ 滑动查看更多 ▶";
    position: absolute;
    bottom: calc(-1 * 1.5rem);
    right: 0;
    font-size: var(--font-size-xs);
    color: var(--theme-accent-soft);
    background: var(--theme-dark);
    padding: 0 0.25rem 0.5rem;
    border-radius: 9999px;
    opacity: 0;
    transition: opacity all 0.12s ease-out;
    pointer-events: none;
}
.table-responsive:hover::after {
    opacity: 0.8;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
    border-radius: 2px;
}
.reading-progress {
    background: linear-gradient(90deg, var(--theme-accent-soft), var(--theme-accent-soft));
    box-shadow: 0 0 6px var(--theme-accent-30);
}
.footer-contact-info li i, .contact-item i, .profile-list li i {
    vertical-align: middle;
    line-height: 1.2;
}
.filter-link.active {
    background: var(--theme-accent-soft);
    color: var(--bg-dark);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.tab-pane.active {
    animation: fadeSlideUp 0.4s ease-out;
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.company-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#about .company-metrics .metric-item {
    background: var(--theme-accent-soft);
    border: 1px solid var(--border-color-light);
    
    transition: all 0.2s ease;
    padding: 1rem;
    color: var(--bg-page);
    display: inline-block;
    text-align: center;
}

.company-metrics .metric-item {
    background: var(--theme-dark);
    border: 1px solid var(--border-color-light);
    
    transition: all 0.2s ease;
    padding: 1rem;
    color: var(--bg-page);
    display: inline-block;
    text-align: center;
}
.metric-item:hover {
    transform: scale(1.02);
    background: var(--theme-accent-10);
    border-color: var(--theme-accent-soft);
    color: var(--theme-dark);
    font-weight: 600;
}
body {
    animation: pageFadeIn 0.4s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.image-wrapper{
    position: relative;
}
.image-wrapper div{
    position: absolute;
  left: 0;
  bottom: 0;
    background:#000000;
    color: var(--bg-page);
    padding: 0.5rem;
    opacity:0.8;
}
@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.culture-card .card-icon-wrapper {
    transition: transform 0.3s, background 0.3s;
}
.culture-card:hover .card-icon-wrapper {
    transform: scale(1.05);
}
.download-item {
    border-left: 3px solid transparent;
}
.download-item:hover {
    border-left-color: var(--theme-accent-soft);
    padding-left: calc(1.5rem - 3px);
}
.tab-btn.active::after {
    transition: width 0.2s ease;
}
.page-container, .bg-dark {
    background-image: 
        radial-gradient(circle at 2px 2px, rgba(232, 145, 58, 0.03) 1px, transparent 0),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.01) 1px, transparent 0);
    background-size: 40px 40px, 20px 20px;
}
.page-container::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 0%, rgba(232, 145, 58, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--theme-dark) 25%,
        rgba(232, 145, 58, 0.15) 50%,
        var(--theme-dark) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}
.skeleton-text.short {
    width: 60%;
}
.skeleton-text.medium {
    width: 80%;
}
.skeleton-image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(90deg,
        var(--bg-section-light) 0%,
        #E9EEF4 50%,
        var(--bg-section-light) 100%);
    background-size: 200% 100%;
    height: 120px;
    border-radius: 8px;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--theme-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--theme-accent-30);
    border-radius: 4px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 145, 58, 0.50);
}
::-webkit-scrollbar-thumb:active {
    background: var(--theme-accent-soft);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent-30) var(--theme-dark);
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.90);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 2px solid var(--theme-accent-soft);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--theme-accent-soft);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.lightbox-close:hover {
    background: var(--theme-accent-soft);
    color: var(--theme-dark);
    transform: scale(1.1);
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 2px solid var(--theme-accent-soft);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--theme-accent-soft);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.lightbox-nav:hover {
    background: var(--theme-accent-soft);
    color: var(--theme-dark);
}
.lightbox-nav.prev {
    left: 20px;
}
.lightbox-nav.next {
    right: 20px;
}
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}
.counter-animate {
    display: inline-block;
    animation: countUp 1s ease-out forwards;
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.img-lazy {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.img-lazy.loaded {
    opacity: 1;
}
.checkbox-label input,
.radio-label input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--theme-accent-soft);
    background: var(--theme-dark);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}
.checkbox-label input:hover,
.radio-label input[type="radio"]:hover {
    border-color: var(--theme-accent-soft);   
    box-shadow: 0 0 0 2px var(--theme-accent-30);
}
.checkbox-label input:checked,
.radio-label input[type="radio"]:checked {
    background: var(--theme-accent-soft);
    border-color: var(--theme-accent-soft);
}
.checkbox-label input:checked::after {
    content: "✓";
    color: var(--bg-dark);   
    position: absolute;
    top: -2px;
    left: 3px;
    font-size: var(--font-size-xs);
    font-weight: bold;
}
.radio-label input[type="radio"] {
    border-radius: 50%;
}
.radio-label input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 50%;
}
.tag {
    font-size: var(--font-size-sm);
    padding: 0.25rem 0.75rem;
}
.cert-item img {
    aspect-ratio: 3/2;
    object-fit: cover;
}
.table-responsive {
    margin: 1rem 0;
    border-radius: var(--radius-sm);
    background: var(--theme-dark);
    overflow: hidden;
}
.form-error {
    color: var(--error-color);
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-danger);
    border-radius: var(--radius-sm);
}
.form-success {
    color: var(--success-color);
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-success);
    border-radius: var(--radius-sm);
}
.form-error-message {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: 4px;
    display: none;
}
.form-error-message.visible {
    display: block;
}
input.input-error,
select.input-error,
textarea.input-error {
    border-color: var(--color-danger);
}
.mobile-nav {
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.mobile-dropdown-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}
.download-item .file-size {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}
.download-item .file-size:empty::before {
    content: "--";
}
footer {
    padding: 2rem 0 1rem;
}
.footer-grid-redefined {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ============ 二维码视觉增强（仅视觉效果，结构属性见 sections.css） ============ */
.footer-qr-section .qr-dual.qr-triple .qr-item {
    background: linear-gradient(145deg, rgba(47,62,78,0.4), rgba(30,42,54,0.2));
    backdrop-filter: blur(2px);
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.footer-qr-section .qr-dual.qr-triple .qr-item:hover {
    border-color: var(--theme-accent-soft);
    background: var(--theme-accent-10);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
.qr-code-placeholder {
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qr-code-placeholder:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 10px var(--theme-accent-30);
}
.qr-label {
    font-weight: var(--font-weight-semibold);   
    background: linear-gradient(135deg, var(--bg-page), var(--theme-accent-soft));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.qr-footer-hint {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
}
.qr-footer-hint span i {
    margin-right: 0.25rem;
    color: var(--theme-accent-soft);
}
.brand-extras {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.25rem;
}
.brand-extras span {
    background: var(--theme-accent-10);
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
    color: var(--theme-accent-soft);
    border: 1px solid var(--theme-accent-30);
}
.footer-contact-info ul li {
    margin-bottom: 0.5rem;
}
.footer-contact-info ul li i {
    background: var(--theme-accent-30);   
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    margin-right: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: var(--font-size-sm);
    color: var(--theme-accent-soft);
    border-radius: 4px;
}
.footer-contact-info ul li:hover i {
    background: var(--theme-accent-soft);
    color: var(--bg-dark);
}
.footer-service-links {
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.footer-service-links .service-link {
    background: var(--theme-accent-10);
    padding: 0.25rem 0.75rem;
    font-weight: var(--font-weight-medium);   
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    color: var(--theme-accent-soft);
    border-radius: 4px;
}
.footer-service-links .service-link:hover {
    background: var(--theme-accent-soft);
    color: var(--bg-dark);
}
.cert-badges {
    padding: 0.75rem 0;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    list-style: none;
    background: rgba(0,0,0,0.20);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}
.cert-badges li {
    background: rgba(30,42,54,0.70);
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.footer-bottom {
    padding-top: 0.75rem;
    padding-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.30);
    flex-wrap: wrap;
}
.copyright p {
    font-size: var(--font-size-xs);
}
.footer-links-horizontal {
    gap: 1rem;
}
.footer-links-horizontal a {
    font-size: var(--font-size-xs);
}
.hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.4);
    border-color: var(--theme-accent-soft);
}
.related-item-card {
    background: var(--theme-dark);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}
.related-item-card:hover {
    border-color: var(--theme-accent-soft);
    background: var(--theme-accent-10);
}
.profile-list li:hover {
    background: var(--theme-accent-10);
    padding-left: 0.5rem;
}
.hp-hero-content h1 .dark{color:var(--bg-dark);}
#contact label{color: var(--bg-page)}
#contact .grid-2.gap-4>div{
     background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
}
.contact-item{background:var(--theme-dark);padding: 1rem;}
img[title="点击刷新"]{margin: 0.5rem 0}
#contact .grid-2.gap-4 i{ color:var(--theme-accent-soft)}
#contact .card.p-4.map-card,#contact .grid-2.gap-4>div{ background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%); }    
.container {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

#sg-main .sg-page-header {
    background: linear-gradient(135deg, var(--theme-dark) 0%, var(--theme-dark) 100%);
    padding: 3rem 0 2.5rem;
    color: var(--bg-page);
    text-align: center;
    border-bottom: 4px solid var(--theme-accent-soft);
}
#sg-main .sg-page-header h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 0.5rem; }
#sg-main .sg-page-header h1 i { color: var(--theme-accent-soft); margin-right: 0.6rem; }
#sg-main .sg-page-header p { font-size: 1.1rem; opacity: 0.85; max-width: 720px; margin: 0 auto; }
#sg-main .sg-search-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-top: 1rem;
    backdrop-filter: blur(4px);
}
#sg-main .sg-search-hint kbd { background: rgba(255,255,255,0.20); padding: 0.1rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.25); }
#sg-main .sg-search-hint i { color: var(--theme-accent-soft); }

#sg-main .sg-quick-nav {
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-color);
    padding: 0.7rem 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
#sg-main .sg-quick-nav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}
#sg-main .sg-quick-nav .nav-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.3rem;
}
#sg-main .sg-quick-nav .nav-label i { color: var(--theme-accent-soft); margin-right: 0.3rem; }
#sg-main .sg-quick-nav a {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-section-light);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.2s;
    text-decoration: none;
}
#sg-main .sg-quick-nav a:hover {
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    border-color: var(--theme-accent-soft);
    transform: translateY(-1px);
}
#sg-main .sg-quick-nav a .model-badge { font-weight: 700; color: var(--theme-accent-soft); }
#sg-main .sg-quick-nav a:hover .model-badge { color: var(--bg-page); }

#sg-main .sg-catalog { padding: 2.5rem 0 3.5rem; }
#sg-main .sg-catalog .catalog-stats {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.8rem;
}
#sg-main .sg-catalog .catalog-stats strong { color: var(--theme-dark); font-weight: 700; }
#sg-main .sg-catalog .catalog-stats kbd { background: var(--border-color); padding: 0 6px; border-radius: 4px; font-size: 0.8rem; }

#sg-main .sg-product-card {
    background: var(--bg-page);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    scroll-margin-top: 80px;
}
#sg-main .sg-product-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.10);
    transform: translateY(-3px);
}

#sg-main .sg-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    padding: 1.2rem 1.8rem;
    background: var(--theme-dark);
    color: var(--bg-page);
    border-bottom: 3px solid var(--theme-accent-soft);
}
#sg-main .sg-card-head .model { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.5px; }
#sg-main .sg-card-head .model small { font-weight: 400; font-size: 0.9rem; opacity: 0.7; margin-left: 0.4rem; }
#sg-main .sg-card-head .name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-accent-soft);
    background: rgba(232,145,58,0.15);
    padding: 0.2rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(232,145,58,0.25);
}
#sg-main .sg-card-head .badge-tag {
    margin-left: auto;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.10);
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.08);
}

#sg-main .sg-card-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    padding: 1.2rem 1.8rem 0.8rem;
    background: var(--bg-section-light);
    border-bottom: 1px solid var(--border-color);
}
#sg-main .sg-img-item {
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 0.6rem 0.2rem;
    transition: box-shadow 0.2s;
}
#sg-main .sg-img-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
#sg-main .sg-img-item .img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg-section-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-direction: column;
    gap: 4px;
}
#sg-main .sg-img-item .img-placeholder i { font-size: 2rem; color: var(--theme-accent-soft); opacity: 0.6; }
#sg-main .sg-img-item .img-label { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-top: 4px; }

#sg-main .sg-card-body { padding: 1.2rem 1.8rem 1.5rem; }
#sg-main .sg-card-body .section { margin-bottom: 1rem; }
#sg-main .sg-card-body .section:last-child { margin-bottom: 0; }
#sg-main .sg-card-body .section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
#sg-main .sg-card-body .section-title i { color: var(--theme-accent-soft); }
#sg-main .sg-card-body .section-content {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding-left: 0.2rem;
}
#sg-main .sg-card-body .section-content ul {
    margin: 0.2rem 0 0 1.2rem;
    padding: 0;
    list-style: none;
}
#sg-main .sg-card-body .section-content ul li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.15rem;
}
#sg-main .sg-card-body .section-content ul li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--theme-accent-soft);
    font-weight: 700;
}

#sg-main .sg-params-grid {
    display: flex;
    flex-direction: column;
    gap: 0.1rem 0;
    background: var(--bg-section-light);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
#sg-main .sg-params-grid .param-item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.88rem;
    padding: 0.2rem 0;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
}
#sg-main .sg-params-grid .param-item:last-child { border-bottom: none; }
#sg-main .sg-params-grid .param-key {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 90px;
}
#sg-main .sg-params-grid .param-value {
    color: var(--text-secondary);
    word-break: break-word;
    flex: 1;
}

#sg-main .sg-card-footer {
    padding: 0.8rem 1.8rem 1.2rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-section-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}
#sg-main .sg-card-footer .link-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.4rem;
    background: var(--theme-dark);
    color: var(--bg-page);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}
#sg-main .sg-card-footer .link-detail:hover {
    background: var(--theme-accent-soft);
    transform: translateX(4px);
}
#sg-main .sg-card-footer .product-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
#sg-main .sg-card-footer .product-meta i { color: var(--theme-accent-soft); margin-right: 0.2rem; }

#sg-main .sg-anchor-offset {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
    height: 0;
}
.hp-hero-sidebar-list{background:var(--theme-dark)}
.hp-hero-sidebar-list a span:hover{color:var(--sg-accent)}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--theme-dark);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.3s;
}
.skip-link:focus {
    top: 0;
}

/* Mobile Touch Optimization */
@media (max-width: 768px) {
    button, a, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    .btn {
        padding: 12px 20px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--theme-accent-soft);
    outline-offset: 2px;
}

/* ===== About page - intro image responsive ===== */
@media (max-width: 1024px) {
    .intro-image {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .intro-image .image-wrapper {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .intro-image .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
@media (max-width: 480px) {
    .intro-image {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

/* ===== 视觉设计修复方案 - 新增样式 ===== */

/* H5 - 滚动收缩过渡动画 */
header {
    transition: box-shadow 0.3s ease;
}
.hp-mainnav {
    transition: padding 0.3s ease, height 0.3s ease;
}
header.scrolled .hp-mainnav {
    padding: 0.25rem 0;
}
header.scrolled .hp-utilbar {
    padding: 0.5rem 0;
    transition: padding 0.3s ease;
}
header.scrolled .company-tagline {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-width 0.3s ease;
    display: inline-block;
}

/* F4 - 品牌标签对比度修复 */
.brand-extras span {
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    border: 1px solid var(--theme-accent-30);
    transition: background 0.2s, color 0.2s;
}
html.dark .brand-extras span,
@media (prefers-color-scheme: dark) {
    .brand-extras span {
        background: rgba(255,255,255,0.10);
        color: var(--text-inverse-muted);
        border-color: rgba(255,255,255,0.15);
    }
}

/* F1 - 认证徽章滚动提示 */
.cert-badges-wrapper {
    position: relative;
    overflow: hidden;
}
.cert-badges-scroll-hint {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to left, var(--bg-dark), transparent);
    padding: 0.5rem 1.5rem 0.5rem 3rem;
    color: var(--text-inverse-muted);
    font-size: var(--font-size-xs);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cert-badges-wrapper.is-overflowing .cert-badges-scroll-hint {
    opacity: 1;
}
@media (max-width: 768px) {
    .cert-badges {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0;
        gap: 0.5rem;
        scrollbar-width: none;
    }
    .cert-badges::-webkit-scrollbar { display: none; }
}

/* F2 - 二维码区域移动端优化 */
@media (max-width: 640px) {
    .footer-qr-section > .flex {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .qr-text-section {
        max-width: 100%;
        text-align: center;
        padding: 0 0.5rem;
    }
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        max-width: 360px;
        width: 100%;
        margin: 0 auto;
    }
    .qr-item {
        padding: 0.75rem;
    }
    .qr-code-placeholder {
        max-width: 140px !important;
        margin: 0 auto;
    }
}
@media (max-width: 420px) {
    .footer-qr-section .qr-dual.qr-triple {
        grid-template-columns: 1fr 1fr;
        max-width: 280px;
    }
    .qr-code-placeholder {
        max-width: 110px !important;
    }
}

/* F5 - 版权链接分隔符优化 */
.footer-links-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.footer-links-horizontal a {
    font-size: var(--font-size-xs);
    color: var(--text-inverse-muted);
    position: relative;
}
.footer-links-horizontal a:not(:last-child)::after {
    content: '|';
    margin-left: 0.75rem;
    color: var(--border-dark);
}
@media (max-width: 480px) {
    .footer-links-horizontal {
        gap: 0.25rem 0.5rem;
        justify-content: center;
    }
    .footer-links-horizontal a:not(:last-child)::after {
        margin-left: 0.5rem;
    }
}

/* F6 - 服务链接间距调整 */
.footer-contact-info .contact-info-list {
    margin-bottom: 0.75rem;
}
.footer-service-links {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* I2 - 热销产品卡片高度一致 */
.hot-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.hot-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hot-product-card .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hot-product-card .product-info h3 {
    flex-shrink: 0;
}
.hot-product-card .product-info > p {
    flex: 1;
}
@media (max-width: 1024px) {
    .hot-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .hot-products-grid {
        grid-template-columns: 1fr;
    }
}

/* I3 - 标签页高度跳动修复 */
.tab-content {
    position: relative;
    min-height: 280px;
    transition: min-height 0.35s ease;
}
.tab-pane {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1.5rem;
}
.tab-pane.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* I1 - 轮播暂停状态视觉指示 */
.carousel-toggle.paused {
    background: var(--theme-accent-soft);
    color: var(--bg-dark);
}
.carousel-toggle .fa-pause,
.carousel-toggle .fa-play {
    transition: opacity 0.2s ease;
}
.carousel-toggle.paused .fa-pause { display: none; }
.carousel-toggle.paused .fa-play { display: inline; }
.carousel-toggle .fa-play { display: none; }

/* A2 - 企业文化卡片暗色模式 */
.culture-card .card-icon-wrapper {
    background: var(--theme-accent-10);
    color: var(--theme-accent-soft);
    width: 64px;
    height: 64px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s ease, background 0.3s ease;
}
.culture-card:hover .card-icon-wrapper {
    transform: scale(1.05);
    background: var(--theme-accent-soft);
    color: var(--bg-page);
}
html.dark .culture-card .card-icon-wrapper,
@media (prefers-color-scheme: dark) {
    .culture-card .card-icon-wrapper {
        background: var(--theme-accent-10);
        color: var(--theme-accent-soft);
    }
    .culture-card h4 {
        color: var(--text-inverse) !important;
    }
    .culture-card p {
        color: var(--text-inverse-muted) !important;
    }
}

/* A3 - 资质荣誉网格响应式 */
@media (max-width: 1024px) {
    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 768px) {
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .honor-card {
        padding: 1rem !important;
    }
    .honor-card .honor-icon {
        font-size: 1.5rem;
    }
    .honor-card h3 {
        font-size: var(--font-size-base);
    }
    .honor-card p {
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 480px) {
    .grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* I8 - 暗色模式荣誉卡片对比度 */
html.dark .honor-card p,
@media (prefers-color-scheme: dark) {
    .honor-card p {
        color: var(--text-inverse-muted) !important;
        opacity: 0.85;
    }
    .honor-card h3 {
        color: var(--text-inverse) !important;
    }
}
.honor-card p {
    color: var(--text-secondary);
}

/* A6 - 合作伙伴视觉增强 */
.client-logos-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
}
.client-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 100px;
}
.client-logo-card img {
    max-height: 48px;
    width: auto;
    margin-bottom: 0.5rem;
    filter: grayscale(1) brightness(0.8);
    transition: filter 0.3s ease;
}
.client-logo-card:hover img {
    filter: grayscale(0) brightness(1);
}
.client-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-accent-30);
}
.client-logo-card span {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}
html.dark .client-logo-card img,
@media (prefers-color-scheme: dark) {
    .client-logo-card img {
        filter: grayscale(1) brightness(0.9);
    }
    .client-logo-card:hover img {
        filter: grayscale(0) brightness(1);
    }
}

/* A1 - 时间线移动端响应式 */
@media (max-width: 768px) {
    .timeline-wrapper {
        padding-left: 0;
        position: relative;
    }
    .timeline-line {
        left: 20px;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--theme-accent-soft), var(--theme-accent));
        border-radius: 9999px;
        position: absolute;
    }
    .timeline-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 48px;
        position: relative;
        margin-bottom: 2rem;
    }
    .timeline-dot {
        position: absolute;
        left: 16px;
        top: 6px;
        width: 14px;
        height: 14px;
        background: var(--theme-accent-soft);
        border: 3px solid var(--bg-page);
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--theme-accent-30);
        z-index: 2;
    }
    .timeline-item.current .timeline-dot {
        box-shadow: 0 0 0 6px var(--theme-accent-30);
        animation: pulse-dot 2s ease-in-out infinite;
    }
    .timeline-year {
        width: auto;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        color: var(--theme-accent-soft);
        text-align: left;
        margin-bottom: 0.25rem;
        background: var(--theme-accent-10);
        padding: 0.1rem 0.75rem;
        border-radius: 4px;
        display: inline-block;
    }
    .timeline-content {
        flex: 1;
        width: 100%;
        background: var(--bg-section-light);
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid var(--theme-accent-soft);
        margin-top: 0.25rem;
    }
    html.dark .timeline-content,
    @media (prefers-color-scheme: dark) {
        .timeline-content {
            background: var(--bg-dark-card);
            border-left-color: var(--theme-accent);
        }
        .timeline-year {
            background: var(--theme-accent-10);
            color: var(--theme-accent-soft);
        }
    }
}

/* C2 - 百度地图移动端适配 */
#baiduMap {
    width: 100%;
    min-height: 400px;
    height: 60vh;
    max-height: 600px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-section-light);
}
.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--text-secondary);
    padding: 2rem;
    text-align: center;
}
.map-placeholder i {
    font-size: 3rem;
    color: var(--theme-accent-30);
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    #baiduMap {
        min-height: 280px;
        height: 40vh;
        max-height: 400px;
    }
    .map-placeholder {
        min-height: 220px;
    }
}
@media (max-width: 480px) {
    #baiduMap {
        min-height: 200px;
        height: 35vh;
        max-height: 320px;
    }
}

/* C3 - 验证码刷新反馈 */
.captcha-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.captcha-input-wrap .form-control {
    flex: 1;
    min-width: 0;
}
.captcha-image-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.captcha-image-wrap .codeimg {
    height: 40px;
    width: auto;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border-color);
}
.captcha-refresh {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    font-size: 1rem;
}
.captcha-refresh:hover {
    color: var(--theme-accent-soft);
    transform: rotate(90deg);
}
.captcha-feedback {
    font-size: var(--font-size-xs);
    min-height: 1.2rem;
    color: var(--text-muted);
}

/* C4 - 联系信息卡片移动端对齐 */
@media (max-width: 768px) {
    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color-light);
    }
    .contact-item:last-child {
        border-bottom: none;
    }
    .contact-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-accent-10);
        border-radius: 50%;
        color: var(--theme-accent-soft);
        margin-top: 2px;
    }
    .contact-text {
        flex: 1;
        min-width: 0;
    }
    .contact-text h4 {
        font-size: var(--font-size-sm);
        margin-bottom: 1px;
    }
    .contact-text p {
        font-size: var(--font-size-sm);
        margin-bottom: 0;
        word-break: break-word;
    }
    .contact-text .text-sm {
        font-size: var(--font-size-xs);
    }
}

/* C5 - 表单提交成功提示 */
.form-success-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-success);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    color: var(--color-success);
}
.form-success-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.form-success-banner h4 {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-success);
}
.form-success-banner p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.form-success-banner .close-banner {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.25rem;
}

/* H4 - 分类面板移动端优化 */
@media (max-width: 1024px) {
    .hp-category-panel {
        position: fixed;
        top: 136px;
        left: 0;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border: none;
        border-top: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        z-index: calc(100 + 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        transform: none;
    }
    .hp-category-panel.open {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================================
   解决方案与服务系列页面 - 视觉设计修复方案2 CSS
   ============================================================ */

/* S2 - 行业方案网格布局统一 */
.solutions-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1024px) {
    .solutions-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .solutions-industry-grid {
        grid-template-columns: 1fr;
    }
}

/* S3 - Hero按钮移动端宽度修复 */
@media (max-width: 768px) {
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* L1 - 搜索表单移动端优化 */
@media (max-width: 768px) {
    .search-box {
        flex-direction: column;
        gap: 0.75rem;
    }
    .search-box .search-input {
        width: 100%;
    }
    .search-box .form-select {
        width: 100%;
        min-width: unset;
    }
    .search-box .btn {
        width: 100%;
        justify-content: center;
    }
}

/* L2 - 统计卡片移动端优化 */
@media (max-width: 768px) {
    .stats-section .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .stat-item {
        padding: 0.5rem;
    }
    .stat-number {
        font-size: var(--font-size-2xl);
    }
}

/* L4 - 分页组件样式统一 */
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 2px;
}
.pagination a:hover {
    border-color: var(--theme-accent-soft);
    color: var(--theme-accent-soft);
}
.pagination .current {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--bg-page);
}

/* D3 - 支持链接悬停样式 */
.support-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px dashed var(--border-color-light);
}
.support-link:hover {
    color: var(--theme-accent-soft);
    padding-left: 0.5rem;
}
.support-link .link-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}
.support-link:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* D5 - 相关网格响应式优化 */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}
.related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.related-card .p-4 {
    flex: 1;
}

/* D6 - 配套资源网格平板保持2列 */
@media (min-width: 768px) and (max-width: 1024px) {
    .support-section .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* D7 - Conclusion Box使用CSS变量 */
.conclusion-box {
    background: var(--theme-accent-10);
    border-left: 3px solid var(--theme-accent);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* V2 - 文章链接点击区域优化 */
.article-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    min-width: 44px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--theme-accent-soft);
    transition: all 0.2s ease;
}
@media (max-width: 768px) {
    .article-link {
        padding: 0.75rem 1rem;
        width: 100%;
        text-align: center;
    }
}

/* V5 - 核心服务卡片悬停增强 */
.services-card {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.services-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--theme-accent-30);
}
.services-card .service-icon {
    transition: transform 0.35s ease, color 0.35s ease;
}
.services-card:hover .service-icon {
    transform: scale(1.12);
    color: var(--theme-accent);
}

/* A1 - 专家统计边框暗色模式适配 */
.expert-stats {
    border-top: 1px solid var(--border-color-light);
    border-bottom: 1px solid var(--border-color-light);
}
html.dark .expert-stats,
@media (prefers-color-scheme: dark) {
    .expert-stats {
        border-top-color: var(--border-dark);
        border-bottom-color: var(--border-dark);
    }
    .expert-stats .stat-label {
        color: var(--text-inverse-muted);
    }
}

/* A2 - 推荐产品网格响应式优化 */
@media (max-width: 768px) {
    .products-section .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .product-card {
        padding: 0.75rem;
    }
}
@media (max-width: 480px) {
    .products-section .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* A4 - 专家按钮移动端宽度 */
@media (max-width: 480px) {
    .expert-contact .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* A7 - CTA特性网格移动端对齐 */
@media (max-width: 480px) {
    .cta-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .cta-features .feature-item {
        text-align: center;
        padding: 0.5rem;
    }
    .cta-features .feature-item i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
        display: block;
    }
}

/* ============================================================
   产品详情系列页面 - 视觉设计修复方案3 CSS
   ============================================================ */

/* PL3 - 分类卡片标题颜色修复 */
.category-desc .category-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}
.bg-primary .category-desc .category-title,
.bg-deep .category-desc .category-title,
.bg-dark .category-desc .category-title {
    color: var(--text-inverse);
}

/* PL1 - 分类图片容器移动端适配 */
@media (max-width: 768px) {
    .category-image {
        max-width: 100px;
        width: 100%;
        aspect-ratio: 1 / 1;
        align-self: center;
        flex-shrink: 0;
    }
    .category-media-row {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .category-specs {
        flex: 1;
        min-width: 0;
    }
    .spec-item {
        min-width: calc(50% - 0.5rem);
        padding: 0.5rem;
    }
}
@media (max-width: 480px) {
    .category-image {
        max-width: 80px;
    }
    .category-media-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .spec-item {
        min-width: 100%;
    }
}

/* PL2 - 规格参数文字溢出修复 */
.spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
    padding: 0.75rem 1rem;
    background: var(--bg-section-light);
    border-radius: 4px;
    word-break: break-word;
}
.spec-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    word-break: break-word;
    max-width: 100%;
}

/* PL4 - 触摸设备悬停反馈 */
@media (hover: none) {
    .category-section:active {
        transform: scale(0.98);
        border-color: var(--theme-accent-soft);
        transition-duration: 0.05s;
    }
    .category-section:hover {
        transform: none;
        box-shadow: none;
    }
}

/* PL5 - 优势卡片响应式优化 */
@media (max-width: 768px) {
    .why-choose-section .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 480px) {
    .why-choose-section .grid-4 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* PL7 - CTA卡片最大宽度约束 */
#consult .cta-content {
    max-width: 820px;
    margin: 0 auto;
}

/* LD3 - 统计卡片移动端优化 */
.product-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .product-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .stat-card {
        padding: 0.75rem;
    }
    .stat-card h4 {
        font-size: var(--font-size-sm);
    }
    .stat-card p {
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 480px) {
    .product-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

/* LD4 - 相关产品推荐响应式 */
@media (max-width: 768px) {
    .related-products-section .grid-4,
    .products-section .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .product-card {
        padding: 0.75rem;
    }
}
@media (max-width: 480px) {
    .related-products-section .grid-4,
    .products-section .grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .product-card .product-image {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    .product-card .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* LD6 - 表格滚动提示增强 */
.table-scroll-hint {
    display: none;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: 0.5rem 0;
}
.table-responsive.is-overflowing .table-scroll-hint {
    display: block;
}
.table-responsive {
    position: relative;
}

/* B1 - 折叠面板过渡动画 */
.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    padding: 0 1rem;
}
.collapse-content.show,
.collapse-item.active .collapse-content {
    max-height: 800px;
    opacity: 1;
    padding: 1rem;
}

/* B2 - 规格卡片文字颜色修复 */
.spec-card {
    background: var(--bg-dark);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--text-inverse);
}
.spec-card .text-white {
    color: var(--text-inverse) !important;
}
.spec-card .text-gray {
    color: var(--text-inverse-muted);
}
.spec-card i {
    color: var(--theme-accent-soft);
}

/* B4 - 相关产品卡片移动端修复 */
@media (max-width: 768px) {
    .product-card .product-info h4 {
        font-size: var(--font-size-sm);
        min-height: 2.5rem;
    }
}

/* B5 - 技术参数表格暗色模式 */
.product-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-dark);
    color: var(--text-secondary);
}
.product-table th {
    background: rgba(255,255,255,0.08);
    color: var(--text-inverse);
    padding: 0.75rem;
    text-align: left;
}
.product-table td {
    color: var(--text-inverse-muted);
    border-top: 1px solid var(--border-dark);
    padding: 0.75rem;
}
@media (prefers-color-scheme: light) {
    .product-table {
        border: 1px solid var(--border-color);
    }
    .product-table td {
        color: var(--text-secondary);
        border-top: 1px solid var(--border-color-light);
    }
}

/* SF1 - 统计卡片样式统一 */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--theme-accent-30);
}
.stat-card i {
    font-size: 1.5rem;
    color: var(--theme-accent-soft);
    margin-bottom: 0.5rem;
    display: block;
}
.stat-card h4 {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.stat-card p {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin: 0;
}
html.dark .stat-card,
@media (prefers-color-scheme: dark) {
    .stat-card {
        background: var(--bg-dark-card);
        border-color: var(--border-dark);
    }
    .stat-card h4 {
        color: var(--text-inverse);
    }
}

/* SF4 - 非标定制卡片协调 */
.customize-section .card {
    background: var(--bg-dark);
    border: 1px solid var(--border-dark);
    color: var(--text-inverse);
}
.customize-section .card .text-white {
    color: var(--text-inverse);
}
.customize-section .card .text-gray {
    color: var(--text-inverse-muted);
}

/* PA1 - 参数网格移动端对齐 */
.product-params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}
.param-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--border-color-light);
}
.param-label {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 80px;
    font-size: var(--font-size-sm);
}
.param-value {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    word-break: break-word;
}
@media (max-width: 768px) {
    .product-params-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .param-item {
        flex-wrap: wrap;
        padding: 0.5rem 0;
    }
    .param-label {
        min-width: 70px;
        font-size: var(--font-size-xs);
    }
}

/* PA2 - 标签颜色语义统一 */
.tag-danger {
    background: rgba(220,53,69,0.1);
    color: #dc3545;
    border-color: rgba(220,53,69,0.2);
}
.tag-primary {
    background: rgba(204,122,40,0.1);
    color: var(--theme-accent);
    border-color: rgba(204,122,40,0.15);
}
.tag-accent {
    background: rgba(232,145,58,0.12);
    color: var(--theme-accent);
    border-color: rgba(232,145,58,0.2);
}
.tag-success {
    background: rgba(40,167,69,0.1);
    color: #28a745;
    border-color: rgba(40,167,69,0.2);
}

/* PA4 - 相关配件网格响应式 */
@media (max-width: 768px) {
    .related-products .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .related-products .product-card {
        padding: 0.75rem;
    }
    .related-products .product-card img {
        max-height: 80px;
        object-fit: contain;
    }
}
@media (max-width: 480px) {
    .related-products .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* GP1 - 缩略图边框 */
.thumbnail {
    border: 2px solid var(--border-color-light);
    background: var(--bg-surface);
    transition: border-color 0.2s ease;
}
.thumbnail.active {
    border-color: var(--theme-accent-soft);
}

/* ============================================================
   产品专题与营销页面 - 视觉设计修复方案4 CSS
   ============================================================ */

/* E1 - 错误代码视觉层次优化 */
.error-code {
    font-size: 5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-primary);
}
.error-code span {
    color: var(--theme-accent);
}
.error-code i {
    color: var(--theme-accent-soft);
    font-size: 3rem;
    opacity: 0.6;
}
@media (max-width: 480px) {
    .error-code {
        font-size: 3.5rem;
    }
    .error-code i {
        font-size: 2rem;
    }
}

/* E4 - CTA按钮主次区分 */
.error-actions .btn-accent {
    min-width: 160px;
}
.error-actions .btn-outline {
    min-width: 140px;
}
@media (max-width: 480px) {
    .error-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* S3 - 分页组件移动端优化 */
@media (max-width: 480px) {
    .pagination {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination a,
    .pagination span {
        min-width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
        padding: 0 0.5rem;
    }
}

/* P2 - 内容区域样式保护 */
.content-card .article-body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}
.content-card .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.content-card .article-body table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.content-card .article-body iframe {
    max-width: 100%;
}

/* T5 - 暗色模式背景适配 */
.bg-secondary {
    background: var(--bg-section-light);
}
@media (prefers-color-scheme: dark) {
    .bg-secondary {
        background: var(--bg-dark-card);
    }
    .bg-secondary .text-gray {
        color: var(--text-inverse-muted);
    }
    .bg-secondary .text-white {
        color: var(--text-inverse);
    }
}

/* J1 - 服务流程移动端优化 */
@media (max-width: 768px) {
    .process-steps.grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .process-step {
        padding: 0.75rem;
    }
    .process-step .step-number {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }
}
@media (max-width: 480px) {
    .process-steps.grid-6 {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* T3 - Hero区域gap移动端适配 */
@media (max-width: 768px) {
    .section-padding-lg .grid-2.gap-8 {
        gap: 2rem;
    }
}

/* J3 - 服务承诺卡片图标移动端适配 */
@media (max-width: 768px) {
    .grid-3 .card .fa-3x {
        font-size: 2rem !important;
    }
}

/* ============================================================
   产品核心系列页面 - 视觉设计修复方案5 CSS
   ============================================================ */

/* F3/T3/Z6 - 缺失组件类定义 */
.check-mark {
    color: var(--color-success, #28a745);
    font-weight: 600;
}
.flex-grow {
    flex-grow: 1;
}
.text-leading-2 {
    line-height: 2;
}

/* F4 - badge-accent-dark 定义 */
.badge-accent-dark {
    background: var(--theme-accent);
    color: var(--bg-page);
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    display: inline-block;
}

/* F5/S2 - 深色背景文字对比度修复 */
.bg-primary .text-white-80 {
    color: rgba(255,255,255,0.85) !important;
}
.bg-primary .text-white-60 {
    color: rgba(255,255,255,0.65) !important;
}
.bg-primary .text-muted {
    color: rgba(255,255,255,0.55) !important;
}
.bg-primary .accent-text,
.bg-deep .accent-text,
.bg-dark .accent-text {
    color: var(--theme-accent-soft);
    text-shadow: 0 0 8px rgba(232,145,58,0.2);
}
.bg-primary .product-table td,
.bg-deep .product-table td {
    color: var(--text-inverse-muted);
}
.bg-primary .product-table th,
.bg-deep .product-table th {
    color: var(--text-inverse);
}

/* F7 - CTA输入框深色背景样式统一 */
.bg-primary .cta-input,
.bg-deep .cta-input,
.bg-dark .cta-input {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-inverse);
}
.bg-primary .cta-input::placeholder,
.bg-deep .cta-input::placeholder,
.bg-dark .cta-input::placeholder {
    color: var(--text-inverse-muted);
}
.bg-primary .cta-input:focus,
.bg-deep .cta-input:focus,
.bg-dark .cta-input:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--theme-accent-soft);
}

/* T4 - step-card 步骤编号样式统一 */
.step-card .step-number {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--theme-accent-soft);
    color: var(--bg-page);
    border-radius: 50%;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* T7 - 卡片颜色变体暗色模式 */
html.dark .card-accent-top-blue::before,
html.dark .card-accent-top-green::before,
html.dark .card-accent-top-yellow::before,
html.dark .card-accent-top-purple::before,
html.dark .card-accent-top-orange::before,
@media (prefers-color-scheme: dark) {
    .card-accent-top-blue::before,
    .card-accent-top-green::before,
    .card-accent-top-yellow::before,
    .card-accent-top-purple::before,
    .card-accent-top-orange::before {
        opacity: 0.85;
    }
    .card-accent-top-blue i,
    .card-accent-top-green i,
    .card-accent-top-yellow i,
    .card-accent-top-purple i,
    .card-accent-top-orange i {
        color: var(--text-inverse-muted);
    }
}

/* S3 - 灯杆图片加载失败占位 */
.pole-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-section-light);
}

/* S4/G2 - 对比表移动端响应式优化 */
@media (max-width: 768px) {
    .compare-table {
        display: block;
        width: 100%;
    }
    .compare-table thead {
        display: none;
    }
    .compare-table tbody {
        display: block;
    }
    .compare-table tr {
        display: block;
        margin-bottom: 1rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-color-light);
        border-radius: var(--radius-sm);
    }
    .compare-table td {
        display: flex;
        align-items: flex-start;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid var(--border-color-light);
    }
    .compare-table td:last-child {
        border-bottom: none;
    }
    .compare-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-primary);
        margin-right: 1rem;
        flex-shrink: 0;
        min-width: 80px;
    }
}

/* F1 - 概览卡片移动端优化 */
@media (max-width: 480px) {
    .card.text-center.p-3 {
        padding: 0.75rem;
    }
    .card.text-center.p-3 h4 {
        font-size: var(--font-size-sm);
    }
    .card.text-center.p-3 p {
        font-size: var(--font-size-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card.text-center.p-3 .tag {
        font-size: 9px;
        padding: 0.1rem 0.4rem;
    }
}

/* Z1 - 专题锚点导航 */
.topic-anchor-nav.sticky-top {
    position: sticky;
    top: 136px;
    z-index: 40;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color-light);
    padding: 0.5rem 0;
    box-shadow: var(--shadow-sm);
}
.topic-anchor-nav .container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.anchor-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 0.5rem;
    font-size: var(--font-size-sm);
}
.anchor-link {
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-radius: 9999px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.anchor-link:hover {
    background: var(--theme-accent-10);
    color: var(--theme-accent);
}
@media (max-width: 768px) {
    .topic-anchor-nav.sticky-top {
        top: 0;
        padding: 0.25rem 0;
        overflow-x: auto;
        white-space: nowrap;
    }
    .topic-anchor-nav .container {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .anchor-label {
        font-size: var(--font-size-xs);
        display: none;
    }
    .anchor-link {
        font-size: var(--font-size-xs);
        padding: 0.25rem 0.5rem;
        flex-shrink: 0;
    }
}

/* Z7 - 产品图片画廊移动端优化 */
@media (max-width: 768px) {
    .product-gallery-grid.grid-5-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .product-gallery-grid.grid-5-col img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        width: 100%;
    }
}

/* S2/Z9 - bg-primary 区块文字对比度（补充） */
.bg-primary {
    background: var(--bg-dark);
    color: var(--text-inverse);
}
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4 {
    color: var(--text-inverse);
}
.bg-primary p,
.bg-primary li {
    color: var(--text-inverse-muted);
}
.bg-primary .text-white {
    color: var(--text-inverse) !important;
}
.bg-primary .text-gray {
    color: var(--text-inverse-muted) !important;
}

/* ============================================================
   下载中心、FAQ、故障专题与营销专题 - 视觉设计修复方案6 CSS
   ============================================================ */

/* ===== 下载页相关 ===== */

/* D4 - 待上线状态视觉反馈 */
.download-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}
.download-item.disabled::after {
    content: '文件待上线';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-warning);
    color: var(--color-warning);
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* DD1 - 下载按钮禁用状态 */
.download-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-section-light);
    color: var(--text-muted);
}

/* DD4 - 下载详情元信息布局 */
.download-info-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-section-light);
    border-radius: 6px;
    margin-bottom: 1rem;
}
.download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}
@media (max-width: 768px) {
    .download-info-section {
        flex-direction: column;
        text-align: center;
    }
    .download-meta {
        justify-content: center;
    }
}

/* ===== FAQ页相关 ===== */

/* F3 - FAQ分类卡片样式 */
.faq-category-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.35s ease;
}
.faq-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-accent-30);
}

/* F6 - 表单反馈区域 */
.form-feedback {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    display: none;
}
.form-feedback.success {
    display: block;
    background: var(--bg-success);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}
.form-feedback.error {
    display: block;
    background: var(--bg-danger);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

/* ===== 故障专题页相关 ===== */

/* FT4 - 故障速查卡片响应式 */
.fault-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .fault-quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .fault-quick-card {
        padding: 0.75rem;
    }
    .fault-quick-card h4 {
        font-size: var(--font-size-sm);
    }
    .fault-quick-card p {
        font-size: var(--font-size-xs);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
@media (max-width: 480px) {
    .fault-quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* ===== 售后与资质页相关 ===== */

/* M1 - 服务网点响应式 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .service-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .service-card {
        padding: 0.75rem;
    }
    .service-card-header h4 {
        font-size: var(--font-size-sm);
    }
    .service-card-body p {
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 480px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}

/* M5 - 服务流程响应式 */
@media (max-width: 768px) {
    .maintenance .grid-4,
    #maintenance .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .step-number {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }
}
@media (max-width: 480px) {
    .maintenance .grid-4,
    #maintenance .grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

/* M2 - 资质占位样式 */
.cert-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    background: var(--bg-section-light);
    border-radius: var(--radius-md);
}

/* M7 - cert-item样式完整定义 */
.cert-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.cert-item {
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--bg-surface);
}
.cert-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-accent-30);
}
.cert-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.cert-caption {
    padding: 0.5rem;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ===== 移动照明专题页相关 ===== */

/* ML1 - 锚点导航移动端优化 */
#mobilelighting .topic-anchor-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#mobilelighting .topic-anchor-nav::-webkit-scrollbar {
    display: none;
}
#mobilelighting .topic-anchor-nav .anchor-label {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
}
#mobilelighting .topic-anchor-nav .anchor-link {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}
@media (max-width: 480px) {
    #mobilelighting .topic-anchor-nav {
        gap: 0.25rem 0.5rem;
        padding: 0.25rem 0.5rem;
    }
    #mobilelighting .topic-anchor-nav .anchor-link {
        font-size: 10px;
        padding: 0.15rem 0.35rem;
    }
}

/* ML2 - 对比表移动端优化 */
#mobilelighting .table-responsive {
    position: relative;
}
#mobilelighting .table-scroll-hint {
    display: none;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: 0.5rem 0;
}
#mobilelighting .table-responsive.is-overflowing .table-scroll-hint {
    display: block;
}
@media (max-width: 768px) {
    #mobilelighting .compare-table {
        min-width: 950px;
    }
}

/* ML3 - 产品图片画廊移动端优化 */
@media (max-width: 768px) {
    #mobilelighting .product-gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    #mobilelighting .product-gallery-grid .gallery-item {
        aspect-ratio: 1 / 1;
    }
    #mobilelighting .product-gallery-grid .gallery-item.gallery-main {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16 / 9;
    }
}

/* ML6 - 产品图片统一 */
#mobilelighting .product-image-container {
    background: var(--bg-page);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color-light);
}
#mobilelighting .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform 0.4s ease;
}

/* ML8 - 暗色模式对比度修复 */
html.dark #mobilelighting .compare-table td strong,
@media (prefers-color-scheme: dark) {
    #mobilelighting .compare-table td strong {
        color: var(--text-inverse);
    }
    #mobilelighting .compare-table td {
        color: var(--text-inverse-muted);
    }
}

/* ===== 跨页面通用修复 ===== */

/* G4 - 通用对比表data-label移动端样式 */
@media (max-width: 768px) {
    .compare-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-primary);
        margin-right: 0.5rem;
    }
}

/* 资质图片懒加载占位 */
.cert-item img {
    background: var(--bg-section-light);
}

/* 服务卡片基础样式（如果缺失） */
.service-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: all 0.3s ease;
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-accent-30);
}
.service-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-light);
}
.service-card-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}
.service-card-header i {
    color: var(--theme-accent-soft);
    font-size: 1.1rem;
}
.service-card-body p {
    margin: 0.25rem 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.service-card-body i {
    color: var(--text-muted);
    margin-right: 0.35rem;
    width: 14px;
}


/* ===== 方案7新增样式 ===== */

/* P2/P5 - 产品筛选标签移动端优化 */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.filter-tag {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
@media (max-width: 768px) {
    .filter-tags {
        gap: 0.25rem;
        justify-content: center;
    }
    .filter-tag {
        padding: 0.25rem 0.5rem;
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }
}
@media (max-width: 480px) {
    .filter-tag {
        font-size: 10px;
        padding: 0.15rem 0.4rem;
    }
}

/* P4/G3 - 产品图片object-fit统一 */
.product-image {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform 0.3s ease;
}
.hot-product-card:hover .product-image img {
    transform: scale(1.03);
}

/* G3 - 产品卡片图片容器统一 */
.product-card .product-image {
    aspect-ratio: 1 / 1;
    background: var(--bg-section-light);
}

/* SL4 - 分页组件移动端优化 */
@media (max-width: 480px) {
    .pagination {
        gap: 0.15rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination a,
    .pagination span {
        min-width: 30px;
        height: 30px;
        padding: 0 0.4rem;
        font-size: var(--font-size-xs);
        border-radius: 4px;
        margin: 0 1px;
    }
    .pagination .ellipsis {
        display: none;
    }
}

/* SG5/G2 - 选型指南表格滚动提示 */
.sg-table-wrapper {
    position: relative;
}
.sg-table-wrapper::after {
    content: '\25C0  左右滑动查看完整参数  \25B6';
    position: absolute;
    bottom: -1.5rem;
    right: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: var(--bg-surface);
    padding: 0 0.5rem;
}
.sg-table-wrapper:hover::after {
    opacity: 0.7;
}
@media (max-width: 768px) {
    .sg-table-wrapper::after {
        opacity: 0.5;
    }
}

/* SG4/SG6 - 选型指南变量覆盖 */
#sg-main .sg-page-header {
    background: linear-gradient(135deg, var(--theme-dark) 0%, #1a2332 100%) !important;
    color: var(--text-inverse) !important;
    border-bottom: 4px solid var(--theme-accent-soft) !important;
    padding: 4rem 0 3rem !important;
}
#sg-main .sg-page-title {
    color: var(--text-inverse) !important;
}
#sg-main .sg-page-subtitle {
    color: var(--text-inverse-muted) !important;
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--font-size-lg);
}
#sg-main .sg-search-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    margin: 1rem auto 0;
    backdrop-filter: blur(4px);
}
#sg-main .sg-search-hint kbd {
    background: rgba(255,255,255,0.20) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}
#sg-main .sg-title-icon {
    color: var(--theme-accent-soft) !important;
}
#sg-main .sg-quick-nav {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color-light) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* TY1/G2 - 通用LED对比表滚动提示 */
.table-responsive {
    position: relative;
}
.table-scroll-hint {
    display: none;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: 0.5rem 0;
}
@media (max-width: 768px) {
    .table-scroll-hint {
        display: block;
    }
}

/* TY3/G3 - 产品图片容器object-fit统一 */
.product-image-container {
    background: var(--bg-page) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border-color-light) !important;
    box-shadow: var(--shadow-sm) !important;
}
.product-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 0.5rem !important;
    transition: transform 0.4s ease !important;
}
.product-image-container:hover img {
    transform: scale(1.02) !important;
}

/* TY4 - 暗色背景文字可读性 */
.text-white-60 {
    color: rgba(255, 255, 255, 0.6) !important;
}
.text-white-80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
.card-dark-bg .text-white-60 {
    color: var(--text-inverse-muted) !important;
}
.card-dark-bg .text-white-80 {
    color: var(--text-inverse) !important;
}

/* G2 - 对比表移动端data-label样式 */
.compare-table td[data-label]::before {
    content: attr(data-label);
    display: none;
    font-weight: 600;
    color: var(--theme-accent-soft);
    margin-right: 0.5rem;
}
@media (max-width: 640px) {
    .compare-table {
        display: block;
    }
    .compare-table thead {
        display: none;
    }
    .compare-table tbody,
    .compare-table tr {
        display: block;
    }
    .compare-table tr {
        border-bottom: 2px solid var(--border-color-light);
        margin-bottom: 1rem;
    }
    .compare-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color-light);
        text-align: right;
    }
    .compare-table td:last-child {
        border-bottom: none;
    }
    .compare-table td[data-label]::before {
        display: block;
        flex-shrink: 0;
        margin-right: 1rem;
        text-align: left;
    }
}

/* ZJ1/ZJ2 - 自检清单响应式（屏幕查看） */
@media screen and (max-width: 768px) {
    #zijianqingdan body {
        background: var(--bg-page) !important;
        padding: 1rem 0.5rem !important;
    }
    #zijianqingdan .page {
        width: 100% !important;
        min-height: auto !important;
        padding: 1rem 0.75rem !important;
        box-shadow: var(--shadow-sm) !important;
        margin-bottom: 1rem !important;
        border-radius: var(--radius-sm) !important;
    }
    #zijianqingdan .header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    #zijianqingdan .header-left .logo-img {
        height: 32px !important;
    }
    #zijianqingdan .company-name {
        font-size: 16px !important;
    }
    #zijianqingdan .company-sub {
        font-size: 8px !important;
    }
    #zijianqingdan .header-right {
        font-size: 8px !important;
        text-align: left !important;
        width: 100% !important;
    }
    #zijianqingdan .doc-title h2 {
        font-size: 14px !important;
    }
    #zijianqingdan .info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2px 8px !important;
        font-size: 9px !important;
        padding: 4px 8px !important;
    }
    #zijianqingdan table.checklist {
        font-size: 8px !important;
    }
    #zijianqingdan table.checklist th,
    #zijianqingdan table.checklist td {
        padding: 2px 3px !important;
    }
    #zijianqingdan .col-item { width: 14% !important; }
    #zijianqingdan .col-standard { width: 22% !important; }
    #zijianqingdan .col-check { width: 12% !important; }
    #zijianqingdan .col-remark { width: 20% !important; }
    #zijianqingdan .summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    #zijianqingdan .summary-item .s-val {
        font-size: 16px !important;
    }
    #zijianqingdan .signature-area {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #zijianqingdan .sig-line {
        width: 60px !important;
    }
}
@media screen and (max-width: 480px) {
    #zijianqingdan .page {
        padding: 0.75rem 0.5rem !important;
    }
    #zijianqingdan .info-grid {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
    #zijianqingdan table.checklist {
        font-size: 7px !important;
    }
    #zijianqingdan table.checklist th,
    #zijianqingdan table.checklist td {
        padding: 1px 2px !important;
    }
    #zijianqingdan .col-check .checkbox-cell {
        font-size: 7px !important;
    }
    #zijianqingdan .cb {
        width: 10px !important;
        height: 10px !important;
    }
    #zijianqingdan .summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important;
    }
    #zijianqingdan .conclusion-box {
        flex-direction: column !important;
        gap: 4px !important;
    }
    #zijianqingdan .cb-big {
        width: 12px !important;
        height: 12px !important;
    }
    #zijianqingdan .instructions {
        font-size: 7px !important;
        padding: 4px 6px !important;
    }
}

/* ZJ2 - 自检清单屏幕背景统一 */
@media screen {
    #zijianqingdan body {
        background: var(--bg-page) !important;
        padding: 20px 0 60px !important;
    }
}

/* ZJ3 - 自检清单复选框打印支持 */
@media print {
    #zijianqingdan .cb {
        border: 1.5px solid #000 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #zijianqingdan .cb.checked::after {
        content: '\2713';
        color: #000;
        font-size: 10px;
        position: absolute;
        top: -2px;
        left: 2px;
    }
}

/* =========================================================
 * SL1-3 - 统计卡片响应式优化
 * SL1-4 - 快捷分类卡片响应式优化
 * SL1-7 - 暗色模式适配
 * SL1-9 - 卡片标题对比度增强
 * =======================================================*/

/* SL1-3 - 统计卡片响应式 */
.stats-section .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .stats-section .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .stats-section .stat-item {
        padding: 0.75rem 0.5rem;
    }
    .stats-section .stat-number {
        font-size: var(--font-size-2xl);
    }
    .stats-section .stat-label {
        font-size: var(--font-size-sm);
    }
}
@media (max-width: 480px) {
    .stats-section .grid-3 {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .stats-section .stat-item {
        padding: 0.5rem;
    }
    .stats-section .stat-number {
        font-size: var(--font-size-xl);
    }
}

/* SL1-4 - 快捷分类卡片响应式 */
.quick-card-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.75rem;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    min-height: 100px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color-light);
}
.quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-accent-soft);
    background: rgba(255, 255, 255, 0.9);
}
.quick-card i {
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}
.quick-card:hover i {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .quick-card-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .quick-card {
        padding: 0.75rem;
        min-height: 80px;
    }
    .quick-card i {
        font-size: 1.5rem !important;
    }
    .quick-card h4 {
        font-size: var(--font-size-sm);
    }
}
@media (max-width: 480px) {
    .quick-card-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .quick-card {
        padding: 0.5rem;
        min-height: 70px;
    }
    .quick-card i {
        font-size: 1.25rem !important;
    }
    .quick-card h4 {
        font-size: var(--font-size-xs);
    }
}

/* SL1-9 - 卡片标题对比度增强 */
.quick-card h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0.5rem 0 0.25rem;
    transition: color 0.3s ease;
    line-height: 1.4;
}
.quick-card:hover h4 {
    color: var(--theme-accent-soft);
}
.quick-card p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* SL1-7 - 暗色模式适配 */
html.dark .quick-card,
@media (prefers-color-scheme: dark) {
    .quick-card {
        background: rgba(30, 41, 59, 0.75);
        border-color: rgba(255, 255, 255, 0.15);
        color: var(--text-inverse);
    }
    .quick-card h4 {
        color: var(--text-inverse);
    }
    .quick-card p {
        color: rgba(255, 255, 255, 0.65);
    }
    .quick-card:hover {
        background: var(--theme-accent-10);
        border-color: var(--theme-accent-soft);
    }
    .quick-card:hover h4 {
        color: var(--theme-accent-soft);
    }
}
.bg-primary,
.bg-deep,
.bg-dark {
    --text-color-primary: var(--text-inverse);
    --text-color-secondary: var(--text-inverse-muted);
}
.bg-primary p,
.bg-deep p,
.bg-dark p,
.bg-primary li,
.bg-deep li,
.bg-dark li,
.bg-primary span,
.bg-deep span,
.bg-dark span {
    color: var(--text-color-secondary) !important;
}
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-deep h1,
.bg-deep h2,
.bg-deep h3,
.bg-deep h4,
.bg-deep h5,
.bg-deep h6,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
    color: var(--text-color-primary) !important;
}
.bg-primary .text-muted,
.bg-deep .text-muted,
.bg-dark .text-muted {
    color: var(--text-inverse-muted) !important;
}
.bg-primary .text-gray,
.bg-deep .text-gray,
.bg-dark .text-gray {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* D9-2 - 产品图库移动端优化 */
@media (max-width: 768px) {
    .gallery-thumbs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    .gallery-thumbs .thumbnail,
    .gallery-thumbs .thumbs-item {
        flex: 0 0 70px !important;
        height: 70px !important;
        width: 70px !important;
    }
    .gallery-main img {
        width: 100% !important;
        object-fit: contain !important;
    }
}

/* D9-2 - 相关产品网格移动端优化 */
@media (max-width: 768px) {
    .related-products .grid-4,
    .product-accessories .grid-4,
    .product-related .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .related-products .product-card,
    .product-accessories .product-card,
    .product-related .product-card {
        aspect-ratio: auto;
    }
    .related-products .product-image-container,
    .product-accessories .product-image-container,
    .product-related .product-image-container {
        aspect-ratio: 4 / 3;
    }
    .related-products .product-image-container img,
    .product-accessories .product-image-container img,
    .product-related .product-image-container img {
        object-fit: contain !important;
        padding: 0.5rem;
    }
}
@media (max-width: 480px) {
    .related-products .grid-4,
    .product-accessories .grid-4,
    .product-related .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* D9 - 表单实时验证视觉反馈 */
.input-error {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    transition: all 0.2s ease;
}
.input-success {
    border-color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.03) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08) !important;
    transition: all 0.2s ease;
}
.input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.input-success:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}