/* =============================================
   博广电器 — Data-Driven Professional System
   Klein Blue · Mono-data · Dashboard-grade
   ============================================= */

/* =============================================
   Self-hosted Fonts (zero external dependencies)
   ============================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-variable.woff2') format('woff2');
}

:root {
  /* === Core Palette === */
  --ink-900: #0A0A0A;
  --ink-800: #161616;
  --ink-700: #262626;
  --ink-600: #404040;
  --ink-500: #525252;
  --ink-400: #737373;
  --ink-300: #A3A3A3;
  --ink-200: #D4D4D4;
  --ink-100: #E5E5E5;
  --ink-50:  #F5F5F5;
  --paper:   #FAFAFA;
  --paper-warm: #FAFAF9;
  --white:   #FFFFFF;

  /* Motion */
  --duration-fast: 200ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Brand accent — softer service blue */
  --accent:         #4C80CB;
  --accent-hover:   #3F73BD;
  --accent-action:  #4C80CB;
  --accent-action-hover: #3F73BD;
  --accent-tint:    #EEF4FC;
  --accent-soft:    #D9E7F8;

  /* Semantic */
  --ok:   #00C853;
  --warn: #FFB800;

  /* Warm accent — muted earth tone for background-level warmth */
  --ember:         #B87848;

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale */
  --text-caption: 11px;
  --text-body: 15px;
  --text-subheading: 17px;
  --text-heading-sm: 20px;
  --text-heading: 28px;
  --text-heading-md: 34px;
  --text-heading-lg: 56px;
  --text-display: 120px;

  /* Spacing */
  --spacing-4: 4px;  --spacing-8: 8px;  --spacing-12: 12px;
  --spacing-16: 16px;  --spacing-24: 24px;  --spacing-32: 32px;
  --spacing-40: 40px;  --spacing-56: 56px;  --spacing-76: 76px;

  /* Layout */
  --page-max-width: 1280px;
  --card-padding: 28px;

  /* Radius (sharp & technical) */
  --radius-cards: 2px;
  --radius-panels: 2px;
  --radius-buttons: 0px;
  --radius-featuredcards: 2px;

  /* Borders (the defining visual element of this style) */
  --border: 1px solid var(--ink-200);
  --border-strong: 1px solid var(--ink-900);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* Anchor jump offset to avoid being hidden under fixed header */
section[id]{scroll-margin-top:80px}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.5;
  color:var(--ink-900);
  background:var(--paper-warm);
  font-feature-settings:'ss01','cv11';
  background-image:
    linear-gradient(rgba(0,47,167,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,47,167,0.018) 1px, transparent 1px);
  background-size:48px 48px;
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* Mono everywhere we show numbers or labels */
.mono, .data, .meta-row span, .serif-number,
.hero-stat, .cta-contact-phone, .cat-label, .counter-num {
  font-family:var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:-0.01em;
}

/* Labels — ALL CAPS mono, the signature element */
.eyebrow,
.trust-bar-label,
.cat-label,
.form-group label,
.filter-tag {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-400);
}

/* --- Container --- */
.container{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-32)}

/* --- Typography --- */
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.heading-lg{
  font-family:var(--font-display);
  font-size:var(--text-heading-lg);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.02;
}
.heading{font-size:var(--text-heading);font-weight:600;letter-spacing:-0.02em}
.body-text{font-size:var(--text-body);line-height:1.6;color:var(--ink-500)}

/* --- Buttons (sharp, hard edges) --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--spacing-8);
  font-family:var(--font-sans);
  font-size:14px;font-weight:500;line-height:1;
  padding:13px 24px;
  border:1px solid var(--ink-900);
  border-radius:0;
  cursor:pointer;transition:all .15s ease;
  white-space:nowrap;background:transparent;color:var(--ink-900);
}
.btn:hover{background:var(--ink-900);color:var(--white)}
.btn::after{content:'→';font-family:var(--font-mono);font-weight:400;transition:transform .15s}
.btn:hover::after{transform:translateX(3px)}

.btn-primary{
  background:var(--accent-action);color:var(--white);
  border-color:var(--accent-action);
}
.btn-primary:hover{background:var(--accent-action-hover);border-color:var(--accent-action-hover);color:var(--white)}

.btn-nav{
  border-radius:0;
  background:var(--accent-action);color:var(--white);
  border:1px solid var(--accent-action);
  padding:9px 20px;
  font-size:13px;
}
.btn-nav:hover{background:var(--accent-action-hover);color:var(--white)}
.btn-nav::after{display:none}

.lang-toggle{
  background:none;border:1px solid var(--ink-300);
  color:var(--ink-600);cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:0.08em;
  padding:7px 14px;border-radius:0;
  transition:all .2s;
  margin-left:var(--spacing-8);
  line-height:1;
}
.lang-toggle:hover{
  border-color:var(--ink-900);color:var(--ink-900);
  background:var(--ink-100);
}

.btn-on-dark{
  background:var(--white);color:var(--ink-900);
  border-color:var(--white);
}
.btn-on-dark:hover{background:var(--accent-action);color:var(--white);border-color:var(--accent-action)}

/* Arrow link */
.arrow-link{
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--accent);
  transition:opacity .15s;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.arrow-link:hover{
  opacity:.75;
  padding-right:4px;
}
.arrow-link::after{content:' →'}

/* --- Header --- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(250,250,249,0.94);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.header.scrolled{border-color:rgba(10,10,10,0.12);background:rgba(250,250,249,0.95);backdrop-filter:blur(12px)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.header-logo{display:flex;align-items:center}
.header-logo img{
  display:block;
  width:auto;
  height:38px;
  max-width:132px;
  object-fit:contain;
}
.header-nav{display:flex;align-items:center;gap:var(--spacing-4)}
.header-nav a{
  font-size:14px;font-weight:500;
  color:var(--ink-700);
  padding:22px 16px;
  transition:color .15s;
  position:relative;
}
.header-nav a:hover{color:var(--ink-900)}
.header-nav a.active{color:var(--ink-900)}
.header-nav a::after{
  content:'';position:absolute;bottom:20px;left:16px;right:16px;
  height:2px;background:var(--accent);
  transform:scaleX(0);transition:transform .2s ease;
  transform-origin:left;
}
.header-nav a:hover::after,
.header-nav a.active::after{transform:scaleX(1)}
.header-nav .btn-nav::after{display:none}

/* Nav backdrop overlay */
.nav-overlay{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.3);
  z-index:99;
  opacity:0;
  transition:opacity .2s;
}
.nav-overlay.active{
  display:block;
  opacity:1;
}

.mobile-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.mobile-toggle span{
  display:block;width:22px;height:2px;
  background:var(--ink-900);
  transition:all .3s;
}

/* =============================================
   HERO — Dashboard Style
   Left: giant metric.  Right: data rail.
   ============================================= */
.hero-split{
  padding:124px 0 84px;
  display:grid;grid-template-columns:1.8fr 0.85fr;
  gap:var(--spacing-76);
  align-items:start;
  border-bottom:1px solid rgba(10,10,10,0.12);
  position:relative;
  overflow:hidden;
}
.hero-split::before{
  content:'';position:absolute;
  top:120px;bottom:80px;
  left:calc(68% - var(--spacing-76)/2);
  width:1px;background:linear-gradient(to bottom, transparent, rgba(10,10,10,0.14), transparent);
}
.hero-split::after{
  content:'';position:absolute;
  top:7%;right:-4%;
  width:42%;height:78%;
  background:linear-gradient(135deg, rgba(0,47,167,0.08), rgba(184,120,72,0.08));
  border:1px solid rgba(0,47,167,0.08);
  pointer-events:none;z-index:0;
  clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  opacity:.75;
}
.hero-split h1{
  font-family:var(--font-display);
  font-size:clamp(40px, 5.2vw, 68px);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--ink-900);
  margin-bottom:var(--spacing-24);
  max-width:740px;
}

/* Hero left column — vertical rhythm */
.hero-left{
  display:flex;flex-direction:column;
  min-height:520px;
  position:relative;
  z-index:1;
}
.hero-left .hero-desc{
  font-size:17px;
  line-height:1.55;
  color:var(--ink-500);
  max-width:560px;
  margin-bottom:var(--spacing-32);
}
.hero-proof-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:680px;
  margin-bottom:var(--spacing-40);
  border:1px solid rgba(10,10,10,0.14);
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(8px);
}
.hero-proof-strip span{
  padding:var(--spacing-12) var(--spacing-16);
  border-right:1px solid rgba(10,10,10,0.1);
  font-size:12px;
  line-height:1.45;
  color:var(--ink-500);
}
.hero-proof-strip span:last-child{border-right:none}
.hero-proof-strip strong{
  display:block;
  margin-bottom:2px;
  color:var(--ink-900);
  font-size:13px;
  font-weight:700;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--spacing-12);
  border:none;
  padding:0;
  margin-bottom:var(--spacing-16);
  background:transparent;
}
.hero-badge-icon{
  width:42px;height:auto;
  display:block;
}
.hero-badge--right{
  margin-top:var(--spacing-24);
  display:flex;
}
.hero-badge-body{
  display:flex;flex-direction:column;gap:3px;
}
.hero-badge-label{
  font-family:var(--font-mono);
  font-size:10px;color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.1em;
  line-height:1;
}
.hero-badge-name{
  font-family:var(--font-sans);
  font-size:14px;font-weight:600;
  color:var(--ink-900);
}
.hero-badge-name strong{color:var(--accent);font-weight:700}

.hero-left .hero-cta-row{
  display:flex;gap:var(--spacing-12);
  margin-bottom:var(--spacing-40);
}
.hero-left .hero-meta{
  margin-top:auto;
  padding-top:var(--spacing-24);
  border-top:1px solid var(--ink-200);
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.12em;
  flex-wrap:wrap;gap:var(--spacing-16);
}
.hero-left .hero-meta span strong{color:var(--ink-900);font-weight:500}

.hero-split .hero-body{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-500);
  max-width:420px;
  position:relative;
  z-index:1;
}
.hero-split .hero-body p{display:none}
.hero-panel{
  border:1px solid rgba(10,10,10,0.16);
  background:rgba(255,255,255,0.82);
  box-shadow:0 18px 50px rgba(10,10,10,0.06);
  padding:var(--spacing-24);
}

/* Hero right rail — key metrics */
.hero-stats{
  display:flex;flex-direction:column;
  gap:0;
  margin-top:0;
  padding:0;
  border-top:none;
  margin-top:var(--spacing-16);
}
.hero-stat{
  font-family:var(--font-mono);
  font-size:13px;font-weight:500;
  color:var(--ink-900);
  padding:var(--spacing-16) 0;
  border-bottom:1px solid rgba(10,10,10,0.1);
  display:flex;justify-content:space-between;align-items:baseline;
}
.hero-stat:first-child{border-top:1px solid rgba(10,10,10,0.1)}
.hero-stat::before{
  content:attr(data-key);
  font-size:11px;color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.1em;
}
.hero-stat::after{
  content:attr(data-val);
  font-family:var(--font-display);
  font-size:18px;font-weight:600;color:var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.hero-stat.highlight::after{color:var(--accent)}
.hero-assurance-card{
  margin-top:var(--spacing-12);
  padding:8px var(--spacing-24);
  border:1px solid rgba(0,47,167,0.18);
  background:linear-gradient(135deg, rgba(232,237,249,0.9), rgba(255,255,255,0.86));
}
.hero-assurance-card .hero-badge{
  margin:0;
}
.hero-assurance-card .hero-badge--right{
  margin-top:0;
}
.hero-assurance-card p{
  display:block;
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:var(--ink-600);
}

/* =============================================
   TICKER BAR — Data rail (below hero)
   ============================================= */
.ticker{
  background:var(--ink-900);
  color:var(--white);
  overflow:hidden;
  border-top:1px solid var(--ink-900);
  border-bottom:1px solid var(--ink-900);
}
.ticker-track{
  display:flex;gap:var(--spacing-40);
  padding:var(--spacing-8) 0;
  white-space:nowrap;
  animation:tickerScroll 50s linear infinite;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.ticker-item{display:inline-flex;align-items:center;gap:var(--spacing-12);color:var(--ink-200)}
.ticker-item::before{
  content:'●';color:var(--accent);font-size:10px;
}
.ticker-item strong{color:var(--white);font-weight:600}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* =============================================
   TRUST BAR
   ============================================= */
.trust-bar{
  padding:var(--spacing-56) 0;
  border-bottom:1px solid rgba(10,10,10,0.12);
  background:rgba(255,255,255,0.58);
}
.trust-bar-label{
  margin-bottom:var(--spacing-24);
  text-align:left;
}
.trust-logos{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;
  align-items:center;
  border:1px solid rgba(10,10,10,0.12);
  background:rgba(10,10,10,0.12);
}
.trust-logo-placeholder{
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;
  color:var(--ink-700);
  text-align:center;
  padding:var(--spacing-20,20px) var(--spacing-12);
  border:none;
  background:rgba(255,255,255,0.8);
  text-transform:uppercase;letter-spacing:0.05em;
}
.trust-logo-placeholder:nth-child(6n){border-right:none}

/* =============================================
   DARK SERVICE CARD  (now: Data table layout)
   ============================================= */
.dark-card{
  background:var(--white);
  border:1px solid rgba(10,10,10,0.12);
  border-radius:0;
  padding:0;
  display:grid;grid-template-columns:5fr 4fr;
  gap:0;
  min-height:auto;
  overflow:hidden;
  margin-bottom:var(--spacing-20,20px);
  transition:border-color .2s, transform .2s, box-shadow .2s;
  position:relative;
  box-shadow:0 10px 34px rgba(10,10,10,0.035);
}
.dark-card:hover{
  border-color:var(--ink-900);
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,0.08);
  z-index:1;
}
.dark-card-text{
  display:flex;flex-direction:column;
  justify-content:center;
  padding:var(--spacing-56) var(--spacing-40);
  background:linear-gradient(180deg, var(--white), rgba(255,255,255,0.92));
  position:relative;
}
.dark-card-text::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--accent);
  opacity:.9;
}
.dark-card-text .serif-number{
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1;
  font-weight:500;
  color:var(--ink-400);
  opacity:1;
  margin-bottom:var(--spacing-24);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.dark-card-text .serif-number::before{
  content:'— ';
}
.dark-card-text h2{
  font-family:var(--font-sans);
  font-size:36px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--ink-900);
  margin-bottom:var(--spacing-16);
}
.dark-card-text p{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-600);
  margin-bottom:var(--spacing-24);
  max-width:440px;
}
.dark-card-text ul{
  margin-bottom:var(--spacing-32);
  border-top:1px solid rgba(10,10,10,0.1);
}
.dark-card-text ul li{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-700);
  padding:10px 0;
  opacity:1;
  border-bottom:1px solid rgba(10,10,10,0.1);
  display:flex;align-items:center;gap:var(--spacing-12);
}
.dark-card-text ul li::before{
  content:'→';
  color:var(--accent);
  font-weight:600;
}

.dark-card-text .btn-on-dark{
  background:var(--ink-900);color:var(--white);
  border-color:var(--ink-900);
  align-self:flex-start;
}
.dark-card-text .btn-on-dark:hover{background:var(--accent-action);border-color:var(--accent-action)}

.dark-card-image{
  border-radius:0;overflow:hidden;
  display:flex;align-items:stretch;justify-content:stretch;
  background:var(--ink-50);
  border-left:1px solid rgba(10,10,10,0.12);
  position:relative;
}
.dark-card-image img{width:100%;height:100%;object-fit:cover;min-height:320px;filter:grayscale(12%) contrast(1.04) saturate(.92)}
.dark-card-image::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(0,47,167,0.14), transparent 48%, rgba(184,120,72,0.12));
  z-index:1;
  pointer-events:none;
}
.dark-card-image::after{
  content:attr(data-tag);
  position:absolute;top:var(--spacing-16);left:var(--spacing-16);
  background:var(--ink-900);color:var(--white);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  padding:4px 10px;text-transform:uppercase;letter-spacing:0.08em;
  z-index:2;
}

/* Reverse layout for alternating */
.dark-card.reverse{grid-template-columns:4fr 5fr}
.dark-card.reverse .dark-card-text{order:2}
.dark-card.reverse .dark-card-image{order:1;border-left:none;border-right:1px solid var(--ink-200)}

/* =============================================
   LIGHT GRID — Why Us (Data cards)
   ============================================= */
.light-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  border:1px solid rgba(10,10,10,0.12);
  background:rgba(10,10,10,0.12);
}
.light-card{
  background:var(--white);
  border-radius:0;
  padding:var(--spacing-40) var(--spacing-32);
  border-right:none;
  position:relative;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.light-card:last-child{border-right:none}
.light-card:hover{
  background:linear-gradient(180deg, var(--white), rgba(232,237,249,0.45));
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  z-index:1;
}
.light-card::before{
  content:attr(data-label);
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.12em;
  display:block;margin-bottom:var(--spacing-16);
}
.light-card h3{
  font-family:var(--font-sans);
  font-size:48px;
  font-weight:700;
  letter-spacing:-0.03em;
  margin-bottom:var(--spacing-12);
  color:var(--ink-900);
  line-height:1;
}
.light-card h3 .counter-num{
  font-family:var(--font-sans);
  color:var(--accent);
  font-weight:700;
  font-variant-numeric: tabular-nums;
}
.light-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-500);
  margin-bottom:var(--spacing-16);
}

/* =============================================
   CASE STUDY CARD — Compact grid (cases page)
   ============================================= */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.case-card-compact{
  background:var(--white);
  border:1px solid var(--ink-200);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex;flex-direction:column;
}
.case-card-compact:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  border-color:var(--ink-900);
}
.case-card-compact .case-img{
  width:100%;height:200px;
  object-fit:cover;
  border-bottom:1px solid var(--ink-200);
  filter:grayscale(20%) contrast(1.05);
}
.case-card-compact .case-body{
  padding:var(--spacing-24);
  display:flex;flex-direction:column;
  gap:var(--spacing-8);
  flex:1;
}
.case-card-compact .case-body .serif-number{
  font-family:var(--font-mono);
  font-size:11px;color:var(--ink-400);
  letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:-2px;
}
.case-card-compact .case-body .serif-number::before{
  content:'— ';
}
.case-card-compact .case-body h3{
  font-size:18px;font-weight:600;
  line-height:1.25;
  color:var(--ink-900);
  letter-spacing:-0.015em;
}
.case-card-compact .case-body .case-meta{
  display:flex;gap:var(--spacing-12);
  font-family:var(--font-mono);
  font-size:11px;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:0.05em;
  padding:var(--spacing-10) 0;
  border-top:1px solid var(--ink-100);
  border-bottom:1px solid var(--ink-100);
  flex-wrap:wrap;
}
.case-card-compact .case-body .case-meta span:not(:last-child)::after{
  content:'·';
  margin-left:var(--spacing-12);
  color:var(--ink-300);
}
.case-card-compact .case-body p{
  font-size:13px;line-height:1.55;
  color:var(--ink-500);
  margin-top:var(--spacing-4);
}

/* Featured case card on homepage — keep two-column layout */
.dark-card.case-card{margin-bottom:0}
.dark-card.case-card .dark-card-text{padding:var(--spacing-56) var(--spacing-40)}
.dark-card.case-card .dark-card-text h2{
  font-size:32px;
  line-height:1.2;
}
.dark-card.case-card .dark-card-text .meta-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-bottom:var(--spacing-24);
  border-top:1px solid var(--ink-200);
  border-bottom:1px solid var(--ink-200);
}
.dark-card.case-card .dark-card-text .meta-row span{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-900);
  padding:var(--spacing-12) 0;
  padding-right:var(--spacing-16);
  border-right:1px solid var(--ink-200);
  text-transform:uppercase;letter-spacing:0.05em;
}
.dark-card.case-card .dark-card-text .meta-row span:last-child{border-right:none}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  border:1px solid rgba(10,10,10,0.12);
  background:rgba(10,10,10,0.12);
}
.testimonial-card{
  background:var(--white);
  padding:var(--spacing-32);
  border-right:none;
  position:relative;
  display:flex;
  flex-direction:column;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.testimonial-card:last-child{border-right:none}
.testimonial-card:hover{
  background:linear-gradient(180deg, var(--white), rgba(250,250,249,0.8));
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  z-index:1;
}
.testimonial-card::before{
  content:attr(data-label);
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.12em;
  display:block;
  margin-bottom:var(--spacing-16);
}
.testimonial-stars{
  color:var(--accent);
  font-size:14px;
  letter-spacing:3px;
  margin-bottom:var(--spacing-12);
  font-family:var(--font-sans);
}
.testimonial-quote{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-700);
  flex:1;
  margin-bottom:var(--spacing-20);
}
.testimonial-quote::before{
  content:'"';
  color:var(--accent);
  font-size:20px;
  font-weight:700;
  font-family:var(--font-display);
  margin-right:2px;
}
.testimonial-quote::after{
  content:'"';
  color:var(--accent);
  font-size:20px;
  font-weight:700;
  font-family:var(--font-display);
  margin-left:2px;
  vertical-align:top;
}
.testimonial-author{
  border-top:1px solid var(--ink-200);
  padding-top:var(--spacing-12);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.testimonial-name{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  color:var(--ink-900);
}
.testimonial-role{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-400);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

@media(max-width:1024px){
  .testimonial-grid{grid-template-columns:repeat(2,1fr)}
  .testimonial-card:nth-child(2n){border-right:none}
  .testimonial-card:nth-child(3n){border-right:1px solid var(--ink-200)}
}
@media(max-width:768px){
  .testimonial-grid{grid-template-columns:1fr}
  .testimonial-card{border-right:none!important}
}

/* =============================================
   SECTION STRUCTURE
   ============================================= */
.section{padding:var(--spacing-76) 0}
.section + .section{padding-top:0}
.section-header{
  margin-bottom:var(--spacing-40);
  padding-bottom:var(--spacing-24);
  border-bottom:1px solid rgba(10,10,10,0.12);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-32);
  flex-wrap:wrap;
}
.section-header .heading{margin-bottom:0}
.section-header .body-text{color:var(--ink-500);max-width:420px;margin:0}

/* Section index marker */
.section-index{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  color:var(--accent);
  text-transform:uppercase;letter-spacing:0.15em;
  margin-bottom:var(--spacing-8);
  display:block;
}

/* =============================================
   CTA BANNER — Light blue action band
   ============================================= */
.cta-banner{
  background:var(--ink-50);
  padding:var(--spacing-76) var(--spacing-40);
  text-align:left;
  border-radius:0;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:var(--spacing-40);
  align-items:center;
  border:1px solid var(--ink-200);
  box-shadow:0 12px 36px rgba(10,10,10,0.04);
}
.cta-banner::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:4px;background:var(--accent);
}
.cta-banner h2{
  font-family:var(--font-sans);
  font-size:36px;
  font-weight:700;
  letter-spacing:-0.025em;
  color:var(--ink-900);
  margin-bottom:var(--spacing-12);
  line-height:1.15;
}
.cta-banner p{
  color:var(--ink-600);
  margin-bottom:var(--spacing-24);
  font-size:15px;
}
.cta-banner .btn{
  background:var(--accent-action);color:var(--white);
  border-color:var(--accent-action);
  padding:14px 28px;
}
.cta-banner .btn:hover{background:var(--accent-action-hover);border-color:var(--accent-action-hover)}
.cta-contacts{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-16);
  padding-left:var(--spacing-24);
  border-left:1px solid var(--ink-200);
}
.cta-contact-card{
  padding:var(--spacing-16);
  border:1px solid var(--ink-200);
  background:var(--white);
}
.cta-contact-name{
  font-size:11px;color:var(--ink-400);
  font-weight:500;letter-spacing:0.1em;
  text-transform:uppercase;
  display:block;margin-bottom:4px;
}
.cta-contact-name::before{
  content:'CONTACT / ';
}
.cta-contact-phone{
  font-size:24px;font-weight:500;
  color:var(--ink-900);
  font-family:var(--font-mono);
  letter-spacing:-0.02em;
  text-decoration:none;
}
.cta-contact-phone:hover{
  color:var(--accent-hover);
}

/* =============================================
   FOOTER
   ============================================= */
.footer{
  background:var(--ink-900);
  color:var(--ink-300);
  padding:var(--spacing-56) 0 var(--spacing-24);
  border-top:3px solid var(--accent);
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--spacing-40);margin-bottom:var(--spacing-40);
  padding-bottom:var(--spacing-32);
  border-bottom:1px solid var(--ink-700);
}
.footer-brand p{
  font-size:13px;line-height:1.6;
  margin-top:var(--spacing-16);
  color:var(--ink-400);
  max-width:320px;
}
.footer-brand img{
  display:block;
  width:auto;
  height:38px;
  max-width:150px;
  object-fit:contain;
}
.footer h4{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  margin-bottom:var(--spacing-16);
  color:var(--ink-300);
  text-transform:uppercase;letter-spacing:0.12em;
}
.footer ul li{margin-bottom:var(--spacing-8)}
.footer ul li a{
  font-size:13px;color:var(--ink-400);
  transition:color .15s;
}
.footer ul li a:hover{color:var(--white)}
.footer-bottom{
  padding-top:0;
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:0.05em;
}

/* =============================================
   PAGE HERO (sub-pages)
   ============================================= */
.page-hero{
  padding:120px 0 var(--spacing-56);
  background:var(--ink-50);
  border-bottom:1px solid var(--ink-200);
  position:relative;
}
.page-hero::before{
  content:'';position:absolute;bottom:-1px;left:var(--spacing-32);
  width:60px;height:3px;background:var(--accent);
}
.page-hero::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(184,120,72,0.05) 0%, transparent 60%),
    linear-gradient(rgba(0,47,167,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,47,167,0.03) 1px, transparent 1px);
  background-size:100% 100%, 40px 40px, 40px 40px;
  pointer-events:none;z-index:0;
}
.page-hero .container{position:relative}
.page-hero h1{max-width:800px;margin-bottom:var(--spacing-12)}
.page-hero p{color:var(--ink-500);max-width:540px;margin-top:var(--spacing-12);font-size:16px}

/* =============================================
   SERVICE DETAIL GRID
   ============================================= */
.service-detail-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--ink-200);
  margin-bottom:-1px;
  background:var(--white);
}
.service-detail-card{
  background:var(--white);
  border-radius:0;
  padding:var(--spacing-24);
  border-right:1px solid var(--ink-200);
  border-bottom:1px solid var(--ink-200);
  transition:background .15s;
  position:relative;
}
.service-detail-card:nth-child(3n){border-right:none}

/* Two-column variant for visual variety (used in 弱电工程) */
.service-detail-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.service-detail-grid.cols-2 .service-detail-card:nth-child(odd){border-right:1px solid var(--ink-200)}
.service-detail-grid.cols-2 .service-detail-card:nth-child(even){border-right:none}
.service-detail-card:hover{background:var(--ink-50)}
.service-detail-card::before{
  content:'0' counter(service-counter);
  counter-increment:service-counter;
  font-family:var(--font-mono);
  font-size:11px;color:var(--ink-400);
  font-weight:500;letter-spacing:0.1em;
  display:block;margin-bottom:var(--spacing-8);
}
.service-detail-grid{counter-reset:service-counter}
.service-detail-card h4{
  font-size:16px;font-weight:600;
  margin-bottom:var(--spacing-8);
  color:var(--ink-900);
}
.service-detail-card p{
  font-size:13px;line-height:1.6;
  color:var(--ink-500);
}

/* Service category banner — now a clean header block */
.service-banner{
  position:relative;border-radius:0;overflow:hidden;
  height:180px;margin-bottom:0;
  display:flex;align-items:flex-end;
  border:1px solid var(--ink-200);
  border-bottom:none;
}
.service-banner img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:grayscale(100%) contrast(1.1) brightness(0.7);
}
.service-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.85) 0%,rgba(10,10,10,.3) 100%);
}
.service-banner::before{
  content:'';position:absolute;top:0;left:0;
  width:60px;height:3px;background:var(--accent);z-index:2;
}
.service-banner .banner-text{
  position:relative;z-index:1;padding:var(--spacing-32);color:var(--white);
}
.service-banner .banner-text .cat-label{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;opacity:0.8;color:var(--white);
}
.service-banner .banner-text h2{
  font-size:32px;font-weight:700;
  margin-top:var(--spacing-8);
  letter-spacing:-0.025em;color:var(--white);
}

.service-advantage-card{
  background:var(--white);
  border:1px solid var(--ink-200);
  padding:var(--spacing-32) var(--spacing-24);
  text-align:center;
  transition:transform var(--duration-fast) var(--ease-out-expo),
             box-shadow var(--duration-fast) var(--ease-out-expo);
}
.service-advantage-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
}
.service-advantage-card h3{
  font-size:18px;font-weight:700;
  margin:var(--spacing-12) 0 var(--spacing-8);
}
.service-advantage-card p{
  font-size:14px;line-height:1.6;
  color:var(--ink-500);
}

.icon-feature{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--ink-900);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
  margin:0 auto;
}

.service-advantage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-24);
}

.models-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--ink-200);
  background:var(--white);
}
.models-grid .light-card{
  text-align:left!important;
  border-right:1px solid var(--ink-200);
  border-bottom:none;
}
.models-grid .light-card h3{font-size:24px}
.models-grid .light-card:last-child{border-right:none}

/* =============================================
   ENGINEERS — hero + 3-card grid
   ============================================= */

/* --- 陆工大版面 --- */
.hero-engineer{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:var(--spacing-40);
  align-items:center;
  background:var(--ink-50);
  border:1px solid var(--ink-200);
  padding:var(--spacing-40);
  margin-bottom:var(--spacing-56);
}
.hero-engineer-photo-lg{
  width:160px;height:160px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
}
.hero-engineer-photo-lg img{
  width:100%;height:100%;
  object-fit:cover;
}
.hero-engineer-name{
  font-size:clamp(32px,4vw,42px);font-weight:700;
  letter-spacing:-0.03em;
  color:var(--ink-900);
  margin:var(--spacing-8) 0 var(--spacing-16);
}
.hero-engineer-desc{
  font-size:16px;line-height:1.9;
  color:var(--ink-600);
  max-width:560px;
}

/* --- 团队标签 --- */
.team-section-label{
  font-size:12px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--ink-400);
  padding:var(--spacing-40) 0 var(--spacing-24);
}

/* --- 三人横排卡片 --- */
.team-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-24);
}
.team-card{
  border:1px solid var(--ink-200);
  background:var(--white);
  padding:var(--spacing-32) var(--spacing-24);
  text-align:center;
  transition:transform var(--duration-fast) var(--ease-out-expo),
             box-shadow var(--duration-fast) var(--ease-out-expo);
}
.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
}
.team-card-photo{
  width:72px;height:72px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto var(--spacing-16);
}
.team-card-photo img{
  width:100%;height:100%;
  object-fit:cover;
}
.team-card h3{
  font-size:22px;font-weight:700;
  color:var(--ink-900);
  margin:var(--spacing-8) 0 var(--spacing-12);
}
.team-card p{
  font-size:14px;line-height:1.7;
  color:var(--ink-500);
  text-align:left;
}
.team-card .engineer-tags{
  justify-content:center;
  margin-top:var(--spacing-16);
}

/* shared badge & tags */
.engineer-badge{
  font-size:11px;font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-400);
}
.engineer-tags{
  display:flex;flex-wrap:wrap;
  gap:var(--spacing-8);
  margin-top:var(--spacing-16);
}
.engineer-tags span{
  font-size:11px;font-weight:500;
  padding:3px 10px;
  border-radius:100px;
  background:var(--ink-50);
  color:var(--ink-600);
  border:1px solid var(--ink-200);
}

.engineer-more{
  padding:var(--spacing-48) 0 var(--spacing-16);
  text-align:center;
}
.engineer-more p{
  font-size:14px;line-height:1.8;
  color:var(--ink-400);
}

/* =============================================
   CONTACT
   ============================================= */
.qr-placeholder{
  width:120px;height:120px;
  background:var(--white);
  border:1px solid var(--ink-200);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:11px;color:var(--ink-400);line-height:1.4;
  font-family:var(--font-mono);
}

.contact-form{
  background:var(--white);
  border:1px solid var(--ink-200);
  border-radius:0;
  padding:var(--spacing-40);
}
.contact-form h3{
  font-size:22px;font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:var(--spacing-24);
  padding-bottom:var(--spacing-16);
  border-bottom:1px solid var(--ink-200);
}
.form-group{margin-bottom:var(--spacing-16)}
.form-group label{
  display:block;margin-bottom:var(--spacing-4);
  color:var(--ink-700);
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--ink-200);
  border-radius:0;
  font-size:14px;font-family:var(--font-sans);
  background:var(--white);color:var(--ink-900);
  transition:border-color .15s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.form-group textarea{resize:vertical;min-height:110px;font-family:var(--font-sans)}
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--spacing-40);
  align-items:start;
}
.contact-hotline-card{
  border:1px solid var(--ink-900);
  padding:var(--spacing-32);
  margin-top:var(--spacing-12);
  margin-bottom:var(--spacing-16);
  background:var(--white);
}
.contact-kicker{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-400);
  margin-bottom:var(--spacing-8);
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.contact-hotline-phone{
  font-family:var(--font-mono);
  font-size:34px;
  font-weight:600;
  color:var(--ink-900);
  letter-spacing:-0.02em;
  overflow-wrap:anywhere;
}
.contact-hotline-phone a,
.contact-info-value a{color:inherit}
.contact-note{
  font-size:13px;
  color:var(--ink-500);
  line-height:1.6;
}
.contact-hotline-card .contact-note{margin-top:var(--spacing-8)}
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border:1px solid var(--ink-200);
  margin-bottom:var(--spacing-32);
  background:var(--white);
}
.contact-info-card{
  padding:var(--spacing-24);
  min-width:0;
}
.contact-info-card + .contact-info-card{border-left:1px solid var(--ink-200)}
.contact-info-label{margin-bottom:var(--spacing-8)}
.contact-info-value{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-900);
  overflow-wrap:anywhere;
}
.contact-info-sub{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-500);
  margin-top:4px;
}
.contact-wechat{
  margin-top:var(--spacing-12);
  display:flex;
  gap:var(--spacing-16);
  align-items:center;
}
.contact-qr{
  width:120px;
  height:120px;
  object-fit:cover;
  border:1px solid var(--ink-200);
  flex:0 0 auto;
}
.contact-wechat-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:var(--spacing-4);
}
.form-error{
  min-height:16px;
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  letter-spacing:0.03em;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid var(--ink-200);
  background:var(--white);
}
.process-card{
  padding:var(--spacing-32);
  border-right:1px solid var(--ink-200);
}
.process-card:last-child{border-right:none}
.process-card h4{
  font-size:18px;
  font-weight:600;
  margin-top:var(--spacing-12);
  margin-bottom:var(--spacing-8);
}
.process-card p{
  font-size:13px;
  color:var(--ink-500);
  line-height:1.6;
}

/* --- Case filter tags --- */
.filter-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  border:1px solid var(--ink-200);
  color:var(--ink-500);
  cursor:pointer;
  transition:all .15s;
  background:var(--white);
}
.filter-tag:hover{border-color:var(--ink-900);color:var(--ink-900)}
.filter-tag.active{
  background:var(--ink-900);color:var(--white);
  border-color:var(--ink-900);
}
.filter-tag::before{
  content:'●';font-size:7px;
}

.filtered-out{display:none !important}

/* --- Divider --- */
.divider{height:1px;background:var(--ink-200);margin:0;border:none}

/* =============================================
   Scroll reveal
   ============================================= */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal][data-delay="100"]{transition-delay:.1s}
[data-reveal][data-delay="200"]{transition-delay:.2s}
[data-reveal][data-delay="300"]{transition-delay:.3s}
[data-reveal][data-delay="400"]{transition-delay:.4s}

/* Hero staggered entrance */
html.js .hero-stagger > *{opacity:0;transform:translateY(12px);animation:heroFadeUp .5s ease forwards}
.hero-stagger > *:nth-child(1){animation-delay:.05s}
.hero-stagger > *:nth-child(2){animation-delay:.15s}
.hero-stagger > *:nth-child(3){animation-delay:.25s}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}

.counter-num{display:inline-block}

/* Trust bar placeholder fade */
.trust-logos > *{opacity:0;animation:logoFadeIn .4s ease forwards}
.trust-logos > *:nth-child(1){animation-delay:.05s}
.trust-logos > *:nth-child(2){animation-delay:.1s}
.trust-logos > *:nth-child(3){animation-delay:.15s}
.trust-logos > *:nth-child(4){animation-delay:.2s}
.trust-logos > *:nth-child(5){animation-delay:.25s}
.trust-logos > *:nth-child(6){animation-delay:.3s}
@keyframes logoFadeIn{to{opacity:1}}
@keyframes hudPulse{0%{box-shadow:0 0 0 0 rgba(94,160,255,0.7)}70%{box-shadow:0 0 0 8px rgba(94,160,255,0)}100%{box-shadow:0 0 0 0 rgba(94,160,255,0)}}

/* =============================================
   DOT DIVIDER — Pixel-scatter separator band
   (inspired by blueprint pixel dissolve)
   ============================================= */
.dot-divider{
  height:32px;
  background-image:radial-gradient(circle at center, var(--accent) 1px, transparent 1.5px);
  background-size:8px 8px;
  opacity:0.35;
  mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  margin:var(--spacing-24) 0;
}

/* Inline "highlight" variant — dot grid behind just a word or two */
.dot-fill{
  position:relative;
  display:inline-block;
  padding:0 0.1em;
  isolation:isolate;
  color:var(--ink-900);
}
.dot-fill::before{
  content:'';
  position:absolute;
  inset:-4% -8% -4% -4%;
  background-image:
    radial-gradient(var(--ember) 1.1px, transparent 1.5px),
    radial-gradient(var(--accent) 1.1px, transparent 1.5px);
  background-size:24px 24px, 6px 6px;
  background-position:8px 8px, 0 0;
  opacity:0.38;
  z-index:-1;
  -webkit-mask-image:linear-gradient(100deg, #000 60%, transparent 100%);
  mask-image:linear-gradient(100deg, #000 60%, transparent 100%);
}

/* =============================================
   LIVE STRIP — Single-row "currently working" banner
   Used on home page as a real-time presence signal.
   Click → field.html (full record).
   ============================================= */
.live-strip{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:0;
  align-items:stretch;
  background:var(--ink-900);
  border:1px solid var(--ink-200);
  position:relative;
  overflow:hidden;
  transition:border-color .15s;
}
.live-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--accent);z-index:2;
}
.live-strip:hover{border-color:var(--ink-900)}

.live-strip-photo{
  position:relative;
  background:var(--ink-700);
  overflow:hidden;
}
.live-strip-photo img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(20%) contrast(1.05);
  transition:transform .4s ease;
}
.live-strip:hover .live-strip-photo img{transform:scale(1.05)}

.live-strip-body{
  padding:var(--spacing-20,20px) var(--spacing-32);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--white);
  border-left:1px solid var(--ink-200);
}
.live-strip-status{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;
  color:var(--ok);
  text-transform:uppercase;letter-spacing:0.12em;
  margin-bottom:8px;
}
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(0,200,83,0.6);
  animation:hudPulse 1.6s ease-out infinite;
}
.live-strip-job{
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink-900);
  margin-bottom:10px;
  line-height:1.3;
}
.live-strip-meta{
  display:flex;gap:var(--spacing-16);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-500);
  text-transform:uppercase;letter-spacing:0.08em;
}
.live-strip-meta span{
  position:relative;padding-right:var(--spacing-16);
}
.live-strip-meta span:not(:last-child)::after{
  content:'';position:absolute;
  right:0;top:50%;transform:translateY(-50%);
  width:3px;height:3px;background:var(--ink-200);border-radius:50%;
}

.live-strip-cta{
  padding:0 var(--spacing-32);
  display:flex;align-items:center;
  background:var(--white);
  border-left:1px solid var(--ink-200);
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;
  color:var(--ink-500);
  text-transform:uppercase;letter-spacing:0.1em;
  gap:8px;
  white-space:nowrap;
  transition:color .15s;
}
.live-strip-cta span{
  color:var(--accent);
  transition:transform .2s;
}
.live-strip:hover .live-strip-cta{color:var(--ink-900)}
.live-strip:hover .live-strip-cta span{transform:translateX(4px)}

@media(max-width:768px){
  .live-strip{grid-template-columns:1fr;}
  .live-strip-photo{height:160px}
  .live-strip-photo img{height:100%}
  .live-strip-body{border-left:none;border-top:1px solid var(--ink-200)}
  .live-strip-cta{
    border-left:none;border-top:1px solid var(--ink-200);
    justify-content:space-between;
    padding:var(--spacing-16) var(--spacing-32);
  }
}


/* =============================================
   Style: each photo wrapped in a "job ticket" frame,
   referencing the rest of the site's data-card language.
   ============================================= */
.fieldlog-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  border:none;
  background:transparent;
  margin-bottom:0;
}
.fieldlog-card{
  background:var(--white);
  border:1px solid var(--ink-200);
  display:grid;
  grid-template-columns:42% 1fr;
  transition:border-color .15s, box-shadow .15s;
  position:relative;
  min-height:240px;
}
.fieldlog-card:nth-child(2n){border-right:1px solid var(--ink-200)}
.fieldlog-card:hover{
  border-color:var(--ink-900);
}

/* Photo block — left column, fills card height */
.fieldlog-photo{
  position:relative;
  width:100%;
  height:100%;
  background:var(--ink-100);
  overflow:hidden;
  border-bottom:none;
  border-right:1px solid var(--ink-200);
}
.fieldlog-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(15%) contrast(1.05);
  transition:transform .4s ease;
}
.fieldlog-card:hover .fieldlog-photo img{transform:scale(1.04)}

/* Job ID badge — top left, like a sticker on a job folder */
.fieldlog-jobid{
  position:absolute;
  top:0;left:0;
  background:var(--ink-900);
  color:var(--white);
  padding:5px 9px;
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  z-index:2;
}
.fieldlog-jobid::before{
  content:'JOB #';
  color:var(--ink-400);
  margin-right:2px;
}

/* Time/status tag — top right */
.fieldlog-time{
  position:absolute;
  top:0;right:0;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(4px);
  color:var(--ink-700);
  padding:5px 9px;
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
  z-index:2;
  display:flex;align-items:center;gap:5px;
}
.fieldlog-time::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(0,200,83,0.5);
  animation:hudPulse 2s ease-out infinite;
}
.fieldlog-time.status-done::before{
  background:var(--ink-400);
  animation:none;
}

/* Body — work details */
.fieldlog-body{
  padding:var(--spacing-20,20px) var(--spacing-24);
  display:flex;flex-direction:column;
}
.fieldlog-type{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:var(--spacing-8);
}
.fieldlog-title{
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink-900);
  line-height:1.35;
  margin-bottom:var(--spacing-8);
}
.fieldlog-desc{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-500);
  margin-bottom:var(--spacing-16);
  flex:1;
}

/* Meta row — engineer / duration / status as a mini table */
.fieldlog-meta{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  border-top:1px solid var(--ink-200);
  margin:0 calc(-1 * var(--spacing-24)) calc(-1 * var(--spacing-20,20px));
}
.fieldlog-meta > div{
  padding:var(--spacing-12);
  border-right:1px solid var(--ink-200);
  font-family:var(--font-mono);
}
.fieldlog-meta > div:last-child{border-right:none}
.fieldlog-meta .ml{
  font-size:10px;
  color:var(--ink-400);
  text-transform:uppercase;letter-spacing:0.1em;
  margin-bottom:2px;
}
.fieldlog-meta .mv{
  font-size:11px;
  color:var(--ink-900);
  font-weight:500;
}

/* Responsive */
@media(max-width:1024px){
  .fieldlog-grid{grid-template-columns:1fr}
  .fieldlog-card{border-right:none}
  .fieldlog-card:nth-child(2n){border-right:none}
}
@media(max-width:600px){
  .fieldlog-card{grid-template-columns:1fr;min-height:auto}
  .fieldlog-photo{
    padding-top:60%;
    border-right:none;
    border-bottom:1px solid var(--ink-200);
  }
  .cta-contacts{
    flex-direction:column;
    gap:var(--spacing-12);
  }
  .cta-contact-card{
    padding-left:0;
    padding-top:var(--spacing-12);
    border-left:none;
    border-top:1px solid var(--ink-200);
  }
}

/* Trust bar status dot */
.trust-bar-label::before{
  content:'●';
  color:var(--accent);
  margin-right:8px;
  font-size:10px;
  animation:hudPulse 2s ease-out infinite;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:1024px){
  .hero-split{grid-template-columns:1fr;gap:var(--spacing-40);padding:100px 0 60px}
  .hero-split::before{display:none}
  .hero-split::after{width:78%;height:34%;top:6%;right:-18%;opacity:.48}
  .hero-split .hero-body{max-width:100%}
  .hero-left{min-height:auto}
  .hero-panel{max-width:100%}
  .dark-card{grid-template-columns:1fr}
  .dark-card.reverse .dark-card-text{order:initial}
  .dark-card.reverse .dark-card-image{order:initial;border-right:none;border-left:none;border-top:1px solid var(--ink-200)}
  .dark-card-image{border-left:none;border-top:1px solid var(--ink-200);min-height:auto}
  .dark-card-image img{min-height:240px}
  .dark-card-text h2{font-size:28px}
  .dark-card.case-card .dark-card-text h2{font-size:26px}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .light-grid,.service-detail-grid,.models-grid,.service-advantage-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .light-card:nth-child(2n){border-right:none}
  .service-detail-card:nth-child(3n){border-right:1px solid var(--ink-200)}
  .service-detail-card:nth-child(2n){border-right:none}
  .models-grid .light-card:nth-child(2n){border-right:none}
  .service-banner{height:140px}
  .cta-banner{grid-template-columns:1fr;padding:var(--spacing-40)}
  .cta-contacts{
    flex-direction:row;
    padding-left:0;
    border-left:none;
    gap:var(--spacing-16);
  }
  .cta-contact-card{
    flex:1;
    padding:var(--spacing-16);
    border-top:1px solid var(--ink-200);
    border-left:1px solid var(--ink-200);
  }
  .trust-logos{grid-template-columns:repeat(3,1fr)}
  .trust-logo-placeholder:nth-child(6n){border-right:none}
  .trust-logo-placeholder:nth-child(3n){border-right:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--spacing-32)}
}
@media(max-width:768px){
  :root{--text-heading-lg:36px;--text-heading:24px}
  .header-nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;background:var(--paper);
    padding:var(--spacing-16);gap:0;
    border-bottom:1px solid var(--ink-200);
  }
  .header-nav.open{display:flex}
  .header-nav a{padding:14px 16px;width:100%}
  .header-nav a::after{display:none}
  .header-nav .btn-nav{width:100%;justify-content:center}
  .header-nav .lang-toggle{margin-left:0;width:100%;text-align:center}
  .mobile-toggle{display:flex}
  .hero-split h1{font-size:40px}
  .hero-proof-strip{grid-template-columns:1fr}
  .hero-proof-strip span{
    border-right:none;
    border-bottom:1px solid rgba(10,10,10,0.1);
  }
  .hero-proof-strip span:last-child{border-bottom:none}
  .hero-panel{padding:var(--spacing-20,20px)}
  .hero-assurance-card{padding:8px var(--spacing-16)}
  .hero-left .hero-meta{flex-direction:column;gap:var(--spacing-8)}
  .light-grid,.service-detail-grid,.models-grid,.service-advantage-grid{grid-template-columns:1fr}
  .light-card,.service-detail-card,.models-grid .light-card{border-right:none!important}
  .hero-engineer{grid-template-columns:1fr;gap:var(--spacing-24);text-align:center}
  .hero-engineer-photo-lg{width:120px;height:120px;margin:0 auto}
  .hero-engineer-desc{max-width:none}
  .team-cards{grid-template-columns:1fr}
  .engineer-tags{justify-content:center}
  .service-banner{height:120px}
  .service-banner .banner-text h2{font-size:24px}
  .footer-grid{grid-template-columns:1fr;gap:var(--spacing-24)}
  .footer-bottom{flex-direction:column;gap:var(--spacing-8);text-align:center}
  .section{padding:var(--spacing-56) 0}
  .cta-banner h2{font-size:26px}
  .cta-banner{margin:0}
  .page-hero{padding:100px 0 var(--spacing-32)}
  .section-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-16)}
  .trust-logos{grid-template-columns:repeat(2,1fr)}
  .trust-logo-placeholder{border-right:none!important}
  .trust-bar{padding:var(--spacing-40) 0}
  .dark-card.case-card .dark-card-text .meta-row{grid-template-columns:1fr}
  .dark-card.case-card .dark-card-text .meta-row span{border-right:none;border-bottom:1px solid var(--ink-200);padding:8px 0}
  .dark-card.case-card .dark-card-text .meta-row span:last-child{border-bottom:none}
  .case-grid{grid-template-columns:1fr}
  .case-card-compact .case-img{height:180px}
  .light-card h3{font-size:36px}
  .contact-layout{grid-template-columns:1fr;gap:var(--spacing-32)}
  .contact-form{padding:var(--spacing-32) var(--spacing-24)}
  .contact-info-grid{grid-template-columns:1fr}
  .contact-info-card + .contact-info-card{
    border-left:none;
    border-top:1px solid var(--ink-200);
  }
  .contact-wechat{align-items:flex-start}
  .process-grid{grid-template-columns:1fr}
  .process-card{
    border-right:none;
    border-bottom:1px solid var(--ink-200);
  }
  .process-card:last-child{border-bottom:none}
}
@media(max-width:480px){
  .container{padding:0 var(--spacing-16)}
  .dark-card-text{padding:var(--spacing-32) var(--spacing-24)}
  .contact-hotline-card{padding:var(--spacing-24)}
  .contact-hotline-phone{font-size:30px}
  .hero-split h1{font-size:36px}
  .hero-left .hero-cta-row{flex-direction:column;align-items:stretch}
  .hero-left .hero-cta-row .btn{width:100%}
  .hero-badge{align-items:flex-start}
  .hero-badge-label{line-height:1.35}
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .ticker-track{animation:none}
  html.js [data-reveal]{opacity:1;transform:none}
  .counter-num{transition:none}
}

/* =============================================
   PRINT
   ============================================= */
/* =============================================
   WeChat Customer Service — Floating Button
   ============================================= */
.wechat-kf-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--ink-700);
  border: 1px solid var(--ink-200);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: border-color .15s, color .15s;
  text-decoration: none;
  line-height: 1;
}
.wechat-kf-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.wechat-kf-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.wechat-kf-btn .kf-label {
  display: inline;
}
.wechat-kf-btn .kf-label-short {
  display: none;
}
@media (max-width: 480px) {
  .wechat-kf-btn {
    bottom: 20px;
    right: 16px;
    padding: 7px 11px;
  }
  .wechat-kf-btn .kf-label {
    display: none;
  }
  .wechat-kf-btn .kf-label-short {
    display: inline;
  }
}

@media print{
  .header,.footer,.cta-banner,.ticker-strip,.mobile-toggle{display:none}
  body{font-size:12pt;color:#000;background:#fff}
  a{color:#000;text-decoration:underline}
  .dark-card{background:#fff;color:#000;border:1px solid #ccc}
  .section{padding:1em 0;page-break-inside:avoid}
}