/* ============================================================
   鼎峰 dingfeng — 首页重设计「国际贸易行」 2026-09-03 Wave2
   级联规则（见 .trae/documents/五站首页重设计方案.md）：
   1. 本文件整体不写 @layer —— 无层样式压过 bundle.css 的 base/components 层；
      对 critical.css（head 内联、无层、先行加载）靠文档顺序在后取胜。
   2. 全部 df- 前缀类 —— 不碰 critical.css 锁死的 .hero/.stats/.hbtn/.section/.container。
   3. 复用 _base 的 news/friendlinks 段用 body[data-site="dingfeng"] 作用域重塑。
   视觉语言：国际贸易行 —— 深绿底 + 大圆角16px + 大留白32px + 舒展96px节奏
   + uppercase 英文点缀（eyebrow/en 标签）+ 胶囊按钮 + 市场标签条。
   ============================================================ */

/* ---------- 基础布局：舒展节奏 96px ---------- */
.df-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.df-section { padding: 96px 0; background: #fff; }
.df-section--tint { background: var(--primary-50, #eaf7ea); }

.df-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.df-sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.df-sec-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--primary-500, #5ac25f); margin-bottom: 10px; font-family: Consolas, 'Courier New', monospace; }
.df-sec-title { font-size: 30px; font-weight: 700; color: var(--steel-800, #343a40); letter-spacing: -.5px; line-height: 1.3; }
.df-sec-sub { margin-top: 10px; font-size: 14px; color: var(--steel-500, #adb5bd); }
.df-more { font-size: 14px; font-weight: 600; color: var(--primary-600, #2E7D32); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .2s; }
.df-more:hover { border-bottom-color: var(--primary-600, #2E7D32); }

/* ---------- 按钮：胶囊 999px ---------- */
.df-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 36px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: .5px; text-decoration: none; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s, transform .2s; cursor: pointer; }
.df-btn--primary { background: var(--primary-600, #2E7D32); color: #fff; }
.df-btn--primary:hover { background: var(--primary-700, #338b38); transform: translateY(-1px); }
.df-btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.df-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.df-btn--light { background: #fff; color: var(--primary-800, #26682a); }
.df-btn--light:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.df-btn--line { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.df-btn--line:hover { border-color: #fff; }
.df-btn--lg { padding: 16px 42px; font-size: 16px; }

/* ---------- HERO：全屏居中 + 英文眉题 + 市场标签 ---------- */
.df-hero { position: relative; background: linear-gradient(160deg, #0d2412 0%, var(--primary-900, #1a461c) 55%, var(--primary-800, #26682a) 100%); color: #fff; overflow: hidden; }
.df-hero__glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(closest-side, rgba(90,194,95,.18), transparent 70%); pointer-events: none; }
.df-hero__center { position: relative; max-width: 860px; margin: 0 auto; padding: 120px 24px 72px; text-align: center; }
.df-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: rgba(255,255,255,.55); font-family: Consolas, 'Courier New', monospace; margin-bottom: 22px; }
.df-hero__title { font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.28; letter-spacing: -1px; margin: 0 0 20px; color: #fff; }
.df-hero__accent { color: var(--primary-300, #94d897); }
.df-hero__cursor { font-weight: 400; color: var(--primary-300, #94d897); animation: df-blink 1s steps(1) infinite; }
@keyframes df-blink { 50% { opacity: 0; } }
.df-hero__desc { font-size: 16px; line-height: 2; color: rgba(255,255,255,.72); margin: 0 0 26px; }
.df-hero__markets { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.df-hero__market { padding: 7px 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); font-family: Consolas, 'Courier New', monospace; }
.df-hero__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* 底部数据条：品类化 */
.df-hero__stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); padding: 30px 0 40px; }
.df-hero__stat { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 12px; border-left: 1px solid rgba(255,255,255,.1); }
.df-hero__stat:first-child { border-left: none; }
.df-hero__stat b { font-size: 24px; font-weight: 700; color: var(--primary-300, #94d897); font-variant-numeric: tabular-nums; }
.df-hero__stat span { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: 1px; }

/* ---------- 出口市场：3 列大圆角卡 ---------- */
.df-markets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.df-market { padding: 36px 32px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(26,70,28,.06); transition: transform .2s, box-shadow .2s; }
.df-market:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,70,28,.12); }
.df-market__en { display: block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary-500, #5ac25f); font-family: Consolas, 'Courier New', monospace; margin-bottom: 12px; }
.df-market h3 { font-size: 19px; font-weight: 700; color: var(--steel-800, #343a40); margin-bottom: 10px; }
.df-market p { font-size: 13.5px; line-height: 1.9; color: var(--steel-500, #adb5bd); }

/* 单证服务：4 列横排 */
.df-docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.df-doc { padding: 26px 24px; background: #fff; border-radius: 16px; border: 1px solid var(--primary-100, #dcf2dd); text-align: center; }
.df-doc__en { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--primary-600, #2E7D32); font-family: Consolas, 'Courier New', monospace; margin-bottom: 8px; }
.df-doc h4 { font-size: 15px; font-weight: 700; color: var(--steel-800, #343a40); margin-bottom: 8px; }
.df-doc p { font-size: 12.5px; line-height: 1.8; color: var(--steel-500, #adb5bd); }

/* ---------- 核心优势：4 列大圆角卡 ---------- */
.df-adv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.df-adv__card { padding: 36px 30px 32px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(26,70,28,.05); transition: transform .2s, box-shadow .2s; }
.df-adv__card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,70,28,.12); }
.df-adv__en { display: block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary-500, #5ac25f); font-family: Consolas, 'Courier New', monospace; margin-bottom: 12px; }
.df-adv__card h3 { font-size: 19px; font-weight: 700; color: var(--steel-800, #343a40); margin-bottom: 12px; }
.df-adv__card p { font-size: 13.5px; line-height: 1.9; color: var(--steel-500, #adb5bd); }

/* ---------- 出口产品：3 列大圆角卡 ---------- */
.df-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.df-prod { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 2px 12px rgba(26,70,28,.05); transition: transform .2s, box-shadow .2s; }
.df-prod:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,70,28,.12); }
.df-prod__img { aspect-ratio: 4/3; overflow: hidden; background: var(--steel-100, #f1f3f5); }
.df-prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.df-prod:hover .df-prod__img img { transform: scale(1.04); }
.df-prod__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; font-weight: 800; color: var(--steel-400, #ced4da); }
.df-prod__body { padding: 20px 24px 24px; }
.df-prod__tag { display: inline-block; padding: 3px 12px; background: var(--primary-50, #eaf7ea); color: var(--primary-700, #338b38); font-size: 12px; font-weight: 600; border-radius: 999px; }
.df-prod__body h3 { font-size: 16px; font-weight: 700; color: var(--steel-800, #343a40); margin: 10px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-prod__spec { font-size: 12px; color: var(--steel-500, #adb5bd); font-family: Consolas, 'Courier New', monospace; }
.df-empty { padding: 72px 0; text-align: center; color: var(--steel-400, #ced4da); }

/* ---------- 产品分类：4 列圆角卡 ---------- */
.df-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.df-cat { display: flex; flex-direction: column; padding: 28px 26px; background: var(--primary-50, #eaf7ea); border-radius: 16px; text-decoration: none; transition: background .2s, transform .2s; }
.df-cat:hover { background: var(--primary-100, #dcf2dd); transform: translateY(-2px); }
.df-cat__en { font-size: 12px; font-weight: 700; color: var(--primary-500, #5ac25f); font-family: Consolas, 'Courier New', monospace; margin-bottom: 10px; }
.df-cat h3 { font-size: 16px; font-weight: 700; color: var(--steel-800, #343a40); margin-bottom: 6px; }
.df-cat__count { font-size: 12px; color: var(--steel-500, #adb5bd); }

/* ---------- CTA：深绿通栏 ---------- */
.df-cta { background: linear-gradient(135deg, var(--primary-900, #1a461c) 0%, var(--primary-800, #26682a) 70%); color: #fff; }
.df-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 72px 24px; flex-wrap: wrap; }
.df-cta__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--primary-300, #94d897); font-family: Consolas, 'Courier New', monospace; margin-bottom: 12px; }
.df-cta__text h2 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: #fff; }
.df-cta__text p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.68); }
.df-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- R3：复用 _base 段（news/friendlinks）的站点作用域重塑 ---------- */
body[data-site="dingfeng"] .sec-title { font-weight: 700; font-size: 30px; }
body[data-site="dingfeng"] .sec-sub { font-size: 14px; }
body[data-site="dingfeng"] .news-main,
body[data-site="dingfeng"] .news-item { border-radius: 16px; box-shadow: 0 2px 12px rgba(26,70,28,.05); border: none; }
body[data-site="dingfeng"] .news-main:hover,
body[data-site="dingfeng"] .news-item:hover { box-shadow: 0 10px 28px rgba(26,70,28,.12); }
body[data-site="dingfeng"] .sec-more { font-weight: 600; color: var(--primary-600, #2E7D32); }
body[data-site="dingfeng"] .fl-header span { font-weight: 700; color: var(--steel-600, #6c757d); letter-spacing: 3px; text-transform: uppercase; }
body[data-site="dingfeng"] .section { padding: 96px 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .df-hero__title { font-size: 44px; }
    .df-markets { grid-template-columns: repeat(2, 1fr); }
    .df-docs { grid-template-columns: repeat(2, 1fr); }
    .df-adv__grid { grid-template-columns: repeat(2, 1fr); }
    .df-prods { grid-template-columns: repeat(2, 1fr); }
    .df-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .df-section { padding: 64px 0; }
    .df-sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
    .df-hero__center { padding: 88px 20px 56px; }
    .df-hero__title { font-size: 34px; }
    .df-hero__desc { font-size: 14px; }
    .df-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
    .df-hero__stat:nth-child(3) { border-left: none; }
    .df-markets { grid-template-columns: 1fr; }
    .df-cta__inner { flex-direction: column; align-items: flex-start; padding: 52px 20px; }
    body[data-site="dingfeng"] .section { padding: 64px 0; }
}
@media (max-width: 480px) {
    .df-docs { grid-template-columns: 1fr; }
    .df-prods { grid-template-columns: 1fr; }
    .df-cats { grid-template-columns: 1fr; }
    .df-hero__stats { grid-template-columns: 1fr; }
    .df-hero__stat { border-left: none; }
    .df-btn { width: 100%; }
    .df-cta__actions { width: 100%; }
}