/* ============================================
   马户科技官网 v10 — 多页面版
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  --bg-void: #03060d; --bg-deep: #060a12; --bg-surface: #0a0f1a;
  --bg-panel: #0d1424; --bg-card: #111a2e;
  --border: rgba(255,255,255,0.06); --border-bright: rgba(255,255,255,0.1);
  --text-primary: #e2e8f0; --text-secondary: #64748b; --text-muted: #334155;
  --accent-green: #00ff88; --accent-cyan: #00d4ff; --accent-purple: #8b5cf6;
  --accent-amber: #f59e0b; --accent-red: #f87171;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-ui: 'Inter', 'Noto Sans SC', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-ui); background: var(--bg-void); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* BACKGROUND */
.page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139,92,246,0.03) 0%, transparent 50%),
    linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px; }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px;
  background: rgba(3,6,13,0.85); backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; filter: drop-shadow(0 0 12px rgba(0,255,136,0.2)); }
.nav-brand img { width: 30px; height: 30px; }
.nav-brand span { font-size: 16px; font-weight: 800; background: linear-gradient(90deg, #00ff88, #00d4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 7px 14px; border-radius: 8px; transition: all 0.25s; }
.nav-links a:hover, nav a.active { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.nav-cta { background: linear-gradient(90deg, #00ff88, #00d4ff) !important; color: #000 !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: 0 0 16px rgba(0,255,136,0.2); }
nav .mobile-menu-btn { display: none; background: none; border: none; color: var(--text-primary); font-size: 24px; cursor: pointer; }

/* SCROLL PROGRESS */
.scroll-progress { position: fixed; top: 64px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #00ff88, #00d4ff, #8b5cf6); z-index: 999; width: 0%; transition: width 0.08s linear; }

/* PAGE HEADER (sub-pages) */
.page-header { padding: 140px 80px 80px; position: relative; z-index: 1; }
.page-header .ph-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 16px; }
.page-header h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 900; letter-spacing: -2px; line-height: 1.1; background: linear-gradient(180deg, #fff 0%, rgba(200,210,230,0.65) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
.page-header p { font-size: 17px; color: var(--text-secondary); max-width: 540px; line-height: 1.85; }

/* SECTION COMMON */
.section { position: relative; z-index: 1; padding: 100px 80px; }
.section-alt { background: linear-gradient(180deg, transparent 0%, rgba(0,255,136,0.015) 50%, transparent 100%); }
.section-dark { background: var(--bg-deep); }
.section-title { font-size: clamp(26px, 3.5vw, 44px); font-weight: 900; letter-spacing: -1.5px; margin-bottom: 12px; background: linear-gradient(180deg, #fff 0%, rgba(200,210,230,0.65) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-sub { font-size: 16px; color: var(--text-secondary); max-width: 520px; line-height: 1.85; margin-bottom: 48px; }
.container { max-width: 1100px; margin: 0 auto; }

/* SCENE DIVIDER */
.scene-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,255,136,0.08), transparent); position: relative; z-index: 1; }

/* BUTTONS */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(90deg, #00ff88, #00d4ff); color: #000; font-weight: 700; font-size: 14px; padding: 13px 28px; border-radius: 10px; text-decoration: none; box-shadow: 0 0 20px rgba(0,255,136,0.2); transition: all 0.3s var(--ease); }
.btn-primary:hover { box-shadow: 0 0 32px rgba(0,255,136,0.35); transform: translateY(-2px); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text-primary); font-weight: 600; font-size: 14px; padding: 13px 28px; border-radius: 10px; text-decoration: none; border: 1px solid var(--border-bright); transition: all 0.3s; }
.btn-secondary:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--accent-green); font-weight: 600; font-size: 13px; padding: 10px 20px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(0,255,136,0.2); transition: all 0.3s; }
.btn-ghost:hover { background: rgba(0,255,136,0.05); border-color: rgba(0,255,136,0.4); }

/* CARDS */
.card { background: rgba(10,15,26,0.9); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; transition: all 0.35s var(--ease); }
.card:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }

/* TAGS */
.tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.tag-red { background: rgba(248,113,113,0.08); color: var(--accent-red); border: 1px solid rgba(248,113,113,0.15); }
.tag-green { background: rgba(0,255,136,0.08); color: var(--accent-green); border: 1px solid rgba(0,255,136,0.15); }
.tag-cyan { background: rgba(0,212,255,0.08); color: var(--accent-cyan); border: 1px solid rgba(0,212,255,0.15); }
.tag-amber { background: rgba(245,158,11,0.08); color: var(--accent-amber); border: 1px solid rgba(245,158,11,0.15); }

/* FOOTER */
footer { border-top: 1px solid var(--border); padding: 48px; text-align: center; background: var(--bg-deep); position: relative; z-index: 1; }
footer p { color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); }
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; }
.footer-links a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent-green); }

/* FLOATING CTA */
.floating-cta { position: fixed; bottom: 28px; right: 28px; z-index: 999; opacity: 0; transform: translateY(16px) scale(0.95); transition: all 0.4s var(--ease); pointer-events: none; }
.floating-cta.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.floating-cta a { display: flex; align-items: center; gap: 8px; background: var(--bg-panel); border: 1px solid rgba(0,255,136,0.25); color: var(--accent-green); font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 10px 18px; border-radius: 8px; text-decoration: none; box-shadow: 0 0 16px rgba(0,255,136,0.08); transition: all 0.3s; }
.floating-cta a:hover { background: rgba(0,255,136,0.05); border-color: rgba(0,255,136,0.4); }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* HERO STATS */
.stat-row { display: flex; gap: 48px; justify-content: center; margin-top: 48px; }
.stat-item { text-align: center; }
.stat-item .si-val { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--accent-green); }
.stat-item .si-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* GRID LAYOUTS */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* CTA SECTION */
.cta-section { position: relative; z-index: 1; padding: 120px 80px; text-align: center; }
.cta-section h2 { font-size: clamp(28px, 4.5vw, 56px); font-weight: 900; letter-spacing: -2px; margin-bottom: 16px; background: linear-gradient(180deg, #fff 0%, rgba(200,210,230,0.7) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.cta-section p { color: var(--text-secondary); font-size: 16px; margin-bottom: 40px; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* FORMS */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; background: rgba(10,15,26,0.9); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; color: var(--text-primary); font-family: var(--font-ui); font-size: 14px; transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group textarea:focus { border-color: rgba(0,255,136,0.4); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-error { color: var(--accent-red); font-size: 12px; margin-top: 6px; display: none; }
.form-group.error input { border-color: var(--accent-red); }
.form-group.error .form-error { display: block; }

/* SCENE TAG */
.scene-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 16px; }
.tag-problem { background: rgba(248,113,113,0.08); color: var(--accent-red); border: 1px solid rgba(248,113,113,0.15); }

/* QUOTE */
.quote-box { background: rgba(0,212,255,0.03); border-left: 2px solid rgba(0,212,255,0.3); padding: 16px 20px; border-radius: 0 12px 12px 0; margin-top: 32px; }
.quote-box p { font-size: 13.5px; color: var(--text-secondary); font-style: italic; line-height: 1.8; }
.quote-box .quote-source { font-size: 11px; color: var(--text-muted); margin-top: 8px; font-style: normal; font-family: var(--font-mono); }

/* BADGE */
.badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-red { background: rgba(248,113,113,0.1); color: var(--accent-red); }
.badge-green { background: rgba(0,255,136,0.1); color: var(--accent-green); }
.badge-amber { background: rgba(245,158,11,0.1); color: var(--accent-amber); }

/* MOBILE MENU */
.mobile-nav { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(3,6,13,0.95); backdrop-filter: blur(24px); flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: 18px; color: var(--text-primary); text-decoration: none; padding: 12px 24px; border-radius: 10px; transition: background 0.2s; }
.mobile-nav a:hover { background: rgba(255,255,255,0.05); }
.mobile-nav-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--text-primary); font-size: 28px; cursor: pointer; }

/* BACK TO TOP */
.back-to-top { position: fixed; bottom: 28px; left: 28px; z-index: 999; opacity: 0; transform: translateY(16px); transition: all 0.4s var(--ease); pointer-events: none; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-to-top a { display: flex; align-items: center; gap: 6px; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; padding: 9px 14px; border-radius: 8px; text-decoration: none; transition: all 0.3s; }
.back-to-top a:hover { border-color: rgba(255,255,255,0.15); color: var(--text-primary); }

/* RESPONSIVE */
@media (max-width: 900px) {
  nav { padding: 0 24px; }
  nav .nav-links { display: none; }
  nav .mobile-menu-btn { display: block; }
  .page-header { padding: 120px 24px 60px; }
  .section { padding: 80px 24px; }
  .cta-section { padding: 80px 24px; }
  .section-title { font-size: clamp(24px, 6vw, 36px); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { gap: 24px; flex-wrap: wrap; }
  footer { padding: 40px 24px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .back-to-top { left: auto; right: 24px; }
  .floating-cta { right: 24px; }
}

/* ===== ARTICLE PAGE ===== */
.article-page {
    padding: 80px 0 60px;
}
.article-body {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary);
}
.article-body h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 36px 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.article-body p {
    margin-bottom: 18px;
}
.article-body strong {
    color: var(--text-primary);
    font-weight: 600;
}