/* ============================================================
 * 超级节点官网 V2 · 全站公共样式
 * 规范来源：《重构规则.md》第七章/第十一章/第十二章/第十三章/第十四章
 * ========================================================== */

/* ---------- 字体（第七章第4条：PingFang 统一引入；2026-09-29 迁七牛 CDN + 子集化 woff2） ----------
 * 双链保险：woff2（子集化，约 210KB/档）优先 + ttf（全量 10MB/档）后备——
 * woff2 未上传或 404 时浏览器自动落回 ttf，任何情况都不会没字体。
 * 子集字符集由 _image_audit/font-subset.js 从全部页面源码提取，改文案后重跑并重传 woff2 */
@font-face {
    font-family: 'PingFang SC';
    src: url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-regular.woff2') format('woff2'),
         url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PingFang SC';
    src: url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-medium.woff2') format('woff2'),
         url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PingFang SC';
    src: url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-bold.woff2') format('woff2'),
         url('https://qnoss.supernode.pro/supernode/pc/static/fonts/pingfang-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- 全站变量 ---------- */
:root {
    --primary: #416BF5;
    --primary-hover: #1F5BFC;
    --outline-bg: transparent;
    --outline-bg-hover: #F4F4F4;
    --text-main: #1D2129;
    --text-sub: #4E5969;
    --header-bg: #000000;
    --footer-bg: #1A1A1A;
    --footer-text: #FFFFFF;
    --footer-copy: #3D3D3D;
    --container: 1428px;
    --header-h: clamp(72px, 5.2vw, 100px); /* 头部高度：1200~1920 流式，1920 封顶 */
    --ease-zoom: cubic-bezier(0, 0, 0.5, 1);
}

/* ---------- 基础重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    /* 轮播 viewport 出血公式基于 100vw（含纵向滚动条 15px），Windows 经典滚动条下整页横向溢出约 8px；
       全局隐藏横向溢出兜底，禁止各页重复书写（2026-09-18） */
    overflow-x: hidden;
}
/* 与 body min-width:1200 的配合（2026-09-21 修复）：hidden 会吞掉视口横向滚动条，
   导致 <1200 视口时右侧内容被静默裁切且无法滚到；此处 <1200 还原滚动条，
   ≥1200 保留 hidden 兜底（防 100vw 出血公式 ~8px 溢出） */
@media (max-width: 1199.98px) {
    html {
        overflow-x: auto;
    }
}
body {
    font-family: 'PingFang SC', -apple-system, 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-main);
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    min-width: 1200px; /* PC 端适配下限，低于 1200 出横向滚动条（移动端另有 _m 页面） */
}
img {
    display: block;
    max-width: 100%;
    border: 0;
}
a {
    text-decoration: none;
    color: inherit;
}
ul, ol {
    list-style: none;
}
button, input, textarea {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

.container {
    width: 100%;
    max-width: 1476px; /* 内容区 1428 + 左右各 24 内边距，窄屏不贴边 */
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ---------- 按钮（第十二章） ---------- */
/* 大按钮：166×53 */
.btn-primary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 166px;
    height: 53px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* 实体按钮：#416BF5 → hover #1F5BFC */
.btn-primary {
    background-color: var(--primary);
    color: #FFFFFF;
}
.btn-primary:hover {
    background-color: var(--primary-hover);
}
/* 小按钮：125×46（卡片内"进一步了解"） */
.btn-small {
    width: 125px;
    height: 46px;
}
/* 空心按钮：默认透明 → hover 内部填充 #F4F4F4 */
.btn-outline {
    background-color: var(--outline-bg);
    color: var(--text-main);
    border: 1px solid var(--text-main);
}
.btn-outline:hover {
    background-color: var(--outline-bg-hover);
}

/* ---------- 卡片悬停放大（第十三章：外层整卡放大 scale 1.02） ----------
 * 用法：卡片元素外包一层 .card-zoom，hover 放大外层；
 * 内层卡片与图片不做任何 transform，图片零裁切，切图自带描边完整保留。 */
.card-zoom {
    transition: transform .3s var(--ease-zoom);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .card-zoom:hover {
        transform: scale(1.02);
    }
    /* 修复：卡片同时带 .reveal-item 时，reveal 的 transform（初始 translateY(30px)/
       done translateY(0)/skip none）特异性高于 .card-zoom:hover，会永久压制放大 hover。
       以更高特异性补回 scale，并保留 reveal 归位后的 translateY(0)。 */
    html.js .reveal-item.card-zoom:hover {
        transform: translateY(0) scale(1.02);
    }
    html.js .reveal-item.card-zoom.reveal-done:hover {
        transform: translateY(0) scale(1.02);
    }
}

/* ---------- 图片等比自适应（防拉伸变形，2026-09-18 修复） ----------
 * HTML 的 width/height 属性是「呈现提示」：CSS 只覆盖 width 时，
 * height 属性值会被当作固定高度生效（如 height="1280" → 1280px），
 * 与 width:100% 叠加导致图片纵向拉变形。此处统一改为高度等比自适应；
 * 未加载时浏览器仍用属性宽高比占位（防 CLS）。 */
img[width][height] {
    height: auto;
}

/* ---------- 滚动渐入动画（第十一章） ----------
 * JS 可用时由页面 head 内联脚本给 <html> 加 .js，动画元素从首帧即隐藏，
 * 避免「先看见→再隐藏→再淡入」的首屏闪烁；JS 禁用 / global.js 加载失败
 * （内联脚本 3s 超时兜底移除 .js）时内容正常静态显示（降级方案）。
 * 模块进入视口后由 JS 加 .reveal-done 播放动画，仅播放一次。 */
html.js .reveal-item {
    opacity: 0;
    transform: translateY(30px);
}
html.js .reveal-item.reveal-done {
    opacity: 1;
    transform: translateY(0);
    /* 位移 0.7s、淡入 0.9s 同时开始，慢-快-慢缓动；
       交错延迟由 JS 按 DOM 顺序写入 transition-delay（每项 +0.15s） */
    transition: transform .7s ease-in-out, opacity .9s ease-in-out;
}
/* 非首页第一个（顶部）模块例外（重构规则第十一章第 11 条）：
   JS 给该模块加 .reveal-skip，其内元素直接静态显示，不播向上滚动动画 */
html.js .reveal-skip .reveal-item {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js .reveal-item {
        opacity: 1;
        transform: none;
    }
    html.js .reveal-item.reveal-done {
        transition: none;
    }
}

/* ============================================================
 * Header 顶部菜单（第十四章）
 * ========================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    background-color: var(--header-bg);
    /* 滚动方向感知自动隐藏（js/v2/global.js）：向下滚动滑出、向上滚动滑回；
       全站标准缓动（苹果实测曲线），位移 .4s。
       注意：显示态绝不能有 transform 值（含 translateY(0)）也不能 will-change:transform，
       否则 header 会成为 fixed 后代 .nav-curtain 的包含块，遮罩定位基准被改坏 */
    transition: transform .4s cubic-bezier(0.4, 0, 0.6, 1);
}
.site-header.header-hidden {
    transform: translateY(-100%);
}
.site-header .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-header .logo img {
    height: clamp(32px, 2.3vw, 44px);
    width: auto;
}
.site-header .nav {
    display: flex;
    align-items: center;
    height: 100%;
}
.site-header .nav-item {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: clamp(15px, 1.05vw, 20px);
    font-weight: 400;
    color: #FFFFFF;
    transition: color .3s ease;
    white-space: nowrap;
}
.site-header .nav-item + .nav-item {
    margin-left: clamp(24px, 2.5vw, 48px);
}
.site-header .nav-item:hover,
.site-header .nav-item.active {
    color: var(--primary);
}
/* 固定头部占位 */
.header-placeholder {
    height: var(--header-h);
}
/* 模板注入前预占头部高度，防止注入瞬间页面下跳 */
#siteHeader:empty {
    display: block;
    height: var(--header-h);
}

/* ---------- 下拉巨型菜单（动画对标苹果官网导航，实测参数） ----------
 * 横带：高度 0 → 内容高度，时长 clamp(240ms, 高度/2, 480ms)，cubic-bezier(0.4,0,0.6,1)；
 * 子项：opacity 0→1 + translateY(-4px→0)，320ms ease，组间 40ms / 组内 20ms 交错；
 * 遮罩：rgba(232,232,237,.4) + blur(20px)，320ms，延迟 80ms；
 * --drop-rate / --d / --dur 均由 JS 写入（见 js/v2/global.js）。 */
.nav-dropdown {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    background-color: var(--header-bg);
    visibility: hidden;
    /* 关闭：高度收起完成后再隐藏 */
    transition: height var(--drop-rate, 240ms) cubic-bezier(0.4, 0, 0.6, 1),
                visibility 0s linear var(--drop-rate, 240ms);
}
.nav-dropdown.open {
    visibility: visible;
    transition: height var(--drop-rate, 240ms) cubic-bezier(0.4, 0, 0.6, 1);
}
.nav-dropdown .container {
    padding-top: 24px;
    padding-bottom: 40px;
}
.nav-drop-col {
    position: absolute;
    top: 24px;
}
.nav-drop-item {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.19;
    color: #FFFFFF;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    /* --d 为交错延迟（仅作用于淡入/位移，不影响 hover 变色）；--dur 开 320ms / 关 200ms */
    transition: opacity var(--dur, 320ms) ease var(--d, 0ms),
                transform var(--dur, 320ms) ease var(--d, 0ms),
                color .3s ease 0ms;
}
.nav-dropdown.open .nav-drop-item {
    opacity: 1;
    transform: translateY(0);
}
.nav-drop-item + .nav-drop-item {
    margin-top: 16px;
}
.nav-drop-item:hover,
.nav-drop-item.active {
    color: var(--primary);
}
/* 页面遮罩：下拉展开时全屏虚化（苹果官网效果），点击遮罩关闭下拉。
   注意：backdrop-filter 只在 .open 时施加——收起状态下若仍带 backdrop-filter，
   即使 opacity:0/visibility:hidden，该 fixed 全屏层在部分 Chrome 仍会保持“活的”模糊快照，
   任何一次页面重绘（如点击 Tab 切换大图）都要重算整屏 blur，硬件加速下反复点击会打爆 GPU 卡死。 */
.nav-curtain {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(232, 232, 237, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s cubic-bezier(0.4, 0, 0.6, 1) .08s,
                visibility 0s linear .4s;
}
.nav-curtain.open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: opacity .32s cubic-bezier(0.4, 0, 0.6, 1) .08s;
}
@media (prefers-reduced-motion: reduce) {
    .nav-dropdown,
    .nav-drop-item,
    .nav-curtain {
        transition: none !important;
    }
    .site-header {
        transition: none; /* 减少动态效果：header 直接显隐，不播滑动动画 */
    }
}

/* ============================================================
 * Footer 底部模板（第十四章）
 * ========================================================== */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}
.site-footer .footer-main {
    display: flex;
    padding-top: clamp(40px, 3.65vw, 70px);
    padding-bottom: clamp(32px, 3.1vw, 60px);
}
/* 链接栏目区 */
.site-footer .footer-links {
    display: flex;
    flex: 1;
}
.site-footer .footer-col + .footer-col {
    margin-left: clamp(32px, 3.65vw, 70px);
}
/* 栏目标题：PingFang Bold 16px（MiSans 以 PingFang Bold 近似，已裁决），
   标题可点击跳转但 hover 不变色（第十四章第2条） */
.site-footer .footer-col-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.19;
    color: var(--footer-text);
    margin-bottom: 21px;
}
/* 子项：PingFang 400 14px，hover #416BF5 */
.site-footer .footer-col-item {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.19;
    color: var(--footer-text);
    transition: color .3s ease;
}
.site-footer .footer-col-item + .footer-col-item {
    margin-top: 16px;
}
.site-footer .footer-col-item:hover {
    color: var(--primary);
}
/* 联系我们 */
.site-footer .footer-contact {
    flex-shrink: 0;
}
.site-footer .footer-contact-text {
    display: block;
    font-size: 14px;
    line-height: 1.19;
    color: var(--footer-text);
    transition: color .3s ease;
}
.site-footer .footer-contact-text + .footer-contact-text {
    margin-top: 16px;
}
.site-footer .footer-contact-text:hover {
    color: var(--primary);
}
/* 二维码区 */
.site-footer .footer-codes {
    display: flex;
    margin-top: 26px;
}
.site-footer .footer-code {
    text-align: center;
}
.site-footer .footer-code + .footer-code {
    margin-left: clamp(14px, 1.25vw, 24px);
}
.site-footer .footer-code img {
    width: clamp(80px, 5.2vw, 100px);
    height: clamp(80px, 5.2vw, 100px);
    transition: transform .3s var(--ease-zoom);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .site-footer .footer-code:hover img {
        transform: scale(1.02);
    }
}
.site-footer .footer-code span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--footer-text);
}
/* 版权行：12px #3D3D3D（用户标注） */
.site-footer .footer-copy {
    padding-bottom: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: var(--footer-copy);
}
.site-footer .footer-copy a {
    color: inherit;
}

/* ============================================================
 * 通用联系弹窗（data-modal 驱动，全站共用，js/v2/global.js 注入）
 * 复用 cuxiao 弹窗视觉规范：遮罩加深+毛玻璃、24px 圆角、关闭钮外切、
 * frame 弹簧入场、内容超 90vh 起滚且隐藏滚动条。
 * 切图逻辑尺寸 1000×850（@2x 2000×1699），宽按 1920 基准 52.083vw，min 取 @1440=750。
 * ========================================================== */
.sn-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.sn-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .28s ease;
}
/* 遮罩：加深 + 毛玻璃（仅 open 时渲染，无 GPU 常驻风险） */
.sn-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* frame：进场动画 + 关闭钮定位基准 */
.sn-modal-frame {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(18px) scale(.96);
    transition: transform .36s cubic-bezier(.32, .72, .36, 1), opacity .36s ease;
}
.sn-modal.open .sn-modal-frame {
    opacity: 1;
    transform: none;
}
/* 关闭钮（CSS 自绘 ×）：位于弹窗右上角外侧，与弹窗上/右边缘各留 6px 间隙（钮 28px → top/right = -(28+6)） */
.sn-modal-close {
    position: absolute;
    top: -34px;
    right: -34px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
    cursor: pointer;
    padding: 0;
    transition: transform .25s ease, background .25s ease;
}
.sn-modal-close::before,
.sn-modal-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    height: 1.5px;
    background: #1D1D1F;
    border-radius: 1px;
}
.sn-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sn-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sn-modal-close:hover {
    background: #FFFFFF;
    transform: scale(1.1);
}
/* 滚动容器＝弹窗本体：宽按 1920 基准 500（用户裁决：原 1000 缩小二分之一），超 90vh 起滚，圆角 24 + 分层投影 + 隐滚动条 */
.sn-modal-scroll {
    width: clamp(375px, 26.042vw, 500px);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .24);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sn-modal-scroll::-webkit-scrollbar { display: none; }
.sn-modal-img {
    width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    border-radius: 24px;
}
@media (prefers-reduced-motion: reduce) {
    .sn-modal,
    .sn-modal-frame,
    .sn-modal-close {
        transition: none;
    }
}