:root{
--bg:#08132B;
--bg2:#0E2049;
--card:#132A5A;
--card2:#183366;
--pri:#2F8BFF;
--pri-d:#1C64D8;
--sec:#9B4DFF;
--cyan:#46F0FF;
--gold:#FFD166;
--txt:#E8F0FF;
--mut:#9DB2D8;
--line:rgba(155,77,255,.44);
--line2:rgba(70,240,255,.18);
--font:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;padding:0;
background-color:var(--bg);color:var(--txt);
font-family:var(--font);font-size:15.5px;line-height:1.8;
background-image:
repeating-linear-gradient(114deg,rgba(70,240,255,.05) 0 1px,transparent 1px 22px),
radial-gradient(circle at 86% 4%,rgba(155,77,255,.24),transparent 45%),
radial-gradient(circle at 8% 96%,rgba(47,139,255,.22),transparent 44%);
background-attachment:fixed;
}
img{max-width:100%;display:block;height:auto}
figure,figcaption,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
a{color:var(--cyan);text-decoration:none}
a:hover{color:#8CF6FF}
h1,h2,h3{font-weight:700;line-height:1.32;letter-spacing:.2px}
h1{font-size:34px}
h2{font-size:24px}
h3{font-size:17px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:940px}
section{padding:62px 0}
.sec__hd{text-align:center;margin-bottom:34px}
.sec__hd .tube{margin-bottom:12px}
.sec__hd .sub{margin:12px auto 0;max-width:640px}
.sub{color:var(--mut);font-size:14.5px;line-height:1.75}
.tube{
display:inline-flex;align-items:center;gap:9px;
font-size:12.5px;color:var(--cyan);letter-spacing:1.4px;
}
.tube::before,.tube::after{content:"";width:28px;height:1px;display:block}
.tube::before{background:linear-gradient(90deg,transparent,var(--sec))}
.tube::after{background:linear-gradient(90deg,var(--pri),transparent)}
.btn{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 20px;border-radius:11px;
background:linear-gradient(135deg,var(--pri),var(--pri-d));
color:#F2F8FF;font-size:14.5px;font-weight:700;
box-shadow:0 0 0 1px rgba(70,240,255,.32) inset,0 0 18px rgba(47,139,255,.36);
transition:box-shadow .25s ease,background .25s ease;
}
.btn:hover{
color:#FFFFFF;
background:linear-gradient(135deg,#4AA0FF,#2F8BFF);
box-shadow:0 0 0 1px rgba(70,240,255,.7) inset,0 0 26px rgba(70,240,255,.5);
}
.btn--ghost{
background:transparent;color:var(--txt);
box-shadow:0 0 0 1px var(--line) inset;
}
.btn--ghost:hover{
color:#FFFFFF;background:rgba(155,77,255,.18);
box-shadow:0 0 0 1px var(--cyan) inset,0 0 20px rgba(155,77,255,.42);
}
.top{
position:relative;z-index:9;
background:linear-gradient(180deg,rgba(8,19,43,.96),rgba(8,19,43,.82));
border-bottom:1px solid var(--line);
}
.top__in{
display:flex;align-items:center;gap:16px;
max-width:1180px;margin:0 auto;padding:12px 22px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt)}
.brand img{width:38px;height:38px;border-radius:10px}
.brand__tx{font-size:18px;font-weight:700;letter-spacing:.4px}
.nav{display:flex;flex-wrap:wrap;gap:6px;margin-left:6px}
.nav a{
display:block;padding:6px 11px;border-radius:9px;
color:var(--mut);font-size:14.5px;white-space:nowrap;
border:1px solid transparent;
}
.nav a:hover{color:var(--txt);border-color:var(--line)}
.nav a[aria-current="page"]{
color:#031024;
background:linear-gradient(135deg,var(--cyan),var(--pri));
border-color:transparent;font-weight:700;
}
.btn--top{margin-left:auto;flex:0 0 auto}
.hero{
position:relative;overflow:hidden;padding:0;
border-bottom:1px solid var(--line);
}
.hero__in{
display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:center;
padding-top:46px;padding-bottom:52px;
}
.kicker{
font-size:13px;color:var(--cyan);letter-spacing:2px;margin-bottom:12px;
}
.hero h1{margin-bottom:16px}
.lead{color:#CFDDF8;font-size:15.5px;line-height:1.85}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta-note{margin-top:14px;font-size:13px;color:var(--mut)}
.hero__shot{margin:0}
.hero__shot img{
width:100%;max-width:302px;margin:0 auto;
border-radius:18px;
box-shadow:0 0 0 4px rgba(155,77,255,.30),0 0 34px rgba(47,139,255,.42),0 18px 40px rgba(3,8,20,.6);
}
.hero__shot figcaption{
margin-top:12px;text-align:center;font-size:13px;color:var(--mut);
}
.hero::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(70,240,255,.10));
}
.band{padding:38px 0 6px}
.band__list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.band__i{
padding:18px 18px 16px;border-radius:14px;
background:linear-gradient(180deg,rgba(24,51,102,.92),rgba(19,42,90,.92));
border:1px solid var(--line);
box-shadow:0 0 0 1px var(--line2) inset;
}
.band__n{
display:inline-block;font-size:12px;color:#031024;font-weight:700;
padding:2px 9px;border-radius:20px;letter-spacing:.6px;
background:linear-gradient(135deg,var(--sec),var(--pri));
margin-bottom:10px;
}
.band__t{display:block;font-size:16px;font-weight:700;margin-bottom:6px}
.band__d{display:block;font-size:13.5px;color:var(--mut);line-height:1.7}
.hot__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hot__c{
position:relative;padding:26px 22px 22px;border-radius:18px;
background:linear-gradient(180deg,var(--card2),var(--card));
border:1px solid var(--line);
box-shadow:0 0 0 1px var(--line2) inset,0 0 22px rgba(155,77,255,.24);
transition:box-shadow .28s ease,border-color .28s ease;
}
.hot__c:hover{
border-color:var(--cyan);
box-shadow:0 0 0 1px rgba(70,240,255,.4) inset,0 0 32px rgba(70,240,255,.36);
}
.hot__n{
display:block;font-size:30px;font-weight:700;line-height:1;margin-bottom:12px;
background:linear-gradient(135deg,var(--cyan),var(--sec));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hot__t{display:block;font-size:18px;font-weight:700;margin-bottom:10px}
.hot__d{display:block;font-size:13.8px;color:var(--mut);line-height:1.75;margin-bottom:16px}
.thread{border-top:1px dashed rgba(155,77,255,.36);padding-top:14px}
.thread__r{
display:flex;align-items:baseline;gap:10px;padding:7px 0;
border-bottom:1px dashed rgba(70,240,255,.16);
}
.thread__n{font-size:12px;color:var(--sec);font-weight:700;flex:0 0 22px}
.thread__t{flex:1;font-size:13.8px;color:#D6E2FA}
.thread__k{
flex:0 0 auto;font-size:11.5px;color:var(--cyan);
border:1px solid rgba(70,240,255,.44);border-radius:20px;padding:1px 8px;
}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;justify-content:center}
.tags__i{
font-size:13.5px;color:var(--mut);padding:6px 14px;border-radius:20px;
border:1px solid var(--line);background:rgba(14,32,73,.72);
}
.tags__i--top{color:#031024;font-weight:700;background:linear-gradient(135deg,var(--cyan),var(--pri));border-color:transparent}
.feel{background:linear-gradient(180deg,rgba(14,32,73,.72),rgba(8,19,43,0))}
.feel__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center}
.feel__txt p{margin-bottom:14px;color:#D2DFF8;font-size:15.2px;line-height:1.88}
.feel__cards{display:grid;gap:14px;margin-top:22px}
.tube-card{
padding:16px 18px;border-radius:14px;
background:linear-gradient(180deg,rgba(24,51,102,.9),rgba(19,42,90,.9));
border:1px solid var(--line);
box-shadow:0 0 14px rgba(155,77,255,.2);
}
.tube-card__h{display:block;font-size:15.5px;font-weight:700;margin-bottom:6px}
.tube-card__p{display:block;font-size:13.6px;color:var(--mut);line-height:1.72}
.feel__fig img{
width:100%;max-width:330px;margin:0 auto;border-radius:18px;
box-shadow:0 0 0 4px rgba(70,240,255,.16),0 0 30px rgba(155,77,255,.34);
}
.feel__fig figcaption{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}
.voice__list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice__c{
padding:24px 22px;border-radius:16px;
background:linear-gradient(180deg,var(--card2),var(--card));
border:1px solid var(--line);
box-shadow:0 0 0 1px var(--line2) inset;
}
.voice__h{display:block;font-size:16.5px;font-weight:700;margin-bottom:10px}
.voice__p{display:block;font-size:13.8px;color:var(--mut);line-height:1.78}
.voice__tag{
display:inline-block;margin-top:14px;font-size:12px;color:var(--gold);
border:1px solid rgba(255,209,102,.4);border-radius:20px;padding:2px 10px;
}
.shots__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shots__c img{
width:100%;margin:0 auto;border-radius:14px;
box-shadow:0 0 0 3px rgba(155,77,255,.24),0 0 20px rgba(47,139,255,.3);
}
.shots__c figcaption{margin-top:10px;text-align:center;font-size:13px;color:var(--mut)}
.next__list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.next__c{
display:block;padding:26px 24px;border-radius:18px;color:var(--txt);
background:linear-gradient(135deg,rgba(24,51,102,.95),rgba(19,42,90,.95));
border:1px solid var(--line);
box-shadow:0 0 0 1px var(--line2) inset,0 0 22px rgba(155,77,255,.22);
transition:box-shadow .28s ease,border-color .28s ease;
}
.next__c:hover{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(70,240,255,.45) inset,0 0 32px rgba(70,240,255,.34)}
.next__h{display:block;font-size:19px;font-weight:700;margin-bottom:10px}
.next__p{display:block;font-size:13.8px;color:var(--mut);line-height:1.78;margin-bottom:14px}
.next__go{display:inline-block;font-size:13.5px;color:var(--cyan);font-weight:700}
.faq__list{display:grid;gap:12px;max-width:900px;margin:0 auto}
details{
border-radius:14px;border:1px solid var(--line);
background:linear-gradient(180deg,rgba(24,51,102,.88),rgba(19,42,90,.88));
box-shadow:0 0 0 1px var(--line2) inset;
overflow:hidden;
}
details[open]{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(70,240,255,.36) inset,0 0 24px rgba(70,240,255,.28)}
summary{
padding:15px 20px 15px 46px;position:relative;
font-size:15.5px;font-weight:700;color:var(--txt);
}
summary::before{
content:"+";position:absolute;left:18px;top:15px;
color:var(--cyan);font-weight:700;font-size:17px;
}
details[open] summary::before{content:"–"}
details p{padding:0 20px 18px 46px;font-size:14.2px;color:var(--mut);line-height:1.82}
.cta{
background:linear-gradient(135deg,rgba(24,51,102,.9),rgba(14,32,73,.9));
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
text-align:center;
}
.cta h2{margin-bottom:22px}
.cta .btn{color:#F2F8FF}
.cta .btn--ghost{color:var(--txt)}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.foot{background:#050C20;border-top:1px solid var(--line);padding:46px 0 0}
.foot__in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot__col{font-size:13.6px;color:var(--mut);line-height:1.8}
.foot__h{display:block;font-size:14.5px;color:var(--txt);font-weight:700;margin-bottom:12px}
.foot__a{display:block;color:var(--mut);padding:3px 0}
.foot__a:hover{color:var(--cyan)}
.foot__brand{font-size:13.4px;color:var(--mut);line-height:1.85}
.foot__bar{
margin-top:34px;border-top:1px solid rgba(155,77,255,.24);padding:18px 0 22px;
}
.foot__p{font-size:12.8px;color:#8195BC;line-height:1.8}
.page-hero{
padding:44px 0 34px;border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(14,32,73,.7),rgba(8,19,43,0));
}
.page-hero h1{margin-bottom:14px}
.prose h2{margin-bottom:14px}
.prose h3{margin:22px 0 8px}
.prose p{margin-bottom:14px;color:#D2DFF8;font-size:15.2px;line-height:1.88}
.prose ul{margin:0 0 16px}
.prose li{
position:relative;padding-left:20px;margin-bottom:9px;
font-size:14.8px;color:#C7D6F3;line-height:1.8;
}
.prose li::before{
content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
border-radius:2px;background:var(--cyan);box-shadow:0 0 8px rgba(70,240,255,.7);
}
.wide-fig{width:100%;max-width:396px;margin:0 auto 8px}
.wide-fig img{width:100%;border-radius:18px;box-shadow:0 0 0 4px rgba(155,77,255,.22),0 0 28px rgba(47,139,255,.34)}
.wide-fig figcaption{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}
.fk{animation:flicker 1s ease-out both}
.d1{animation-delay:.09s}
.d2{animation-delay:.18s}
.d3{animation-delay:.27s}
@keyframes flicker{
0%{opacity:0}
16%{opacity:.4}
24%{opacity:.08}
42%{opacity:.76}
56%{opacity:.34}
74%{opacity:1}
100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.fk{animation:none}
}
@media (max-width:980px){
section{padding:50px 0}
h1{font-size:28px}
h2{font-size:21px}
.hero__in{grid-template-columns:1fr;gap:30px;padding-top:36px;padding-bottom:42px}
.hero__shot img{max-width:280px}
.band__list{grid-template-columns:repeat(2,1fr)}
.hot__list{grid-template-columns:1fr;gap:16px}
.feel__grid{grid-template-columns:1fr;gap:28px}
.feel__fig img{max-width:300px}
.voice__list{grid-template-columns:repeat(2,1fr)}
.shots__grid{grid-template-columns:repeat(2,1fr)}
.next__list{grid-template-columns:1fr}
.foot__in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
body{font-size:15px}
h1{font-size:24px}
h2{font-size:19.5px}
.top__in{flex-wrap:wrap;padding:10px 22px;gap:10px}
.brand{order:1}
.btn--top{order:2;margin-left:auto;padding:8px 15px;font-size:13.5px}
.nav{
order:3;flex:1 0 100%;flex-wrap:nowrap;
margin-left:0;gap:4px;overflow-x:auto;
}
.nav a{font-size:12px;padding:5px 5px;border-radius:8px}
.hero__shot img{max-width:250px}
.band__list{grid-template-columns:1fr}
.voice__list{grid-template-columns:1fr}
.shots__grid{grid-template-columns:repeat(2,1fr);gap:14px}
.foot__in{grid-template-columns:1fr}
summary{padding:14px 16px 14px 42px}
details p{padding:0 16px 16px 42px}
}