*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Noto Sans SC','Microsoft YaHei','PingFang SC','Helvetica Neue',sans-serif;font-size:16px;line-height:1.7;color:#FFFFFF;background:#0A0A0F;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4,h5,h6{font-weight:900;line-height:1.25}
:focus-visible{outline:2px solid #FFD700;outline-offset:3px}

:root{
  --primary-red:#E30613;
  --primary-green:#00A651;
  --gold:#FFD700;
  --bg-dark:#0A0A0F;
  --bg-surface:#14141A;
  --text-primary:#FFFFFF;
  --text-secondary:#A0A0B0;
  --line-color:#333340;
  --highlight:#FFFF00;
  --font-headline:'Arial Black','Archivo Black','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','Microsoft YaHei','PingFang SC','Helvetica Neue',sans-serif;
  --font-mono:'JetBrains Mono','Courier New','SFMono-Regular',Consolas,monospace;
  --h1-size:clamp(32px,5vw,48px);
  --h2-size:clamp(24px,3.5vw,32px);
  --h3-size:clamp(18px,2.5vw,24px);
  --header-height:64px;
  --container-width:1280px;
}

@media(min-width:768px){
  :root{--header-height:72px}
}

/* ===== Container ===== */
.container{width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.container{padding-inline:32px}}
@media(min-width:1280px){.container{padding-inline:48px}}

/* ===== Skip Link ===== */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:400;
  background:var(--primary-green);color:#fff;
  font-size:14px;font-weight:700;
  padding:10px 20px;
  transform:translateY(-160%);
  transition:transform .25s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.skip-link:focus-visible{transform:translateY(0)}

/* ===== Scroll Progress ===== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:300;pointer-events:none;background:transparent;
}
.scroll-progress-bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--primary-green) 0%,var(--primary-red) 60%,var(--gold) 100%);
  transition:width 60ms linear;
}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg-dark);
  border-bottom:1px solid var(--line-color);
}
.header-inner{
  display:flex;align-items:center;gap:24px;
  min-height:var(--header-height);
}
.header-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{
  position:relative;
  width:40px;height:40px;flex-shrink:0;
  background:var(--primary-green);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-headline);
  font-size:20px;font-weight:900;color:#fff;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
.brand-mark::after{
  content:'';position:absolute;top:0;right:0;
  border-top:12px solid var(--primary-red);
  border-left:12px solid transparent;
}
.brand-text-wrap{display:flex;flex-direction:column;line-height:1.1}
.brand-text{
  font-family:var(--font-headline);
  font-size:20px;font-weight:900;
  letter-spacing:.04em;color:#fff;
}
.brand-sub{
  font-family:var(--font-mono);
  font-size:10px;font-weight:700;
  letter-spacing:.22em;color:var(--gold);
  margin-top:2px;
}

/* ===== Navigation (Desktop) ===== */
.header-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-link{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;
  font-size:15px;font-weight:500;
  letter-spacing:.02em;
  color:var(--text-secondary);
  transition:color .25s ease;
}
.nav-link::after{
  content:'';position:absolute;bottom:4px;left:12px;right:12px;
  height:2px;background:var(--primary-green);
  transform:scaleX(0);transform-origin:right;
  transition:transform .28s ease;
}
.nav-link:hover{color:#fff}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);transform-origin:left;
}
.nav-link[aria-current="page"]{color:#fff}
.nav-index{
  font-family:var(--font-mono);
  font-size:10px;font-weight:700;
  color:var(--primary-green);
  letter-spacing:.05em;
}

/* ===== Nav Toggle (Mobile) ===== */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line-color);
  background:var(--bg-surface);
  transition:border-color .2s ease;
}
.nav-toggle:hover{border-color:var(--primary-green)}
.toggle-bar{
  width:20px;height:2px;background:#fff;border-radius:0;
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ===== Mobile Nav ===== */
@media(max-width:839px){
  .header-inner{gap:12px}
  .nav-toggle{display:flex;margin-left:auto}
  .header-nav{
    position:absolute;top:100%;left:0;right:0;
    margin-left:0;
    background:var(--bg-surface);
    max-height:0;overflow:hidden;
    transition:max-height .42s cubic-bezier(.4,0,.2,1);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
  .header-nav[data-open]{
    max-height:calc(100vh - var(--header-height));
    overflow-y:auto;
    border-top:2px solid var(--primary-green);
    border-bottom:1px solid var(--line-color);
  }
  .nav-list{flex-direction:column;align-items:stretch;padding:8px 20px 20px;gap:0}
  .nav-link{
    justify-content:flex-start;
    padding:14px 8px;
    font-size:16px;
    border-bottom:1px solid var(--line-color);
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{
    background:linear-gradient(90deg,rgba(0,166,81,.14),transparent 70%);
    border-left:3px solid var(--primary-green);
  }
  .nav-index{font-size:12px;min-width:30px}
}

/* ===== Footer ===== */
.site-footer{
  background:var(--bg-dark);
  border-top:none;
  position:relative;
}
.site-footer::before{
  content:'';display:block;height:4px;
  background:linear-gradient(90deg,var(--primary-green) 0 30%,var(--primary-red) 30% 55%,var(--gold) 55% 100%);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:48px 40px;
  padding:64px 0 48px;
}
.footer-col{min-width:0}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand-text{
  font-family:var(--font-headline);
  font-size:22px;font-weight:900;letter-spacing:.04em;color:#fff;
}
.footer-trust{
  font-size:14px;color:var(--text-secondary);
  line-height:1.8;
  border-left:3px solid var(--primary-green);
  padding-left:16px;
  margin-top:20px;
}
.footer-title{
  font-family:var(--font-mono);
  font-size:13px;font-weight:700;
  letter-spacing:.12em;
  color:var(--gold);
  display:flex;align-items:center;gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-color);
  margin-bottom:16px;
}
.footer-title::before{
  content:'';width:6px;height:6px;
  background:var(--primary-red);flex-shrink:0;
}
.footer-links li{margin-bottom:2px}
.footer-links a{
  display:inline-block;
  font-size:14px;color:var(--text-secondary);
  padding:5px 0;
  transition:color .2s ease,transform .2s ease;
}
.footer-links a:hover{
  color:var(--primary-green);
  transform:translateX(4px);
}
.footer-contact{
  font-size:14px;color:var(--text-secondary);
  display:flex;flex-direction:column;gap:10px;
}
.contact-label{
  display:inline-block;
  min-width:34px;
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  letter-spacing:.1em;
  color:var(--gold);
  margin-right:6px;
}
.footer-bottom{
  background:#07070B;
  border-top:1px solid var(--line-color);
}
.footer-bottom-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:8px 24px;
  padding-top:14px;padding-bottom:14px;
  font-family:var(--font-mono);
  font-size:12px;color:var(--text-secondary);
}
.footer-icp{color:var(--text-secondary)}
.footer-copy{display:inline-flex;align-items:center;gap:4px}
.footer-domain{letter-spacing:.08em}

@media(max-width:1023px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 32px;padding:56px 0 40px}
  .footer-col--main{grid-column:1 / -1}
}
@media(max-width:599px){
  .footer-grid{grid-template-columns:1fr;gap:36px;padding:48px 0 32px}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== Common Components ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:13px;font-weight:700;
  letter-spacing:.14em;
  color:var(--primary-green);
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';width:22px;height:3px;
  background:var(--primary-green);
}

.page-heading{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line-color);
  margin-bottom:48px;
  position:relative;
}
.page-heading::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:120px;height:3px;
  background:linear-gradient(90deg,var(--primary-red),var(--gold));
}
.page-heading h1{
  font-family:var(--font-headline);
  font-size:var(--h1-size);
  letter-spacing:.02em;
  line-height:1.15;
  margin:0 0 16px;
}
.page-heading p{
  font-size:16px;color:var(--text-secondary);
  max-width:640px;line-height:1.8;
}

.breadcrumbs{
  display:flex;flex-wrap:wrap;gap:4px 8px;
  font-family:var(--font-mono);
  font-size:13px;color:var(--text-secondary);
  padding:16px 0;
}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li+li::before{content:'/';color:var(--line-color)}
.breadcrumbs a{color:var(--text-secondary);transition:color .2s}
.breadcrumbs a:hover{color:var(--primary-green)}
[aria-current="page"]{color:#fff}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 30px;
  font-family:var(--font-mono);
  font-size:14px;font-weight:700;
  letter-spacing:.08em;line-height:1.4;
  border:1px solid transparent;
  border-radius:0;
  text-align:center;
  transition:background-color .25s,border-color .25s,color .25s,transform .2s,box-shadow .2s;
  cursor:pointer;
}
.btn--primary{background:var(--primary-green);color:#fff}
.btn--primary:hover{background:#00bd5d;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,166,81,.25)}
.btn--ghost{background:transparent;border-color:var(--primary-red);color:var(--primary-red)}
.btn--ghost:hover{background:var(--primary-red);color:#fff;transform:translateY(-2px)}

.panel{
  position:relative;
  background:var(--bg-surface);
  border:1px solid var(--line-color);
  padding:28px 24px;
}
.panel::before{
  content:'';position:absolute;top:-1px;left:-1px;
  border-top:18px solid var(--primary-green);
  border-right:18px solid transparent;
}

.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:639px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

.image-frame{
  position:relative;overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--line-color);
  aspect-ratio:16/10;
}
.image-frame img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.image-frame--wide{aspect-ratio:21/9}
.image-frame--square{aspect-ratio:1/1}
.image-frame--portrait{aspect-ratio:3/4}

.divider{
  border:none;height:1px;
  background:linear-gradient(90deg,var(--line-color),transparent);
  margin:48px 0;
}

.speedline{
  display:block;height:3px;border:none;
  background:linear-gradient(90deg,var(--primary-green) 0%,var(--primary-red) 45%,var(--gold) 70%,transparent 100%);
  margin:32px 0;
}

.section-head{margin-bottom:32px}
.section-title{
  font-family:var(--font-headline);
  font-size:var(--h2-size);
  font-weight:900;
  letter-spacing:.02em;
  position:relative;
  padding-left:16px;
  margin-bottom:12px;
}
.section-title::before{
  content:'';position:absolute;left:0;top:.15em;bottom:.15em;
  width:4px;background:var(--primary-red);
}
.section-head p{
  color:var(--text-secondary);
  max-width:640px;font-size:15px;line-height:1.8;
}

.text-muted{color:var(--text-secondary)}
.text-green{color:var(--primary-green)}
.text-red{color:var(--primary-red)}
.text-gold{color:var(--gold)}
.bg-surface{background:var(--bg-surface)}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .scroll-progress-bar{transition:none}
  .nav-link::after{transition:none}
  .btn{transition:none}
  .panel{transition:none}
}
