/**
 * 深色极光渐变商务风格主题样式
 * Aurora Dark Business Theme
 * 基于原有模板结构，仅修改样式，不改变HTML内容
 * 去除蓝黑风格，采用深色极光渐变商务风格
 */

/* ========== 全局变量 - 极光渐变商务风格 ========== */
:root {
  /* 极光渐变主色调 */
  --aurora-purple: #8B5CF6;      /* 紫色极光 */
  --aurora-cyan: #06B6D4;        /* 青色极光 */
  --aurora-green: #10B981;       /* 绿色极光 */
  --aurora-blue: #3B82F6;        /* 蓝色极光 */
  --aurora-pink: #EC4899;        /* 粉紫色极光 */
  
  /* 深色背景色系 */
  --bg-deep-dark: #0A0E1F;       /* 最深背景 */
  --bg-dark: #141827;            /* 深色背景 */
  --bg-card: #1A1F2E;            /* 卡片背景 */
  --bg-hover: #252B3D;           /* 悬停背景 */
  --bg-overlay: rgba(20, 24, 39, 0.95); /* 遮罩背景 */
  
  /* 文字颜色 */
  --text-white: #FFFFFF;
  --text-light: #E5E7EB;
  --text-gray: #9CA3AF;
  --text-muted: #6B7280;
  
  /* 边框 */
  --border-dark: #2D3748;
  --border-aurora: rgba(139, 92, 246, 0.3); /* 极光边框 */
  
  /* 极光渐变 */
  --gradient-aurora: linear-gradient(135deg, 
    #8B5CF6 0%, 
    #3B82F6 25%, 
    #06B6D4 50%, 
    #10B981 75%, 
    #8B5CF6 100%);
  --gradient-aurora-hover: linear-gradient(135deg, 
    #A78BFA 0%, 
    #60A5FA 25%, 
    #22D3EE 50%, 
    #34D399 75%, 
    #A78BFA 100%);
  --gradient-aurora-subtle: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.1) 0%, 
    rgba(59, 130, 246, 0.1) 50%, 
    rgba(16, 185, 129, 0.1) 100%);
  --gradient-bg: linear-gradient(180deg, 
    #0A0E1F 0%, 
    #141827 50%, 
    #1A1F2E 100%);
  
  /* 发光效果 */
  --glow-purple: rgba(139, 92, 246, 0.4);
  --glow-cyan: rgba(6, 182, 212, 0.4);
  --glow-green: rgba(16, 185, 129, 0.4);
  --glow-blue: rgba(59, 130, 246, 0.4);
  --glow-aurora: 0 0 20px rgba(139, 92, 246, 0.3), 
                 0 0 40px rgba(59, 130, 246, 0.2), 
                 0 0 60px rgba(16, 185, 129, 0.1);
}

/* ========== 全局样式覆盖 ========== */
body {
  background: var(--gradient-bg) !important;
  background-attachment: fixed !important;
  color: var(--text-light) !important;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  position: relative !important;
}

/* 极光背景动画层 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: aurora-shift 20s ease-in-out infinite;
}

@keyframes aurora-shift {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-20px);
  }
}

::selection {
  background: var(--aurora-purple) !important;
  color: var(--text-white) !important;
}

::-moz-selection {
  background: var(--aurora-purple) !important;
  color: var(--text-white) !important;
}

a {
  color: var(--aurora-cyan) !important;
  transition: all 0.3s ease !important;
}

a:hover,
a:focus {
  color: var(--aurora-purple) !important;
  text-shadow: var(--glow-aurora) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-white) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

p {
  color: var(--text-gray) !important;
  line-height: 1.8 !important;
}

/* ========== 头部导航 ========== */
.head-section {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom: 1px solid var(--border-aurora) !important;
  box-shadow: 0 4px 30px rgba(139, 92, 246, 0.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.head-section .navbar-default {
  background-color: transparent !important;
  border: none !important;
}

.navbar-brand {
  color: var(--text-white) !important;
  font-weight: 700 !important;
  text-shadow: var(--glow-aurora) !important;
}

.navbar-brand span {
  background: var(--gradient-aurora) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: aurora-text 3s ease-in-out infinite !important;
}

@keyframes aurora-text {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(30deg);
  }
}

.head-section .nav li a {
  color: var(--text-gray) !important;
  font-weight: 400 !important;
  position: relative !important;
}

.head-section .nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-aurora);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  box-shadow: var(--glow-aurora);
}

.head-section .nav li a:hover::after,
.head-section .nav li.active a::after {
  width: 80%;
}

.head-section .nav li a:hover,
.head-section .nav li a:focus,
.head-section .nav li.active a,
.head-section .nav li.active a:hover {
  color: var(--text-white) !important;
  background: var(--gradient-aurora) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
  border-radius: 6px !important;
}

.head-section .navbar-default .navbar-nav > .open > a,
.head-section .navbar-default .navbar-nav > .open > a:hover,
.head-section .navbar-default .navbar-nav > .open > a:focus {
  color: var(--text-white) !important;
  background: var(--gradient-aurora) !important;
}

ul.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

ul.dropdown-menu li a {
  color: var(--text-gray) !important;
  transition: all 0.3s ease !important;
}

ul.dropdown-menu li a:hover {
  color: var(--text-white) !important;
  background: var(--gradient-aurora) !important;
}

.head-section .navbar-nav > li > .form-control.search {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  color: var(--text-white) !important;
  border-radius: 20px !important;
}

.head-section .navbar-nav > li > .form-control.search:focus {
  border-color: var(--aurora-purple) !important;
  box-shadow: var(--glow-aurora) !important;
  background: var(--bg-hover) !important;
}

.head-section .navbar-nav > li > .form-control.search::placeholder {
  color: var(--text-muted) !important;
}

/* ========== 轮播图区域 ========== */
#da-slider {
  background: var(--gradient-aurora) !important;
  position: relative !important;
  overflow: hidden !important;
}

#da-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-aurora-subtle);
  animation: aurora-shift 15s ease-in-out infinite;
  z-index: 1;
}

.da-slide h2,
.da-slide p {
  color: var(--text-white) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  z-index: 2;
}

/* ========== 特性区域 ========== */
.feature-head h1 {
  color: var(--text-white) !important;
  text-shadow: var(--glow-aurora) !important;
}

.feature-box {
  background: transparent !important;
}

.feature-box-heading {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  transition: all 0.3s ease !important;
  margin-bottom: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.feature-box-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-aurora-subtle);
  transition: left 0.5s ease;
  z-index: 0;
}

.feature-box-heading:hover::before {
  left: 0;
}

.feature-box-heading:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--glow-aurora) !important;
  border-color: var(--aurora-purple) !important;
}

.feature-box-heading > * {
  position: relative;
  z-index: 1;
}

.feature-box-heading h4 {
  color: var(--text-white) !important;
  margin-top: 1rem !important;
}

.feature-box-heading h4 b {
  background: var(--gradient-aurora) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.feature-box p {
  color: var(--text-gray) !important;
}

/* ========== 产品展示区域 ========== */
.property {
  background: var(--bg-dark) !important;
  border-top: 1px solid var(--border-aurora) !important;
  border-bottom: 1px solid var(--border-aurora) !important;
  position: relative !important;
}

.property::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-aurora-subtle);
  pointer-events: none;
}

.property.gray-bg {
  background: var(--bg-card) !important;
}

.property h1 {
  color: var(--text-white) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--gradient-aurora) 1 !important;
  padding-bottom: 0.5rem !important;
  position: relative;
  z-index: 1;
}

.property hr {
  border-color: var(--border-aurora) !important;
}

.property p {
  color: var(--text-gray) !important;
  position: relative;
  z-index: 1;
}

.property .fa-check {
  color: var(--aurora-green) !important;
  text-shadow: 0 0 10px var(--glow-green) !important;
}

.btn-purchase {
  background: var(--gradient-aurora) !important;
  color: var(--text-white) !important;
  border: none !important;
  padding: 0.75rem 2rem !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--glow-aurora) !important;
  position: relative;
  z-index: 1;
}

.btn-purchase:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5) !important;
  background: var(--gradient-aurora-hover) !important;
}

/* ========== 产品特色区域 ========== */
#home-services {
  background: var(--bg-deep-dark) !important;
}

.price-one h1 {
  color: var(--text-white) !important;
  text-shadow: var(--glow-aurora) !important;
}

.price-one p {
  color: var(--text-muted) !important;
}

.pricing-table {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.pricing-table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-aurora-subtle);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-table:hover::before {
  opacity: 1;
}

.pricing-table:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--glow-aurora) !important;
  border-color: var(--aurora-purple) !important;
}

.pricing-head {
  background: var(--gradient-aurora) !important;
  color: var(--text-white) !important;
  padding: 1.5rem !important;
  position: relative;
  z-index: 1;
}

.pricing-head h1 {
  color: var(--text-white) !important;
  font-size: 1.2rem !important;
}

.pricing-table ul.list-unstyled li {
  color: var(--text-gray) !important;
  border-bottom: 1px solid var(--border-dark) !important;
  padding: 0.75rem 1.5rem !important;
  position: relative;
  z-index: 1;
}

.pricing-table ul.list-unstyled li:last-child {
  border-bottom: none !important;
}

/* ========== 标签页 ========== */
.tab-bg-dark-navy-blue {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
}

.nav-tabs {
  border-bottom: 2px solid var(--border-aurora) !important;
}

.nav-tabs > li > a {
  color: var(--text-gray) !important;
  background: transparent !important;
  border: none !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--text-white) !important;
  background: var(--gradient-aurora) !important;
  border: none !important;
}

.panel-body {
  background: var(--bg-dark) !important;
  border: 1px solid var(--border-aurora) !important;
}

.media {
  border-bottom: 1px solid var(--border-dark) !important;
  padding: 1rem 0 !important;
}

.media-body .p-head {
  color: var(--text-white) !important;
  font-weight: 500 !important;
}

.media-body .p-head:hover {
  background: var(--gradient-aurora) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.media-body p {
  color: var(--text-gray) !important;
}

/* ========== 内容列表 ========== */
.breadcrumbs {
  background: var(--bg-dark) !important;
  border-bottom: 1px solid var(--border-aurora) !important;
  padding: 2rem 0 !important;
}

.breadcrumbs h1 {
  color: var(--text-white) !important;
}

.breadcrumbs .position {
  color: var(--aurora-cyan) !important;
}

.breadcrumbs .position:hover {
  color: var(--aurora-purple) !important;
}

.blog-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.blog-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-aurora-subtle);
  transition: left 0.5s ease;
  z-index: 0;
}

.blog-item:hover::before {
  left: 0;
}

.blog-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--glow-aurora) !important;
  border-color: var(--aurora-purple) !important;
}

.blog-item > * {
  position: relative;
  z-index: 1;
}

.date-wrap {
  background: var(--gradient-aurora) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  text-align: center !important;
}

.date-wrap .date,
.date-wrap .month {
  color: var(--text-white) !important;
  display: block !important;
}

.blog-item h1 a {
  color: var(--text-white) !important;
}

.blog-item h1 a:hover {
  background: var(--gradient-aurora) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ========== 分页 ========== */
.pagebar {
  background: transparent !important;
}

.pagebar a {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  color: var(--text-gray) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.pagebar a:hover,
.pagebar a.current {
  background: var(--gradient-aurora) !important;
  border-color: var(--aurora-purple) !important;
  color: var(--text-white) !important;
  box-shadow: var(--glow-aurora) !important;
}

/* ========== 文章详情 ========== */
.article_container {
  color: var(--text-gray) !important;
  line-height: 1.8 !important;
}

.article_container h2,
.article_container h3,
.article_container h4 {
  color: var(--text-white) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--gradient-aurora) 1 !important;
  padding-bottom: 0.5rem !important;
  margin-top: 2rem !important;
}

.article_container img {
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3) !important;
}

.article_container code {
  background: var(--bg-card) !important;
  color: var(--aurora-cyan) !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-aurora) !important;
}

/* ========== 侧边栏 ========== */
.blog-side-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}

.search-row .form-control {
  background: var(--bg-dark) !important;
  border: 1px solid var(--border-aurora) !important;
  color: var(--text-white) !important;
  border-radius: 6px !important;
}

.search-row .form-control:focus {
  border-color: var(--aurora-purple) !important;
  box-shadow: var(--glow-aurora) !important;
}

.category h3 {
  color: var(--text-white) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--gradient-aurora) 1 !important;
  padding-bottom: 0.5rem !important;
}

.category ul li a {
  color: var(--text-gray) !important;
}

.category ul li a:hover {
  color: var(--aurora-purple) !important;
}

.blog-post h3 {
  color: var(--text-white) !important;
}

.media-heading a {
  color: var(--text-white) !important;
}

.media-heading a:hover {
  background: var(--gradient-aurora) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ========== 应用领域/轮播 ========== */
.bg-lg {
  background: var(--bg-dark) !important;
}

.recent-work {
  color: var(--text-white) !important;
  text-shadow: var(--glow-aurora) !important;
}

.view-tenth {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-aurora) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.view-tenth .mask {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.9) 0%, 
    rgba(59, 130, 246, 0.9) 50%, 
    rgba(16, 185, 129, 0.9) 100%) !important;
}

.view-tenth .info {
  color: var(--text-white) !important;
}

/* ========== 合作伙伴 ========== */
.our-clients {
  background: var(--bg-card) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  border: 1px solid var(--border-aurora) !important;
}

.our-clients h2 {
  color: var(--text-white) !important;
}

.clients-list li {
  border: 1px solid var(--border-aurora) !important;
  border-radius: 8px !important;
  background: var(--bg-dark) !important;
  transition: all 0.3s ease !important;
}

.clients-list li:hover {
  border-color: var(--aurora-purple) !important;
  box-shadow: var(--glow-aurora) !important;
}

/* ========== 页脚 ========== */
.footer {
  background: var(--bg-deep-dark) !important;
  border-top: 1px solid var(--border-aurora) !important;
  color: var(--text-gray) !important;
}

.footer h1 {
  color: var(--text-white) !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--gradient-aurora) 1 !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

.footer address p {
  color: var(--text-gray) !important;
}

.footer address a {
  color: var(--aurora-cyan) !important;
}

.footer address a:hover {
  color: var(--aurora-purple) !important;
}

.tweet-box a {
  color: var(--text-gray) !important;
}

.tweet-box a:hover {
  color: var(--aurora-purple) !important;
}

.page-footer-list li a {
  color: var(--text-gray) !important;
}

.page-footer-list li a:hover {
  color: var(--aurora-purple) !important;
}

.footer-small {
  background: var(--bg-dark) !important;
  border-top: 1px solid var(--border-aurora) !important;
  color: var(--text-muted) !important;
}

.footer-small .copyright {
  color: var(--text-muted) !important;
}

.footer-small a {
  color: var(--aurora-cyan) !important;
}

.footer-small a:hover {
  color: var(--aurora-purple) !important;
}

/* ========== 响应式调整 ========== */
@media (max-width: 768px) {
  .head-section .navbar-nav {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-aurora) !important;
    border-radius: 8px !important;
    margin-top: 1rem !important;
  }
  
  .navbar-toggle {
    border-color: var(--border-aurora) !important;
  }
  
  .navbar-toggle .icon-bar {
    background-color: var(--aurora-purple) !important;
  }
}

/* ========== 动画增强 ========== */
@keyframes aurora-glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--glow-purple), 
                0 0 40px var(--glow-blue), 
                0 0 60px var(--glow-green);
  }
  33% {
    box-shadow: 0 0 20px var(--glow-blue), 
                0 0 40px var(--glow-green), 
                0 0 60px var(--glow-cyan);
  }
  66% {
    box-shadow: 0 0 20px var(--glow-green), 
                0 0 40px var(--glow-cyan), 
                0 0 60px var(--glow-purple);
  }
}

.feature-box-heading:hover,
.pricing-table:hover,
.blog-item:hover {
  animation: aurora-glow 3s ease-in-out infinite;
}

/* ========== 滚动条样式 ========== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-aurora);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gradient-aurora-hover);
}