/* 伯乐青狼 - 科技未来风格主题 v1.0.0 | 优化版本 */
:root{
--bg-primary:#0a0e27;--bg-secondary:#151934;--bg-card:rgba(26,31,58,.6);
--bg-glass:rgba(10,14,39,.8);--brand-primary:#00f0ff;--brand-secondary:#00d4aa;
--brand-accent:#7b68ee;--brand-glow:rgba(0,240,255,.5);--text-primary:#fff;
--text-secondary:#a0aec0;--text-muted:#718096;--success:#00d4aa;--warning:#ffd700;
--error:#ff4757;--info:#00d4aa;--gradient-primary:linear-gradient(135deg,#00f0ff 0%,#7b68ee 100%);
--gradient-secondary:linear-gradient(135deg,#00d4aa 0%,#00f0ff 100%);
--gradient-dark:linear-gradient(180deg,#0a0e27 0%,#151934 100%);
--gradient-glow:radial-gradient(ellipse at center,rgba(0,240,255,.15) 0%,transparent 70%);
--shadow-sm:0 2px 4px rgba(0,0,0,.3);--shadow-md:0 4px 6px rgba(0,0,0,.4);
--shadow-lg:0 10px 25px rgba(0,0,0,.5);--shadow-glow:0 0 20px rgba(0,240,255,.3);
--shadow-glow-strong:0 0 30px rgba(0,240,255,.5);--space-xs:.25rem;--space-sm:.5rem;
--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;
--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;
--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3rem;--text-6xl:4rem;
--font-heading:'Orbitron','Rajdhani','Noto Sans SC',sans-serif;
--font-body:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
--font-mono:'JetBrains Mono','Fira Code',monospace;--radius-sm:4px;--radius-md:8px;
--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--transition-fast:150ms ease-in-out;
--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--breakpoint-sm:640px;
--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;
color:var(--text-primary);background:var(--bg-primary);overflow-x:hidden;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--brand-primary);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-secondary)}
::selection{background:var(--brand-primary);color:var(--bg-primary)}
.particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;
pointer-events:none}
.navbar{position:fixed;top:0;left:0;right:0;height:70px;background:var(--bg-glass);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid rgba(0,240,255,.2);display:flex;align-items:center;
justify-content:space-between;padding:0 var(--space-2xl);z-index:1000;
transition:all var(--transition-base)}
.navbar.scrolled{box-shadow:var(--shadow-glow);
border-bottom-color:rgba(0,240,255,.4)}
.navbar-brand{display:flex;align-items:center;gap:var(--space-md);
text-decoration:none}
.navbar-brand__logo{font-family:var(--font-heading);font-size:var(--text-xl);
font-weight:700;background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
text-shadow:var(--shadow-glow)}
.navbar-brand__tagline{font-size:var(--text-sm);color:var(--text-secondary);
display:none}
@media (min-width:768px){.navbar-brand__tagline{display:block}}
.navbar-menu{display:flex;list-style:none;gap:var(--space-xl)}
.navbar-menu__link{color:var(--text-primary);text-decoration:none;
font-size:var(--text-base);font-weight:500;position:relative;
padding:var(--space-sm) 0;transition:color var(--transition-base)}
.navbar-menu__link::after{content:'';position:absolute;bottom:0;left:0;width:0;
height:2px;background:var(--gradient-primary);transition:width var(--transition-base)}
.navbar-menu__link:hover{color:var(--brand-primary);
text-shadow:0 0 10px var(--brand-glow)}
.navbar-menu__link:hover::after{width:100%}
.navbar-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;
cursor:pointer;padding:var(--space-sm)}
.navbar-toggle__span{width:25px;height:2px;background:var(--brand-primary);
border-radius:var(--radius-full);transition:all var(--transition-base)}
@media (max-width:768px){.navbar{padding:0 var(--space-lg)}
.navbar-menu{position:fixed;top:70px;right:-100%;flex-direction:column;width:250px;
height:calc(100vh - 70px);background:var(--bg-secondary);padding:var(--space-xl);
gap:var(--space-lg);transition:right var(--transition-base);
box-shadow:-5px 0 15px rgba(0,0,0,.5)}
.navbar-menu.active{right:0}
.navbar-toggle{display:flex}
.navbar-toggle.active .navbar-toggle__span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.navbar-toggle.active .navbar-toggle__span:nth-child(2){opacity:0}
.navbar-toggle.active .navbar-toggle__span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;
text-align:center;padding:var(--space-3xl) var(--space-lg);position:relative;
overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;
background:var(--gradient-glow);pointer-events:none}
.hero__content{position:relative;z-index:1;max-width:900px;
animation:fadeInUp 1s ease-out}
.hero__badge{display:inline-block;padding:var(--space-sm) var(--space-lg);
background:var(--bg-card);border:1px solid rgba(0,240,255,.3);
border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--brand-primary);
margin-bottom:var(--space-lg);backdrop-filter:blur(10px)}
.hero__title{font-family:var(--font-heading);
font-size:clamp(var(--text-3xl),8vw,var(--text-6xl));font-weight:800;line-height:1.2;
margin-bottom:var(--space-lg);background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
animation:neonPulse 3s ease-in-out infinite}
.hero__subtitle{font-size:clamp(var(--text-lg),3vw,var(--text-2xl));
color:var(--text-secondary);margin-bottom:var(--space-xl);max-width:700px;
margin-left:auto;margin-right:auto}
.hero__description{font-size:var(--text-lg);color:var(--text-secondary);
margin-bottom:var(--space-2xl);max-width:600px;margin-left:auto;margin-right:auto;
line-height:1.8}
.hero__actions{display:flex;gap:var(--space-lg);justify-content:center;
flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;
gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:var(--text-base);
font-weight:600;border-radius:var(--radius-lg);text-decoration:none;cursor:pointer;
transition:all var(--transition-base);border:2px solid transparent;position:relative;
overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
transition:left .5s}
.btn:hover::before{left:100%}
.btn--primary{background:var(--gradient-primary);color:var(--text-primary);
border-color:var(--brand-primary);box-shadow:var(--shadow-glow)}
.btn--primary:hover{box-shadow:var(--shadow-glow-strong);transform:translateY(-2px)}
.btn--secondary{background:transparent;color:var(--brand-primary);
border-color:var(--brand-primary)}
.btn--secondary:hover{background:var(--brand-primary);color:var(--bg-primary);
box-shadow:var(--shadow-glow)}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:transparent}
.btn--ghost:hover{color:var(--brand-primary);text-shadow:0 0 10px var(--brand-glow)}
@media (max-width:640px){.hero__actions{flex-direction:column;width:100%}
.btn{width:100%}}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}
.section{padding:var(--space-3xl) 0;position:relative}
.section__header{text-align:center;margin-bottom:var(--space-3xl)}
.section__title{font-family:var(--font-heading);
font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:700;
margin-bottom:var(--space-md);background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section__subtitle{font-size:var(--text-lg);color:var(--text-secondary);
max-width:600px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:var(--space-xl);margin-top:calc(var(--space-3xl) * -1);position:relative;
z-index:2}
.stat-card{background:var(--bg-card);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,240,255,.2);
border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;
transition:all var(--transition-base);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--gradient-primary);opacity:.3;transition:opacity var(--transition-base)}
.stat-card:hover{transform:translateY(-10px);border-color:rgba(0,240,255,.5);
box-shadow:var(--shadow-glow)}
.stat-card:hover::before{opacity:1}
.stat-card__icon{width:60px;height:60px;margin:0 auto var(--space-lg);
background:var(--gradient-primary);border-radius:var(--radius-lg);display:flex;
align-items:center;justify-content:center;font-size:var(--text-2xl);
box-shadow:var(--shadow-glow)}
.stat-card__value{font-family:var(--font-heading);font-size:var(--text-4xl);
font-weight:700;background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
margin-bottom:var(--space-sm)}
.stat-card__label{font-size:var(--text-base);color:var(--text-secondary);
margin-bottom:var(--space-md)}
.stat-card__description{font-size:var(--text-sm);color:var(--text-muted);
line-height:1.6}
.timeline{position:relative;max-width:1000px;margin:0 auto}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
background:var(--gradient-primary);transform:translateX(-50%)}
@media (max-width:768px){.timeline::before{left:30px}}
.timeline-item{display:flex;justify-content:flex-end;
padding-right:calc(50% + var(--space-xl));position:relative;
margin-bottom:var(--space-3xl);opacity:0;transform:translateY(30px);
transition:all .6s ease-out}
.timeline-item.visible{opacity:1;transform:translateY(0)}
.timeline-item:nth-child(even){justify-content:flex-start;padding-right:0;
padding-left:calc(50% + var(--space-xl))}
@media (max-width:768px){.timeline-item,.timeline-item:nth-child(even){
padding-left:70px;padding-right:0;justify-content:flex-start}}
.timeline-item__dot{position:absolute;left:50%;top:0;width:20px;height:20px;
background:var(--brand-primary);border:4px solid var(--bg-primary);
border-radius:var(--radius-full);transform:translateX(-50%);
box-shadow:0 0 20px var(--brand-glow);z-index:2}
@media (max-width:768px){.timeline-item__dot{left:30px}}
.timeline-item__content{background:var(--bg-card);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,240,255,.2);
border-radius:var(--radius-xl);padding:var(--space-xl);max-width:450px;
transition:all var(--transition-base)}
.timeline-item__content:hover{border-color:rgba(0,240,255,.5);
box-shadow:var(--shadow-glow);transform:scale(1.02)}
.timeline-item__date{font-family:var(--font-mono);font-size:var(--text-sm);
color:var(--brand-primary);margin-bottom:var(--space-sm);display:inline-block;
padding:var(--space-xs) var(--space-md);background:rgba(0,240,255,.1);
border-radius:var(--radius-md)}
.timeline-item__title{font-family:var(--font-heading);font-size:var(--text-2xl);
font-weight:700;margin-bottom:var(--space-md);color:var(--text-primary)}
.timeline-item__description{font-size:var(--text-base);color:var(--text-secondary);
line-height:1.8}
.timeline-item__image{width:100%;height:200px;object-fit:cover;
border-radius:var(--radius-lg);margin-top:var(--space-md)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--space-xl)}
.gallery-item{position:relative;border-radius:var(--radius-xl);overflow:hidden;
aspect-ratio:4/3;cursor:pointer;transition:all var(--transition-base)}
.gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow-glow)}
.gallery-item__image{width:100%;height:100%;object-fit:cover;
transition:transform var(--transition-slow)}
.gallery-item:hover .gallery-item__image{transform:scale(1.1)}
.gallery-item__overlay{position:absolute;bottom:0;left:0;right:0;
padding:var(--space-xl);background:linear-gradient(to top,rgba(10,14,39,.9),transparent);
opacity:0;transition:opacity var(--transition-base)}
.gallery-item:hover .gallery-item__overlay{opacity:1}
.gallery-item__title{font-family:var(--font-heading);font-size:var(--text-lg);
font-weight:600;color:var(--text-primary);margin-bottom:var(--space-xs)}
.gallery-item__description{font-size:var(--text-sm);color:var(--text-secondary)}
.cta{background:var(--bg-card);backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,240,255,.2);
border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;
position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
background:var(--gradient-glow);animation:rotate 20s linear infinite}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.cta__content{position:relative;z-index:1}
.cta__title{font-family:var(--font-heading);
font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:700;
margin-bottom:var(--space-lg);background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta__description{font-size:var(--text-lg);color:var(--text-secondary);
margin-bottom:var(--space-xl);max-width:600px;margin-left:auto;margin-right:auto}
.footer{background:var(--bg-secondary);padding:var(--space-3xl) 0 var(--space-xl);
border-top:1px solid rgba(0,240,255,.1)}
.footer__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer__brand{font-family:var(--font-heading);font-size:var(--text-xl);
font-weight:700;background:var(--gradient-primary);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
margin-bottom:var(--space-md)}
.footer__description{font-size:var(--text-sm);color:var(--text-secondary);
line-height:1.8}
.footer__heading{font-family:var(--font-heading);font-size:var(--text-lg);
font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}
.footer__links{list-style:none}
.footer__link{color:var(--text-secondary);text-decoration:none;
font-size:var(--text-sm);display:block;padding:var(--space-xs) 0;
transition:color var(--transition-base)}
.footer__link:hover{color:var(--brand-primary);
text-shadow:0 0 10px var(--brand-glow)}
.footer__bottom{text-align:center;padding-top:var(--space-xl);
border-top:1px solid rgba(255,255,255,.05);font-size:var(--text-sm);
color:var(--text-muted)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes neonPulse{0%,100%{text-shadow:0 0 10px rgba(0,240,255,.8),0 0 20px rgba(0,240,255,.6),0 0 30px rgba(0,240,255,.4)}50%{text-shadow:0 0 20px rgba(0,240,255,1),0 0 30px rgba(0,240,255,.8),0 0 40px rgba(0,240,255,.6)}}
.fade-in{opacity:0;transform:translateY(30px);transition:all .6s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media (max-width:1024px){.hero__title{font-size:var(--text-4xl)}}
@media (max-width:768px){.section{padding:var(--space-2xl) 0}
.stat-card{padding:var(--space-lg)}
.timeline-item__content{padding:var(--space-lg)}}
@media (max-width:640px){html{font-size:14px}
.navbar{height:60px}
.hero{padding:var(--space-2xl) var(--space-md)}
.container{padding:0 var(--space-md)}
.stats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
animation-iteration-count:1!important;transition-duration:.01ms!important}}
:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.skip-to-content{position:absolute;top:-40px;left:0;background:var(--brand-primary);
color:var(--bg-primary);padding:var(--space-sm) var(--space-md);
text-decoration:none;z-index:9999}
.skip-to-content:focus{top:0}