/* ============================================
   大江看台 · 全站共享样式
   /assets/site.css
============================================ */
*,*::before,*::after{box-sizing:border-box;}
:root{
  --navy:#0A2540;
  --navy-deep:#06182C;
  --navy-soft:#0D2B4E;
  --orange:#FF7A00;
  --orange-hover:#E86500;
  --orange-soft:#FFF1E6;
  --gray-light:#E5E7EB;
  --gray-mid:#D1D5DB;
  --gray-dark:#333333;
  --white:#FFFFFF;
  --loft:#F7F8FA;
  --text:#1A1A1A;
  --muted:#6B7280;
  --border:#E5E7EB;
  --success:#10B981;
  --error:#EF4444;
  --font-heading:"Source Serif Pro","Noto Serif SC",serif;
  --font-body:"Inter","Noto Sans SC",sans-serif;
  --font-data:"Space Mono",monospace;
  --header-width:288px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --shadow-card:0 12px 32px rgba(10,37,64,0.10);
  --shadow-float:0 24px 60px rgba(10,37,64,0.22);
  --container-max:1240px;
  --container-wide:1420px;
  --container-narrow:820px;
}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:break-word;
}
img,picture,video,canvas{display:block;max-width:100%;}
figure{margin:0;}
p{margin:0 0 1em;}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--orange);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.12;
  color:var(--text);
  margin:0 0 16px;
}
h1{font-size:clamp(40px,6vw,72px);font-weight:900;letter-spacing:-0.02em;line-height:1.04;}
h2{font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-0.015em;}
h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;}
h4{font-size:18px;font-weight:700;}
ul,ol{padding-left:1.3em;}
button{font-family:inherit;}
::selection{background:var(--orange);color:var(--navy);}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
#main-content,main:focus{outline:none;}
.site-main{min-height:70vh;}

/* ---------- 布局 ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
}
.container--wide{max-width:var(--container-wide);}
.container--narrow{max-width:var(--container-narrow);}
.section{padding-block:clamp(56px,8vw,96px);}
.section--loft{background:var(--loft);}
.section--navy{background:var(--navy);color:var(--white);}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:var(--white);}
.section--navy a{color:var(--orange);}
.section--tint{background:var(--orange-soft);}
.section--flush{padding-block:0;}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,28px);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--split{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);}
@media (max-width:1023px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--split{grid-template-columns:minmax(0,1fr);}
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  font-size:15px;
  font-weight:500;
  line-height:1.1;
  font-family:var(--font-body);
  text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s,border-color .3s,box-shadow .3s,transform .2s;
}
.btn:active{transform:scale(0.97);}
.btn--primary{background:var(--orange);color:var(--navy);box-shadow:0 8px 20px rgba(255,122,0,0.28);}
.btn--primary:hover{background:var(--navy);color:var(--white);box-shadow:0 10px 24px rgba(10,37,64,0.28);transform:translateY(-2px);}
.btn--outline{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn--outline:hover{background:var(--navy);color:var(--white);transform:translateY(-2px);}
.btn--light{background:var(--white);color:var(--navy);}
.btn--light:hover{background:var(--orange);color:var(--navy);transform:translateY(-2px);}
@media (max-width:480px){
  .btn{width:100%;}
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,32px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.card--navy{background:var(--navy);color:var(--white);border-color:var(--navy);}
.card--navy:hover{box-shadow:var(--shadow-float);}
.card--accent{border-top:5px solid var(--orange);}
.card img{border-radius:var(--radius-sm);}

/* ---------- 胶囊标签 ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  background:var(--orange-soft);
  color:var(--navy);
  border-radius:var(--radius-pill);
}
.pill--navy{background:var(--navy);color:var(--white);}
.pill--outline{background:transparent;border:1px solid var(--border);color:var(--muted);}

/* ---------- 文字 ---------- */
.headline{
  font-family:var(--font-heading);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:0 0 18px;
  color:var(--text);
}
.headline--display{font-size:clamp(42px,7vw,84px);}
.headline--lg{font-size:clamp(32px,4.6vw,56px);}
.headline--md{font-size:clamp(24px,3vw,34px);}
.headline--inverse{color:var(--white);}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:var(--muted);margin:0 0 24px;}
.lead--inverse{color:rgba(255,255,255,0.85);}
.text-muted{color:var(--muted);}
.text-orange{color:var(--orange);}
.text-navy{color:var(--navy);}

/* ---------- 面包屑 ---------- */
.breadcrumb{margin-bottom:20px;font-size:13px;}
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.breadcrumb__item{display:inline-flex;align-items:center;gap:6px;color:var(--muted);}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--border);}
.breadcrumb__item a{color:var(--muted);text-decoration:none;transition:color .2s;}
.breadcrumb__item a:hover{color:var(--orange);}
.breadcrumb__item[aria-current="page"]{color:var(--navy);font-weight:500;}

/* ---------- 手风琴 ---------- */
.accordion{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--white);
  overflow:hidden;
  transition:box-shadow .3s var(--ease);
}
.accordion:hover{box-shadow:0 8px 24px rgba(10,37,64,0.06);}
.accordion + .accordion{margin-top:12px;}
.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(16px,1.4vw,18px);
  color:var(--text);
  transition:background .25s;
}
.accordion-trigger:hover{background:var(--loft);}
.accordion-trigger::after{
  content:"+";
  flex:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange-soft);
  color:var(--orange);
  font-size:18px;
  font-weight:500;
  font-family:var(--font-body);
  transition:transform .35s var(--ease),background .3s,color .3s;
}
.accordion-trigger[aria-expanded="true"]::after{
  transform:rotate(135deg);
  background:var(--orange);
  color:var(--navy);
}
.accordion-panel{padding:0 22px 22px;}
.accordion-panel[hidden]{display:none;}
.accordion-panel p:last-child{margin-bottom:0;}

/* ---------- 数据数字 ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px) clamp(32px,5vw,64px);}
.stat{
  font-family:var(--font-data);
  font-size:clamp(30px,3.6vw,48px);
  font-weight:700;
  line-height:1;
  color:var(--orange);
  margin:0;
}
.stat__label{
  display:block;
  margin-top:8px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--muted);
}
.stat--navy{color:var(--navy);}

/* ---------- 提示与分隔 ---------- */
.callout{
  border-left:4px solid var(--orange);
  background:var(--loft);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:22px 26px;
  margin:24px 0;
}
.callout p:last-child{margin-bottom:0;}
.divider{
  height:1px;
  border:0;
  background:var(--border);
  margin:32px 0;
  position:relative;
}
.divider::after{
  content:"";
  position:absolute;
  left:0;
  top:-2.5px;
  width:56px;
  height:5px;
  border-radius:3px;
  background:var(--orange);
}

/* ---------- 图片占位壳 ---------- */
.image-shell{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--loft);
  aspect-ratio:16 / 9;
  border:1px solid var(--border);
}
.image-shell--4x3{aspect-ratio:4 / 3;}
.image-shell--1x1{aspect-ratio:1 / 1;}
.image-shell--hero{aspect-ratio:16 / 10;border-radius:32px;}
.image-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(10,37,64,0.08),rgba(255,122,0,0.10));
  z-index:0;
}
.image-shell::after{
  content:"大江看台 · 图片占位";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-data);
  font-size:14px;
  letter-spacing:.12em;
  color:var(--muted);
  z-index:1;
}
.image-shell > *{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-shell > img{transition:transform .5s var(--ease);}
.image-shell > img:hover{transform:scale(1.02);}

/* ---------- 页首 ---------- */
.page-head{margin:0 0 clamp(40px,5vw,64px);}
.page-head .breadcrumb{margin-bottom:24px;}

/* ---------- 头部品牌轨道 ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--header-width);
  z-index:100;
  display:flex;
  flex-direction:column;
  padding:32px 26px 28px;
  background:var(--navy);
  color:var(--white);
  overflow:hidden;
}
.site-header::before{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:180px;
  height:180px;
  background:var(--orange);
  border-radius:48px;
  transform:rotate(24deg);
  opacity:0.14;
  pointer-events:none;
  z-index:0;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:72px;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,0.045) 14px 28px);
  pointer-events:none;
  z-index:0;
}
.header-inner,.site-nav,.header-subline{position:relative;z-index:1;}
.skip-link{
  position:fixed;
  top:-80px;
  left:18px;
  z-index:300;
  background:var(--orange);
  color:var(--navy);
  font-weight:500;
  font-size:14px;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(255,122,0,0.4);
  transition:top .35s var(--ease);
}
.skip-link:focus-visible{top:14px;}
.header-inner{display:flex;flex-direction:column;}
.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--white);
  margin-bottom:42px;
}
.brand-lockup:hover{color:var(--white);}
.brand-mark{
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--orange);
  color:var(--navy);
  font-family:var(--font-heading);
  font-weight:900;
  font-size:18px;
  box-shadow:0 0 0 2px rgba(255,122,0,0.25),0 6px 18px rgba(255,122,0,0.35);
  transform:rotate(-6deg);
  transition:transform .35s var(--ease);
}
.brand-lockup:hover .brand-mark{transform:rotate(0deg) scale(1.06);}
.brand-text{display:grid;gap:2px;}
.brand-name{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:22px;
  line-height:1.1;
  color:var(--white);
  letter-spacing:.02em;
}
.brand-tagline{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--orange);
  white-space:nowrap;
}
.nav-toggle{display:none;}
.nav-toggle-text{line-height:1;}
.site-nav{}
.nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-item{margin:0;}
.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:var(--radius-pill);
  color:rgba(255,255,255,0.82);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  border:1px solid transparent;
  transition:background .25s,color .25s,transform .3s var(--ease),border-color .25s;
}
.nav-link::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  border:1.5px solid var(--orange);
  transition:background .25s,border-color .25s;
}
.nav-link:hover{background:rgba(255,255,255,0.08);color:var(--white);transform:translateX(4px);}
.nav-link:hover::before{background:var(--orange);}
.nav-link[aria-current="page"]{
  background:var(--orange);
  color:var(--navy);
  font-weight:700;
  box-shadow:0 8px 20px rgba(255,122,0,0.32);
}
.nav-link[aria-current="page"]::before{border-color:var(--navy);background:var(--navy);}
.header-subline{
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.06em;
  color:rgba(255,255,255,0.5);
}

/* ---------- 滚动进度 ---------- */
.scroll-progress{
  position:fixed;
  top:0;
  bottom:0;
  left:calc(var(--header-width) - 3px);
  width:3px;
  z-index:120;
  background:linear-gradient(to bottom,var(--orange),#FFB35C);
  transform:scaleY(0);
  transform-origin:top;
  pointer-events:none;
}

/* ---------- 页脚 ---------- */
.site-footer{
  background:var(--navy);
  color:rgba(255,255,255,0.85);
  margin:64px 32px 32px;
  border-radius:32px;
  padding:clamp(32px,4vw,56px) clamp(20px,3vw,48px) 28px;
  box-shadow:var(--shadow-float);
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:200px;
  height:200px;
  background:var(--orange);
  border-radius:50%;
  opacity:0.08;
  pointer-events:none;
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,0.9fr) minmax(0,0.9fr) minmax(0,1.5fr);
  gap:clamp(24px,3vw,44px);
  position:relative;
}
.footer-brand{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.footer-brand-name{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.1;
  color:var(--white);
  margin:0 0 4px;
}
.footer-brand-tagline{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.3em;
  color:var(--orange);
  margin:0 0 10px;
}
.footer-brand-subline{
  font-size:14px;
  color:rgba(255,255,255,0.65);
  margin:0 0 20px;
}
.footer-trust{
  margin:0;
  max-width:36em;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.06);
  border-left:3px solid var(--orange);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:16px 18px;
}
.footer-col{min-width:0;}
.footer-heading{
  font-family:var(--font-heading);
  font-size:17px;
  font-weight:700;
  color:var(--white);
  margin:0 0 18px;
  letter-spacing:.02em;
}
.footer-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.footer-nav-list a{
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  transition:color .2s,padding-left .25s var(--ease);
}
.footer-nav-list a:hover{color:var(--orange);padding-left:4px;}
.footer-contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:14px;
}
.footer-contact-list li{display:flex;gap:8px;line-height:1.55;}
.contact-key{
  flex:none;
  min-width:3.6em;
  color:rgba(255,255,255,0.45);
  font-size:13px;
}
.contact-value{color:rgba(255,255,255,0.85);word-break:break-word;}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:clamp(32px,4vw,48px);
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.14);
  font-family:var(--font-data);
  font-size:12.5px;
  color:rgba(255,255,255,0.5);
}
.footer-copy{margin:0;}
.footer-icp{margin:0;letter-spacing:.04em;}

/* ---------- 显现动画 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
[data-reveal].is-revealed{opacity:1;transform:translateY(0);}

/* ---------- 桌面端布局 ---------- */
@media (min-width:1024px){
  body{margin-left:var(--header-width);}
}

/* ---------- 移动端 / 平板 ---------- */
@media (max-width:1023px){
  body{padding-top:82px;}
  .site-header{
    position:fixed;
    inset:0 0 auto 0;
    width:auto;
    height:auto;
    flex-direction:column;
    padding:12px 20px 0;
    border-radius:0 0 22px 22px;
    box-shadow:0 10px 30px rgba(10,37,64,0.18);
  }
  .site-header::before{width:110px;height:110px;opacity:0.1;right:-30px;bottom:-30px;}
  .site-header::after{display:none;}
  .header-inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:16px;
    min-height:56px;
  }
  .brand-lockup{margin-bottom:0;}
  .brand-mark{width:38px;height:38px;font-size:16px;border-radius:12px;}
  .brand-name{font-size:20px;}
  .brand-tagline{font-size:10px;letter-spacing:.2em;}
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:var(--radius-pill);
    color:var(--white);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:background .25s,transform .2s;
  }
  .nav-toggle:hover{background:rgba(255,255,255,0.14);}
  .nav-toggle[aria-expanded="true"]{
    background:var(--orange);
    border-color:var(--orange);
    color:var(--navy);
  }
  .nav-toggle-box{display:inline-grid;gap:3px;width:16px;}
  .nav-toggle-bar{
    display:block;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .3s var(--ease),opacity .3s;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
  .site-nav{
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height .5s var(--ease);
  }
  .site-nav[data-open="true"]{max-height:440px;}
  .nav-list{padding:6px 0 16px;gap:2px;}
  .nav-link{padding:10px 14px;font-size:14px;}
  .nav-link:hover{transform:translateX(3px);}
  .header-subline{display:none;}
  .scroll-progress{
    top:0;
    bottom:auto;
    left:0;
    right:0;
    width:auto;
    height:3px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(to right,var(--orange),#FFB35C);
  }
  .skip-link{left:14px;}
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .site-footer{
    margin:40px 16px 16px;
    border-radius:24px;
    padding:32px 20px 24px;
  }
  .footer-main{grid-template-columns:minmax(0,1fr);gap:30px;}
}
@media (max-width:480px){
  .nav-toggle-text{display:none;}
  .nav-toggle{padding:8px 12px;}
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none;}
}
