/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #ffffff; color: #0f172a; line-height: 1.6; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

:root {
  --accent: #16a34a; --accent-dark: #15803d; --accent-light: #22c55e;
  --teal: #0d9488; --blue: #3b82f6; --purple: #8b5cf6; --orange: #f59e0b; --red: #ef4444;
  --green: #16a34a; --cyan: #0d9488;
  --bg: #ffffff; --bg2: #f8fafc; --bg3: #f1f5f9;
  --border: #e2e8f0; --border-accent: rgba(22,163,74,0.2);
  --text: #0f172a; --text-muted: #64748b; --text-light: #94a3b8;
  --accent-bg: #f0fdf4; --accent-border: #bbf7d0;
  --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.09), 0 12px 48px rgba(0,0,0,0.05);
  --radius: 12px; --radius-lg: 20px;
}

.container { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.section { padding: 100px 0; }
.gradient-text { background: linear-gradient(135deg, #16a34a, #0d9488); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-tag { display: inline-block; padding: 6px 16px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.25); border-radius: 100px; font-size: 13px; color: var(--accent); margin-bottom: 16px; letter-spacing: 0.05em; }
.section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.2; margin-bottom: 16px; color: var(--text); }
.section-desc { color: var(--text-muted); font-size: 17px; max-width: 560px; margin: 0 auto; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; box-shadow: 0 4px 20px rgba(22,163,74,0.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(22,163,74,0.45); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-outline:hover { background: rgba(22,163,74,0.08); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 10px; }
.btn-full { width: 100%; justify-content: center; }

/* ===== NAV ===== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: box-shadow 0.3s; }
.nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.nav-inner { max-width: 1280px; display: flex; align-items: center; gap: 4px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; margin-right: 16px; text-decoration: none; }
/* Logo —— mask 抠形状 + 品牌渐变（与 hero 大标题 .gradient-text 同款渐变） */
.logo-mark { display: inline-block; width: 90px; height: 30px; background: linear-gradient(135deg, #16a34a 0%, #0d9488 100%); -webkit-mask: url('/live400.png') no-repeat center / contain; mask: url('/live400.png') no-repeat center / contain; }
.logo-mark--light { background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%); }
/* 兼容历史 .logo-img 类（其他可能引用的位置） */
.logo-img { height: 30px; width: auto; display: block; }
.logo-icon { font-size: 22px; color: var(--accent); }
.logo-text { color: var(--text); font-weight: 700; font-size: 18px; }
.logo-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); background: rgba(22,163,74,0.1); padding: 3px 7px; border-radius: 4px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-btn { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 8px 14px; border-radius: 6px; display: flex; align-items: center; gap: 4px; transition: all 0.2s; white-space: nowrap; }
.nav-btn:hover, .nav-item.menu-open .nav-btn { color: var(--text); background: rgba(0,0,0,0.05); }
.nav-arrow { transition: transform 0.2s; pointer-events: none; }
.nav-demo-link { background: none; border: 1px solid rgba(22,163,74,0.4); color: var(--accent) !important; padding: 7px 14px; border-radius: 6px; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: all 0.2s; margin-left: 8px; }
.nav-demo-link:hover { background: rgba(22,163,74,0.08); border-color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 16px; }
.nav-phone { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

/* ===== MEGA MENU ===== */
.mega-menu {
  position: absolute; top: calc(100% + 0px); left: 50%; transform: translateX(-50%);
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12); min-width: 680px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  transform: translateX(-50%) translateY(-6px);
  padding-top: 12px;
}
.mega-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mega-menu--narrow { min-width: 480px; }
.nav-item.menu-open .mega-menu { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }
.nav-item.menu-open .nav-btn { color: var(--text); background: rgba(0,0,0,0.05); }
.nav-item.menu-open .nav-arrow { transform: rotate(180deg); }
.mega-inner { display: flex; gap: 0; padding: 24px; }
.mega-col { flex: 1; padding: 0 16px; border-right: 1px solid var(--border); }
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; padding-right: 0; }
.mega-col--highlight { flex: 0 0 180px; }
.mega-label { font-size: 11px; font-weight: 600; color: var(--text-light); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mega-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; transition: background 0.15s; margin-bottom: 2px; }
.mega-item:hover { background: rgba(22,163,74,0.06); }
.mega-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.mega-item span:last-child { display: flex; flex-direction: column; }
.mega-item strong { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.mega-item em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.mega-cta { padding: 16px 8px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.mega-cta p { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.mega-highlight-card { background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(13,148,136,0.06)); border: 1px solid rgba(22,163,74,0.2); border-radius: 12px; padding: 16px; }
.mhc-tag { display: inline-block; padding: 2px 8px; background: linear-gradient(135deg, var(--accent), var(--teal)); border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.mega-highlight-card h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mega-highlight-card p { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.mega-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.mega-stat { text-align: center; padding: 10px; background: rgba(0,0,0,0.02); border-radius: 8px; border: 1px solid var(--border); }
.ms-num { display: block; font-size: 18px; font-weight: 700; color: var(--accent); }
.ms-label { font-size: 11px; color: var(--text-muted); }

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 45%, #f0fdfa 100%); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(22,163,74,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,163,74,0.05) 1px, transparent 1px); background-size: 60px 60px; }
.hero-content { position: relative; z-index: 1; padding-top: 100px; padding-bottom: 80px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.hero-left { min-width: 0; }
.hero-right { min-width: 0; }
.hero-product-logo { margin-bottom: 24px; }
.hero-opseye-logo { height: 44px; width: auto; display: block; }
/* OPSEYE 平台运行时大屏（hero 右侧） */
.hero-platform { width: 100%; background: #0f172a; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 20px 60px rgba(15,23,42,0.18); }
.hp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.06); }
.hp-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #fff }
.hp-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); animation: noc-pulse 2s ease-in-out infinite; }
.hp-status { font-size: 11.5px; color: #4ade80; font-family: 'SF Mono', Menlo, monospace; }
.hp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,0.04); }
.hp-cell { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; padding: 15px 14px; background: #0f172a; transition: background 0.2s }
.hp-cell:hover { background: rgba(22,163,74,0.04); }
.hp-cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hp-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.hp-icon svg { width: 16px; height: 16px; }
.hp-info { flex: 1; min-width: 0 }
.hp-name { font-size: 13px; color: #fff; font-weight: 600; line-height: 1.2 }
.hp-meta { font-size: 10.5px; color: #94a3b8; margin-top: 3px; font-family: 'SF Mono', Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(74,222,128,0.12); }
.hp-dot.is-warn { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.12); }
.hp-signal { display: flex; align-items: center; min-width: 0; padding-left: 42px; font-family: 'SF Mono', Menlo, monospace; font-size: 10px; color: #64748b; }
.hp-signal > span { display: none; }
.hp-signal b { color: #cbd5e1; font-weight: 700; }
.hp-bars { width: min(100%, 112px); height: 14px; display: flex; align-items: flex-end; gap: 3px; }
.hp-bars span { flex: 1; min-width: 3px; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #4ade80, rgba(34,197,94,0.35)); transition: height 0.5s ease; animation: hp-bar-drift 2.8s ease-in-out infinite; }
.hp-bars.is-warn span { background: linear-gradient(180deg, #fbbf24, rgba(245,158,11,0.35)); }
.hp-bars span:nth-child(2) { animation-delay: 0.2s; }
.hp-bars span:nth-child(3) { animation-delay: 0.4s; }
.hp-bars span:nth-child(4) { animation-delay: 0.6s; }
.hp-bars span:nth-child(5) { animation-delay: 0.8s; }
.hp-bars span:nth-child(6) { animation-delay: 1s; }
.hp-data-flash { color: #4ade80 !important; }
.hp-feed { padding: 11px 20px; background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: #cbd5e1; }
.hp-feed-label { font-size: 10px; color: #64748b; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; flex-shrink: 0; }
.hp-feed-text { flex: 1; line-height: 1.4; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: #94a3b8; }
.hp-feed-text strong { color: #4ade80; font-weight: 600; }
.hp-foot { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 14px 0; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.05); }
.hp-foot-item { text-align: center; padding: 0 8px; border-right: 1px solid rgba(255,255,255,0.06); }
.hp-foot-item:last-child { border-right: none }
.hp-foot-num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; font-family: 'SF Mono', Menlo, monospace }
.hp-foot-num.is-ok { color: #4ade80 }
.hp-foot-num.is-warn { color: #fbbf24 }
.hp-foot-label { font-size: 11px; color: #94a3b8; margin-top: 5px; }
@keyframes hp-bar-drift { 0%,100% { transform: scaleY(0.9); opacity: 0.72; } 50% { transform: scaleY(1); opacity: 1; } }

/* ===== 首页新增区块 ===== */
/* 服务体系 1+N+M 预览 */
.home-services { background: linear-gradient(180deg, #f8fafc, #ffffff); padding: 100px 0; }
.svctier-grid { display: grid; grid-template-columns: 1fr 2fr 1.5fr; gap: 24px; margin-top: 48px; }
.svctier-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 32px; transition: all 0.25s; position: relative; overflow: hidden; }
.svctier-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.svctier-card.tier-1::before { background: linear-gradient(90deg, #16a34a, #22d3ee); }
.svctier-card.tier-n::before { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.svctier-card.tier-m::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.svctier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.07); border-color: rgba(22,163,74,0.25); }
.svctier-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.svctier-num { font-size: 28px; font-weight: 800; line-height: 1; }
.tier-1 .svctier-num { color: #16a34a; } .tier-n .svctier-num { color: #3b82f6; } .tier-m .svctier-num { color: #8b5cf6; }
.svctier-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em; }
.tier-1 .svctier-tag { background: rgba(22,163,74,0.1); color: #16a34a; }
.tier-n .svctier-tag { background: rgba(59,130,246,0.1); color: #3b82f6; }
.tier-m .svctier-tag { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.svctier-name { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.svctier-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; }
.svctier-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.svctier-chip { font-size: 12px; padding: 4px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); transition: all 0.15s; }
.svctier-chip:hover { color: var(--text); border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.04); }
.svctier-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
.svctier-flow { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; padding: 18px 24px; background: rgba(22,163,74,0.04); border: 1px solid rgba(22,163,74,0.15); border-radius: 12px; }
.svctier-flow-step { font-size: 13px; font-weight: 600; color: var(--text); }
.svctier-flow-arrow { color: var(--text-light); font-weight: 600; }

/* 客户案例 / 行业覆盖 */
.home-cases { background: #fff; padding: 100px 0; }
.cases-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 28px; background: linear-gradient(90deg, rgba(22,163,74,0.04), rgba(59,130,246,0.04)); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 40px; }
.cases-bar-stat { display: flex; align-items: baseline; gap: 6px; }
.cases-bar-num { font-size: 24px; font-weight: 800; color: var(--accent); font-family: 'SF Mono', Menlo, monospace; }
.cases-bar-label { font-size: 13px; color: var(--text-muted); }
.cases-bar-divider { width: 1px; height: 28px; background: var(--border); }
.industries-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.industry-card { display: flex; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: inherit; transition: all 0.25s; }
.industry-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.07); border-color: rgba(22,163,74,0.25); }
.industry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.industry-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.industry-name { font-size: 17px; font-weight: 700; color: var(--text); }
.industry-tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 3px; background: var(--bg2); color: var(--text-muted); margin-left: auto; letter-spacing: 0.05em; }
.industry-quote { font-size: 13px; color: var(--text); line-height: 1.65; padding: 12px 14px; background: var(--bg2); border-radius: 8px; border-left: 3px solid var(--accent); margin-bottom: 14px; flex: 1; }
.industry-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.industry-stat { text-align: center; }
.industry-stat-num { font-size: 16px; font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.industry-stat-label { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.cases-cta { text-align: center; margin-top: 40px; }

/* 数据成绩 (深色大数字带) */
.home-numbers { background: linear-gradient(135deg, #0f172a 0%, #1a2744 60%, #0f2a1a 100%); padding: 90px 0; position: relative; overflow: hidden; }
.home-numbers::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(74,222,128,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(74,222,128,0.04) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.4; }
.home-numbers .container { position: relative; z-index: 1; }
.home-numbers-head { text-align: center; margin-bottom: 56px; }
.home-numbers-head .section-tag { background: rgba(255,255,255,0.06); color: #94a3b8; border: 1px solid rgba(255,255,255,0.1); }
.home-numbers-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #fff; margin-bottom: 14px; }
.home-numbers-head p { font-size: 15px; color: #94a3b8; max-width: 640px; margin: 0 auto; line-height: 1.7; }
.numbers-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; }
.number-cell { padding: 32px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.2s; }
.number-cell:hover { background: rgba(74,222,128,0.05); }
.number-big { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1; font-family: 'SF Mono', Menlo, monospace; color: #fff; }
.number-big .num-unit { font-size: 0.55em; color: #4ade80; margin-left: 4px; font-weight: 700; }
.number-big.is-accent { background: linear-gradient(135deg, #4ade80, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.number-label { font-size: 13px; color: #94a3b8; margin-top: 12px; line-height: 1.4; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2); border-radius: 100px; font-size: 13px; color: var(--accent); margin-bottom: 28px; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
.hero-title { font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: var(--text); }
.hero-desc { font-size: 18px; color: var(--text-muted); line-height: 1.7; margin-bottom: 40px; max-width: 600px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }
.hero-stats { display: flex; align-items: center; background: rgba(255,255,255,0.8); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 32px; width: fit-content; box-shadow: var(--shadow); }
.stat { text-align: center; padding: 0 28px; }
.stat-num { display: inline; font-size: 28px; font-weight: 700; color: var(--text); }
.stat-unit { font-size: 16px; color: var(--accent); font-weight: 600; }
.stat-label { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-divider { width: 1px; height: 40px; background: var(--border); }
.hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-light); font-size: 12px; }
.scroll-arrow { width: 20px; height: 20px; border-right: 2px solid var(--text-light); border-bottom: 2px solid var(--text-light); transform: rotate(45deg); animation: bounce 1.5s infinite; }
@keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(4px)} }

/* ===== AI SECTION ===== */
.ai-section { background: var(--bg2); }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ai-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.ai-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity 0.3s; }
.ai-card:hover { border-color: rgba(22,163,74,0.35); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ai-card:hover::before { opacity: 1; }
.ai-card-icon { width: 56px; height: 56px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 20px; }
.ai-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.ai-card > p { color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.ai-card-link { font-size: 13px; color: var(--accent); cursor: pointer; display: inline-block; margin-top: 12px; }
.ai-card-link:hover { text-decoration: underline; }
.ai-expand-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.ai-card.expanded .ai-expand-content { max-height: 200px; }
.ai-card-toggle { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 8px 0 0; transition: transform 0.2s; }
.ai-card.expanded .ai-card-toggle { transform: rotate(180deg); }
.ai-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-tag-list span { padding: 4px 12px; background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.15); border-radius: 100px; font-size: 12px; color: var(--accent); }
.demo-terminal { background: #1e293b; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; margin-top: 8px; }
.terminal-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); }
.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.terminal-body { padding: 14px; min-height: 80px; }
.t-line { font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; padding: 3px 0; }
.t-warn { color: #f59e0b; } .t-info { color: #94a3b8; } .t-ok { color: #4ade80; } .t-muted { color: #475569; }
.ai-chat-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.chat-bubble { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 90%; }
.chat-bubble.user { background: rgba(22,163,74,0.1); color: #15803d; align-self: flex-end; border-radius: 10px 10px 2px 10px; }
.chat-bubble.ai { background: rgba(0,0,0,0.04); color: var(--text-muted); border-radius: 10px 10px 10px 2px; }
.noise-demo { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(0,0,0,0.03); border-radius: 8px; margin-top: 8px; font-size: 13px; }
.noise-num { font-size: 24px; font-weight: 700; color: #ef4444; display: block; }
.noise-num.green { color: var(--accent); }
.noise-arrow { color: var(--text-muted); font-size: 12px; }
.runbook-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rb-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.rb-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.rb-done .rb-icon { background: rgba(22,163,74,0.12); color: var(--accent); }
.rb-running .rb-icon { background: rgba(59,130,246,0.12); color: var(--blue); }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ===== PRODUCTS ===== */
.products { background: #ffffff; }
.products-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 4px; width: fit-content; margin: 0 auto 48px; }
.tab-btn { padding: 10px 24px; border-radius: 7px; border: none; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; transition: all 0.2s; }
.tab-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(22,163,74,0.35); }
.product-panel { display: none; }
.product-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.product-badge { display: inline-block; padding: 4px 12px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2); border-radius: 100px; font-size: 12px; color: var(--accent); margin-bottom: 16px; }
.product-info h3 { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.product-info > p { color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.product-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.product-features li { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 15px; }
.product-features li svg { color: var(--accent); flex-shrink: 0; }
.product-actions { display: flex; gap: 12px; }

/* Foundation bar */
.product-foundation { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.06)); border: 1px solid rgba(99,102,241,0.2); border-radius: 12px; margin-bottom: 40px; }
.pf-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(99,102,241,0.12); color: #6366f1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-info { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-name { font-size: 15px; font-weight: 600; color: var(--text); }
.pf-desc { font-size: 13px; color: var(--text-muted); }
.pf-badge { padding: 4px 12px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 100px; font-size: 11px; color: #6366f1; white-space: nowrap; }

/* Product groups */
.product-group { margin-bottom: 36px; }
.pg-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; padding-left: 4px; }
.pg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-cards--2col { grid-template-columns: repeat(2, 1fr); }
.pg-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; transition: all 0.25s; }
.pg-card:hover { border-color: rgba(22,163,74,0.3); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pgc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pgc-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pgc-name { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.pgc-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pgc-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.pgc-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 0; list-style: none; }
.pgc-features li { font-size: 13px; color: var(--text-muted); padding-left: 14px; position: relative; }
.pgc-features li::before { content: '·'; position: absolute; left: 0; color: var(--accent); font-size: 16px; line-height: 1.2; }
.pgc-actions { display: flex; gap: 8px; }

/* AI addons strip */
.product-ai-addons { margin-top: 8px; padding: 20px 24px; background: linear-gradient(135deg, rgba(22,163,74,0.04), rgba(13,148,136,0.04)); border: 1px solid rgba(22,163,74,0.15); border-radius: 12px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.paa-header { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.paa-title { font-size: 14px; font-weight: 600; color: var(--text); }
.paa-desc { font-size: 12px; color: var(--text-muted); }
.paa-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.paa-tag { padding: 5px 14px; background: rgba(0,0,0,0.03); border: 1px solid var(--border); border-radius: 100px; font-size: 12px; color: var(--text-muted); }
.paa-tag--highlight { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); color: var(--accent); font-weight: 500; }

/* mega divider */
.mega-divider { height: 1px; background: var(--border); margin: 10px 0; }
.mega-item--foundation strong { color: #6366f1; }
/* services mega SLA highlight */
.svc-sla-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.svc-sla-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 8px; text-align: center; }
.sla-num { display: block; font-size: 18px; font-weight: 800; color: #4ade80; line-height: 1.2; }
.sla-num small { font-size: 12px; font-weight: 600; }
.sla-label { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }

/* ===== REDESIGNED MEGA MENU ===== */
/* Products mega menu – wider + 2-panel */
.mega-menu--products { min-width: 820px; padding: 0; overflow: hidden; }
.mega-products-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg,rgba(22,163,74,0.03),rgba(99,102,241,0.03));
}
.mph-left { display: flex; align-items: center; gap: 8px; }
.mph-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(99,102,241,0.1); color: #6366f1; display: flex; align-items: center; justify-content: center; }
.mph-title { font-size: 12px; font-weight: 700; color: var(--text); }
.mph-version { font-size: 10px; color: var(--text-muted); background: var(--bg3); border: 1px solid var(--border); padding: 1px 6px; border-radius: 100px; margin-left: 4px; }
.mph-link { font-size: 11px; color: var(--accent); display: flex; align-items: center; gap: 4px; }
.mph-link:hover { text-decoration: underline; }
.mega-products-body { display: grid; grid-template-columns: 1fr 1px 0.85fr; min-height: 0; }
.mega-products-sep { background: var(--border); }
.mega-panel-left { padding: 14px 18px; }
.mega-panel-right { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
/* Layer labels inside mega */
.mega-layer-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.mega-layer-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.layer-collect .mega-layer-dot { background: #3b82f6; }
.layer-collect { color: #2563eb; }
.layer-analyze .mega-layer-dot { background: #f59e0b; }
.layer-analyze { color: #d97706; }
.layer-execute .mega-layer-dot { background: #ef4444; }
.layer-execute { color: #dc2626; }
.layer-knowledge .mega-layer-dot { background: #6366f1; }
.layer-knowledge { color: #4f46e5; }
/* Product 2×2 grid in left panel */
.mega-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.mega-product-card {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 9px;
  transition: background 0.14s, transform 0.14s; cursor: pointer; position: relative;
}
.mega-product-card:hover { background: rgba(22,163,74,0.05); transform: translateX(2px); }
.mega-product-icon {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.mega-product-info { min-width: 0; }
.mega-product-info strong { font-size: 12px; font-weight: 600; color: var(--text); display: block; line-height: 1.3; }
.mega-product-info em { font-size: 10.5px; color: var(--text-muted); font-style: normal; display: block; margin-top: 1px; line-height: 1.4; }
/* Right panel items: EventHub / AutoOps as full cards, others compact */
.mega-p0-card {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--border); transition: all 0.18s; position: relative;
}
.mega-p0-card:hover { border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.02); transform: translateX(2px); }
.mega-p0-icon {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.mega-p0-info strong { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 4px; }
.mega-p0-info em { font-size: 10.5px; color: var(--text-muted); font-style: normal; display: block; margin-top: 2px; line-height: 1.4; }
.mega-compact-row { display: flex; gap: 4px; }
.mega-compact-card {
  flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border-radius: 8px; border: 1px solid var(--border); transition: all 0.15s;
}
.mega-compact-card:hover { border-color: rgba(22,163,74,0.25); background: rgba(22,163,74,0.03); }
.mega-compact-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mega-compact-info strong { font-size: 11.5px; font-weight: 600; color: var(--text); display: block; line-height: 1.2; }
.mega-compact-info em { font-size: 10px; color: var(--text-muted); font-style: normal; display: block; margin-top: 1px; }
/* Foundation bar in right panel */
.mega-foundation-bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.04));
  border: 1px solid rgba(99,102,241,0.2); border-radius: 8px; margin-top: 2px;
}
.mega-foundation-bar .mfb-icon { width: 22px; height: 22px; border-radius: 5px; background: rgba(99,102,241,0.12); color: #6366f1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mega-foundation-bar .mfb-info strong { font-size: 11.5px; font-weight: 600; color: #6366f1; display: block; }
.mega-foundation-bar .mfb-info em { font-size: 10px; color: var(--text-muted); font-style: normal; }
/* Demo CTA inside mega menu */
.mega-demo-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: linear-gradient(135deg,rgba(22,163,74,0.07),rgba(13,148,136,0.05));
  border: 1px solid rgba(22,163,74,0.2); border-radius: 8px; margin-top: 2px;
}
.mega-demo-cta p { font-size: 10.5px; color: var(--text-muted); }
.mega-demo-cta p strong { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 1px; }

/* Service mega menu – 1+N+M structure */
.mega-menu--services { min-width: 780px; padding: 0; overflow: hidden; }
.mega-services-body { display: grid; grid-template-columns: 1fr 1px 0.72fr; min-height: 0; }
.mega-services-sep { background: var(--border); }
.mega-svc-panel { padding: 18px 22px; }
/* 1+N+M tier sections */
.mega-tier { padding: 10px 0; }
.mega-tier + .mega-tier { border-top: 1px solid var(--border); }
.mega-tier-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 8px;
}
.mega-tier-badge {
  padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;
}
.tier-1 .mega-tier-badge { background: rgba(22,163,74,0.12); color: #15803d; }
.tier-1 .mega-tier-desc { color: #15803d; font-size: 10px; }
.tier-n .mega-tier-badge { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.tier-n .mega-tier-desc { color: #2563eb; font-size: 10px; }
.tier-m .mega-tier-badge { background: rgba(139,92,246,0.1); color: #6d28d9; }
.tier-m .mega-tier-desc { color: #6d28d9; font-size: 10px; }
/* MMS base service full-width card */
.mega-mms-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(22,163,74,0.04); border: 1px solid rgba(22,163,74,0.2);
  border-radius: 9px; transition: all 0.15s;
}
.mega-mms-card:hover { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.35); }
.mega-mms-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(22,163,74,0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mega-mms-info strong { font-size: 13px; font-weight: 700; color: var(--text); }
.mega-mms-info em { font-size: 11px; color: var(--text-muted); font-style: normal; display: block; margin-top: 2px; }
.mega-mms-arrow { font-size: 11px; color: var(--accent); margin-left: auto; }
/* N services as compact chips */
.mega-svc-chips { display: flex; flex-direction: column; gap: 3px; }
.mega-svc-chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 8px; transition: background 0.13s;
}
.mega-svc-chip:hover { background: rgba(59,130,246,0.04); }
.mega-svc-chip-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mega-svc-chip-label { display: flex; align-items: baseline; gap: 6px; }
.mega-svc-chip-label strong { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mega-svc-chip-label em { font-size: 11px; color: var(--text-muted); font-style: normal; }
/* M services row */
.mega-m-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.mega-m-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 8px; border-radius: 8px; border: 1px solid var(--border);
  transition: all 0.15s; text-align: center;
}
.mega-m-card:hover { border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.03); }
.mega-m-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(139,92,246,0.1); color: #7c3aed; display: flex; align-items: center; justify-content: center; }
.mega-m-card strong { font-size: 11.5px; font-weight: 600; color: var(--text); display: block; }
.mega-m-card em { font-size: 10px; color: var(--text-muted); font-style: normal; }
/* SLA card in right panel */
.mega-sla-card {
  background: linear-gradient(160deg,#0f172a,#1a2744); border-radius: 12px;
  padding: 18px; height: 100%;
}
.mega-sla-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 5px; background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); margin-bottom: 10px; }
.mega-sla-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mega-sla-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.mega-sla-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mega-sla-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 8px; text-align: center; }
.mega-sla-num { display: block; font-size: 17px; font-weight: 800; color: #4ade80; line-height: 1.2; }
.mega-sla-num small { font-size: 12px; }
.mega-sla-label { display: block; font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.mega-svc-footer { padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px; }

/* Product page cap-card color variants */
.cap-icon--monitor { background: rgba(59,130,246,0.1); color: #3b82f6; }
.cap-icon--npm { background: rgba(6,182,212,0.1); color: #06b6d4; }
.cap-icon--log { background: rgba(16,185,129,0.1); color: #10b981; }
.cap-icon--cmdb { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.cap-icon--eventhub { background: rgba(245,158,11,0.1); color: #f59e0b; }
.cap-icon--autoops { background: rgba(239,68,68,0.1); color: #ef4444; }
.cap-icon--serviceops { background: rgba(236,72,153,0.1); color: #ec4899; }
.cap-icon--knowledge { background: rgba(99,102,241,0.1); color: #6366f1; }
/* Scenario card improvements */
.scenario-card { background: var(--bg2); }
.scenario-card:hover { border-color: rgba(59,130,246,0.25); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
/* pg-card highlight variant */
.pg-card--highlight { border-color: rgba(22,163,74,0.25); background: linear-gradient(135deg,rgba(22,163,74,0.02),rgba(13,148,136,0.02)); }
.pg-card--highlight:hover { border-color: rgba(22,163,74,0.4); }
/* pg-cards--single: full width single card compact */
.pg-cards--single { grid-template-columns: 1fr; }
.pg-cards--single .pgc-features { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 20px; }
.dashboard-mock { background: #1e293b; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 24px; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dash-title { font-size: 14px; font-weight: 600; color: #fff; }
.dash-status.ok { font-size: 12px; color: #4ade80; }
.dash-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.metric-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px; }
.metric-val { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.metric-name { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.metric-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 1s; }
.bar-fill.warn { background: #f59e0b; } .bar-fill.ok { background: #4ade80; }
.dash-chart { height: 80px; } .dash-chart svg { width: 100%; height: 100%; }
.itsm-mock { display: flex; flex-direction: column; gap: 12px; }
.itsm-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; transition: all 0.2s; cursor: pointer; }
.itsm-item:hover { border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.03); }
.itsm-item.urgent { border-color: rgba(239,68,68,0.25); }
.itsm-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(239,68,68,0.1); color: #ef4444; white-space: nowrap; }
.itsm-badge.ok { background: rgba(22,163,74,0.08); color: var(--accent); }
.itsm-badge.done { background: rgba(100,116,139,0.08); color: var(--text-muted); }
.itsm-item span:nth-child(2) { flex: 1; color: var(--text); }
.itsm-ai { font-size: 12px; color: var(--accent); white-space: nowrap; }
.cmdb-mock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cmdb-node { padding: 12px 28px; border-radius: 8px; font-size: 14px; font-weight: 500; border: 1px solid; }
.cmdb-node.server { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.2); color: #15803d; }
.cmdb-node.db { background: rgba(13,148,136,0.08); border-color: rgba(13,148,136,0.2); color: #0d9488; }
.cmdb-node.cache { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #d97706; }
.cmdb-arrow { color: var(--text-light); font-size: 18px; }
.cmdb-stats { display: flex; gap: 20px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }

/* ===== SERVICES ===== */
.services { background: var(--bg2); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.3s; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.service-card:hover { border-color: rgba(22,163,74,0.35); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card--ai { background: linear-gradient(135deg, rgba(22,163,74,0.04), rgba(13,148,136,0.04)); border-color: rgba(22,163,74,0.2); }
.service-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.service-icon.monitor { background: rgba(22,163,74,0.08); color: var(--accent); }
.service-icon.ops { background: rgba(13,148,136,0.08); color: var(--teal); }
.service-icon.security { background: rgba(245,158,11,0.08); color: var(--orange); }
.service-icon.ai { background: rgba(139,92,246,0.08); color: var(--purple); }
.service-card h3 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.service-sub { font-size: 12px; color: var(--accent); margin-bottom: 16px; }
.service-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.service-list li { font-size: 13px; color: var(--text-muted); padding-left: 14px; position: relative; }
.service-list li::before { content: '·'; position: absolute; left: 0; color: var(--accent); }
.service-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.service-card.expanded .service-detail { max-height: 300px; }
.sd-divider { height: 1px; background: var(--border); margin: 12px 0; }
.sd-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sd-list li { font-size: 12px; color: var(--text-muted); padding-left: 14px; position: relative; }
.sd-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-size: 10px; }
.svc-cta { display: inline-flex; }
.service-expand-btn { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 8px 0 0; width: 100%; text-align: left; transition: all 0.2s; }
.service-card.expanded .service-expand-btn { color: var(--text-muted); }
.service-new-badge { position: absolute; top: 16px; right: 16px; padding: 3px 8px; background: linear-gradient(135deg, var(--accent), var(--teal)); border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0.05em; }

/* ===== DEMO SECTION ===== */
.demo-section { background: #ffffff; }
.demo-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.demo-left h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.2; margin: 16px 0; color: var(--text); }
.demo-left > p { color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; }
.demo-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.demo-feat { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--text-muted); transition: all 0.2s; }
.demo-feat.clickable { cursor: pointer; }
.demo-feat.clickable:hover { border-color: var(--accent); color: var(--text); background: rgba(22,163,74,0.04); }
.feat-icon { font-size: 18px; }
.demo-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.demo-screen { background: #1e293b; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.15); }
.screen-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); }
.screen-dots { display: flex; gap: 6px; }
.screen-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.screen-url { font-size: 12px; color: #94a3b8; flex: 1; text-align: center; }
.screen-body { display: flex; height: 280px; }
.screen-sidebar { width: 130px; padding: 12px 8px; border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 4px; }
.ss-item { padding: 8px 10px; border-radius: 6px; font-size: 12px; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
.ss-item.active { background: rgba(22,163,74,0.15); color: #4ade80; }
.ss-item:hover:not(.active) { background: rgba(255,255,255,0.04); color: #e2e8f0; }
.screen-main { flex: 1; padding: 16px; overflow: hidden; }
.sm-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.sm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.sm-card { padding: 10px; border-radius: 8px; text-align: center; border: 1px solid; }
.sm-card.green { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.2); }
.sm-card.blue { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }
.sm-card.purple { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.2); }
.sm-val { font-size: 16px; font-weight: 700; color: #fff; }
.sm-key { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.sm-chart-area { height: 60px; }

/* ===== CASES ===== */
.cases { background: var(--bg2); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }
.case-card { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.3s; cursor: pointer; box-shadow: var(--shadow); }
.case-card:hover { border-color: rgba(22,163,74,0.35); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.case-industry { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.case-card h4 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.case-card > p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.case-metrics { display: flex; gap: 16px; margin-bottom: 12px; }
.case-metrics span { font-size: 13px; color: var(--text-muted); }
.case-metrics strong { color: var(--accent); }
.case-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.case-card.expanded .case-detail { max-height: 300px; }
.cd-divider { height: 1px; background: var(--border); margin: 12px 0; }
.case-detail p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.case-detail strong { color: var(--text); }
.case-expand-btn { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 4px 0; transition: all 0.2s; }
.case-card.expanded .case-expand-btn::after { content: ' ↑'; }
.partners { text-align: center; }
.partners-title { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.partners-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.partners-logos span { padding: 8px 20px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-muted); transition: all 0.2s; cursor: default; }
.partners-logos span:hover { border-color: rgba(22,163,74,0.3); color: var(--text); }

/* ===== CONTACT ===== */
.contact { background: #ffffff; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.contact-left h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.2; margin: 16px 0; color: var(--text); }
.contact-left > p { color: var(--text-muted); line-height: 1.7; margin-bottom: 32px; }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; color: var(--text-muted); font-size: 14px; }
.contact-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.ci-items { display: flex; flex-direction: column; gap: 14px; }
.ci-item { display: flex; align-items: flex-start; gap: 12px; }
.ci-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.18); display: flex; align-items: center; justify-content: center; color: #16a34a; flex-shrink: 0; }
.ci-text { display: flex; flex-direction: column; gap: 2px; }
.ci-text strong { font-size: 13px; font-weight: 600; color: #374151; }
.ci-text span { font-size: 13px; color: #6b7280; }
.contact-form { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row .form-group { margin-bottom: 0; }
.form-group label { font-size: 13px; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea { background: #ffffff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text); font-size: 14px; font-family: inherit; transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,0.08); }
.form-group select { appearance: none; cursor: pointer; }
.form-group textarea { resize: vertical; }

/* ===== FOOTER ===== */
.footer { background: #0f172a; border-top: 1px solid rgba(255,255,255,0.06); padding: 60px 0 32px; }
.footer-top { display: grid; grid-template-columns: 320px 1fr; gap: 60px; margin-bottom: 48px; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-sub { color: #4ade80; background: rgba(74,222,128,0.1); }
.footer-tagline { font-size: 14px; color: #64748b; line-height: 1.7; margin-bottom: 18px; }
.footer-company { padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-company-name { font-size: 13px; font-weight: 600; color: #cbd5e1; margin-bottom: 10px; }
.footer-company-info { display: flex; flex-direction: column; gap: 7px; }
.footer-company-info span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }
.footer-company-info svg { color: #4ade80; flex-shrink: 0; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-col h4 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: #64748b; margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: #4ade80; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12px; color: #475569; }

/* ===== CHAT WIDGET ===== */
.chat-widget { position: fixed; bottom: 28px; right: 28px; z-index: 200; }
.chat-toggle { width: 56px; height: 56px; background: linear-gradient(135deg, #16a34a, #15803d); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; box-shadow: 0 4px 20px rgba(22,163,74,0.45); transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(22,163,74,0.55); }
.chat-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: #ef4444; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }
.chat-window { position: absolute; bottom: 68px; right: 0; width: 400px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); display: none; flex-direction: column; }
.chat-window.open { display: flex; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, rgba(22,163,74,0.08), rgba(13,148,136,0.06)); border-bottom: 1px solid var(--border); }
.chat-avatar { width: 36px; height: 36px; background: rgba(22,163,74,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.chat-name { font-size: 14px; font-weight: 600; color: var(--text); }
.chat-online { font-size: 11px; color: var(--accent); }
.chat-close { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
.chat-messages { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-height: 380px; }
.chat-msg { max-width: 85%; }
.chat-msg.ai { background: rgba(0,0,0,0.04); border-radius: 4px 12px 12px 12px; padding: 12px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.chat-msg.ai p { margin-bottom: 4px; }
.chat-msg.ai p:last-child { margin-bottom: 0; }
.chat-msg.user { background: rgba(22,163,74,0.1); border-radius: 12px 4px 12px 12px; padding: 10px 14px; font-size: 13px; color: #15803d; align-self: flex-end; }
.chat-quick-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-btn { padding: 6px 12px; background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.2); border-radius: 100px; font-size: 12px; color: var(--accent); cursor: pointer; transition: all 0.2s; }
.quick-btn:hover { background: rgba(22,163,74,0.15); }
.chat-input-area { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input-area textarea { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; resize: none; min-height: 36px; max-height: 120px; line-height: 1.5; font-family: inherit; overflow-y: auto; }
.chat-input-area textarea:focus { border-color: var(--accent); }
.chat-input-area button { width: 36px; height: 36px; background: var(--accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ===== DEMO MODAL ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 720px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow-lg); }
.modal--wide { max-width: 800px; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; z-index: 1; }
.modal-header { padding: 28px 32px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.modal-header p { font-size: 13px; color: var(--text-muted); }
.modal-tabs { display: flex; gap: 0; padding: 0 32px; border-bottom: 1px solid var(--border); }
.modal-tab { padding: 14px 20px; background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-body { flex: 1; overflow-y: auto; padding: 28px 32px; }
.modal-panel { display: none; }
.modal-panel.active { display: block; }

/* Demo Dashboard */
.dd-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.dd-card { padding: 16px; border-radius: 10px; text-align: center; border: 1px solid; }
.dd-card.green { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.15); }
.dd-card.blue { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.15); }
.dd-card.purple { background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.15); }
.dd-card.orange { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.15); }
.dd-num { font-size: 22px; font-weight: 700; color: var(--text); }
.dd-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.dd-chart-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dd-live { color: var(--accent); font-size: 11px; }
.dd-chart { background: rgba(0,0,0,0.02); border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.dd-host-list { display: flex; flex-direction: column; gap: 6px; }
.dd-host-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(0,0,0,0.02); }
.dd-host-item.ok .dh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.dd-host-item.warn .dh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.dd-host-item span:nth-child(2) { flex: 1; color: var(--text); }
.dd-host-item span:nth-child(3) { color: var(--text-muted); font-size: 12px; }
.dd-host-item.ok span:last-child { color: var(--accent); font-size: 12px; }
.dd-host-item.warn span:last-child { color: var(--orange); font-size: 12px; }

/* Demo Alerts */
.demo-alerts { display: flex; flex-direction: column; gap: 12px; }
.alert-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 10px; border: 1px solid; }
.alert-item.warn { background: rgba(245,158,11,0.04); border-color: rgba(245,158,11,0.15); }
.alert-item.info { background: rgba(59,130,246,0.04); border-color: rgba(59,130,246,0.15); }
.alert-item.ok { background: rgba(22,163,74,0.04); border-color: rgba(22,163,74,0.15); }
.alert-level { font-size: 12px; white-space: nowrap; padding-top: 2px; }
.alert-item.warn .alert-level { color: var(--orange); }
.alert-item.info .alert-level { color: var(--blue); }
.alert-item.ok .alert-level { color: var(--accent); }
.alert-content { flex: 1; }
.alert-content strong { font-size: 14px; color: var(--text); display: block; margin-bottom: 4px; }
.alert-content p { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.alert-suggest { color: var(--accent) !important; }
.alert-actions { display: flex; align-items: flex-start; }
.alert-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.alert-btn:hover { border-color: var(--accent); color: var(--accent); }
.alert-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Demo Chat */
.demo-chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; max-height: 280px; overflow-y: auto; }
.dc-msg { padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.6; max-width: 85%; }
.dc-msg.ai { background: rgba(0,0,0,0.04); color: var(--text-muted); border-radius: 4px 12px 12px 12px; }
.dc-msg.ai p { margin-bottom: 4px; }
.dc-msg.user { background: rgba(22,163,74,0.1); color: #15803d; align-self: flex-end; border-radius: 12px 4px 12px 12px; }
.dc-input { display: flex; gap: 8px; }
.dc-input input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 13px; outline: none; }
.dc-input input:focus { border-color: var(--accent); }
.dc-input button { padding: 10px 20px; background: var(--accent); border: none; border-radius: 8px; color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dc-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dc-sug { padding: 5px 12px; background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.15); border-radius: 100px; font-size: 12px; color: var(--accent); cursor: pointer; transition: all 0.2s; }
.dc-sug:hover { background: rgba(22,163,74,0.15); }

/* Diagnosis Wizard */
.diag-wizard { min-height: 280px; }
.diag-step { display: none; }
.diag-step.active { display: block; }
.diag-step h4 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.diag-step > p { color: var(--text-muted); margin-bottom: 20px; }
.diag-options { display: flex; flex-direction: column; gap: 10px; }
.diag-opt { background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; text-align: left; color: var(--text); font-size: 14px; cursor: pointer; transition: all 0.2s; }
.diag-opt:hover { border-color: var(--accent); background: rgba(22,163,74,0.05); }
.diag-back { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; margin-top: 16px; padding: 0; }
.diag-back:hover { color: var(--text); }
.diag-result { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.dr-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--text-muted); }
.dr-prob { font-size: 18px; font-weight: 700; color: var(--accent); min-width: 48px; }
.diag-actions { display: flex; gap: 12px; margin-top: 20px; }
.diag-restart { cursor: pointer; }

/* ===== PRODUCT PAGE LAYOUT ===== */
.prod-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f2a1a 100%); padding: 120px 0 80px; }
.prod-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.prod-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); border-radius: 100px; font-size: 13px; color: #93c5fd; margin-bottom: 20px; }
.prod-hero h1 { font-size: 42px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px; }
.prod-hero-desc { font-size: 16px; color: #94a3b8; line-height: 1.75; margin-bottom: 20px; overflow-wrap: anywhere; }
.prod-hero-points { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 9px; }
.prod-hero-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #cbd5e1; line-height: 1.55; }
.phpt-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; margin-top: 7px; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
.prod-hero-actions { display: flex; gap: 12px; }
.prod-hero-visual { background: #1e293b; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; }
.prod-hero-visual.is-live-visual::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 0%, rgba(74,222,128,0.045) 44%, transparent 58%); transform: translateX(-120%); animation: phv-panel-scan 7s linear infinite; }
.prod-hero-visual.is-live-visual > * { position: relative; z-index: 1; }
.phv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.phv-title { font-size: 14px; font-weight: 600; color: #fff; }
.phv-live { font-size: 12px; color: #4ade80; animation: phv-live-breathe 1.8s ease-in-out infinite; }
.phv-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 20px; }
.phv-metric { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px; transition: border-color 0.35s, background 0.35s, transform 0.35s; }
.phv-metric.is-active { background: rgba(74,222,128,0.065); border-color: rgba(74,222,128,0.2); transform: translateY(-1px); }
.phv-val { font-size: 22px; font-weight: 700; color: #fff; transition: color 0.25s, text-shadow 0.25s; }
.phv-val--ok { color: #4ade80; }
.phv-val--warn { color: #f59e0b; }
.phv-val--danger { color: #ef4444; }
.phv-data-flash { color: #4ade80 !important; text-shadow: 0 0 16px rgba(74,222,128,0.32); }
.phv-key { font-size: 11px; color: #64748b; margin-top: 4px; }
.phv-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.phv-bar-fill { height: 100%; border-radius: 2px; position: relative; overflow: hidden; transition: width 0.7s ease; }
.phv-bar-fill::after,
.npm-detail-bar-fill::after,
.svcops-sla-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); transform: translateX(-120%); animation: phv-bar-scan 2.4s linear infinite; }
.phv-live-map { min-height: 166px; background: rgba(2,6,23,0.34); border: 1px solid rgba(148,163,184,0.12); border-radius: 12px; position: relative; overflow: hidden; }
.phv-live-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.055) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6; }
.phv-link-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.phv-link-svg line { stroke: rgba(6,182,212,0.45); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 10 8; animation: phv-line-flow 3.4s linear infinite; }
.phv-link-svg .phv-link--warn { stroke: rgba(245,158,11,0.72); stroke-width: 2; animation-duration: 1.9s; }
.phv-map-node { position: absolute; z-index: 2; min-width: 62px; padding: 6px 8px; background: rgba(15,23,42,0.86); border: 1px solid rgba(6,182,212,0.28); border-radius: 8px; text-align: center; transform: translateX(-50%); box-shadow: 0 8px 22px rgba(0,0,0,0.2); transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s; }
.phv-map-node span { display: block; font-size: 9px; color: #67e8f9; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; }
.phv-map-node strong { display: block; margin-top: 3px; font-size: 10.5px; color: #e2e8f0; line-height: 1.2; white-space: nowrap; }
.phv-map-node small { display: block; margin-top: 3px; font-size: 9px; color: #94a3b8; line-height: 1.1; }
.phv-map-node--core { top: 10px; left: 50%; }
.phv-map-node--left { top: 64px; left: 25%; }
.phv-map-node--right { top: 64px; left: 75%; }
.phv-map-node--edge-a { top: 104px; left: 12%; }
.phv-map-node--edge-b { top: 104px; left: 38%; }
.phv-map-node--edge-c { top: 104px; left: 62%; }
.phv-map-node--edge-d { top: 104px; left: 88%; }
.phv-map-node--warn { border-color: rgba(245,158,11,0.62); box-shadow: 0 0 0 3px rgba(245,158,11,0.12), 0 8px 22px rgba(0,0,0,0.22); }
.phv-log-stream { display: flex; flex-direction: column; gap: 8px; background: rgba(2,6,23,0.34); border: 1px solid rgba(16,185,129,0.16); border-radius: 12px; padding: 12px; overflow: hidden; }
.phv-log-row { display: grid; grid-template-columns: 54px 1fr 58px; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.055); border-radius: 8px; font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: #cbd5e1; transition: border-color 0.35s, background 0.35s, transform 0.35s; }
.phv-log-row span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phv-log-row time { color: #64748b; text-align: right; }
.phv-log-level { font-size: 9px; font-weight: 800; text-align: center; border-radius: 4px; padding: 2px 5px; }
.phv-log-level--error { color: #fecaca; background: rgba(239,68,68,0.2); }
.phv-log-level--warn { color: #fde68a; background: rgba(245,158,11,0.18); }
.phv-log-level--info { color: #bae6fd; background: rgba(14,165,233,0.18); }
.phv-log-level--ok { color: #bbf7d0; background: rgba(34,197,94,0.18); }
.phv-ai-cards { display: flex; flex-direction: column; gap: 9px; }
.phv-reco-card { display: grid; grid-template-columns: 48px 1fr; gap: 3px 10px; padding: 11px 12px; background: rgba(99,102,241,0.07); border: 1px solid rgba(99,102,241,0.2); border-radius: 10px; transition: border-color 0.35s, background 0.35s, transform 0.35s; }
.phv-reco-card span { grid-row: span 2; align-self: center; font-size: 10px; color: #c4b5fd; background: rgba(99,102,241,0.18); border-radius: 5px; padding: 4px 6px; text-align: center; font-weight: 700; }
.phv-reco-card strong { min-width: 0; font-size: 12px; color: #e2e8f0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phv-reco-card small { font-size: 10px; color: #94a3b8; }
.phv-live-row.is-active:not(.phv-map-node),
.phv-reco-card.is-active,
.phv-log-row.is-active { background: rgba(74,222,128,0.075); border-color: rgba(74,222,128,0.24); transform: translateX(2px); }
.phv-map-node.is-active { background: rgba(74,222,128,0.075); border-color: rgba(74,222,128,0.24); transform: translateX(-50%) translateY(-1px); }
.prod-hero-visual .phv-dynamic-svg line,
.prod-hero-visual .phv-dynamic-svg path[fill="none"] { stroke-dasharray: 10 8; animation: phv-line-flow 3.4s linear infinite; }
@keyframes phv-panel-scan { to { transform: translateX(120%); } }
@keyframes phv-live-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes phv-bar-scan { to { transform: translateX(120%); } }
@keyframes phv-line-flow { to { stroke-dashoffset: -36; } }
.mon-hero-chart { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px; position: relative; overflow: hidden; }
.mon-hero-chart::before { content: ''; position: absolute; top: 36px; bottom: 12px; left: var(--mon-scan-x, 74%); width: 1px; background: linear-gradient(180deg, transparent, rgba(96,165,250,0.8), transparent); box-shadow: 0 0 16px rgba(59,130,246,0.5); animation: mon-scan-line 3.6s ease-in-out infinite; }
.mon-hero-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mon-hero-chart-head span { font-size: 11px; color: #64748b; }
.mon-hero-chart-head strong { font-size: 11px; color: #93c5fd; font-family: 'SF Mono', Menlo, monospace; font-weight: 700; }
.mon-hero-chart svg { display: block; overflow: visible; }
.mon-hero-chart-area,
.mon-hero-chart-line { transition: d 0.65s ease, opacity 0.25s; }
.mon-hero-chart-line { stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(59,130,246,0.42)); stroke-dasharray: none; animation: none; }
.prod-hero-visual .mon-hero-chart .mon-hero-chart-line { stroke-dasharray: none; animation: none; }
.mon-hero-chart-dot { fill: #60a5fa; stroke: rgba(15,23,42,0.92); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(96,165,250,0.7)); transition: cx 0.65s ease, cy 0.65s ease; animation: mon-dot-pulse 1.8s ease-in-out infinite; }
@keyframes mon-scan-line { 0% { left: 8%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 92%; opacity: 0; } }
@keyframes mon-chart-draw { 0% { stroke-dashoffset: 360; opacity: 0.65; } 42%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mon-dot-pulse { 0%, 100% { r: 3.5px; } 50% { r: 5px; } }
.log-hero-search { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.log-hero-search span { min-width: 0; font-size: 11px; color: #64748b; font-family: 'SF Mono', Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-hero-stream { height: 128px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; font-family: 'SF Mono', Menlo, Consolas, monospace; display: flex; flex-direction: column; gap: 5px; overflow: hidden; scroll-behavior: smooth; position: relative; }
.log-hero-stream::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16,185,129,0.1), transparent 24%, transparent 74%, rgba(2,6,23,0.32)); z-index: 2; }
.log-hero-row { display: grid; grid-template-columns: 56px 46px minmax(0,1fr); align-items: baseline; gap: 8px; min-height: 24px; margin: 0 -4px; padding: 2px 4px; border: 1px solid transparent; border-radius: 5px; font-size: 10px; transition: opacity 0.55s ease, transform 0.55s ease, background 0.65s ease, border-color 0.65s ease, box-shadow 0.65s ease; }
.log-hero-row.is-entering { animation: log-row-in 0.68s cubic-bezier(0.22, 1, 0.36, 1) both; }
.log-hero-row.is-highlight { background: rgba(16,185,129,0.055); border-color: rgba(16,185,129,0.12); box-shadow: inset 0 0 18px rgba(16,185,129,0.05); }
.log-hero-time { color: #475569; white-space: nowrap; }
.log-hero-level { justify-self: start; padding: 0 5px; border-radius: 3px; font-size: 9px; font-weight: 700; line-height: 1.55; }
.log-hero-message { min-width: 0; color: #94a3b8; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.log-hero-row--error .log-hero-level { background: rgba(239,68,68,0.2); color: #ef4444; }
.log-hero-row--error .log-hero-message { color: #e2e8f0; }
.log-hero-row--warn .log-hero-level { background: rgba(245,158,11,0.15); color: #f59e0b; }
.log-hero-row--info .log-hero-level { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-hero-row--ok .log-hero-level { background: rgba(16,185,129,0.16); color: #34d399; }
@keyframes log-row-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94a3b8; margin-bottom: 24px; }
.breadcrumb a { color: #94a3b8; text-decoration: none; }
.breadcrumb a:hover { color: #e2e8f0; }
.breadcrumb span { color: #64748b; }
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.cap-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px; transition: all 0.25s; }
.cap-card:hover { border-color: rgba(59,130,246,0.3); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.cap-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(59,130,246,0.1); color: #3b82f6; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cap-card h4 { font-size: 16px; font-weight: 600; color: #0f172a; margin-bottom: 8px; }
.cap-card p { font-size: 14px; color: #64748b; line-height: 1.6; }
.scenario-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.scenario-card { border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px; background: #fff; }
.scenario-num { font-size: 36px; font-weight: 800; color: rgba(59,130,246,0.15); margin-bottom: 12px; }
.scenario-card h4 { font-size: 16px; font-weight: 600; color: #0f172a; margin-bottom: 8px; }
.scenario-card p { font-size: 14px; color: #64748b; line-height: 1.6; }
.prod-stats { background: linear-gradient(135deg, #1e293b, #0f172a); padding: 80px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center; }
.stat-item .stat-num { font-size: 42px; font-weight: 800; color: #3b82f6; }
.stat-item .stat-unit { font-size: 20px; font-weight: 700; color: #3b82f6; }
.stat-item .stat-label { font-size: 14px; color: #94a3b8; margin-top: 8px; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.related-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 14px; text-decoration: none; transition: all 0.2s; }
.related-card:hover { border-color: rgba(22,163,74,0.3); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.related-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.related-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.related-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.prod-cta { background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(13,148,136,0.06)); border-top: 1px solid rgba(22,163,74,0.1); padding: 80px 0; text-align: center; }
.prod-cta h2 { font-size: 32px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.prod-cta p { font-size: 16px; color: #64748b; margin-bottom: 32px; }
.prod-cta-actions { display: flex; gap: 16px; justify-content: center; }

/* ===== SERVICES PAGE LAYOUT ===== */
.page-hero{background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f2a1a 100%);padding:120px 0 80px;text-align:center}
.page-hero h1{font-size:48px;font-weight:800;color:#fff;margin-bottom:16px}
.page-hero p{font-size:18px;color:#94a3b8;max-width:600px;margin:0 auto 32px}
.page-hero-actions{display:flex;gap:12px;justify-content:center}
.framework-section{background:#0f172a;padding:80px 0}
.framework-diagram{display:grid;gap:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.fw-layer{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid rgba(255,255,255,0.06)}
.fw-layer:last-child{border-bottom:none}
.fw-layer-label{padding:24px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-right:1px solid rgba(255,255,255,0.06)}
.fw-layer-label .layer-tag{font-size:11px;font-weight:700;letter-spacing:0.05em;padding:3px 8px;border-radius:4px}
.fw-layer-label .layer-name{font-size:12px;color:#64748b;text-align:center}
.fw-layer-m .fw-layer-label{background:rgba(139,92,246,0.06)}
.fw-layer-m .layer-tag{background:rgba(139,92,246,0.15);color:#a78bfa}
.fw-layer-n .fw-layer-label{background:rgba(59,130,246,0.06)}
.fw-layer-n .layer-tag{background:rgba(59,130,246,0.15);color:#60a5fa}
.fw-layer-1 .fw-layer-label{background:rgba(22,163,74,0.06)}
.fw-layer-1 .layer-tag{background:rgba(22,163,74,0.15);color:#4ade80}
.fw-services{display:flex;flex-wrap:wrap;gap:12px;padding:20px 24px;align-items:center}
.fw-svc-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:transform 0.15s}
.fw-svc-tag:hover{transform:translateY(-2px)}
.fw-svc-tag a{color:inherit;text-decoration:none}
.fw-m-tag{background:rgba(139,92,246,0.12);color:#c4b5fd;border:1px solid rgba(139,92,246,0.2)}
.fw-n-tag{background:rgba(59,130,246,0.1);color:#93c5fd;border:1px solid rgba(59,130,246,0.15)}
.fw-1-tag{background:rgba(22,163,74,0.12);color:#86efac;border:1px solid rgba(22,163,74,0.2);font-size:15px}
.fw-note{font-size:11px;color:#475569;font-weight:400;margin-left:4px}
.svc-section{padding:80px 0}
.svc-section:nth-child(odd){background:#f8fafc}
.svc-section:nth-child(even){background:#fff}
.svc-section-header{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.svc-layer-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px}
.badge-1{background:rgba(22,163,74,0.12);color:#16a34a}
.badge-n{background:rgba(59,130,246,0.1);color:#2563eb}
.badge-m{background:rgba(139,92,246,0.1);color:#7c3aed}
.svc-section-header h2{font-size:28px;font-weight:800;color:#0f172a;margin:0}
.svc-section-header p{font-size:14px;color:#64748b;margin:0}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.svc-grid--1col{grid-template-columns:1fr}
.svc-grid--3col{grid-template-columns:repeat(3,1fr)}
.svc-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:32px;transition:all 0.25s}
.svc-section:nth-child(even) .svc-card{background:#f8fafc}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.svc-card-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.svc-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-code{font-size:11px;font-weight:700;letter-spacing:0.1em;padding:2px 8px;border-radius:4px;margin-top:4px;display:inline-block}
.svc-card h3{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 4px}
.svc-card p{font-size:14px;color:#64748b;line-height:1.7;margin-bottom:16px}
.svc-features{list-style:none;padding:0;margin:0}
.svc-features li{font-size:13px;color:#475569;padding:5px 0;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px}
.svc-features li:last-child{border-bottom:none}
.svc-features li::before{content:"✓";color:#16a34a;font-weight:700;flex-shrink:0}
.pricing-section{background:linear-gradient(135deg,#0f172a,#1e293b);padding:80px 0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.pricing-card{border-radius:16px;padding:36px;border:1px solid rgba(255,255,255,0.08);transition:transform 0.2s}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-starter{background:rgba(255,255,255,0.03)}
.pricing-standard{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.25)}
.pricing-premium{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.25)}
.pricing-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;display:inline-block;margin-bottom:16px}
.badge-starter{background:rgba(100,116,139,0.2);color:#94a3b8}
.badge-standard{background:rgba(59,130,246,0.2);color:#60a5fa}
.badge-premium{background:rgba(139,92,246,0.2);color:#a78bfa}
.pricing-name{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.pricing-price{font-size:36px;font-weight:800;color:#fff;margin-bottom:4px}
.pricing-price small{font-size:14px;color:#64748b;font-weight:400}
.pricing-desc{font-size:13px;color:#64748b;margin-bottom:24px;line-height:1.6}
.pricing-includes{list-style:none;padding:0;margin:0 0 24px}
.pricing-includes li{font-size:13px;color:#94a3b8;padding:6px 0;display:flex;gap:8px;border-bottom:1px solid rgba(255,255,255,0.05)}
.pricing-includes li:last-child{border-bottom:none}
.pricing-includes li::before{content:"✓";color:#4ade80;flex-shrink:0}
.pricing-cta{display:block;text-align:center;padding:10px;border-radius:8px;font-size:14px;font-weight:600;transition:all 0.2s;text-decoration:none}
.pricing-cta-outline{border:1px solid rgba(255,255,255,0.15);color:#e2e8f0}
.pricing-cta-outline:hover{background:rgba(255,255,255,0.05)}
.pricing-cta-primary{background:#3b82f6;color:#fff}
.pricing-cta-primary:hover{background:#2563eb}
.pricing-cta-premium{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.pricing-cta-premium:hover{opacity:0.9}
.delivery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.delivery-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;text-align:center}
.delivery-icon{font-size:40px;margin-bottom:16px}
.delivery-card h4{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:8px}
.delivery-card p{font-size:14px;color:#64748b;line-height:1.6}
.cta-section{background:linear-gradient(135deg,rgba(22,163,74,0.06),rgba(13,148,136,0.06));border-top:1px solid rgba(22,163,74,0.1);padding:80px 0;text-align:center}
.cta-section h2{font-size:36px;font-weight:700;color:#0f172a;margin-bottom:12px}
.cta-section p{font-size:16px;color:#64748b;margin-bottom:32px}
.cta-actions{display:flex;gap:16px;justify-content:center}
/* 9 服务总览卡片网格（list 页用） */
.svc-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-overview-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;text-decoration:none;color:inherit;transition:all 0.2s;position:relative}
.svc-overview-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,0.08);border-color:rgba(22,163,74,0.25)}
.svc-ov-1{border-top:3px solid #16a34a}
.svc-ov-n{border-top:3px solid #3b82f6}
.svc-ov-m{border-top:3px solid #8b5cf6}
.svc-ov-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.svc-ov-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.svc-ov-tier{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:0.05em}
.svc-overview-card h4{font-size:17px;font-weight:700;color:#0f172a;margin:0 0 4px}
.svc-ov-en{font-size:11px;font-weight:500;color:#94a3b8;letter-spacing:0.04em;margin-bottom:12px}
.svc-overview-card p{font-size:13px;color:#475569;line-height:1.65;margin:0 0 16px;flex:1}
.svc-ov-arrow{font-size:13px;color:#16a34a;font-weight:600;margin-top:auto}
.svc-overview-card:hover .svc-ov-arrow{color:#0d9488}

/* ===== SERVICE: MMS (1 底座) — 24h 值守剧本骨架 ===== */
.mms-day-section{background:#fff;padding:100px 0}
.mms-day-board{margin-top:48px}
.mms-day-clock{background:#0f172a;border-radius:18px;padding:32px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 40px rgba(0,0,0,0.18)}
.mms-day-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.08)}
.mms-day-title{font-size:18px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
.mms-day-now{font-size:11px;color:#4ade80;display:flex;align-items:center;gap:6px;font-family:'SF Mono',Menlo,monospace}
.mms-day-now::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,0.2)}
.mms-shifts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mms-shift{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.mms-shift--now{background:linear-gradient(180deg,rgba(59,130,246,0.12),rgba(59,130,246,0.04));border-color:rgba(59,130,246,0.4)}
.mms-shift-time{font-size:11px;color:#64748b;font-family:'SF Mono',Menlo,monospace;letter-spacing:0.04em;font-weight:700}
.mms-shift--now .mms-shift-time{color:#60a5fa}
.mms-shift-name{font-size:15px;font-weight:700;color:#fff;margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mms-shift-now-tag{font-size:9px;color:#60a5fa;background:rgba(59,130,246,0.18);padding:1px 6px;border-radius:3px;letter-spacing:0.04em;font-weight:700}
.mms-shift-team{font-size:11px;color:#94a3b8;margin-top:8px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,0.06)}
.mms-shift-actions{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
.mms-shift-actions li{font-size:11.5px;color:#cbd5e1;line-height:1.5;padding-left:14px;position:relative}
.mms-shift-actions li::before{content:"›";position:absolute;left:0;top:-1px;color:#3b82f6;font-weight:700}
.mms-shift-kpi{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.05);display:flex;justify-content:space-between;font-size:10px}
.mms-shift-kpi-label{color:#64748b}
.mms-shift-kpi-val{color:#4ade80;font-weight:700;font-family:'SF Mono',Menlo,monospace}
/* 服务包内容菜单 */
.mms-deliverables-section{background:#f8fafc;padding:100px 0}
.mms-deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.mms-deliverable{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;transition:all 0.2s}
.mms-deliverable:hover{border-color:rgba(59,130,246,0.3);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.05)}
.mms-deliverable-check{width:28px;height:28px;border-radius:8px;background:rgba(59,130,246,0.1);color:#3b82f6;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:14px}
.mms-deliverable-body{flex:1;min-width:0}
.mms-deliverable-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:4px}
.mms-deliverable-desc{font-size:13px;color:#64748b;line-height:1.65}
/* 接入流程 4 步 */
.mms-onboard-section{background:#fff;padding:100px 0}
.mms-onboard{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px}
.mms-onboard::before{content:"";position:absolute;top:30px;left:60px;right:60px;height:2px;background:linear-gradient(90deg,#3b82f6,#06b6d4,#10b981);z-index:0}
.mms-onboard-step{position:relative;text-align:center;padding:0 16px;z-index:1}
.mms-onboard-bubble{width:60px;height:60px;border-radius:50%;background:#fff;border:3px solid #3b82f6;display:flex;align-items:center;justify-content:center;font-weight:800;color:#3b82f6;font-size:18px;margin:0 auto 16px;box-shadow:0 0 0 6px #fff}
.mms-onboard-day{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#3b82f6;margin-bottom:8px;font-family:'SF Mono',Menlo,monospace}
.mms-onboard-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:8px}
.mms-onboard-desc{font-size:12.5px;color:#64748b;line-height:1.65}
/* 客户画像 */
.mms-fit-section{background:#f8fafc;padding:100px 0}
.mms-fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.mms-fit-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;border-left:4px solid #3b82f6;transition:all 0.2s}
.mms-fit-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,0.06)}
.mms-fit-card h4{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:14px}
.mms-fit-quote{font-size:13px;color:#0f172a;line-height:1.65;background:rgba(59,130,246,0.05);padding:14px 16px 14px 32px;border-radius:8px;margin-bottom:14px;position:relative}
.mms-fit-quote::before{content:"\201C";color:#3b82f6;font-size:32px;font-weight:700;position:absolute;left:10px;top:6px;line-height:1;font-family:Georgia,serif}
.mms-fit-card p{font-size:13px;color:#64748b;line-height:1.65;margin:0}
/* MMS Hero — 实时 NOC 运营面板（替代标准 phv-metrics）—— 跟 DMS 等服务的右侧面板尺寸保持一致 */
.mms-noc{background:#0f172a;border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;font-family:inherit;box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.mms-noc-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:rgba(0,0,0,0.3);border-bottom:1px solid rgba(255,255,255,0.06)}
.mms-noc-brand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#fff}
.mms-noc-brand-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,0.18);animation:noc-pulse 2s ease-in-out infinite}
@keyframes noc-pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,0.18)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0.04)}}
.mms-noc-clock{font-size:12px;color:#94a3b8;font-family:'SF Mono',Menlo,monospace;letter-spacing:0.04em}
.mms-noc-clock strong{color:#60a5fa;font-weight:600;font-size:13px}
.mms-noc-shift{padding:12px 16px;background:linear-gradient(180deg,rgba(59,130,246,0.1),transparent);border-bottom:1px solid rgba(255,255,255,0.05)}
.mms-noc-shift-label{font-size:10px;color:#64748b;letter-spacing:0.08em;text-transform:uppercase;font-weight:700}
.mms-noc-shift-name{font-size:14px;color:#fff;font-weight:700;margin:4px 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mms-noc-shift-tag{font-size:9px;font-weight:700;color:#60a5fa;background:rgba(59,130,246,0.2);padding:2px 7px;border-radius:3px;letter-spacing:0.06em}
.mms-noc-team{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mms-noc-avatar{width:24px;height:24px;border-radius:50%;border:2px solid #0f172a;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.mms-noc-avatar:nth-child(1){background:#3b82f6}
.mms-noc-avatar:nth-child(2){background:#06b6d4;margin-left:-8px}
.mms-noc-avatar:nth-child(3){background:#8b5cf6;margin-left:-8px}
.mms-noc-team-text{font-size:11px;color:#94a3b8;margin-left:5px}
.mms-noc-feed{padding:12px 16px;display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,0.18)}
.mms-noc-feed-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#64748b;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;margin-bottom:2px}
.mms-noc-feed-live{color:#4ade80;display:flex;align-items:center;gap:5px}
.mms-noc-feed-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#4ade80;animation:noc-pulse 1.4s ease-in-out infinite}
.mms-noc-event{display:flex;align-items:center;gap:10px;padding:7px 11px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:7px;font-size:11.5px}
.mms-noc-event--active{border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.06)}
.mms-noc-event--done{opacity:0.75}
.mms-noc-time{font-family:'SF Mono',Menlo,monospace;font-size:10px;color:#64748b;font-weight:600;flex-shrink:0;min-width:38px}
.mms-noc-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700}
.mms-noc-event--active .mms-noc-icon{background:rgba(245,158,11,0.22);color:#fbbf24}
.mms-noc-event--done .mms-noc-icon{background:rgba(74,222,128,0.18);color:#4ade80}
.mms-noc-text{color:#cbd5e1;flex:1;line-height:1.4}
.mms-noc-event--active .mms-noc-text{color:#fed7aa}
.mms-noc-text strong{color:#fff;font-weight:600}
.mms-noc-handler{font-size:10px;color:#94a3b8;flex-shrink:0;font-family:'SF Mono',Menlo,monospace}
.mms-noc-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:11px 0;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.05)}
.mms-noc-stat{text-align:center;padding:0 6px;border-right:1px solid rgba(255,255,255,0.06)}
.mms-noc-stat:last-child{border-right:none}
.mms-noc-stat-num{font-size:18px;font-weight:800;color:#fff;line-height:1;font-family:'SF Mono',Menlo,monospace}
.mms-noc-stat-num.is-warn{color:#fbbf24}
.mms-noc-stat-num.is-ok{color:#4ade80}
.mms-noc-stat-label{font-size:10px;color:#94a3b8;margin-top:5px;letter-spacing:0.04em}

/* ===== CMS · 多云控制台 hero panel + 成本对比 signature ===== */
.cms-cloud{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#0a1322 0%,#0f1a2e 100%);border:1px solid rgba(16,185,129,0.18);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif;position:relative}
.cms-cloud-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(16,185,129,0.08);border-bottom:1px solid rgba(16,185,129,0.15);font-size:11px}
.cms-cloud-brand{display:flex;align-items:center;gap:7px;color:#d1fae5;font-weight:600}
.cms-cloud-brand-dot{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,0.18);animation:noc-pulse 1.4s ease-in-out infinite}
.cms-cloud-status{font-size:10px;color:#10b981;letter-spacing:0.06em}
.cms-cloud-save{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,0.04)}
.cms-cloud-save-label{font-size:10px;color:#64748b;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px}
.cms-cloud-save-row{display:flex;align-items:baseline;gap:10px}
.cms-cloud-save-num{font-size:26px;font-weight:800;color:#10b981;line-height:1;font-family:'SF Mono',Menlo,monospace}
.cms-cloud-save-trend{font-size:11px;color:#4ade80;background:rgba(74,222,128,0.12);padding:2px 8px;border-radius:4px;font-weight:600}
.cms-cloud-list{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px 14px;overflow-y:auto}
.cms-cloud-row{display:flex;align-items:center;gap:9px;padding:7px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:7px;font-size:11px}
.cms-cloud-chip{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.cms-cloud-chip--ali{background:#ff6a00}
.cms-cloud-chip--tx{background:#0052d9}
.cms-cloud-chip--hw{background:#c7000b}
.cms-cloud-name{color:#e2e8f0;flex:1;font-weight:500}
.cms-cloud-inst{color:#94a3b8;font-size:10px;font-family:'SF Mono',Menlo,monospace}
.cms-cloud-cost{color:#cbd5e1;font-size:11px;font-family:'SF Mono',Menlo,monospace;min-width:54px;text-align:right}
.cms-cloud-delta{font-size:10px;color:#4ade80;background:rgba(74,222,128,0.12);padding:1px 6px;border-radius:3px;font-weight:700;font-family:'SF Mono',Menlo,monospace}
.cms-cloud-foot{display:flex;justify-content:space-around;padding:9px 12px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06);gap:6px}
.cms-cloud-foot-item{text-align:center;flex:1;padding:0 4px}
.cms-cloud-foot-num{font-size:13px;font-weight:700;color:#10b981;font-family:'SF Mono',Menlo,monospace;line-height:1.1}
.cms-cloud-foot-label{font-size:9px;color:#64748b;margin-top:3px;letter-spacing:0.04em}
.cms-compare{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch;background:#fff;border-radius:14px;border:1px solid #e2e8f0;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,0.06);margin-top:40px}
.cms-compare-col{padding:28px}
.cms-compare-col--before{background:#f8fafc}
.cms-compare-col--after{background:linear-gradient(180deg,#ecfdf5,#fff)}
.cms-compare-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#0f172a;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #e2e8f0}
.cms-compare-tag{font-size:10px;font-weight:800;letter-spacing:0.08em;padding:2px 8px;border-radius:4px}
.cms-compare-col--before .cms-compare-tag{background:#fef2f2;color:#dc2626}
.cms-compare-col--after .cms-compare-tag{background:#dcfce7;color:#16a34a}
.cms-compare-row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px dashed #e5e7eb}
.cms-compare-row:last-child{border-bottom:none}
.cms-compare-key{font-size:13px;color:#475569}
.cms-compare-val{font-size:18px;font-weight:800;font-family:'SF Mono',Menlo,monospace;color:#0f172a}
.cms-compare-col--before .cms-compare-val{color:#64748b}
.cms-compare-col--after .cms-compare-val{color:#16a34a}
.cms-compare-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#10b981;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0}
.cms-compare-arrow-icon{font-size:28px;font-weight:800;line-height:1;color:#10b981}
.cms-compare-arrow-label{font-size:11px;color:#16a34a;margin-top:6px;font-weight:700}
.cms-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.cms-story{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;position:relative;overflow:hidden}
.cms-story::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#10b981,#4ade80)}
.cms-story-tag{font-size:10px;font-weight:700;color:#10b981;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px}
.cms-story-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:8px;line-height:1.4}
.cms-story-desc{font-size:13px;color:#64748b;line-height:1.6;margin-bottom:12px}
.cms-story-save{display:flex;align-items:baseline;gap:6px;padding-top:12px;border-top:1px solid #f1f5f9}
.cms-story-save-num{font-size:22px;font-weight:800;color:#10b981;font-family:'SF Mono',Menlo,monospace}
.cms-story-save-label{font-size:11px;color:#94a3b8}

/* ===== DMS · DBA 战情室 hero panel + 慢SQL 治理时间轴 ===== */
.dms-war{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#0a1322 0%,#1a1408 100%);border:1px solid rgba(245,158,11,0.18);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.dms-war-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(245,158,11,0.08);border-bottom:1px solid rgba(245,158,11,0.18);font-size:11px}
.dms-war-brand{display:flex;align-items:center;gap:7px;color:#fed7aa;font-weight:600}
.dms-war-brand-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.2);animation:noc-pulse 1.4s ease-in-out infinite}
.dms-war-status{font-size:10px;color:#22c55e}
.dms-war-team{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04)}
.dms-war-team-label{font-size:10px;color:#64748b;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:7px}
.dms-war-team-list{display:flex;gap:6px;flex-wrap:wrap}
.dms-war-dba{display:flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.18);border-radius:14px;font-size:10.5px}
.dms-war-dba-avatar{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#dc2626);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.dms-war-dba-name{color:#fed7aa;font-weight:600}
.dms-war-dba-cert{color:#94a3b8;font-size:9px;font-family:'SF Mono',Menlo,monospace}
.dms-war-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:10px 14px;overflow:hidden}
.dms-war-db{display:flex;align-items:center;gap:6px;padding:5px 7px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:10px}
.dms-war-db-icon{width:14px;height:14px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff}
.dms-war-db-name{color:#e2e8f0;font-weight:600;font-size:10.5px}
.dms-war-db-meta{color:#64748b;font-size:9px;margin-left:auto;font-family:'SF Mono',Menlo,monospace}
.dms-war-foot{display:flex;justify-content:space-around;padding:9px 12px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06)}
.dms-war-foot-item{text-align:center;flex:1}
.dms-war-foot-num{font-size:14px;font-weight:800;color:#fbbf24;font-family:'SF Mono',Menlo,monospace;line-height:1.1}
.dms-war-foot-label{font-size:9px;color:#64748b;margin-top:3px}
.dms-tline{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:32px;margin-top:40px;box-shadow:0 8px 28px rgba(15,23,42,0.06)}
.dms-tline-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #f1f5f9;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.dms-tline-title{font-size:16px;font-weight:700;color:#0f172a}
.dms-tline-tag{font-size:11px;font-weight:700;color:#f59e0b;background:#fef3c7;padding:4px 10px;border-radius:4px}
.dms-tline-list{display:flex;flex-direction:column;gap:0;position:relative;padding-left:8px}
.dms-tline-list::before{content:'';position:absolute;left:74px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,#f59e0b,#fbbf24,#22c55e)}
.dms-tline-step{display:grid;grid-template-columns:80px 28px 1fr;gap:14px;align-items:flex-start;padding:14px 0;position:relative}
.dms-tline-time{font-size:12px;font-weight:700;color:#f59e0b;font-family:'SF Mono',Menlo,monospace;background:#fef3c7;border-radius:6px;padding:5px 7px;text-align:center;line-height:1.2}
.dms-tline-step--last .dms-tline-time{color:#fff;background:#22c55e}
.dms-tline-dot{width:14px;height:14px;border-radius:50%;background:#f59e0b;border:3px solid #fff;box-shadow:0 0 0 2px #f59e0b;margin-top:8px;justify-self:center;position:relative;z-index:1}
.dms-tline-step--last .dms-tline-dot{background:#22c55e;box-shadow:0 0 0 2px #22c55e}
.dms-tline-body{padding-top:2px}
.dms-tline-event{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:4px}
.dms-tline-detail{font-size:13px;color:#64748b;line-height:1.55}
.dms-tline-handler{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#f59e0b;background:#fef3c7;padding:1px 7px;border-radius:10px;margin-left:8px;font-weight:600}
.dms-perf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.dms-perf-card{background:linear-gradient(180deg,#fffbeb,#fff);border:1px solid #fde68a;border-radius:10px;padding:18px;text-align:center}
.dms-perf-key{font-size:11px;color:#92400e;font-weight:600;margin-bottom:8px;letter-spacing:0.04em}
.dms-perf-row{display:flex;align-items:baseline;justify-content:center;gap:8px}
.dms-perf-before{font-size:14px;color:#94a3b8;text-decoration:line-through;font-family:'SF Mono',Menlo,monospace}
.dms-perf-arrow{color:#f59e0b;font-weight:700}
.dms-perf-after{font-size:18px;font-weight:800;color:#f59e0b;font-family:'SF Mono',Menlo,monospace}

/* ===== KMS · K8s 健康卡 hero panel + 4 阶段路线图 ===== */
.kms-cluster{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#0a0d22 0%,#0f1029 100%);border:1px solid rgba(99,102,241,0.22);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.kms-cluster-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(99,102,241,0.1);border-bottom:1px solid rgba(99,102,241,0.18);font-size:11px}
.kms-cluster-brand{display:flex;align-items:center;gap:7px;color:#c7d2fe;font-weight:600}
.kms-cluster-brand-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.22);animation:noc-pulse 1.4s ease-in-out infinite}
.kms-cluster-tenant{font-size:10px;color:#a5b4fc;font-family:'SF Mono',Menlo,monospace}
.kms-score{padding:14px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,0.05)}
.kms-score-num{font-size:36px;font-weight:800;line-height:1;color:#a5b4fc;font-family:'SF Mono',Menlo,monospace}
.kms-score-num small{font-size:14px;color:#64748b;font-weight:500}
.kms-score-meta{display:flex;flex-direction:column;gap:4px;flex:1}
.kms-score-label{font-size:10px;color:#64748b;letter-spacing:0.08em;text-transform:uppercase}
.kms-score-tag{font-size:11px;font-weight:700;color:#22c55e;background:rgba(34,197,94,0.14);padding:2px 8px;border-radius:4px;align-self:flex-start}
.kms-bars{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 16px;overflow:hidden}
.kms-bar{display:grid;grid-template-columns:80px 1fr 32px;gap:8px;align-items:center;font-size:10.5px}
.kms-bar-label{color:#cbd5e1}
.kms-bar-track{height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
.kms-bar-fill{height:100%;background:linear-gradient(90deg,#6366f1,#a5b4fc);border-radius:3px}
.kms-bar-val{color:#a5b4fc;font-family:'SF Mono',Menlo,monospace;font-size:10px;text-align:right;font-weight:700}
.kms-cluster-foot{display:flex;justify-content:space-around;padding:9px 12px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06);font-size:10.5px;color:#94a3b8;gap:8px;flex-wrap:wrap}
.kms-cluster-foot strong{color:#c7d2fe;font-family:'SF Mono',Menlo,monospace}
.kms-roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;position:relative}
.kms-roadmap::before{content:'';position:absolute;left:5%;right:5%;top:36px;height:2px;background:linear-gradient(90deg,#6366f1 0%,#a5b4fc 50%,#c7d2fe 100%);z-index:0}
.kms-phase{background:#fff;border:1px solid #e0e7ff;border-radius:12px;padding:22px 18px;position:relative;z-index:1;box-shadow:0 4px 14px rgba(99,102,241,0.06)}
.kms-phase-num{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin:-32px auto 10px;border:3px solid #fff;box-shadow:0 4px 12px rgba(99,102,241,0.3)}
.kms-phase-name{font-size:15px;font-weight:700;color:#0f172a;text-align:center;margin-bottom:4px}
.kms-phase-time{font-size:11px;color:#6366f1;text-align:center;margin-bottom:14px;font-weight:600}
.kms-phase-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.kms-phase-list li{font-size:12px;color:#475569;display:flex;gap:6px;line-height:1.5}
.kms-phase-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:#6366f1;flex-shrink:0;margin-top:7px}
.kms-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.kms-tool{background:linear-gradient(180deg,#eef2ff,#fff);border:1px solid #c7d2fe;border-radius:12px;padding:22px}
.kms-tool-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kms-tool-icon{width:34px;height:34px;border-radius:8px;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center}
.kms-tool-name{font-size:15px;font-weight:700;color:#0f172a}
.kms-tool-desc{font-size:12.5px;color:#475569;line-height:1.6;margin-bottom:12px}
.kms-tool-snip{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:11px;color:#312e81;background:#fff;border:1px solid #c7d2fe;border-radius:6px;padding:8px 10px;line-height:1.6;white-space:pre-wrap}

/* ===== SOS · 安全态势仪表 hero panel + 攻防闭环 ===== */
.sos-board{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#0a0a14 0%,#1a0a14 100%);border:1px solid rgba(239,68,68,0.18);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.sos-board-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(239,68,68,0.1);border-bottom:1px solid rgba(239,68,68,0.18);font-size:11px}
.sos-board-brand{display:flex;align-items:center;gap:7px;color:#fecaca;font-weight:600}
.sos-board-brand-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.22);animation:noc-pulse 1.4s ease-in-out infinite}
.sos-board-shift{font-size:10px;color:#fecaca}
.sos-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;border-bottom:1px solid rgba(255,255,255,0.05)}
.sos-ring{display:flex;flex-direction:column;align-items:center;text-align:center}
.sos-ring-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-family:'SF Mono',Menlo,monospace;color:#fecaca;background:conic-gradient(#ef4444 var(--p,75%),rgba(239,68,68,0.15) 0);position:relative}
.sos-ring-circle::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#0a0a14}
.sos-ring-circle span{position:relative;z-index:1}
.sos-ring-label{font-size:9.5px;color:#94a3b8;margin-top:5px;line-height:1.3}
.sos-feed{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:5px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.05)}
.sos-feed-label{font-size:9.5px;color:#64748b;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:3px}
.sos-feed-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:10.5px;background:rgba(239,68,68,0.06);border-left:2px solid #ef4444}
.sos-feed-time{color:#94a3b8;font-family:'SF Mono',Menlo,monospace;font-size:9.5px;font-weight:700;flex-shrink:0}
.sos-feed-text{color:#fecaca;flex:1;line-height:1.3}
.sos-feed-tag{font-size:9px;color:#4ade80;background:rgba(74,222,128,0.12);padding:1px 5px;border-radius:3px;font-weight:700;flex-shrink:0}
.sos-board-foot{display:flex;justify-content:space-around;padding:8px 12px;background:rgba(0,0,0,0.32);font-size:10px;gap:6px}
.sos-board-foot-item{text-align:center;flex:1}
.sos-board-foot-num{font-size:13px;font-weight:800;font-family:'SF Mono',Menlo,monospace;line-height:1.1}
.sos-board-foot-num--high{color:#ef4444}
.sos-board-foot-num--mid{color:#fbbf24}
.sos-board-foot-num--low{color:#94a3b8}
.sos-board-foot-label{font-size:9px;color:#64748b;margin-top:3px}
.sos-flow{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;gap:0;align-items:stretch;margin-top:40px}
.sos-stage{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;box-shadow:0 4px 14px rgba(15,23,42,0.04);display:flex;flex-direction:column}
.sos-stage-num{width:32px;height:32px;border-radius:50%;background:#ef4444;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:12px}
.sos-stage-name{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:6px}
.sos-stage-desc{font-size:12.5px;color:#64748b;line-height:1.55;flex:1;margin-bottom:12px}
.sos-stage-kpi{padding-top:10px;border-top:1px dashed #e2e8f0;display:flex;align-items:baseline;gap:6px}
.sos-stage-kpi-num{font-size:18px;font-weight:800;color:#ef4444;font-family:'SF Mono',Menlo,monospace}
.sos-stage-kpi-label{font-size:11px;color:#94a3b8}
.sos-arrow{display:flex;align-items:center;justify-content:center;color:#ef4444;font-size:22px;font-weight:800}
.sos-sla{margin-top:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}
.sos-sla-head{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;background:#fef2f2;font-size:12px;font-weight:700;color:#991b1b;letter-spacing:0.04em}
.sos-sla-head>div{padding:14px 18px;border-right:1px solid #fecaca}
.sos-sla-head>div:last-child{border-right:none}
.sos-sla-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;font-size:13px;border-top:1px solid #f1f5f9}
.sos-sla-row>div{padding:14px 18px;border-right:1px solid #f1f5f9;color:#475569}
.sos-sla-row>div:last-child{border-right:none}
.sos-sla-lvl{font-weight:700;color:#0f172a;display:flex;align-items:center;gap:8px}
.sos-sla-lvl-dot{width:10px;height:10px;border-radius:50%}
.sos-sla-lvl--high .sos-sla-lvl-dot{background:#ef4444}
.sos-sla-lvl--mid .sos-sla-lvl-dot{background:#f59e0b}
.sos-sla-lvl--low .sos-sla-lvl-dot{background:#3b82f6}
.sos-sla-lvl--info .sos-sla-lvl-dot{background:#94a3b8}
.sos-sla-num{font-family:'SF Mono',Menlo,monospace;font-weight:700;color:#0f172a}
.sos-sla-pct{color:#16a34a;font-weight:700;font-family:'SF Mono',Menlo,monospace}

/* ===== OSS · 开源组件矩阵 hero panel + 支持深度 table ===== */
.oss-matrix{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#04141a 0%,#0a1f2b 100%);border:1px solid rgba(6,182,212,0.22);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.oss-matrix-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(6,182,212,0.1);border-bottom:1px solid rgba(6,182,212,0.18);font-size:11px}
.oss-matrix-brand{display:flex;align-items:center;gap:7px;color:#a5f3fc;font-weight:600}
.oss-matrix-brand-dot{width:6px;height:6px;border-radius:50%;background:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,0.22);animation:noc-pulse 1.4s ease-in-out infinite}
.oss-matrix-tag{font-size:10px;color:#67e8f9;font-family:'SF Mono',Menlo,monospace}
.oss-matrix-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:10px 12px;overflow:hidden}
.oss-cell{display:flex;align-items:center;gap:9px;padding:7px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(6,182,212,0.12);border-radius:7px;font-size:11px}
.oss-cell-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.oss-cell-name{color:#e2e8f0;font-weight:600;font-size:11px}
.oss-cell-ver{color:#67e8f9;font-size:9.5px;font-family:'SF Mono',Menlo,monospace;margin-left:4px}
.oss-cell-meta{color:#64748b;font-size:9.5px;margin-left:auto;font-family:'SF Mono',Menlo,monospace}
.oss-cell-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,0.18);flex-shrink:0}
.oss-matrix-foot{padding:9px 14px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06);font-size:10px;color:#94a3b8;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.oss-matrix-foot strong{color:#06b6d4;font-family:'SF Mono',Menlo,monospace}
.oss-table{margin-top:40px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,0.06)}
.oss-table-head{display:grid;grid-template-columns:1.4fr repeat(5,1fr);background:linear-gradient(135deg,#cffafe,#ecfeff);font-size:12px;font-weight:700;color:#155e75;letter-spacing:0.04em}
.oss-table-head>div{padding:14px 16px;border-right:1px solid #a5f3fc;text-align:center}
.oss-table-head>div:first-child{text-align:left}
.oss-table-head>div:last-child{border-right:none}
.oss-table-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);border-top:1px solid #f1f5f9;font-size:13px}
.oss-table-row>div{padding:13px 16px;border-right:1px solid #f1f5f9;text-align:center;color:#475569}
.oss-table-row>div:first-child{text-align:left;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:9px}
.oss-table-row>div:last-child{border-right:none}
.oss-table-row:hover{background:#f0fdff}
.oss-table-comp-icon{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0}
.oss-check{display:inline-block;font-family:'SF Mono',Menlo,monospace;font-weight:800;letter-spacing:1px}
.oss-check--3{color:#06b6d4}
.oss-check--2{color:#22c55e}
.oss-check--1{color:#94a3b8}
.oss-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.oss-case{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;border-top:3px solid #06b6d4}
.oss-case-tag{font-size:10px;color:#06b6d4;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px}
.oss-case-title{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:8px;line-height:1.5}
.oss-case-result{font-size:12.5px;color:#16a34a;font-weight:600;line-height:1.55}

/* ===== CLR · 等保甘特 hero panel + 5 阶段交付物 ===== */
.clr-gantt{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#0c0a1f 0%,#16102b 100%);border:1px solid rgba(139,92,246,0.22);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.clr-gantt-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(139,92,246,0.1);border-bottom:1px solid rgba(139,92,246,0.18);font-size:11px}
.clr-gantt-brand{display:flex;align-items:center;gap:7px;color:#ddd6fe;font-weight:600}
.clr-gantt-brand-dot{width:6px;height:6px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,0.25);animation:noc-pulse 1.4s ease-in-out infinite}
.clr-gantt-stage{font-size:10px;color:#c4b5fd;font-family:'SF Mono',Menlo,monospace}
.clr-gantt-list{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.clr-gantt-row{display:grid;grid-template-columns:88px 1fr 36px;gap:8px;align-items:center;font-size:10.5px}
.clr-gantt-name{color:#cbd5e1}
.clr-gantt-track{height:9px;background:rgba(255,255,255,0.05);border-radius:5px;overflow:hidden;position:relative}
.clr-gantt-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding-left:8px;font-size:9px;font-weight:700;color:#fff}
.clr-gantt-fill--done{background:linear-gradient(90deg,#22c55e,#4ade80);width:100%}
.clr-gantt-fill--active{background:linear-gradient(90deg,#8b5cf6,#a78bfa);width:60%;box-shadow:0 0 8px rgba(139,92,246,0.5)}
.clr-gantt-fill--plan{background:rgba(255,255,255,0.08);width:0}
.clr-gantt-status{font-size:14px;font-weight:700;color:#94a3b8;text-align:right}
.clr-gantt-status--done{color:#22c55e}
.clr-gantt-status--active{color:#a78bfa}
.clr-gantt-detail{padding:8px 14px;background:rgba(139,92,246,0.06);border-top:1px solid rgba(139,92,246,0.15);font-size:10.5px;color:#ddd6fe;line-height:1.4}
.clr-gantt-detail strong{color:#fff;font-family:'SF Mono',Menlo,monospace}
.clr-gantt-foot{padding:9px 14px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06);text-align:center;font-size:11px;color:#cbd5e1}
.clr-gantt-foot strong{color:#22c55e;font-family:'SF Mono',Menlo,monospace;font-size:14px;font-weight:800}
.clr-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.clr-stage{background:#fff;border:1px solid #e0e7ff;border-radius:12px;padding:20px 18px;box-shadow:0 4px 14px rgba(139,92,246,0.05);display:flex;flex-direction:column}
.clr-stage-tag{font-size:10px;color:#7c3aed;background:#ede9fe;padding:3px 8px;border-radius:4px;font-weight:700;align-self:flex-start;letter-spacing:0.04em;margin-bottom:10px}
.clr-stage-name{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:4px}
.clr-stage-time{font-size:11px;color:#8b5cf6;font-weight:600;margin-bottom:12px}
.clr-stage-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;flex:1}
.clr-stage-list li{font-size:12px;color:#475569;display:flex;gap:6px;line-height:1.5}
.clr-stage-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:#8b5cf6;flex-shrink:0;margin-top:7px}
.clr-stage-role{margin-top:14px;padding-top:12px;border-top:1px dashed #e2e8f0;font-size:11px;color:#7c3aed;font-weight:600}
.clr-diff{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.clr-diff-card{background:linear-gradient(135deg,#f5f3ff,#fff);border:1px solid #ddd6fe;border-radius:12px;padding:22px;text-align:center}
.clr-diff-icon{width:46px;height:46px;border-radius:50%;background:#8b5cf6;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.clr-diff-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:6px}
.clr-diff-desc{font-size:12.5px;color:#64748b;line-height:1.55}
.clr-diff-num{font-size:24px;font-weight:800;color:#8b5cf6;font-family:'SF Mono',Menlo,monospace;margin-top:10px}

/* ===== ESC · 大促战时面板 hero panel + 4 阶段战时手册 ===== */
.esc-war{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#1a0a1a 0%,#2a0a1f 100%);border:1px solid rgba(236,72,153,0.22);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.esc-war-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(236,72,153,0.1);border-bottom:1px solid rgba(236,72,153,0.2);font-size:11px}
.esc-war-brand{display:flex;align-items:center;gap:7px;color:#fbcfe8;font-weight:600}
.esc-war-brand-dot{width:6px;height:6px;border-radius:50%;background:#ec4899;box-shadow:0 0 0 3px rgba(236,72,153,0.25);animation:noc-pulse 1.4s ease-in-out infinite}
.esc-war-event{font-size:10px;color:#fbcfe8;font-family:'SF Mono',Menlo,monospace}
.esc-countdown{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:center;background:rgba(236,72,153,0.04)}
.esc-countdown-label{font-size:10px;color:#94a3b8;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:5px}
.esc-countdown-row{display:flex;align-items:baseline;justify-content:center;gap:8px}
.esc-countdown-d{font-size:30px;font-weight:800;color:#ec4899;font-family:'SF Mono',Menlo,monospace;line-height:1}
.esc-countdown-time{font-size:18px;font-weight:700;color:#fbcfe8;font-family:'SF Mono',Menlo,monospace;letter-spacing:0.06em}
.esc-team{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.05);font-size:11px;color:#fbcfe8;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.esc-team-tag{font-size:10px;color:#fff;background:rgba(236,72,153,0.4);padding:2px 7px;border-radius:4px;font-weight:700}
.esc-tasks{flex:1;padding:9px 14px;display:flex;flex-direction:column;gap:5px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.05)}
.esc-task{display:flex;align-items:center;gap:8px;font-size:11px;color:#fbcfe8;padding:4px 0}
.esc-task-mark{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}
.esc-task--done .esc-task-mark{background:#22c55e;color:#fff}
.esc-task--active .esc-task-mark{background:#ec4899;color:#fff;box-shadow:0 0 0 3px rgba(236,72,153,0.2);animation:noc-pulse 1.4s ease-in-out infinite}
.esc-task--plan .esc-task-mark{background:rgba(148,163,184,0.3);color:#94a3b8}
.esc-task--done{color:#94a3b8}
.esc-task--active{color:#fff;font-weight:600}
.esc-war-foot{display:flex;justify-content:space-around;padding:9px 12px;background:rgba(0,0,0,0.32)}
.esc-war-foot-item{text-align:center;flex:1}
.esc-war-foot-num{font-size:14px;font-weight:800;color:#ec4899;font-family:'SF Mono',Menlo,monospace;line-height:1.1}
.esc-war-foot-label{font-size:9px;color:#94a3b8;margin-top:3px}
.esc-handbook{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,0.06)}
.esc-phase{padding:24px 22px;border-right:1px solid #f1f5f9;display:flex;flex-direction:column}
.esc-phase:last-child{border-right:none}
.esc-phase--day{background:linear-gradient(180deg,#fdf2f8,#fff)}
.esc-phase-d{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.esc-phase-tag{font-size:11px;font-weight:800;color:#fff;background:#ec4899;padding:3px 9px;border-radius:4px;letter-spacing:0.04em}
.esc-phase--day .esc-phase-tag{background:#dc2626;animation:noc-pulse 1.4s ease-in-out infinite}
.esc-phase-name{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:6px}
.esc-phase-dur{font-size:11px;color:#ec4899;margin-bottom:14px;font-weight:600}
.esc-phase-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;flex:1}
.esc-phase-list li{font-size:12px;color:#475569;line-height:1.5;display:flex;gap:6px}
.esc-phase-list li::before{content:'›';color:#ec4899;font-weight:800;flex-shrink:0}
.esc-phase-deliver{margin-top:12px;padding-top:12px;border-top:1px dashed #fbcfe8;font-size:11px;color:#be185d;font-weight:600}
.esc-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.esc-case{background:linear-gradient(135deg,#fce7f3,#fff);border:1px solid #fbcfe8;border-radius:12px;padding:24px}
.esc-case-tag{font-size:10px;color:#be185d;background:#fff;padding:3px 9px;border-radius:4px;font-weight:700;display:inline-block;margin-bottom:10px;letter-spacing:0.04em}
.esc-case-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:10px}
.esc-case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.esc-case-stat{text-align:center;padding:10px;background:#fff;border-radius:8px;border:1px solid #fbcfe8}
.esc-case-stat-num{font-size:18px;font-weight:800;color:#ec4899;font-family:'SF Mono',Menlo,monospace;line-height:1}
.esc-case-stat-label{font-size:10px;color:#64748b;margin-top:4px}

/* ===== OMB · 成熟度雷达 hero panel + 6 维度路线图 ===== */
.omb-radar{display:flex;flex-direction:column;height:380px;background:linear-gradient(180deg,#04140a 0%,#0a1d12 100%);border:1px solid rgba(22,163,74,0.22);border-radius:14px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.omb-radar-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(22,163,74,0.1);border-bottom:1px solid rgba(22,163,74,0.18);font-size:11px}
.omb-radar-brand{display:flex;align-items:center;gap:7px;color:#bbf7d0;font-weight:600}
.omb-radar-brand-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,0.25);animation:noc-pulse 1.4s ease-in-out infinite}
.omb-radar-tag{font-size:10px;color:#86efac;font-family:'SF Mono',Menlo,monospace}
.omb-radar-canvas{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;position:relative}
.omb-radar-svg{width:240px;height:240px}
.omb-radar-legend{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;font-size:10px}
.omb-radar-legend-row{display:flex;align-items:center;gap:6px;color:#cbd5e1}
.omb-radar-legend-dot{width:10px;height:10px;border-radius:2px}
.omb-radar-foot{padding:9px 14px;background:rgba(0,0,0,0.32);border-top:1px solid rgba(255,255,255,0.06);text-align:center;font-size:11px;color:#cbd5e1;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.omb-radar-foot-num{font-family:'SF Mono',Menlo,monospace;font-weight:800;color:#22c55e;font-size:14px}
.omb-radar-foot-arrow{color:#16a34a;font-weight:800}
.omb-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.omb-dim{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;border-top:3px solid #16a34a;display:flex;flex-direction:column}
.omb-dim-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.omb-dim-icon{width:34px;height:34px;border-radius:8px;background:rgba(22,163,74,0.1);color:#16a34a;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.omb-dim-name{font-size:15px;font-weight:700;color:#0f172a}
.omb-dim-level{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:8px 10px;background:#f0fdf4;border-radius:6px;font-size:12px}
.omb-dim-level-cur{color:#94a3b8;font-weight:700;font-family:'SF Mono',Menlo,monospace}
.omb-dim-level-arrow{color:#16a34a;font-weight:800}
.omb-dim-level-tgt{color:#16a34a;font-weight:800;font-family:'SF Mono',Menlo,monospace}
.omb-dim-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;flex:1;margin-bottom:12px}
.omb-dim-list li{font-size:12px;color:#475569;display:flex;gap:6px;line-height:1.5}
.omb-dim-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:#16a34a;flex-shrink:0;margin-top:7px}
.omb-dim-time{font-size:11px;color:#16a34a;font-weight:700;padding-top:10px;border-top:1px dashed #e2e8f0}
.omb-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}
.omb-phase{padding:22px;border-right:1px solid #f1f5f9;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.omb-phase:last-child{border-right:none}
.omb-phase-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;margin-bottom:12px}
.omb-phase-name{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:4px}
.omb-phase-dur{font-size:11px;color:#16a34a;font-weight:600}
.omb-phase-arrow{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:#fff;border:1px solid #e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#16a34a;font-size:11px;font-weight:800;z-index:1}
.omb-phase:last-child .omb-phase-arrow{display:none}

/* ===== PRODUCT SIGNATURE SECTIONS ===== */
.signature-section { background: linear-gradient(180deg, #0f172a 0%, #131c2e 100%); padding: 100px 0; position: relative; }
.signature-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
.signature-section .section-tag { background: rgba(255,255,255,0.04); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.08); }
.signature-section .section-title { color: #fff; }
.sig-subtitle { font-size: 16px; color: #94a3b8; max-width: 720px; margin: 0 auto; line-height: 1.7; }

/* EventHub: alert convergence funnel */
.funnel-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.funnel-flow { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; gap: 0; align-items: stretch; }
.funnel-stage { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; }
.funnel-stage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.funnel-stage-label { font-size: 11px; color: #64748b; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.funnel-stage-count { font-size: 24px; font-weight: 800; line-height: 1; }
.funnel-stage-count small { font-size: 11px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.funnel-stage--noise .funnel-stage-count { color: #ef4444; }
.funnel-stage--event .funnel-stage-count { color: #f59e0b; }
.funnel-stage--incident .funnel-stage-count { color: #4ade80; }
.funnel-stage-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.funnel-noise-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.funnel-noise-grid .funnel-dot { aspect-ratio: 1; border-radius: 3px; }
.funnel-dot.lvl-3 { background: rgba(239,68,68,0.55); }
.funnel-dot.lvl-2 { background: rgba(245,158,11,0.5); }
.funnel-dot.lvl-1 { background: rgba(100,116,139,0.4); }
.funnel-dot.lvl-mute { background: rgba(100,116,139,0.18); }
.funnel-event { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.18); border-radius: 7px; }
.funnel-event-name { font-size: 11.5px; color: #e2e8f0; flex: 1; line-height: 1.3; }
.funnel-event-count { font-size: 10px; color: #f59e0b; font-weight: 700; background: rgba(245,158,11,0.12); padding: 1px 6px; border-radius: 3px; }
.funnel-incident { padding: 11px 12px; border-radius: 9px; border-left: 3px solid; }
.funnel-incident--p0 { background: rgba(239,68,68,0.06); border-color: #ef4444; }
.funnel-incident--p1 { background: rgba(245,158,11,0.05); border-color: #f59e0b; }
.funnel-incident--ok { background: rgba(74,222,128,0.04); border-color: #4ade80; }
.funnel-incident-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.funnel-incident-badge { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; }
.funnel-incident--p0 .funnel-incident-badge { background: #ef4444; color: #fff; }
.funnel-incident--p1 .funnel-incident-badge { background: #f59e0b; color: #fff; }
.funnel-incident--ok .funnel-incident-badge { background: rgba(74,222,128,0.15); color: #4ade80; }
.funnel-incident-time { font-size: 10px; color: #475569; margin-left: auto; font-family: 'SF Mono', Menlo, monospace; }
.funnel-incident-title { font-size: 12.5px; color: #e2e8f0; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.funnel-incident-meta { font-size: 10.5px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.funnel-incident-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: #475569; }
.funnel-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; }
.funnel-arrow-stat { font-size: 16px; font-weight: 800; color: #4ade80; line-height: 1; }
.funnel-arrow-label { font-size: 10px; color: #64748b; margin-top: 4px; text-align: center; line-height: 1.3; }
.funnel-arrow-line { width: 100%; height: 2px; background: linear-gradient(90deg, rgba(239,68,68,0.4), rgba(74,222,128,0.6)); position: relative; margin: 10px 0 4px; border-radius: 2px; }
.funnel-arrow-line::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: #4ade80; }

/* AutoOps: runbook + execution panel */
.runbook-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.runbook-trigger { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(239,68,68,0.06)); border: 1px solid rgba(245,158,11,0.2); border-radius: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.runbook-trigger-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(245,158,11,0.18); color: #f59e0b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.runbook-trigger-text { font-size: 12.5px; color: #e2e8f0; }
.runbook-trigger-text strong { color: #f59e0b; }
.runbook-trigger-arrow { color: #475569; font-size: 14px; }
.runbook-trigger-action { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(239,68,68,0.18); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; font-size: 11px; color: #fca5a5; font-weight: 600; font-family: 'SF Mono', Menlo, monospace; }
.runbook-trigger-ai { font-size: 10px; color: #c084fc; background: rgba(168,85,247,0.12); padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(168,85,247,0.25); margin-left: auto; }
.runbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.runbook-pane { background: #0a0f1c; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; }
.runbook-pane-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(255,255,255,0.05); }
.rbp-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.rbp-dot:nth-child(2) { background: #f59e0b; }
.rbp-dot:nth-child(3) { background: #4ade80; }
.rbp-name { margin-left: 8px; font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: #94a3b8; }
.rbp-status { margin-left: auto; font-size: 10px; color: #4ade80; display: flex; align-items: center; gap: 5px; }
.rbp-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); }
.runbook-yaml { padding: 16px 18px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.85; color: #cbd5e1; overflow-x: auto; }
.runbook-yaml .y-comment { color: #475569; font-style: italic; }
.runbook-yaml .y-key { color: #93c5fd; }
.runbook-yaml .y-str { color: #fde68a; }
.runbook-yaml .y-num { color: #fca5a5; }
.runbook-yaml .y-bullet { color: #f59e0b; }
.runbook-yaml .y-i { display: inline-block; width: 16px; }
.runbook-timeline { padding: 8px 18px; }
.runbook-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.runbook-step:last-child { border-bottom: none; }
.runbook-step-time { font-size: 10px; color: #64748b; font-family: 'SF Mono', Menlo, monospace; min-width: 56px; padding-top: 3px; flex-shrink: 0; }
.runbook-step-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; }
.runbook-step--done .runbook-step-icon { background: rgba(74,222,128,0.15); color: #4ade80; }
.runbook-step--running .runbook-step-icon { background: rgba(245,158,11,0.15); color: #f59e0b; animation: rb-pulse 1.4s ease-in-out infinite; }
.runbook-step--pending .runbook-step-icon { background: rgba(100,116,139,0.12); color: #475569; }
.runbook-step-body { flex: 1; min-width: 0; }
.runbook-step-name { font-size: 12px; color: #e2e8f0; margin-bottom: 3px; line-height: 1.35; font-weight: 500; }
.runbook-step--pending .runbook-step-name { color: #475569; }
.runbook-step-meta { font-size: 10.5px; color: #64748b; font-family: 'SF Mono', Menlo, monospace; }
.runbook-step--running .runbook-step-meta { color: #f59e0b; }
.runbook-step--done .runbook-step-meta { color: #4ade80; }
@keyframes rb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }

/* Monitor: data sources + metric tile grid */
.mon-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); position: relative; overflow: hidden; }
.mon-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 18%, rgba(59,130,246,0.12), transparent 28%), linear-gradient(110deg, transparent 0%, rgba(59,130,246,0.04) 45%, transparent 60%); opacity: 0.8; transform: translateX(-100%); animation: mon-board-scan 8s linear infinite; }
.mon-board > * { position: relative; z-index: 1; }
.mon-source-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.15); border-radius: 12px; margin-bottom: 8px; align-items: center; }
.mon-source-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: rgba(15,23,42,0.7); border: 1px solid rgba(59,130,246,0.25); border-radius: 100px; font-size: 12px; color: #cbd5e1; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.mon-source-chip.is-active { background: rgba(59,130,246,0.14); border-color: rgba(96,165,250,0.55); transform: translateY(-1px); }
.mon-source-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); flex-shrink: 0; }
.mon-source-note { font-size: 11px; color: #64748b; text-align: center; padding: 6px 4px 14px; }
.mon-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mon-metric-tile { background: rgba(15,23,42,0.7); border: 1px solid rgba(59,130,246,0.18); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; transition: border-color 0.35s, background 0.35s, transform 0.35s; }
.mon-metric-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(96,165,250,0.08), transparent); transform: translateX(-120%); opacity: 0; }
.mon-metric-tile.is-live-focus { background: rgba(30,41,59,0.92); border-color: rgba(96,165,250,0.48); transform: translateY(-2px); }
.mon-metric-tile.is-live-focus::after { opacity: 1; animation: mon-tile-sweep 0.9s ease; }
.mon-tile-name { font-size: 11px; color: #94a3b8; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.mon-tile-val { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 4px; transition: color 0.25s, text-shadow 0.25s; }
.mon-tile-val.is-live-flash { color: #93c5fd; text-shadow: 0 0 18px rgba(59,130,246,0.42); }
.mon-tile-val small { font-size: 12px; color: #64748b; font-weight: 500; }
.mon-tile-spark { height: 28px; }
.mon-tile-spark svg { width: 100%; height: 100%; }
.mon-tile-spark path { transition: d 0.65s ease, stroke 0.25s; stroke-linecap: round; stroke-linejoin: round; }
.mon-tile-trend { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; }
.mon-tile-trend--up { color: #f87171; }
.mon-tile-trend--down { color: #4ade80; }
.mon-tile-trend-arrow { font-size: 11px; font-weight: 700; }
@keyframes mon-board-scan { to { transform: translateX(100%); } }
@keyframes mon-tile-sweep { to { transform: translateX(120%); } }

/* NPM: topology + detail */
.npm-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.npm-topo { background: rgba(0,0,0,0.25); border: 1px solid rgba(6,182,212,0.15); border-radius: 12px; padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.npm-topo-title { font-size: 11px; color: #64748b; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.npm-tier { display: flex; justify-content: space-around; align-items: center; gap: 12px; position: relative; }
.npm-tier--core { justify-content: center; }
.npm-tier--agg { justify-content: space-around; padding: 0 8%; }
.npm-tier--access { justify-content: space-between; }
.npm-node { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.3); border-radius: 8px; min-width: 64px; position: relative; z-index: 2; }
.npm-node--core { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.5); padding: 10px 14px; }
.npm-node-icon { color: #06b6d4; }
.npm-node-name { font-size: 11px; color: #e2e8f0; font-weight: 600; line-height: 1.2; }
.npm-node-meta { font-size: 9.5px; color: #64748b; }
.npm-node-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); position: absolute; top: 6px; right: 6px; }
.npm-node--alert { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.08); }
.npm-node--alert .npm-node-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.npm-node--alert .npm-node-icon { color: #ef4444; }
.npm-link-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.npm-link-svg line { stroke: rgba(6,182,212,0.4); stroke-width: 1.5; }
.npm-link-svg .npm-link--alert { stroke: rgba(239,68,68,0.6); stroke-width: 2; stroke-dasharray: 4 3; }
.npm-link-label { font-size: 9.5px; fill: #06b6d4; font-family: 'SF Mono', Menlo, monospace; }
.npm-link-label--alert { fill: #fca5a5; }
.npm-detail-panel { background: rgba(0,0,0,0.25); border: 1px solid rgba(6,182,212,0.18); border-radius: 12px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.npm-detail-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.npm-detail-title { font-size: 12px; color: #e2e8f0; font-weight: 600; }
.npm-detail-tag { font-size: 10px; color: #06b6d4; background: rgba(6,182,212,0.12); padding: 2px 7px; border-radius: 4px; margin-left: auto; }
.npm-detail-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.npm-detail-label { font-size: 11px; color: #94a3b8; min-width: 56px; }
.npm-detail-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.npm-detail-bar-fill { height: 100%; border-radius: 2px; }
.npm-detail-val { font-size: 11px; color: #e2e8f0; font-family: 'SF Mono', Menlo, monospace; min-width: 92px; text-align: right; }
.npm-detail-val--ok { color: #4ade80; }
.npm-detail-val--mid { color: #f59e0b; }
.npm-detail-val--bad { color: #ef4444; }

/* Log: NL search → SQL translation */
.log-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 14px; }
.log-search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(0,0,0,0.3); border: 1px solid rgba(16,185,129,0.25); border-radius: 12px; }
.log-search-icon { color: #10b981; flex-shrink: 0; }
.log-search-input { flex: 1; font-size: 14px; color: #e2e8f0; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.log-search-input em { color: #4ade80; font-style: normal; }
.log-search-chip { font-size: 11px; color: #4ade80; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); padding: 4px 10px; border-radius: 100px; flex-shrink: 0; }
.log-translate-arrow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; font-size: 11px; color: #94a3b8; }
.log-translate-arrow-line { width: 1px; height: 18px; background: linear-gradient(180deg, rgba(16,185,129,0.6), rgba(16,185,129,0)); }
.log-translate-tag { font-size: 10px; color: #4ade80; background: rgba(16,185,129,0.1); padding: 3px 9px; border-radius: 4px; border: 1px solid rgba(16,185,129,0.2); letter-spacing: 0.05em; font-weight: 700; }
.log-query-pane { background: #0a0f1c; border: 1px solid rgba(16,185,129,0.18); border-radius: 12px; overflow: hidden; }
.log-query-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: rgba(16,185,129,0.06); border-bottom: 1px solid rgba(16,185,129,0.1); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: #94a3b8; }
.log-query-head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 14px 0 0 #f59e0b, 28px 0 0 #4ade80; margin-right: 22px; }
.log-query-code { padding: 16px 20px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.85; color: #cbd5e1; }
.log-query-code .lq-kw { color: #93c5fd; font-weight: 600; }
.log-query-code .lq-str { color: #fde68a; }
.log-query-code .lq-num { color: #fca5a5; }
.log-query-code .lq-fn { color: #c4b5fd; }
.log-query-code .lq-i { display: inline-block; width: 14px; }
.log-result-table { padding: 4px 14px 14px; }
.log-result-head { display: grid; grid-template-columns: 1fr 80px; gap: 12px; padding: 8px 12px; font-size: 10.5px; color: #64748b; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.05); }
.log-result-row { display: grid; grid-template-columns: 1fr 80px; gap: 12px; padding: 7px 12px; font-size: 12px; color: #e2e8f0; font-family: 'SF Mono', Menlo, monospace; border-bottom: 1px dashed rgba(255,255,255,0.04); }
.log-result-row:last-child { border-bottom: none; }
.log-result-row strong { color: #4ade80; text-align: right; font-weight: 700; }

/* CMDB: graph + asset detail */
.cmdb-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
.cmdb-graph { background: rgba(0,0,0,0.25); border: 1px solid rgba(139,92,246,0.18); border-radius: 12px; padding: 22px; position: relative; min-height: 380px; }
.cmdb-graph-title { font-size: 11px; color: #64748b; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.cmdb-graph-canvas { position: relative; height: 340px; }
.cmdb-node { position: absolute; padding: 8px 12px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3); border-radius: 9px; font-size: 11px; color: #e2e8f0; line-height: 1.3; min-width: 100px; text-align: center; transform: translate(-50%, -50%); z-index: 2; }
.cmdb-node-label { font-size: 9.5px; color: #a78bfa; display: block; margin-bottom: 3px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
.cmdb-node--root { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); }
.cmdb-node--selected { background: rgba(6,182,212,0.15); border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,0.15); }
.cmdb-node--selected .cmdb-node-label { color: #67e8f9; }
.cmdb-edge-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.cmdb-edge-svg line { stroke: rgba(139,92,246,0.35); stroke-width: 1.4; }
.cmdb-edge-svg .cmdb-edge--selected { stroke: rgba(6,182,212,0.55); stroke-width: 2; }
.cmdb-detail { background: rgba(0,0,0,0.25); border: 1px solid rgba(139,92,246,0.2); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cmdb-detail-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px; }
.cmdb-detail-title { font-size: 13px; color: #fff; font-weight: 600; }
.cmdb-detail-warn { font-size: 10px; color: #f59e0b; background: rgba(245,158,11,0.12); padding: 2px 7px; border-radius: 4px; border: 1px solid rgba(245,158,11,0.25); margin-left: auto; }
.cmdb-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 11.5px; }
.cmdb-detail-row span:first-child { color: #94a3b8; }
.cmdb-detail-row span:last-child { color: #e2e8f0; font-family: 'SF Mono', Menlo, monospace; }
.cmdb-impact-title { font-size: 11px; color: #64748b; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); }
.cmdb-impact-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: rgba(139,92,246,0.05); border-radius: 6px; font-size: 11.5px; color: #e2e8f0; }
.cmdb-impact-tag { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.cmdb-impact-tag--p0 { background: #ef4444; color: #fff; }
.cmdb-impact-tag--p1 { background: #f59e0b; color: #fff; }
.cmdb-impact-tag--p2 { background: rgba(100,116,139,0.3); color: #cbd5e1; }

/* ServiceOps: ticket pipeline + SLA list */
.svcops-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 22px; }
.svcops-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 0; }
.svcops-step { background: rgba(236,72,153,0.06); border: 1px solid rgba(236,72,153,0.2); border-radius: 10px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.svcops-step--active { background: rgba(236,72,153,0.12); border-color: rgba(236,72,153,0.45); }
.svcops-step-name { font-size: 12px; color: #e2e8f0; font-weight: 600; }
.svcops-step-count { font-size: 22px; font-weight: 800; color: #f9a8d4; line-height: 1; }
.svcops-step-count small { font-size: 10px; color: #94a3b8; font-weight: 500; }
.svcops-step-arrow { display: flex; align-items: center; justify-content: center; color: #ec4899; font-size: 18px; opacity: 0.5; }
.svcops-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.svcops-ticket-title { font-size: 11px; color: #64748b; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; padding: 0 4px 4px; }
.svcops-ticket { display: grid; grid-template-columns: 96px 1fr 130px 130px; gap: 14px; align-items: center; padding: 12px 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
.svcops-ticket-id { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.svcops-ticket-pri { font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; }
.svcops-ticket-pri--p0 { background: #ef4444; color: #fff; }
.svcops-ticket-pri--p1 { background: #f59e0b; color: #fff; }
.svcops-ticket-pri--p2 { background: rgba(100,116,139,0.3); color: #cbd5e1; }
.svcops-ticket-name { font-size: 12.5px; color: #e2e8f0; }
.svcops-ticket-owner { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #cbd5e1; }
.svcops-ticket-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #8b5cf6); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svcops-sla { display: flex; flex-direction: column; gap: 4px; }
.svcops-sla-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.svcops-sla-fill { height: 100%; border-radius: 2px; }
.svcops-sla-text { font-size: 10.5px; font-family: 'SF Mono', Menlo, monospace; }
.svcops-sla--ok .svcops-sla-fill { background: #4ade80; }
.svcops-sla--ok .svcops-sla-text { color: #4ade80; }
.svcops-sla--warn .svcops-sla-fill { background: #f59e0b; }
.svcops-sla--warn .svcops-sla-text { color: #f59e0b; }
.svcops-sla--bad .svcops-sla-fill { background: #ef4444; }
.svcops-sla--bad .svcops-sla-text { color: #ef4444; }

/* Knowledge: keyword vs semantic compare */
.kb-board { background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px; margin-top: 48px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; gap: 18px; }
.kb-searchbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(0,0,0,0.3); border: 1px solid rgba(99,102,241,0.3); border-radius: 100px; max-width: 560px; margin: 0 auto; width: 100%; }
.kb-searchbar-icon { color: #a5b4fc; flex-shrink: 0; }
.kb-searchbar-text { font-size: 14px; color: #e2e8f0; flex: 1; }
.kb-searchbar-cursor { width: 1.5px; height: 14px; background: #a5b4fc; animation: kb-blink 1s infinite; }
@keyframes kb-blink { 50% { opacity: 0; } }
.kb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kb-pane { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.kb-pane--bad { border-color: rgba(100,116,139,0.18); }
.kb-pane--good { border-color: rgba(99,102,241,0.3); background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(0,0,0,0.25)); }
.kb-pane-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.kb-pane-icon { font-size: 14px; }
.kb-pane-title { font-size: 13px; color: #e2e8f0; font-weight: 600; }
.kb-pane-badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-left: auto; }
.kb-pane--bad .kb-pane-badge { color: #94a3b8; background: rgba(100,116,139,0.15); }
.kb-pane--good .kb-pane-badge { color: #c4b5fd; background: rgba(99,102,241,0.18); }
.kb-result { padding: 8px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.kb-result--dim { background: rgba(100,116,139,0.05); opacity: 0.6; }
.kb-pane--good .kb-result { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); }
.kb-result-title { font-size: 12px; color: #e2e8f0; font-weight: 500; line-height: 1.35; display: flex; align-items: center; gap: 8px; }
.kb-result-snippet { font-size: 10.5px; color: #64748b; line-height: 1.4; }
.kb-result-conf { font-size: 10px; font-weight: 700; color: #4ade80; background: rgba(74,222,128,0.12); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
.kb-result-reason { font-size: 10px; color: #67e8f9; background: rgba(6,182,212,0.1); padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(6,182,212,0.18); align-self: flex-start; }

/* Product signature motion */
.mon-source-chip-dot,
.npm-node-dot,
.rbp-status::before { animation: phv-dot-pulse 1.8s ease-in-out infinite; }
.npm-link-svg line,
.cmdb-edge-svg line { stroke-dasharray: 10 8; animation: phv-line-flow 3.8s linear infinite; }
.npm-link-svg .npm-link--alert,
.cmdb-edge-svg .cmdb-edge--selected { animation-duration: 2s; }
.mon-tile-spark path { stroke-dasharray: 90; animation: phv-spark-draw 4.2s linear infinite; }
.npm-detail-bar-fill,
.svcops-sla-fill { position: relative; overflow: hidden; transition: width 0.7s ease; }
.funnel-arrow-line { background-size: 200% 100%; animation: phv-gradient-shift 2.8s linear infinite; }
.funnel-dot { animation: phv-dot-soft 2.8s ease-in-out infinite; }
.funnel-dot:nth-child(3n) { animation-delay: 0.45s; }
.funnel-dot:nth-child(4n) { animation-delay: 0.9s; }
.cmdb-node--selected,
.svcops-step--active,
.kb-pane--good .kb-result-conf,
.runbook-trigger-action { animation: phv-card-glow 2.2s ease-in-out infinite; }
@keyframes phv-dot-pulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.28); opacity: 1; } }
@keyframes phv-dot-soft { 0%, 100% { opacity: 0.48; } 50% { opacity: 1; } }
@keyframes phv-card-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 0 3px rgba(74,222,128,0.12); } }
@keyframes phv-gradient-shift { to { background-position: -200% 0; } }
@keyframes phv-spark-draw { 0% { stroke-dashoffset: 90; opacity: 0.55; } 45%, 100% { stroke-dashoffset: 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .prod-hero-visual.is-live-visual::before,
  .phv-live,
  .phv-bar-fill::after,
  .npm-detail-bar-fill::after,
  .svcops-sla-fill::after,
  .phv-link-svg line,
  .prod-hero-visual .phv-dynamic-svg line,
  .prod-hero-visual .phv-dynamic-svg path[fill="none"],
  .mon-hero-chart::before,
  .mon-hero-chart-line,
  .mon-hero-chart-dot,
  .log-hero-row.is-entering,
  .mon-board::before,
  .mon-metric-tile.is-live-focus::after,
  .mon-source-chip-dot,
  .npm-node-dot,
  .rbp-status::before,
  .npm-link-svg line,
  .cmdb-edge-svg line,
  .mon-tile-spark path,
  .funnel-arrow-line,
  .funnel-dot,
  .cmdb-node--selected,
  .svcops-step--active,
  .kb-pane--good .kb-result-conf,
  .runbook-trigger-action {
    animation: none !important;
  }
  .phv-metric,
  .phv-val,
  .phv-bar-fill,
  .phv-live-row,
  .phv-reco-card,
  .phv-log-row,
  .phv-map-node,
  .mon-hero-chart-area,
  .mon-hero-chart-line,
  .mon-hero-chart-dot,
  .mon-source-chip,
  .mon-metric-tile,
  .mon-tile-val,
  .mon-tile-spark path,
  .log-hero-row,
  .npm-detail-bar-fill,
  .svcops-sla-fill {
    transition: none !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .ai-grid { grid-template-columns: 1fr; }
  .ai-card--main { grid-row: span 1; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .product-panel.active { grid-template-columns: 1fr; gap: 32px; }
  .demo-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .contact-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .mega-menu { min-width: 500px; }
  .pg-cards { grid-template-columns: repeat(2, 1fr); }
  .pg-cards--2col { grid-template-columns: repeat(2, 1fr); }
  .prod-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .cap-grid { grid-template-columns: repeat(2,1fr); }
  .scenario-list { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .related-grid { grid-template-columns: repeat(2,1fr); }
  .funnel-flow { grid-template-columns: 1fr; gap: 16px; }
  .funnel-arrow { padding: 4px; flex-direction: row; gap: 12px; }
  .funnel-arrow-line { width: 60px; }
  .runbook-grid { grid-template-columns: 1fr; }
  .svc-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .mms-shifts { grid-template-columns: repeat(2, 1fr); }
  .mms-fit-grid { grid-template-columns: 1fr; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hp-grid { grid-template-columns: 1fr 1fr; }
  .svctier-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid { grid-template-columns: repeat(3, 1fr); }
  .mon-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .npm-board { grid-template-columns: 1fr; }
  .cmdb-board { grid-template-columns: 1fr; }
  .cmdb-graph { min-height: 320px; }
  .kb-compare { grid-template-columns: 1fr; }
  .svcops-pipeline { grid-template-columns: 1fr; gap: 8px; }
  .svcops-step-arrow { transform: rotate(90deg); }
  .svcops-ticket { grid-template-columns: 1fr; gap: 8px; }
  .cms-compare { grid-template-columns: 1fr; }
  .cms-compare-arrow { flex-direction: row; padding: 16px; border-left: none; border-right: none; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
  .cms-stories { grid-template-columns: 1fr; }
  .dms-perf { grid-template-columns: repeat(2, 1fr); }
  .dms-war-grid { grid-template-columns: repeat(2, 1fr); }
  .kms-roadmap { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .kms-roadmap::before { display: none; }
  .kms-tools { grid-template-columns: 1fr; }
  .sos-flow { grid-template-columns: 1fr; gap: 12px; }
  .sos-arrow { transform: rotate(90deg); padding: 4px 0; }
  .sos-sla-head, .sos-sla-row { grid-template-columns: 1fr 1fr; }
  .sos-sla-head>div:nth-child(n+3), .sos-sla-row>div:nth-child(n+3) { display: none; }
  .oss-table-head, .oss-table-row { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .oss-table-head>div:nth-child(n+4), .oss-table-row>div:nth-child(n+4) { display: none; }
  .oss-cases { grid-template-columns: 1fr; }
  .clr-stages { grid-template-columns: repeat(2, 1fr); }
  .clr-diff { grid-template-columns: 1fr; }
  .esc-handbook { grid-template-columns: repeat(2, 1fr); }
  .esc-phase:nth-child(2) { border-right: none; }
  .esc-phase:nth-child(-n+2) { border-bottom: 1px solid #f1f5f9; }
  .esc-cases { grid-template-columns: 1fr; }
  .omb-dims { grid-template-columns: repeat(2, 1fr); }
  .omb-phases { grid-template-columns: repeat(2, 1fr); }
  .omb-phase:nth-child(2) { border-right: none; }
  .omb-phase:nth-child(-n+2) { border-bottom: 1px solid #f1f5f9; }
  .omb-phase:nth-child(2) .omb-phase-arrow { display: none; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  .hero-stats { flex-wrap: wrap; padding: 16px 20px; }
  .stat { padding: 0 16px; }
  .services-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .dd-row { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .chat-window { width: 340px; }
  .modal-tabs { overflow-x: auto; }
  .pg-cards { grid-template-columns: 1fr; }
  .pg-cards--2col { grid-template-columns: 1fr; }
  .product-foundation { flex-wrap: wrap; }
  .pf-info { flex-direction: column; align-items: flex-start; gap: 4px; }
  .product-ai-addons { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hp-feed { align-items: flex-start; }
  .hp-feed-text { white-space: normal; }
  .prod-hero h1 { font-size: 28px; }
  .prod-hero-visual { padding: 20px; }
  .phv-header { align-items: flex-start; gap: 10px; }
  .phv-title { line-height: 1.35; }
  .phv-metrics { grid-template-columns: 1fr; gap: 10px; }
  .phv-live-map { min-height: 172px; }
  .phv-map-node { min-width: 54px; padding: 5px 7px; }
  .phv-map-node strong { font-size: 10px; white-space: normal; }
  .phv-map-node small { display: none; }
  .phv-log-row { grid-template-columns: 50px minmax(0, 1fr); }
  .phv-log-row time { display: none; }
  .phv-reco-card strong { white-space: normal; }
  .cap-grid, .scenario-list, .related-grid { grid-template-columns: 1fr; }
  .prod-cta-actions { flex-direction: column; align-items: center; }
  .svc-grid, .svc-grid--3col, .pricing-grid, .delivery-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 32px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .fw-layer { grid-template-columns: 1fr; }
  .fw-layer-label { flex-direction: row; justify-content: flex-start; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .svc-overview-grid { grid-template-columns: 1fr; }
  .mms-shifts { grid-template-columns: 1fr; }
  .mms-deliverables { grid-template-columns: 1fr; }
  .mms-onboard { grid-template-columns: 1fr; gap: 24px; }
  .mms-onboard::before { display: none; }
  .mms-fit-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-bar { flex-direction: column; gap: 14px; }
  .cases-bar-divider { display: none; }
  .cms-compare-col { padding: 20px; }
  .cms-stories, .dms-perf { grid-template-columns: 1fr; }
  .dms-tline { padding: 22px 18px; }
  .dms-tline-list::before { left: 30px; }
  .dms-tline-step { grid-template-columns: 60px 18px 1fr; gap: 8px; }
  .dms-tline-time { font-size: 10.5px; padding: 4px 5px; }
  .kms-roadmap, .clr-stages, .esc-handbook, .omb-dims, .omb-phases { grid-template-columns: 1fr; }
  .esc-phase, .omb-phase { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .esc-phase:last-child, .omb-phase:last-child { border-bottom: none; }
  .omb-phase-arrow { display: none; }
  .oss-table-head, .oss-table-row { grid-template-columns: 1.4fr 1fr; }
  .oss-table-head>div:nth-child(n+3), .oss-table-row>div:nth-child(n+3) { display: none; }
  .sos-sla-head, .sos-sla-row { grid-template-columns: 1fr 1fr; }
  .sos-rings { grid-template-columns: repeat(2, 1fr); }
}

/* ===== About Page ===== */
.about-hero{background:linear-gradient(135deg,#0a0f1e 0%,#0f172a 50%,#0a1f0f 100%);padding:140px 0 100px;text-align:center;position:relative;overflow:hidden}
.about-hero::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(22,163,74,0.12) 0%,transparent 70%);pointer-events:none}
.about-hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(22,163,74,0.15);border:1px solid rgba(22,163,74,0.3);border-radius:100px;padding:6px 16px;font-size:13px;color:#4ade80;margin-bottom:24px}
.about-hero h1{font-size:64px;font-weight:900;color:#fff;line-height:1.1;margin-bottom:20px;letter-spacing:-1px}
.about-hero h1 .hl{background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-hero-sub{font-size:18px;color:#94a3b8;max-width:600px;margin:0 auto 48px;line-height:1.7}
.about-hero-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.ahs-item{text-align:center}
.ahs-num{font-size:36px;font-weight:800;color:#4ade80;line-height:1}
.ahs-label{font-size:13px;color:#64748b;margin-top:6px}
.manifesto{background:#fff;padding:100px 0;text-align:center}
.manifesto-inner{max-width:800px;margin:0 auto}
.manifesto h2{font-size:40px;font-weight:800;color:#0f172a;line-height:1.3;margin-bottom:12px}
.manifesto-lead{font-size:17px;color:#64748b;margin-bottom:48px;line-height:1.7}
.manifesto-lines{display:flex;flex-direction:column;gap:12px;margin:0 0 40px}
.manifesto-line{display:flex;align-items:center;gap:16px;background:#f8fafc;border-radius:12px;padding:18px 28px;text-align:left}
.ml-old{flex:1;font-size:15px;color:#94a3b8;text-decoration:line-through}
.ml-arrow{color:#16a34a;font-size:18px;flex-shrink:0;font-weight:700}
.ml-new{flex:1;font-size:15px;font-weight:600;color:#0f172a}
.manifesto-cta{font-size:20px;font-weight:700;color:#16a34a}
/* manifesto cards */
.manifesto-cards{display:flex;flex-direction:column;gap:10px;margin:0 0 48px;text-align:left}
.mc-card{border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff;transition:border-color .25s,box-shadow .25s,transform .2s;cursor:pointer}
.mc-card:hover{border-color:rgba(22,163,74,.35);box-shadow:0 6px 28px rgba(22,163,74,.1);transform:translateY(-2px)}
.mc-card.open{border-color:#16a34a;box-shadow:0 8px 32px rgba(22,163,74,.15)}
.mc-main{display:flex;align-items:center;gap:0;padding:0}
.mc-before{flex:1;padding:20px 24px;display:flex;align-items:center;gap:14px}
.mc-num{font-size:11px;font-weight:700;color:#cbd5e1;letter-spacing:.05em;flex-shrink:0}
.mc-before p{margin:0;font-size:15px;color:#94a3b8}
.mc-card.open .mc-before p,.mc-card:hover .mc-before p{color:#64748b}
.mc-btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#16a34a;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,transform .3s,box-shadow .2s;position:relative;overflow:hidden;margin:0 8px}
.mc-btn:hover{background:#15803d;box-shadow:0 4px 14px rgba(22,163,74,.4);transform:scale(1.1)}
.mc-btn:active{transform:scale(.92)}
.mc-btn svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.mc-card.open .mc-btn svg{transform:rotate(90deg)}
.mc-btn::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);opacity:0;transition:transform .4s,opacity .4s}
.mc-btn.ripple::after{transform:scale(2.5);opacity:0;transition:transform .4s,opacity .4s}
.mc-after{flex:1;padding:20px 24px}
.mc-after p{margin:0;font-size:15px;font-weight:600;color:#0f172a;transition:color .2s}
.mc-card.open .mc-after p,.mc-card:hover .mc-after p{color:#15803d}
.mc-detail{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .3s}
.mc-card.open .mc-detail{max-height:120px}
.mc-detail p{margin:0;padding:0 24px 20px;font-size:14px;color:#475569;line-height:1.75;border-top:1px solid #f1f5f9}
.company-intro{background:#f8fafc;padding:100px 0}
.ci-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ci-text h2{font-size:36px;font-weight:800;color:#0f172a;margin-bottom:20px;line-height:1.3}
.ci-text p{font-size:16px;color:#475569;line-height:1.8;margin-bottom:16px}
.ci-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ci-badge{background:rgba(22,163,74,0.08);border:1px solid rgba(22,163,74,0.2);border-radius:8px;padding:6px 14px;font-size:13px;color:#16a34a;font-weight:500}
.ci-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ci-stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:28px 20px;text-align:center;transition:transform 0.2s,box-shadow 0.2s}
.ci-stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
.ci-stat-card.featured{grid-column:span 2;background:linear-gradient(135deg,#16a34a,#0d9488);border-color:transparent}
.ci-stat-card.featured .csn,.ci-stat-card.featured .csl{color:#fff}
.ci-stat-card.featured .csl{opacity:0.85}
.csn{font-size:40px;font-weight:800;color:#16a34a;line-height:1}
.csl{font-size:13px;color:#64748b;margin-top:8px}
.pillars{background:#0f172a;padding:100px 0}
.pillars .section-tag{background:rgba(74,222,128,0.15);border-color:rgba(74,222,128,0.3);color:#4ade80}
.pillars .section-title{color:#fff}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.pillar-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px 32px;position:relative;overflow:hidden;transition:border-color 0.3s,background 0.3s}
.pillar-card:hover{border-color:rgba(74,222,128,0.3);background:rgba(74,222,128,0.04)}
.pillar-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0}
.pillar-card:nth-child(1)::before{background:linear-gradient(90deg,#4ade80,#22d3ee)}
.pillar-card:nth-child(2)::before{background:linear-gradient(90deg,#3b82f6,#8b5cf6)}
.pillar-card:nth-child(3)::before{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.pillar-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:28px}
.pillar-card:nth-child(1) .pillar-icon{background:rgba(74,222,128,0.15)}
.pillar-card:nth-child(2) .pillar-icon{background:rgba(59,130,246,0.15)}
.pillar-card:nth-child(3) .pillar-icon{background:rgba(245,158,11,0.15)}
.pillar-zh{font-size:32px;font-weight:900;color:#fff;margin-bottom:6px}
.pillar-en{font-size:12px;color:#4ade80;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.pillar-desc{font-size:14px;color:#94a3b8;line-height:1.7}
.pillar-items{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.pillar-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b}
.pillar-item::before{content:"✓";color:#4ade80;font-weight:700;flex-shrink:0}
.core-data-new{background:linear-gradient(135deg,#0a1f0f,#0f172a);padding:72px 0}
.cdn-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.cdn-item{text-align:center;padding:32px 16px;border-right:1px solid rgba(255,255,255,0.06)}
.cdn-item:last-child{border-right:none}
.cdn-num{font-size:40px;font-weight:800;color:#4ade80;line-height:1}
.cdn-unit{font-size:20px;font-weight:700;color:#4ade80}
.cdn-label{font-size:12px;color:#64748b;margin-top:8px}
.timeline-new{background:#fff;padding:100px 0}
.tln-track{position:relative;margin-top:60px}
.tln-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#16a34a,#0d9488,#3b82f6);transform:translateX(-50%)}
.tln-item{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;margin-bottom:48px;align-items:center}
.tln-content{padding:0 40px}
.tln-item:nth-child(odd) .tln-content{grid-column:1;text-align:right}
.tln-item:nth-child(odd) .tln-empty{grid-column:3}
.tln-item:nth-child(even) .tln-content{grid-column:3;text-align:left}
.tln-item:nth-child(even) .tln-empty{grid-column:1}
.tln-dot-wrap{grid-column:2;display:flex;justify-content:center;align-items:center;position:relative;z-index:1}
.tln-dot{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#0d9488);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;box-shadow:0 0 0 6px rgba(22,163,74,0.1)}
.tln-year{font-size:13px;font-weight:700;color:#16a34a;margin-bottom:6px}
.tln-title{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:6px}
.tln-desc{font-size:14px;color:#64748b;line-height:1.6}
.tln-badge{display:inline-block;background:rgba(22,163,74,0.08);border:1px solid rgba(22,163,74,0.2);border-radius:6px;padding:2px 8px;font-size:12px;color:#16a34a;font-weight:600;margin-top:8px}
.advantages{background:#f8fafc;padding:100px 0}
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.adv-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:32px;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s}
.adv-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.08);border-color:rgba(22,163,74,0.3)}
.adv-icon{width:48px;height:48px;border-radius:12px;background:rgba(22,163,74,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#16a34a}
.adv-card h4{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:10px}
.adv-card p{font-size:14px;color:#64748b;line-height:1.7}
@media(max-width:1024px){
  .about-hero h1{font-size:44px}
  .ci-grid{grid-template-columns:1fr;gap:40px}
  .pillars-grid{grid-template-columns:1fr}
  .cdn-grid{grid-template-columns:repeat(3,1fr)}
  .cdn-item:nth-child(3){border-right:none}
  .tln-track::before{left:24px;transform:none}
  .tln-item{grid-template-columns:48px 1fr}
  .tln-item:nth-child(odd) .tln-content,.tln-item:nth-child(even) .tln-content{grid-column:2;text-align:left;padding-left:24px;padding-right:0}
  .tln-item:nth-child(odd) .tln-empty,.tln-item:nth-child(even) .tln-empty{display:none}
  .tln-dot-wrap{grid-column:1}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .ac-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .about-hero h1{font-size:32px}
  .about-hero-stats{gap:24px}
  .manifesto h2{font-size:28px}
  .manifesto-line{flex-direction:column;gap:8px;text-align:center}
  .mc-before,.mc-after{padding:14px 16px}
  .mc-btn{margin:0 4px}
  .cdn-grid{grid-template-columns:repeat(2,1fr)}
  .cdn-item:nth-child(2){border-right:none}
  .adv-grid{grid-template-columns:1fr}
  .ci-visual{grid-template-columns:1fr 1fr}
}

/* ===== POSTS / KNOWLEDGE BASE ===== */
body.page-posts { background: #f8fafc; color: #0f172a; }
.ind-hero{background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0c1f0f 100%);padding:100px 0 80px}
.ind-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ind-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b;margin-bottom:20px}
.ind-breadcrumb a{color:#64748b;text-decoration:none}.ind-breadcrumb a:hover{color:#94a3b8}
.ind-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,0.12);color:#22d3ee;font-size:13px;font-weight:600;padding:6px 14px;border-radius:100px;margin-bottom:20px;border:1px solid rgba(6,182,212,0.25)}
.ind-hero h1{font-size:40px;font-weight:800;color:#fff;line-height:1.25;margin-bottom:16px}
.ind-hero h1 em{font-style:normal;color:#4ade80}
.ind-hero-desc{font-size:15px;color:#94a3b8;line-height:1.75;margin-bottom:28px;max-width:480px}
.ind-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.ind-hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ind-hs{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:20px;text-align:center}
.ind-hs-num{font-size:30px;font-weight:800;color:#4ade80;line-height:1}
.ind-hs-label{font-size:12px;color:#94a3b8;margin-top:6px}

.pain-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pain-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px;position:relative;overflow:hidden}
.pain-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ef4444,#f97316)}
.pain-icon{width:42px;height:42px;border-radius:10px;background:rgba(239,68,68,0.08);color:#ef4444;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pain-card h4{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:8px}
.pain-card p{font-size:13px;color:#64748b;line-height:1.65}
.pain-quote{font-size:12px;color:#94a3b8;font-style:italic;margin-top:12px;padding:10px 12px;background:#f8fafc;border-radius:6px;border-left:2px solid #e2e8f0}

.solution-list{display:flex;flex-direction:column;gap:32px}
.solution-item{display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:flex-start}
.solution-num{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.solution-item h4{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:8px}
.solution-item p{font-size:13px;color:#64748b;line-height:1.65;margin-bottom:10px}
.solution-tags{display:flex;flex-wrap:wrap;gap:6px}
.solution-tag{font-size:11px;padding:3px 9px;background:rgba(22,163,74,0.08);color:#16a34a;border-radius:4px;font-weight:500}

.svc-combo{background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:20px;padding:48px}
.svc-combo-head{margin-bottom:32px}
.svc-combo-head h3{font-size:22px;font-weight:700;color:#fff;margin-bottom:8px}
.svc-combo-head p{font-size:14px;color:#94a3b8}
.svc-combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-combo-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:20px;text-decoration:none;display:block;transition:all 0.2s}
.svc-combo-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(22,163,74,0.35);transform:translateY(-2px)}
.svc-combo-card.core{border-color:rgba(22,163,74,0.35);background:rgba(22,163,74,0.07)}
.svc-badge{font-size:10px;font-weight:700;letter-spacing:0.08em;color:#4ade80;margin-bottom:8px}
.svc-badge.core{color:#4ade80}
.svc-badge.support{color:#94a3b8}
.svc-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.svc-sub{font-size:12px;color:#94a3b8;line-height:1.5}

.case-study-wrap{background:#f8fafc;border-radius:20px;padding:48px}
.case-study-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.case-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(6,182,212,0.1);color:#06b6d4;font-size:12px;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:16px}
.case-study-wrap h3{font-size:22px;font-weight:700;color:#0f172a;margin-bottom:12px}
.case-quote{font-size:14px;color:#475569;line-height:1.75;padding:16px 20px;background:#fff;border-radius:10px;border-left:3px solid #16a34a;margin-bottom:20px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px}
.case-tag{font-size:12px;padding:4px 10px;background:#e2e8f0;border-radius:100px;color:#475569}
.case-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cmb{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;text-align:center}
.cmb-num{font-size:26px;font-weight:800;color:#16a34a;line-height:1}
.cmb-label{font-size:11px;color:#64748b;margin-top:6px}

.ind-cta{background:linear-gradient(135deg,rgba(22,163,74,0.06),rgba(13,148,136,0.06));border-top:1px solid rgba(22,163,74,0.1);padding:80px 0;text-align:center}
.ind-cta h2{font-size:34px;font-weight:700;color:#0f172a;margin-bottom:12px}
.ind-cta p{font-size:16px;color:#64748b;margin-bottom:32px}
.ind-cta-actions{display:flex;gap:16px;justify-content:center}

@media(max-width:1024px){.ind-hero-inner{grid-template-columns:1fr}.svc-combo-grid{grid-template-columns:repeat(2,1fr)}.case-study-inner{grid-template-columns:1fr}.pain-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.ind-hero h1{font-size:28px}.pain-grid{grid-template-columns:1fr}.svc-combo-grid{grid-template-columns:1fr}.case-metrics-grid{grid-template-columns:repeat(2,1fr)}.ind-cta-actions{flex-direction:column;align-items:center}.svc-combo{padding:28px}.case-study-wrap{padding:28px}}

/* end industry */

/* ===== Blog / Knowledge Base ===== */
.blog-hero {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #ecfdf5 100%);
  padding: 120px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #bbf7d0;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(22,163,74,0.1) 0%, transparent 70%);
}
.blog-hero-inner { position: relative; }
.blog-hero h1 { font-size: 2.5rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.blog-hero p { color: #64748b; font-size: 1.1rem; }
.blog-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(22,163,74,0.3);
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.filter-btn:hover, .filter-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.blog-search { position: relative; margin-bottom: 28px; }
.blog-search input {
  width: 100%;
  padding: 12px 44px 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.blog-search input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.1); }
.blog-search input::placeholder { color: #94a3b8; }
.blog-search svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.article-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}
.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22,163,74,0.4);
  box-shadow: 0 12px 40px rgba(22,163,74,0.1);
}
.article-cover {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.1));
}
.cover-tech     { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.cover-tech     .cover-icon { color: #3b82f6; }
.cover-security { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
.cover-security .cover-icon { color: #8b5cf6; }
.cover-db       { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.cover-db       .cover-icon { color: #16a34a; }
.cover-ops      { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.cover-ops      .cover-icon { color: #d97706; }
.cover-insight  { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); }
.cover-insight  .cover-icon { color: #0d9488; }
.cover-icon { position: relative; z-index: 1; opacity: 0.85; }
.cover-label {
  position: absolute; bottom: 12px; left: 16px; z-index: 2;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0,0,0,0.35);
}
.article-body { padding: 20px; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.article-category {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(22,163,74,0.1);
  color: #15803d;
  border: 1px solid rgba(22,163,74,0.2);
}
.article-date { font-size: 0.75rem; color: #94a3b8; }
.article-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-summary {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}
.article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.article-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.article-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.article-read-time { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; }
.blog-sidebar { position: sticky; top: 90px; }
.sidebar-widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.sidebar-widget--cta {
  background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(13,148,136,0.06));
  border-color: rgba(22,163,74,0.2);
}
.sidebar-widget--cta h3 { color: #15803d; }
.sidebar-widget h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.sidebar-cats { list-style: none; padding: 0; margin: 0; }
.sidebar-cats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}
.sidebar-cats li:last-child { border-bottom: none; }
.sidebar-cats a { color: #334155; font-size: 0.875rem; text-decoration: none; transition: color 0.2s; }
.sidebar-cats a:hover { color: #16a34a; }
.sidebar-cats .cat-count {
  font-size: 0.75rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 8px;
  border-radius: 10px;
}
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-tag {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 4px;
}
.sidebar-tag:hover { border-color: #16a34a; color: #16a34a; background: rgba(22,163,74,0.06); }
.tag-count { font-size: 0.7rem; background: #f1f5f9; border-radius: 8px; padding: 0 5px; line-height: 1.6; color: #94a3b8; }
.sidebar-tag:hover .tag-count { background: rgba(22,163,74,0.1); color: #16a34a; }
.sidebar-tag-more { display: block; margin-top: 6px; font-size: 0.78rem; color: #94a3b8; text-decoration: none; transition: color 0.2s; }
.sidebar-tag-more:hover { color: #16a34a; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 32px; flex-wrap: wrap; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.page-btn:hover, .page-btn.active {
  background: #16a34a;
  border-color: #16a34a;
    color: #fff;
  }

.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; grid-column: 1/-1; }
.blog-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.view-toggle { display: flex; gap: 3px; }
.view-btn {
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid #e2e8f0; background: #fff; color: #94a3b8;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.18s;
}
.view-btn.active, .view-btn:hover { background: rgba(22,163,74,0.1); border-color: rgba(22,163,74,0.3); color: #16a34a; }
.per-page-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #64748b; }
.per-page-wrap select {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 6px; color: #64748b; padding: 3px 8px; font-size: 0.78rem; cursor: pointer; outline: none;
}
.result-count { font-size: 0.78rem; color: #94a3b8; }
.articles-grid.view-list { display: flex; flex-direction: column; gap: 6px; }
.articles-grid.view-list .article-card { display: flex; align-items: center; }
.articles-grid.view-list .article-cover { display: none; }
.articles-grid.view-list .article-body {
  padding: 10px 14px; flex: 1; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0;
}
.articles-grid.view-list .article-meta { margin-bottom: 0; flex-shrink: 0; }
.articles-grid.view-list .article-title { font-size: 0.875rem; margin-bottom: 0; -webkit-line-clamp: 1; min-width: 0; }
.articles-grid.view-list .article-summary { display: none; }
.articles-grid.view-list .article-footer { border-top: none; padding-top: 0; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 3px; }
.articles-grid.view-list .article-tags { display: none; }
.page-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.page-ellipsis { color: #94a3b8; font-size: 0.8rem; padding: 0 4px; }
@media (max-width: 900px) { .blog-main { grid-template-columns: 1fr; } .blog-sidebar { position: static; } }
@media (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; } .blog-hero h1 { font-size: 1.8rem; } }

/* Single post */
.post-hero {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #ecfdf5 100%);
  padding: 120px 0 48px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #bbf7d0;
}
.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(22,163,74,0.08) 0%, transparent 70%);
}
.post-cover-banner { position: absolute; inset: 0; opacity: 0.12; }
.post-hero-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.post-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: #64748b; margin-bottom: 20px;
}
.post-breadcrumb a { color: #16a34a; text-decoration: none; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb span { color: #94a3b8; }
.post-category-badge {
  display: inline-block;
  font-size: 0.8rem; padding: 3px 12px; border-radius: 12px;
  background: rgba(22,163,74,0.1); color: #15803d;
  border: 1px solid rgba(22,163,74,0.2); margin-bottom: 16px;
}
.post-title { font-size: 2rem; font-weight: 700; color: #0f172a; line-height: 1.4; margin-bottom: 20px; }
.post-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.post-meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #64748b; }
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.post-tag {
  font-size: 0.78rem; padding: 3px 10px; border-radius: 4px;
  background: rgba(22,163,74,0.08); color: #15803d;
  border: 1px solid rgba(22,163,74,0.2);
  text-decoration: none; transition: all 0.2s;
}
.post-tag:hover { color: #16a34a; border-color: #16a34a; background: rgba(22,163,74,0.12); }
.post-layout {
  max-width: 1100px; margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid; grid-template-columns: 1fr 260px;
  gap: 48px; align-items: start;
}
.post-content {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px; padding: 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
  color: #0f172a; margin: 1.8em 0 0.8em; line-height: 1.4;
}
.post-content h1 { font-size: 1.6rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.post-content h2 { font-size: 1.3rem; }
.post-content h3 { font-size: 1.1rem; color: #334155; }
.post-content h4 { font-size: 1rem; color: #475569; }
.post-content p { color: #475569; line-height: 1.8; margin: 1em 0; font-size: 0.95rem; }
.post-content ul, .post-content ol { color: #475569; padding-left: 1.5em; margin: 1em 0; line-height: 1.8; font-size: 0.95rem; }
.post-content li { margin: 0.4em 0; }
.post-content strong { color: #0f172a; }
.post-content em { color: #64748b; }
.post-content a { color: #16a34a; text-decoration: none; }
.post-content a:hover { text-decoration: underline; }
.post-content hr { border: none; border-top: 1px solid #f1f5f9; margin: 2em 0; }
.post-content blockquote {
  border-left: 3px solid #16a34a; padding: 12px 20px; margin: 1.5em 0;
  background: rgba(22,163,74,0.04); border-radius: 0 8px 8px 0;
  color: #475569; font-style: italic;
}
.post-content code {
  background: rgba(22,163,74,0.08); color: #15803d;
  padding: 2px 6px; border-radius: 4px;
  font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 0.875em;
}
.post-content pre {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 20px; overflow-x: auto; margin: 1.5em 0;
}
.post-content pre code { background: none; color: #334155; padding: 0; font-size: 0.875rem; line-height: 1.7; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9rem; }
.post-content th {
  background: rgba(22,163,74,0.06); color: #0f172a;
  padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(22,163,74,0.15);
}
.post-content td { padding: 10px 14px; color: #475569; border-bottom: 1px solid #f1f5f9; }
.post-content tr:last-child td { border-bottom: none; }
.post-content img { max-width: 100%; border-radius: 8px; margin: 1em 0; }
.post-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid #f1f5f9;
}
.back-btn {
    display: flex; align-items: center; gap: 8px;
  color: #16a34a; text-decoration: none; font-size: 0.9rem;
  transition: gap 0.2s;
}
.back-btn:hover { gap: 12px; }
.copy-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b; padding: 8px 16px; border-radius: 8px;
  cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
}
.copy-btn:hover { border-color: #16a34a; color: #16a34a; }
.post-sidebar { position: sticky; top: 90px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.toc-list li:last-child { border-bottom: none; }
.toc-list a { font-size: 0.85rem; color: #64748b; text-decoration: none; display: block; transition: color 0.2s; line-height: 1.4; }
.toc-list a:hover, .toc-list a.active { color: #16a34a; }
.toc-h3 { padding-left: 12px; }
.toc-h3 a { font-size: 0.8rem; }
.related-post {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none; transition: opacity 0.2s;
}
.related-post:last-child { border-bottom: none; }
.related-post:hover { opacity: 0.75; }
.related-post-icon {
  width: 36px; height: 36px; border-radius: 6px;
  background: rgba(22,163,74,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.related-post-title {
  font-size: 0.82rem; color: #475569; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
  .post-title { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .post-content { padding: 24px 16px; }
  .post-title { font-size: 1.3rem; }
}