﻿/* ===========================================================
   蓝极冰AI — 全局样式表
   Brand: #0A6CFF | Purple: #7c3aed | Dark: #0a0e1a
   =========================================================== */

:root {
    --brand: #0A6CFF;
    --brand-light: #3b82f6;
    --purple: #7c3aed;
    --dark: #0a0e1a;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-padding-top:72px; }
body { font-family:'Inter',sans-serif; color:#1e293b; overflow-x:hidden; background:#fff; line-height:1.6; }
img, svg, video { max-width:100%; height:auto; }

/* ── Canvas Background ── */
#particleCanvas {
    position:fixed; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:0; opacity:0.35;
}

/* ── Gradient Text ── */
.text-gradient {
    background: linear-gradient(135deg, #0A6CFF 0%, #6366f1 40%, #7c3aed 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-warm {
    background: linear-gradient(135deg, #0A6CFF 0%, #f59e0b 50%, #ef4444 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Glow Cards ── */
.glow-card { position:relative; }
.glow-card::before {
    content:''; position:absolute; inset:-1px; border-radius:inherit;
    background:linear-gradient(135deg, rgba(10,108,255,0.3), rgba(124,58,237,0.15), rgba(10,108,255,0.1));
    z-index:0; opacity:0; transition:opacity 0.5s;
}
.glow-card:hover::before { opacity:1; }
.glow-card > * { position:relative; z-index:1; }

/* ── Glass Card ── */
.glass-card {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(10,108,255,0.08);
}
.glass-card-dark {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(10,108,255,0.12);
}

/* ── Card Hover ── */
.card-hover {
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px -12px rgba(10,108,255,0.18), 0 2px 8px rgba(10,108,255,0.08);
}

/* ── Nav ── */
.nav-link { position:relative; }
.nav-link::after {
    content:''; position:absolute; bottom:-4px; left:50%; width:0; height:2px;
    background:linear-gradient(90deg, #0A6CFF, #7c3aed);
    transition:all 0.3s; transform:translateX(-50%); border-radius:1px;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* ── Animations ── */
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
.float { animation:float 6s ease-in-out infinite; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }
.fade-in-up { opacity:0; animation:fadeInUp 0.8s ease forwards; }
.delay-100 { animation-delay:0.1s; }
.delay-200 { animation-delay:0.2s; }
.delay-300 { animation-delay:0.3s; }
.delay-400 { animation-delay:0.4s; }
.delay-500 { animation-delay:0.5s; }

@keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 20px rgba(10,108,255,0.15), 0 0 60px rgba(10,108,255,0.05); }
    50% { box-shadow: 0 0 35px rgba(10,108,255,0.3), 0 0 90px rgba(10,108,255,0.1); }
}
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(40px); transition:all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Solution Card ── */
.solution-card { position:relative; overflow:hidden; }
.solution-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#0A6CFF,#7c3aed,#f59e0b);
    opacity:0; transition:opacity 0.3s;
}
.solution-card:hover::before { opacity:1; }

.sector-icon {
    background:linear-gradient(135deg,rgba(10,108,255,0.1),rgba(10,108,255,0.03));
    border:1px solid rgba(10,108,255,0.12);
}

/* ── Pricing ── */
.pricing-recommended {
    background: linear-gradient(135deg, rgba(10,108,255,0.05), rgba(124,58,237,0.03));
    border: 2px solid rgba(10,108,255,0.25);
}
.pricing-recommended::after {
    content:''; position:absolute; inset:-2px; border-radius:inherit;
    background:linear-gradient(135deg, rgba(10,108,255,0.15), rgba(124,58,237,0.1));
    z-index:-1; opacity:0; transition:opacity 0.4s;
}

/* ── Terminal ── */
.terminal-box {
    background: linear-gradient(145deg, #0a0e1a 0%, #111827 40%, #1a1f2e 100%);
    color: #e2e8f0;
}

/* ── Mobile Menu ── */
.mobile-menu { transform:translateX(100%); transition:transform 0.35s ease; }
.mobile-menu.open { transform:translateX(0); }

/* ── Modal ── */
.modal-overlay { background:rgba(10,14,26,0.5); backdrop-filter:blur(12px); }

/* ── Tabs ── */
.tab-btn {
    transition: all 0.3s;
    position: relative;
}
.tab-btn.active {
    color: var(--brand);
}
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand);
    border-radius: 1px;
}

/* ── Section Divider ── */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(10,108,255,0.15), rgba(124,58,237,0.1), transparent);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f0f4ff; }
::-webkit-scrollbar-thumb { background:rgba(10,108,255,0.25); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(10,108,255,0.45); }

/* ── Back to Top ── */
#backToTop {
    opacity:0; visibility:hidden; transition: all 0.4s;
}
#backToTop.show {
    opacity:1; visibility:visible;
}

/* ── Case Study Counter ── */
.stat-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Hero decorative lines ── */
.hero-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(10,108,255,0.15), transparent);
    height: 1px;
}

/* ── Page Header ── */
.page-header {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(10,108,255,0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* ===========================================================
   Mobile Responsive Optimizations (鈮?40px)
   =========================================================== */
@media (max-width: 640px) {
    /* 鍩虹鎺掔増 */
    body { font-size:15px; line-height:1.65; }
    h1, .h1 { line-height:1.2; }
    p { word-break:break-word; }

    /* 瀹瑰櫒涓庤妭娈?*/
    .max-w-7xl { padding-left:1rem !important; padding-right:1rem !important; }
    section { padding-top:2.75rem !important; padding-bottom:2.75rem !important; }
    .py-24, .py-20, .lg\:py-32, .lg\:py-28 { padding-top:3rem !important; padding-bottom:3rem !important; }

    /* Page header 绱у噾 */
    .page-header { min-height:220px !important; }
    .page-header .py-16 { padding-top:2.5rem !important; padding-bottom:2.5rem !important; }

    /* Hero 鍖哄煙 */
    .min-h-screen { min-height:auto !important; }
    .pulse-glow, .terminal-box { font-size:13px; }
    .pulse-glow .min-h-\[340px\] { min-height:auto !important; }
    .pulse-glow .p-6 { padding:1rem !important; }

    /* 鏁板瓧 counter 瀛楀彿 */
    .text-4xl, .text-5xl, .text-6xl { line-height:1.15; }
    .counter { font-size:2.25rem !important; }

    /* 娴姩瑁呴グ鍏冪礌闅愯棌锛堥伩鍏嶉伄鎸★級 */
    .float, .float[class*="-top"], .float[class*="-bottom"], .float[class*="-right"], .float[class*="-left"] { display:none !important; }

    /* 琛ㄦ牸锛氭í鍚戞粴鍔?+ 浼樺寲 */
    .overflow-x-auto { -webkit-overflow-scrolling:touch; }
    .overflow-x-auto table { min-width:560px; }
    .overflow-x-auto table th,
    .overflow-x-auto table td { padding:0.625rem 0.75rem !important; font-size:12.5px; white-space:nowrap; }
    .overflow-x-auto table td:nth-child(2) { white-space:normal; }

    /* 涓簊olutions琛ㄦ牸鍖哄煙鍔犺瑙夋彁绀?*/
    .overflow-x-auto { position:relative; border-radius:0.75rem; }
    .overflow-x-auto::after {
        content:''; position:absolute; top:0; right:0; bottom:0; width:24px;
        background:linear-gradient(90deg, transparent, rgba(255,255,255,0.9));
        pointer-events:none; border-radius:0 0.75rem 0.75rem 0;
    }

    /* Nav 楂樺害 & 鍐呭 */
    #navbar { height:3.5rem !important; }
    #navbar .h-16 { height:3.5rem !important; }
    .nav-link { padding:0.5rem 0.625rem !important; font-size:13px; }

    /* 绉诲姩鑿滃崟 */
    #mobileMenu { width:78% !important; max-width:300px; padding:1rem !important; }
    #mobileMenu .py-2\.5 { padding-top:0.625rem !important; padding-bottom:0.625rem !important; }

    /* Modal 寮圭獥 */
    .fixed.z-\[100\].p-4 { padding:0.5rem !important; }
    .max-h-\[90vh\] { max-height:95vh !important; }
    .md\:col-span-2.p-8, .md\:col-span-3.p-8 { padding:1.25rem !important; }

    /* 琛ㄥ崟鍏冪礌 */
    input, select, textarea { font-size:16px !important; }

    /* 鎸夐挳 */
    a[class*="px-8"], a[class*="px-10"] { padding-left:1.25rem !important; padding-right:1.25rem !important; }
    a[class*="py-4"] { padding-top:0.75rem !important; padding-bottom:0.75rem !important; }

    /* Footer 6 鍒?*/
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 { gap:1.5rem !important; }
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > div h4 { font-size:11px !important; }
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > div ul li a,
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-6 > div ul li span { font-size:13px !important; }

    /* 瑙ｅ喅鏂规10涓涓氱綉鏍兼洿绱у噾 */
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5.gap-3 { gap:0.5rem !important; }
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5.gap-3 a { padding:0.625rem !important; }
    .grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5.gap-3 .text-xs { font-size:11.5px !important; }

    /* 5 鍒椾骇鍝佸崱鐗囷紙浜у搧涓績tab锛?*/
    .grid.lg\:grid-cols-5.gap-4 > a { padding:0.875rem !important; }
    .grid.lg\:grid-cols-5.gap-4 > a .text-base { font-size:14px !important; }
    .grid.lg\:grid-cols-5.gap-4 > a .text-xs { font-size:11.5px !important; }

    /* 宸ュ叿鎻愮ず/鏍囬 */
    .text-2xl, .text-3xl { font-size:1.375rem !important; }
    h2 { font-size:1.625rem !important; }
    h3 { font-size:1.125rem !important; }

    /* 鍏徃鎰挎櫙/鍙ｅ彿澶у瓧鍙?*/
    .text-3xl.md\:text-4xl.lg\:text-5xl.font-extrabold { font-size:1.625rem !important; line-height:1.3; }

    /* 瀹㈡埛logo缃戞牸 */
    .grid-cols-3.md\:grid-cols-4.lg\:grid-cols-8 { gap:0.5rem !important; }
    .grid-cols-3.md\:grid-cols-4.lg\:grid-cols-8 > div { height:3.5rem !important; }
    .grid-cols-3.md\:grid-cols-4.lg\:grid-cols-8 > div span { font-size:12px !important; }

    /* Back to top */
    #backToTop { bottom:1rem !important; right:1rem !important; width:2.5rem !important; height:2.5rem !important; }

    /* Stat 鏁板瓧琛?*/
    .grid-cols-2.md\:grid-cols-4.gap-8 { gap:1.25rem !important; }

    /* 鍏抽棴椤甸潰椤堕儴绮掑瓙 canvas 鍔ㄦ晥锛堝湪浣庣鏈烘洿鐪佺數锛?*/
    #particleCanvas { opacity:0.18 !important; }
}

/* ===========================================================
   Tablet (641px ~ 1023px)
   =========================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
    .pulse-glow, .terminal-box { font-size:14px; }
    .counter { font-size:2.75rem; }
    .grid.lg\:grid-cols-5.gap-4 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ===========================================================
   Solutions 顶部行业图标 (移动端横向滚动)
   =========================================================== */
.solutions-grid > a { flex-shrink:0; min-width:96px; }
@media (max-width: 768px) {
    .solutions-grid { flex-wrap:nowrap; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch; }
    .solutions-grid > a { min-width:88px; }
}