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

:root{
  --deep-navy:#0A1D2E;
  --abyss-blue:#123047;
  --royal-gold:#C6A55F;
  --signal-orange:#F26B3A;
  --moss-green:#5C7A5E;
  --clay:#B4684D;
  --mineral-slate:#AEB4B8;
  --rice-white:#F4EFE5;
  --font-heading:'DIN Alternate','Bahnschrift','Noto Sans CJK SC',sans-serif;
  --font-body:'HarmonyOS Sans SC','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --content-max:1440px;
  --transition:0.3s ease;
  --border-gold:rgba(198,165,95,0.25);
  --grid-unit:4rem
}

html{
  scroll-behavior:smooth
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  color:var(--rice-white);
  background-color:var(--deep-navy);
  background-image:
    linear-gradient(rgba(198,165,95,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(198,165,95,0.05) 1px,transparent 1px);
  background-size:var(--grid-unit) var(--grid-unit);
  min-height:100vh;
  -webkit-font-smoothing:antialiased
}

:focus-visible{
  outline:2px solid var(--signal-orange);
  outline-offset:2px
}

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

a{
  color:var(--royal-gold)
}

a:hover{
  color:var(--signal-orange)
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-100%;
  z-index:1000;
  background:var(--signal-orange);
  color:var(--deep-navy);
  padding:0.65rem 1.25rem;
  font-weight:600;
  font-size:0.9375rem;
  text-decoration:none;
  transition:top 0.3s ease
}

.skip-link:focus-visible{
  top:1rem
}

.container{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:1.5rem;
  padding-right:1.5rem
}

.section{
  padding-top:4rem;
  padding-bottom:4rem;
  position:relative
}

.divider{
  height:1px;
  border:none;
  background:linear-gradient(to right,transparent,rgba(198,165,95,0.5),transparent);
  margin:2rem 0
}

.grid-12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.5rem
}

.col-2{grid-column:span 2}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.col-start-2{grid-column-start:2}
.col-start-3{grid-column-start:3}
.col-start-4{grid-column-start:4}
.col-start-6{grid-column-start:6}

.prose{
  max-width:75ch;
  line-height:1.85;
  color:var(--rice-white)
}

.prose h2{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--rice-white);
  margin-top:2.5rem;
  margin-bottom:1rem;
  letter-spacing:0.02em
}

.prose h3{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:600;
  color:var(--royal-gold);
  margin-top:1.75rem;
  margin-bottom:0.75rem
}

.prose p{
  margin-bottom:1.25rem;
  color:var(--mineral-slate)
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:0.25rem;
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--mineral-slate);
  margin-bottom:1.5rem
}

.breadcrumb a{
  color:var(--royal-gold);
  text-decoration:none;
  transition:color 0.3s
}

.breadcrumb a:hover{
  color:var(--signal-orange)
}

.breadcrumb-sep{
  color:var(--mineral-slate);
  margin:0 0.25rem
}

.btn{
  display:inline-block;
  padding:0.7rem 1.6rem;
  font-family:var(--font-body);
  font-size:0.9375rem;
  font-weight:600;
  border-radius:0;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease
}

.btn-primary{
  background:var(--signal-orange);
  color:var(--deep-navy);
  border-color:var(--signal-orange)
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background:transparent;
  color:var(--signal-orange);
  box-shadow:0 0 16px rgba(242,107,58,0.3)
}

.btn-outline{
  background:transparent;
  color:var(--royal-gold);
  border-color:var(--royal-gold)
}

.btn-outline:hover,
.btn-outline:focus-visible{
  background:var(--royal-gold);
  color:var(--deep-navy);
  box-shadow:0 0 16px rgba(198,165,95,0.3)
}

.mono{
  font-family:var(--font-mono)
}

.coord-text{
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--mineral-slate);
  letter-spacing:0.12em
}

.card{
  background:var(--abyss-blue);
  border:1px solid var(--border-gold);
  padding:1.5rem;
  position:relative
}

.card-float{
  transform:rotate(-0.4deg) translateY(-2px);
  box-shadow:6px 10px 0 rgba(198,165,95,0.12),0 4px 24px rgba(0,0,0,0.3)
}

.tilt-panel{
  background:linear-gradient(135deg,var(--abyss-blue) 0%,rgba(18,48,71,0.85) 100%);
  border:1px solid var(--border-gold);
  padding:2rem;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))
}

.tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:500;
  padding:0.2rem 0.6rem;
  border:1px solid currentColor;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap
}

.tag-gold{color:var(--royal-gold)}
.tag-orange{color:var(--signal-orange)}
.tag-green{color:var(--moss-green)}
.tag-clay{color:var(--clay)}

.status-dot{
  display:inline-block;
  width:0.5rem;
  height:0.5rem;
  border-radius:50%;
  background:var(--moss-green);
  box-shadow:0 0 8px rgba(92,122,94,0.7);
  vertical-align:middle;
  margin-right:0.5rem
}

.panel{
  border:1px solid var(--border-gold);
  background:rgba(18,48,71,0.5);
  margin-bottom:1rem
}

.panel>summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.25rem;
  cursor:pointer;
  font-weight:600;
  color:var(--rice-white);
  transition:background 0.3s
}

.panel>summary::-webkit-details-marker{
  display:none
}

.panel>summary:hover{
  background:rgba(198,165,95,0.07)
}

.panel>summary::after{
  content:'+';
  font-family:var(--font-mono);
  font-size:1.25rem;
  line-height:1;
  color:var(--signal-orange)
}

.panel[open]>summary::after{
  content:'–'
}

.panel-content{
  padding:0 1.25rem 1.25rem;
  color:var(--mineral-slate);
  border-top:1px solid rgba(198,165,95,0.1)
}

.img-frame{
  position:relative;
  overflow:hidden;
  background:var(--abyss-blue);
  border:1px solid var(--border-gold)
}

.img-frame::before{
  content:attr(data-caption);
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:0.5rem 0.75rem;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--mineral-slate);
  background:rgba(10,29,46,0.85);
  z-index:1
}

.img-frame img{
  display:block;
  width:100%;
  height:auto
}

.site-header{
  background:var(--deep-navy);
  border-bottom:1px solid var(--border-gold);
  position:relative;
  z-index:50
}

.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(198,165,95,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(198,165,95,0.05) 1px,transparent 1px);
  background-size:2rem 2rem;
  pointer-events:none
}

.site-header::after{
  content:'';
  display:block;
  height:1px;
  background:linear-gradient(to right,transparent,var(--royal-gold),transparent)
}

.masthead{
  position:relative;
  text-align:center;
  padding:2.5rem 1.5rem 1.25rem
}

.masthead-index{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.3em;
  color:var(--mineral-slate);
  text-transform:uppercase;
  margin-bottom:0.75rem
}

.brand{
  font-family:var(--font-heading);
  font-size:clamp(1.8rem,4.5vw,3rem);
  font-weight:700;
  line-height:1.15;
  color:var(--rice-white);
  text-decoration:none;
  letter-spacing:0.05em;
  display:inline-block;
  padding:0.25rem 0.75rem;
  position:relative;
  text-shadow:0 0 28px rgba(198,165,95,0.18);
  transition:color 0.3s ease,text-shadow 0.3s ease
}

.brand::before,
.brand::after{
  content:'';
  position:absolute;
  top:50%;
  width:2.75rem;
  height:1px;
  background:linear-gradient(to right,transparent,var(--royal-gold));
  transform:translateY(-50%)
}

.brand::before{
  left:-3.25rem
}

.brand::after{
  right:-3.25rem;
  background:linear-gradient(to left,transparent,var(--royal-gold))
}

.brand:hover{
  color:var(--royal-gold);
  text-shadow:0 0 32px rgba(198,165,95,0.35)
}

.tagline{
  margin-top:0.5rem;
  font-size:0.875rem;
  font-weight:400;
  color:var(--royal-gold);
  letter-spacing:0.35em;
  text-transform:uppercase
}

.site-nav{
  background:rgba(18,48,71,0.55);
  border-top:1px solid rgba(198,165,95,0.12);
  position:relative;
  z-index:1
}

.nav-list{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 1rem
}

.nav-item{
  margin:0
}

.nav-link{
  display:block;
  padding:0.8rem 1.25rem;
  color:var(--rice-white);
  text-decoration:none;
  font-size:0.9375rem;
  font-weight:500;
  letter-spacing:0.08em;
  position:relative;
  transition:color 0.3s ease
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background:var(--royal-gold);
  transition:width 0.3s ease,left 0.3s ease
}

.nav-link:hover,
.nav-link:focus-visible{
  color:var(--royal-gold)
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after{
  left:0;
  width:100%
}

.nav-link[aria-current="page"]{
  color:var(--royal-gold);
  font-weight:600
}

.nav-toggle{
  position:absolute;
  top:1rem;
  right:1rem;
  display:none;
  align-items:center;
  gap:0.5rem;
  background:transparent;
  border:1px solid rgba(198,165,95,0.35);
  color:var(--rice-white);
  font-family:var(--font-body);
  font-size:0.875rem;
  font-weight:500;
  padding:0.5rem 0.875rem;
  cursor:pointer;
  z-index:20;
  transition:border-color 0.3s,color 0.3s,background 0.3s
}

.nav-toggle:hover,
.nav-toggle:focus-visible{
  border-color:var(--royal-gold);
  color:var(--royal-gold)
}

.nav-toggle-text{
  line-height:1
}

.nav-toggle-icon{
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  position:relative;
  transition:background 0.3s
}

.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform 0.3s,top 0.3s
}

.nav-toggle-icon::before{
  top:-6px
}

.nav-toggle-icon::after{
  top:6px
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon{
  background:transparent
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{
  top:0;
  transform:rotate(45deg)
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{
  top:0;
  transform:rotate(-45deg)
}

.site-footer{
  background:var(--deep-navy);
  border-top:1px solid var(--border-gold);
  position:relative;
  margin-top:4rem
}

.site-footer::before{
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(to right,transparent,var(--royal-gold),transparent)
}

.footer-top{
  max-width:var(--content-max);
  margin:0 auto;
  padding:3rem 1.5rem 2rem;
  display:grid;
  grid-template-columns:1.2fr 0.8fr 1.2fr;
  gap:2.5rem;
  position:relative;
  z-index:1
}

.footer-brand-block{
  display:flex;
  flex-direction:column;
  gap:0.375rem
}

.footer-brand{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  color:var(--rice-white);
  letter-spacing:0.05em
}

.footer-tagline{
  font-size:0.875rem;
  color:var(--royal-gold);
  letter-spacing:0.2em;
  text-transform:uppercase
}

.footer-trust{
  font-size:0.8125rem;
  color:var(--mineral-slate);
  line-height:1.7;
  margin-top:0.75rem;
  max-width:38ch
}

.footer-heading{
  font-family:var(--font-heading);
  font-size:0.875rem;
  font-weight:700;
  color:var(--royal-gold);
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:0.875rem
}

.footer-list{
  list-style:none
}

.footer-list li{
  margin-bottom:0.375rem
}

.footer-list a{
  color:var(--mineral-slate);
  text-decoration:none;
  font-size:0.9375rem;
  transition:color 0.3s
}

.footer-list a:hover{
  color:var(--signal-orange)
}

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:0.375rem
}

.footer-contact p{
  color:var(--mineral-slate);
  font-size:0.875rem;
  line-height:1.6
}

.footer-bottom{
  border-top:1px solid rgba(198,165,95,0.15);
  padding:1.25rem 1.5rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem 1.5rem;
  max-width:var(--content-max);
  margin:0 auto;
  font-size:0.8125rem;
  color:var(--mineral-slate);
  font-family:var(--font-mono)
}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:var(--signal-orange);
  z-index:9999;
  pointer-events:none
}

.back-to-top{
  position:fixed;
  bottom:1.75rem;
  right:1.75rem;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--abyss-blue);
  color:var(--royal-gold);
  border:1px solid var(--border-gold);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity 0.3s,transform 0.3s,background 0.3s,box-shadow 0.3s;
  z-index:999
}

.back-to-top:hover,
.back-to-top:focus-visible{
  background:var(--royal-gold);
  color:var(--deep-navy);
  box-shadow:0 0 16px rgba(198,165,95,0.4)
}

.back-to-top[data-visible]{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}

@media (max-width:1024px){
  .grid-12{
    grid-template-columns:repeat(6,1fr)
  }

  .col-2,.col-3,.col-4,.col-5,.col-6,.col-8,.col-12{
    grid-column:span 6
  }

  .col-start-2,.col-start-3,.col-start-4,.col-start-6{
    grid-column-start:auto
  }

  .footer-top{
    gap:1.75rem
  }
}

@media (max-width:768px){
  .masthead{
    padding:1.75rem 1.5rem 1.25rem
  }

  .masthead-index{
    font-size:0.625rem;
    letter-spacing:0.2em
  }

  .brand{
    font-size:clamp(1.6rem,4vw,2.25rem)
  }

  .brand::before,
  .brand::after{
    display:none
  }

  .tagline{
    font-size:0.75rem;
    letter-spacing:0.25em
  }

  .nav-toggle{
    display:inline-flex
  }

  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    background:var(--deep-navy);
    box-shadow:0 16px 32px rgba(0,0,0,0.45);
    border-top:1px solid rgba(198,165,95,0.15)
  }

  .site-nav[data-open]{
    display:block
  }

  .nav-list{
    flex-direction:column;
    padding:0
  }

  .nav-link{
    padding:0.875rem 1.5rem;
    border-bottom:1px solid rgba(198,165,95,0.08)
  }

  .nav-link::after{
    display:none
  }

  .nav-link[aria-current="page"]{
    background:rgba(198,165,95,0.08);
    color:var(--royal-gold)
  }

  .footer-top{
    grid-template-columns:1fr;
    gap:2rem;
    padding:2rem 1.5rem 1.5rem
  }

  .footer-bottom{
    flex-direction:column;
    text-align:center;
    justify-content:center
  }

  .section{
    padding:2.5rem 0
  }

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

  .col-2,.col-3,.col-4,.col-5,.col-6,.col-8,.col-12{
    grid-column:span 1
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important
  }

  html{
    scroll-behavior:auto
  }
}