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

:root{
  --color-bg:#F9F9F7;
  --color-ink:#1B2A4A;
  --color-accent:#00B3D4;
  --color-alert:#FF312E;
  --color-warm:#FF8A00;
  --color-decor:#7D4D9A;
  --color-charcoal:#3F4A5A;
  --color-border:#D8E0E8;
  --color-night:#121820;
  --color-white:#FFFFFF;

  --font-head:"DIN Condensed","Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",-apple-system,sans-serif;
  --font-mono:"Roboto Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;

  --container-w:1200px;
  --content-pad:clamp(1.25rem,4vw,2rem);
  --ticker-h:40px;
  --nav-h:72px;

  --radius-pill:999px;
  --radius-lg:20px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-float:0 8px 28px rgba(27,42,74,.10),0 0 0 1px rgba(0,179,212,.03);
  --transition-fast:.2s ease;
  --transition-slow:.45s cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}

body{
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--color-ink);
  text-wrap:balance;
}
h1{font-size:clamp(2.75rem,6vw,4.75rem);margin-bottom:1rem}
h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.875rem}
h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:.75rem}
h4{font-size:1.25rem;margin-bottom:.5rem}
p{margin-bottom:1rem}
a{color:var(--color-accent);text-decoration-thickness:1px;text-underline-offset:2px}
strong{font-weight:600}
em{font-style:italic}

::selection{background:var(--color-ink);color:var(--color-bg)}

:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}

#main-content,
:target{scroll-margin-top:calc(var(--ticker-h) + var(--nav-h) + 8px)}

.container{
  width:min(calc(100% - var(--content-pad) * 2),var(--container-w));
  margin-inline:auto;
}

.content-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2vw,2rem);
}
.col-narrow{grid-column:span 4}
.col-wide{grid-column:span 8}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  line-height:1.4;
}
.btn-primary{background:var(--color-ink);color:var(--color-white)}
.btn-primary:hover{background:#0F1B33;transform:translateY(-2px);box-shadow:0 8px 22px rgba(27,42,74,.25)}
.btn-secondary{background:var(--color-accent);color:var(--color-white)}
.btn-secondary:hover{background:#009DB8;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,179,212,.3)}
.btn-ghost{background:transparent;color:var(--color-ink);border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-ink);background:var(--color-white);transform:translateY(-2px)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .75rem;
  border-radius:var(--radius-pill);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.5;
}
.badge-live{background:var(--color-alert);color:var(--color-white)}
.badge-live::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--color-white);
  animation:pulse-dot 1.6s ease-in-out infinite;
}
.badge-version{background:var(--color-warm);color:var(--color-white)}

.card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:var(--shadow-float);
}

.stat-number{
  font-family:var(--font-mono);
  font-size:2.25rem;
  font-weight:500;
  line-height:1.1;
  color:var(--color-ink);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.section-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:1.5rem;
}
.section-label::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--color-accent);
  border-radius:2px;
}

.label-note{
  position:relative;
  padding-left:.875rem;
  font-size:.85rem;
  color:var(--color-charcoal);
  line-height:1.6;
  border-left:2px solid var(--color-accent);
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem;
  font-size:.85rem;
  list-style:none;
}
.breadcrumb li+li::before{
  content:"/";
  margin-right:.375rem;
  color:var(--color-border);
}
.breadcrumb a{color:var(--color-charcoal);text-decoration:none;transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb .current{color:var(--color-ink);font-weight:500}

.img-shell{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--color-border);
}
.img-shell::before{
  content:"";
  display:block;
  padding-top:56.25%;
}
.img-shell>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-md);
}
.img-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  color:var(--color-charcoal);
  background:
    linear-gradient(135deg,rgba(0,179,212,.08) 25%,transparent 25%),
    linear-gradient(225deg,rgba(0,179,212,.08) 25%,transparent 25%);
  background-color:var(--color-border);
}

.fig-caption{
  font-size:.78rem;
  color:var(--color-charcoal);
  margin-top:.5rem;
  font-family:var(--font-mono);
}

[data-reveal]{
  opacity:0;
  transform:translateY(24px) skewY(.5deg);
  transition:opacity var(--transition-slow),transform var(--transition-slow);
  transition-delay:var(--reveal-delay,0s);
}
[data-reveal][data-visible]{
  opacity:1;
  transform:translateY(0) skewY(0deg);
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
}

.skip-link{
  position:absolute;
  left:1rem;
  top:-100%;
  z-index:2000;
  background:var(--color-ink);
  color:var(--color-white);
  padding:.625rem 1.25rem;
  border-radius:var(--radius-pill);
  font-size:.85rem;
  text-decoration:none;
  transition:top var(--transition-fast);
  box-shadow:0 4px 16px rgba(27,42,74,.35);
}
.skip-link:focus{top:.5rem;color:var(--color-white)}

.ticker-bar{
  height:var(--ticker-h);
  background:var(--color-ink);
  background-image:repeating-linear-gradient(
    135deg,
    rgba(0,179,212,.06) 0px,
    rgba(0,179,212,.06) 2px,
    transparent 2px,
    transparent 10px
  );
  overflow:hidden;
  display:flex;
  align-items:center;
}
.ticker-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:ticker-roll 52s linear infinite;
  will-change:transform;
}
.ticker-bar:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding-right:3rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
  white-space:nowrap;
}
.live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-alert);
  margin-right:.375rem;
  box-shadow:0 0 8px rgba(255,49,46,.8);
  animation:pulse-dot 1.4s ease-in-out infinite;
  flex-shrink:0;
}

@keyframes ticker-roll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}

.nav-floating{
  display:flex;
  justify-content:center;
  padding:.75rem clamp(.75rem,3vw,2rem);
}
.nav-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(100%,1320px);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:.5rem .5rem .5rem 1.5rem;
  box-shadow:var(--shadow-float);
}
.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  flex-shrink:0;
}
.brand-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-accent);
  box-shadow:0 0 12px rgba(0,179,212,.7);
  flex-shrink:0;
}
.brand-name{
  font-family:var(--font-head);
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--color-ink);
}
.brand-name::after{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--color-warm);
  margin-left:4px;
  vertical-align:super;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:.25rem;
  margin-left:1.5rem;
}
.nav-link{
  display:inline-block;
  padding:.5rem .875rem;
  border-radius:var(--radius-pill);
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:var(--color-ink);
  transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);
  white-space:nowrap;
}
.nav-link:hover{
  background:rgba(27,42,74,.06);
  color:var(--color-accent);
}
.nav-link[aria-current="page"]{
  background:var(--color-ink);
  color:var(--color-white);
  box-shadow:0 4px 14px rgba(27,42,74,.28);
}
.nav-link[aria-current="page"]:hover{color:var(--color-white)}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.375rem;
  background:transparent;
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:.375rem .75rem;
  cursor:pointer;
  color:var(--color-ink);
  line-height:1;
  font-family:var(--font-body);
  transition:border-color var(--transition-fast),background var(--transition-fast);
}
.nav-toggle:hover{border-color:var(--color-accent);background:rgba(0,179,212,.04)}
.nav-toggle-line{
  display:block;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  margin:2.5px 0;
  transition:transform var(--transition-fast),opacity var(--transition-fast);
}
.nav-toggle-caption{
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.06em;
  margin-left:.125rem;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){transform:translateY(6px) 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(-6px) rotate(-45deg)}

.site-footer{
  background:var(--color-night);
  color:rgba(255,255,255,.78);
  margin-top:clamp(3rem,8vw,6rem);
}
.site-footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,
    var(--color-accent) 0 20%,
    var(--color-white) 20% 40%,
    var(--color-alert) 40% 60%,
    var(--color-warm) 60% 80%,
    var(--color-decor) 80% 100%);
}

.footer-top{
  width:min(calc(100% - var(--content-pad) * 2),var(--container-w));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2rem;
  padding:4rem 0 2.5rem;
}
.footer-brand-col{grid-column:span 4}
.footer-nav-col{grid-column:span 2}
.footer-contact-col{grid-column:span 4}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  margin-bottom:1.25rem;
}
.footer-brand .brand-name{color:var(--color-white)}
.footer-trust{
  font-size:.85rem;
  line-height:1.7;
  color:rgba(255,255,255,.55);
  max-width:34ch;
  margin-bottom:0;
}

.footer-heading{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-white);
  margin-bottom:1.25rem;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.footer-links a{
  color:rgba(255,255,255,.68);
  text-decoration:none;
  font-size:.88rem;
  transition:color var(--transition-fast),padding-left var(--transition-fast);
}
.footer-links a:hover{
  color:var(--color-accent);
  padding-left:4px;
}

.footer-contact-item{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:rgba(255,255,255,.6);
  margin-bottom:.75rem;
  line-height:1.5;
}
.footer-service-note{
  font-size:.78rem;
  color:rgba(255,255,255,.45);
  line-height:1.7;
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1rem;
  margin-bottom:0;
}

.footer-bottom{
  background:rgba(0,0,0,.28);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-bottom-inner{
  width:min(calc(100% - var(--content-pad) * 2),var(--container-w));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.25rem 0;
}
.footer-copy,
.footer-icp{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:rgba(255,255,255,.45);
  margin:0;
}
.footer-legal{
  display:flex;
  gap:1.5rem;
}
.footer-legal a{
  font-size:.78rem;
  color:rgba(255,255,255,.5);
  text-decoration:none;
  transition:color var(--transition-fast);
}
.footer-legal a:hover{color:var(--color-accent)}

@media (max-width:900px){
  .col-narrow,
  .col-wide,
  .col-3,
  .col-4,
  .col-6,
  .col-8{grid-column:1/-1}

  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:2.25rem 1.5rem;
  }
  .footer-brand-col{grid-column:1/-1}
  .footer-nav-col{grid-column:span 1}
  .footer-contact-col{grid-column:1/-1}
  .footer-bottom-inner{
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
}

@media (max-width:860px){
  :root{
    --ticker-h:32px;
    --nav-h:64px;
  }
  .nav-shell{
    border-radius:18px;
    padding:.625rem 1rem;
  }
  .nav-toggle{
    display:inline-flex;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:calc(100% + .5rem);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(27,42,74,.12);
    padding:.5rem;
    margin-left:0;
  }
  .site-nav[data-open]{display:flex}
  .nav-link{
    padding:.6875rem 1rem;
    border-radius:10px;
    font-size:1rem;
  }
  .brand-name{font-size:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{
    animation:none;
    width:max-content;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ticker-track>.ticker-item[aria-hidden="true"]{display:none}
  .ticker-bar{overflow-x:auto}
  .live-dot{animation:none}
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  *,
  *::before,
  *::after{
    animation-duration:0s!important;
    transition-duration:0s!important;
  }
}

@media (min-width:861px){
  .site-nav{display:flex}
}