/* 振邦消防 · Ember Industrial v2 — 工业精密 + 余烬橙 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  --fire-50: #2a1510;
  --fire-100: #3d1c12;
  --fire-400: #ff7a3d;
  --fire-500: #ff4d1a;
  --fire-600: #e03a0c;
  --fire-700: #b02c08;
  --navy-400: #9aa8b8;
  --navy-500: #6b7c90;
  --navy-600: #c5ced8;
  --navy-700: #e8edf2;
  --navy-800: #0b0d10;
  --ink: #0b0d10;
  --steel: #141a22;
  --steel-2: #1c2430;
  --ember: #ff4d1a;
  --ember-glow: rgba(255, 77, 26, 0.35);
  --paper: #f2efe8;
  --muted: #8b96a5;
  --radius-lg: 2px;
  --surface-gray: #121820;
  --font-display: 'Barlow Condensed', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', system-ui, sans-serif;
  --transition-fast: 0.22s cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.nav-brand,.number,.section-title,.hero-content h1 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* NAV — dark glass */
.nav {
  background: rgba(11,13,16,0.82) !important;
  border-bottom: 1px solid rgba(255,77,26,0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav.scrolled { box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important; }
.nav-brand { color: var(--paper) !important; font-size: 1.35rem !important; }
.brand-accent, .nav-brand .brand-accent { color: var(--ember) !important; }
.brand-icon {
  background: linear-gradient(135deg, var(--ember), #ff8a4c) !important;
  color: #fff !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px var(--ember-glow);
}
.nav-links a { color: var(--muted) !important; }
.nav-links a:hover { color: var(--ember) !important; }
.nav-cta {
  background: var(--ember) !important;
  color: #fff !important;
  border-radius: 2px !important;
  box-shadow: 0 0 24px var(--ember-glow);
}
.nav-cta:hover { background: var(--fire-600) !important; transform: translateY(-1px); }
.nav-phone { color: var(--paper) !important; }
.nav-phone svg { color: var(--ember) !important; }
.nav-toggle svg { color: var(--paper) !important; stroke: var(--paper) !important; }

/* HERO — full-bleed industrial */
.hero {
  min-height: 100vh !important;
  background: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
}
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(255,77,26,0.28), transparent 55%),
    linear-gradient(105deg, rgba(11,13,16,0.88) 0%, rgba(11,13,16,0.45) 55%, rgba(11,13,16,0.25) 100%),
    url('/images/hero.webp?v=20') center/cover no-repeat !important;
  background-size: cover !important;
  transform: scale(1.03);
  animation: heroDrift 20s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.03) translate3d(0,0,0); }
  to { transform: scale(1.07) translate3d(-1%, -0.6%, 0); }
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(11,13,16,0.92) 0%, rgba(11,13,16,0.55) 55%, rgba(11,13,16,0.35) 100%) !important;
}
.hero-grid-pattern {
  background-image:
    linear-gradient(rgba(255,77,26,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,77,26,0.06) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse at 40% 50%, black 20%, transparent 70%);
}
.hero-content { max-width: 720px; }
.hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,77,26,0.1) !important;
  border: 1px solid rgba(255,77,26,0.35) !important;
  color: var(--fire-400) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: fadeUp 0.7s ease both;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember);
  animation: pulse 1.8s ease-in-out infinite;
}
.hero-content h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 1.1rem 0 !important;
  animation: fadeUp 0.8s 0.08s ease both;
}
.hero-content h1 .highlight,
.hero-content .highlight {
  color: var(--ember) !important;
  background: none !important;
  -webkit-text-fill-color: var(--ember);
  position: relative;
}
.hero-desc {
  color: var(--muted) !important;
  font-size: 1.05rem !important;
  max-width: 34em;
  animation: fadeUp 0.8s 0.16s ease both;
}
.hero-actions { animation: fadeUp 0.8s 0.24s ease both; }
.btn-primary {
  background: var(--ember) !important;
  color: #fff !important;
  border-radius: 2px !important;
  border: none !important;
  box-shadow: 0 0 0 0 var(--ember-glow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast) !important;
}
.btn-primary:hover {
  background: #ff6433 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--ember-glow) !important;
}
.btn-secondary {
  background: transparent !important;
  color: var(--paper) !important;
  border: 1px solid rgba(242,239,232,0.28) !important;
  border-radius: 2px !important;
}
.btn-secondary:hover {
  border-color: var(--ember) !important;
  color: var(--ember) !important;
}
.hero-stats-bar {
  background: rgba(20,26,34,0.92) !important;
  border-top: 1px solid rgba(255,77,26,0.25) !important;
  backdrop-filter: blur(10px);
}
.hero-stat .number { color: #fff !important; font-size: 2.4rem !important; }
.hero-stat .accent { color: var(--ember) !important; }
.hero-stat .label { color: var(--muted) !important; letter-spacing: 0.06em; }

/* Sections */
.section, section {
  background: var(--ink);
}
.section-label, .sec-label {
  color: var(--ember) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.section-title, .sec-title, h2 {
  color: var(--paper) !important;
}
.section-desc, .sec-desc, .section p {
  color: var(--muted);
}
.section-line {
  background: linear-gradient(90deg, var(--ember), transparent) !important;
  height: 2px !important;
  border-radius: 0 !important;
}

/* Cards — industrial panels, not soft cards */
.service-card, .case-card, .article-card, .process-step, .advantage-item, .stat-card {
  background: var(--steel) !important;
  border: 1px solid rgba(255,77,26,0.12) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.service-card:hover, .case-card:hover, .article-card:hover {
  border-color: rgba(255,77,26,0.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 24px rgba(255,77,26,0.08) !important;
}
.service-card h3, .case-card h3, .article-card h4, .process-step h3 {
  color: var(--paper) !important;
}
.service-card p, .case-card p, .article-card p, .process-step p {
  color: var(--muted) !important;
}
.service-icon, .process-num, .service-num {
  color: var(--ember) !important;
  background: rgba(255,77,26,0.1) !important;
  border-radius: 2px !important;
}
.service-item span, .tag, .article-tag {
  background: rgba(255,77,26,0.08) !important;
  color: var(--fire-400) !important;
  border: 1px solid rgba(255,77,26,0.2);
  border-radius: 2px !important;
}
.read-more { color: var(--ember) !important; }

/* Contact / footer */
.contact, .footer, footer, .cta-banner {
  background: var(--steel) !important;
  border-top: 1px solid rgba(255,77,26,0.2) !important;
  color: var(--paper) !important;
}
.footer a, footer a { color: var(--muted) !important; }
.footer a:hover, footer a:hover { color: var(--ember) !important; }
input, textarea, select {
  background: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--paper) !important;
  border-radius: 2px !important;
}
input:focus, textarea:focus {
  border-color: var(--ember) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ember-glow) !important;
}

/* Page heroes on inner pages */
.page-hero, .about-page-hero-bg {
  filter: saturate(1.05) contrast(1.05);
}
.page-hero .hero-overlay {
  background: linear-gradient(180deg, rgba(11,13,16,0.7), rgba(11,13,16,0.85)) !important;
}


/* ===== Advantages — Ember Industrial align ===== */
.advantages-section {
  background: var(--ink) !important;
  padding: 5rem 0 !important;
}
.advantages-section .section-tag,
.advantages-section .section-label {
  color: var(--ember) !important;
  letter-spacing: 0.18em !important;
}
.advantages-section .section-title {
  color: var(--paper) !important;
}
.advantages-section .section-subtitle {
  color: var(--muted) !important;
  font-size: 1rem !important;
}

.advantage-card {
  text-align: center;
  padding: 2rem 1.35rem !important;
  background: var(--steel) !important;
  border: 1px solid rgba(255, 77, 26, 0.14) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast) !important;
}
.advantage-card:hover {
  background: var(--steel-2) !important;
  border-color: rgba(255, 77, 26, 0.5) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 28px rgba(255,77,26,0.12) !important;
  transform: translateY(-5px) !important;
}
.advantage-card h4 {
  color: var(--paper) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.55rem !important;
}
.advantage-card p {
  color: #a8b3c0 !important;
  font-size: 0.9rem !important;
  line-height: 1.65 !important;
}
.advantage-card:hover h4 {
  color: #fff !important;
}
.advantage-card:hover p {
  color: #d2dae4 !important;
}

.advantage-icon,
.advantage-icon:not(.fi):not(.ni),
.advantage-icon.fi,
.advantage-icon.ni {
  background: rgba(255, 77, 26, 0.1) !important;
  color: var(--ember) !important;
  border: 1px solid rgba(255, 77, 26, 0.22);
  border-radius: 2px !important;
}
.advantage-card:hover .advantage-icon,
.advantage-card:hover .advantage-icon:not(.fi):not(.ni) {
  background: rgba(255, 77, 26, 0.2) !important;
  color: #ff8a4c !important;
  border-color: rgba(255, 77, 26, 0.45) !important;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .hero-content h1 { font-size: 2.35rem !important; }
  .nav-links {
    background: rgba(11,13,16,0.97) !important;
  }
}