/* ================================================================
   林氏毛织厂 · base.css
   变量 / Reset / 布局 / 区块标题 / 内页Hero / 动画
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Barlow:wght@600;700;800&display=swap');

/* ── 设计变量 ── */
:root {
  --navy:        #1B3A5C;
  --blue:        #3B7DD8;
  --blue-soft:   #EBF3FF;
  --orange:      #E06B1A;
  --orange-dk:   #C55A10;
  --orange-bg:   #FFF5EE;

  --white:   #FFFFFF;
  --bg:      #F7F8FA;
  --bg2:     #F0F2F5;
  --line:    #E3E7EE;
  --line-lt: #EEF1F5;

  --t1:  #1C2B3A;
  --t2:  #4A5F72;
  --t3:  #8A9EB5;

  --green: #07C160;

  --fn: 'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --fe: 'Barlow','Arial',sans-serif;

  --hh:    66px;
  --hh-m:  56px;
  --max:   1180px;
  --r:     8px;
  --r-md:  12px;
  --r-lg:  18px;
  --sh:    0 1px 6px rgba(0,0,0,.06);
  --sh-md: 0 4px 18px rgba(0,0,0,.09);
  --sh-lg: 0 12px 40px rgba(0,0,0,.11);
  --ease:  .2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fn);
  font-size: 15px;
  color: var(--t1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.7;
}
img   { display: block; max-width: 100%; height: auto; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button, input, select, textarea { font: inherit; border: none; outline: none; background: none; cursor: pointer; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ── 布局 ── */
.wrap   { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sec    { padding: 80px 0; }
.sec-sm { padding: 52px 0; }

/* ── 区块标题 ── */
.sec-top        { margin-bottom: 40px; }
.sec-top.c      { text-align: center; }
.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fe); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.sec-tag::before { content:''; width:16px; height:2px; background:var(--blue); }
.sec-h2 {
  font-size: clamp(22px,3vw,32px); font-weight: 700;
  color: var(--t1); line-height: 1.25; margin-bottom: 12px;
}
.sec-h2.w   { color: #fff; }
.sec-desc   { font-size: 15px; color: var(--t2); line-height: 1.85; max-width: 520px; }
.c .sec-desc { margin: 0 auto; }

/* ── 内页 Hero ── */
.pg-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 50px 0 42px;
}
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--t3); margin-bottom: 16px;
}
.breadcrumb a       { color: var(--t3); transition: color .15s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep    { color: var(--line); }
.pg-tag {
  font-family: var(--fe); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.pg-h1 {
  font-size: clamp(24px,4vw,40px); font-weight: 700;
  color: var(--t1); line-height: 1.2; margin-bottom: 12px;
}
.pg-desc { font-size: 15px; color: var(--t2); line-height: 1.85; max-width: 500px; }

/* ── 入场动画 ── */
.fade { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.fade.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; } .d4 { transition-delay: .28s; }
.d5 { transition-delay: .35s; }

/* ── 响应式 ── */
@media (max-width: 768px) {
  .sec    { padding: 52px 0; }
  .sec-sm { padding: 36px 0; }
  .wrap   { padding: 0 16px; }
}