/* 
 * 孟轩网 - 性能优化关键CSS
 * 仅包含首屏关键样式，其他延迟加载
 */

/* CSS变量 */
:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --bg: #f8fafc;
    --bg-secondary: #ffffff;
    --text: #1e293b;
    --text-secondary: #475569;
    --border: rgba(0, 0, 0, 0.1);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    --radius: 8px;
    --radius-lg: 12px;
    --container-max: 1200px;
    --header-height: 70px;
}

[data-theme="dark"] {
    --bg: #0f172a;
    --bg-secondary: #1e293b;
    --text: #f8fafc;
    --text-secondary: #cbd5e1;
    --border: rgba(255, 255, 255, 0.1);
}

/* 基础重置 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden;min-height:100vh}
img{max-width:100%;height:auto;display:block}

/* 容器 */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 20px}

/* 头部 */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:1000;transition:all 0.3s}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:700;font-size:1.25rem}
.logo-img{width:40px;height:40px;border-radius:8px}

/* 导航 */
.main-nav{display:flex;gap:8px}
.nav-link{padding:8px 16px;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius);transition:all 0.2s}
.nav-link:hover,.nav-link.active{color:var(--primary);background:rgba(59,130,246,0.1)}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text)}

/* Hero区域 - 首屏关键 */
.hero-section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 20px 40px;position:relative;overflow:hidden}
.hero-content{text-align:center;max-width:800px;z-index:10;position:relative}
.hero-title{font-size:4rem;font-weight:900;margin-bottom:20px;background:linear-gradient(135deg,#1e293b,#2563eb,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.1rem;color:var(--text-secondary);margin-bottom:16px;letter-spacing:3px}
.hero-desc{font-size:1rem;color:var(--text-secondary);margin-bottom:32px}
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-lg);font-size:1rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-warning{background:#f59e0b;color:#fff}

/* 加载动画 - 首屏必需 */
#page-loader{position:fixed;inset:0;background:#0a0f1f;z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity 0.8s,transform 0.8s}
#page-loader.hidden{opacity:0;pointer-events:none}
.loader-content{text-align:center;color:#fff}
.loader-brand{display:flex;gap:12px;font-size:3rem;font-weight:900;letter-spacing:6px}

/* 移动端 - 关键适配 */
@media(max-width:768px){
    .container{padding:0 16px}
    .mobile-menu-btn{display:block}
    .main-nav{display:none;position:fixed;top:60px;left:0;width:100%;background:var(--bg-secondary);flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg)}
    .main-nav.open{display:flex}
    .hero-title{font-size:2.4rem}
    .hero-subtitle{font-size:0.95rem}
    .hero-buttons{flex-direction:column;width:100%;padding:0 8px}
    .btn{width:100%;justify-content:center}
}

/* 骨架屏占位 */
.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 0%,var(--bg) 50%,var(--bg-secondary) 100%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}