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

:root{
  --bg-deep:#0A0E1A;
  --bg-layer:#1A2133;
  --blue-electric:#00E5FF;
  --purple-red:#9D4EDD;
  --orange-gold:#FF9E00;
  --feedback-red:#FF3D71;
  --text-primary:#E6EAF2;
  --text-secondary:#A0AABF;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
  --font-heading:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --container-max:1280px;
  --container-pad:clamp(1rem,4vw,2.5rem);
  --header-height:64px;
  --space-xs:0.375rem;
  --space-sm:0.75rem;
  --space-md:1.25rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-xxl:4.5rem;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --ease-standard:0.25s cubic-bezier(0.4,0,0.2,1);
  --ease-slow:0.5s cubic-bezier(0.4,0,0.2,1)
}

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

body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.6;
  color:var(--text-primary);
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(ellipse at 15% 10%,rgba(0,229,255,0.05) 0%,transparent 45%),
    radial-gradient(ellipse at 85% 30%,rgba(157,78,221,0.05) 0%,transparent 40%),
    radial-gradient(ellipse at 50% 100%,rgba(255,158,0,0.03) 0%,transparent 50%);
  min-height:100vh;
  overflow-wrap:break-word
}

img,picture,video{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:900;line-height:1.25}

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

::selection{
  background:rgba(0,229,255,0.25);
  color:var(--text-primary)
}

#main-content{
  scroll-margin-top:110px;
  min-height:60vh
}

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

.section{
  padding-top:var(--space-xxl);
  padding-bottom:var(--space-xxl)
}

.content-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--space-lg)
}

@media(max-width:960px){
  .content-grid{grid-template-columns:repeat(6,1fr);gap:var(--space-md)}
}

@media(max-width:560px){
  .content-grid{grid-template-columns:1fr;gap:var(--space-md)}
}

.data-flow-bg{
  position:relative;
  background-image:
    linear-gradient(rgba(0,229,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,0.04) 1px,transparent 1px),
    linear-gradient(rgba(157,78,221,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,78,221,0.03) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,240px 240px,240px 240px
}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:3000;
  background:linear-gradient(90deg,var(--blue-electric),var(--purple-red),var(--orange-gold));
  transform:scaleX(0);
  transform-origin:0 0;
  transition:transform 0.1s linear;
  pointer-events:none
}

.skip-link{
  position:absolute;
  top:-100px;
  left:0;
  z-index:2500;
  display:inline-flex;
  align-items:center;
  padding:0.75rem 1.5rem;
  background:var(--orange-gold);
  color:var(--bg-deep);
  font-family:var(--font-body);
  font-size:0.875rem;
  font-weight:700;
  text-decoration:none;
  border-radius:0 0 var(--radius-md) 0;
  transition:top var(--ease-standard),box-shadow var(--ease-standard)
}

.skip-link:focus{
  top:0;
  box-shadow:0 4px 24px rgba(255,158,0,0.4)
}

.announce-bar{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(157,78,221,0.25),rgba(0,229,255,0.2),rgba(255,158,0,0.12));
  border-bottom:1px solid var(--glass-border);
  text-align:center;
  padding:0.375rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center
}

.announce-bar p{
  font-size:0.75rem;
  letter-spacing:0.05em;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:0.5rem
}

.announce-bar p::before{
  content:'✦';
  color:var(--blue-electric);
  font-size:0.625rem;
  animation:announce-pulse 2.5s ease-in-out infinite
}

.announce-bar::after{
  content:'';
  position:absolute;
  top:0;
  left:-25%;
  width:25%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  animation:announce-shimmer 7s ease-in-out infinite;
  pointer-events:none
}

@keyframes announce-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.8)}
}

@keyframes announce-shimmer{
  0%{left:-25%}
  55%,100%{left:125%}
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(10,14,26,0.82);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-border)
}

.header-main{
  position:relative
}

.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  min-height:var(--header-height)
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  text-decoration:none;
  flex-shrink:0
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue-electric),var(--purple-red));
  color:var(--bg-deep);
  font-family:var(--font-heading);
  font-size:0.875rem;
  font-weight:900;
  letter-spacing:0.02em;
  box-shadow:0 4px 20px rgba(0,229,255,0.3),0 0 48px rgba(157,78,221,0.15);
  flex-shrink:0;
  position:relative
}

.brand-mark::after{
  content:'';
  position:absolute;
  top:-3px;
  right:-3px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue-electric);
  box-shadow:0 0 12px var(--blue-electric);
  animation:brand-dot 3s ease-in-out infinite
}

@keyframes brand-dot{
  0%,100%{opacity:1;box-shadow:0 0 8px var(--blue-electric)}
  50%{opacity:0.5;box-shadow:0 0 20px var(--blue-electric)}
}

.brand-text{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.05em;
  white-space:nowrap
}

.main-nav{
  display:flex;
  align-items:center
}

.nav-list{
  display:flex;
  align-items:center;
  gap:var(--space-md)
}

.nav-link{
  position:relative;
  display:inline-block;
  font-family:var(--font-body);
  font-size:0.9375rem;
  font-weight:400;
  color:var(--text-secondary);
  text-decoration:none;
  padding:0.375rem 0.125rem;
  white-space:nowrap;
  transition:color var(--ease-standard)
}

.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--blue-electric),var(--purple-red));
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--ease-standard)
}

.nav-link:hover,
.nav-link[aria-current="page"]{
  color:var(--text-primary)
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after{
  transform:scaleX(1)
}

.nav-toggle{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:46px;
  height:46px;
  padding:8px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:background var(--ease-standard),border-color var(--ease-standard);
  flex-shrink:0
}

.nav-toggle:hover{
  background:rgba(0,229,255,0.08);
  border-color:rgba(0,229,255,0.3)
}

.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background-color:var(--text-primary);
  border-radius:2px;
  transition:transform var(--ease-standard),opacity var(--ease-standard)
}

.nav-toggle-label{
  font-size:0.625rem;
  color:var(--text-secondary);
  letter-spacing:0.08em;
  line-height:1
}

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

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

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

.site-footer{
  position:relative;
  background:linear-gradient(180deg,#080B14,#0A0E1A);
  margin-top:var(--space-xxl)
}

.site-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue-electric),var(--purple-red),var(--orange-gold))
}

.footer-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--space-xxl) var(--container-pad) var(--space-xl);
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr 1fr;
  gap:var(--space-xl)
}

.footer-brand .brand{
  margin-bottom:var(--space-md)
}

.footer-desc{
  font-size:0.875rem;
  color:var(--text-secondary);
  line-height:1.7;
  max-width:320px
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:var(--space-md)
}

.footer-heading{
  font-family:var(--font-heading);
  font-size:0.875rem;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:0.08em;
  padding-bottom:0.375rem;
  position:relative
}

.footer-heading::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:24px;
  height:2px;
  background:linear-gradient(90deg,var(--blue-electric),var(--purple-red));
  border-radius:2px
}

.footer-list{
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  font-size:0.875rem;
  color:var(--text-secondary)
}

.footer-list a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:color var(--ease-standard),padding-left var(--ease-standard)
}

.footer-list a:hover{
  color:var(--blue-electric);
  padding-left:4px
}

.footer-list-plain li{
  line-height:1.7
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:var(--space-md) var(--container-pad);
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-sm);
  font-size:0.75rem;
  color:var(--text-secondary)
}

.footer-copy{
  color:var(--text-secondary)
}

.footer-icp{
  color:var(--text-secondary);
  letter-spacing:0.05em
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  padding:0.625rem 1.5rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:0.9375rem;
  font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--ease-standard),box-shadow var(--ease-standard),background var(--ease-standard),border-color var(--ease-standard)
}

.btn-primary{
  background:linear-gradient(135deg,var(--orange-gold),#FF7A00);
  color:var(--bg-deep);
  box-shadow:0 4px 24px rgba(255,158,0,0.3)
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(255,158,0,0.4)
}

.btn-ghost{
  background:var(--glass-bg);
  border-color:var(--glass-border);
  color:var(--text-primary);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)
}

.btn-ghost:hover{
  border-color:var(--blue-electric);
  background:rgba(0,229,255,0.08);
  box-shadow:0 4px 24px rgba(0,229,255,0.12)
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.375rem;
  padding:var(--space-sm) 0;
  font-size:0.8125rem
}

.breadcrumb-link{
  color:var(--text-secondary);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  transition:color var(--ease-standard)
}

.breadcrumb-link:hover{
  color:var(--blue-electric)
}

.breadcrumb-link:not(:last-child)::after{
  content:'/';
  color:var(--text-secondary);
  font-size:0.75rem
}

.breadcrumb-current{
  color:var(--text-primary);
  font-weight:400
}

.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform var(--ease-standard),box-shadow var(--ease-standard),border-color var(--ease-standard)
}

.glass-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 40px rgba(0,229,255,0.08),0 0 80px rgba(157,78,221,0.05);
  border-color:rgba(0,229,255,0.25)
}

.section-label{
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--blue-electric)
}

.section-label::before{
  content:'';
  width:20px;
  height:2px;
  background:linear-gradient(90deg,var(--blue-electric),var(--purple-red));
  border-radius:2px;
  flex-shrink:0
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.75rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.04em;
  background:rgba(0,229,255,0.08);
  border:1px solid rgba(0,229,255,0.2);
  color:var(--blue-electric)
}

.tag-hot{
  background:rgba(255,158,0,0.1);
  border-color:rgba(255,158,0,0.3);
  color:var(--orange-gold)
}

.timeline-item{
  position:relative;
  padding-left:var(--space-xl);
  padding-bottom:var(--space-xl)
}

.timeline-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0.375rem;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,var(--blue-electric),var(--purple-red),transparent)
}

.timeline-item::after{
  content:'';
  position:absolute;
  left:-5px;
  top:0.5rem;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--bg-deep);
  border:2px solid var(--blue-electric);
  box-shadow:0 0 12px rgba(0,229,255,0.6)
}

@media(min-width:769px){
  .nav-toggle{display:none}
}

@media(max-width:768px){
  .header-inner{
    min-height:56px
  }

  .brand-mark{
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:0.75rem
  }

  .brand-mark::after{
    width:8px;
    height:8px
  }

  .brand-text{
    font-size:1.0625rem
  }

  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:0;
    overflow:hidden;
    background:rgba(10,14,26,0.96);
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    border-bottom:1px solid var(--glass-border);
    transition:max-height var(--ease-slow),border-color var(--ease-slow)
  }

  .main-nav[data-open]{
    max-height:460px;
    border-bottom-color:rgba(0,229,255,0.2)
  }

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--space-sm) var(--container-pad) var(--space-md)
  }

  .nav-link{
    display:block;
    padding:var(--space-sm) 0;
    border-bottom:1px solid rgba(255,255,255,0.05)
  }

  .nav-link::after{
    bottom:-1px
  }

  .footer-inner{
    grid-template-columns:1fr 1fr;
    gap:var(--space-lg);
    padding-top:var(--space-xl)
  }

  .footer-brand{
    grid-column:1/-1
  }
}

@media(max-width:480px){
  .footer-inner{
    grid-template-columns:1fr
  }
}

@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
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-progress{
    transition:none
  }

  .announce-bar::after{
    animation:none
  }

  .announce-bar p::before{
    animation:none
  }

  .brand-mark::after{
    animation:none
  }
}

@media(max-width:768px){
  .brand-text{
    white-space:nowrap
  }

  .nav-toggle-label{
    display:none
  }

  .header-inner{
    gap:var(--space-sm)
  }
}