@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');
:root{
--mint:#99ffcc;--neon:#00ff41;--ink:#001e3c;--deep:#000f20;
--txt:#e8fff6;--dim:#9dbcb6;--line:rgba(153,255,204,.2);--glass:rgba(153,255,204,.06);
--pad:clamp(16px,4vw,44px);
--ff:'Fredoka','Nunito',system-ui,sans-serif;
--fb:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep)}
body{
position:relative;overflow-x:hidden;
font:400 17px/1.72 var(--fb);color:var(--txt);
background:
radial-gradient(1200px 700px at 12% -5%,#023457 0%,transparent 60%),
radial-gradient(900px 620px at 92% 6%,#013a2c 0%,transparent 62%),
linear-gradient(180deg,#00172c,var(--deep) 62%,#000d18);
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
background:
radial-gradient(closest-side,rgba(0,255,65,.16),transparent 70%) 18% 22%/46vmax 46vmax no-repeat,
radial-gradient(closest-side,rgba(153,255,204,.14),transparent 70%) 76% 14%/40vmax 40vmax no-repeat,
radial-gradient(closest-side,rgba(0,255,65,.1),transparent 70%) 62% 84%/52vmax 52vmax no-repeat;
filter:blur(30px);animation:breathe 18s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1);opacity:.72}to{transform:scale(1.16) translate3d(0,-2%,0);opacity:1}}
::selection{background:var(--neon);color:#00160a}
h1,h2,h3,h4{font-family:var(--ff);font-weight:600;line-height:1.22;letter-spacing:.005em}
a{color:var(--mint)}

/* 顶部 */
.site-head{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);
background:linear-gradient(180deg,rgba(0,26,50,.94),rgba(0,20,40,.72));
border-bottom:1px solid var(--line)}
.ticker{display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:7px var(--pad);font-size:12px;letter-spacing:.22em;color:var(--dim);
border-bottom:1px dashed rgba(153,255,204,.14)}
.ticker-brand{color:var(--mint);font-family:var(--ff)}
.ticker-note{opacity:.75}
.headbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
padding:9px var(--pad)}
.nav p{display:flex;gap:2px;flex-wrap:wrap}
.nav-left p{justify-content:flex-end}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 10px;
font-size:15px;color:var(--txt);text-decoration:none;border:1px solid transparent;
transition:background .25s,color .25s,border-color .25s}
.nav a:hover,.nav a:focus-visible{background:var(--glass);border-color:var(--line);color:var(--mint)}
.dot{width:6px;height:6px;background:var(--mint);transform:rotate(45deg);flex:0 0 auto;opacity:.85}
.nav a:nth-child(2n) .dot{background:var(--neon);opacity:1}
.brand{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;text-decoration:none;
color:var(--txt);border:1px solid var(--line);background:var(--glass)}
.brand-txt{font-family:var(--ff);font-size:19px;letter-spacing:.12em}
.mark{width:22px;height:22px;flex:0 0 auto;display:inline-block;
background:linear-gradient(135deg,var(--neon),var(--mint) 70%);clip-path:polygon(0 0,100% 22%,78% 100%,22% 78%)}
.mark img{width:100%;height:100%;object-fit:cover}
.menu-btn{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 16px;
font-family:var(--ff);font-size:15px;letter-spacing:.1em;color:var(--ink);
background:var(--mint);border:1px solid var(--mint);cursor:pointer}

/* 主区 */
main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 262px;
gap:34px;align-items:start;max-width:1180px;margin:0 auto;padding:0 var(--pad) 64px}
div{min-width:0}

/* 首屏 */
.hero{
position:relative;isolation:isolate;display:flex;align-items:flex-end;
min-height:46vh;overflow:hidden;
margin-inline:calc(50% - 50vw);
padding:calc(clamp(26px,6vh,56px)) calc(var(--pad) + max(0px,(100vw - 1180px)/2));
border-bottom:1px solid var(--line);
}
.hero-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
opacity:.55;filter:saturate(1.15) contrast(1.06);transform:scale(1.06);will-change:transform}
.hero-mask{position:absolute;inset:0;z-index:1;
background:
linear-gradient(90deg,rgba(0,23,44,.96) 0%,rgba(0,23,44,.74) 52%,rgba(0,23,44,.3) 100%),
linear-gradient(0deg,var(--deep) 1%,transparent 46%)}
.hero-ghost{position:absolute;z-index:1;left:calc(var(--pad) - 6px);top:2%;
font-family:var(--ff);font-weight:700;font-size:clamp(64px,15vw,190px);
line-height:.9;letter-spacing:.02em;color:transparent;
-webkit-text-stroke:1px rgba(153,255,204,.4);opacity:.55;pointer-events:none;
animation:float 9s ease-in-out infinite alternate}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}
.hero-copy{position:relative;z-index:2;max-width:760px}
.hero h1{font-size:clamp(30px,5.2vw,56px);color:#fff;
text-shadow:0 2px 26px rgba(0,10,20,.85)}
.hero-desc{margin-top:14px;max-width:52ch;font-size:clamp(16px,1.6vw,18px);color:var(--mint);
text-shadow:0 1px 14px rgba(0,10,20,.9)}

/* 正文 */
div section{position:relative;padding:36px 0;border-top:1px solid rgba(153,255,204,.14);
animation:rise .8s cubic-bezier(.2,.8,.2,1) both;scroll-margin-top:104px}
div section:nth-of-type(1){animation-delay:.04s}
div section:nth-of-type(2){animation-delay:.1s}
div section:nth-of-type(3){animation-delay:.16s}
div section:nth-of-type(4){animation-delay:.22s}
div section:nth-of-type(5){animation-delay:.28s}
div section:nth-of-type(6){animation-delay:.34s}
div section:nth-of-type(7){animation-delay:.4s}
div section:nth-of-type(n+8){animation-delay:.44s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
div section:first-of-type{border-top:0}
div section h2{font-size:clamp(21px,2.8vw,29px);color:var(--mint);margin-bottom:14px}
div section h2>span,div section h3>span{color:var(--neon)}
div section h3{font-size:clamp(18px,2.1vw,21px);color:var(--mint);margin:22px 0 10px}
div section p,div section li{max-width:70ch;color:#d5eee6}
div section p+p,div section p+ul,div section p+ol,div section ul+p{margin-top:14px}
div section p>strong,div section li>strong{color:#fff}
div section ul,div section ol{margin:12px 0 4px 22px;display:grid;gap:7px}
div section li::marker{color:var(--neon)}
div section a{color:var(--mint);text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:3px}
div section a:hover{color:#fff}
div section blockquote{border-left:2px solid var(--neon);background:var(--glass);
padding:12px 16px;margin:16px 0;color:#dff8ef}
div section img{max-width:100%;height:auto;display:block;margin:14px 0;border:1px solid var(--line)}
div section hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* 侧栏 */
.side{position:sticky;top:104px;padding:18px 16px 20px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(153,255,204,.09),rgba(0,30,60,.4));
backdrop-filter:blur(10px)}
.side h2{font-size:15px;letter-spacing:.3em;color:var(--dim);font-weight:500;
padding-bottom:10px;border-bottom:1px solid var(--line)}
.side h2>span{color:var(--mint)}
.side-links{display:flex;flex-direction:column;margin-top:6px}
.side-links a{display:flex;align-items:center;gap:9px;min-height:42px;padding:6px 2px;
font-size:15px;color:var(--txt);text-decoration:none;border-bottom:1px dashed rgba(153,255,204,.13)}
.side-links a:last-child{border-bottom:0}
.side-links a:hover{color:var(--neon)}

/* 页脚 */
footer{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr 1fr 1.2fr;
gap:24px;margin-top:24px;padding:46px max(var(--pad),calc((100vw - 1180px)/2)) 26px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(0,22,42,.5),rgba(0,12,24,.95))}
footer p{font-size:15px;color:var(--dim);display:flex;flex-wrap:wrap;gap:2px}
.f-brand{flex-direction:row;align-items:center;gap:10px;color:var(--txt);
font-family:var(--ff);letter-spacing:.1em;font-size:17px}
.f-links{flex-direction:column}
footer a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 0;
color:var(--dim);text-decoration:none;font-size:15px}
footer a:hover{color:var(--neon)}
.f-sub{flex-direction:column;gap:10px}
.f-sub input{width:100%;min-height:44px;padding:0 12px;font:inherit;font-size:15px;
color:var(--txt);background:rgba(153,255,204,.07);border:1px solid var(--line);border-radius:0}
.f-sub input::placeholder{color:#7ea39c}
.f-sub button{min-height:44px;font-family:var(--ff);font-size:15px;letter-spacing:.14em;
color:#00160a;background:var(--neon);border:1px solid var(--neon);cursor:pointer}
.f-sub button:hover{background:var(--mint);border-color:var(--mint)}
footer small{grid-column:1/-1;margin-top:10px;padding-top:16px;text-align:center;
border-top:1px solid rgba(153,255,204,.12);font-size:13px;letter-spacing:.1em;color:#6f8f89}

@media(max-width:960px){
main{grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:48px}
.side{position:static;order:2}
.headbar{grid-template-columns:auto 1fr auto}
.brand{grid-column:1;grid-row:1;justify-self:start}
.menu-btn{display:inline-flex;grid-column:3;grid-row:1;justify-self:end}
.nav{grid-column:1/-1;grid-row:2;display:none;margin-top:6px;
border-top:1px solid var(--line);padding-top:4px}
.site-head.open .nav{display:block}
.site-head.open .nav-right{border-top:1px dashed rgba(153,255,204,.16)}
.nav p{flex-direction:column;gap:0}
.nav-left p{justify-content:flex-start}
.nav a{min-height:46px;padding:11px 4px;width:100%;border-bottom:1px solid rgba(153,255,204,.1)}
footer{grid-template-columns:1fr 1fr;gap:18px}
.f-brand{grid-column:1/-1}
}
@media(max-width:560px){
body{font-size:16px}
.hero{min-height:52vh;align-items:flex-end;padding-top:64px}
.hero-ghost{font-size:clamp(48px,17vw,92px);opacity:.45}
footer{grid-template-columns:1fr}
.f-sub{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
body::before,.hero-ghost{animation:none}
div section{animation:none}
}

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