/* =========================================================
   松鎰實業 Sungl Industrial Co., Ltd. — WordPress Theme
   Design tokens + base layout
   Default Variant: E · Sungl Leadgen (navy + red CTA)
   Other variants: D Column Blueprint / A Navy-Gold / B Quiet Luxury / C Engineering
   ========================================================= */

:root {
  /* ── Variant D · Column Blueprint  (default)  ─────────────────
     淺色基底 + 點陣藍圖 + Action Orange CTA + Deep Plum 品牌色 */
  --color-ink-blue:      #011821;
  --color-code-black:    #000000;
  --color-ghost-white:   #ffffff;
  --color-fog-gray:      #f6f6f8;
  --color-steel-gray:    #e3e4e8;
  --color-charcoal-text: #232730;
  --color-slate-text:    #7c7f88;
  --color-deep-plum:     #111a4a;
  --color-action-orange: #ec652b;
  --color-faded-grid:    #023247;
  --color-success-moss:  #44b48b;
  --color-info-blue:     #7ea7e9;
  --color-callout-cyan:  #167e6c;
  --color-notification:  #88deeb;

  --gradient-soft-horizon: linear-gradient(125deg,
    rgb(214, 86, 32) -3.16%,
    rgb(159, 122, 238) 14.55%,
    rgb(69, 117, 205) 32.26%,
    rgb(113, 210, 240) 49.97%,
    rgb(68, 180, 139) 67.68%,
    rgb(244, 223, 105) 85.39%);
  --gradient-radial-twilight: radial-gradient(29.88% 184.91% at 6.55% -48.11%,
    rgb(119, 28, 134) 0%,
    rgb(17, 26, 74) 100%);

  /* 對映舊變數名，維持 Variant A/B/C 樣式相容 */
  --c-bg: var(--color-ghost-white);
  --c-surface: var(--color-fog-gray);
  --c-ink: var(--color-ink-blue);
  --c-ink-2: var(--color-charcoal-text);
  --c-muted: var(--color-slate-text);
  --c-line: var(--color-steel-gray);
  --c-accent: var(--color-action-orange);
  --c-accent-2: var(--color-deep-plum);
  --c-gold-1: #bf953f;
  --c-gold-2: #fcf6ba;
  --c-gold-3: #b38728;
  --gold-grad: linear-gradient(135deg, var(--c-gold-1) 0%, var(--c-gold-2) 50%, var(--c-gold-3) 100%);

  /* Typography */
  --font-suisseintl: 'SuisseIntl', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sfmono: 'SFMono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-en: var(--font-suisseintl);

  /* Type scale (DESIGN.md) */
  --text-caption: 10px;
  --text-body: 14px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 40px;
  --text-display: 48px;

  /* Spacing scale */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-100: 100px;
  --spacing-144: 144px;

  /* Layout */
  --section-gap: 48px;

  /* Radii */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-default: 8px;

  /* Shadows (DESIGN.md) */
  --shadow-card:
    rgba(17, 26, 74, 0.05) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.10)    0px 1px 2px 0px,
    rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset;
  --shadow-subtle:
    rgba(17, 26, 74, 0.10) 0px 1px 3px 0px,
    rgba(17, 26, 74, 0.05) 0px 1px 0px 0px,
    rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset,
    rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset;
  --shadow-xl:
    rgba(0, 0, 0, 0.02) 0px 40px 32px 0px,
    rgba(0, 0, 0, 0.03) 0px 22px 18px 0px,
    rgba(0, 0, 0, 0.03) 0px 12px 10px 0px,
    rgba(0, 0, 0, 0.04) 0px 7px 5px 0px,
    rgba(0, 0, 0, 0.07) 0px 3px 2px 0px;
  --shadow-cta:
    rgba(236, 101, 43, 0.25) 0px 8px 24px -8px,
    rgba(0, 0, 0, 0.10) 0px 1px 2px 0px;

  --max-w: 1200px;
  --gutter: 48px;
}

/* ── Variant A · 原 Figma 配色 (Navy/Orange/Gold) ─────────────── */
[data-variant="a"] {
  --c-bg: #ffffff;
  --c-surface: #f3f4f5;
  --c-ink: #1a2332;
  --c-ink-2: #444a51;
  --c-muted: #99a0a8;
  --c-line: #e5e7ea;
  --c-accent: #e8681a;
  --c-accent-2: #2d6a9f;
  --c-gold-1: #bf953f;
  --c-gold-2: #fcf6ba;
  --c-gold-3: #b38728;
  --gold-grad: linear-gradient(135deg, var(--c-gold-1) 0%, var(--c-gold-2) 50%, var(--c-gold-3) 100%);
}

/* ── Variant B · Quiet Luxury (cream/charcoal/copper) ─────────── */
[data-variant="b"] {
  --c-bg: #faf8f4;
  --c-surface: #efe9df;
  --c-ink: #1f1d1a;
  --c-ink-2: #4a453e;
  --c-muted: #8c8579;
  --c-line: #e3ddd1;
  --c-accent: #b85c2c;
  --c-accent-2: #6b6256;
  --gold-grad: linear-gradient(135deg, #c9a96e 0%, #f0e2c3 50%, #a78550 100%);
}

/* ── Variant C · Engineering Blueprint (deep blue/teal) ──────── */
[data-variant="c"] {
  --c-bg: #ffffff;
  --c-surface: #eef2f7;
  --c-ink: #0d1b2a;
  --c-ink-2: #324a5f;
  --c-muted: #8090a0;
  --c-line: #d6dee7;
  --c-accent: #00a3a3;
  --c-accent-2: #1c4f82;
  --gold-grad: linear-gradient(135deg, #1c4f82 0%, #4a90c2 50%, #0d1b2a 100%);
}

/* ── Variant D · Column Blueprint  ───────────────────────────── */
[data-variant="d"] {
  --c-bg: var(--color-ghost-white);
  --c-surface: var(--color-fog-gray);
  --c-ink: var(--color-ink-blue);
  --c-ink-2: var(--color-charcoal-text);
  --c-muted: var(--color-slate-text);
  --c-line: var(--color-steel-gray);
  --c-accent: var(--color-action-orange);
  --c-accent-2: var(--color-deep-plum);
  --gold-grad: var(--gradient-soft-horizon);
}

/* ── Variant E · Sungl Leadgen (預設) ──
   工業科技風 / 深藍 + 紅色 CTA / 白底大圓角卡片 / 為接單頁優化 */
:root {
  --color-sungl-primary: #0B3C5D;
  --color-sungl-accent: #E10600;
  --color-sungl-dark: #08111c;
  --color-sungl-deep: #0f5f8f;
  --color-sungl-text: #17202a;
  --color-sungl-muted: #667085;
  --color-sungl-line: #e6eaf0;
  --color-sungl-bg: #f6f8fb;
  --color-sungl-soft: #dbe7f2;
}
[data-variant="e"],
:root:not([data-variant="a"]):not([data-variant="b"]):not([data-variant="c"]):not([data-variant="d"]) {
  --c-bg: #ffffff;
  --c-surface: var(--color-sungl-bg);
  --c-ink: var(--color-sungl-text);
  --c-ink-2: #2c3a4a;
  --c-muted: var(--color-sungl-muted);
  --c-line: var(--color-sungl-line);
  --c-accent: var(--color-sungl-accent);
  --c-accent-2: var(--color-sungl-primary);
  --gold-grad: linear-gradient(135deg, var(--color-sungl-primary), var(--color-sungl-deep));
}

/* =========================================================
   Reset & Base
   ========================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-zh), var(--font-suisseintl);
  font-size: var(--text-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "salt" 2;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
}

.mono, .data-num {
  font-family: var(--font-sfmono);
  font-feature-settings: "cv11", "salt" 2;
  letter-spacing: 0;
}

/* =========================================================
   Navigation — Variant D 為預設淺色 nav
   Variant A/B/C 沿用舊深色 nav（後段 override）
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-ink);
}
.brand .zh { font-family: var(--font-zh); font-weight: 500; }
.brand .brand-en {
  opacity: .55;
  font-family: var(--font-sfmono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-muted);
}
[data-variant="a"] .brand .brand-en,
[data-variant="b"] .brand .brand-en,
[data-variant="c"] .brand .brand-en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
}
.brand .mark {
  width: 28px; height: 28px;
  background: transparent;
  display: inline-grid; place-items: center;
  position: relative;
}
.brand .mark img,
.brand .mark svg { width: 100%; height: 100%; display: block; }
.nav-links {
  display: flex; gap: 28px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-ink);
}
.nav-links a {
  position: relative;
  padding: 8px 4px;
  transition: color .2s;
  cursor: pointer;
}
.nav-links a:hover { color: var(--color-action-orange); }
.nav-links a.active { color: var(--color-deep-plum); font-weight: 500; }
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-accent);
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-md);
  background: var(--color-action-orange); color: #fff;
  font-family: var(--font-en);
  font-weight: 500; font-size: 14px;
  cursor: pointer; border: 0;
  transition: transform .15s, filter .15s, box-shadow .2s;
  box-shadow: var(--shadow-cta);
  letter-spacing: -0.01em;
}
.nav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lang-switch {
  font-family: var(--font-en);
  font-size: 12px; opacity: .7;
  border: 1px solid var(--c-line);
  border-radius: 99px;
  padding: 4px 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  color: var(--c-ink);
}
.lang-switch:hover { opacity: 1; }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* Variant A/B/C 維持深色 nav */
[data-variant="a"] .nav,
[data-variant="b"] .nav,
[data-variant="c"] .nav {
  background: var(--c-ink);
  color: #fff;
  height: 80px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-variant="a"] .nav-links,
[data-variant="b"] .nav-links,
[data-variant="c"] .nav-links { color: #f3f4f5; }
[data-variant="a"] .nav-links a:hover,
[data-variant="b"] .nav-links a:hover,
[data-variant="c"] .nav-links a:hover { color: #fff; }
[data-variant="a"] .nav-links a.active,
[data-variant="b"] .nav-links a.active,
[data-variant="c"] .nav-links a.active { color: #fff; }
[data-variant="a"] .brand,
[data-variant="b"] .brand,
[data-variant="c"] .brand { color: #fff; }
[data-variant="a"] .brand .mark,
[data-variant="b"] .brand .mark,
[data-variant="c"] .brand .mark {
  background: var(--gold-grad);
  border-radius: 4px;
}
[data-variant="a"] .brand .mark img,
[data-variant="a"] .brand .mark svg,
[data-variant="b"] .brand .mark img,
[data-variant="b"] .brand .mark svg,
[data-variant="c"] .brand .mark img,
[data-variant="c"] .brand .mark svg { display: none; }
[data-variant="a"] .brand .mark::after,
[data-variant="b"] .brand .mark::after,
[data-variant="c"] .brand .mark::after {
  content: "";
  position: absolute; inset: 6px;
  border: 2px solid var(--c-ink);
  border-radius: 2px;
}
[data-variant="a"] .lang-switch,
[data-variant="b"] .lang-switch,
[data-variant="c"] .lang-switch {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* =========================================================
   Hero — Variant D 為淺色點陣藍圖
   ========================================================= */
.hero {
  position: relative;
  background: var(--c-bg);
  color: var(--c-ink);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--c-line);
}
/* 點陣藍圖背景 (CSS-based fallback；亦可用 designer 的 grid-bg.svg) */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(2, 50, 71, 0.10) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  background-position: 0 0;
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: -10%; top: -20%;
  width: 60%; aspect-ratio: 1;
  background: var(--gradient-soft-horizon);
  opacity: 0.06;
  filter: blur(80px);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--spacing-100) var(--gutter) var(--spacing-96);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
}
.eyebrow {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-action-orange);
  margin-bottom: var(--spacing-20);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
.hero h1 {
  font-family: var(--font-en);
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -1.44px;
  margin: 0 0 var(--spacing-16);
  font-weight: 600;
  color: var(--color-ink-blue);
}
.hero h1 .accent {
  color: var(--color-action-orange);
  font-weight: 600;
}
.hero h2 {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-24);
  color: var(--c-muted);
}
.hero p.lead {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-32);
  color: var(--c-ink-2);
  max-width: 540px;
}
.hero-actions { display: flex; gap: var(--spacing-12); flex-wrap: wrap; }

/* Hero art — Column 風格藍圖卡片，可放 hero-blueprint.svg */
.hero-art {
  position: relative;
  aspect-ratio: 6/5;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.12) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--color-ghost-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-art .placeholder {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  position: relative;
  z-index: 2;
}
.hero-art > svg,
.hero-art .blueprint-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 24px;
  z-index: 1;
}
.hero-art:has(svg) .placeholder,
.hero-art:has(.blueprint-svg) .placeholder { display: none; }

/* Variant A/B/C 維持深色 hero */
[data-variant="a"] .hero,
[data-variant="b"] .hero,
[data-variant="c"] .hero {
  background: var(--c-ink);
  color: #fff;
  border-bottom: 0;
}
[data-variant="a"] .hero::before,
[data-variant="b"] .hero::before,
[data-variant="c"] .hero::before {
  background: var(--gold-grad);
  background-image: none;
  background-size: auto;
  width: 6px;
  inset: 0 auto 0 0;
  z-index: 2;
}
[data-variant="a"] .hero::after,
[data-variant="b"] .hero::after,
[data-variant="c"] .hero::after {
  background:
    radial-gradient(1200px 600px at 110% 30%, color-mix(in oklch, var(--c-accent-2) 35%, transparent), transparent 60%),
    radial-gradient(800px 500px at 90% 110%, color-mix(in oklch, var(--c-accent) 18%, transparent), transparent 60%);
  opacity: 1;
  filter: none;
  border-radius: 0;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
}
[data-variant="a"] .hero h1,
[data-variant="b"] .hero h1,
[data-variant="c"] .hero h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
[data-variant="a"] .hero h1 .accent,
[data-variant="b"] .hero h1 .accent,
[data-variant="c"] .hero h1 .accent {
  color: transparent;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
}
[data-variant="a"] .hero h2,
[data-variant="b"] .hero h2,
[data-variant="c"] .hero h2 {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.01em;
}
[data-variant="a"] .hero p.lead,
[data-variant="b"] .hero p.lead,
[data-variant="c"] .hero p.lead {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}
[data-variant="a"] .hero-art,
[data-variant="b"] .hero-art,
[data-variant="c"] .hero-art {
  background:
    linear-gradient(135deg, rgba(45,106,159,0.35), rgba(232,104,26,0.15)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
}
[data-variant="a"] .hero-art .placeholder,
[data-variant="b"] .hero-art .placeholder,
[data-variant="c"] .hero-art .placeholder {
  color: rgba(255,255,255,0.55);
  font-family: var(--font-en);
  font-size: 13px;
}
[data-variant="a"] .hero-art > svg,
[data-variant="b"] .hero-art > svg,
[data-variant="c"] .hero-art > svg,
[data-variant="a"] .hero-art .blueprint-svg,
[data-variant="b"] .hero-art .blueprint-svg,
[data-variant="c"] .hero-art .blueprint-svg { display: none; }
[data-variant="a"] .hero-art:has(svg) .placeholder,
[data-variant="b"] .hero-art:has(svg) .placeholder,
[data-variant="c"] .hero-art:has(svg) .placeholder { display: block; }
[data-variant="a"] .hero-art::after,
[data-variant="b"] .hero-art::after,
[data-variant="c"] .hero-art::after {
  content: "";
  position: absolute; right: -20%; top: -20%;
  width: 60%; aspect-ratio: 1;
  background: var(--gold-grad);
  opacity: 0.18;
  filter: blur(40px);
  border-radius: 50%;
}
[data-variant="a"] .eyebrow,
[data-variant="b"] .eyebrow,
[data-variant="c"] .eyebrow {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--c-accent);
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: var(--spacing-64) var(--gutter); gap: var(--spacing-32); }
  .hero h1 { font-size: 36px; letter-spacing: -0.02em; }
}

/* ── Hero compact (inner pages: about / tech / products / contact) ── */
.hero-compact { min-height: 320px; }
.hero-compact .hero-inner {
  padding: var(--spacing-72) var(--gutter);
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-48);
}
.hero-compact h1 {
  font-size: 40px;
  letter-spacing: -0.8px;
}
.hero-compact .hero-art {
  aspect-ratio: 5/3;
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.10) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--color-ghost-white);
}
.hero-compact .hero-art .placeholder {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
@media (max-width: 900px) {
  .hero-compact .hero-inner { grid-template-columns: 1fr; padding: var(--spacing-48) var(--gutter); }
  .hero-compact h1 { font-size: 32px; }
}

/* ── Section heading utility — use class instead of inline color ── */
.section-head h2.on-dark { color: #fff; }

/* ── Mission heading (replaces inline-styled H3 on about page) ── */
.mission-heading {
  margin-top: var(--spacing-32);
  font-family: var(--font-sfmono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-action-orange);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mission-heading::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
[data-variant="a"] .mission-heading,
[data-variant="b"] .mission-heading,
[data-variant="c"] .mission-heading {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Mission list refinement (Variant D) ── */
.mission li { transition: transform .2s, box-shadow .2s, border-color .2s; }
.mission li:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-action-orange);
}

/* ── Inline-style replacements ── */
.nav-actions { display: flex; align-items: center; gap: 24px; }
.footer-tagline { margin: 0; font-size: 14px; line-height: 1.7; }
.brand-quote { font-style: italic; }
.cta-actions { margin-top: var(--spacing-24); }
.alt-tight { padding-top: var(--spacing-40) !important; padding-bottom: var(--spacing-80) !important; }
.form-success.error { border-color: #ff6644; color: #ffaaaa; }

/* ── Stat card Variant D refinement ── */
.stat-card {
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.stat-card::after {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--color-action-orange);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform .35s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 101, 43, 0.35);
}
.stat-card:hover::after { transform: scaleX(1); }
[data-variant="a"] .stat-card::after,
[data-variant="b"] .stat-card::after,
[data-variant="c"] .stat-card::after { display: none; }

/* ── Step hover (Variant D) ── */
.step { transition: transform .25s, box-shadow .25s; }
.step:hover {
  transform: translateY(-2px);
  box-shadow:
    rgba(17, 26, 74, 0.12) 0px 8px 16px -4px,
    rgba(0, 0, 0, 0.10)    0px 1px 2px 0px,
    rgba(255, 255, 255, 0.10) 0px 0px 0px 1px inset;
}

/* ── FAQ micro-interaction ── */
.faq summary { transition: background .2s; }
.faq summary:hover { background: rgba(236, 101, 43, 0.04); }
.faq summary::after { transition: transform .25s, color .2s; }
.faq[open] summary::after { transform: rotate(180deg); }

/* ── Form focus refinement (Variant D dark form on Plum) ── */
.field input,
.field textarea {
  font-feature-settings: "salt" 2;
}
.field input:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(236, 101, 43, 0.25);
}

/* ── CTA strip — Column-style toned-down ── */
.cta-strip {
  isolation: isolate;
}
[data-variant="d"] .cta-strip {
  background: var(--color-deep-plum);
  color: #fff;
}
[data-variant="d"] .cta-strip::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-variant="d"] .cta-strip h3 { color: #fff; }
[data-variant="d"] .cta-strip p { color: rgba(255,255,255,0.65); }
.cta-strip .btn-primary,
.cta-strip .btn-action {
  margin-top: var(--spacing-16);
}
[data-variant="a"] .cta-strip,
[data-variant="b"] .cta-strip,
[data-variant="c"] .cta-strip {
  background: var(--gold-grad);
  color: #1a1a1a;
}
[data-variant="a"] .cta-strip::before,
[data-variant="b"] .cta-strip::before,
[data-variant="c"] .cta-strip::before {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}
[data-variant="a"] .cta-strip h3,
[data-variant="b"] .cta-strip h3,
[data-variant="c"] .cta-strip h3 { color: #1a1a1a; }
[data-variant="a"] .cta-strip p,
[data-variant="b"] .cta-strip p,
[data-variant="c"] .cta-strip p { color: rgba(26,26,26,0.7); }

/* ── Spec table (Variant D, dark Plum bg) ── */
.spec-table {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: rgba(255, 255, 255, 0.04) 0 0 0 1px inset;
}
.spec-table tbody tr { transition: background .2s; }
.spec-table tbody tr:hover { background: rgba(236, 101, 43, 0.08); }

/* ── Card hover refinement ── */
.card { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { border-color: rgba(236, 101, 43, 0.25); }
.product { transition: transform .25s, box-shadow .25s, border-color .25s; }
.product:hover { border-color: rgba(236, 101, 43, 0.35); }

/* ── Hero blueprint SVG: better fitting ── */
.hero-art > svg {
  padding: 32px;
}
.hero-compact .hero-art > svg {
  padding: 20px;
}
@media (max-width: 700px) {
  .hero-art > svg { padding: 16px; }
}

/* ── Map (contact page) refined hover ── */
.map { transition: border-color .2s; }
.map:hover { border-color: var(--color-action-orange); }

/* ── Cert hover ── */
.cert { transition: transform .2s, background .2s; }
.cert:hover {
  transform: translateY(-1px);
  background: var(--color-action-orange);
}
.cert:hover::before { display: none; }
[data-variant="a"] .cert:hover,
[data-variant="b"] .cert:hover,
[data-variant="c"] .cert:hover { background: var(--c-accent); }

/* ── Container with optional grid bg overlay (alt sections in Variant D) ── */
section.block.alt {
  position: relative;
  isolation: isolate;
}
section.block.alt::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(2, 50, 71, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
section.block.alt > .container { position: relative; z-index: 1; }
[data-variant="a"] section.block.alt::before,
[data-variant="b"] section.block.alt::before,
[data-variant="c"] section.block.alt::before { display: none; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-en);
  font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer; border: 0;
  transition: transform .15s, filter .15s, background .2s, box-shadow .2s;
  text-decoration: none;
}

.btn-action,
.btn-primary {
  background: var(--color-action-orange);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-action:hover,
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--color-deep-plum);
  border: 1px solid var(--color-deep-plum);
  padding: 11px 30px;
}
.btn-outline:hover {
  background: var(--color-deep-plum);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
}
.btn-ghost:hover { background: var(--c-surface); }

.btn-gold {
  background: var(--gold-grad);
  color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-weight: 700;
  padding: 14px 24px;
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); }
[data-variant="a"] .btn-ghost,
[data-variant="b"] .btn-ghost,
[data-variant="c"] .btn-ghost {
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  background: transparent;
}
[data-variant="a"] .btn-ghost:hover,
[data-variant="b"] .btn-ghost:hover,
[data-variant="c"] .btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* =========================================================
   Section base
   ========================================================= */
section.block { padding: var(--spacing-96) 0; }
section.block.alt { background: var(--c-surface); }
section.block.dark {
  background: var(--color-deep-plum);
  color: #fff;
  position: relative;
  overflow: hidden;
}
section.block.dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
section.block.dark > .container { position: relative; z-index: 2; }

/* World-map atmospheric overlay (used in stats / dark sections) */
.world-map-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.world-map-bg svg {
  width: 90%;
  max-width: 1100px;
  height: auto;
}
section.block.dark.has-world-map { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }

.brand-quote {
  margin-top: var(--spacing-32);
  text-align: center;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.65);
}
[data-variant="a"] section.block.dark,
[data-variant="b"] section.block.dark,
[data-variant="c"] section.block.dark { background: var(--c-ink); }
[data-variant="a"] section.block.dark::before,
[data-variant="b"] section.block.dark::before,
[data-variant="c"] section.block.dark::before { display: none; }

.section-head { margin-bottom: var(--spacing-48); }
.section-head h2 {
  font-family: var(--font-en);
  font-size: var(--text-heading);
  font-weight: 600;
  margin: 0 0 var(--spacing-12);
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--color-ink-blue);
}
.section-head .kicker {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-action-orange);
  margin-bottom: var(--spacing-12);
  display: block;
}
.section-head .rule {
  width: 48px; height: 3px;
  background: var(--color-action-orange);
  margin-top: var(--spacing-16);
  border-radius: 2px;
}
section.block.dark .section-head h2 { color: #fff; }

[data-variant="a"] .section-head h2,
[data-variant="b"] .section-head h2,
[data-variant="c"] .section-head h2 {
  font-family: var(--font-zh);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-variant="a"] .section-head .kicker,
[data-variant="b"] .section-head .kicker,
[data-variant="c"] .section-head .kicker {
  font-family: var(--font-en);
  font-size: 12px;
}
[data-variant="a"] .section-head .rule,
[data-variant="b"] .section-head .rule,
[data-variant="c"] .section-head .rule {
  width: 60px; height: 4px;
}

/* =========================================================
   Cards
   ========================================================= */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-20); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-20); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  background: var(--color-ghost-white);
  border-radius: var(--radius-md);
  padding: var(--spacing-24);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
}
section.block.alt .card { background: var(--color-ghost-white); }
.card::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--color-action-orange);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform .35s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.card:hover::before { transform: scaleX(1); }
.card .num {
  font-family: var(--font-sfmono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--c-muted);
  margin-bottom: var(--spacing-16);
  display: block;
}
.card h3 {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-12);
  color: var(--color-ink-blue);
}
.card p {
  font-family: var(--font-zh);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.28px;
  color: var(--c-muted);
  margin: 0;
}

.card.dark {
  background: var(--c-ink);
  color: #fff;
}
.card.dark h3 { color: #fff; }
.card.dark p { color: rgba(255,255,255,0.72); }
.card.dark::before { background: var(--gold-grad); }

/* Stat card */
.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-32) var(--spacing-24);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.stat-card .num-big {
  font-family: var(--font-en);
  font-size: var(--text-display);
  font-weight: 600;
  color: var(--color-action-orange);
  line-height: 1;
  letter-spacing: -1.44px;
}
.stat-card .label {
  margin-top: var(--spacing-12);
  font-size: var(--text-body);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-zh);
}
[data-variant="a"] .stat-card,
[data-variant="b"] .stat-card,
[data-variant="c"] .stat-card {
  background: var(--c-ink);
  border: 0;
}

/* =========================================================
   Process steps
   ========================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: stretch;
}
.step {
  position: relative;
  background: var(--color-deep-plum);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-24) var(--spacing-20);
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  font-weight: 500;
  font-family: var(--font-zh);
  box-shadow: var(--shadow-card);
}
.step .step-num {
  font-family: var(--font-sfmono);
  font-size: 13px;
  opacity: 0.6;
  margin-bottom: var(--spacing-8);
  letter-spacing: 0.08em;
}
.step .step-name {
  font-size: 17px;
  letter-spacing: -0.01em;
}
.step + .step::before {
  content: "→";
  position: absolute;
  left: -12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sfmono);
  font-size: 18px;
  color: var(--color-action-orange);
  font-weight: 400;
  z-index: 2;
}
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step + .step::before { display: none; }
}
[data-variant="a"] .step { background: var(--c-accent-2); }
[data-variant="b"] .step { background: #1f1d1a; }
[data-variant="c"] .step { background: var(--c-accent-2); }

/* =========================================================
   About lockup
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
}
.about-grid .copy p {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--c-ink-2);
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-zh);
}
.about-grid .image {
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.10) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--color-ghost-white);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.about-grid .image span {
  font-family: var(--font-sfmono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-size: 11px;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--spacing-32); }
}

/* =========================================================
   Mission list
   ========================================================= */
.mission {
  list-style: none;
  padding: 0; margin: var(--spacing-24) 0 0;
  display: grid;
  gap: 10px;
}
.mission li {
  display: flex; align-items: flex-start; gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-20);
  background: var(--color-ghost-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--c-ink-2);
  line-height: 1.5;
  font-family: var(--font-zh);
  box-shadow: var(--shadow-card);
}
.mission li::before {
  content: "";
  flex-shrink: 0;
  width: 12px; height: 12px; margin-top: 5px;
  background: var(--color-action-orange);
  border-radius: 2px;
}

/* =========================================================
   Tech rows
   ========================================================= */
.tech-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
  padding: var(--spacing-64) 0;
  border-bottom: 1px solid var(--c-line);
}
.tech-row:last-child { border-bottom: 0; }
.tech-row.reverse .copy { order: 2; }
.tech-row .image {
  aspect-ratio: 3/2;
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.10) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--color-ghost-white);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.tech-row .image span {
  font-family: var(--font-sfmono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-size: 11px;
  position: relative;
}
.tech-row h3 {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 var(--spacing-8);
  letter-spacing: -0.02em;
  color: var(--color-ink-blue);
}
.tech-row .en {
  font-family: var(--font-sfmono);
  font-size: 12px;
  color: var(--color-action-orange);
  letter-spacing: 0.04em;
  margin: 0 0 var(--spacing-16);
  text-transform: uppercase;
}
.tech-row .rule {
  width: 48px; height: 3px;
  background: var(--color-action-orange);
  margin-bottom: var(--spacing-20);
  border-radius: 2px;
}
.tech-row p {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--c-ink-2);
  margin: 0;
  font-family: var(--font-zh);
}
@media (max-width: 900px) {
  .tech-row { grid-template-columns: 1fr; gap: var(--spacing-32); padding: var(--spacing-40) 0; }
  .tech-row.reverse .copy { order: 0; }
}
[data-variant="a"] .tech-row .en,
[data-variant="b"] .tech-row .en,
[data-variant="c"] .tech-row .en {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--c-accent-2);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* =========================================================
   Spec table
   ========================================================= */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sfmono);
  font-size: 13px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spec-table th, .spec-table td {
  padding: var(--spacing-16) var(--spacing-20);
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spec-table thead th {
  background: var(--color-action-orange);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.spec-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
.spec-table tbody td:first-child {
  font-weight: 500;
  color: var(--color-action-orange);
  font-family: var(--font-zh);
}
[data-variant="a"] .spec-table thead th,
[data-variant="b"] .spec-table thead th,
[data-variant="c"] .spec-table thead th {
  background: var(--c-accent-2);
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 700;
}
[data-variant="a"] .spec-table tbody td:first-child,
[data-variant="b"] .spec-table tbody td:first-child,
[data-variant="c"] .spec-table tbody td:first-child {
  font-weight: 700;
  color: inherit;
  font-family: inherit;
}

/* =========================================================
   Product cards
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-24);
}
.product {
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-ghost-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
}
.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.product .image {
  aspect-ratio: 16/8;
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.10) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--color-fog-gray);
  display: grid; place-items: center;
  border-bottom: 3px solid var(--color-action-orange);
  position: relative;
}
.product .image span {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.product .image .badge {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-sfmono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-deep-plum);
  color: #fff;
  padding: 4px 10px;
  border-radius: 99px;
}
.product .body {
  background: var(--color-deep-plum);
  color: #fff;
  padding: var(--spacing-24);
}
.product .body .en {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-action-orange);
  margin-bottom: var(--spacing-8);
}
.product .body h3 {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 var(--spacing-8);
  letter-spacing: -0.02em;
}
.product .body p {
  font-family: var(--font-zh);
  font-size: var(--text-body);
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
}
[data-variant="a"] .product .body,
[data-variant="b"] .product .body,
[data-variant="c"] .product .body { background: var(--c-ink); }
[data-variant="a"] .product .image .badge,
[data-variant="b"] .product .image .badge,
[data-variant="c"] .product .image .badge { background: var(--c-ink); }
[data-variant="a"] .product .body .en,
[data-variant="b"] .product .body .en,
[data-variant="c"] .product .body .en {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--c-accent);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: grid; gap: var(--spacing-12); }
.faq {
  background: var(--color-ghost-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-action-orange);
  padding: 0;
  overflow: hidden;
  transition: box-shadow .2s;
  box-shadow: var(--shadow-card);
}
.faq[open] { box-shadow: var(--shadow-xl); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-20) var(--spacing-24);
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink-blue);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-16);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sfmono);
  font-size: 22px; font-weight: 400;
  color: var(--color-action-orange);
  transition: transform .25s;
}
.faq[open] summary::after { content: "−"; }
.faq .a {
  padding: 0 var(--spacing-24) var(--spacing-20);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--c-ink-2);
  font-family: var(--font-zh);
}

/* =========================================================
   Form
   ========================================================= */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-16);
}
.form .full { grid-column: 1 / -1; }
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font-zh), var(--font-en);
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: border-color .2s, background .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--color-action-orange);
  background: rgba(255,255,255,0.1);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,0.45); }
.field .err {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #ff8866;
  font-family: var(--font-sfmono);
}
.field.invalid .err { display: block; }
.field.invalid input,
.field.invalid textarea { border-color: #ff6644; }
.form-success {
  background: rgba(236, 101, 43, 0.12);
  border: 1px solid var(--color-action-orange);
  color: #fff;
  padding: var(--spacing-20);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-20);
  display: none;
  font-size: 15px;
  font-family: var(--font-zh);
}
.form-success.show { display: block; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

/* =========================================================
   CTA strip
   ========================================================= */
.cta-strip {
  background: var(--gradient-soft-horizon);
  padding: var(--spacing-48) var(--gutter);
  text-align: center;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cta-strip h3 {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 var(--spacing-8);
  letter-spacing: -0.02em;
  position: relative;
}
.cta-strip p {
  margin: 0;
  font-family: var(--font-zh);
  font-size: 16px;
  opacity: 0.75;
  position: relative;
}
[data-variant="a"] .cta-strip,
[data-variant="b"] .cta-strip,
[data-variant="c"] .cta-strip { background: var(--gold-grad); }

/* =========================================================
   Cert chips
   ========================================================= */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}
.cert {
  background: var(--color-deep-plum);
  color: #fff;
  border-radius: 999px;
  padding: var(--spacing-20) var(--spacing-24);
  text-align: center;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.cert::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-action-orange);
}
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
[data-variant="a"] .cert,
[data-variant="b"] .cert,
[data-variant="c"] .cert {
  background: var(--c-ink);
  font-weight: 700;
}
[data-variant="a"] .cert::before,
[data-variant="b"] .cert::before,
[data-variant="c"] .cert::before {
  width: 4px;
  background: var(--gold-grad);
}

/* =========================================================
   Map
   ========================================================= */
.map {
  aspect-ratio: 16/5;
  background:
    radial-gradient(circle, rgba(2, 50, 71, 0.12) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--color-fog-gray);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
}
.map span {
  font-family: var(--font-sfmono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* =========================================================
   Footer
   ========================================================= */
footer.site-footer {
  background: var(--color-deep-plum);
  color: rgba(255,255,255,0.6);
  border-top: 3px solid var(--color-action-orange);
  position: relative;
  overflow: hidden;
}
footer.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
footer.site-footer .top {
  padding: var(--spacing-48) var(--gutter) var(--spacing-32);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--spacing-48);
  position: relative;
}
footer.site-footer h4 {
  font-family: var(--font-sfmono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #fff;
  margin: 0 0 var(--spacing-16);
}
footer.site-footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-family: var(--font-zh), var(--font-en);
  font-size: 14px;
  letter-spacing: -0.01em;
}
footer.site-footer ul a:hover { color: var(--color-action-orange); }
footer.site-footer .legal {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: var(--spacing-20) var(--gutter);
  font-size: 13px;
  text-align: center;
  font-family: var(--font-sfmono);
  letter-spacing: 0.04em;
  position: relative;
}
@media (max-width: 900px) {
  footer.site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--spacing-32); }
}
[data-variant="a"] footer.site-footer,
[data-variant="b"] footer.site-footer,
[data-variant="c"] footer.site-footer {
  background: var(--c-ink);
  border-top-width: 2px;
  border-top-color: var(--c-accent);
}
[data-variant="a"] footer.site-footer::before,
[data-variant="b"] footer.site-footer::before,
[data-variant="c"] footer.site-footer::before { display: none; }
[data-variant="a"] footer.site-footer h4,
[data-variant="b"] footer.site-footer h4,
[data-variant="c"] footer.site-footer h4 {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Page transitions
   ========================================================= */
.page { animation: fadeIn .35s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   Variant B / C 額外 tweaks（沿用舊版）
   ========================================================= */
[data-variant="b"] .hero,
[data-variant="b"] section.block.dark,
[data-variant="b"] footer.site-footer,
[data-variant="b"] .product .body,
[data-variant="b"] .stat-card,
[data-variant="b"] .cert,
[data-variant="b"] .card.dark,
[data-variant="b"] .step {
  background: #1f1d1a;
}
[data-variant="b"] .nav-cta { background: var(--c-accent); }
[data-variant="b"] .hero h1 { font-weight: 600; letter-spacing: -0.02em; }

[data-variant="c"] .hero::after {
  background:
    radial-gradient(1200px 600px at 110% 30%, rgba(0,163,163,0.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 80px);
}

/* tweak panel container */
.tweak-panel { z-index: 100; }

/* ── Generic post / page templates ── */
.post-summary {
  margin-bottom: var(--spacing-48);
  padding-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--c-line);
}
.post-title {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-12);
  color: var(--color-ink-blue);
}
.post-title a { color: inherit; }
.post-title a:hover { color: var(--color-action-orange); }
.post-excerpt {
  font-family: var(--font-zh);
  color: var(--c-ink-2);
  line-height: 1.7;
  font-size: 15px;
}
.page-article { max-width: 760px; margin: 0 auto; }
.page-title {
  font-family: var(--font-en);
  font-size: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin: 0 0 var(--spacing-32);
  color: var(--color-ink-blue);
}
.page-content {
  font-family: var(--font-zh);
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-ink-2);
}
.page-content p { margin: 0 0 var(--spacing-16); }
.page-content h2 {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink-blue);
  margin: var(--spacing-32) 0 var(--spacing-16);
}

/* =========================================================
   Variant E · Sungl Leadgen — Single-page components
   ========================================================= */

/* ── Lead Hero (深藍漸層 + 紅色噴點) ── */
.lead-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,
    var(--color-sungl-dark) 0%,
    var(--color-sungl-primary) 60%,
    var(--color-sungl-deep) 100%);
  color: #fff;
  isolation: isolate;
}
.lead-hero .hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 25%, rgba(225, 6, 0, 0.35), transparent 28%),
    linear-gradient(90deg, rgba(8, 17, 28, 0.95), rgba(8, 17, 28, 0.55)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 18px);
  z-index: 0;
  pointer-events: none;
}
.lead-hero .container {
  position: relative;
  z-index: 1;
  padding: var(--spacing-72) 0;
}
.lead-hero .eyebrow {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sungl-accent);
  margin: 0;
  display: inline-block;
}
.lead-hero .eyebrow::before { display: none; }
.lead-hero h1 {
  font-family: var(--font-en);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 830px;
  margin: 10px 0 20px;
  color: #fff;
}
.lead-hero .lead {
  font-family: var(--font-zh);
  font-size: 20px;
  line-height: 1.6;
  max-width: 680px;
  color: var(--color-sungl-soft);
  margin: 0;
}
.lead-hero .hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 34px 0;
}
.lead-hero .trust-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--spacing-32);
}
.lead-hero .trust-row span {
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 8px 14px;
  border-radius: 999px;
  color: #eaf2f8;
  font-family: var(--font-zh);
  font-size: 14px;
  font-weight: 500;
}

/* Lead button styles (overrides .btn for Variant E) */
.btn.lead-primary {
  background: var(--color-sungl-accent);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 16px 32px rgba(225, 6, 0, 0.25);
}
.btn.lead-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn.lead-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  font-weight: 700;
  border-radius: 999px;
  padding: 13px 28px;
}
.btn.lead-secondary:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Lead Section (eyebrow + h2 + subtitle 三件式) ── */
.lead-section { padding: var(--spacing-96) 0; }
.lead-section .section-head {
  max-width: 720px;
  margin: 0 auto var(--spacing-40);
  text-align: left;
}
.lead-section .section-head .eyebrow {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sungl-accent);
  margin: 0 0 var(--spacing-8);
  display: inline-block;
}
.lead-section .section-head .eyebrow::before { display: none; }
.lead-section .section-head h2 {
  font-family: var(--font-en);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-12);
  color: var(--color-sungl-primary);
}
.lead-section .section-head .subtitle {
  font-family: var(--font-zh);
  color: var(--color-sungl-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* ── Lead cards (3-col rounded white) ── */
.lead-cards {
  display: grid;
  gap: var(--spacing-24);
}
.lead-cards.three { grid-template-columns: repeat(3, 1fr); }
.lead-cards .card {
  background: #fff;
  border: 1px solid var(--color-sungl-line);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 18px 45px rgba(11, 60, 93, 0.08);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lead-cards .card::before { display: none; }
.lead-cards .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(11, 60, 93, 0.13);
  border-color: var(--color-sungl-primary);
}
.lead-cards .card .icon {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: var(--color-sungl-primary);
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  letter-spacing: 0;
}
.lead-cards .card h3 {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-8);
  color: var(--color-sungl-text);
}
.lead-cards .card p {
  font-family: var(--font-zh);
  color: var(--color-sungl-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.lead-cards.compact .card { box-shadow: none; }
@media (max-width: 820px) {
  .lead-cards.three { grid-template-columns: 1fr; }
}

/* ── Split section (process) ── */
.lead-split {
  background: var(--color-sungl-bg);
  padding: var(--spacing-96) 0;
}
.lead-split .split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.lead-split h2 {
  font-family: var(--font-en);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  color: var(--color-sungl-primary);
}
.lead-split p {
  font-family: var(--font-zh);
  color: var(--color-sungl-muted);
  font-size: 16px;
  line-height: 1.7;
}
.lead-steps {
  display: grid;
  gap: 14px;
}
.lead-steps .step-item {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-sungl-line);
  border-radius: 18px;
  padding: 18px;
  transition: transform .25s, box-shadow .25s;
}
.lead-steps .step-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(11, 60, 93, 0.10);
}
.lead-steps .step-item b {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-sungl-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-weight: 800;
  flex-shrink: 0;
}
.lead-steps .step-item span {
  font-family: var(--font-zh);
  font-weight: 500;
  color: var(--color-sungl-text);
}
@media (max-width: 820px) {
  .lead-split .split-inner { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .lead-split { padding: var(--spacing-64) 0; }
}

/* ── Quote section (dark gradient + white form card) ── */
.quote-section {
  padding: var(--spacing-96) 0;
  background: linear-gradient(135deg, var(--color-sungl-dark), var(--color-sungl-primary));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.quote-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(225, 6, 0, 0.18), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.quote-section > .container {
  position: relative;
  z-index: 1;
}
.quote-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.quote-copy .eyebrow {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sungl-accent);
  display: inline-block;
  margin: 0;
}
.quote-copy .eyebrow::before { display: none; }
.quote-copy h2 {
  font-family: var(--font-en);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  color: #fff;
}
.quote-copy p,
.quote-copy li {
  font-family: var(--font-zh);
  color: var(--color-sungl-soft);
  font-size: 16px;
  line-height: 1.75;
}
.quote-copy ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-20) 0 0;
  display: grid;
  gap: 8px;
}
.quote-copy li::before {
  content: "✓";
  display: inline-block;
  margin-right: 10px;
  color: var(--color-sungl-accent);
  font-weight: 800;
}

.quote-form {
  background: #fff;
  color: var(--color-sungl-text);
  border-radius: 28px;
  padding: 30px;
  display: grid;
  gap: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}
.quote-form label {
  font-family: var(--font-zh);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-sungl-text);
  display: block;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--color-sungl-line);
  border-radius: 14px;
  padding: 13px 14px;
  font: inherit;
  font-family: var(--font-zh);
  background: #fff;
  color: var(--color-sungl-text);
  transition: border-color .2s, box-shadow .2s;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: 0;
  border-color: var(--color-sungl-primary);
  box-shadow: 0 0 0 3px rgba(11, 60, 93, 0.15);
}
.quote-form textarea { resize: vertical; min-height: 120px; }
.quote-form .full {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}
.quote-form .form-note {
  font-size: 13px;
  color: var(--color-sungl-muted);
  margin: 0;
  font-family: var(--font-zh);
  font-weight: 400;
}
.quote-form .form-success.show {
  background: rgba(11, 60, 93, 0.08);
  border: 1px solid var(--color-sungl-primary);
  color: var(--color-sungl-primary);
  padding: 16px;
  border-radius: 14px;
  font-family: var(--font-zh);
  font-weight: 500;
}
.quote-form .form-success.show.error {
  background: rgba(225, 6, 0, 0.08);
  border-color: var(--color-sungl-accent);
  color: var(--color-sungl-accent);
}

@media (max-width: 820px) {
  .quote-grid { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .quote-section { padding: var(--spacing-64) 0; }
  .quote-form { padding: 24px; }
}

/* ── Lead navigation override (Variant E) ── */
[data-variant="e"] .nav,
:root .nav.lead-nav {
  height: 76px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-sungl-line);
}
[data-variant="e"] .nav-cta,
:root .nav.lead-nav .nav-cta {
  background: var(--color-sungl-primary);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 800;
  box-shadow: none;
}
[data-variant="e"] .nav-links a,
:root .nav.lead-nav .nav-links a {
  font-weight: 600;
  color: var(--color-sungl-text);
}
[data-variant="e"] .nav-links a:hover,
:root .nav.lead-nav .nav-links a:hover { color: var(--color-sungl-primary); }
[data-variant="e"] .nav-links a.active,
:root .nav.lead-nav .nav-links a.active {
  color: var(--color-sungl-primary);
}

/* Brand image in nav (Variant E uses uploaded JPG logo) */
.brand img.brand-logo {
  height: 46px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* WordPress custom-logo wrapper (when uploaded via Customizer) */
.brand-custom-logo .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-custom-logo .custom-logo {
  height: 46px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  display: block;
}
[data-variant="d"] .brand-custom-logo .custom-logo {
  height: 36px;
}
[data-variant="e"] .brand .mark,
:root[data-variant="e"] .brand .mark { display: none; }
[data-variant="e"] .brand .zh,
[data-variant="e"] .brand .brand-en,
:root[data-variant="e"] .brand .zh,
:root[data-variant="e"] .brand .brand-en { display: none; }

/* =========================================================
   Quality Compare Slider — before/after
   ========================================================= */
.quality-compare { background: var(--color-sungl-bg); }
.compare-slider {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: #08111c;
  box-shadow: 0 24px 60px rgba(11, 60, 93, 0.18);
  cursor: ew-resize;
  touch-action: none;
}
.compare-slider .compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.compare-slider .compare-before-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0);
  pointer-events: none;
}

/* Divider line */
.compare-slider .compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos, 50%);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* Drag handle */
.compare-slider .compare-handle {
  position: absolute;
  top: 50%;
  left: var(--compare-pos, 50%);
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.30);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform .15s, box-shadow .2s;
  z-index: 4;
}
.compare-slider .compare-handle:hover,
.compare-slider .compare-handle:focus-visible {
  transform: translate(-50%, -50%) scale(1.05);
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(225, 6, 0, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.30);
}
.compare-slider .compare-handle .handle-arrow {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-sungl-primary);
  pointer-events: none;
}

/* Top labels */
.compare-slider .compare-label {
  position: absolute;
  top: 16px;
  font-family: var(--font-zh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.compare-slider .compare-label-before {
  left: 16px;
  background: rgba(176, 32, 32, 0.85);
}
.compare-slider .compare-label-after {
  right: 16px;
  background: rgba(15, 110, 60, 0.85);
}

/* Hint badge — only on first load before user interacts */
.compare-slider .compare-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-zh);
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s;
  letter-spacing: 0.04em;
}
.compare-slider.has-interacted .compare-hint { opacity: 0; }

@media (max-width: 700px) {
  .compare-slider { aspect-ratio: 4/3; border-radius: 16px; }
  .compare-slider .compare-handle { width: 44px; height: 44px; }
  .compare-slider .compare-label { font-size: 11px; padding: 4px 10px; }
}

/* ── Lead footer (Variant E) ── */
.lead-footer {
  background: #050b12;
  color: #b9c5d1;
  padding: var(--spacing-32) 0;
}
.lead-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.lead-footer p {
  margin: 0;
  font-family: var(--font-zh);
  font-size: 14px;
  line-height: 1.7;
}

/* ── Inner-page hero-art geometric placeholder (Variant D) ──
   When no SVG present, draw a refined geometric corner frame */
.hero-compact .hero-art {
  position: relative;
}
.hero-compact .hero-art:not(:has(svg))::before {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.hero-compact .hero-art:not(:has(svg))::after {
  content: "";
  position: absolute;
  width: 32px; height: 32px;
  top: 24px; right: 24px;
  border-top: 2px solid var(--color-action-orange);
  border-right: 2px solid var(--color-action-orange);
  pointer-events: none;
}
[data-variant="a"] .hero-compact .hero-art:not(:has(svg))::before,
[data-variant="b"] .hero-compact .hero-art:not(:has(svg))::before,
[data-variant="c"] .hero-compact .hero-art:not(:has(svg))::before { display: none; }
[data-variant="a"] .hero-compact .hero-art:not(:has(svg))::after,
[data-variant="b"] .hero-compact .hero-art:not(:has(svg))::after,
[data-variant="c"] .hero-compact .hero-art:not(:has(svg))::after { display: none; }