:root{
  --navy:#001e3c;
  --navy-2:#002a4f;
  --mint:#99ffcc;
  --neon:#00ff41;
  --ink:#e6fff6;
  --dim:#8ec1b3;
  --line:rgba(153,255,204,.26);
  --card:rgba(0,42,79,.5);
  --radius:10px;
  --hand:'Amatic SC','Cabin',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --body:'Cabin',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:17px;
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  background:var(--navy);
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--body);
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 6% -12%, rgba(0,255,65,.11), transparent 62%),
    radial-gradient(95% 70% at 102% 4%, rgba(153,255,204,.10), transparent 58%),
    var(--navy);
  padding-bottom:124px;
}

img,svg{max-width:100%}
img{height:auto;border-radius:var(--radius);border:1px solid var(--line)}
menu{margin:0;padding:0;list-style:none}
p{margin:0 0 1.1rem}
a{color:var(--neon)}

:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;
  left:12px;
  top:12px;
  z-index:90;
  transform:translateY(-180%);
  background:var(--neon);
  color:var(--navy);
  text-decoration:none;
  padding:.6rem 1rem;
  border-radius:999px;
  font-weight:600;
}
.skip:focus{transform:none}

/* ---------- 背景细胞团 ---------- */
.blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blobs span{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(72px);
  opacity:.17;
  animation:breathe 13s ease-in-out infinite alternate;
}
.blobs span:nth-child(1){
  width:44vmax;height:44vmax;left:-14vmax;top:-16vmax;
  background:radial-gradient(circle at 40% 40%,var(--neon),transparent 70%);
}
.blobs span:nth-child(2){
  width:36vmax;height:36vmax;right:-12vmax;top:26vh;
  background:radial-gradient(circle at 60% 40%,var(--mint),transparent 72%);
  animation-delay:-4s;opacity:.13;
}
.blobs span:nth-child(3){
  width:30vmax;height:30vmax;left:24vw;bottom:-16vmax;
  background:radial-gradient(circle at 50% 50%,#00d0a0,transparent 70%);
  animation-delay:-8s;opacity:.12;
}
@keyframes breathe{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.22) translate3d(2%,-3%,0)}
}

/* ---------- 底部胶囊坞 ---------- */
.dock{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:max(14px, env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  align-items:center;
  gap:4px;
  max-width:calc(100vw - 24px);
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,18,36,.88);
  backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(0,255,65,.07), 0 10px 34px rgba(0,0,0,.42);
}

.dock-lead{display:flex;gap:4px;flex:1 1 0;justify-content:flex-end;min-width:0}

.dock a,
.dock summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 .62rem;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--mint);
  text-decoration:none;
  font-size:1rem;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}

.dock a:hover,.dock a:focus-visible{
  background:rgba(153,255,204,.16);
  border-color:var(--line);
  color:var(--neon);
}

.dock-brand{
  flex:0 0 auto;
  background:var(--mint);
  color:var(--navy)!important;
  font-family:var(--hand);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:0 1rem!important;
}
.dock-brand:hover,.dock-brand:focus-visible{background:var(--neon);border-color:var(--neon)}

.dock-more{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1 1 0;
  justify-content:flex-start;
  min-width:0;
}
.dock-more menu{display:flex;gap:4px;order:1}
.dock-more summary{order:2;list-style:none;border-color:var(--line);color:var(--dim)}
.dock-more summary::-webkit-details-marker{display:none}
.dock-more summary::marker{content:''}
.dock-more[open] summary{background:rgba(0,255,65,.16);color:var(--neon);border-color:rgba(0,255,65,.4)}

.dock a.is-on,.rail-list a.is-on{background:rgba(0,255,65,.18);color:var(--neon)}

/* ---------- 首屏 ---------- */
main{display:block}

.hero{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(1rem,3vw,2.2rem);
  min-height:45vh;
  max-width:1120px;
  margin:0 auto;
  padding:clamp(3.4rem,8vh,5.2rem) 5vw clamp(1.8rem,4vh,2.8rem);
  overflow:hidden;
}

.hero-num{
  position:absolute;
  left:2vw;
  top:-1.4rem;
  z-index:0;
  font-family:var(--hand);
  font-size:clamp(7rem,17vw,12rem);
  line-height:.8;
  letter-spacing:.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(153,255,204,.2);
  pointer-events:none;
}

.hero-copy{position:relative;z-index:2;flex:1 1 260px;min-width:0}

.hero h1{
  font-family:var(--hand);
  font-size:clamp(2.1rem,5.6vw,3.3rem);
  line-height:1.2;
  margin:0 0 .85rem;
  color:var(--mint);
  letter-spacing:.03em;
  text-wrap:balance;
}

.hero-desc{
  margin:0;
  max-width:48ch;
  color:#cfeee2;
  font-size:1rem;
}

.hero-fig{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:clamp(96px,15vw,150px);
  margin:0;
  animation:breathe 9s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 20px rgba(0,255,65,.3));
}
.hero-fig svg{display:block;width:100%;height:auto;border:0;border-radius:0}

/* ---------- 版面 ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(1.4rem,3vw,2.6rem);
  max-width:1120px;
  margin:0 auto;
  padding:0 5vw 3rem;
  align-items:start;
}

.flow{min-width:0}
.flow > div{padding:1.5rem 0 1.9rem;border-top:1px solid var(--line)}
.flow > div:first-child{border-top:0;padding-top:.4rem}
main div[id]{scroll-margin-top:2rem}

.flow h2{
  font-family:var(--hand);
  font-size:clamp(1.7rem,3.4vw,2.25rem);
  line-height:1.25;
  margin:0 0 .55rem;
  color:var(--mint);
  letter-spacing:.02em;
}
.flow h3{
  font-size:1.15rem;
  line-height:1.45;
  margin:1.4rem 0 .5rem;
  color:var(--mint);
}
.flow hr{
  border:0;
  height:1px;
  background:linear-gradient(90deg,var(--neon),rgba(153,255,204,0));
  margin:0 0 1.4rem;
}
.flow p{max-width:64ch}
.flow ul,.flow ol{padding-left:1.3rem;margin:0 0 1.1rem}
.flow li{margin:.4rem 0}
.flow a{color:var(--neon);text-underline-offset:3px}
.flow blockquote{
  margin:0 0 1.2rem;
  padding:.9rem 1.1rem;
  border-left:2px solid var(--neon);
  border-radius:var(--radius);
  background:var(--card);
  color:#dcf7ec;
}
.flow figure{margin:0 0 1.2rem}
.flow table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.98rem}
.flow th,.flow td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}

/* ---------- 右侧栏 ---------- */
.rail{
  position:sticky;
  top:1.2rem;
  padding:1.1rem 1.05rem 1.2rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
  order:2;
}
.rail h2{
  font-family:var(--hand);
  font-size:1.55rem;
  line-height:1.2;
  margin:0 0 .5rem;
  color:var(--mint);
  letter-spacing:.04em;
}
.rail hr{border:0;height:1px;background:var(--line);margin:0 0 .8rem}
.rail-list{display:grid;gap:2px}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.1rem .55rem;
  border-radius:8px;
  color:var(--ink);
  text-decoration:none;
  font-size:1rem;
  transition:background .25s ease,color .25s ease;
}
.rail-list a:hover,.rail-list a:focus-visible{background:rgba(153,255,204,.14);color:var(--neon)}

/* ---------- 页脚 ---------- */
footer{
  max-width:1120px;
  margin:0 auto;
  padding:1.4rem 5vw 3rem;
  display:grid;
  gap:1.3rem;
  border-top:1px solid var(--line);
}

.foot-cta{margin:0}
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:88px;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  color:var(--mint);
  text-decoration:none;
  font-family:var(--hand);
  font-size:clamp(1.6rem,4vw,2.2rem);
  letter-spacing:.08em;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.cta:hover,.cta:focus-visible{background:var(--neon);border-color:var(--neon);color:var(--navy)}

.foot-meta p{
  margin:0;
  text-align:center;
  color:var(--dim);
  font-size:1rem;
  letter-spacing:.08em;
}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .rail{position:static}
}

@media (max-width:820px){
  body{padding-bottom:112px}
  .dock{
    left:10px;
    right:10px;
    transform:none;
    max-width:none;
    justify-content:flex-start;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:7px 8px;
  }
  .dock::-webkit-scrollbar{display:none}
  .dock > *{flex:0 0 auto}
  .dock-lead{justify-content:flex-start}
  .dock-more{justify-content:flex-start}
}

@media (max-width:620px){
  .hero{padding-top:3rem;min-height:0}
  .hero-num{top:-1rem;left:0}
  .hero-fig{width:84px}
  .hero-desc{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .blobs span{opacity:.14}
}

button[aria-expanded]{min-width:44px;min-height:44px}