/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
body{font-family:'Helvetica Neue','Arial',sans-serif;color:#1A1A1A;background:#F1FAEE;min-height:100vh}
:focus-visible{outline:3px solid #F4A261;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  html{scroll-behavior:auto}
}

/* === CSS Custom Properties === */
:root{
  --color-primary-red:#E63946;
  --color-primary-blue:#1D3557;
  --color-gold:#F4A261;
  --color-light:#F1FAEE;
  --color-dark:#111111;
  --color-bg-dark:#0A1A2E;
  --color-text-light:#FFFFFF;
  --color-text-dark:#1A1A1A;
  --color-divider:#1D3557;
  --color-hover-gold:#E76F51;
  --font-headings:'Anton','Impact','Arial Black',sans-serif;
  --font-body:'Inter','Roboto','Helvetica Neue',sans-serif;
  --font-numbers:'Oswald','Impact',sans-serif;
  --header-height:4rem;
  --max-width:1200px;
  --border-thick:4px;
  --shadow-strong:0 8px 20px rgba(0,0,0,0.3);
}

/* === Skip Link === */
.skip-link{
  position:absolute;top:-100px;left:0;background:var(--color-dark);color:var(--color-text-light);
  padding:0.5rem 1rem;z-index:999;font-size:0.875rem;text-decoration:none
}
.skip-link:focus{top:0;outline:2px solid var(--color-gold)}

/* === Header === */
.site-header{
  background:var(--color-dark);color:var(--color-text-light);border-bottom:var(--border-thick) solid var(--color-primary-red);
  position:sticky;top:0;z-index:100;box-shadow:var(--shadow-strong)
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;
  padding:0 1rem;height:var(--header-height)
}
.brand a{display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:var(--color-text-light)}
.brand-text{font-family:var(--font-headings);font-size:1.5rem;letter-spacing:0.05em}
.header-tools{display:flex;align-items:center;gap:1rem}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-box{
  background:var(--color-bg-dark);border:2px solid var(--color-primary-red);border-radius:0;
  padding:0.4rem 0.8rem;color:var(--color-text-light);width:200px;font-family:var(--font-body);font-size:0.875rem
}
.search-box::placeholder{color:#aaa;opacity:0.7}
.search-btn{
  background:var(--color-primary-red);color:var(--color-text-light);
  padding:0.4rem 0.6rem;cursor:pointer;font-size:1rem;line-height:1;border:2px solid transparent;transition:background 0.2s
}
.search-btn:hover,.search-btn:focus-visible{background:var(--color-gold);border-color:var(--color-gold)}
.header-cta{font-family:var(--font-headings);font-size:0.9rem;padding:0.4rem 1rem;background:var(--color-primary-blue);border-color:var(--color-primary-blue)}
.header-cta:hover{background:var(--color-gold);border-color:var(--color-gold)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;flex-direction:column;gap:4px}
.nav-toggle-bar{display:block;width:24px;height:3px;background:var(--color-text-light);border-radius:2px;transition:transform 0.3s}
.site-nav{background:var(--color-bg-dark);border-top:2px solid var(--color-primary-red)}
.nav-list{display:flex;list-style:none;max-width:var(--max-width);margin:0 auto;padding:0 1rem}
.nav-list li a{
  display:block;padding:0.75rem 1.2rem;color:var(--color-text-light);text-decoration:none;
  font-family:var(--font-headings);font-size:0.95rem;letter-spacing:0.05em;
  border-right:2px solid transparent;border-left:2px solid transparent;transition:background 0.2s,border-color 0.2s,color 0.2s
}
.nav-list li a:hover,.nav-list li a:focus-visible{background:var(--color-primary-red);border-color:var(--color-gold);color:var(--color-gold)}
.nav-list li a[aria-current="page"]{border-bottom:4px solid var(--color-gold);background:rgba(244,162,97,0.15)}

/* === Footer === */
.site-footer{
  background:var(--color-dark);color:var(--color-text-light);border-top:var(--border-thick) solid var(--color-primary-blue);
  padding:2rem 1rem 1rem;font-family:var(--font-body);font-size:0.9rem
}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 2fr;gap:2rem}
.footer-brand{display:flex;align-items:center;gap:0.5rem}
.footer-brand-text{font-family:var(--font-headings);font-size:1.3rem}
.footer-links ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{color:var(--color-gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s}
.footer-links a:hover{border-bottom-color:var(--color-gold)}
.footer-contact p{line-height:1.8}
.footer-contact a{color:var(--color-gold);text-decoration:none;border-bottom:1px solid transparent}
.footer-contact a:hover{border-bottom-color:var(--color-gold)}
.footer-bottom{max-width:var(--max-width);margin:1.5rem auto 0;padding-top:1rem;border-top:1px solid var(--color-divider);text-align:center;font-size:0.8rem}
.footer-bottom p{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.footer-icp{color:var(--color-gold)}

/* === Buttons === */
.btn{
  display:inline-block;padding:0.5rem 1.2rem;border:2px solid;border-radius:0;
  font-family:var(--font-headings);text-decoration:none;text-transform:uppercase;
  cursor:pointer;transition:transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s
}
.btn:hover,.btn:focus-visible{transform:scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.btn-primary{background:var(--color-primary-red);border-color:var(--color-primary-red);color:var(--color-text-light)}
.btn-primary:hover{background:var(--color-hover-gold);border-color:var(--color-hover-gold)}
.btn-secondary{background:transparent;border-color:var(--color-gold);color:var(--color-gold)}

/* === Panel (堆叠面板) === */
.panel{
  background:var(--color-light);border:3px solid var(--color-primary-blue);
  box-shadow:var(--shadow-strong);padding:2rem;margin:2rem 0
}
.panel--dark{background:var(--color-bg-dark);color:var(--color-text-light);border-color:var(--color-primary-red)}
.panel--accent{border-color:var(--color-gold)}

/* === Skewed Elements === */
.skewed{
  display:inline-block;transform:skewX(-8deg);padding:0.2rem 1rem;
  background:var(--color-primary-red);color:var(--color-text-light);font-family:var(--font-headings)
}
.skewed--blue{background:var(--color-primary-blue)}
.skewed--gold{background:var(--color-gold);color:var(--color-dark)}

/* === Card === */
.card{
  background:var(--color-light);border:3px solid var(--color-primary-blue);
  padding:1.5rem;transition:transform 0.2s, box-shadow 0.2s;cursor:default
}
.card:hover,.card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-strong)}

/* === Timeline === */
.timeline{position:relative;padding-left:2rem;border-left:4px solid var(--color-primary-red)}
.timeline-item{margin-bottom:2rem;padding-left:1rem;position:relative;border-bottom:1px dashed var(--color-divider)}
.timeline-item::before{
  content:'';position:absolute;left:-1.15rem;top:0.5rem;width:16px;height:16px;
  background:var(--color-gold);border:3px solid var(--color-primary-red);border-radius:50%
}

/* === Search box variants (reused) === */
.search-box,--search-input{border:2px solid var(--color-primary-red);border-radius:0;background:var(--color-bg-dark);color:var(--color-text-light);padding:0.4rem 0.8rem;font-family:var(--font-body)}
.search-box:focus{outline:2px solid var(--color-gold)}

/* === Divider === */
.asymmetric-divider{
  height:6px;background:linear-gradient(135deg, var(--color-primary-red) 40%, var(--color-primary-blue) 40%, var(--color-gold) 60%);
  margin:3rem 0;border:none;clip-path:polygon(0 0,100% 0,95% 100%,0 100%)
}

/* === Back to Top === */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  width:3rem;height:3rem;background:var(--color-primary-red);color:var(--color-text-light);
  border:2px solid var(--color-gold);border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;transition:opacity 0.3s, transform 0.2s;opacity:0;pointer-events:none
}
.back-to-top.visible{opacity:1;pointer-events:auto}
.back-to-top:hover,.back-to-top:focus-visible{transform:scale(1.1);background:var(--color-primary-blue)}

/* === Grids === */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* === Responsive Header === */
@media (max-width:768px){
  .header-inner{flex-wrap:wrap;height:auto;padding:0.5rem 1rem}
  .search-wrapper{width:100%;margin-top:0.5rem}
  .search-box{width:100%}
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .site-nav{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
  .site-nav[data-open]{max-height:500px}
  .nav-list{flex-direction:column;padding:0}
  .nav-list li{border-bottom:1px solid var(--color-divider)}
  .nav-list li a{padding:1rem;text-align:center}
}
@media (min-width:769px){
  .site-nav{display:block!important;max-height:none!important}
}

/* === Responsive Footer === */
@media (max-width:768px){
  .footer-inner{grid-template-columns:1fr;gap:1.5rem;text-align:center}
  .footer-links ul{flex-direction:row;justify-content:center;gap:1rem}
}

/* === Utility === */
.container{max-width:var(--max-width);margin:0 auto;padding:0 1rem}
.section{padding:3rem 0}
.text-center{text-align:center}
img{max-width:100%;height:auto;display:block}

/* === Trust Statement (可复用) === */
.trust-banner{
  background:var(--color-primary-blue);color:var(--color-text-light);
  padding:1rem 2rem;border-left:6px solid var(--color-gold);font-family:var(--font-body)
}