/* ============================================================
   UField 官网 · 公共样式系统
   品牌色实测自公众号海报（见 BRAND.md）
   ============================================================ */
/* 霞鹜文楷（开源 OFL）站内用字子集，~205KB/枚 */
@font-face{
  font-family:"LXGW WenKai";
  src:url("fonts/lxgw-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LXGW WenKai";
  src:url("fonts/lxgw-medium.woff2") format("woff2");
  font-weight:500 800;font-style:normal;font-display:swap;
}
:root{
  --bg:#F4F1EB;          /* 米白（海报底） */
  --bg-soft:#EAF2F0;     /* 青绿浅底 */
  --ink:#152E2C;         /* 正文墨 */
  --ink-soft:#4A6360;
  --teal:#008B84;        /* 品牌青绿 */
  --teal-deep:#00625D;
  --dark:#052B2E;        /* 墨青深底 */
  --gold:#FFB200;        /* 亮金 */
  --orange:#EC9603;      /* 品牌金橙 */
  --serif:"LXGW WenKai","LXGW WenKai SC","Kaiti SC","STKaiti","Noto Serif SC",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.8;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
svg{max-width:100%;height:auto}
a{color:var(--teal);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ===== 按钮 ===== */
.btn{display:inline-block;background:var(--teal);color:#fff;padding:10px 22px;border-radius:999px;font-size:15px;transition:.2s;border:none;cursor:pointer}
.btn:hover{background:var(--teal-deep);color:#fff}
.btn-gold{background:var(--gold);color:var(--dark);font-weight:600}
.btn-gold:hover{background:var(--orange);color:#fff}
.btn-line{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn-line:hover{background:var(--teal);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* ===== 导航 ===== */
nav.site{position:sticky;top:0;z-index:50;background:rgba(244,241,235,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,139,132,.12)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center;font-size:15px}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--teal)}
.nav-links a.active{color:var(--teal);font-weight:600}
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff;background:var(--teal-deep)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--teal-deep);margin:5px 0;border-radius:2px;transition:.25s}

/* ===== 分区通用 ===== */
section{padding:84px 0}
.sec-head{max-width:640px;margin:0 auto 48px;text-align:center}
.sec-head .tag{font-size:14px;color:var(--orange);letter-spacing:3px}
h1,h2,h3{font-family:var(--serif)}
h2{font-size:clamp(26px,3.2vw,36px);margin:8px 0 14px}
.sec-head p{color:var(--ink-soft)}
.band{background:var(--bg-soft)}
.band-grad{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%)}

/* ===== 内页头 ===== */
.page-hero{padding:72px 0 56px;position:relative;overflow:hidden}
.page-hero .kicker,.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--teal);background:var(--bg-soft);border:1px solid rgba(0,139,132,.25);padding:5px 14px;border-radius:999px;margin-bottom:22px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.page-hero h1{font-size:clamp(30px,4vw,44px);line-height:1.4}
.page-hero h1 em{font-style:normal;color:var(--teal)}
.page-hero .lead{margin-top:16px;font-size:17px;color:var(--ink-soft);max-width:38em}
.page-hero.dark{background:var(--dark);color:#EAF2F0}
.page-hero.dark .lead{color:rgba(234,242,240,.78)}

/* ===== 长文 ===== */
.prose{max-width:780px;margin:0 auto}
.prose h3{font-size:22px;color:var(--teal-deep);margin:38px 0 12px}
.prose p{margin:14px 0;color:var(--ink)}
.prose p.muted,.muted{color:var(--ink-soft)}
.prose ul,.prose ol{margin:14px 0 14px 1.4em}
.prose li{margin:6px 0}
.prose blockquote{margin:26px 0;padding:18px 24px;background:#fff;border-left:4px solid var(--gold);border-radius:0 12px 12px 0;font-family:var(--serif);font-size:17px;color:var(--teal-deep)}
.prose blockquote small{display:block;margin-top:8px;font-family:var(--sans);font-size:13px;color:var(--ink-soft)}

/* ===== 卡片 ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border-radius:18px;padding:32px 28px;border:1px solid rgba(0,139,132,.1);box-shadow:0 2px 14px rgba(5,43,46,.05);display:flex;flex-direction:column;gap:12px;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(5,43,46,.1)}
.card .ico{width:52px;height:52px}
.card h3{font-size:21px}
.card .sub{font-size:13px;color:var(--orange);letter-spacing:1px}
.card p{font-size:15px;color:var(--ink-soft);flex:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;background:var(--bg-soft);color:var(--teal-deep);padding:4px 12px;border-radius:999px}

/* ===== 特色条目（左金边） ===== */
.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.exp-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.exp>div,.exp-2>div{background:#fff;border-left:4px solid var(--gold);border-radius:12px;padding:18px 20px;font-size:15px;box-shadow:0 2px 10px rgba(5,43,46,.04)}
.exp b,.exp-2 b{display:block;font-family:var(--serif);font-size:17px;color:var(--teal-deep);margin-bottom:4px}

/* ===== 时间线 ===== */
.timeline{position:relative;max-width:780px;margin:0 auto;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--teal),var(--orange))}
.timeline>div{position:relative;padding:0 0 30px 18px}
.timeline>div::before{content:"";position:absolute;left:-26px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2.5px solid var(--bg)}
.timeline b{font-family:var(--serif);font-size:18px;color:var(--teal-deep)}
.timeline .t-date{font-size:13px;color:var(--orange);margin-left:10px}
.timeline p{font-size:15px;color:var(--ink-soft);margin-top:4px}

/* ===== 数字条 ===== */
.stats{background:var(--dark);color:#EAF2F0;padding:34px 0}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:36px;color:var(--gold);line-height:1.2}
.stat b small{font-size:18px}
.stat span{font-size:14px;color:rgba(234,242,240,.75)}

/* ===== 深色背书区 ===== */
.endorse{background:var(--dark);color:#EAF2F0}
.endorse .sec-head .tag{color:var(--gold)}
.endorse .sec-head p{color:rgba(234,242,240,.72)}
.endorse h2{color:#fff}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;font-family:var(--serif);font-size:18px;color:rgba(234,242,240,.85)}
.logo-row span{padding:8px 4px}
.endorse .note{text-align:center;margin-top:28px;font-size:14px;color:rgba(234,242,240,.6)}

/* ===== 现场剪影图廊 ===== */
.scenes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.scenes-grid figure{margin:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid rgba(0,139,132,.1);box-shadow:0 2px 14px rgba(5,43,46,.05)}
.scenes-grid img{width:100%;height:220px;object-fit:cover;display:block}
.scenes-grid figcaption{padding:12px 16px;font-size:14px;color:var(--ink-soft);font-family:var(--serif)}

/* ===== 引言卡 ===== */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.voice{background:#fff;border-radius:18px;padding:30px 26px;border:1px solid rgba(0,139,132,.1);box-shadow:0 2px 14px rgba(5,43,46,.05);position:relative}
.voice::before{content:"“";position:absolute;top:10px;left:20px;font-family:var(--serif);font-size:52px;color:var(--gold);opacity:.55;line-height:1}
.voice p{font-family:var(--serif);font-size:16.5px;margin-top:26px;color:var(--ink)}
.voice small{display:block;margin-top:14px;color:var(--ink-soft);font-size:13px}

/* ===== 手风琴（原生 details） ===== */
details.acc{background:#fff;border:1px solid rgba(0,139,132,.12);border-radius:14px;margin:12px 0;overflow:hidden}
details.acc summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--serif);font-size:17px;color:var(--teal-deep);display:flex;justify-content:space-between;align-items:center;gap:12px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-size:22px;color:var(--orange);transition:.2s;flex-shrink:0}
details.acc[open] summary::after{transform:rotate(45deg)}
details.acc .acc-body{padding:0 22px 20px;font-size:15px;color:var(--ink-soft)}

/* ===== 表格 ===== */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;font-size:15px}
table.tbl th{background:var(--bg-soft);color:var(--teal-deep);font-family:var(--serif);padding:12px 16px;text-align:left}
table.tbl td{padding:12px 16px;border-top:1px solid rgba(0,139,132,.08);color:var(--ink-soft)}

/* ===== 关注公众号条（每页统一，id=follow） ===== */
.follow-band{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);text-align:center}
.qr-box{background:#fff;display:inline-block;border-radius:22px;padding:26px 30px 20px;border:1px solid rgba(0,139,132,.14);box-shadow:0 4px 22px rgba(5,43,46,.08)}
.qr-box img{width:196px;height:196px;margin:0 auto}
.qr-box b{display:block;margin-top:12px;font-family:var(--serif);font-size:17px;color:var(--teal-deep)}
.qr-box span{font-size:13px;color:var(--ink-soft)}

/* ===== 页脚 ===== */
footer.site{background:var(--dark);color:rgba(234,242,240,.65);padding:38px 0;font-size:13.5px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:rgba(234,242,240,.75)}
.foot-links a:hover{color:var(--gold)}
.foot-logo{font-family:var(--serif);font-style:italic;font-weight:700;font-size:20px}
.foot-logo .u{color:var(--gold)}.foot-logo .f{color:#7FC8C2}

/* ===== 滚动浮现（仅在 JS 就绪后才隐藏，无 JS 环境内容始终可见） ===== */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ===== 响应式 ===== */
@media (max-width:820px){
  section{padding:60px 0}
  .page-hero{padding:52px 0 40px}
  .nav-links{position:fixed;inset:64px 0 auto 0;background:rgba(244,241,235,.98);flex-direction:column;align-items:flex-start;padding:18px 24px 24px;gap:16px;border-bottom:1px solid rgba(0,139,132,.15);transform:translateY(-130%);transition:.3s;box-shadow:0 12px 24px rgba(5,43,46,.08)}
  .nav-links.open{transform:none}
  .burger{display:block}
  .stats-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .cards,.cards-2,.exp,.exp-2,.voices{grid-template-columns:1fr}
  .scenes-grid{grid-template-columns:1fr}
}