/* 红隼科技官网 - 全局样式 */

/* 基础重置 */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',Roboto,Helvetica Neue,Arial,sans-serif}
html{scroll-behavior:smooth}
body{background:#050505;color:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* 容器 */
.container{width:92%;max-width:1200px;margin:0 auto}

/* Loading动画 */
#loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#050505;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.5s ease}
.loader{width:60px;height:60px;border:4px solid #1a1a1a;border-top:4px solid #0099ff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* 元素渐入动画 */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in-delay-1{transition-delay:0.1s}
.fade-in-delay-2{transition-delay:0.2s}
.fade-in-delay-3{transition-delay:0.3s}

/* 导航 */
header{position:fixed;top:0;width:100%;background:rgba(0,0,0,0.9);backdrop-filter:blur(15px);z-index:999;padding:18px 0;border-bottom:1px solid #222}
.nav{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600;color:#0099ff}
.logo img{height:38px}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:15px;transition:.3s;position:relative}
.nav-links a:hover{color:#0099ff}
.nav-links a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:#0099ff;transition:.3s}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:#0099ff}
.nav-links a.active::after{width:100%}
.mobile-btn{display:none;font-size:24px;cursor:pointer}

/* 页面标题区域 */
.page-header{height:50vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;background:linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9)),url(https://picsum.photos/id/13/1920/1080) center/cover no-repeat;position:relative;margin-top:70px}
.page-header::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,0.3) 100%);pointer-events:none}
.page-header-content{max-width:850px;position:relative;z-index:1}
.page-header h1{font-size:48px;margin-bottom:15px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,0.5)}
.page-header p{font-size:18px;opacity:.9;text-shadow:0 1px 5px rgba(0,0,0,0.5)}
.breadcrumb{display:flex;justify-content:center;gap:10px;margin-top:20px;font-size:14px;color:#aaa}
.breadcrumb a{color:#0099ff}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:#666}

/* 面包屑导航 */
.breadcrumb-nav{background:#0a0a0a;padding:15px 0;border-bottom:1px solid #222}
.breadcrumb-nav .container{display:flex;align-items:center;gap:10px;font-size:14px;color:#888}
.breadcrumb-nav a{color:#0099ff;transition:.3s}
.breadcrumb-nav a:hover{color:#00bfff}
.breadcrumb-nav i{font-size:12px;color:#444}
.breadcrumb-nav span{color:#bbb}

/* 通用标题 */
.section{padding:80px 0;position:relative;overflow:hidden}
.section::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,153,255,0.03),transparent);transition:1s}
.section.visible::before{left:100%}
.title{text-align:center;font-size:36px;font-weight:700;margin-bottom:50px;position:relative;display:block}
.title span{color:#0099ff}
.title::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg,transparent,#0099ff,transparent)}
.subtitle{text-align:center;font-size:16px;color:#888;margin-bottom:50px;max-width:700px;margin-left:auto;margin-right:auto}

/* 按钮样式 */
.btn{display:inline-block;padding:15px 40px;background:#0099ff;border-radius:8px;font-size:16px;font-weight:500;transition:.3s;position:relative;overflow:hidden;border:none;cursor:pointer;color:#fff}
.btn:hover{background:#0077cc;transform:scale(1.05);box-shadow:0 8px 20px rgba(0,153,255,0.3)}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:.5s}
.btn:hover::before{left:100%}
.btn-outline{background:transparent;border:2px solid #0099ff;color:#0099ff}
.btn-outline:hover{background:#0099ff;color:#fff}
.btn-small{padding:10px 25px;font-size:14px}

/* 卡片样式 */
.card{background:#111;border-radius:14px;border:1px solid #222;transition:.3s;overflow:hidden}
.card:hover{transform:translateY(-6px);border-color:#0099ff;box-shadow:0 8px 25px rgba(0,153,255,0.2)}

/* 网格布局 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* 底部 */
footer{background:#000;padding:60px 0 30px;text-align:center;color:#777;font-size:14px;position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#0099ff,transparent)}
.footer-content{margin-bottom:30px}
.footer-links{margin-bottom:20px}
.footer-links a{color:#999;margin:0 15px;transition:.3s;font-size:13px}
.footer-links a:hover{color:#0099ff}
.footer-copy{color:#666;font-size:12px}
.footer-copy span{color:#0099ff}

/* 返回顶部按钮 */
#scrollTop{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:#0099ff;border:none;border-radius:50%;color:white;font-size:20px;cursor:pointer;opacity:0;transition:opacity 0.3s;z-index:999;display:flex;align-items:center;justify-content:center}
#scrollTop:hover{background:#0077cc;transform:scale(1.1)}

/* 内容区域 */
.content-section{background:#0a0a0a}
.content-wrapper{max-width:900px;margin:0 auto}
.content-text{font-size:16px;line-height:1.8;color:#bbb}
.content-text h2{font-size:28px;color:#0099ff;margin:40px 0 20px}
.content-text h3{font-size:22px;color:#fff;margin:30px 0 15px}
.content-text p{margin-bottom:20px}
.content-text ul,.content-text ol{margin:20px 0;padding-left:30px}
.content-text li{margin-bottom:10px}
.content-text img{border-radius:10px;margin:30px 0}

/* 侧边栏布局 */
.with-sidebar{display:grid;grid-template-columns:280px 1fr;gap:40px}
.sidebar{background:#111;border-radius:14px;padding:25px;border:1px solid #222;height:fit-content;position:sticky;top:90px}
.sidebar-title{font-size:18px;font-weight:600;margin-bottom:20px;color:#0099ff;padding-bottom:15px;border-bottom:1px solid #222}
.sidebar-menu{list-style:none}
.sidebar-menu li{margin-bottom:5px}
.sidebar-menu a{display:block;padding:12px 15px;border-radius:8px;transition:.3s;font-size:14px}
.sidebar-menu a:hover{background:#1a1a1a;color:#0099ff}
.sidebar-menu a.active{background:#0099ff;color:#fff}

/* 平板适配 */
@media(max-width:1024px){
  .page-header h1{font-size:40px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .with-sidebar{grid-template-columns:240px 1fr;gap:30px}
}

/* 手机适配 */
@media(max-width:768px){
  .nav-links{display:none}
  .mobile-btn{display:block}
  .page-header{height:40vh;margin-top:60px}
  .page-header h1{font-size:28px}
  .page-header p{font-size:14px}
  .section{padding:50px 0}
  .title{font-size:26px}
  .grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .with-sidebar{grid-template-columns:1fr}
  .sidebar{position:static;margin-bottom:30px}
  .content-text h2{font-size:22px}
  .content-text h3{font-size:18px}
}

/* 小屏手机适配 */
@media(max-width:480px){
  .page-header h1{font-size:24px}
  .title{font-size:22px}
  .btn{padding:12px 30px;font-size:14px}
}

/* 动画 */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateY(-10px) translateX(10px)}to{opacity:1;transform:translateY(0) translateX(0)}}
@keyframes slideOut{from{opacity:1;transform:translateY(0) translateX(0)}to{opacity:0;transform:translateY(-10px) translateX(10px)}}

/* 减少动画效果 */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}