/* ============================================================
   逸海网络官网 - 完整 CSS（原生 PHP 版）
   现代商务风 · 靛蓝 + 青绿
   ============================================================ */

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1f2937;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ===== Layout ===== */
.container-narrow {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.section { padding: 96px 0; }
@media (max-width: 768px) {
    .section { padding: 56px 0; }
    .container-narrow { padding: 0 16px; }
}

/* ===== Grid ===== */
.grid { display: grid; gap: 24px; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* 默认（移动端）单列；大屏才应用多列 */
.md\:grid-cols-2 { grid-template-columns: 1fr; }
.md\:grid-cols-3 { grid-template-columns: 1fr; }
.md\:grid-cols-4 { grid-template-columns: 1fr; }
.lg\:grid-cols-2 { grid-template-columns: 1fr; }
.lg\:grid-cols-3 { grid-template-columns: 1fr; }
.lg\:grid-cols-4 { grid-template-columns: 1fr; }
.lg\:grid-cols-5 { grid-template-columns: 1fr; }

/* 平板 768px+：2 列 */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
/* 桌面 1024px+：恢复各自列数 */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Flex ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
@media (max-width: 768px) {
    .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 769px) {
    .hidden { display: none; }
    .md\:hidden { display: none; }
}

/* ===== Spacing ===== */
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}.mt-16{margin-top:64px}.mt-20{margin-top:80px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-12{margin-bottom:48px}.mb-16{margin-bottom:64px}
.mx-auto{margin-left:auto;margin-right:auto}
.p-6{padding:24px}.p-8{padding:32px}
.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}

/* ===== Width / Height ===== */
.w-full{width:100%}
.w-12{width:48px}.w-14{width:56px}.w-16{width:64px}
.h-12{height:48px}.h-14{height:56px}.h-16{height:64px}
.max-w-2xl{max-width:672px}.max-w-3xl{max-width:768px}.max-w-4xl{max-width:896px}.max-w-md{max-width:448px}
.aspect-square{aspect-ratio:1/1}
.aspect-video{aspect-ratio:16/9}

/* ===== Text ===== */
.text-xs{font-size:12px;line-height:16px}
.text-sm{font-size:14px;line-height:20px}
.text-base{font-size:16px;line-height:24px}
.text-lg{font-size:18px;line-height:28px}
.text-xl{font-size:20px;line-height:28px}
.text-2xl{font-size:24px;line-height:32px}
.text-3xl{font-size:30px;line-height:36px}
.text-4xl{font-size:36px;line-height:40px}
.text-5xl{font-size:48px;line-height:1.1}
.text-6xl{font-size:60px;line-height:1.1}
.text-9xl{font-size:128px;line-height:1}
.font-medium{font-weight:500}
.font-bold{font-weight:700}
.text-center{text-align:center}
.text-right{text-align:right}
.leading-tight{line-height:1.2}
.leading-relaxed{line-height:1.7}
@media (max-width: 768px) {
    .md\:text-6xl{font-size:40px}
    .md\:text-5xl{font-size:32px}
    .md\:text-4xl{font-size:28px}
    .md\:text-3xl{font-size:24px}
    .md\:text-2xl{font-size:20px}
}

/* ===== Colors ===== */
.text-white{color:#fff}
.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-gray-900{color:#111827}
.text-primary-100{color:#e0e7ff}.text-primary-600{color:#4f46e5}.text-primary-700{color:#4338ca}
.text-accent-500{color:#06b6d4}
.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-green-600{color:#16a34a}.text-yellow-600{color:#ca8a04}.text-blue-600{color:#2563eb}

/* ===== Background ===== */
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-900{background-color:#111827}
.bg-primary-50{background-color:#eef2ff}.bg-primary-100{background-color:#e0e7ff}.bg-primary-600{background-color:#4f46e5}
.bg-accent-500{background-color:#06b6d4}
.bg-green-500{background-color:#22c55e}
.bg-gradient-primary{background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%)}
.bg-gradient-hero{background:linear-gradient(135deg,#eef2ff 0%,#e0f2fe 50%,#ecfeff 100%)}
.bg-gradient-to-br{background:linear-gradient(to bottom right,#e0e7ff,#cffafe)}
.bg-white\/10{background-color:rgba(255,255,255,0.1)}
.bg-grid-pattern{background-image:linear-gradient(rgba(79,70,229,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.04) 1px,transparent 1px);background-size:32px 32px}

/* ===== Border / Radius ===== */
.border{border:1px solid #e5e7eb}
.border-t{border-top:1px solid #e5e7eb}
.border-b{border-bottom:1px solid #e5e7eb}
.border-l-4{border-left:4px solid #4f46e5}
.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-800{border-color:#1f2937}
.border-primary-200{border-color:#c7d2fe}
.border-white\/30{border-color:rgba(255,255,255,0.3)}
.rounded{border-radius:6px}
.rounded-xl{border-radius:12px}
.rounded-2xl{border-radius:16px}
.rounded-3xl{border-radius:24px}
.rounded-full{border-radius:9999px}

/* ===== Shadow ===== */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.shadow-lg{box-shadow:0 10px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.05)}
.shadow-xl{box-shadow:0 20px 40px -10px rgba(0,0,0,0.12)}
.shadow-2xl{box-shadow:0 25px 60px -15px rgba(0,0,0,0.25)}

/* ===== Position ===== */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}.top-20{top:80px}
.right-0{right:0}.right-4{right:16px}.right-10{right:40px}
.bottom-4{bottom:16px}.bottom-10{bottom:40px}
.left-10{left:40px}
.-bottom-6{bottom:-24px}.-right-6{right:-24px}
.z-40{z-index:40}.z-50{z-index:50}

/* ===== Effects ===== */
.gradient-text{background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.blur-3xl{filter:blur(64px)}
.blur-xl{filter:blur(24px)}
.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-50{opacity:.5}
.overflow-hidden{overflow:hidden}

/* ===== Transitions ===== */
.transition{transition:all 0.2s ease}
.transition-all{transition:all 0.2s ease}
.transition-colors{transition:color 0.2s,background-color 0.2s,border-color 0.2s}
.transition-transform{transition:transform 0.2s}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}

/* ===== Order（服务页左右交替）===== */
.lg-order-2 { order: 0; }
@media (min-width: 1024px) {
    .lg-order-2 { order: 2; }
}

/* ===== Hero 内部容器 padding ===== */
.hero-pad { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 768px) { .hero-pad { padding-top: 56px; padding-bottom: 56px; } }

/* ===== 内页 Hero：固定最小高度，让所有页面视觉对齐 ===== */
.page-hero {
    min-height: 320px;
    padding: 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-hero .container-narrow { width: 100%; }
@media (max-width: 768px) {
    .page-hero { min-height: 220px; padding: 40px 0; }
}

/* ===== Hover ===== */
.hover\:bg-gray-50:hover{background-color:#f9fafb}
.hover\:bg-primary-700:hover{background-color:#4338ca}
.hover\:text-primary-600:hover{color:#4f46e5}
.hover\:text-gray-300:hover{color:#d1d5db}
.hover\:text-white:hover{color:#fff}
.hover\:underline:hover{text-decoration:underline}
.hover\:shadow-xl:hover{box-shadow:0 20px 40px -10px rgba(0,0,0,0.12)}
.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:scale-110:hover{transform:scale(1.1)}

/* ===== Animations ===== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.animate-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.animate-float{animation:float 7s ease-in-out infinite}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate-slide-up{animation:slideUp 0.7s ease-out}

/* ============================================================
   组件
   ============================================================ */

/* ===== Header 导航 ===== */
body > header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #f3f4f6;
}
body > header .container-narrow { padding-top: 0; padding-bottom: 0; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
}
.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; max-width: 50%; min-width: 0; }
.logo-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.logo-text { line-height: 1.2; }
.logo-title { font-weight: 700; color: #111827; font-size: 18px; }
.logo-sub { font-size: 12px; color: #6b7280; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-menu a { color: #374151; font-weight: 500; font-size: 15px; transition: color .2s; }
.nav-menu a:hover { color: #4f46e5; }
.mobile-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
#mobileMenu { display: none; padding-bottom: 16px; }
#mobileMenu a { display: block; padding: 10px 16px; border-radius: 8px; color: #374151; }
#mobileMenu a:hover { background: #f9fafb; }
@media (max-width: 900px) {
    .nav-menu { display: none; }
    .nav-cta { display: none; }
    .mobile-toggle { display: block; }
    #mobileMenu.show { display: block; }
}

/* ===== Hero CTA 按钮组：PC 一行 / 手机两行 ===== */
.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-cta .btn-primary,
.hero-cta .btn-secondary {
    padding: 14px 32px;
    font-size: 15px;
}
@media (max-width: 640px) {
    .hero-cta { flex-direction: column; }
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary { width: 100%; }
}

/* ===== Buttons ===== */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 9999px;
    background: linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
    color: #fff; font-weight: 500; font-size: 15px;
    border: none; cursor: pointer;
    box-shadow: 0 10px 25px -8px rgba(79,70,229,0.5);
    transition: all 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 30px -8px rgba(79,70,229,0.6); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px;
    border-radius: 9999px;
    background: #fff; color: #4338ca; font-weight: 500; font-size: 15px;
    border: 1px solid #c7d2fe; cursor: pointer;
    transition: all 0.2s ease;
}
.btn-secondary:hover { background: #eef2ff; }

/* ===== Badge / Tag ===== */
.badge {
    display: inline-flex; align-items: center;
    padding: 5px 14px; font-size: 12px; font-weight: 500;
    border-radius: 9999px; background: #e0e7ff; color: #4338ca;
}
.tag-chip {
    display: inline-block;
    padding: 3px 10px; font-size: 12px;
    border-radius: 9999px; background: #eef2ff; color: #4338ca;
}
.bg-yellow-100{background-color:#fef9c3}.bg-blue-100{background-color:#dbeafe}.bg-green-100{background-color:#dcfce7}.bg-red-100{background-color:#fee2e2}

/* ===== Card 卡片（业务卡片核心）===== */
.card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f1f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: block;
    text-align: left;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(79,70,229,0.18);
    border-color: #c7d2fe;
}

/* ===== Service 业务卡片图标 ===== */
.service-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

/* ===== Hero 装饰圆 ===== */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }

/* ===== Section 标题块 ===== */
.section-header { text-align: center; max-width: 672px; margin: 0 auto 56px; }
.section-header h2 { font-size: 36px; font-weight: 700; color: #111827; margin: 12px 0; }
.section-header p { color: #6b7280; font-size: 16px; }
@media (max-width: 768px) { .section-header h2 { font-size: 28px; } }

/* ===== 旗下产业小卡片 ===== */
.sub-card {
    background: #fff; border-radius: 16px; border: 1px solid #f0f1f3;
    padding: 24px 16px; text-align: center;
    transition: all 0.2s;
}
.sub-card:hover { background: #eef2ff; border-color: #c7d2fe; }
.sub-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg,#4f46e5,#06b6d4);
    color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}

/* ===== Footer ===== */
body > footer { background: #111827; color: #d1d5db; padding-top: 64px; padding-bottom: 32px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo .logo-title { color: #fff; }
.footer-logo .logo-sub { color: #9ca3af; }
.footer-col h4 { color: #fff; font-weight: 600; margin-bottom: 16px; font-size: 15px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #9ca3af; font-size: 14px; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1f2937; padding-top: 32px; text-align: center; font-size: 13px; color: #6b7280; }

/* ===== 浮动按钮 ===== */
.float-buttons { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 12px; }
.float-btn {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; border: none;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.float-btn:hover { transform: scale(1.1); }

/* ===== 文章卡片 ===== */
.article-card {
    background: #fff; border-radius: 16px; border: 1px solid #f0f1f3;
    overflow: hidden; transition: all 0.3s; display: block;
}
.article-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(79,70,229,0.18); border-color: #c7d2fe; }
.article-thumb { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.article-body { padding: 20px; }
.article-title { font-weight: 700; color: #111827; margin-bottom: 8px; line-height: 1.5; }
.article-card:hover .article-title { color: #4f46e5; }

/* ===== Prose 富文本 ===== */
.prose-content { color: #374151; line-height: 1.8; font-size: 16px; }
.prose-content h2 { font-size: 26px; font-weight: 700; color: #111827; margin: 32px 0 16px; }
.prose-content h3 { font-size: 20px; font-weight: 600; color: #111827; margin: 24px 0 12px; }
.prose-content p { margin: 16px 0; }
.prose-content a { color: #4f46e5; }
.prose-content a:hover { text-decoration: underline; }
.prose-content ul, .prose-content ol { margin: 16px 0; padding-left: 24px; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin: 8px 0; }
.prose-content blockquote { border-left: 4px solid #4f46e5; background: #eef2ff; padding: 12px 20px; margin: 16px 0; border-radius: 0 8px 8px 0; color: #374151; }
.prose-content img { border-radius: 12px; margin: 24px 0; }
.prose-content code { background: #f3f4f6; color: #db2777; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.prose-content pre { background: #1f2937; color: #f3f4f6; padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; }
.prose-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose-content th, .prose-content td { border: 1px solid #e5e7eb; padding: 10px 16px; }
.prose-content th { background: #f9fafb; }

/* ===== 分页 ===== */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination a { display: inline-block; padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #374151; background: #fff; transition: .2s; }
.pagination a:hover { background: #eef2ff; border-color: #4f46e5; color: #4f46e5; }
.pagination a.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* ===== 截断 ===== */
.line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 表单 ===== */
input, textarea, select {
    width: 100%; padding: 12px 16px;
    border: 1px solid #d1d5db; border-radius: 12px;
    font-size: 15px; background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
textarea { resize: vertical; }
label { display: block; font-weight: 500; margin-bottom: 8px; color: #374151; font-size: 14px; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ===== Logo 图片 ===== */
.logo-img{width:40px;height:40px;max-width:100%;border-radius:12px;flex-shrink:0;transition:transform 0.2s ease;object-fit:contain;}
.logo-link:hover .logo-img{transform:scale(1.05);}
.admin-logo-img{width:36px;height:36px;max-width:100%;border-radius:10px;flex-shrink:0;transition:transform 0.2s ease;object-fit:contain;}
.admin-logo:hover .admin-logo-img{transform:scale(1.05);}