@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --ink:#192617;
  --ink2:#0f1d12;
  --deep:#08120b;
  --neon:#87ff71;
  --cyan:#01cdfe;
  --pink:#ff71ce;
  --violet:#b967ff;
  --sun:#ffe08a;
  --line:rgba(135,255,113,.26);
  --line-soft:rgba(1,205,254,.18);
  --txt:#dff3e2;
  --muted:#93b8a0;
  --r:18px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  font-family:'Plus Jakarta Sans','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--txt);
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(255,113,206,.20), transparent 62%),
    radial-gradient(760px 560px at 6% 4%, rgba(1,205,254,.16), transparent 60%),
    linear-gradient(180deg,#0b1a10 0%, var(--deep) 46%, #101f14 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:120;
  pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  opacity:.65;
}

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--neon)}

h1,h2,h3{line-height:1.24;margin:0 0 .6em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
img{max-width:100%;height:auto}
strong{color:#fff}

/* 顶部 */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem clamp(1rem,4vw,2.6rem);
  border-bottom:1px solid var(--line-soft);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  font-size:1.02rem;
  color:var(--neon);
  text-shadow:0 0 14px rgba(135,255,113,.6);
  padding:.35rem .2rem;
}

.mark{
  width:14px;height:14px;
  border-radius:50%;
  background:linear-gradient(150deg,var(--pink),var(--sun) 45%,var(--cyan));
  box-shadow:0 0 14px rgba(255,113,206,.7);
  flex:0 0 auto;
}
.mark.big{width:20px;height:20px}

.cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.6rem 1.15rem;
  border-radius:999px;
  font-weight:700;
  font-size:.94rem;
  color:var(--ink);
  background:linear-gradient(120deg,var(--neon),var(--cyan));
  border:1px solid rgba(135,255,113,.9);
  white-space:nowrap;
}
.cta:hover{color:var(--ink);filter:hue-rotate(-18deg)}

/* 粘性胶囊条 */
.pillbar{
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(8,18,11,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.pillbar nav{overflow-x:auto;scrollbar-width:thin}
.pillbar ul{
  display:flex;
  gap:.45rem;
  margin:0;
  padding:.5rem clamp(.7rem,3vw,2rem);
  list-style:none;
  width:max-content;
  min-width:100%;
}
.pill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.55rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.92rem;
  color:#b8e7c6;
  white-space:nowrap;
  transition:.2s;
}
.pill:hover{border-color:var(--neon);color:var(--neon)}
.pill.active{
  background:var(--neon);
  color:var(--ink);
  border-color:var(--neon);
  box-shadow:0 0 18px rgba(135,255,113,.55);
}

/* 首屏 */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.4rem,5vw,3.4rem) clamp(1rem,5vw,3.4rem);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.ghost{
  position:absolute;
  right:-.04em;
  top:6%;
  font-size:clamp(140px,26vw,340px);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(135,255,113,.28);
  pointer-events:none;
  z-index:0;
  will-change:transform;
}

.hero-art{
  position:relative;
  z-index:1;
  align-self:stretch;
  min-height:320px;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(25,38,23,.5), rgba(8,18,11,.9));
}

.sun{
  position:absolute;
  left:50%;
  top:14%;
  width:min(58%,260px);
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,var(--sun),var(--pink) 48%,var(--violet));
  box-shadow:0 0 90px rgba(255,113,206,.5);
  will-change:transform;
}
.sun::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-linear-gradient(180deg, rgba(8,18,11,.6) 0 5px, transparent 5px 13px);
  opacity:.7;
}

.floor{
  position:absolute;
  left:-25%;
  right:-25%;
  bottom:-6%;
  height:46%;
  transform:perspective(320px) rotateX(66deg);
  transform-origin:bottom center;
  background-image:
    repeating-linear-gradient(90deg, rgba(1,205,254,.5) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(135,255,113,.32) 0 1px, transparent 1px 48px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 62%);
  mask-image:linear-gradient(180deg, transparent, #000 62%);
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.42;
  mix-blend-mode:screen;
  border-radius:inherit;
}

.hero-copy{
  position:relative;
  z-index:2;
  text-align:right;
  justify-self:end;
  max-width:34ch;
}

.brandline{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.78rem;
  letter-spacing:.26em;
  color:var(--cyan);
  margin:0 0 1rem;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 12px var(--neon);
}

.hero h1{
  font-size:clamp(2rem,5.2vw,3.6rem);
  letter-spacing:-.02em;
  margin:0 0 1.4rem;
  color:#f2fff4;
  text-shadow:0 0 24px rgba(1,205,254,.5), 0 0 60px rgba(255,113,206,.35);
  word-break:break-word;
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.7rem 1.5rem;
  border-radius:999px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-weight:700;
  letter-spacing:.06em;
  background:rgba(1,205,254,.08);
}
.hero-cta:hover{background:var(--cyan);color:var(--ink)}

/* 主体 */
.shell{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2rem);
}

.side{align-self:start;position:sticky;top:4.6rem}
.side ul{list-style:none;margin:0;padding:0}
.side-link{
  display:block;
  padding:.6rem .75rem;
  min-height:40px;
  font-size:.94rem;
  color:#a9cdb6;
  border-left:2px solid transparent;
}
.side-link:hover,.side-link:focus-visible{
  border-left-color:var(--neon);
  color:var(--neon);
  background:rgba(135,255,113,.06);
}

main,.wrap{min-width:0}
.wrap{max-width:74ch}

div article[id]{scroll-margin-top:96px}
div article{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(25,38,23,.62), rgba(12,24,15,.62));
  padding:clamp(1.1rem,3vw,1.9rem);
  margin:0 0 1.3rem;
}

div h2{
  font-size:clamp(1.34rem,3vw,1.85rem);
  color:var(--neon);
  text-shadow:0 0 18px rgba(135,255,113,.4);
  letter-spacing:-.01em;
}
div h3{font-size:1.15rem;color:var(--cyan)}

div hr{
  border:0;
  height:2px;
  margin:.2rem 0 1.3rem;
  background:linear-gradient(90deg,var(--neon),var(--cyan) 42%,rgba(185,103,255,.7) 72%,transparent);
}

div img{
  border-radius:14px;
  border:1px solid var(--line-soft);
  margin:.4rem 0 1rem;
}

div ul li,div ol li{margin:.3rem 0}
div blockquote{
  margin:0 0 1em;
  padding:.7rem 1rem;
  border-left:3px solid var(--violet);
  background:rgba(185,103,255,.08);
  color:#e9dcff;
}

table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 1.2rem}
th,td{border:1px solid var(--line-soft);padding:.5rem .6rem;text-align:left}
th{background:rgba(1,205,254,.1);color:var(--cyan)}

/* 页脚 */
.foot{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(13,26,17,.9), #06100a);
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1rem,4vw,2.6rem) 1.2rem;
}
.f-top{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  max-width:1180px;
  margin:0 auto 1.6rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line-soft);
}
.f-brand{display:flex;align-items:center;gap:.6rem}
.f-brand address{
  font-style:normal;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--neon);
  text-shadow:0 0 14px rgba(135,255,113,.5);
}

.sub{display:flex;gap:.5rem;margin:0 0 1rem;flex-wrap:wrap}
.sub input{
  flex:1 1 160px;
  min-height:44px;
  padding:.5rem .9rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(8,18,11,.9);
  color:var(--txt);
  font:inherit;
  font-size:.95rem;
}
.sub input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.sub button{
  min-height:44px;
  padding:.5rem 1.3rem;
  border-radius:999px;
  border:1px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.sub button:hover{background:var(--cyan);color:var(--ink)}

.f-links{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.f-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.35rem .8rem;
  font-size:.9rem;
  border:1px solid rgba(1,205,254,.22);
  border-radius:999px;
  color:#a9cdb6;
}
.f-link:hover{border-color:var(--neon);color:var(--neon)}

.f-base{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.86rem;
  color:var(--muted);
}
.f-base p{margin:0}
.f-mini{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.f-mini a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted)}
.f-mini a:hover{color:var(--neon)}

/* 动效 */
.rv{opacity:0;transform:translate3d(0,18px,0)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .ghost,.sun{transform:none !important}
}

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

/* 断点 */
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .hero{grid-template-columns:1fr;min-height:88vh;gap:1.2rem}
  .hero-art{min-height:230px;grid-row:1}
  .hero-copy{justify-self:stretch;max-width:none}
  .ghost{top:auto;bottom:-.06em;right:-.02em;font-size:clamp(110px,34vw,200px)}
  .f-top{grid-template-columns:1fr;gap:1.4rem}
}

@media (max-width:600px){
  body{font-size:16.5px}
  .masthead{flex-wrap:wrap;gap:.6rem}
  .cta{padding:.5rem 1rem}
  .hero{padding-top:1.2rem}
  .hero h1{font-size:clamp(1.75rem,8vw,2.4rem)}
  .hero-copy{text-align:right}
  div article{padding:1rem}
  .f-base{flex-direction:column;align-items:flex-start;gap:.2rem}
}

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