/*
 * 海钠鑫宇 · 品牌视觉重塑
 * 配色：深靛蓝 #2563EB  ×  电光紫 #6D28D9  ×  极光青 #0EA5E9
 * 加载顺序：app.css 之后
 */

/* ========== 1. 设计 Token ========== */
:root {
    /* 主色 —— 电光紫 */
    --hnxy-primary: #6D28D9;
    --hnxy-primary-hover: #5B21B6;
    --hnxy-primary-soft: #F3E8FF;
    --hnxy-primary-soft-2: #E9D5FF;
    --hnxy-primary-ring: rgba(109, 40, 217, 0.22);

    /* 副主色 —— 深靛蓝 */
    --hnxy-blue: #2563EB;
    --hnxy-blue-hover: #1D4ED8;
    --hnxy-blue-soft: #DBEAFE;

    /* 强调 —— 极光青 */
    --hnxy-cyan: #0EA5E9;
    --hnxy-cyan-hover: #0284C7;
    --hnxy-cyan-soft: #E0F2FE;

    /* 第二强调 —— 钠光金（用在小徽章 / 高光） */
    --hnxy-accent: #F59E0B;
    --hnxy-accent-hover: #D97706;
    --hnxy-accent-soft: #FEF3C7;

    /* 中性 */
    --hnxy-ink: #0B0B16;
    --hnxy-ink-2: #1F2937;
    --hnxy-ink-3: #475569;
    --hnxy-bg: #F5F3FF;             /* 节区底：极淡薰衣草 */
    --hnxy-bg-2: #FAFAFA;
    --hnxy-line: #E5E7EB;

    --hnxy-danger: #EF4444;

    /*
     * 主品牌渐变 —— 深靛蓝 → 紫 → 极光青
     * 比之前的"洋红+紫"耐看，符合新能源/科技调性
     */
    --hnxy-gradient: linear-gradient(135deg, #2563EB 0%, #6D28D9 45%, #0EA5E9 100%);

    /* 反向 / 暖色系副渐变（仅用在小元素，避免污染整体） */
    --hnxy-gradient-warm: linear-gradient(135deg, #6D28D9 0%, #DB2777 60%, #F59E0B 100%);

    /* 大面积径向渐变（用于节区底 / hero 蒙板） */
    --hnxy-radial: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.10) 0%, transparent 50%),
                   radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.10) 0%, transparent 50%),
                   linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
}

/* ========== 2. 全局选区色 ========== */
::-moz-selection { background-color: var(--hnxy-primary); color: #fff; }
::selection      { background-color: var(--hnxy-primary); color: #fff; }

/* ========== 3. 重定义 Tailwind 颜色 token ========== */

/* 主蓝 → 主色（电光紫红） */
.bg-blue-600                        { background-color: var(--hnxy-primary) !important; }
.text-blue-600,
.group:hover .group-hover\:text-blue-600,
.hover\:text-blue-600:hover         { color: var(--hnxy-primary) !important; }
.border-blue-600                    { border-color: var(--hnxy-primary) !important; }
.hover\:bg-blue-700:hover           { background-color: var(--hnxy-primary-hover) !important; }
.bg-blue-50                         { background-color: var(--hnxy-primary-soft) !important; }
.bg-blue-500\/20                    { background-color: rgba(109, 40, 217, 0.18) !important; }
.focus\:border-blue-500:focus       { border-color: var(--hnxy-primary) !important; }
.focus\:ring-blue-200:focus         { box-shadow: 0 0 0 4px var(--hnxy-primary-ring) !important; }

/* 橙色 → 钠光黄（强调） */
.text-orange-600                    { color: var(--hnxy-accent-hover) !important; }

/* 文字 */
.text-slate-700                     { color: var(--hnxy-ink-2) !important; }
.text-slate-900                     { color: var(--hnxy-ink) !important; }

/* 节区底色：从冷灰换成极淡薰衣草，跟主色呼应 */
.bg-gray-100 {
    background: linear-gradient(180deg, var(--hnxy-bg) 0%, #FFFFFF 100%) !important;
    background-color: var(--hnxy-bg) !important;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(109, 40, 217, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--hnxy-bg) 0%, #FFFFFF 100%) !important;
}

/* ========== 4. 主按钮 .btn —— 渐变填充 + 发光阴影 ========== */
.btn {
    background: var(--hnxy-gradient) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    box-shadow:
        0 14px 30px -10px rgba(109, 40, 217, 0.55),
        0 4px 12px -2px rgba(37, 99, 235, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background-position .55s ease, transform .25s ease, box-shadow .35s ease;
    position: relative;
    overflow: hidden;
}
.btn:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px);
    box-shadow:
        0 22px 44px -12px rgba(109, 40, 217, 0.65),
        0 8px 18px -4px rgba(14, 165, 233, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
    pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }

/* 链接按钮 */
.btn-link:hover                     { color: var(--hnxy-primary) !important; }

/* 链接组 */
.links-blue a,
.hover-links-blue a:hover           { color: var(--hnxy-primary) !important; }
.links-blue a,
.hover-links-blue a:hover           { text-decoration-color: rgba(109, 40, 217, 0.45) !important; }
.links-blue.content a,
.links-blue.links-underline a       { text-decoration-color: rgba(109, 40, 217, 0.45) !important; }
.group:hover .btn-link-caption {
    color: var(--hnxy-primary) !important;
    text-decoration-color: rgba(109, 40, 217, 0.45) !important;
}

/* 表单 */
.form-control:focus                 { border-color: var(--hnxy-primary) !important; }
.form-control.is-invalid            { border-color: var(--hnxy-danger) !important; }
.invalid-tooltip                    { color: var(--hnxy-danger) !important; }

/* ========== 5. 标题渐变 + 装饰条（设计层面的区别） ========== */

body {
    color: var(--hnxy-ink);
    background-color: #fff;
}

/* 大标题：默认色保持深色，可主动加 .accent 启用渐变 */
.h1.accent, .h2.accent, .h3.accent {
    background: var(--hnxy-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
 * 全局：所有 .h2 自动加左侧渐变小竖条做装饰
 * 用 ::before 不会影响原 DOM
 */
.h2 {
    position: relative;
}
.h2::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0.18em;
    width: 6px;
    height: 0.7em;
    border-radius: 3px;
    background: var(--hnxy-gradient);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
}
@media (max-width: 1023px) {
    .h2::before { left: -14px; width: 5px; }
}

/* Hero h1：加底部渐变高光下划线，强化品牌感 */
section .h1 {
    position: relative;
    display: inline-block;
}
section .h1::after {
    content: "";
    display: block;
    width: 110px;
    height: 6px;
    border-radius: 3px;
    margin-top: 24px;
    background: var(--hnxy-gradient);
    box-shadow: 0 6px 18px rgba(109, 40, 217, 0.35);
}

/* ========== 6. 卡片 / hover 阴影（紫光晕） ========== */
.hover\:shadow-lg:hover {
    box-shadow:
        0 18px 40px -16px rgba(109, 40, 217, 0.30),
        0 6px 14px -4px rgba(15, 23, 42, 0.10) !important;
}

/* archive-product 等列表卡片描边 */
.border-slate-200,
.border-gray-100                    { border-color: var(--hnxy-line) !important; }

/* 节区圆角块加边框光晕：rounded-4xl + bg-gray-100 */
.rounded-4xl.bg-gray-100,
.rounded-4xl.py-10.lg\:py-24,
section .rounded-4xl {
    position: relative;
}

/* ========== 7. 顶部导航 ========== */

#header {
    transition: min-height .3s ease, background-color .3s ease, box-shadow .3s ease !important;
}
#header.bg-white {
    box-shadow:
        0 1px 0 rgba(109, 40, 217, 0.08),
        0 8px 24px -16px rgba(109, 40, 217, 0.18);
}

/* 中英文切换：选中态用渐变 */
.bg-slate-900                       { background-color: var(--hnxy-ink) !important; }
a.bg-slate-900.text-white,
header a.bg-slate-900 {
    background: var(--hnxy-gradient) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -6px rgba(109, 40, 217, 0.55);
}

/* 联系我们 / 合作页提交按钮（黑底）→ 主品牌渐变 */
button.bg-slate-900,
.bg-slate-900:where(button, [type="submit"]) {
    background: var(--hnxy-gradient) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px -10px rgba(109, 40, 217, 0.55);
    transition: transform .25s ease, box-shadow .35s ease, background-position .55s ease;
    background-size: 200% 200%;
    background-position: 0% 50%;
}
button.bg-slate-900:hover,
.bg-slate-900:where(button, [type="submit"]):hover {
    background: var(--hnxy-gradient) !important;
    background-size: 200% 200%;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(109, 40, 217, 0.65);
}
.hover\:bg-slate-700:hover          { background-color: var(--hnxy-primary-hover) !important; }

/* ========== 8. Hero 背景彩色 blob：温和的科技感渐变叠层 ========== */
/* 新策略：彩斑整体降饱和 + 缩小 + 半透明，让视觉重心回到标题 */
.blob-1, .blob-2, .blob-3, .blob-4 {
    opacity: 0.55;
    transform: scale(0.78);
    transform-origin: center center;
}
/* 蓝色 blob → 保留品牌深蓝 */
.blob-1 { filter: hue-rotate(-10deg) saturate(0.95) brightness(1.02); }
/* 黄色 blob → 推到极淡靛紫，避免和主色撞 */
.blob-2 { filter: hue-rotate(195deg) saturate(0.85) brightness(1.05); }
/* 青色 blob → 更柔的极光青 */
.blob-3 { filter: hue-rotate(-12deg) saturate(0.95) brightness(1.05); }
/* 橙色 blob → 推到紫系 */
.blob-4 { filter: hue-rotate(220deg) saturate(0.80) brightness(1.05); }

/* Hero 区域：在彩斑上叠一层白色径向蒙板，让标题区域可读性高 */
.section-cover-effect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.85) 100%);
}
.section-cover-effect > .container {
    position: relative;
    z-index: 2;
}

/* ========== 9. 表单 input / 选项卡描边强化 ========== */
input.border-slate-300,
textarea.border-slate-300,
select.border-slate-300 {
    border-color: #D4D4D8 !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
input.border-slate-300:focus,
textarea.border-slate-300:focus,
select.border-slate-300:focus {
    border-color: var(--hnxy-primary) !important;
    box-shadow: 0 0 0 4px var(--hnxy-primary-ring) !important;
}

/* ========== 10. 标签 / 徽章：bg-blue-50 text-blue-600 → 渐变描边胶囊 ========== */
.bg-blue-50.text-blue-600 {
    background: var(--hnxy-primary-soft) !important;
    color: var(--hnxy-primary) !important;
    border: 1px solid rgba(109, 40, 217, 0.25);
}

/* 列表卡片中"voltage / capacity" 标签 bg-gray-100 text-slate-600 */
span.bg-gray-100.text-slate-600,
span.bg-gray-100.rounded-full {
    background: linear-gradient(135deg, var(--hnxy-cyan-soft) 0%, var(--hnxy-primary-soft) 100%) !important;
    color: var(--hnxy-ink-2) !important;
    border: 1px solid rgba(109, 40, 217, 0.18);
}

/* 产品卡片"分类标签" bg-blue-600 text-white → 钠光黄底深字（更跳） */
.absolute.bg-blue-600.text-white {
    background: var(--hnxy-accent) !important;
    color: var(--hnxy-ink) !important;
    box-shadow: 0 6px 14px -4px rgba(245, 158, 11, 0.5);
    text-shadow: none !important;
}

/* ========== 11. 锚点过渡平滑（避免 Lenis 缺失时跳动） ========== */
html { scroll-behavior: smooth; }

/* ========== 12. 底部 / 装饰底纹 ========== */
footer .h4 {
    background: var(--hnxy-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ========== 13. 兜底 ========== */
[hidden] { display: none !important; }


/* ============================================================
 *  ▽▽▽  排版重塑（针对首页下方各区块的实际结构）  ▽▽▽
 * ============================================================ */

/* ========== L1. 节区圆角块：背景升级 + 玻璃感边框光 ========== */
section .rounded-4xl {
    position: relative;
    isolation: isolate;
}
section .rounded-4xl.bg-gray-100,
section .bg-gray-100.rounded-4xl {
    background:
        radial-gradient(circle at 18% 22%, rgba(109, 40, 217, 0.10) 0%, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(14, 165, 233, 0.10) 0%, transparent 45%),
        linear-gradient(180deg, var(--hnxy-bg) 0%, #FFFFFF 100%) !important;
}
/* 渐变细描边 */
section .rounded-4xl.bg-gray-100::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(109, 40, 217,0.35) 0%,
        rgba(14, 165, 233,0.20) 50%,
        rgba(245, 158, 11,0.30) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

/* ========== L2. 核心优势 / 应用领域 手风琴：左侧动态指示条 ========== */
[x-data="xAccordion"] .relative.py-4 {
    padding-left: 18px;
    transition: padding-left .25s ease;
}
[x-data="xAccordion"] .relative.py-4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hnxy-primary) 0%, var(--hnxy-cyan) 100%);
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: top;
    transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
[x-data="xAccordion"] .relative.py-4:has(button[aria-expanded="true"])::before {
    opacity: 1;
    transform: scaleY(1);
}
[x-data="xAccordion"] .relative.py-4:hover {
    padding-left: 24px;
}
[x-data="xAccordion"] button[aria-expanded="true"] {
    color: var(--hnxy-primary) !important;
    font-weight: 600;
}

/* 手风琴右侧自动播放小圆点：bg-gray-300 → 半透明，激活态用主品牌色 */
[x-data="xAccordion"] .bg-gray-300       { background-color: rgba(15, 23, 42, 0.12) !important; }
[x-data="xAccordion"] .flex.p-1.bg-blue-600 {
    background: var(--hnxy-gradient) !important;
    box-shadow: 0 0 12px rgba(109, 40, 217, 0.55);
}

/* ========== L3. 企业产品（左右交替图文）—— h3 加左侧装饰条
 *  注：编号水印的注入移到 G4 段（避免重复）
 */
.grid.grid-cols-12.grid-flow-dense {
    counter-reset: hnxyProd;
}
.grid.grid-cols-12.grid-flow-dense .h3 {
    position: relative;
    padding-left: 18px;
}
.grid.grid-cols-12.grid-flow-dense .h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 4px;
    height: 0.7em;
    border-radius: 2px;
    background: var(--hnxy-gradient);
}

/* ========== L4. "了解更多"链接（btn-link）：箭头胶囊化 ========== */
.btn-link {
    align-items: center;
    transition: gap .25s ease, color .25s ease;
}
.btn-link svg {
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.group:hover .btn-link svg,
.btn-link:hover svg {
    transform: translateX(6px);
}
.btn-link-caption {
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

/* ========== L5. 项目轮播 prev/next：渐变胶囊 + 光晕 ========== */
.swiper-button-prev.bg-blue-600,
.swiper-button-next.bg-blue-600 {
    background: var(--hnxy-gradient) !important;
    box-shadow:
        0 16px 32px -12px rgba(109, 40, 217, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: transform .25s ease, box-shadow .35s ease, opacity .25s ease;
}
.swiper-button-prev.bg-blue-600:hover,
.swiper-button-next.bg-blue-600:hover {
    transform: scale(1.06);
    box-shadow:
        0 22px 40px -12px rgba(109, 40, 217, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.swiper-button-disabled.bg-blue-600,
.swiper-button-disabled.bg-neutral-100 {
    background: #E5E7EB !important;
    box-shadow: none !important;
    opacity: .55;
}

/* ========== L6. 合作伙伴 logo 横向条：默认灰度 + hover 复原 ========== */
[x-data="xHorizontalScroll"] img {
    filter: grayscale(100%) opacity(.55);
    transition: filter .35s ease, transform .35s ease;
}
[x-data="xHorizontalScroll"] .relative:hover img {
    filter: grayscale(0%) opacity(1);
    transform: translateY(-2px);
}

/* ========== L7. 产品详情/列表卡片：渐变描边浮起感 ========== */
.rounded-2xl.overflow-hidden.border.border-gray-100,
.rounded-2xl.overflow-hidden.border.border-slate-200 {
    background-color: #fff;
    transition: transform .35s cubic-bezier(.4,0,.2,1),
                box-shadow .35s ease,
                border-color .35s ease;
}
.rounded-2xl.overflow-hidden.border.border-gray-100:hover,
.rounded-2xl.overflow-hidden.border.border-slate-200:hover {
    transform: translateY(-4px);
    border-color: transparent !important;
    box-shadow:
        0 24px 50px -20px rgba(109, 40, 217, 0.25),
        0 6px 16px -6px rgba(15, 23, 42, 0.10);
}
.rounded-2xl.overflow-hidden .aspect-\[4\/3\] {
    overflow: hidden;
}
.rounded-2xl.overflow-hidden:hover .aspect-\[4\/3\] > div[style*="background-image"] {
    transform: scale(1.06);
}
.rounded-2xl.overflow-hidden .aspect-\[4\/3\] > div[style*="background-image"] {
    transition: transform .8s cubic-bezier(.4,0,.2,1);
}

/* ========== L8. 关于我们 / About-us 大图区：暗调 + 渐变叠层 ========== */
section .relative.rounded-4xl.aspect-\[7\/11\],
section .relative.rounded-4xl.landscape\:aspect-auto.landscape\:h-screen {
    overflow: hidden;
}
section .relative.rounded-4xl.aspect-\[7\/11\]::after,
section .relative.rounded-4xl.landscape\:h-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 28%, rgba(109, 40, 217, 0.32) 0%, transparent 45%),
        radial-gradient(circle at 12% 78%, rgba(14, 165, 233, 0.28) 0%, transparent 45%),
        linear-gradient(180deg, rgba(11,11,22,0.05) 0%, rgba(11,11,22,0.55) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
}
section .relative.rounded-4xl.aspect-\[7\/11\] > *:not(::after),
section .relative.rounded-4xl.landscape\:h-screen > *:not(::after) {
    position: relative;
    z-index: 2;
}

/* About 区白字标题保持白色（覆盖 .text-slate-900 替换） */
section .h2.text-white {
    color: #fff !important;
}
section .h2.text-white::before {
    background: var(--hnxy-accent);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.6);
}

/* ========== L9. 技术资质双栏：内容卡片化（左右两段加白底圆角） ========== */
.grid.grid-cols-12 .col-span-12.lg\:col-span-6.lg\:pr-10 .lead.content.text-slate-700 {
    background: #fff;
    border: 1px solid var(--hnxy-line);
    border-radius: 22px;
    padding: 28px 32px;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.grid.grid-cols-12 .col-span-12.lg\:col-span-6.lg\:pr-10 .lead.content.text-slate-700:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow:
        0 22px 44px -20px rgba(109, 40, 217, 0.22),
        0 4px 12px -4px rgba(15, 23, 42, 0.10);
}
@media (max-width: 1023px) {
    .grid.grid-cols-12 .col-span-12.lg\:col-span-6.lg\:pr-10 .lead.content.text-slate-700 {
        padding: 22px 24px;
        border-radius: 18px;
    }
}

/* ========== L10. 应用领域指示条（accordion2）右侧自动滚条按钮 ========== */
[x-data="xAccordion"] .flex.p-1.bg-blue-600.rounded-full {
    background: var(--hnxy-gradient) !important;
    box-shadow: 0 0 16px rgba(109, 40, 217, 0.55);
}

/* ========== L11. Hero 描述文字：放大行高 + 给关键词标记 ========== */
section .lead.content {
    line-height: 1.7;
}
section .h1 + .lead.content,
section .h2 + .lead.content {
    margin-top: 1rem;
}

/* ========== L12. 节区之间加渐变分隔线（仅大屏） ========== */
@media (min-width: 1024px) {
    main > section + section::before {
        content: "";
        display: block;
        height: 1px;
        margin: 0 auto;
        max-width: 80px;
        background: var(--hnxy-gradient);
        opacity: .65;
        border-radius: 2px;
    }
}

/* ========== L13. 价值/亮点列表 ul：自定义渐变小圆点 ========== */
.content ul {
    list-style: none !important;
    padding-left: 1.75rem;
}
.content ul li {
    position: relative;
}
.content ul li::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 0.65em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hnxy-gradient);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.10);
}

/* ========== L14. 表格 / wp-block-table 强化（产品详情常用） ========== */
.content .wp-block-table table,
.content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--hnxy-line);
}
.content .wp-block-table th,
.content table th {
    background: linear-gradient(135deg, rgba(109, 40, 217,0.08), rgba(14, 165, 233,0.08));
    color: var(--hnxy-ink);
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
}
.content .wp-block-table td,
.content table td {
    padding: 12px 18px;
    border-top: 1px solid var(--hnxy-line);
}
.content .wp-block-table tr:nth-child(even) td,
.content table tr:nth-child(even) td {
    background-color: var(--hnxy-bg-2);
}

/* ========== L15. 页脚：四 blob 装饰也跟主调走（柔和） ========== */
footer .blob-1, footer .blob-3 { filter: hue-rotate(-10deg) saturate(0.95); opacity: .55; }
footer .blob-2, footer .blob-4 { filter: hue-rotate(195deg) saturate(0.85); opacity: .55; }

/* ========== L16. 顶部菜单 hover 下划线渐变 ========== */
nav.hover-links-underline a {
    position: relative;
    transition: color .25s ease;
}
nav.hover-links-underline a:hover {
    color: var(--hnxy-primary) !important;
    text-decoration: none !important;
}
nav.hover-links-underline a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--hnxy-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
nav.hover-links-underline a:hover::after {
    transform: scaleX(1);
}

/* ========== L17. 滚动到锚点时偏移补正（避免标题被顶部 nav 遮住） ========== */
[id] { scroll-margin-top: 90px; }

/* ---------- L18. 移动端：字号节流 + 边距收紧 ---------- */
@media (max-width: 767px) {
    section .h1::after { width: 64px; height: 4px; margin-top: 14px; }
    [x-data="xAccordion"] .relative.py-4 { padding-left: 14px; }
}


/* ============================================================
 *   ▽▽▽   骨架级排版重塑（v3 → v4）— 真正改布局   ▽▽▽
 *   原则：用 CSS 改 grid / 间距 / 卡片化容器，不改 PHP
 * ============================================================ */

/* ---------- G0. 容器扩宽 + 全局节奏 ---------- */
@media (min-width: 1280px) {
    .container { max-width: 1320px !important; }
}
@media (min-width: 1536px) {
    .container { max-width: 1440px !important; }
}

/* 全站节区上下间距统一收紧（原来 200px 太空旷） */
section .lg\:pb-\[200px\]  { padding-bottom: 120px !important; }
section .lg\:pt-\[200px\]  { padding-top: 120px !important; }
section .lg\:py-\[200px\]  { padding-top: 120px !important; padding-bottom: 120px !important; }
section .lg\:gap-\[200px\] { gap: 120px !important; }
section .lg\:pb-\[160px\]  { padding-bottom: 100px !important; }
section .lg\:pt-\[160px\]  { padding-top: 100px !important; }
section .lg\:pt-\[180px\]  { padding-top: 100px !important; }
section .lg\:pb-\[240px\]  { padding-bottom: 140px !important; }

/* ---------- G1. Hero：标题左对齐 → 居中 + 副标题压缩 ---------- */
@media (min-width: 1024px) {
    section .min-h-\[calc\(100dvh\)\] .md\:max-w-\[530px\].lg\:max-w-\[700px\] {
        max-width: 880px !important;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }
    section .min-h-\[calc\(100dvh\)\] .md\:max-w-\[530px\].lg\:max-w-\[700px\] .h1 {
        text-align: center;
    }
    section .min-h-\[calc\(100dvh\)\] .md\:max-w-\[530px\].lg\:max-w-\[700px\] .h1::after {
        margin-left: auto;
        margin-right: auto;
    }
    /* Hero 区底部容器整体下移，让标题在视口正中 */
    section .min-h-\[calc\(100dvh\)\].flex.flex-col.justify-end.pb-4.lg\:pb-16 {
        justify-content: center !important;
        padding-bottom: 0 !important;
    }
}

/* ---------- G2. 公司介绍区：右栏文字 → 改成等高三栏数据卡片 ---------- */
/*
 * 原结构：grid-cols-12 + 左 col-span-6 标题 + 右 col-start-8 col-span-5 文字
 * 我把右栏改宽到 col-span-7，并让两段 <p> 变成左右双卡片
 */
@media (min-width: 1024px) {
    section .grid.grid-cols-12.grid-flow-dense.gap-y-10.gap-x-4 > .col-span-12.lg\:col-span-6,
    section .grid.grid-cols-12.grid-flow-dense.gap-y-10.lg\:gap-x-8 > .col-span-12.lg\:col-span-6 {
        grid-column: span 12 / span 12 !important;
        text-align: center;
        padding-bottom: 12px;
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 {
        grid-column: 1 / -1 !important;
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 > .lead.content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 > .lead.content > p {
        background: #fff;
        border: 1px solid var(--hnxy-line);
        border-radius: 22px;
        padding: 28px 30px;
        margin: 0 !important;
        box-shadow: 0 6px 20px -14px rgba(15, 23, 42, 0.12);
        position: relative;
        overflow: hidden;
        transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 > .lead.content > p::before {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 4px;
        background: var(--hnxy-gradient);
        transform: translateX(-101%);
        transition: transform .55s cubic-bezier(.4,0,.2,1);
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 > .lead.content > p:hover {
        transform: translateY(-4px);
        border-color: transparent;
        box-shadow: 0 22px 48px -22px rgba(109, 40, 217, 0.28);
    }
    section .grid.grid-cols-12.grid-flow-dense > .col-span-12.lg\:col-span-5.lg\:col-start-8 > .lead.content > p:hover::before {
        transform: translateX(0);
    }
}

/* ---------- G3. 核心优势：左列加白卡片包裹（保持原 5 / 7 列宽） ---------- */
@media (min-width: 1024px) {
    [x-data="xAccordion"][data-items-count="5"] > .grid.grid-cols-12 > .col-span-12.lg\:col-start-1.lg\:col-span-5 {
        background: #fff;
        border-radius: 24px;
        padding: 14px 28px !important;
        border: 1px solid var(--hnxy-line);
        box-shadow: 0 14px 40px -24px rgba(15, 23, 42, 0.12);
        align-self: start; /* 让卡片不被右列 sticky 容器拉伸 */
    }
}
/* 手风琴的分隔线减淡，避免和卡片描边打架 */
[x-data="xAccordion"] .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-color: rgba(15, 23, 42, 0.06) !important;
}

/* ---------- G4. 企业产品：恢复原 zig-zag + 把 shape 装饰化、文字玻璃卡片 ----------
 *
 * 经过查证：
 *   - shape-2.jpg / shape-3.jpg 是原设计师做的"抽象艺术装饰云"
 *   - 原意图是用 mix-blend-multiply 让彩斑落在文字旁边作为氛围背景
 *   - 上一版把它当成"产品主图"是错读了设计意图
 *
 * 这次的策略：
 *   1. 保留原 grid-cols-12 + grid-flow-dense 布局（不强行改成两栏）
 *   2. shape 彩斑用更克制的方式呈现：缩小、透明、推向品牌色相
 *   3. 文字侧改成"玻璃卡片"，用半透明 + backdrop-blur 让阅读区稳重
 *   4. 段落上方加大号编号"01 / 02"作为视觉锚点
 */

/* —— 让原 grid-flow-dense 确实生效（之前 v4 把它改成 2 列网格了，撤回） —— */
@media (min-width: 1024px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        column-gap: 32px !important;
        row-gap: 100px !important;
        padding-top: 80px !important;
        align-items: center !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64 > .col-span-12.md\:col-span-6 {
        grid-column: span 6 / span 6 !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64 > .col-span-12.md\:col-span-6.md\:col-start-7 {
        grid-column: 7 / span 6 !important;
    }
}

/* —— shape 彩斑：缩小、降饱和、推到品牌色相，像氛围光球 —— */
@media (min-width: 768px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16 .col-span-12.md\:col-span-6:not(.relative.z-10) > .relative > div[style*="background-image"] {
        opacity: 0.55 !important;
        transform: translate(-50%, -50%) scale(0.72) !important;
        filter: hue-rotate(225deg) saturate(0.85) blur(2px) !important;
        mix-blend-mode: multiply !important;
    }
}

/* 移动端：彩斑直接隐藏，避免错位与重叠 */
@media (max-width: 767px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16 .col-span-12.md\:col-span-6:not(.relative.z-10) > .relative > div[style*="background-image"] {
        display: none !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16 .col-span-12.md\:col-span-6:not(.relative.z-10) {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64.pt-\[390px\] {
        padding-top: 24px !important;
    }
}

/* —— 文字侧：玻璃卡片，浮在彩斑之上做阅读层 —— */
@media (min-width: 1024px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64 > .relative.z-10.col-span-12.md\:col-span-6 {
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(18px) saturate(1.1);
        -webkit-backdrop-filter: blur(18px) saturate(1.1);
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 24px;
        padding: 44px 40px !important;
        box-shadow:
            0 24px 60px -28px rgba(37, 99, 235, 0.18),
            0 6px 18px -6px rgba(15, 23, 42, 0.08);
        align-self: center;
    }
}
@media (max-width: 1023px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64 > .relative.z-10.col-span-12.md\:col-span-6 {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--hnxy-line);
        border-radius: 20px;
        padding: 28px 24px !important;
        box-shadow: 0 14px 30px -18px rgba(37, 99, 235, 0.18);
    }
}

/* —— 文字卡片左侧装饰条 + 编号水印 —— */
.grid.grid-cols-12.grid-flow-dense .col-span-12.md\:col-span-6.relative.z-10 {
    counter-increment: hnxyProd;
}
.grid.grid-cols-12.grid-flow-dense {
    counter-reset: hnxyProd;
}
.grid.grid-cols-12.grid-flow-dense .col-span-12.md\:col-span-6.relative.z-10::before {
    content: "0" counter(hnxyProd);
    position: absolute;
    top: 14px;
    right: 28px;
    font-family: Lexend, "Segoe UI Semibold", sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -.05em;
    background: var(--hnxy-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    z-index: 0;
}
@media (max-width: 767px) {
    .grid.grid-cols-12.grid-flow-dense .col-span-12.md\:col-span-6.relative.z-10::before {
        font-size: 44px;
        top: 8px;
        right: 18px;
    }
}

/* ---------- G5. 应用领域：左列加白卡片（保留原 5 / 7 联动列宽） ---------- */
@media (min-width: 1024px) {
    [x-data="xAccordion"][data-items-count="6"] > .grid.grid-cols-12,
    [x-data="xAccordion"][data-items-count="7"] > .grid.grid-cols-12 {
        column-gap: 32px;
    }
    [x-data="xAccordion"][data-items-count="6"] > .grid.grid-cols-12 > .col-span-12:first-child,
    [x-data="xAccordion"][data-items-count="7"] > .grid.grid-cols-12 > .col-span-12:first-child {
        background: #fff;
        border-radius: 24px;
        padding: 14px 28px !important;
        border: 1px solid var(--hnxy-line);
        box-shadow: 0 14px 40px -24px rgba(15, 23, 42, 0.12);
        align-self: start;
    }
}

/* ---------- G6. 项目轮播：上下两张大卡片堆叠 → 改成 3 列网格 ---------- */
@media (min-width: 1024px) {
    .swiper#card-slider-1 {
        overflow: visible !important;
    }
    .swiper#card-slider-1 > .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
        transform: none !important;
        align-items: stretch !important;
    }
    .swiper#card-slider-1 > .swiper-wrapper > .swiper-slide {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        transform: none !important;
    }
    /* 既然变成网格了，prev/next 隐藏掉 */
    #card-slider-1-prev, #card-slider-1-next {
        display: none !important;
    }
}

/* ---------- G7. 合作伙伴 logo：从横向滚动 → 等距 6 列网格 ---------- */
@media (min-width: 1024px) {
    [x-data="xHorizontalScroll"] {
        overflow: visible !important;
    }
    [x-data="xHorizontalScroll"] > [x-ref="scroll"] {
        transform: none !important;
        width: 100% !important;
    }
    [x-data="xHorizontalScroll"] .flex.justify-between.gap-14 {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 32px !important;
        align-items: center !important;
        justify-items: center !important;
    }
    [x-data="xHorizontalScroll"] [&_img]\:h-14 img,
    [x-data="xHorizontalScroll"] img {
        height: 56px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* ---------- G8. 关于我们：标题从右侧覆盖 → 居中浮卡片 ---------- */
@media (min-width: 1024px) {
    section .relative.rounded-4xl.aspect-\[7\/11\].landscape\:aspect-auto.landscape\:h-screen,
    section .relative.rounded-4xl.aspect-\[7\/11\] {
        aspect-ratio: 16 / 7 !important;
        height: auto !important;
        min-height: 480px;
        max-height: 620px;
    }
    /* 把标题/链接整体居中 + 加玻璃卡片 */
    section .relative.rounded-4xl.aspect-\[7\/11\] .container,
    section .relative.rounded-4xl.landscape\:h-screen .container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section .relative.rounded-4xl.aspect-\[7\/11\] .col-span-12.lg\:col-start-6.lg\:col-span-7,
    section .relative.rounded-4xl.landscape\:h-screen .col-span-12.lg\:col-start-6.lg\:col-span-7 {
        grid-column: 1 / -1 !important;
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 24px;
        padding: 40px 36px;
        position: relative;
        z-index: 3;
    }
    section .relative.rounded-4xl.aspect-\[7\/11\] .h2.text-white {
        text-align: center;
    }
    section .relative.rounded-4xl.aspect-\[7\/11\] .h2.text-white::before {
        position: static;
        display: block;
        width: 60px;
        height: 4px;
        margin: 0 auto 20px;
    }
}

/* ---------- G9. 技术资质：从两栏 → 三栏网格 ---------- */
@media (min-width: 1024px) {
    .grid.grid-cols-12.grid-flow-dense.pt-6.lg\:pt-\[100px\] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
    .grid.grid-cols-12.grid-flow-dense.pt-6.lg\:pt-\[100px\] > .col-span-12 {
        grid-column: auto !important;
        padding-right: 0 !important;
    }
    /* 第三列：留一块装饰 / 公司精神（用 ::after 注入） */
    .grid.grid-cols-12.grid-flow-dense.pt-6.lg\:pt-\[100px\]::after {
        content: "技术 · 创新 · 安全";
        font-family: Lexend, "Segoe UI Semibold", sans-serif;
        font-size: 28px;
        line-height: 1.4;
        font-weight: 600;
        background: var(--hnxy-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-color: #fff;
        border: 1px solid var(--hnxy-line);
        border-radius: 22px;
        padding: 36px 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 14px 40px -24px rgba(109, 40, 217, 0.30);
    }
}

/* ---------- G10. 页脚顶部三栏：等宽 + 居中 + 加分隔线 ---------- */
section.relative .grid.grid-cols-12.grid-flow-dense.gap-y-10 {
    gap: 32px !important;
}
@media (min-width: 1024px) {
    /* 公司介绍 4 / 公司名称 4 / 关注我们 4 重新摆 */
    section.relative .grid.grid-cols-12.grid-flow-dense.gap-y-10 > .col-span-12.lg\:col-span-4 {
        grid-column: span 4 / span 4 !important;
    }
    section.relative .grid.grid-cols-12.grid-flow-dense.gap-y-10 > .col-span-12.sm\:col-span-7.lg\:col-span-4.lg\:col-start-6 {
        grid-column: 5 / span 4 !important;
        border-left: 1px solid var(--hnxy-line);
        border-right: 1px solid var(--hnxy-line);
        padding: 0 32px !important;
    }
    section.relative .grid.grid-cols-12.grid-flow-dense.gap-y-10 > .col-span-12.sm\:col-span-4.sm\:col-start-8.lg\:col-span-3.lg\:col-start-10 {
        grid-column: 9 / span 4 !important;
    }
}

/* ---------- G11. 全局 h2 增大留白 + 段落最大宽度 ---------- */
.h2 { margin-bottom: 0.5em; }
.lead.content > p {
    max-width: 72ch;
}
section .lead.content.content-limit-width > p {
    max-width: 820px;
}

/* ---------- G12. Section 容器两侧统一加 24px 安全区 ---------- */
section .container.px-5 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
@media (min-width: 1024px) {
    section .container.px-5 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ---------- G13. 节区圆角块：内边距加大，让卡片不贴边 ---------- */
section .bg-gray-100.rounded-4xl {
    padding: 64px 0 !important;
}
@media (min-width: 1024px) {
    section .bg-gray-100.rounded-4xl {
        padding: 100px 0 !important;
    }
}

/* ---------- G14. 移动端：所有"绝对定位贴边形状"取消，避免错位 ---------- */
@media (max-width: 1023px) {
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32 > .col-span-12.md\:col-span-6:not(.relative.z-10) > div > div[style*="background-image"] {
        position: relative !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 0 16px !important;
        border-radius: 18px !important;
        mix-blend-mode: normal !important;
        background-color: var(--hnxy-bg) !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32 > .col-span-12.md\:col-span-6:not(.relative.z-10) > div {
        height: auto !important;
    }
    main > section .grid.grid-cols-12.grid-flow-dense.gap-y-16.md\:gap-y-32.lg\:gap-y-64.pt-\[390px\] {
        padding-top: 24px !important;
    }
}