:root{
  --deep-blue:#0B1F3A;
  --gold:#C9A227;
  --paper:#F5F0E6;
  --red:#C0392B;
  --coconut:#2E8B57;
  --ink:#141414;
  --light-gray:#E8E4DC;
  --white:#FFFFFF;
  --text-main:var(--ink);
  --text-inverse:#F5F0E6;
  --border-color:rgba(11,31,58,.18);
  --font-head:'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Serif SC','Source Han Serif SC',serif;
  --font-data:'JetBrains Mono','SF Mono','Roboto Mono',monospace;
  --header-height:76px;
  --container-width:1280px;
  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:3rem;
  --space-xl:5rem;
  --shadow-header:0 4px 24px rgba(0,0,0,.18);
  --shadow-card:0 2px 8px rgba(11,31,58,.08);
  --radius:4px;
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  color:var(--text-main);
  background-color:var(--paper);
  min-height:100vh;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:var(--deep-blue);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}

a:hover{
  color:var(--gold);
}

ul,ol{
  list-style:none;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:transparent;
}

::selection{
  background-color:var(--gold);
  color:var(--deep-blue);
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
  border-radius:2px;
}

/* ========== 通用容器与文字 ========== */
.main-content{
  display:block;
  min-height:60vh;
}

.container{
  width:100%;
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 1.25rem;
}

.page-title{
  padding:1.5rem 0 2rem;
  border-bottom:1px solid var(--border-color);
  margin-bottom:2.5rem;
}

.page-title__zh{
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3.25rem);
  font-weight:900;
  line-height:1.1;
  color:var(--deep-blue);
  letter-spacing:-.01em;
}

.page-title__en{
  display:block;
  font-family:var(--font-data);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:.375rem;
}

.breadcrumb{
  margin-bottom:1.5rem;
}

.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem;
  font-size:.8125rem;
  font-family:var(--font-data);
}

.breadcrumb__item{
  color:rgba(11,31,58,.6);
}

.breadcrumb__item:not(:last-child)::after{
  content:"/";
  margin-left:.375rem;
  color:var(--gold);
}

.breadcrumb__item a{
  color:rgba(11,31,58,.75);
  text-decoration:none;
}

.breadcrumb__item a:hover{
  color:var(--gold);
}

.leaf-divider{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:1.75rem 0;
}

.leaf-divider::before{
  content:"";
  width:3rem;
  height:4px;
  background:var(--gold);
  display:inline-block;
}

.leaf-divider::after{
  content:"";
  width:1rem;
  height:4px;
  background:var(--coconut);
  display:inline-block;
}

/* ========== 按钮 ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--font-head);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  padding:.75rem 1.375rem;
  border-radius:var(--radius);
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}

.btn--gold{
  background-color:var(--gold);
  color:var(--deep-blue);
}

.btn--gold:hover{
  background-color:#DDB932;
  color:var(--deep-blue);
  transform:translateY(-1px);
}

.btn--outline{
  background:transparent;
  border-color:var(--deep-blue);
  color:var(--deep-blue);
}

.btn--outline:hover{
  background-color:var(--deep-blue);
  color:var(--paper);
}

/* ========== 头部 ========== */
.skip-link{
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:10000;
  padding:.625rem 1.125rem;
  background:var(--gold);
  color:var(--deep-blue);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8125rem;
  border-radius:0 0 var(--radius) var(--radius);
  text-decoration:none;
  transition:top .2s ease;
}

.skip-link:focus-visible{
  top:0;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
  padding:0 1.25rem;
}

.site-header.is-scrolled{
  background-color:var(--deep-blue);
  border-bottom-color:rgba(245,240,230,.12);
  box-shadow:var(--shadow-header);
}

.site-header__inner{
  max-width:var(--container-width);
  height:var(--header-height);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.2;
  text-decoration:none;
  color:var(--paper);
  flex-shrink:0;
}

.brand:hover{
  color:var(--paper);
}

.brand__name{
  font-family:var(--font-head);
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--paper);
}

.brand__sub{
  font-family:var(--font-data);
  font-size:.625rem;
  letter-spacing:.24em;
  color:var(--gold);
  margin-top:.125rem;
}

.site-nav{
  display:block;
}

.site-nav__list{
  display:flex;
  align-items:center;
  gap:.25rem;
}

.site-nav__item{
  position:relative;
}

.site-nav__link{
  display:block;
  font-family:var(--font-head);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--paper);
  text-decoration:none;
  padding:.5rem .875rem;
  border-radius:var(--radius);
  transition:background-color .2s ease,color .2s ease;
  white-space:nowrap;
}

.site-nav__link:hover{
  background-color:rgba(245,240,230,.12);
  color:var(--gold);
}

.site-nav__link[aria-current="page"]{
  color:var(--gold);
  border-bottom:2px solid var(--gold);
  border-radius:0;
  padding-bottom:calc(.5rem - 2px);
}

.header-cta{
  margin-left:.25rem;
  font-size:.8125rem;
  padding:.625rem 1rem;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:.5rem;
  border-radius:var(--radius);
  background:transparent;
  border:1px solid rgba(245,240,230,.35);
}

.nav-toggle__line{
  display:block;
  height:2px;
  width:100%;
  background-color:var(--paper);
  transition:transform .25s ease,opacity .25s ease;
}

/* ========== 页脚 ========== */
.site-footer{
  background-color:var(--deep-blue);
  color:var(--text-inverse);
  margin-top:var(--space-xl);
  padding:clamp(2.5rem,6vw,5rem) 1.25rem 2rem;
  position:relative;
}

.site-footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--gold) 0 35%,var(--coconut) 35% 55%,var(--red) 55% 100%);
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.site-footer__inner{
  max-width:var(--container-width);
  margin:0 auto;
}

.site-footer__grid{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1.8fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-bottom:3rem;
  border-bottom:1px solid rgba(245,240,230,.14);
}

.footer-card__title{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--gold);
  margin-bottom:1.25rem;
  text-transform:uppercase;
}

.footer-card__about{
  font-size:.9375rem;
  line-height:1.75;
  color:rgba(245,240,230,.82);
  max-width:34ch;
}

.footer-card__tagline{
  font-family:var(--font-data);
  color:var(--coconut);
  font-size:.8125rem;
  letter-spacing:.18em;
  margin-top:.75rem;
}

.footer-card__list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.footer-card__link{
  color:rgba(245,240,230,.8);
  text-decoration:none;
  font-size:.875rem;
  transition:color .2s ease,padding-left .2s ease;
  display:inline-block;
  padding:.25rem 0;
}

.footer-card__link:hover{
  color:var(--gold);
  padding-left:.25rem;
}

.footer-contacts{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.footer-contacts__item{
  display:flex;
  flex-direction:column;
  gap:.125rem;
}

.footer-contacts__label{
  font-family:var(--font-data);
  font-size:.6875rem;
  color:rgba(245,240,230,.5);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.footer-contacts__value{
  color:rgba(245,240,230,.88);
  font-size:.875rem;
  text-decoration:none;
  transition:color .2s ease;
}

.footer-contacts__value:hover{
  color:var(--gold);
}

.site-footer__bottom{
  padding-top:1.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:.875rem 2rem;
  align-items:center;
  justify-content:space-between;
}

.footer-disclaimer__icp{
  font-family:var(--font-data);
  font-size:.75rem;
  color:rgba(245,240,230,.55);
  letter-spacing:.08em;
}

.footer-disclaimer__copyright{
  font-size:.8125rem;
  color:rgba(245,240,230,.65);
}

.footer-disclaimer__note{
  width:100%;
  flex-basis:100%;
  font-size:.75rem;
  color:rgba(245,240,230,.45);
  line-height:1.6;
  border-top:1px solid rgba(245,240,230,.08);
  padding-top:.875rem;
  margin-top:.25rem;
}

/* ========== 通用页面组件 ========== */
.content-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.75rem;
}

.section-heading{
  margin-bottom:1.75rem;
}

.section-heading__en{
  display:block;
  font-family:var(--font-data);
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.375rem;
}

.section-heading__zh{
  font-family:var(--font-head);
  font-size:1.625rem;
  font-weight:800;
  color:var(--deep-blue);
  line-height:1.25;
}

.index-summary{
  display:flex;
  flex-direction:column;
  border-left:3px solid var(--gold);
  margin-top:1rem;
}

.index-summary__item{
  padding:1rem 1.375rem;
  border-bottom:1px solid var(--border-color);
  transition:background-color .2s ease;
}

.index-summary__item:last-child{
  border-bottom:none;
}

.index-summary__item:hover{
  background-color:rgba(201,162,39,.06);
}

.index-summary__meta{
  display:block;
  font-family:var(--font-data);
  font-size:.75rem;
  color:var(--red);
  letter-spacing:.05em;
  margin-bottom:.25rem;
}

.index-summary__desc{
  font-size:.9375rem;
  line-height:1.65;
  color:var(--ink);
}

.tag-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  padding:1rem 0;
}

.tag-group__label{
  font-family:var(--font-data);
  font-size:.75rem;
  color:var(--deep-blue);
  letter-spacing:.1em;
  margin-right:.5rem;
  background:var(--paper);
  border:1px solid var(--border-color);
  padding:.25rem .625rem;
}

.tag-group a{
  font-size:.8125rem;
  padding:.25rem .75rem;
  border:1px solid var(--border-color);
  border-radius:100px;
  color:var(--deep-blue);
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}

.tag-group a:hover{
  border-color:var(--gold);
  color:var(--gold);
  background-color:rgba(201,162,39,.06);
}

.step-tree{
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
  padding-left:0;
  margin-top:1.5rem;
}

.step-tree__item{
  display:flex;
  gap:1.125rem;
  align-items:flex-start;
  padding:0 0 1.75rem;
  position:relative;
}

.step-tree__item:not(:last-child)::after{
  content:"";
  position:absolute;
  left:22px;
  top:44px;
  bottom:6px;
  width:1px;
  background:var(--gold);
  opacity:.5;
}

.step-tree__idx{
  flex-shrink:0;
  width:45px;
  height:45px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:var(--paper);
  color:var(--deep-blue);
  font-family:var(--font-data);
  font-size:.875rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  z-index:1;
}

.step-tree__content{
  flex:1;
  padding-top:.125rem;
}

.step-tree__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  color:var(--deep-blue);
  margin-bottom:.375rem;
}

.step-tree__text{
  font-size:.875rem;
  color:rgba(20,20,20,.75);
  line-height:1.65;
}

.data-card{
  background-color:var(--white);
  border:1px solid rgba(11,31,58,.2);
  border-radius:var(--radius);
  padding:1.5rem 1.375rem;
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}

.data-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--gold);
}

.data-card__label{
  font-family:var(--font-head);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--deep-blue);
  text-transform:uppercase;
  margin-bottom:.625rem;
}

.data-card__main{
  font-family:var(--font-data);
  font-size:1.625rem;
  font-weight:700;
  color:var(--red);
  line-height:1.2;
}

.fallback-media{
  position:relative;
  background-color:var(--light-gray);
  border:1px solid rgba(11,31,58,.16);
  overflow:hidden;
}

.fallback-media--16-9{
  aspect-ratio:16/9;
}

.fallback-media--4-3{
  aspect-ratio:4/3;
}

@media (max-width:1024px){
  .site-footer__grid{
    grid-template-columns:1fr 1fr;
    gap:2rem 2.5rem;
  }
}

@media (max-width:768px){
  :root{
    --header-height:64px;
  }

  .site-header{
    background-color:var(--deep-blue);
    border-bottom-color:rgba(245,240,230,.1);
  }

  .header-cta{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

  .site-nav{
    position:fixed;
    top:var(--header-height);
    left:0;
    right:0;
    background-color:var(--deep-blue);
    border-top:1px solid rgba(245,240,230,.16);
    padding:0 1.25rem 1.25rem;
    display:block;
    transform:translateY(-16px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
  }

  .site-nav[data-open]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .site-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .site-nav__item{
    border-bottom:1px solid rgba(245,240,230,.08);
  }

  .site-nav__item:last-child{
    border-bottom:none;
  }

  .site-nav__link{
    padding:.9rem .5rem;
    font-size:1rem;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2){
    opacity:0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .content-grid{
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .site-footer__grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

@media (max-width:420px){
  .brand__name{
    font-size:1.25rem;
  }
  .brand__sub{
    font-size:.5625rem;
  }
  .btn{
    padding:.625rem 1rem;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .skip-link{
    transition:none;
  }
  .site-header{
    transition:none;
  }
  .site-nav{
    transition:none;
  }
  .nav-toggle__line{
    transition:none;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__line{
    transform:none;
  }
}
