*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --color-highland-blue:#1E3A5F;
  --color-deep-teal:#0F4C5C;
  --color-snow:#F5F7FA;
  --color-gold:#D4AF37;
  --color-emerald:#50C878;
  --color-wine:#7A1F3D;
  --color-indigo:#4B0082;
  --color-ink:#1A1A2E;
  --color-gray:#A0AAB5;
  --color-line:#E0E6ED;
  --font-heading:'Noto Sans SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','Microsoft YaHei',sans-serif;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  --header-width:260px;
  --shadow-card:0 8px 32px rgba(30,58,95,.08);
  --shadow-drawer:-12px 0 32px rgba(0,0,0,.24);
  --transition:240ms ease
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  color:var(--color-ink);
  background:var(--color-snow);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
::selection{background:rgba(212,175,55,.28);color:var(--color-highland-blue)}
:focus-visible{outline:3px solid rgba(212,175,55,.7);outline-offset:2px;border-radius:4px}
a{color:var(--color-deep-teal);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-gold)}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:1200;
  padding:10px 22px;
  background:var(--color-gold);
  color:var(--color-highland-blue);
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transform:translateY(-160%);
  transition:transform .2s ease
}
.skip-link:focus{transform:translateY(0);color:var(--color-highland-blue)}

.site-header{
  position:sticky;
  top:0;
  z-index:400;
  background:linear-gradient(135deg,#1E3A5F 0%,#0F4C5C 100%);
  box-shadow:0 2px 12px rgba(0,0,0,.1)
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 20px
}
.site-header__brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex-shrink:0
}
.site-header__logo{
  width:44px;
  height:44px;
  flex-shrink:0
}
.site-header__text{
  display:flex;
  flex-direction:column;
  line-height:1.25
}
.site-header__name{
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:700;
  color:var(--color-snow);
  letter-spacing:.02em;
  white-space:nowrap
}
.site-header__badge{
  display:block;
  font-size:10px;
  letter-spacing:.42em;
  color:rgba(245,247,250,.62);
  margin-top:2px;
  white-space:nowrap
}
.nav-toggle{
  width:44px;
  height:44px;
  border:none;
  background:rgba(245,247,250,.08);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background var(--transition)
}
.nav-toggle:hover{background:rgba(212,175,55,.18)}
.nav-toggle__line{
  display:block;
  width:20px;
  height:2px;
  background:var(--color-snow);
  border-radius:var(--radius-pill);
  transition:transform var(--transition),opacity var(--transition)
}
.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)}

.site-nav{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:500;
  width:min(340px,86vw);
  padding:32px 28px;
  background:linear-gradient(180deg,#0F4C5C 0%,#1E3A5F 100%);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .32s ease,visibility 0s .32s;
  overflow-y:auto
}
.site-nav[data-open]{
  transform:translateX(0);
  visibility:visible;
  box-shadow:var(--shadow-drawer);
  transition:transform .32s ease,visibility 0s
}
.site-nav__header{display:block}
.site-nav__title{
  display:block;
  font-size:12px;
  letter-spacing:.5em;
  color:rgba(245,247,250,.5);
  text-transform:uppercase
}
.site-nav__separator{
  display:block;
  height:1px;
  background:rgba(245,247,250,.16);
  margin:14px 0 22px
}
.site-nav__list{display:flex;flex-direction:column;gap:4px}
.site-nav__link{
  display:flex;
  align-items:center;
  padding:13px 16px;
  border-radius:var(--radius-pill);
  color:rgba(245,247,250,.86);
  font-size:15px;
  font-weight:500;
  transition:background var(--transition),color var(--transition),padding-left var(--transition)
}
.site-nav__link:hover{background:rgba(212,175,55,.14);color:var(--color-gold);padding-left:20px}
.site-nav__link[aria-current="page"]{
  background:var(--color-gold);
  color:var(--color-highland-blue);
  font-weight:700
}
.site-nav__link[aria-current="page"] .site-nav__index{opacity:.7;color:var(--color-highland-blue)}
.site-nav__index{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  margin-right:14px;
  opacity:.55;
  color:rgba(245,247,250,.7)
}
.site-nav__foot{
  margin-top:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:22px;
  border-top:1px solid rgba(245,247,250,.14)
}
.site-nav__geo{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:11px;
  letter-spacing:.5em;
  color:rgba(245,247,250,.46);
  white-space:nowrap
}
.site-nav__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 22px;
  background:var(--color-gold);
  color:var(--color-highland-blue);
  border-radius:var(--radius-pill);
  font-size:14px;
  font-weight:700;
  transition:background var(--transition),transform var(--transition)
}
.site-nav__cta:hover{background:#e8c64e;transform:translateY(-1px);color:var(--color-highland-blue)}

.site-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--color-snow)
}
.site-shell main{flex:1}

.site-footer{
  background:linear-gradient(180deg,#0F4C5C 0%,#1E3A5F 100%);
  color:rgba(245,247,250,.9);
  padding:48px 20px 28px
}
.site-footer__inner{
  max-width:1200px;
  margin:0 auto
}
.site-footer__top{
  display:grid;
  gap:40px
}
.site-footer__brand-row{
  display:flex;
  align-items:center;
  gap:16px
}
.site-footer__logo{
  width:52px;
  height:52px;
  flex-shrink:0
}
.site-footer__brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.4
}
.site-footer__brand-text strong{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--color-snow)
}
.site-footer__brand-text span{
  font-size:12px;
  letter-spacing:.32em;
  color:rgba(245,247,250,.55)
}
.site-footer__trust{
  margin-top:16px;
  font-size:12px;
  line-height:1.7;
  color:rgba(245,247,250,.48);
  border-left:3px solid var(--color-gold);
  padding-left:12px
}
.site-footer__nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px
}
.site-footer__nav-title{
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(245,247,250,.52);
  margin-bottom:14px;
  font-weight:600
}
.site-footer__nav ul{
  display:flex;
  flex-direction:column;
  gap:8px
}
.site-footer__nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(245,247,250,.82);
  font-size:14px;
  transition:color var(--transition),transform var(--transition)
}
.site-footer__nav a::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--color-gold);
  opacity:.5;
  transition:opacity var(--transition)
}
.site-footer__nav a:hover{color:var(--color-gold);transform:translateX(3px)}
.site-footer__nav a:hover::before{opacity:1}
.site-footer__contact p{
  font-size:14px;
  line-height:1.8;
  color:rgba(245,247,250,.82)
}
.site-footer__contact a{
  color:rgba(245,247,250,.82);
  border-bottom:1px solid rgba(212,175,55,.4);
  transition:color var(--transition),border-color var(--transition)
}
.site-footer__contact a:hover{color:var(--color-gold);border-color:var(--color-gold)}
.site-footer__address,.site-footer__servicetime{
  color:rgba(245,247,250,.58)!important
}
.site-footer__bottom{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(245,247,250,.12);
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:rgba(245,247,250,.55)
}

.content-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:48px 24px
}
.container{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:24px 20px
}
.section{
  padding:64px 0
}
.section--tight{
  padding:32px 0
}
.section--wide{
  padding:96px 0
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 28px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),transform var(--transition),border-color var(--transition),box-shadow var(--transition)
}
.btn-primary{
  background:var(--color-gold);
  color:var(--color-highland-blue);
  box-shadow:0 6px 20px rgba(212,175,55,.3)
}
.btn-primary:hover{
  background:#e8c64e;
  transform:translateY(-2px);
  color:var(--color-highland-blue);
  box-shadow:0 10px 28px rgba(212,175,55,.36)
}
.btn-ghost{
  background:transparent;
  border-color:rgba(30,58,95,.35);
  color:var(--color-highland-blue)
}
.btn-ghost:hover{
  border-color:var(--color-gold);
  color:var(--color-gold);
  transform:translateY(-2px)
}
.btn:focus-visible,.tabs__button:focus-visible,.nav-toggle:focus-visible{
  outline:3px solid rgba(212,175,55,.7);
  outline-offset:2px
}

.card{
  background:var(--color-snow);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition),box-shadow var(--transition)
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(30,58,95,.12)
}
.card__body{display:flex;flex-direction:column;gap:12px}
.card__title{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:700;
  color:var(--color-highland-blue);
  line-height:1.4
}
.card__text{color:var(--color-ink);font-size:14px;line-height:1.7}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 16px;
  border-radius:var(--radius-pill);
  background:rgba(212,175,55,.12);
  color:var(--color-highland-blue);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em
}
.pill--emerald{
  background:rgba(80,200,120,.16);
  color:#0B7A3B
}
.pill--emerald::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-emerald)
}
.pill--wine{
  background:rgba(122,31,61,.1);
  color:var(--color-wine)
}
.pill--wine::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-wine)
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--color-gray);
  padding:20px 0 8px
}
.breadcrumb a{
  color:var(--color-highland-blue);
  font-weight:500
}
.breadcrumb a:hover{color:var(--color-gold)}
.breadcrumb__sep{
  color:var(--color-gray);
  opacity:.6
}

.grid{
  display:grid;
  gap:24px
}
.grid-cols-2{grid-template-columns:1fr}
.grid-cols-3{grid-template-columns:1fr}

.media-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(135deg,rgba(15,76,92,.10),rgba(30,58,95,.04));
  border:1px solid var(--color-line);
  aspect-ratio:4/3
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:4px;
  background:var(--color-line);
  border-radius:var(--radius-pill);
  width:fit-content
}
.tabs__button{
  padding:8px 22px;
  border:none;
  border-radius:var(--radius-pill);
  background:transparent;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--color-ink);
  transition:background var(--transition),color var(--transition)
}
.tabs__button:hover{background:rgba(245,247,250,.8)}
.tabs__button[aria-selected="true"]{
  background:var(--color-highland-blue);
  color:var(--color-snow)
}

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0)
}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:1100;
  background:linear-gradient(90deg,#D4AF37 0%,#50C878 100%);
  pointer-events:none;
  transition:width .12s linear
}

@media (min-width:768px){
  .grid-cols-2{grid-template-columns:repeat(2,1fr)}
  .site-header__inner{padding:14px 28px}
  .site-footer{
    padding:56px 32px 32px
  }
  .site-footer__top{
    grid-template-columns:1fr 1fr;
    gap:40px
  }
  .site-footer__nav{
    grid-template-columns:1fr 1fr
  }
  .content-container{
    padding:64px 40px
  }
}

@media (min-width:992px){
  body{
    background:linear-gradient(90deg,var(--color-highland-blue) 260px,var(--color-snow) 260px)
  }
  .site-header{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--header-width);
    background:linear-gradient(180deg,#1E3A5F 0%,#0F4C5C 100%);
    box-shadow:4px 0 24px rgba(0,0,0,.12)
  }
  .site-header__inner{
    height:100%;
    flex-direction:column;
    align-items:stretch;
    padding:36px 20px 28px
  }
  .site-header__brand{
    padding:16px 14px;
    border-radius:var(--radius-lg);
    background:rgba(245,247,250,.06);
    border:1px solid rgba(245,247,250,.08)
  }
  .site-header__name{
    font-size:17px;
    line-height:1.3
  }
  .site-header__badge{
    font-size:9px;
    letter-spacing:.38em
  }
  .nav-toggle{display:none}
  .site-nav{
    position:static;
    width:auto;
    height:auto;
    padding:0;
    background:transparent;
    transform:none;
    visibility:visible;
    overflow:visible;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    flex:1;
    margin-top:20px
  }
  .site-nav[data-open]{
    box-shadow:none
  }
  .site-nav__header{
    margin-bottom:0
  }
  .site-nav__separator{
    margin:12px 0 18px
  }
  .site-nav__list{
    gap:2px
  }
  .site-nav__link{
    padding:12px 14px;
    font-size:14px
  }
  .site-nav__link:hover{
    padding-left:18px
  }
  .site-nav__foot{
    margin-top:auto;
    padding-top:20px
  }
  .site-nav__geo{
    font-size:10px;
    letter-spacing:.45em
  }
  .site-shell{
    margin-left:var(--header-width)
  }
  .site-footer{
    padding:64px 48px 32px
  }
  .site-footer__top{
    grid-template-columns:1.4fr 1.2fr 1fr;
    gap:48px
  }
  .site-footer__bottom{
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .content-container{
    padding:72px 56px
  }
}

@media (max-width:991px){
  .site-nav__foot{
    margin-top:auto
  }
  .site-nav__cta{
    margin-left:auto
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
  [data-reveal]{
    opacity:1;
    transform:none
  }
  .scroll-progress{
    display:none
  }
  .card:hover,
  .btn:hover,
  .site-nav__cta:hover{
    transform:none
  }
}