/* ============================================================
   YC-pro-v7.css — 全站质感叠加层 · 2026-10-24
   叠加式覆盖：不改动 YC-pro-critical.css / YC-pro-defer.css 里的任何既有规则。
   回退方式：删掉 YC-pro-header.php 里对 YC-pro-v7.css 的那一个 <link> 即恢复原样。
   设计语言与 chat.php 的「v7 质感层」同一套：
   色阶收敛、暗底不用纯白、字重降一档补偿光晕、双环聚焦、等宽数字、防孤字、减动。
   ============================================================ */

/* ---------- 1. 设计令牌：圆角 3 档 / 阴影 2 档 / 间距 4px 网格 ---------- */
:root{
  --r-1: 8px;      /* 小件：标签、图标块、输入框、缩略图 */
  --r-2: 12px;     /* 常规容器：卡片、图框 */
  --r-3: 16px;     /* 大容器：弹层、大卡片 */

  --sh-1: 0 2px 10px rgba(0,0,0,.28);      /* 静置层 */
  --sh-2: 0 14px 40px rgba(0,0,0,.44);     /* 抬起层 */

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;

  /* 旧令牌统一落到新档位，避免两套刻度并存 */
  --radius-sm: var(--r-1);
  --radius-md: var(--r-2);
  --radius-lg: var(--r-3);
  --radius-xl: var(--r-3);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-1);
  --shadow-lg: var(--sh-2);

  /* 聚焦外环：暗底 #7FD4FF 对 #050A18 ≈ 11:1，亮底 #005FCC 对 #F7F7F5 ≈ 6.4:1，均 > 3:1 */
  --ring: #7FD4FF;
  --ring-bg: #050A18;
}
html.light{
  --ring: #005FCC;
  --ring-bg: #F7F7F5;
}

/* ---------- 2. 圆角收档：字面量半径统一进 3 档 ---------- */
.logo-item .li-logo,
.footer-about img,
.job-meta span,
.cert-icon,
.region-card .rc-tag { border-radius: var(--r-1); }

.card-icon,
.card-icon-img img,
.strength-card .si,
.modal-content img,
.welfare-card .wi,
.group-slogan { border-radius: var(--r-2); }
.globe-legend,
.globe-stats,
.cert-item,
.map-container,
.region-card { border-radius: var(--r-2); }

.domain-result .badge,
.job-badge,
.value-card .vc-icon,
.globe-wrap,
.map-tab,
.map-desc .dots span { border-radius: var(--r-3); }

/* ---------- 3. 阴影收档：卡片/弹层只保留两级高度 ---------- */
.modal-content,
.cookie-pop .cookie-content,
.float-customer{ box-shadow: var(--sh-2); }
.card:hover,
.strength-card:hover,
.product-card:hover{ box-shadow: var(--sh-1); }

/* ---------- 4. 间距走 4px 网格（只动共享骨架，页面自有区块不重排） ---------- */
.container{ padding-left: var(--space-6); padding-right: var(--space-6); }
@media (max-width: 900px){ .container{ padding-left: var(--space-4); padding-right: var(--space-4); } }
.btn{ padding: var(--space-4) var(--space-7); gap: var(--space-3); }
.btn-sm{ padding: var(--space-2) var(--space-4); }
.hdr-link{ padding: var(--space-2) var(--space-3); }
.header-flex{ gap: var(--space-5); }
.footer-grid{ gap: var(--space-7); margin-bottom: var(--space-7); }

/* ---------- 5. 暗色正文：不用纯白 + 字重降一档 ---------- */
:root{
  --text-white: #EEF3FA;    /* 纯白在暗底会发胖、边缘出光晕 */
  --text-primary: #DCE6F4;
  --text-secondary: #A6B6CE;
}
/* 亮色主题沿用原有更深的那套文字色（html.light 的特异性天然高于 :root，
   这里不覆盖，避免把正文提亮后压不住亮底背景） */
body{ font-weight: 350; }
p, li, figcaption, blockquote, .hero-sub, .card p, .footer-about p{ font-weight: 350; }

/* ---------- 6. 数字等宽：统计、价格、时间戳不跳动 ---------- */
body, table, .stat, .stat-item, .hero-stat, .price, .meta, time{ font-variant-numeric: tabular-nums; }

/* ---------- 7. 防孤字 ---------- */
h1, h2, h3, h4, h5, .hero-title, .section-title, .modal-content h3, .cookie-content p:first-child{
  text-wrap: balance;
}
p, li, figcaption, .hero-sub, .card p, .footer-links a, .footer-legal p{ text-wrap: pretty; }

/* ---------- 8. 聚焦：双环咬合，外环可辨识（≥3:1） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ring-bg);   /* 内侧咬合环，和任何底色都能读出双环 */
  border-radius: inherit;
}

/* ---------- 9. 行内图标对齐：与文字基线咬合 ---------- */
i.fas, i.far, i.fab, .fa-solid, .fa-regular, .fa-brands,
.btn i, .card-link i, .seal-badge svg, .hero-badge i{
  vertical-align: -0.125em;
}

/* ---------- 10. 减动：系统要求减少动态效果时关停装饰性动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .glow-orb{ animation: none !important; }
  html{ scroll-behavior: auto !important; }
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .btn, .strength-card, .product-card, .pc-nav a, .float-customer{
    transition: none !important;
  }
  .card:hover, .btn:hover, .strength-card:hover, .product-card:hover, .float-customer:hover{
    transform: none !important;
  }
  main.site-main{ transition: none !important; }
}

/* ---------- 19. 全球节点 · 3D 地球区块：加强入场 ----------
   全站统一的 .reveal 只有 32px 上浮 + 淡入，对地球这种大块内容太不明显。
   这里对 .globe-wrap 单独加强：从略小(0.94)长大到位 + 上浮，时长 0.9s。
   特异性 html.js .globe-wrap.reveal (0,3,1) 高于 html.js .reveal (0,2,1)，可稳定覆盖。
   减弱动效时由本文件第 12 节的 .reveal 规则强制还原。 */
@media (prefers-reduced-motion: no-preference){
  html.js .globe-wrap.reveal{
    opacity:0;
    transform:translateY(32px) scale(.94);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
    transform-origin:center center;
  }
  html.js .globe-wrap.reveal.in{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ---------- 20. 移动端适配修正 ---------- */
@media (max-width:768px){
  /* Logo 图本身已含「阅丞集团 ycceo.com」字样，右侧文字版重复，造成双 Logo 重叠 */
  .logo-group .brand-name{ display:none; }

  /* Cookie 条在窄屏上铺到 right:20，会压住右下角的悬浮客服按钮 */
  .cookie-pop{ right:88px; max-width:none; }
  /* 文字独占整行，否则 flex 横向布局会被挤成竖排 */
  .cookie-content{ flex-wrap:wrap; gap:10px; }
  .cookie-content p{ flex:1 1 100%; font-size:.84rem; line-height:1.65; }
  .cookie-btns{ display:flex; gap:8px; }
  .cookie-btns .btn{ flex:1; }
}

/* 超窄屏（≤360）进一步收紧，避免 Cookie 文案被挤成一行两字 */
@media (max-width:360px){
  .cookie-pop{ right:76px; padding:14px 16px; }
}

/* ---------- 21. 响应式补丁 ---------- */
/* critical 内联在前、defer 异步在后，基础规则会反向覆盖媒体查询。
   这里把 critical 里的全部 @media 原样搬到最后一个样式表，恢复正确覆盖顺序。 */
@media (prefers-reduced-motion: reduce) { main.site-main { transition: none; } }
@media (max-width: 900px) {
    .video-bg-container video,
    .video-bg-container img {
        object-position: center center;
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 900px) { .glow-orb { display: none; } }
@media (max-width: 768px) {
    .hero-slogan { margin: -14px auto 24px; }
    .hero-slogan span { font-size: 1.05rem; letter-spacing: 2px; }
}
@media (max-width: 1180px) {
    .hdr-link { display: none; }
    .pc-nav a { padding: 7px 10px; font-size: 0.84rem; }
}
@media (max-width: 1024px) {
    .hero-title { font-size: 3.2rem; }
    .about-hero h1 { font-size: 2.8rem; }
    .strength-wrap { grid-template-columns: repeat(2, 1fr); }
    .four-cols { grid-template-columns: repeat(2, 1fr); }
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    /* 导航切换为手机菜单 */
    .pc-nav { display: none; }
    .pc-only { display: none !important; }
    .mobile-menu-btn { display: flex; }
    .header-flex { height: 64px; gap: 12px; }
    /* 手机端固定顶栏 64px，锚点定位补偿相应减小 */
    html { scroll-padding-top: 72px; }
    .brand-name { font-size: 1.25rem; }
    .logo { height: 34px; }
    .icon-btn { width: 38px; height: 38px; font-size: 1rem; }
}
@media (max-width: 900px) {
    .hero-badge { display: none; }

    .hero-section {
        min-height: 90vh;
        padding: 100px 20px 60px;
    }
    .hero-title { font-size: 2.4rem; letter-spacing: -0.5px; }
    .hero-sub { font-size: 1.02rem; }
    .hero-stats { gap: 24px; margin-top: 40px; margin-bottom: 56px; }
    .hstat .v { font-size: 1.3rem; }
    .hstat .l { font-size: 0.78rem; }
    .scroll-hint { bottom: 20px; gap: 4px; font-size: 0.72rem; }
    .scroll-hint i { font-size: 1rem; }

    .section { padding: 56px 0; }
    .section-header h2 { font-size: 1.8rem; }
    .section-desc { font-size: 0.98rem; }

    .three-cols, .four-cols, .two-cols { grid-template-columns: 1fr; }
    .strength-wrap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .value-grid { grid-template-columns: 1fr; }

    .glass-card { padding: 28px 22px; }
    .card-icon { width: 56px; height: 56px; font-size: 1.5rem; }
    .card-icon img { width: 44px; height: 44px; }

    .logo-wall .container { flex-wrap: wrap; gap: 16px; }
    .logo-label { width: 100%; text-align: center; }
    .logo-row { gap: 36px; padding-right: 36px; }

    .domain-input-group { flex-direction: column; border-radius: var(--radius-md); }
    .domain-input { padding: 16px 18px; font-size: 1rem; }
    .domain-suffix-select {
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding: 14px 18px;
        width: 100%;
    }
    .domain-search-btn {
        border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
        padding: 16px;
        width: 100%;
    }

    .cta-banner { padding: 44px 28px; border-radius: var(--radius-lg); }
    .cta-banner h3 { font-size: 1.5rem; }
    .cta-banner p { font-size: 1rem; }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
    }
    .footer-about { align-items: center; }
    .footer-links { justify-content: center; }
    .footer-legal { text-align: center; }

    .float-customer { width: 50px; height: 50px; font-size: 1.2rem; bottom: 20px; right: 20px; }

    .job-card { padding: 28px 22px; }
    .job-head h3 { font-size: 1.25rem; }
    .job-salary { font-size: 1.05rem; }

    .about-hero {
        min-height: 85vh;
        padding: 120px 20px 70px;
    }
    .about-hero h1 { font-size: 2.2rem; }
    .about-hero .slogan { font-size: 1.1rem; letter-spacing: 2px; }
    .about-hero p { font-size: 1rem; }

    .timeline { padding-left: 32px; }
    .timeline-item { padding: 20px 22px; }
    .timeline-item::before { left: -28px; width: 12px; height: 12px; }

    .btn { padding: 12px 26px; font-size: 0.95rem; }
    .btn-lg { padding: 14px 32px; font-size: 1rem; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { gap: 18px; }
    .hstat { padding-left: 14px; }

    .strength-wrap { grid-template-columns: 1fr; }

    .section-header h2 { font-size: 1.6rem; }
    .section { padding: 44px 0; }

    .mobile-nav { width: 100%; }

    .cookie-pop { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media (max-width: 900px) {
    /* container 收紧内边距 */
    .container { padding: 0 16px; }

    /* YOS 工作原理 5列 → 1列 */
    .yos-steps {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .yos-steps .strength-card {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center !important;
        gap: 14px;
    }
    .yos-steps .strength-card > div:first-child {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }
    .yos-steps .strength-card h4 {
        text-align: left !important;
        margin: 0 0 4px 0 !important;
    }
    .yos-steps .strength-card p {
        text-align: left !important;
    }

    /* essay 文章卡片内边距收紧 */
    .essay-article {
        padding: 32px 20px !important;
    }

    /* chen 证书模态框 */
    .cert-modal .modal-content {
        max-width: 92vw !important;
        padding: 16px !important;
        margin: 10% auto !important;
    }

    /* ZN 招聘页 CTA 长文字按钮 */
    .cta-banner .btn {
        word-break: break-all;
        line-height: 1.5;
    }

    /* job 卡片在小屏进一步收紧 */
    .job-card {
        padding: 22px 18px !important;
    }
    .job-head h3 {
        font-size: 1.2rem !important;
    }
    .job-salary {
        font-size: 1rem !important;
    }
    .job-salary span {
        display: block;
        font-size: 0.85rem;
        margin-top: 2px;
    }
    .job-block ul {
        padding-left: 18px;
    }
    .job-block li {
        font-size: 0.92rem;
        line-height: 1.7;
    }

    /* 合作伙伴 logo 墙手机端适配 */
    .logo-wall {
        overflow: hidden;
        padding: 24px 0;
    }
    .logo-wall .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .logo-label {
        font-size: 0.78rem;
    }
    .logo-track {
        max-width: 100%;
        gap: 10px;
        width: 100%;
    }
    .logo-row {
        gap: 28px;
        padding-right: 28px;
    }
    .logo-item {
        gap: 6px;
    }
    .logo-item .li-logo {
        width: 88px;
        height: 40px;
        padding: 4px 8px;
        border-radius: 8px;
    }
    .logo-item .li-logo svg,
    .logo-item .li-logo img {
        max-height: 24px;
    }
    .logo-item .li-name {
        font-size: 0.68rem;
    }

    /* 域名查询输入框确保不溢出 */
    .domain-search-box {
        width: 100%;
        box-sizing: border-box;
    }
    .domain-input-group {
        width: 100%;
        box-sizing: border-box;
    }

    /* hero 统计数字防止溢出 */
    .hero-stats {
        gap: 20px !important;
    }
    .hstat {
        min-width: 0;
    }
    .hstat .v {
        font-size: 1.15rem !important;
        word-break: break-word;
    }

    /* 所有表格防溢出 */
    .styled-table, .cart-table, .admin-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 按钮文字换行 */
    .btn {
        word-break: break-word;
    }

    /* 合规信息栏 */
    .compliance-bar {
        gap: 10px !important;
        font-size: 0.8rem !important;
    }
    .compliance-bar a {
        font-size: 0.8rem !important;
    }
}
@media (max-width: 480px) {
    .container { padding: 0 12px; }

    .hero-title { font-size: 1.8rem !important; }
    .hero-sub { font-size: 0.95rem !important; }

    .section-header h2 { font-size: 1.45rem !important; }

    .glass-card { padding: 22px 18px !important; }

    /* essay 文章进一步收紧 */
    .essay-article {
        padding: 24px 16px !important;
    }
    .essay-article h1 {
        font-size: 1.4rem !important;
    }
    .essay-article > div {
        font-size: 0.95rem !important;
        line-height: 2 !important;
    }

    /* YOS steps 超小屏保持1列 */
    .yos-steps .strength-card {
        padding: 16px !important;
    }

    /* job 卡片 */
    .job-card { padding: 18px 14px !important; }
    .job-meta span {
        font-size: 0.78rem !important;
        padding: 4px 10px !important;
    }

    /* 按钮 */
    .btn { padding: 10px 20px !important; font-size: 0.9rem !important; }
    .btn-lg { padding: 12px 24px !important; font-size: 0.95rem !important; }

    /* CTA banner */
    .cta-banner { padding: 32px 20px !important; }
    .cta-banner h3 { font-size: 1.3rem !important; }
}