/* ============================================
   SiteCraft 深蓝渐变主题 — 立体科技版
   ============================================ */

:root {
    --deep-bg: #0D1B2A;
    --deep-bg-alt: #1B2838;
    --deep-surface: #1E3A5F;
    --deep-surface-hover: #264A73;
    --deep-primary: #0EA5E9;
    --deep-primary-dark: #0284C7;
    --deep-primary-light: #7DD3FC;
    --deep-accent: #3B82F6;
    --deep-gradient-start: #0369A1;
    --deep-gradient-end: #1E40AF;
    --deep-text: #F1F5F9;
    --deep-text-muted: #94A3B8;
    --deep-border: rgba(14, 165, 233, 0.2);
}

body {
    background-color: var(--deep-bg) !important;
    color: var(--deep-text) !important;
}

a {
    color: var(--deep-primary-light) !important;
}
a:hover {
    color: #BAE6FD !important;
}

/* Header - 深蓝渐变立体 */
.site-header {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2838 50%, #1E3A5F 100%) !important;
    border-bottom: 1px solid rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(14, 165, 233, 0.1) inset !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.site-header.scrolled {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2838 100%) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(14, 165, 233, 0.15) inset !important;
}
.logo-text, .site-title a {
    background: linear-gradient(135deg, var(--deep-primary-light) 0%, var(--deep-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 10px rgba(14, 165, 233, 0.3);
}
.nav-menu a, .main-navigation a {
    color: var(--deep-text) !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.nav-menu a:hover, .nav-menu .current a,
.main-navigation a:hover, .main-navigation .current-menu-item a {
    color: var(--deep-primary-light) !important;
    text-shadow: 0 0 12px rgba(14, 165, 233, 0.5);
}

.lang-switcher a {
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(8px);
}
.lang-switcher a:hover, .lang-switcher a.active {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4), 0 0 20px rgba(14, 165, 233, 0.2);
    border-color: transparent !important;
}

.mobile-menu {
    background: linear-gradient(180deg, #1B2838 0%, #0D1B2A 100%) !important;
    border-left: 1px solid rgba(14, 165, 233, 0.2) !important;
}
.mobile-menu a {
    color: var(--deep-text) !important;
    border-bottom: 1px solid rgba(14, 165, 233, 0.1) !important;
}
.mobile-menu a:hover {
    color: var(--deep-primary-light) !important;
    background: rgba(14, 165, 233, 0.1) !important;
}

/* Hero Section - 深蓝渐变 */
.hero {
    background: linear-gradient(160deg, #0D1B2A 0%, #1B2838 30%, #1E3A5F 70%, #0D1B2A 100%) !important;
    min-height: 100vh;
}
.hero::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(14, 165, 233, 0.15) 0%, transparent 70%) !important;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, var(--deep-bg), transparent);
    pointer-events: none;
}
.hero-grid-overlay {
    background: rgba(13, 27, 42, 0.3) !important;
}
.hero-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 20px rgba(14, 165, 233, 0.3);
}
.gradient-text {
    background: linear-gradient(135deg, var(--deep-primary-light) 0%, var(--deep-accent) 50%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    color: var(--deep-text-muted) !important;
}
.hero-badge {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.4) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
}

/* Hero Buttons - 渐变立体 */
.btn-primary {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4), 0 0 30px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--deep-primary-dark) 0%, var(--deep-primary) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.5), 0 0 40px rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-outline {
    background: transparent !important;
    color: var(--deep-primary-light) !important;
    border: 2px solid var(--deep-primary) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 20px rgba(14, 165, 233, 0.1);
}
.btn-outline:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3), inset 0 0 30px rgba(14, 165, 233, 0.2);
}

/* Case Cards - 深色玻璃卡 */
.case-card, .case-item {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.8) 0%, rgba(27, 40, 56, 0.9) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(14, 165, 233, 0.05) inset !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.case-card:hover, .case-item:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(14, 165, 233, 0.1) inset !important;
}
.case-card .case-thumbnail img {
    border-radius: 16px 16px 0 0 !important;
    transition: transform 0.3s ease !important;
}
.case-card:hover .case-thumbnail img {
    transform: scale(1.03);
}
.case-title {
    color: var(--deep-text) !important;
}
.case-excerpt {
    color: var(--deep-text-muted) !important;
}
.tech-tag {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%) !important;
    color: var(--deep-primary-light) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    border-radius: 8px !important;
}

/* Blog Cards */
.blog-card {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.8) 0%, rgba(27, 40, 56, 0.9) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(14, 165, 233, 0.15) !important;
}
.blog-title {
    color: var(--deep-text) !important;
}
.blog-excerpt {
    color: var(--deep-text-muted) !important;
}
.blog-meta {
    color: #64748B !important;
}
.blog-category {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 8px !important;
}

/* Services Section */
.services-section {
    background: linear-gradient(180deg, #0D1B2A 0%, #1B2838 50%, #0D1B2A 100%) !important;
}
.service-card {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.8) 0%, rgba(27, 40, 56, 0.9) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(14, 165, 233, 0.05) inset !important;
    backdrop-filter: blur(12px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(14, 165, 233, 0.15), 0 0 0 1px rgba(14, 165, 233, 0.1) inset !important;
}
.service-card .service-icon {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--deep-primary-light) 0%, var(--deep-primary) 100%) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.service-title {
    color: var(--deep-text) !important;
}
.service-desc {
    color: var(--deep-text-muted) !important;
}

/* Stats Section - 深蓝渐变 */
.stats-section {
    background: linear-gradient(135deg, #0369A1 0%, #0284C7 30%, #1E40AF 70%, #312E81 100%) !important;
    box-shadow: 0 0 60px rgba(14, 165, 233, 0.2) inset;
}
.stats-section::before {
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 60%) !important;
}
.stat-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}
.stat-number {
    color: white !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.stat-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #020617 0%, #0D1B2A 50%, #1B2838 100%) !important;
    box-shadow: 0 -20px 60px rgba(14, 165, 233, 0.1) inset;
}
.cta-title {
    color: white !important;
}
.cta-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Featured Section */
.featured-section {
    background: var(--deep-bg) !important;
}
.section-alt {
    background: var(--deep-bg-alt) !important;
}

/* Footer */
.site-footer, .footer-dark {
    background: linear-gradient(180deg, #0D1B2A 0%, #020617 100%) !important;
    border-top: 1px solid rgba(14, 165, 233, 0.15) !important;
}
.site-footer .footer-title {
    color: white !important;
}
.site-footer .footer-nav a {
    color: var(--deep-text-muted) !important;
}
.site-footer .footer-nav a:hover {
    color: var(--deep-primary-light) !important;
}
.site-footer .footer-brand p {
    color: var(--deep-text-muted) !important;
}
.site-footer .footer-bottom {
    border-top: 1px solid rgba(14, 165, 233, 0.1) !important;
    color: #64748B !important;
}
.social-link {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 10px !important;
}
.social-link:hover {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

/* Page Hero */
.page-hero {
    background: linear-gradient(180deg, #1B2838 0%, #0D1B2A 100%) !important;
}
.page-title {
    color: white !important;
}
.page-breadcrumbs {
    color: #64748B !important;
}
.page-breadcrumbs a {
    color: var(--deep-text-muted) !important;
}

/* Post Hero */
.post-hero {
    background: linear-gradient(180deg, #1B2838 0%, #0D1B2A 100%) !important;
}
.post-hero::before {
    background: radial-gradient(circle at 50% 100%, rgba(14, 165, 233, 0.1) 0%, transparent 60%) !important;
}
.post-title {
    color: white !important;
}
.post-excerpt {
    color: var(--deep-text-muted) !important;
}
.post-body {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    color: var(--deep-text) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
}

/* Contact Form */
.contact-info {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
}
.contact-detail-icon {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.contact-form input, .contact-form textarea {
    background: rgba(13, 27, 42, 0.8) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: var(--deep-text) !important;
    border-radius: 10px !important;
}
.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--deep-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15), 0 4px 12px rgba(14, 165, 233, 0.2) !important;
}

/* Widgets */
.content-sidebar .widget {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
}
.widget-title {
    color: white !important;
    border-bottom: 2px solid var(--deep-primary) !important;
    padding-bottom: 8px !important;
}

/* Buttons General */
.btn {
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

/* Form Focus States */
input:focus, textarea:focus, select:focus {
    border-color: var(--deep-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
    outline: none;
}

/* Scrollbar - 深色风格 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0D1B2A;
}
::-webkit-scrollbar-thumb {
    background: #1E3A5F;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #264A73;
}

/* Selection */
::selection {
    background: rgba(14, 165, 233, 0.3);
    color: white;
}

/* Tags */
.tag-cloud a {
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 8px !important;
}
.tag-cloud a:hover {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    border-color: transparent !important;
    color: white !important;
}
.cat-nav .count {
    background: rgba(14, 165, 233, 0.2) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 6px !important;
}

/* WPML / Polylang */
.wpml-ls-link {
    background: rgba(14, 165, 233, 0.1) !important;
    color: var(--deep-text) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
}
.wpml-ls-link:hover, .wpml-ls-current-language > .wpml-ls-link {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Post Tags */
.post-tags a {
    background: rgba(14, 165, 233, 0.15) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 8px !important;
}
.post-tags a:hover {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

/* Post Navigation */
.post-nav a {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    color: var(--deep-text-muted) !important;
    border-radius: 12px !important;
}
.post-nav a:hover {
    border-color: rgba(14, 165, 233, 0.5) !important;
    color: var(--deep-primary-light) !important;
    background: rgba(14, 165, 233, 0.15) !important;
}

/* Pagination */
.pagination a, .pagination .current {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    color: var(--deep-text) !important;
    border-radius: 10px !important;
}
.pagination a:hover, .pagination .current {
    background: linear-gradient(135deg, var(--deep-primary) 0%, var(--deep-accent) 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

/* Success Message */
.success-message {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #34D399 !important;
    border-radius: 12px !important;
}

/* Case Hero */
.case-hero {
    background: linear-gradient(180deg, #1B2838 0%, #0D1B2A 100%) !important;
}
.case-hero-title {
    color: white !important;
}
.case-hero-desc {
    color: var(--deep-text-muted) !important;
}
.case-info-card {
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.6) 0%, rgba(27, 40, 56, 0.8) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
}

/* Entry Content */
.entry-content {
    color: var(--deep-text) !important;
}
.entry-content h2, .entry-content h3, .entry-content h4 {
    color: white !important;
}
.entry-content a {
    color: var(--deep-primary-light) !important;
}

/* 404 Page */
.error-page {
    background: var(--deep-bg) !important;
}
.error-code {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
    color: var(--deep-primary-light) !important;
    border-radius: 16px !important;
}
.error-title {
    color: white !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .case-card:hover, .service-card:hover, .blog-card:hover {
        transform: translateY(-2px);
    }
    .hero {
        padding-top: 80px !important;
    }
}