/* ============================================================================
   中腾微电网 · VGRID — Storefront design system (Glass · Apple-grade motion)
   ----------------------------------------------------------------------------
   · Glassmorphism + Apple-style interaction for a serious B2B export site:
     frosted glass over real imagery, a single restrained tech-blue accent,
     ambient cursor-following light, a cursor glass lens and card highlights.
   · Keeps every class name from the classic system so all EJS views keep
     working and the template stays safely switchable in the back office.
   · 3 switchable colour themes via [data-theme] on <html>: tech (flagship) /
     dark / light. See DESIGN_SPEC.md for the full design constitution.
   · Fonts (Inter + Noto Sans SC for flawless CN/EN, IBM Plex Mono for specs)
     are loaded in partials/head.ejs with preconnect.
   · Admin back-office styles live in /css/admin.css (untouched).
   ============================================================================ */

/* ---------- Theme-agnostic tokens ---------- */
:root {
  /* Typography — CN/EN perfect: Latin glyphs from Inter, CJK fallback to Noto Sans SC */
  --font-display: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Spacing — 8pt grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* Radius — restrained, Apple-grade */
  --r-sm: 8px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Motion — Apple-style easing */
  --ease: cubic-bezier(.22, .61, .36, 1);      /* standard */
  --eur: cubic-bezier(.2, .7, .2, 1);          /* scroll reveal */
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* signature: fast then slow */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s; --dur: .35s; --dur-slow: .6s;

  --container: 1240px;

  /* Default (fallback) theme = tech, so the site never renders unstyled */
  --bg:#080b14; --bg-1:#0c1220; --bg-2:#101a2e; --bg-3:#16263f;
  --line:#1e2c47; --line-soft:#16203a;
  --text:#e8eefb; --text-2:#9db1d0; --text-3:#647a9c;
  --accent:#3b82f6; --accent-2:#38bdf8;
  --accent-soft:rgba(59,130,246,.12); --accent-line:rgba(59,130,246,.38);
  --on-accent:#ffffff; --ok:#34d399;
  --glass:rgba(255,255,255,.06); --glass-strong:rgba(255,255,255,.10);
  --glass-bd:rgba(255,255,255,.14);
  --topbar-bg:rgba(8,11,20,.72); --header-bg:rgba(10,15,26,.55); --header-bg-scrolled:rgba(8,11,20,.88);
  --footer-bg:#070a12;
  --sh-1:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 70px rgba(0,0,0,.55);
  --grain-1:rgba(59,130,246,.12); --grain-2:rgba(56,189,248,.08);
  --theme-color:#080b14;
}

/* ---------- PRESET 1 · TECH (flagship: deep tech-blue) ---------- */
:root[data-theme="tech"] {
  --bg:#080b14; --bg-1:#0c1220; --bg-2:#101a2e; --bg-3:#16263f;
  --line:#1e2c47; --line-soft:#16203a;
  --text:#e8eefb; --text-2:#9db1d0; --text-3:#647a9c;
  --accent:#3b82f6; --accent-2:#38bdf8;
  --accent-soft:rgba(59,130,246,.12); --accent-line:rgba(59,130,246,.38);
  --on-accent:#ffffff; --ok:#34d399;
  --glass:rgba(255,255,255,.06); --glass-strong:rgba(255,255,255,.10); --glass-bd:rgba(255,255,255,.14);
  --topbar-bg:rgba(8,11,20,.72); --header-bg:rgba(10,15,26,.55); --header-bg-scrolled:rgba(8,11,20,.88);
  --footer-bg:#070a12;
  --sh-1:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 70px rgba(0,0,0,.55);
  --grain-1:rgba(59,130,246,.12); --grain-2:rgba(56,189,248,.08);
  --theme-color:#080b14;
}

/* ---------- PRESET 2 · DARK (serious graphite, near-black) ---------- */
:root[data-theme="dark"] {
  --bg:#0a0a0c; --bg-1:#101013; --bg-2:#16161a; --bg-3:#1e1e24;
  --line:#26262e; --line-soft:#1a1a20;
  --text:#f0f0f2; --text-2:#a6a6b0; --text-3:#6e6e78;
  --accent:#0a84ff; --accent-2:#409cff;
  --accent-soft:rgba(10,132,255,.14); --accent-line:rgba(10,132,255,.40);
  --on-accent:#ffffff; --ok:#30d158;
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.08); --glass-bd:rgba(255,255,255,.12);
  --topbar-bg:rgba(10,10,12,.72); --header-bg:rgba(12,12,15,.55); --header-bg-scrolled:rgba(10,10,12,.90);
  --footer-bg:#08080a;
  --sh-1:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.50);
  --sh-2:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 70px rgba(0,0,0,.58);
  --grain-1:rgba(10,132,255,.12); --grain-2:rgba(64,156,255,.07);
  --theme-color:#0a0a0c;
}

/* ---------- PRESET 3 · LIGHT (bright, frosted glass over daylight) ---------- */
:root[data-theme="light"] {
  --bg:#f4f6fa; --bg-1:#eef1f7; --bg-2:#ffffff; --bg-3:#e3e8f0;
  --line:#d3dbe6; --line-soft:#e2e8f0;
  --text:#0d1524; --text-2:#49566c; --text-3:#8593a9;
  --accent:#1f5fe0; --accent-2:#2563eb;
  --accent-soft:rgba(31,95,224,.10); --accent-line:rgba(31,95,224,.30);
  --on-accent:#ffffff; --ok:#15803d;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.72); --glass-bd:rgba(20,40,80,.12);
  --topbar-bg:rgba(244,246,250,.80); --header-bg:rgba(255,255,255,.60); --header-bg-scrolled:rgba(244,246,250,.94);
  --footer-bg:#0d1524;
  --sh-1:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px rgba(15,23,42,.10);
  --sh-2:0 1px 0 rgba(255,255,255,.7) inset, 0 24px 70px rgba(15,23,42,.14);
  --grain-1:rgba(31,95,224,.08); --grain-2:rgba(37,99,235,.05);
  --theme-color:#f4f6fa;
}

/* ===================== RESET / BASE ===================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Ambient living background — slow drifting colour glow behind everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 82% -8%, var(--grain-1), transparent 60%),
    radial-gradient(900px 520px at -8% 112%, var(--grain-2), transparent 60%);
  transition: background var(--dur) var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--on-accent); }

h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }

/* CJK (zh) typography: relaxed leading + neutral tracking so Chinese pages
   feel as airy as Latin ones (the Sora→Noto Sans SC stack handles glyphs). */
body:lang(zh) { line-height: 1.78; letter-spacing: .2px; }
h1:lang(zh), h2:lang(zh), h3:lang(zh), h4:lang(zh), h5:lang(zh), h6:lang(zh) { letter-spacing: .01em; line-height: 1.3; }
.hero h1:lang(zh), .page-hero h1:lang(zh), .product-title:lang(zh) { letter-spacing: .01em; line-height: 1.24; }
.section-head h2:lang(zh), .section-title:lang(zh) { line-height: 1.3; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ===================== LAYOUT ===================== */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; position: relative; z-index: 1; }
.container.narrow { max-width: 900px; }
#main { position: relative; z-index: 1; }
#main > .container { padding-top: clamp(28px, 5vw, 56px); padding-bottom: var(--s5); }

.section { padding-block: var(--s6); position: relative; }
.section--tight { padding-block: var(--s5); }
.section-alt { background: var(--bg-1); border-block: 1px solid var(--line-soft); transition: background var(--dur) var(--ease); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 20ch; }
.section-head p { color: var(--text-3); margin-top: 8px; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 22ch; }
.section-lead { color: var(--text-2); max-width: 56ch; margin-top: var(--s2); font-size: 1.05rem; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s2);
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: var(--accent-line); }

.link-all { color: var(--accent-2); font-weight: 600; font-size: 15px; white-space: nowrap; }
.link-all:hover { color: var(--accent); }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  font-family: var(--font-body);
  transition: transform .2s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
  cursor: pointer; line-height: 1.1;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary, .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); box-shadow: 0 8px 26px var(--accent-soft); }
.btn-primary:hover, .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--accent-line); }
.btn-ghost { border-color: var(--glass-bd); color: var(--text); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-dark { background: var(--bg-3); color: var(--text); border-color: var(--glass-bd); }
.btn-dark:hover { background: var(--text); color: var(--bg); transform: translateY(-2px); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ===================== TOPBAR ===================== */
.topbar {
  background: var(--topbar-bg); border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-3); position: relative; z-index: 60;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: background var(--dur) var(--ease);
}
.topbar .container, .topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 42px; gap: var(--s3); }
.topbar a:hover { color: var(--text); }
.topbar .tb-right { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.topbar .dot { color: var(--accent); }
.topbar .tb-sep { opacity: .4; }
.topbar-link { color: var(--text-3); text-decoration: none; font-size: 13px; padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--glass-bd); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.topbar-link:hover { color: var(--accent-2); border-color: var(--accent-line); background: var(--glass); }
/* 询价车移入 topbar：与相邻链接字号一致，徽章保持高亮 */
.topbar-link.cart-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Theme switcher */
.theme-switch { display: inline-flex; align-items: center; gap: 7px; }
.theme-switch .ts-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.theme-swatch {
  width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 2px solid transparent;
  background: var(--sw); position: relative; transition: transform .15s var(--ease), border-color .15s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.active { border-color: var(--text); }
.theme-swatch.active::after { content:""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--text-3); }

/* ===================== HEADER / NAV ===================== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.header.is-scrolled { border-color: var(--glass-bd); background: var(--header-bg-scrolled); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--s3); }
/* The catalogue grew (家庭微电网 / 工商业微电网), so the header must survive a
   longer menu: the brand block may shrink but never wrap into columns, and
   the action cluster (search / language / cart) never compresses. */
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; font-size: 1.12rem; line-height: 1.15; flex: 0 1 auto; min-width: 0; }
.brand > span:not(.mark) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .mark {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: 15px;
  box-shadow: var(--sh-1);
}
.brand small { display: block; font-family: inherit; font-weight: 400; font-size: 11px; letter-spacing: .02em; line-height: 1.3; margin-top: 2px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo {
  display: block; width: auto; height: 36px; object-fit: contain; flex: none;
  transition: transform .2s var(--ease), filter .2s;
}
.brand:hover .brand-logo { transform: scale(1.02); }
/* Dark themes: the uploaded logo is a transparent PNG with dark-blue text.
   Add a light frosted backing so it stays legible over the glass header. */
html:not([data-theme="light"]) .brand-logo {
  padding: 5px 10px;
  background: rgba(255,255,255,0.86);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.main-nav { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; justify-content: center; }
.main-nav > a, .nav-link, .nav-item-head .nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: 15px; font-weight: 500; transition: color .2s, background .2s;
  white-space: nowrap;
}
.main-nav > a:hover, .nav-link:hover, .nav-item.open > .nav-item-head > .nav-link,
.main-nav > a.active, .nav-link.active { color: var(--text); background: var(--glass); }

.nav-item { position: relative; }
.nav-item-head { display: flex; align-items: center; }
.nav-caret {
  background: none; border: 0; color: var(--text-3); padding: 6px; margin-left: -4px; cursor: pointer;
  display: inline-flex; align-items: center;
}
.nav-caret .caret { font-size: 10px; transition: transform .2s; }
.nav-item.open > .nav-item-head > .nav-caret .caret { transform: rotate(180deg); }

/* MEGA DROPDOWN — frosted glass panel */
.nav-dropdown {
  list-style: none; padding: var(--s3); margin: 0;
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 220px; width: max-content; max-width: min(720px, calc(100vw - 48px)); display: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); z-index: 60;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.nav-item.open > .nav-dropdown { display: block; transform: translateX(-50%) translateY(0); }

/* MEGA DROPDOWN — the catalogue drawer.
   The panel used to float under a single menu item, so four second-level
   columns had to share 920px — far too narrow for the long BESS spec names
   ("125kW/261kWh BESS", "Microgrid System Customization") and much less
   composed than the three-column menus, where every column got ~307px.
   It is now anchored to the page grid instead of to the menu item: it opens
   flush with the header's bottom edge and spans the site container, so a
   four-column catalogue gets exactly the column width a three-column one
   used to get. The panel therefore no longer needs the --mega-shift
   correction — a grid-aligned drawer cannot run off the side of the
   screen. --mega-cols (written by the template) sets how many second-level
   columns there are, so a narrower menu gets a narrower drawer. */
.nav-dropdown.mega { display: none; max-width: none; min-width: 0; }

@media (min-width: 1081px) {
  /* The menu item stops being the positioning context, so the drawer can
     resolve its own geometry against the header container. */
  .nav-item.has-dropdown { position: static; }
  .nav-item.open > .nav-dropdown.mega,
  .nav-item.has-dropdown:hover > .nav-dropdown.mega {
    position: absolute; top: 100%; left: 0; right: auto;
    display: flex; flex-wrap: wrap; align-items: stretch;
    width: min(calc(var(--mega-cols, 4) * 308px + 96px), 100%);
    padding: 30px 40px 30px;
    transform: none;
    border-top: 1px solid var(--glass-bd); border-radius: 0 0 var(--r-lg) var(--r-lg);
    /* A catalogue panel is read, not glanced: the glass stays, but it is
       dense enough that the hero artwork behind cannot compete with the
       category names. */
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    animation: mega-in .28s var(--ease) both;
  }
  /* Invisible bridge: the pointer has to travel from the menu item down to
     the drawer, and that gap must not break the hover. */
  .nav-dropdown.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
}
@keyframes mega-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

.mega-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 0 26px;
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { padding-right: 0; }
.mega-col + .mega-col { border-left: 1px solid var(--glass-bd); }

.mega-head {
  display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 700; color: var(--text);
  line-height: 1.35; letter-spacing: .2px; padding: 0 0 14px; margin: 0;
  border-bottom: 1px solid var(--glass-bd); border-radius: 0; white-space: normal;
  /* Two lines are reserved so the hairline under every column head lands on
     one baseline, whatever the length of the translated name. */
  min-height: 56px;
}
.mega-head::before { content: ""; width: 3px; height: 18px; margin-top: 3px; background: var(--accent); border-radius: 2px; flex: none; }
.mega-head:hover { color: var(--accent-2); background: transparent; }
/* The name may wrap onto a second line — but it can never spill out of its
   own column. The flex item must be allowed to shrink below its longest word. */
.mega-head-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; text-wrap: balance; }

.mega-desc {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 39px;   /* two lines reserved → every column's list starts level */
}
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-list a {
  display: block; padding: 8px 12px; margin: 0 -12px; font-size: 14.5px; line-height: 1.5; color: var(--text-2);
  border-radius: var(--r-sm); transition: color .2s, background .2s, transform .2s;
}
.mega-list a:hover { color: var(--accent-2); background: var(--glass); transform: translateX(3px); }
.mega-leaf { color: var(--accent) !important; font-weight: 600; }
/* Full-width drawer footer: a single "all products" anchor that lands the
   columns and gives the panel a finished edge. width:100% (not flex-basis)
   so it also behaves in the stacked mobile layout. */
.mega-foot { flex: none; width: 100%; display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--glass-bd); }
.mega-foot a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--accent-2); }
.mega-foot a .arrow { transition: transform .2s var(--ease); }
.mega-foot a:hover .arrow { transform: translateX(4px); }
.nav-dropdown-all { display: block; margin-top: 8px; padding: 10px; text-align: center; border: 1px solid var(--glass-bd); border-radius: var(--r-sm); color: var(--accent-2) !important; font-weight: 600; }

@media (min-width: 1081px) {
  /* The menu item stops being the positioning context, so the drawer can
     resolve its own geometry against the header container and sit on the
     page grid instead of under one small menu label. */
  .nav-item.has-dropdown { position: static; }
  .nav-item.open > .nav-dropdown.mega,
  .nav-item.has-dropdown:hover > .nav-dropdown.mega {
    position: absolute; top: 100%; left: 0; right: auto;
    display: flex; flex-wrap: wrap; align-items: stretch;
    /* One column width per second-level column, capped by the container:
       four columns get the same breathing room three columns used to have. */
    width: min(calc(var(--mega-cols, 4) * 308px + 96px), 100%);
    padding: 30px 40px 30px;
    transform: none;
    border-top: 1px solid var(--glass-bd); border-radius: 0 0 var(--r-lg) var(--r-lg);
    /* A catalogue panel is read, not glanced: the glass stays, but it is
       dense enough that the hero artwork behind cannot compete with the
       category names. */
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    animation: mega-in .28s var(--ease) both;
  }
  /* Invisible bridge: the pointer travels from the menu label down to the
     drawer, and that gap must not break the hover. It is as wide as the
     menu label only, so it never blocks the rest of the header. */
  .nav-item.has-dropdown > .nav-item-head::after {
    content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 26px;
  }
  .nav-item.has-dropdown > .nav-item-head { position: relative; }
}
@keyframes mega-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
/* Tablet (861–1080px): seven top-level entries plus brand and actions no
   longer fit on one line, so the navigation collapses into the drawer and the
   mega panel stacks vertically inside it — the same treatment as a phone. */
@media (max-width: 1080px) and (min-width: 861px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s2);
    background: var(--header-bg-scrolled); border-bottom: 1px solid var(--line);
    max-height: min(70vh, 560px); overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .nav-link { justify-content: flex-start; }
  .nav-item { width: 100%; }
  .nav-item-head { width: 100%; justify-content: space-between; }
  .nav-dropdown, .nav-dropdown.mega {
    position: static; transform: none; min-width: 0; width: auto; max-width: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; padding: var(--s1) var(--s2); display: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-item.open > .nav-dropdown, .nav-item.open > .nav-dropdown.mega { display: block; }
  .nav-item.open > .nav-dropdown.mega,
  .nav-item.has-dropdown:hover > .nav-dropdown.mega {
    display: block; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    width: auto; max-width: none; transform: none; padding: var(--s1) var(--s2);
  }
  .mega-col { flex: none; width: auto; gap: 0; padding: 8px 0; border-left: 0 !important; }
  .mega-col + .mega-col { border-left: 0 !important; }
  .mega-head { border-bottom: 0; padding: 8px 0; margin: 0; font-size: 14.5px; white-space: normal; }
  .mega-head::before { display: none; }
  .mega-list { gap: 0; }
  .mega-list a { padding: 6px 0 6px 14px; font-size: 14px; transform: none !important; white-space: normal; }
  .mega-list a:hover { transform: none; }
  .search-form input { width: 110px; }
  .topbar .tb-right .tb-extra { display: none; }
}

.header-actions { display: flex; align-items: center; gap: var(--s2); flex: none; white-space: nowrap; }

/* ---- Header density ladder (the menu grew to seven top-level entries) ----
   The container caps at 1240px, so every viewport from 1280px up shares the
   same width — the ladder therefore has to start below that. */
@media (max-width: 1500px) {
  .brand small { display: none; }              /* drop the tagline first */
  .nav-link, .main-nav > a, .nav-item-head .nav-link { padding: 10px 11px; font-size: 14.5px; }
}
@media (max-width: 1340px) {
  .search-form input { width: 108px; }
  .nav-link, .main-nav > a, .nav-item-head .nav-link { padding: 9px 8px; font-size: 14px; }
  .header-actions { gap: 10px; }
}
.search-form { display: flex; align-items: center; gap: 8px; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-pill); padding: 0 12px; height: 40px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.search-form .ico { color: var(--text-3); flex: none; }
.search-form input { background: none; border: 0; outline: none; color: var(--text); font-size: 14px; width: 150px; }
.search-form input::placeholder { color: var(--text-3); }

.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--glass-bd);
  color: var(--text-2); border-radius: var(--r-pill); padding: 8px 12px; font-size: 13px; font-weight: 600; backdrop-filter: blur(10px);
}
.lang-btn:hover { color: var(--text); border-color: var(--accent-line); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; display: none;
  background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--glass-bd); border-radius: var(--r);
  box-shadow: var(--sh-2); padding: 6px; z-index: 60; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.lang-switch.open .lang-menu { display: block; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; }
.lang-menu a:hover, .lang-menu a.active { background: var(--glass); color: var(--accent-2); }
.lang-menu a.active .lang-name { color: var(--accent-2); font-weight: 600; }

/* Country flag — inline SVG, fixed 3:2 box so every flag lines up. */
.flag {
  display: inline-flex; flex: none; width: 20px; height: 13px; overflow: hidden;
  border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
}
.flag svg { display: block; width: 100%; height: 100%; }

.cart-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; font-weight: 600; position: relative; }
.cart-link:hover { color: var(--accent-2); }
.cart-badge { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 7px; }
.cart-badge.pop { animation: badge-pop .42s var(--ease); }
.member-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.member-link:hover { color: var(--accent-2, var(--accent)); }
.member-link--muted { font-weight: 500; }
@keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ===== 加入询价车：玻璃提示弹窗（右下角堆叠） ===== */
#cart-toast-wrap {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.cart-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  min-width: 240px; max-width: 340px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid var(--glass-bd, rgba(255,255,255,.14));
  border-radius: var(--r-lg, 16px);
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  color: var(--text, #fff);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.cart-toast.in { opacity: 1; transform: translateY(0) scale(1); }
.cart-toast.out { opacity: 0; transform: translateY(10px) scale(.97); }
.cart-toast .ct-ico {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-2, var(--accent));
}
.cart-toast .ct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-toast .ct-msg { font-size: 14px; font-weight: 600; line-height: 1.35; }
.cart-toast .ct-view {
  font-size: 13px; font-weight: 600; color: var(--accent-2, var(--accent));
  text-decoration: none;
}
.cart-toast .ct-view:hover { text-decoration: underline; }
.cart-toast .ct-x {
  flex: none; margin-left: 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-2, #9aa3b2); font-size: 20px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.cart-toast .ct-x:hover { color: var(--text, #fff); background: rgba(255,255,255,.08); }
@media (max-width: 520px) {
  #cart-toast-wrap { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .cart-toast { max-width: none; }
}

.nav-toggle {
  display: none; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  width: 44px; height: 44px; color: var(--text); align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.nav-cta { display: flex; align-items: center; gap: var(--s2); }

/* ===================== HERO ===================== */
.hero { position: relative; padding-block: clamp(48px, 8vw, 104px) var(--s6); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s6); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 700; letter-spacing: -.03em; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { color: var(--text-2); font-size: 1.16rem; max-width: 50ch; margin-top: var(--s3); }
.hero-actions { display: flex; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.hero-stat span { font-size: 13px; color: var(--text-3); letter-spacing: .03em; }

.hero-content { max-width: 60ch; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 7px 13px; border-radius: var(--r-pill); margin-bottom: var(--s3);
}
.hero-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* Hero visual — frosted glass frame over a real image, with a caption HUD */
.hero-visual {
  position: relative; aspect-ratio: 1/1.02; border-radius: var(--r-lg);
  border: 1px solid var(--glass-bd); box-shadow: var(--sh-2); overflow: hidden; display: grid; place-items: center;
  background: var(--bg-2);
}
/* Deep-space nebula render — reads as real imagery without binary assets */
.hero-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 40% at 26% 24%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(48% 44% at 78% 72%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 72%),
    radial-gradient(70% 70% at 58% 42%, color-mix(in srgb, var(--bg-3) 90%, #000) 0%, transparent 100%);
  filter: saturate(118%);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--eur); }
.hero-visual:hover img { transform: scale(1.05); }
.hero-visual .grid-lines {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(120% 120% at 50% 30%, #000, transparent 75%);
}
.hero-visual .orb {
  position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));
  filter: blur(2px); opacity: .35; animation: spin 26s linear infinite; box-shadow: 0 0 80px var(--accent-line); pointer-events: none;
}
.hero-visual .ring { position: absolute; border: 1px solid var(--accent-line); border-radius: 50%; pointer-events: none; }
.hero-visual .ring.r1 { inset: 14%; } .hero-visual .ring.r2 { inset: 26%; border-style: dashed; }
.hero-visual .tag {
  position: absolute; font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--glass-bd);
  padding: 7px 12px; border-radius: var(--r-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2;
}
.hero-visual .tag.t1 { top: 14%; left: 8%; } .hero-visual .tag.t2 { bottom: 16%; right: 6%; }
.hero-visual .tag b { color: var(--accent-2); }
/* Glass caption HUD */
.hero-glass-cap {
  text-align: center;
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  padding: 14px 16px; border-radius: var(--r); color: var(--text);
  background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.hero-glass-cap b { color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Fullscreen homepage ad hero (admin → 站点设置 → 首页广告位) =====
   The opening screen IS the ad artwork, edge to edge. Every slide paints the
   SAME file twice: a blurred copy beneath fills the frame while the sharp
   copy loads (and stays a graceful backdrop if a file is ever missing), and
   the sharp copy on top covers the frame (object-fit: cover) so the artwork
   is fullscreen at any viewport — the user's explicit preference over
   letterboxed `contain`. Copy sits in the site gutter (same left edge as the
   header logo) and is revealed with a short stagger. */
.hero--ads {
  /* Fill the opening screen exactly: viewport minus the promo strip and the
     sticky header (both heights are published as --tb-h / --hd-h by main.js).
     When the strip auto-collapses the hero grows by the freed space, so the
     first screen stays edge-to-edge in both states. */
  height: calc(100vh - var(--tb-h, 42px) - var(--hd-h, 77px));
  height: calc(100dvh - var(--tb-h, 42px) - var(--hd-h, 77px));
  min-height: 460px;
  padding-block: 0;
  background: var(--bg-1);
  transition: height .45s var(--ease);
}
body.tb-collapsed .hero--ads {
  height: calc(100vh - var(--hd-h, 77px));
  height: calc(100dvh - var(--hd-h, 77px));
}

/* Regular hero copy that follows the fullscreen banner. It keeps the original
   hero typography / CTAs / stats / art — it is stacked BELOW the ad, never
   removed — with a slightly tighter top gap so it reads as part of the same
   opening block. */
.hero--copy { padding-block: clamp(40px, 5.5vw, 76px) var(--s6); }

.hero-ads { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background: #05070a; }
.hero-ads-stage { position: absolute; inset: 0; }

/* One slide. Only .is-on is painted; visibility (not just opacity) keeps the
   hidden slides out of hit-testing and out of the a11y tree. */
.hero-ad {
  position: absolute; inset: 0; display: block; color: inherit; text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity .85s cubic-bezier(.33, 0, .2, 1), visibility 0s linear .85s;
}
.hero-ad.is-on { opacity: 1; visibility: visible; transition: opacity .85s cubic-bezier(.33, 0, .2, 1), visibility 0s; }

/* Ambient backdrop — the same artwork blown up and blurred, so a wide frame
   never shows flat bars beside a narrower photo. Same URL as .hero-ad-shot,
   so it costs no extra download. */
.hero-ad-blur {
  position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; z-index: 0;
  object-fit: cover; object-position: center;
  filter: blur(48px) saturate(1.12) brightness(.66);
  transform: scale(1.06);
  transition: transform 9s linear;
}
.hero-ad.is-on .hero-ad-blur { transform: scale(1.13); }

/* The artwork fills the frame edge to edge (user preference: 全屏, not
   letterboxed). The blurred layer beneath only shows while the image loads. */
.hero-ad-shot {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transform: scale(1.012);
  transition: transform 1.3s cubic-bezier(.33, 0, .2, 1);
}
.hero-ad.is-on .hero-ad-shot { transform: scale(1); }

/* Legibility veil — much lighter than a blanket scrim, shaped so the copy side
   is readable while the artwork keeps its colour. */
.hero-ad-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(4,6,10,.80) 0%, rgba(4,6,10,.56) 24%, rgba(4,6,10,.16) 46%, rgba(4,6,10,0) 64%),
    linear-gradient(0deg, rgba(4,6,10,.58) 0%, rgba(4,6,10,.12) 18%, rgba(4,6,10,0) 34%);
}

/* Copy block — same .container as the header logo, so the left edge lines up.
   pointer-events:none keeps the whole banner one big clickable target. */
.hero-ad-body { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; }
.hero-ad-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; max-width: min(680px, 58%); }

.hero-ad-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .28em;
  color: rgba(255,255,255,.70); text-transform: uppercase;
}
.hero-ad-kicker i { font-style: normal; }
.hero-ad-kicker i:first-child { color: #fff; font-size: 13px; letter-spacing: .18em; }
.hero-ad-slash { opacity: .4; }
.hero-ad-kicker::after {
  content: ""; width: 54px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,0));
}

.hero-ad-title {
  display: block; margin: 0; color: #fff;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em;
  font-size: clamp(1.8rem, 3.05vw, 3.3rem); line-height: 1.09;
  text-wrap: balance; text-shadow: 0 2px 28px rgba(0,0,0,.45);
}
.hero-ad-desc {
  display: block; color: rgba(255,255,255,.88);
  font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.68; max-width: 52ch;
  white-space: pre-line; text-shadow: 0 1px 16px rgba(0,0,0,.42);
}
.hero-ad-more {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease);
}
.hero-ad-more i { font-style: normal; transition: transform .35s var(--ease); }
.hero-ad:hover .hero-ad-more { background: #fff; border-color: #fff; color: #0b0d12; transform: translateY(-1px); }
.hero-ad:hover .hero-ad-more i { transform: translateX(4px); }

/* Staggered reveal. .is-live is added by main.js one frame after load so the
   opening copy animates in instead of popping. */
.hero-ad-copy > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.hero-ads.is-live .hero-ad.is-on .hero-ad-copy > * { opacity: 1; transform: none; }
.hero-ads.is-live .hero-ad.is-on .hero-ad-copy > *:nth-child(1) { transition-delay: .10s; }
.hero-ads.is-live .hero-ad.is-on .hero-ad-copy > *:nth-child(2) { transition-delay: .18s; }
.hero-ads.is-live .hero-ad.is-on .hero-ad-copy > *:nth-child(3) { transition-delay: .26s; }
.hero-ads.is-live .hero-ad.is-on .hero-ad-copy > *:nth-child(4) { transition-delay: .34s; }

/* Controls: side arrows + bottom progress pills, all above the slide links. */
.hero-ads-bar { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-ad-nav {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto;
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  color: #fff; border-radius: 50%; padding: 0;
  background: rgba(8,10,14,.42); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s, background .25s, border-color .25s;
}
.hero-ads:hover .hero-ad-nav, .hero-ads:focus-within .hero-ad-nav { opacity: 1; }
.hero-ad-nav:hover { background: rgba(8,10,14,.78); border-color: rgba(255,255,255,.5); }
.hero-ad-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.hero-ad-nav--prev { left: clamp(12px, 2.2vw, 38px); }
.hero-ad-nav--next { right: clamp(12px, 2.2vw, 38px); }

.hero-ads-dots {
  position: absolute; left: 50%; bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%); display: flex; align-items: center; gap: 9px; pointer-events: auto;
}
.hero-ad-dot {
  position: relative; width: 30px; height: 4px; padding: 0; cursor: pointer;
  border: 0; border-radius: var(--r-pill); overflow: hidden;
  background: rgba(255,255,255,.30);
  transition: width .45s var(--ease), background .3s;
}
.hero-ad-dot:hover { background: rgba(255,255,255,.52); }
.hero-ad-dot.is-on { width: 66px; background: rgba(255,255,255,.30); }
.hero-ad-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* The active pill doubles as the timer: its fill walks the slide interval. */
.hero-ad-dot-fill {
  position: absolute; inset: 0; border-radius: inherit; background: #fff;
  transform: scaleX(0); transform-origin: left center;
}
.hero-ad-dot.is-on .hero-ad-dot-fill { animation: heroAdFill var(--ad-dur, 7000ms) linear forwards; }
.hero-ad-dot.is-frozen .hero-ad-dot-fill { animation-play-state: paused; }
@keyframes heroAdFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: none) {
  .hero-ad-nav { opacity: 1; }
}

@media (max-width: 1024px) {
  .hero-ad-copy { max-width: min(640px, 78%); }
  .hero-ad-nav { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .hero-ad-copy { max-width: min(100%, 20rem); gap: 12px; }
  .hero-ad-title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .hero-ad-desc { font-size: .95rem; line-height: 1.6; }
  .hero-ad-nav { display: none; }
  .hero-ad-dot { width: 22px; }
  .hero-ad-dot.is-on { width: 42px; }
  /* On phones the artwork covers the whole frame, so the copy can land on top
     of the product photo. Turn the side scrim into a vertical ramp and keep
     the headline on a dark field, so it stays legible over any artwork. */
  .hero-ad-veil {
    background: linear-gradient(180deg, rgba(4,6,10,.26) 0%, rgba(4,6,10,.58) 36%, rgba(4,6,10,.88) 70%, rgba(4,6,10,.93) 100%);
  }
  .hero-ad-shot { object-position: 68% center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ad, .hero-ad-blur, .hero-ad-shot, .hero-ad-copy > *, .hero-ad-more, .hero-ad-more i, .hero-ad-dot { transition: none; }
  .hero-ad-blur { transform: none; }
  .hero-ad-shot { transform: none; }
  .hero-ad-copy > * { opacity: 1; transform: none; }
  .hero-ad-dot.is-on .hero-ad-dot-fill { animation: none; transform: scaleX(1); }
}
/* ===================== HERO MICROGRID DIAGRAM ===================== */
.microgrid-wrap {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 10px 16px 62px;
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}
.microgrid-wrap svg {
  width: 100%; height: 100%;
  max-width: 460px; max-height: 100%;
  overflow: visible;
}
.mg-back-glow { transition: opacity .6s var(--ease); }

/* 节点玻璃底座 */
.mg-node-bg {
  fill: color-mix(in srgb, var(--bg) 55%, transparent);
  stroke: var(--glass-bd);
  stroke-width: 1.2;
  backdrop-filter: blur(8px);
}
.mg-node-bg[rx] { /* PCS rect */
  fill: color-mix(in srgb, var(--bg-2) 62%, transparent);
}
.mg-node {
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
.mg-node text { text-anchor: middle; font-family: var(--font-body); }
.mg-node .mg-icon { color: var(--text-2); }
.mg-node .mg-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  fill: var(--text-2); text-transform: uppercase;
}
.mg-node .mg-watt {
  font-size: 11px; font-family: var(--font-mono); fill: var(--accent);
}
.mg-pcs .mg-label { font-size: 12px; fill: var(--text); }
.mg-pcs .mg-mode {
  font-size: 18px; font-weight: 700; fill: var(--accent);
}
.mg-pcs .mg-state {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; fill: var(--ok);
}
.mg-pcs .mg-watt { fill: var(--text); font-size: 12px; }

/* 运行模式显隐（无 JS 时默认 .s0 市电接入状态） */
.microgrid-wrap.s0 .mg-f-pv,
.microgrid-wrap.s0 .mg-f-grid,
.microgrid-wrap.s0 .mg-f-bat-charge,
.microgrid-wrap.s0 .mg-f-load { opacity: .92; }

.microgrid-wrap.s1 .mg-f-pv,
.microgrid-wrap.s1 .mg-f-bat-discharge,
.microgrid-wrap.s1 .mg-f-load { opacity: .92; }

.microgrid-wrap.s2 .mg-f-bat-discharge,
.microgrid-wrap.s2 .mg-f-load { opacity: .92; }

.microgrid-wrap.s3 .mg-f-dg,
.microgrid-wrap.s3 .mg-f-bat-charge,
.microgrid-wrap.s3 .mg-f-load { opacity: .92; }

/* 节点高亮（当前供电源） */
.microgrid-wrap.s0 .mg-grid,
.microgrid-wrap.s3 .mg-dg,
.microgrid-wrap.s0 .mg-ats,
.microgrid-wrap.s3 .mg-ats { color: var(--accent); }
.microgrid-wrap.s0 .mg-grid .mg-node-bg,
.microgrid-wrap.s3 .mg-dg .mg-node-bg,
.microgrid-wrap.s0 .mg-ats .mg-node-bg,
.microgrid-wrap.s3 .mg-ats .mg-node-bg {
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* 离网 / 灰显逻辑 */
.microgrid-wrap.s1 .mg-grid,
.microgrid-wrap.s2 .mg-grid,
.microgrid-wrap.s3 .mg-grid,
.microgrid-wrap.s0 .mg-dg,
.microgrid-wrap.s1 .mg-dg,
.microgrid-wrap.s2 .mg-dg,
.microgrid-wrap.s1 .mg-ats,
.microgrid-wrap.s2 .mg-ats { opacity: .35; filter: grayscale(1); }

.microgrid-wrap.s2 .mg-pv,
.microgrid-wrap.s3 .mg-pv { opacity: .35; filter: grayscale(1); }

/* 电流路径 */
.mg-flow {
  fill: none; stroke: var(--accent); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 6 9;
  opacity: 0;
  animation: mgFlow var(--flow-dur, 1s) linear infinite;
  transition: opacity .5s var(--ease);
}
@keyframes mgFlow { to { stroke-dashoffset: -30; } }

/* 状态条 */
.mg-status-bg {
  fill: color-mix(in srgb, var(--bg) 60%, transparent);
  stroke: var(--glass-bd); stroke-width: 1;
}
.mg-status-text .mg-status-lead { fill: var(--ok); transition: fill .4s var(--ease); }
.microgrid-wrap.s1 .mg-status-text .mg-status-lead,
.microgrid-wrap.s2 .mg-status-text .mg-status-lead,
.microgrid-wrap.s3 .mg-status-text .mg-status-lead { fill: var(--accent-2); }
.mg-status-text {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  fill: var(--text-2);
}
.mg-cap-text {
  font-size: 10px; font-family: var(--font-mono); letter-spacing: .08em;
  fill: var(--text-3);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .mg-flow { animation: none; }
}

/* ===================== STATS BAND ===================== */
.stats { border-block: 1px solid var(--line); background: var(--bg-1); transition: background var(--dur) var(--ease); }
.stats .container { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { padding: var(--s4) var(--s3); border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: none; }
.stat .n { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; color: var(--text); }
.stat .n span { color: var(--accent); }
.stat .l { font-size: 13px; color: var(--text-3); margin-top: 6px; letter-spacing: .02em; }

/* ===================== CATEGORY GRID ===================== */
.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.cat-tile, .cat-card {
  position: relative; padding: var(--s4); border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-bd); overflow: hidden; min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.cat-tile:hover, .cat-card:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--sh-2); }
.cat-tile img, .cat-card > img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r); margin-bottom: var(--s2); border: 1px solid var(--glass-bd); }
.cat-tile h3, .cat-card h3 { font-size: 1.22rem; margin-top: var(--s2); }
.cat-tile p, .cat-card p { color: var(--text-3); font-size: 14px; margin-top: 6px; }
.cat-tile .arrow, .cat-card .arrow { position: absolute; top: var(--s4); right: var(--s4); color: var(--text-3); transition: transform .3s, color .3s; }
.cat-tile:hover .arrow, .cat-card:hover .arrow { color: var(--accent); transform: translate(3px, -3px); }

/* ===================== PRODUCT CARD ===================== */
.card, .product-card {
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.card:hover, .product-card:hover { transform: translateY(-6px); border-color: var(--accent-line); box-shadow: var(--sh-2); }
.card-media {
  aspect-ratio: 4/3; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  display: grid; place-items: center; border-bottom: 1px solid var(--glass-bd);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .ph {
  width: 64%; aspect-ratio: 1.3/1; border-radius: var(--r); position: relative;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px);
  border: 1px dashed var(--glass-bd); display: grid; place-items: center; color: var(--text-3);
  font-family: var(--font-mono); font-size: 12px; text-align: center; padding: 10px;
}
.card-media .badge {
  position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 11px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--glass-bd); color: var(--text-2);
  padding: 4px 9px; border-radius: var(--r-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card-media .sku { position: absolute; bottom: 12px; left: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.card-body { padding: var(--s3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-title { font-size: 1.12rem; }
.card-title a:hover { color: var(--accent-2); }
.card-meta { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.card-meta a { color: var(--accent); }
.product-card .card-media { aspect-ratio: 1/1; }
.card-slider { position: absolute; inset: 0; display: block; }
.card-slider > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.card-slider > img.active { opacity: 1; }
.card-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; pointer-events: none; }
.card-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 3px rgba(0,0,0,.3); transition: background .3s; }
.card-dots i.on { background: #fff; }
.card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--accent); }
.card-price small { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-weight: 400; }
.card-desc { color: var(--text-3); font-size: 13.5px; line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin-top: auto; }

/* ===================== FEATURES / VALUE ===================== */
.features, .value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.feature, .value {
  padding: var(--s4); border-radius: var(--r-lg); background: var(--glass);
  border: 1px solid var(--glass-bd); display: flex; gap: var(--s3); align-items: flex-start;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .3s, transform .4s var(--ease);
}
.feature:hover, .value:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.feature-ico, .value .vn {
  width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--accent-soft);
  border: 1px solid var(--accent-line); display: grid; place-items: center; color: var(--accent);
}
.feature h3, .value h3 { font-size: 1.15rem; }
.feature p, .value p { color: var(--text-3); font-size: 14.5px; margin-top: 6px; }

/* ===================== CTA BAND ===================== */
.cta-band {
  border-radius: var(--r-lg); padding: clamp(36px, 6vw, 68px);
  background:
    radial-gradient(100% 160% at 0% 0%, var(--grain-1), transparent 55%),
    color-mix(in srgb, var(--bg-1) 70%, transparent);
  border: 1px solid var(--accent-line);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 20ch; }
.cta-band p { color: var(--text-2); margin-top: 10px; }

/* ===================== FAQ ===================== */
.faq-item { border: 1px solid var(--glass-bd); border-radius: var(--r); background: var(--glass); margin-bottom: var(--s2); overflow: hidden; transition: border-color .3s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.faq-item.open, details.faq-item[open] { border-color: var(--accent-line); }
.faq-item summary, .faq-q {
  width: 100%; text-align: left; background: none; border: none; color: var(--text);
  padding: var(--s3); font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q .pm, .faq-item summary::after {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--glass-bd);
  display: grid; place-items: center; color: var(--accent); transition: transform .3s; content: "+"; font-size: 16px;
}
.faq-item.open .faq-q .pm, .faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 var(--s3) var(--s3); }
.faq-a p { color: var(--text-2); }

/* ===================== FOOTER ===================== */
.site-footer { border-top: 1px solid var(--glass-bd); background: var(--footer-bg); margin-top: var(--s6); transition: background var(--dur) var(--ease);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-footer .container { padding-block: var(--s6) var(--s4); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s4); }
.site-footer h4, .footer-about h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s2); }
:lang(zh) .site-footer h4, :lang(zh) .footer-about h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; font-size: 13px; text-transform: none; color: var(--text-2); }
.site-footer a { color: var(--text-2); display: block; padding: 5px 0; font-size: 14.5px; transition: color .2s; }
.site-footer a:hover { color: var(--accent-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 5px 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); text-wrap: balance; font-variant-numeric: tabular-nums; }
.site-footer li a { display: inline; padding: 0; }
.u-nowrap { white-space: nowrap; }
/* 联系方式栏：微信技术支持二维码（紧凑, 与页脚协调） */
.footer-qr { display: flex; align-items: center; gap: 10px; margin: var(--s2) 0 0; }
.footer-qr img { width: 84px; height: 84px; padding: 5px; background: #fff; border-radius: 8px; border: 1px solid var(--glass-bd); box-shadow: var(--sh-1); flex: none; }
.footer-qr-note { font-size: 12px; line-height: 1.6; color: var(--text-3); }
.footer-about p { color: var(--text-3); font-size: 14px; max-width: 36ch; margin-top: var(--s2); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding-top: var(--s3); margin-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 13px; flex-wrap: wrap;
}
.footer-bottom a:hover { color: var(--accent-2); }
.footer-bottom .footer-links { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ===================== MINI CARD ===================== */
.mini-card {
  display: block; border: 1px solid var(--glass-bd); border-radius: var(--r);
  overflow: hidden; background: var(--glass); text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.mini-card .mini-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); }
.mini-card .mini-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card .mini-name {
  padding: 12px 14px; font-weight: 600; font-size: 14.5px; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini-card:hover .mini-name { color: var(--accent); }

/* ===================== SOLUTION CARD (related scenarios on product page) ===================== */
/* Solution post covers are 1200x630 card art with embedded titles; render them as the whole card
   instead of cropping them inside a generic mini-card frame and duplicating the title below. */
.solution-card {
  display: block; border-radius: var(--r); overflow: hidden;
  background: var(--bg-3); text-decoration: none; border: 1px solid var(--glass-bd);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--accent-line); }
.solution-card .solution-media { display: block; aspect-ratio: 1200 / 630; overflow: hidden; }
.solution-card .solution-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================== PAGE HERO (inner pages) ===================== */
#main > .container > h1,
#main > .container > .section-head h1,
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: var(--s2); }
.page-hero { padding-block: clamp(40px, 6vw, 72px) var(--s4); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-1), var(--bg)); }

/* ===================== PRODUCT DETAIL ===================== */
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s6); align-items: start; }
.product-gallery {
  position: relative; display: grid; place-items: center; width: 800px; height: 800px; max-width: 100%; overflow: hidden;
  border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-bd); box-shadow: var(--sh-1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.product-gallery > .gallery-slide { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.product-gallery > .gallery-slide.active { opacity: 1; }
.gallery-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg-1) 82%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; }
.gallery-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); box-shadow: 0 0 3px rgba(0,0,0,.2); transition: background .3s; }
.gallery-dots i.on { background: var(--accent); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: var(--s2); }
.thumbs button, .thumbs .t { aspect-ratio: 1; border: 1px solid var(--glass-bd); border-radius: var(--r-sm); background: var(--bg-2); overflow: hidden; padding: 0; }
.thumbs img, .thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .active { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }

.answer-box { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r); }
.answer-box h2 { font-size: 1.05rem; color: var(--accent-2); margin-bottom: 6px; }
.answer-box p { color: var(--text); }

.content-block { margin-top: var(--s4); }
.content-block h2 { font-size: 1.4rem; margin-bottom: var(--s2); }
.content { color: var(--text-2); line-height: 1.7; }
.content h2, .content h3 { color: var(--text); margin: var(--s3) 0 var(--s1); }
.content ul, .content ol { color: var(--text-2); padding-left: 1.2em; }
.content li { margin-bottom: 8px; }
.bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bullets li { padding-left: 26px; position: relative; color: var(--text-2); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ===================== SOLUTIONS PAGE ===================== */
.sol-equip { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-top: var(--s1); }
.sol-grid { margin-top: var(--s3); }
.sol-card { overflow: hidden; }
.sol-card .sol-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.sol-card .sol-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
a.sol-card:hover .sol-cover img { transform: scale(1.04); }
.sol-card .card-body { padding: var(--s3) var(--s4); }
.sol-card .card-title { font-size: 1.12rem; }
a.sol-card { display:block; text-decoration:none; color:inherit; transition: transform .15s ease, box-shadow .15s ease; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
a.sol-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
a.sol-card .card-title { color: var(--text); }
a.sol-card:hover .card-title { color: var(--accent); }
.sol-close { margin-top: var(--s5); padding: var(--s4); border-left: 3px solid var(--accent); background: var(--glass); border-radius: var(--r); color: var(--text-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sol-more { margin-top: var(--s2); }
.sol-more a { font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.sol-more a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.sol-process { margin-top: var(--s2); }
.sol-process li { font-size: 15px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.spec-table th { color: var(--text-2); font-weight: 500; font-size: 14px; width: 38%; }
.spec-table td { color: var(--text); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

.product-buy { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: var(--s4); position: sticky; top: 96px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.price-block { padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.product-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--s4); max-width: 28ch; }
.price-main { font-family: var(--font-display); font-weight: 700; font-size: 2rem; }
.price-note { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.kv { display: grid; grid-template-columns: 96px 1fr; margin-top: var(--s3); border-top: 1px solid var(--line-soft); }
.kv dt, .kv dd { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; }
.kv dt { font-size: 13px; color: var(--text-2); padding-right: 12px; }
.kv dd { color: var(--text); font-weight: 600; font-size: 14px; }

.product-buy form { margin-top: var(--s3); }

/* Two-button row: Get a Quote + Add to Inquiry Cart */
.buy-actions { display: flex; gap: 10px; }
.buy-actions > * { flex: 1 1 0; min-width: 0; }
.buy-actions .btn { width: 100%; justify-content: center; }
.buy-actions .buy-add { margin-top: 0; }
.qty-row { display: flex; gap: 10px; align-items: stretch; }
.qty-input { display: flex; align-items: center; border: 1px solid var(--glass-bd); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
.qty-input button { width: 40px; background: var(--bg-2); border: 0; color: var(--text); font-size: 18px; }
.qty-input input { width: 56px; text-align: center; border: 0; background: var(--bg); color: var(--text); font-size: 15px; padding: 10px 0; }
.qty-input button:hover { background: var(--bg-3); }

.contact-box { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--glass-bd); border-radius: var(--r); background: var(--glass); }
.contact-box b { color: var(--text); display: block; margin-bottom: 4px; }
.contact-box .small { color: var(--text-3); }
.contact-box.tech-support { text-align: center; }
.contact-box.tech-support b { margin-bottom: var(--s2); }
.contact-box .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.contact-box .qr-wechat { width: 140px; height: 140px; border-radius: var(--r); border: 1px solid var(--glass-bd); background: #fff; padding: 6px; object-fit: contain; }
.contact-box .qr-note { font-size: 12px; color: var(--text-2); line-height: 1.5; }

/* ===================== CONTACT / SOCIAL CARD ===================== */
/* Reused on the product right column and in the footer. Every row is
   rendered conditionally by the template, so an empty backend field never
   leaves a blank line. */
.contact-card { margin-top: var(--s3); }
.contact-card--bare { margin-top: 0; }
.cc-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 14px; letter-spacing: .2px; }
.cc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-item {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 10px; margin: 0 -10px; border-radius: var(--r-sm);
  transition: background .2s, transform .2s;
}
.cc-item:hover, .cc-item:focus-within { background: var(--glass); }
.cc-ico {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.cc-link { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text-2); text-decoration: none; }
.cc-link:hover { color: var(--text); }
.cc-label { font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); }
.cc-val { font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word; }
a.cc-link .cc-val { font-weight: 600; }

/* WeChat: keep the row rhythm of the other contact lines — icon + label +
   value, with a compact QR chip tucked under the text (left aligned to it)
   instead of a full-width panel. */
.cc-wx { align-items: flex-start; }
/* Match the weight of the clickable rows (phone / email) above and below. */
.cc-wx .cc-val { font-weight: 600; }
.cc-wx-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cc-wx-qr {
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: 100%;
}
.cc-wx-qr img {
  width: 84px; height: 84px; object-fit: contain; display: block;
}
.cc-wx-cap { font-size: 12px; line-height: 1.35; color: var(--text-2); max-width: 92px; }

.cc-social { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--glass-bd); }
.cc-social-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-bottom: 10px; }
.social-row { display: flex; flex-wrap: wrap; gap: 8px; }
.social-ico {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  color: #fff; background: color-mix(in srgb, var(--text) 16%, transparent);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.social-ico:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.social-facebook { background: #1877F2; }
.social-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.social-youtube { background: #FF0000; }
.social-twitter { background: #000; }
.social-linkedin { background: #0A66C2; }
.social-tiktok { background: #000; }
.social-wechat-channels { background: #07C160; }
.social-douyin { background: #000; }

/* Footer keeps its own heading; the bare card just fills the column. */
.footer-cta { margin: 12px 0 0; }
.footer-cta a { font-weight: 600; color: var(--accent-2); }

/* ===================== CONTACT FORM ===================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6); align-items: start; }
.form-card { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: var(--s4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 13.5px; color: var(--text-2); margin-bottom: 7px; font-weight: 500; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea, .search-form input, .qty-input input {
  width: 100%; background: var(--bg); border: 1px solid var(--glass-bd); border-radius: var(--r-sm);
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
/* 头部搜索框：紧凑胶囊，不受上方 .field 通用 100% 宽/大内边距影响 */
.search-form { flex: none; }
.search-form input { width: 150px; min-width: 0; height: auto; padding: 0; font-size: 14px; border: 0; background: none; }
.search-form input:focus { box-shadow: none; border: 0; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* 联系表单验证码 */
.captcha-row { display: flex; align-items: stretch; gap: var(--s2); flex-wrap: wrap; }
.captcha-input { flex: 1 1 120px; min-width: 110px; text-align: center; letter-spacing: .12em; font-weight: 600; }
.captcha-img { width: 132px; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--glass-bd); background: var(--bg); cursor: pointer; flex: none; }
.captcha-refresh { flex: none; padding: 0 14px; font-size: 13px; }

.summary-box { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: var(--s4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.summary-box .info-list li { padding: var(--s3); background: color-mix(in srgb, var(--surface) 42%, transparent); border: 1px solid var(--glass-bd); border-radius: var(--r); border-left: 3px solid var(--accent); }
.summary-box .info-list b { display: block; font-size: 12px; color: var(--text-3); font-weight: 600; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; }
.summary-box .info-list .info-value,
.summary-box .info-list li > a { display: block; padding-left: 14px; color: var(--text); font-size: 15px; line-height: 1.5; border-left: 1px solid var(--glass-bd); }
.summary-box .info-list a:hover { color: var(--accent-2); }
.summary-box .info-list .info-tech { align-items: center; text-align: center; border-left-color: var(--accent-2); }
.summary-box .info-list .info-tech .qr-wechat { margin: var(--s2) auto var(--s1); }
.summary-box .info-list .info-tech .qr-note { padding-left: 0; border-left: 0; }
.qr-wechat { display: block; width: 140px; height: 140px; padding: 8px; background: #fff; border-radius: var(--r); border: 1px solid var(--glass-bd); box-shadow: var(--sh-1); }
.qr-note { font-size: 13px; color: var(--text-2); }

/* Membership level card on the inquiry summary box */
.member-card { margin-bottom: var(--s4); padding: var(--s3); background: color-mix(in srgb, var(--surface) 42%, transparent); border: 1px solid var(--glass-bd); border-radius: var(--r); border-left: 3px solid var(--accent); }
.member-card.guest { border-left-color: var(--text-3); }
.member-card .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-card .mc-label { font-size: 12px; font-weight: 600; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.member-card .mc-none { font-size: 13px; color: var(--text-2); }
.member-card .mc-note { margin: 9px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ===================== ALERTS ===================== */
.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14.5px; margin-bottom: var(--s3); border: 1px solid var(--line); background: var(--glass); }
.alert-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--text); }
.alert-error { background: color-mix(in srgb, #e2554f 14%, transparent); border-color: color-mix(in srgb, #e2554f 45%, var(--line)); color: var(--text); }

/* ===================== BREADCRUMB ===================== */
.breadcrumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-3); margin-bottom: var(--s3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--text-3); opacity: .6; }
.breadcrumb a:hover { color: var(--accent-2); }

/* ===================== TABLES / CART / CHECKOUT ===================== */
.table-responsive { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: 14.5px; }
.table th { color: var(--text-2); font-weight: 500; font-size: 14px; }
.cart-item-product { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.cart-item-product img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--glass-bd); background: var(--bg-2); flex: none; }
.cart-item-product .small { margin-top: 3px; }
.cart-subtotal-cell { text-align: right; }
.cart-subtotal { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--accent-2); }
.cart-empty { margin-top: var(--s3); padding: var(--s6) var(--s4); border: 1px dashed var(--glass-bd); border-radius: var(--r-lg); text-align: center; background: var(--glass); }
.cart-empty-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; }
.cart-empty .btn { margin-top: var(--s2); }
.checkout-layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--s6); align-items: start; }
.summary-line { display: flex; justify-content: space-between; gap: var(--s2); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.summary-total { display: flex; justify-content: space-between; font-weight: 700; padding-top: var(--s2); }

/* ===================== BLOG / POST ===================== */
.post-card .card-media { aspect-ratio: 16/9; }
.post-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.post-card .card-title { font-size: 1.15rem; }

/* ==================================================================
   Content sections — News / Cases / Careers  (sec-*)
   ================================================================== */
.sec-hero { padding: var(--s5) 0 var(--s3); max-width: 860px; }
.sec-hero h1 { margin: 6px 0 10px; }
.sec-hero .eyebrow {
  color: var(--accent); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: 13px; margin: 0;
}
.sec-hero .sec-intro { color: var(--text-2); margin-top: 12px; max-width: 68ch; }

.chips-sm { gap: 6px; }
.chip-sm { font-size: 12px; padding: 3px 10px; }

/* 案例封面：容器按原图 1200×630 的比例，contain 保证整图完整可见、不被裁切。 */
.case-card .card-media { aspect-ratio: 1200 / 630; }
.case-card .card-media img { object-fit: contain; }

/* case cards + fact rows */
.case-stats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.case-stats li { display: flex; flex-direction: column; }
.case-stats b { font-size: 20px; color: var(--accent-2); font-family: var(--font-display); line-height: 1.1; }
.case-stats span { font-size: 12px; color: var(--text-3); }

.case-results {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.case-results li { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px 14px; }
.case-results b { display: block; font-size: 22px; color: var(--accent-2); font-family: var(--font-display); }
.case-results span { font-size: 12px; color: var(--text-3); }

/* job list (careers) */
.job-list { display: flex; flex-direction: column; gap: 14px; }
.job-card { border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--r); padding: 18px 20px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.job-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.job-head h3 { margin: 0; font-size: 18px; }
.job-head h3 a { color: inherit; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.job-tag { font-size: 12.5px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line-soft); }
.job-tag--salary { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-line); }
.job-sum { color: var(--text-2); margin: 12px 0 0; }

/* info card (case / job detail) */
.info-card { border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--r-lg); padding: 20px 22px; margin: 0 0 var(--s3); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 22px; }
.info-row { display: flex; flex-direction: column; gap: 3px; }
.info-row span { font-size: 12.5px; color: var(--text-3); }
.info-row b { font-size: 15px; color: var(--text); }
.info-sub { font-size: 13px; margin: 18px 0 0; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.info-actions { margin-top: 18px; }

.section-post .eyebrow a { color: var(--accent); text-decoration: none; }
.section-post .eyebrow a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .job-head { flex-direction: column; align-items: flex-start; }
  .sec-hero { padding-top: var(--s4); }
}

/* ===================== CATEGORY INDEX ===================== */
.cat-index { display: grid; gap: var(--s4); }
.cat-index-group { border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: var(--s4); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cat-index-title { font-size: 1.3rem; margin-bottom: var(--s2); }
.cat-index-title a:hover { color: var(--accent-2); }
.cat-index-children { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); }
.cat-index-item { display: flex; flex-direction: column; gap: 6px; }
.cat-index-head { font-weight: 600; color: var(--text); }
.cat-index-head:hover { color: var(--accent-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--glass-bd); background: var(--glass); color: var(--text-2); font-size: 13px; transition: all .2s var(--ease); }
.chip:hover { color: var(--text); border-color: var(--accent-line); }
.chip.chip-active { background: color-mix(in srgb, var(--accent) 16%, var(--glass)); border-color: var(--accent); color: var(--text); }
.chip-n { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: var(--surface); font-size: 11px; color: var(--text-3); }

.dl-cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.dl-size { flex: none; font-size: 12px; color: var(--text-3); }

/* ===================== PRODUCT GROUP ===================== */
.product-group { margin-bottom: var(--s5); }
.subgroups { display: grid; gap: var(--s4); margin-top: var(--s3); margin-left: 0; border-left: none; padding-left: 0; }
.product-group.level-1 > .section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
.product-group.level-2 > .section-head h2 { font-size: clamp(1.18rem, 1.9vw, 1.45rem); }
.product-group.level-2 > .section-head { margin-bottom: var(--s3); }

/* ===================== PAGINATION ===================== */
.pagination { display: flex; gap: 8px; align-items: center; margin-top: var(--s4); flex-wrap: wrap; }
.pagination a, .pagination .current, .pagination .muted { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--glass-bd); color: var(--text-2); font-size: 14px; background: var(--glass); }
.pagination a:hover { border-color: var(--accent-line); color: var(--accent-2); }
.pagination .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ===================== SUCCESS ===================== */
.success-wrap { max-width: 560px; margin-inline: auto; text-align: center; background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); padding: var(--s6) var(--s4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.success-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); display: grid; place-items: center; margin: 0 auto var(--s3); font-size: 30px; }
.order-no { font-family: var(--font-mono); color: var(--accent-2); }

/* ===================== POST DETAIL: sidebar / TOC ===================== */
.post-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.post-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s2); }
.side-card { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: var(--r); padding: var(--s2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.side-title { font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.side-list a { display: block; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: .92rem; line-height: 1.45; border-left: 2px solid transparent; transition: background .2s var(--ease), color .2s var(--ease); }
.side-list a:hover { color: var(--text); background: var(--glass); }
.side-list a.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.side-posts a { display: flex; flex-direction: column; gap: 3px; border-left: none; padding: 9px 10px; }
.side-post-title { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post-date { font-size: .78rem; color: var(--text-3); }
.side-posts a:hover .side-post-title { color: var(--text); }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.toc-list a { display: block; padding: 6px 10px; border-radius: var(--r-sm); border-left: 2px solid var(--line); color: var(--text-2); text-decoration: none; font-size: .88rem; line-height: 1.4; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.toc-list a:hover { color: var(--text); }
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.toc-list .toc-l3 a { padding-left: 24px; font-size: .84rem; }
@media (max-width: 1024px) { .post-layout { grid-template-columns: 1fr; } .post-sidebar { position: static; } .toc-card { display: none; } }

/* ===================== PAGE BANNER ===================== */
.page-banner { position: relative; height: clamp(200px, 30vw, 400px); overflow: hidden; background: var(--bg-3); border-radius: var(--r-lg); border: 1px solid var(--glass-bd); }
.page-banner-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.page-banner-slide.active { opacity: 1; }
.page-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.page-banner-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s; }
.page-banner-dots button.active { background: #fff; }

/* ===================== PRODUCTS INDEX ===================== */
.prod-index .cat-index-children { grid-template-columns: 1fr; gap: var(--s3); }
.prod-index .cat-index-item { gap: 12px; }
.prod-index .prod-index-grid { margin-top: 4px; }
.prod-index-node { display: grid; gap: 10px; padding-left: 14px; border-left: 2px solid var(--line-soft); }
.prod-index-subhead { font-weight: 600; font-size: 15px; color: var(--text-2); }
.prod-index-subhead:hover { color: var(--accent-2); }

/* ============ Downloads hub & product attachments ============ */
.dl-group { margin-bottom: var(--s5); }
.dl-group-title { font-size: 1.1rem; margin: 0 0 .5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line-soft); }
.dl-group-title a { color: inherit; text-decoration: none; }
.dl-group-title a:hover { color: var(--accent-2); }
.dl-sku { margin-left: .5rem; font-size: .75rem; color: var(--text-3); font-weight: 400; }
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-item { display: flex; align-items: center; gap: .5rem; padding: .55rem .25rem; border-bottom: 1px dashed var(--line-soft); }
.dl-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
.dl-link:hover .dl-name { color: var(--accent-2); text-decoration: underline; }
.dl-icon { flex: none; }
.dl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-ext { flex: none; font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: .1rem .4rem; }

/* ===================== UTILITIES ===================== */
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--s1) !important; } .mb-2 { margin-bottom: var(--s2) !important; }
.mb-3 { margin-bottom: var(--s3) !important; } .mb-4 { margin-bottom: var(--s4) !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--s1) !important; } .mt-2 { margin-top: var(--s2) !important; }
.mt-3 { margin-top: var(--s3) !important; } .mt-4 { margin-top: var(--s4) !important; }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ===================== SITE-WIDE OVERLAYS (ambient lens + progress) ===================== */
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at var(--ax, 50%) var(--ay, 28%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(60vw 60vw at 18% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at 85% 80%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%);
  filter: blur(24px); animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(3%, 2%, 0) scale(1.08); } }
#lens { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); opacity: .55; transition: opacity .3s; }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 70; }

/* ---------- Card cursor highlight (Apple-style, pointer-fine only) ---------- */
.glow { position: relative; }
.glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.glow:hover::after { opacity: 1; }

/* ===================== SCROLL REVEAL ===================== */
/* Scoped to .js so non-JS / crawlers see fully-visible content. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--eur), transform .7s var(--eur); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .stats .container { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3) { border-right: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero-visual { max-width: 460px; }
  .product-layout, .contact-grid, .checkout-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .product-gallery, .product-buy { position: static; }
  .product-gallery { height: auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s2);
    background: var(--header-bg-scrolled); border-bottom: 1px solid var(--line);
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .nav-link { justify-content: flex-start; }
  .nav-item { width: 100%; }
  .nav-item-head { width: 100%; justify-content: space-between; }
  .nav-dropdown, .nav-dropdown.mega {
    position: static; transform: none; min-width: 0; width: auto; max-width: none; box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; padding: var(--s1) var(--s2); display: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-item.open > .nav-dropdown, .nav-item.open > .nav-dropdown.mega { display: block; }
  /* Same specificity as the desktop rule on purpose: the desktop panel uses
     translateX(-50%) to centre itself on the nav item, and that transform
     still applies to a static element — so it has to be reset here, or the
     mobile drawer would slide the panel half off-screen. */
  .nav-item.open > .nav-dropdown.mega,
  .nav-item.has-dropdown:hover > .nav-dropdown.mega {
    display: block; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    width: auto; max-width: none; transform: none;
    padding: var(--s1) var(--s2);
  }
  .mega-col { flex: none; width: auto; gap: 0; padding: 8px 0; border-left: 0 !important; }
  .mega-col + .mega-col { border-left: 0 !important; }
  .mega-head { border-bottom: 0; padding: 8px 0; margin: 0; font-size: 14.5px; white-space: normal; }
  .mega-head::before { display: none; }
  .mega-list { gap: 0; }
  .mega-list a { padding: 6px 0 6px 14px; font-size: 14px; transform: none !important; white-space: normal; }
  .mega-list a:hover { transform: none; }
  .search-form input { width: 110px; }
  .topbar .tb-right .tb-extra { display: none; }
  .features, .value-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .hero h1, .hero .lead { max-width: 100%; }
  .subgroups { margin-left: 0; padding-left: 0; border-left: none; }
  .stats .container { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  #lens { display: none; } /* cursor lens is a pointer device affordance */
}
@media (max-width: 560px) {
  .stats .container { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: var(--s3); }
  .topbar .tb-left { display: none; }
  .topbar .container, .topbar-inner { height: auto; min-height: 42px; flex-wrap: wrap; padding: 6px 0; }
  .topbar .tb-right { gap: var(--s2); flex-wrap: wrap; }
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero .lead { font-size: 1.02rem; }
  .brand small { display: none; }
  .brand { min-width: 0; }
  .search-form input { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
  .hero-visual .orb, #ambient { animation: none; }
  html { scroll-behavior: auto; }
  body { transition: none; }
  #lens { display: none; }
}

/* ===== About page hub: sticky sub-nav · sections · timeline · link cards ===== */
.about-subnav {
  position: sticky;
  top: 96px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 var(--s4);
  background: var(--header-bg-scrolled);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.about-subnav a {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.about-subnav a:hover { color: var(--text); background: var(--glass); }
.about-subnav a.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 6px 18px var(--accent-soft);
}

.about-sec {
  scroll-margin-top: 120px;
  padding: var(--s2) 0 var(--s4);
}
.about-sec + .about-sec {
  border-top: 1px solid var(--line-soft, var(--glass-bd));
}

/* vertical milestones timeline */
.timeline {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--accent-2));
  opacity: .45;
}
.tl-item {
  position: relative;
  padding: 0 0 var(--s3) 56px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-marker {
  position: absolute;
  left: 0;
  top: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px var(--accent-soft);
}
.tl-text {
  display: block;
  color: var(--text-2);
  line-height: 1.7;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-soft, var(--glass-bd));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.tl-text strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.tl-text ul {
  margin: .35rem 0 0;
  padding-left: 1.1em;
}
.tl-text li { margin-bottom: .25rem; }
@media (max-width: 640px) {
  .tl-item { padding-left: 48px; }
  .timeline::before { left: 16px; }
  .tl-marker { min-width: 34px; height: 34px; font-size: 11px; padding: 0 7px; }
  .tl-text { padding: .75rem .9rem; }
}

/* functional link cards to sub-item pages */
.link-cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--s3);
}
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s3);
  text-decoration: none;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.link-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  background: var(--glass-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}
.lc-title { font-size: 1.05rem; font-weight: 600; }
.lc-desc { font-size: .9rem; color: var(--text-3); line-height: 1.5; }
.lc-arrow {
  position: absolute;
  right: var(--s3);
  top: var(--s3);
  color: var(--accent);
  font-size: 1.1rem;
  transition: transform .25s var(--ease);
}
.link-card:hover .lc-arrow { transform: translateX(4px); }

/* ---- About page: figure / media blocks -------------------------------
   Content is authored as HTML in page_i18n, so the imagery lives in a few
   reusable wrappers rather than in the template:
     .ab-fig        figure with caption (optionally .ab-fig--right)
     .ab-split      two-column text + image, stacks on narrow screens
     .ab-facts      key figures rendered as a stat strip
     .ab-shot      full-bleed photo band with an overlaid caption
     .ab-prods     product gallery grid
   Colours come from theme variables (with color-mix against a sibling
   variable) so all four presets stay consistent. */
.ab-fig {
  margin: var(--s5) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
}

.ab-fig img {
  display: block; width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  background: color-mix(in srgb, var(--bg-3) 70%, var(--bg));
}

.ab-fig figcaption {
  padding: 12px 16px;
  font-size: 13px; line-height: 1.6;
  color: var(--text-3);
  border-top: 1px solid var(--line-soft);
}

/* Text beside a portrait/lscape image; the image keeps a 4:3 frame. */
.ab-split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: var(--s5) 0;
}

.ab-split > .ab-fig { margin: 0; }
.ab-split > .ab-fig img { height: clamp(240px, 32vw, 360px); }

/* Mirror: image first on wide screens without reordering in the DOM. */
.ab-split--rev > .ab-fig { order: -1; }

/* The text column reads as prose, not as a list item. */
.ab-split > :first-child > :last-child { margin-bottom: 0; }

/* Stat strip for the "founded / area / team" facts. */
.ab-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: var(--s5) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}

.ab-fact {
  padding: 20px 18px;
  background: var(--bg-2);
  transition: background .25s var(--ease);
}

.ab-fact:hover { background: var(--bg-3); }

.ab-fact b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ab-fact span {
  display: block; margin-top: 6px;
  font-size: 13px; color: var(--text-3);
}

/* Full-bleed photo band inside the content column. */
.ab-shot {
  position: relative;
  margin: var(--s6) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

.ab-shot img {
  display: block; width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
}

/* Legibility scrim — deeper than .hero-ad-veil so the caption reads on any
   artwork without darkening the whole photo. */
.ab-shot::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 45%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
}

.ab-shot figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 18px 20px;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
}

/* Product gallery: uniform tiles so mixed-aspect renders stay tidy. */
.ab-prods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: var(--s5) 0;
}

.ab-prods figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.ab-prods figure:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
}

.ab-prods img {
  display: block; width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 12px;
  background: #fff;
}

.ab-prods figcaption {
  padding: 9px 12px;
  font-size: 12px; line-height: 1.5;
  color: var(--text-3);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
  .ab-split { grid-template-columns: 1fr; }
  .ab-split--rev > .ab-fig { order: 0; }
}

/* ---- Editorial pages: FAQ / shipping / privacy ------------------------
   Same design language as the About blocks above, but tuned for pages whose
   body is a list of short Q&A or short sections rather than long prose:
     .qa-grid      numbered Q&A cards (FAQ)
     .qa-ask/qa-say question / answer halves
     .flow         horizontal process steps (shipping)
     .flow-step    one step, numbered badge on a connecting rail
     .term-grid    trade-term / payment tiles
     .term         one tile with a code chip
     .key-grid     key-value tiles (privacy)
     .key          one tile with a title + body
   All colours derive from theme variables so the four presets stay in sync. */

/* --- FAQ: question / answer cards ------------------------------------- */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: var(--s5) 0;
}

.qa-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.qa-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* The question carries the accent; the answer stays in body colour so the
   card still reads top-to-bottom when scanned quickly. */
.qa-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text);
}

.qa-ask::before {
  content: "Q";
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.qa-say {
  margin: 0;
  padding-left: 34px;
  font-size: .93rem;
  line-height: 1.7;
  color: var(--text-2);
}

.qa-say > :first-child { margin-top: 0; }
.qa-say > :last-child { margin-bottom: 0; }

/* --- Shipping: process rail ------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: var(--s5) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
}

.flow-step {
  position: relative;
  padding: 24px 20px 26px;
  background: var(--bg-2);
  transition: background .25s var(--ease);
}

.flow-step:hover { background: var(--bg-3); }

/* Numbered badge; the rail between steps is drawn on the parent via ::before
   so it scales with the responsive column count. */
.flow-n {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.flow-step h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
}

.flow-step p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--text-3);
}

/* --- Trade terms / payment tiles -------------------------------------- */
.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: var(--s5) 0;
}

.term {
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.term:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.term-code {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

.term b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 650;
  color: var(--text);
}

.term p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* --- Privacy: key points ---------------------------------------------- */
.key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: var(--s5) 0;
}

.key {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  transition: background .25s var(--ease);
}

.key:hover { background: var(--bg-3); }

.key h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
}

.key p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* Privacy copy is short; a lead paragraph deserves more presence than body
   text so the page does not open with an orphaned line. */
.lede {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-2);
}

@media (max-width: 720px) {
  .ab-split { grid-template-columns: 1fr; }
  .ab-split--rev > .ab-fig { order: 0; }
  .about-subnav { top: 72px; padding: 8px; gap: 6px; }
  .about-subnav a { padding: 6px 11px; font-size: 13px; }
  .about-sec { scroll-margin-top: 88px; }
  .ab-prods { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .ab-fact { padding: 16px 14px; }
  .qa-grid { grid-template-columns: 1fr; gap: 12px; }
  .qa-card { padding: 18px 18px 20px; }
  .qa-say { padding-left: 0; }
  .flow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .flow-step { padding: 18px 16px 20px; }
  .term-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .key-grid { grid-template-columns: 1fr; }
}

/* ---- Overflow guards ---------------------------------------------------
   Grid/flex children default to min-width:auto, so a long unbroken token
   (a model number, an email, "10–20 days") refuses to shrink and pushes the
   whole row wider than the viewport. Every tile below is a grid child, so
   each one needs an explicit min-width:0, plus wrapping as a second line of
   defence. Cheap and it prevents the whole site from drifting sideways on
   narrow screens. */
.qa-card, .flow-step, .term, .key, .ab-fact, .ab-fig, .ab-prods figure {
  min-width: 0;
}

.qa-ask, .qa-say, .flow-step p, .term p, .key p, .ab-fact span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Figures and grids must never exceed their column, whatever the source
   image's intrinsic width is. */
.ab-fig, .ab-shot, .qa-grid, .flow, .term-grid, .key-grid, .ab-facts, .ab-prods {
  max-width: 100%;
}
.ab-fig img, .ab-shot img, .ab-prods img {
  max-width: 100%;
}

/* ============================================================================
   SOLUTIONS HUB  /zh/blog/category/solutions
   ----------------------------------------------------------------------------
   The solutions category is the hub for every microgrid / C&I storage article,
   so it gets its own layout instead of the generic three-column blog list:
     .sx-hero        full-viewport photo hero with a scroll cue
     .sx-stats       credibility strip (countries / projects / W&E / uptime)
     .sx-nav         sticky in-page section nav (scroll-spy)
     .sx-seg         scenario switcher — click a scenario, its posts swap in
     .sx-cards       the post cards themselves (image + meta + excerpt)
     .sx-wall        "on site" masonry photo wall, hover reveals the caption
     .sx-cap         capability pillars (4 delivery capabilities)
     .sx-process     how-we-deliver numbered steps
     .sx-cta         closing call to action over a photo
     .sx-all         the complete index of every article in this category
   Every colour resolves through a theme variable so the four presets stay in
   sync; nothing here hard-codes a hue.
   ========================================================================== */

/* --- Full-viewport hero -------------------------------------------------- */
.sx-hero {
  position: relative;
  /* 100dvh so mobile browser chrome collapsing grows the hero, matching the
     homepage ad hero. Falls back to vh where dvh is unsupported. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.sx-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sx-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  /* Slow drift keeps the hero from feeling like a static banner. */
  animation: sx-hero-drift 26s var(--ease) infinite alternate;
}

@keyframes sx-hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}

/* Two-stop scrim: dark at the bottom-left where the copy sits, clear at the
   top-right so the photo still reads. */
.sx-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--bg) 94%, transparent) 0%,
      color-mix(in srgb, var(--bg) 72%, transparent) 34%,
      color-mix(in srgb, var(--bg) 24%, transparent) 66%,
      color-mix(in srgb, var(--bg) 45%, transparent) 100%);
}

.sx-hero-body {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(48px, 8vh, 96px);
}

.sx-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
}

.sx-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

.sx-hero-lead {
  max-width: 58ch;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.75;
  color: var(--text-2);
  margin: 0 0 var(--s4);
}

.sx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

/* Bouncing chevron that doubles as "scroll for more". */
.sx-hero-cue {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(48px, 8vh, 96px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--text-2);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  animation: sx-cue 2.4s var(--ease) infinite;
}

.sx-hero-cue:hover { color: var(--accent); border-color: var(--accent-line); }

@keyframes sx-cue {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* --- Credibility strip --------------------------------------------------- */
.sx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--s5) 0 var(--s6);
}

.sx-stat {
  padding: 24px 20px;
  background: var(--bg-2);
  transition: background .3s var(--ease);
}

.sx-stat:hover { background: var(--bg-3); }

.sx-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--accent);
}

.sx-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-3);
}

/* --- Sticky in-page nav -------------------------------------------------- */
.sx-nav {
  position: sticky;
  top: 96px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 12px;
  margin: 0 0 var(--s5);
  background: var(--header-bg-scrolled);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sx-nav a {
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.sx-nav a:hover { color: var(--text); background: var(--glass); }

.sx-nav a.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px var(--accent-soft);
}

/* --- Section shell ------------------------------------------------------- */
.sx-sec {
  scroll-margin-top: 124px;
  margin-bottom: var(--s7);
}

.sx-head { margin-bottom: var(--s4); }

.sx-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.sx-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 var(--s2);
}

.sx-head p {
  max-width: 72ch;
  margin: 0;
  color: var(--text-2);
  line-height: 1.75;
}

/* --- Scenario switcher ---------------------------------------------------
   A horizontal rail of scenario tiles. Each is a <button> so it works
   without JS; the script only adds the aria-pressed bookkeeping. One tile
   spans two columns and carries the scene photo. */
.sx-seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: var(--s5);
}

.sx-seg-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 168px;
  padding: 20px;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.sx-seg-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .2);
}

.sx-seg-item[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 16px 34px var(--accent-soft);
}

/* Photo only shows through on the pressed tile, so the rail reads as a quiet
   list until you pick one. */
.sx-seg-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.sx-seg-item[aria-pressed="true"] .sx-seg-photo { opacity: .34; }

.sx-seg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-seg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg-2) 82%, transparent),
    color-mix(in srgb, var(--bg-2) 40%, transparent));
}

.sx-seg-body { position: relative; z-index: 1; }

.sx-seg-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.35;
}

.sx-seg-desc {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
}

.sx-seg-n {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

/* --- Post cards ---------------------------------------------------------- */
.sx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.sx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.sx-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}

.sx-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
}

.sx-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}

.sx-card:hover .sx-card-media img { transform: scale(1.06); }

/* "Case" ribbon on the tiles that are deployed projects rather than concepts. */
.sx-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--r-pill);
}

.sx-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 20px 20px 22px;
}

.sx-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-3);
}

.sx-card-meta .sx-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.sx-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .25s var(--ease);
}

.sx-card:hover .sx-card-title { color: var(--accent); }

.sx-card-desc {
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}

.sx-card-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

.sx-card-go svg {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--ease);
}

.sx-card:hover .sx-card-go svg { transform: translateX(4px); }

/* --- Scenario panes: only the selected one is in the layout, so hidden panes
   take no space and cannot be reached by keyboard. */
.sx-pane { display: none; }
.sx-pane.active { display: block; animation: sx-pane-in .45s var(--ease); }

@keyframes sx-pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* "See every article in this scenario" link under a pane. */
.sx-more { margin-top: var(--s3); }

.sx-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.sx-more a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* --- "On site" photo wall ------------------------------------------------ */
.sx-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.sx-wall figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  aspect-ratio: 4 / 3;
}

.sx-wall figure.tall { grid-row: span 2; aspect-ratio: 3 / 4; }

.sx-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}

.sx-wall figure:hover img { transform: scale(1.07); }

.sx-wall figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 34px 18px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  /* Caption band slides up from the bottom edge on hover. */
  transform: translateY(calc(100% - 34px));
  transition: transform .38s var(--ease);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 92%, transparent),
    color-mix(in srgb, var(--bg) 55%, transparent) 60%,
    transparent);
}

.sx-wall figure:hover figcaption { transform: none; }

.sx-wall figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
}

/* --- Capability pillars -------------------------------------------------- */
.sx-cap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sx-cap > div {
  padding: 28px 24px 30px;
  background: var(--bg-2);
  transition: background .3s var(--ease);
}

.sx-cap > div:hover { background: var(--bg-3); }

/* Numbered via counter so the order can never drift from the markup. */
.sx-cap > div::before {
  content: counter(sx-cap, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--accent);
}

.sx-cap { counter-reset: sx-cap; }

.sx-cap b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--text);
}

.sx-cap p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

/* --- Delivery steps ------------------------------------------------------ */
.sx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  counter-reset: sx-step;
}

.sx-step {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
}

.sx-step::before {
  content: counter(sx-step, decimal-leading-zero);
  counter-increment: sx-step;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--r-pill);
  box-shadow: 0 6px 16px var(--accent-soft);
}

.sx-step b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
}

.sx-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}

/* --- Closing CTA --------------------------------------------------------- */
.sx-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 44vh, 460px);
  padding: var(--s6) var(--s4);
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  isolation: isolate;
}

.sx-cta-bg { position: absolute; inset: 0; z-index: -2; }

.sx-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 72%, transparent),
    color-mix(in srgb, var(--bg) 90%, transparent));
}

.sx-cta h2 {
  max-width: 22ch;
  margin: 0 auto var(--s3);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.sx-cta p {
  max-width: 56ch;
  margin: 0 auto var(--s4);
  color: var(--text-2);
  line-height: 1.75;
}

.sx-cta .sx-hero-cta { justify-content: center; margin-bottom: 0; }

/* --- Complete index ------------------------------------------------------
   The exhaustive list is collapsed by default so the scenario panes above
   stay the primary read; <details> keeps it working with JS disabled. */
.sx-all { margin-top: var(--s4); }

.sx-all > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  cursor: pointer;
  list-style: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.sx-all > summary::-webkit-details-marker { display: none; }
.sx-all > summary:hover { border-color: var(--accent-line); background: var(--glass-strong); }

.sx-all > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}

.sx-all[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.sx-all-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sx-all-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 18px;
  color: var(--text-2);
  text-decoration: none;
  background: var(--bg-2);
  transition: background .22s var(--ease), color .22s var(--ease);
}

.sx-all-item:hover { background: var(--bg-3); color: var(--text); }

.sx-all-item::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent-line);
  transition: background .22s var(--ease);
}

.sx-all-item:hover::before { background: var(--accent); }

.sx-all-item span {
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* --- Overflow guards for the hub ---------------------------------------- */
.sx-seg-item, .sx-card, .sx-stat, .sx-cap > div, .sx-step, .sx-wall figure, .sx-all-item {
  min-width: 0;
}

.sx-card-desc, .sx-seg-desc, .sx-cap p, .sx-step p, .sx-all-item span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sx-seg, .sx-cards, .sx-wall, .sx-cap, .sx-steps, .sx-stats, .sx-all-body {
  max-width: 100%;
}

.sx-card-media img, .sx-wall img, .sx-seg-photo img, .sx-cta-bg img {
  max-width: 100%;
}

/* --- Responsive ----------------------------------------------------------
   Below 860px the sticky nav would eat too much of a short viewport, so it
   stops sticking and scrolls with the page instead. */
@media (max-width: 860px) {
  .sx-hero-cue { display: none; }
  .sx-nav {
    position: static;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sx-nav::-webkit-scrollbar { display: none; }
  .sx-sec { scroll-margin-top: 16px; }
  .sx-wall figure.tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .sx-wall figcaption { transform: none; }
}

@media (max-width: 640px) {
  .sx-stats { grid-template-columns: repeat(2, 1fr); }
  .sx-cards { grid-template-columns: 1fr; }
  .sx-seg-item { min-height: 132px; }
  .sx-hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* Honour the OS "reduce motion" setting: kill the hero drift, the bouncing
   cue and the pane fade, but keep colour/transform feedback. */
@media (prefers-reduced-motion: reduce) {
  .sx-hero-media img { animation: none; }
  .sx-hero-cue { animation: none; }
  .sx-pane.active { animation: none; }
  .sx-card:hover, .sx-seg-item:hover { transform: none; }
}

/* ================================================================== */
/* SCENARIO PAGES  ·  场景解决方案页（off-grid / 并网储能 / 弱电网 /分布式） */
/* ================================================================== */
/* 正文存于数据库（categories.description / pages.content），无法直接改
   视图，因此所有视觉能力都用这一套语义类实现，HTML 里只留 class，
   不写任何内联样式或十六进制色值 —— 4 套主题 preset 才能自动适配。
   旧正文的硬编码 #e5e7eb / #555 在 tech 主题下对比度只有 1.6:1，
   是「不符合 VI 规范」的根因，这里统一替换为主题变量。 */

.scn-hero {
  position: relative;
  margin: var(--s4) 0 var(--s5);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 8% 0%, var(--accent-soft), transparent 58%),
    radial-gradient(110% 130% at 100% 100%, var(--accent-soft), transparent 62%),
    var(--bg-1);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.scn-hero::after {
  content: '';
  position: absolute;
  inset: auto -18% -58% auto;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  pointer-events: none;
}
.scn-hero > * { position: relative; z-index: 1; min-width: 0; }
.scn-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-bottom: .8rem;
  padding: .28em .8em;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.scn-hero h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--text);
}
.scn-hero-lede {
  max-width: 68ch;
  margin: 0;
  color: var(--text-2);
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
  line-height: 1.78;
}
.scn-hero-lede strong { color: var(--text); }

/* 数据条：4 个关键指标，用主题变量做玻璃拟态 */
.scn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
}
.scn-stats li {
  min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  backdrop-filter: blur(10px);
}
.scn-stats b {
  display: block;
  margin-bottom: .2rem;
  color: var(--accent);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.scn-stats span {
  display: block;
  color: var(--text-2);
  font-size: .84rem;
  line-height: 1.5;
}

/* 分层架构图：把「发电层 / 储能层 / 变换层 / 管理层」画成可点亮的层 */
.scn-stack { display: grid; gap: .55rem; margin: var(--s3) 0; }
.scn-layer {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: start;
  gap: 1rem;
  min-width: 0;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.scn-layer:hover {
  border-color: var(--accent-line);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--bg-2) 92%, var(--accent-soft));
  transform: translateX(3px);
}
.scn-layer-tag {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: .18rem;
}
.scn-layer-body { min-width: 0; }
.scn-layer-body h4 {
  margin: 0 0 .35rem;
  color: var(--text);
  font-size: 1.02rem;
}
.scn-layer-body p {
  margin: 0;
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.72;
}
.scn-layer-body p + p { margin-top: .5rem; }

/* 产品矩阵卡：产品实拍图 + 关键参数，正文里的事实卡 */
.scn-prods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 1rem;
  margin: var(--s3) 0;
}
.scn-prod {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.scn-prod:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--sh-2);
}
.scn-prod figure { margin: 0; background: var(--bg-3); overflow: hidden; }
.scn-prod figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.scn-prod:hover figure img { transform: scale(1.055); }
.scn-prod-body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
  padding: .95rem 1rem 1.05rem;
}
.scn-prod-model {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}
.scn-prod-name {
  margin: 0;
  color: var(--text);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.45;
}
.scn-prod-specs { margin: 0; padding: 0; list-style: none; }
.scn-prod-specs li {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  min-width: 0;
  padding: .3rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  line-height: 1.5;
}
.scn-prod-specs li:first-child { border-top: 0; }
.scn-prod-specs dt,
.scn-prod-specs .k { color: var(--text-3); flex: 0 0 auto; }
.scn-prod-specs .v {
  color: var(--text-2);
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}
.scn-prod-more {
  margin-top: auto;
  padding-top: .5rem;
  color: var(--accent);
  font-size: .84rem;
  font-weight: 600;
}

/* 参数表：真实规格参数，移动端转成卡片而不是横向滚动 */
.scn-tablewrap {
  margin: var(--s3) 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.scn-tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.scn-tablewrap caption {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-3) 60%, transparent);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
}
.scn-tablewrap th,
.scn-tablewrap td {
  padding: .62rem .95rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.scn-tablewrap tbody tr:last-child th,
.scn-tablewrap tbody tr:last-child td { border-bottom: 0; }
.scn-tablewrap tbody th {
  width: 38%;
  color: var(--text-3);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.scn-tablewrap tbody td {
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.scn-tablewrap thead th {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-3) 45%, transparent);
  font-weight: 600;
  white-space: nowrap;
}
.scn-tablewrap tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }

/* 对比卡：跟网型 vs 构网型 / 方案取舍 */
.scn-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
  margin: var(--s3) 0;
}
.scn-compare > div {
  min-width: 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
}
.scn-compare > div.is-hero {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--bg-2) 88%, var(--accent-soft));
}
.scn-compare h4 {
  margin: 0 0 .5rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 1rem;
}
.scn-compare p { margin: .45rem 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.7; }
.scn-compare strong { color: var(--text); }
.scn-compare ul { margin: .5rem 0 0; padding-left: 1.15em; color: var(--text-2); font-size: .9rem; }
.scn-compare li { margin-bottom: .3em; }

/* 流程步骤：容量设计 / 交付流程，带序号与连接线 */
.scn-steps {
  display: grid;
  gap: .6rem;
  margin: var(--s3) 0;
  padding: 0;
  list-style: none;
  counter-reset: scnstep;
}
.scn-steps li {
  position: relative;
  min-width: 0;
  padding: .95rem 1.1rem .95rem 3.4rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-2) 68%, transparent);
  counter-increment: scnstep;
}
.scn-steps li::before {
  content: counter(scnstep);
  position: absolute;
  top: .92rem;
  left: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
}
.scn-steps h4 { margin: 0 0 .3rem; color: var(--text); font-size: .98rem; }
.scn-steps p { margin: 0; color: var(--text-2); font-size: .91rem; line-height: 1.72; }
.scn-steps ul { margin: .5rem 0 0; padding-left: 1.15em; color: var(--text-2); font-size: .89rem; }
.scn-steps li + li::before { top: .92rem; }

/* 公式块：容量/功率核算，等宽字体 + 主色左边线 */
.scn-formula {
  margin: var(--s2) 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--bg-3) 46%, transparent);
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: .88rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.scn-formula em { color: var(--text-2); font-style: normal; font-family: inherit; }

/* 场景卡网格：替换旧正文里 inline-grid 的场景罗列 */
.scn-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: .8rem;
  margin: var(--s3) 0;
}
.scn-scene {
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  transition: border-color .22s ease, transform .22s ease;
}
.scn-scene:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.scn-scene h4 {
  margin: 0 0 .4rem;
  color: var(--text);
  font-size: .98rem;
}
.scn-scene p {
  margin: 0;
  color: var(--text-2);
  font-size: .88rem;
  line-height: 1.68;
}

/* 现场案例墙：masonry 式错落，替代旧的等高 img 网格 */
.scn-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: .6rem;
  margin: var(--s3) 0;
}
.scn-wall figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-3);
}
.scn-wall img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 148px;
  max-height: 210px;
  object-fit: cover;
  transition: transform .55s ease;
}
.scn-wall figure:hover img { transform: scale(1.06); }
.scn-wall figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .8rem .6rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
  color: var(--text);
  font-size: .8rem;
  line-height: 1.4;
}

/* 问答：折叠式，比 h3+p 更省版面 */
.scn-faq { margin: var(--s3) 0; }
.scn-faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
  margin-bottom: .5rem;
  overflow: hidden;
}
.scn-faq summary {
  padding: .85rem 1.05rem;
  color: var(--text);
  font-weight: 600;
  font-size: .94rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.scn-faq summary::-webkit-details-marker { display: none; }
.scn-faq summary::before {
  content: '+';
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.5;
}
.scn-faq details[open] summary::before { content: '\2212'; }
.scn-faq details[open] { border-color: var(--accent-line); }
.scn-faq .scn-faq-a {
  padding: 0 1.05rem 1rem 2.35rem;
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1.75;
}
.scn-faq .scn-faq-a p { margin: 0; }

/* 要点提示框 */
.scn-note {
  margin: var(--s3) 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--accent-line);
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: .91rem;
  line-height: 1.75;
}
.scn-note strong { color: var(--text); }
.scn-note p { margin: 0; }
.scn-note p + p { margin-top: .5rem; }

/* 结尾 CTA */
.scn-cta {
  margin: var(--s5) 0 var(--s3);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--bg-2);
  text-align: center;
}
.scn-cta h3 { margin: 0 0 .5rem; color: var(--text); font-size: 1.16rem; }
.scn-cta p { margin: 0 auto; max-width: 62ch; color: var(--text-2); font-size: .93rem; line-height: 1.75; }
.scn-cta .btn { margin-top: 1.1rem; }

/* 章节分隔：给长正文一点呼吸 */
.scn-sec { margin-top: var(--s5); }
.scn-sec > h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--s2);
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  letter-spacing: -.01em;
}
.scn-sec > h2::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-2));
}

/* 正文里的裸 ul / strong 也要跟上主题 */
.content .scn-prods a,
.content .scn-prods a:hover { text-decoration: none; }
.content .scn-prod-specs strong { color: var(--text); }

/* ---------- 场景页响应式 ---------- */
@media (max-width: 860px) {
  .scn-hero { padding: 1.35rem 1.15rem; border-radius: 15px; }
  .scn-layer { grid-template-columns: 1fr; gap: .35rem; padding: .85rem .95rem; }
  .scn-layer-tag { padding-top: 0; }
  .scn-tablewrap thead { display: none; }
  .scn-tablewrap tbody tr {
    display: block;
    padding: .8rem .95rem;
    border-bottom: 1px solid var(--line-soft);
  }
  .scn-tablewrap tbody tr:last-child { border-bottom: 0; }
  .scn-tablewrap tbody th,
  .scn-tablewrap tbody td { display: block; width: auto; padding: .1rem 0; border: 0; }
  .scn-tablewrap tbody th { font-size: .78rem; letter-spacing: .03em; }
  .scn-tablewrap tbody td { font-size: .92rem; }
  .scn-faq .scn-faq-a { padding-left: 1.05rem; }
}

@media (max-width: 640px) {
  .scn-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: .5rem; }
  .scn-stats li { padding: .7rem .8rem; border-radius: 11px; }
  .scn-stats b { font-size: 1.14rem; }
  .scn-prods, .scn-compare, .scn-scenes {
    grid-template-columns: 1fr;
  }
  .scn-wall { grid-template-columns: repeat(2, 1fr); gap: .45rem; }
  .scn-wall img { min-height: 108px; max-height: 140px; }
  .scn-wall figcaption { font-size: .72rem; padding: 1.2rem .55rem .45rem; }
  .scn-steps li { padding: .85rem .9rem .85rem 2.9rem; }
  .scn-steps li::before { left: .85rem; width: 1.55rem; height: 1.55rem; font-size: .76rem; }
  .scn-formula { font-size: .82rem; padding: .75rem .85rem; }
  .scn-cta { padding: 1.3rem 1rem; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .scn-prod:hover, .scn-scene:hover, .scn-layer:hover { transform: none; }
  .scn-prod:hover figure img, .scn-wall figure:hover img { transform: none; }
}

/* ===================================================================
   CASE STUDY PAGES —— 案例页（微电网案例库）
   场景页讲"这类场景怎么解"，案例页讲"这一个项目实际做了什么"。
   因此案例正文必须有逐图说明与前后对照，正文存于数据库
   (categories.description)，只能靠语义类实现视觉。
   =================================================================== */

/* 单张实景 + 独立图说：航拍、位置图这类需要放大辨认的图 */
.scn-figure {
  margin: var(--s3) 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}
.scn-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}
.scn-figure figcaption {
  padding: .8rem 1rem .9rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-3) 55%, transparent);
  color: var(--text-2);
  font-size: .84rem;
  line-height: 1.6;
}
.scn-figure figcaption b { color: var(--text); font-weight: 650; }

/* 改造前 / 改造后对照：案例叙事的主骨架 */
.scn-before {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s2);
  margin: var(--s3) 0;
}
.scn-before > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}
.scn-before > div.is-now {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.scn-before img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.scn-before .scn-before-body { padding: .9rem 1rem 1rem; }
.scn-before .scn-before-tag {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .12rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 70%, transparent);
  color: var(--text-3);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.scn-before .is-now .scn-before-tag {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}
.scn-before h4 { margin: 0 0 .35rem; font-size: 1.02rem; }
.scn-before p { margin: 0; color: var(--text-2); font-size: .87rem; line-height: 1.65; }

/* 四大子系统卡片：光 / 风 / 柴 / 储 */
.scn-syscards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s2);
  margin: var(--s3) 0;
}
.scn-syscard {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}
.scn-syscard h4 {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .45rem;
  font-size: 1.02rem;
}
.scn-syscard .scn-syscard-no {
  color: color-mix(in srgb, var(--accent) 72%, var(--text-3));
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.scn-syscard p { margin: .35rem 0 0; color: var(--text-2); font-size: .88rem; line-height: 1.68; }
.scn-syscard .scn-syscard-kv {
  margin-top: .6rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--line);
  color: var(--text-3);
  font-size: .8rem;
  line-height: 1.6;
}
.scn-syscard .scn-syscard-kv b { color: var(--text-2); font-weight: 650; }

/* 成果数据条：比通用 stats 更强调"降幅"语义 */
.scn-gain {
  margin: var(--s3) 0;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.2rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.scn-gain > h4 {
  margin: 0 0 .85rem;
  color: color-mix(in srgb, var(--accent) 30%, var(--text));
  font-size: .95rem;
  letter-spacing: .02em;
}
.scn-gain ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: .7rem;
}
.scn-gain li {
  padding: .6rem .75rem .7rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  border: 1px solid var(--line);
}
.scn-gain li b {
  display: block;
  font-size: 1.42rem;
  line-height: 1.15;
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
}
.scn-gain li span { display: block; margin-top: .2rem; color: var(--text-2); font-size: .82rem; line-height: 1.45; }

@media (max-width: 860px) {
  .scn-before { grid-template-columns: 1fr; }
  .scn-before img { height: 190px; }
  .scn-figure img { max-height: 300px; }
  .scn-syscards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .scn-before img { height: 165px; }
  .scn-figure figcaption { font-size: .8rem; padding: .65rem .8rem .75rem; }
  .scn-gain > ul { grid-template-columns: 1fr 1fr; }
  .scn-gain li b { font-size: 1.2rem; }
  .scn-syscards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .scn-before img, .scn-syscard { transition: none; }
}

/* =====================================================================
   会员注册 / 登录 / 会员中心（auth）
   ===================================================================== */
.auth-wrap { max-width: 560px; margin: 0 auto; padding: 40px 0 60px; }
.auth-wrap--wide { max-width: 940px; }

/* Two-column membership pages: form on the left, contact block on the right. */
.auth-wrap--split {
  max-width: 1040px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 26px; align-items: start;
}
.auth-side {
  /* Sit right below the sticky promo strip + header. */
  position: sticky; top: calc(var(--tb-h, 42px) + var(--hd-h, 77px) + 16px);
  display: flex; flex-direction: column;
  padding: 26px 26px 28px;
  border: 1px solid var(--glass-bd, rgba(255,255,255,.14));
  border-radius: var(--r-lg, 16px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.auth-side .contact-card { margin-top: 0; }
@media (max-width: 920px) {
  .auth-wrap--split { grid-template-columns: 1fr; gap: 20px; }
  .auth-side { position: static; padding: 22px 20px 24px; }
}
.auth-card {
  padding: 32px 34px 30px;
  border: 1px solid var(--glass-bd, rgba(255,255,255,.14));
  border-radius: var(--r-lg, 16px);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.auth-card--wide { padding: 30px 34px 34px; }
.auth-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 24px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.auth-form { margin: 0; }
.auth-hint { margin: -4px 0 18px; font-size: 13px; color: var(--text-2); }
.auth-foot { margin: 20px 0 0; font-size: 14px; color: var(--text-2); text-align: center; }
.auth-foot a { color: var(--accent-2, var(--accent)); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-resend { margin: 16px 0 0; text-align: center; }
.link-btn {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: 13.5px; font-weight: 600; text-decoration: underline;
  color: var(--accent-2, var(--accent));
}
.auth-card input, .auth-card select {
  width: 100%; padding: 11px 13px; font-size: 15px;
  color: var(--text); background: color-mix(in srgb, var(--bg) 40%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
}
.auth-card input:focus, .auth-card select:focus {
  outline: none; border-color: var(--accent-2, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.auth-card .req { color: #e2554f; font-style: normal; }
/* 「忘记密码」行：贴在密码框右下角 */
.auth-row-end { display: flex; justify-content: flex-end; margin: 2px 0 14px; }
.auth-row-end a { color: var(--accent-2, var(--accent)); font-weight: 600; text-decoration: none; }
.auth-row-end a:hover { text-decoration: underline; }
.auth-foot-sep { margin: 0 8px; color: var(--line); }

/* ---- 会员中心 ---- */
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-head .auth-sub { margin-bottom: 18px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 6px; }
/* 右栏与左栏之间加分隔线，强化两栏层次（仅桌面） */
.account-grid > .account-col:nth-child(2) { padding-left: 40px; border-left: 1px solid var(--line); }
/* 左栏只读信息：覆盖 .kv 的 96px/1fr 网格，避免标签被压成窄列断行 */
.kv--plain { display: block; border-top: none; margin-top: 2px; }
.account-col h3 { font-size: 16px; font-weight: 700; }
.kv--plain .kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.kv--plain .kv-row span {
  flex: none; min-width: 84px; color: var(--text-2);
  font-size: 13.5px; white-space: nowrap;
}
.kv--plain .kv-row b { font-weight: 600; text-align: right; word-break: break-word; font-size: 14px; line-height: 1.5; }
.level-badge, .status-badge {
  display: inline-block; min-width: 24px; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.level-A { background: color-mix(in srgb, #22c55e 22%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.level-B { background: color-mix(in srgb, #3b82f6 20%, transparent); color: #2563eb; border: 1px solid color-mix(in srgb, #3b82f6 42%, transparent); }
.level-C { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent); }
.level-D { background: color-mix(in srgb, #94a3b8 22%, transparent); color: #64748b; border: 1px solid color-mix(in srgb, #94a3b8 40%, transparent); }
.status-pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); }
.status-approved { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 42%, transparent); }
.status-rejected { background: color-mix(in srgb, #e2554f 18%, transparent); color: #dc2626; border: 1px solid color-mix(in srgb, #e2554f 42%, transparent); }
.price-access {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 22px;
  padding: 14px 16px; border-radius: var(--r, 12px);
  border: 1px solid var(--line); background: var(--glass); font-size: 14px; line-height: 1.5;
}
.price-access .pa-ico { flex: none; font-size: 18px; line-height: 1.2; }
.price-access.is-open { border-color: color-mix(in srgb, #22c55e 45%, transparent); background: color-mix(in srgb, #22c55e 10%, transparent); }
.price-access.is-open .pa-ico { color: #16a34a; }
.price-access.is-locked { border-color: color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); }
.account-sep { height: 1px; margin: 26px 0 22px; background: var(--line); }
/* ---- 会员有效期（申请激活） ---- */
.validity-card { align-items: flex-start; }
.validity-card .vc-form { margin-top: 12px; }
.validity-card .vc-form .btn { padding: 9px 20px; font-size: 13.5px; }
.validity-card .vc-pending { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #b45309; }

/* ---- 会员等级报价标签 ---- */
.price-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.price-tier .tier-badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.price-tier .tier-A { background: color-mix(in srgb, #22c55e 22%, transparent); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.price-tier .tier-B { background: color-mix(in srgb, #3b82f6 20%, transparent); color: #2563eb; border: 1px solid color-mix(in srgb, #3b82f6 42%, transparent); }
.price-tier .tier-C { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent); }
.price-tier .tier-D { background: color-mix(in srgb, #94a3b8 22%, transparent); color: #64748b; border: 1px solid color-mix(in srgb, #94a3b8 40%, transparent); }
.price-tier .tier-note { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

/* ---- 价格占位（未登录 / 非 A 级） ---- */
.price-locked {
  padding: 16px 18px; border-radius: var(--r, 12px);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.price-locked-main { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); }
.price-locked-note { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.price-locked-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.price-locked-actions .btn { padding: 7px 14px; font-size: 13.5px; }
.card-price-locked { font-size: 13px; font-weight: 600; color: var(--accent-2, var(--accent)); }
.card-tier {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; border-radius: var(--r-pill);
  color: var(--accent-2, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  vertical-align: 1px;
}

@media (max-width: 860px) {
  .account-grid { grid-template-columns: 1fr; gap: 26px; }
  .account-grid > .account-col:nth-child(2) { padding-left: 0; border-left: none; }
  .auth-card { padding: 24px 20px 26px; }
  .account-head { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   One-click share bar  (GlassCosmos · glassmorphism)
   ============================================================ */
.share-bar {
  margin: var(--s4) 0;
  padding: var(--s3);
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.share-bar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2);
}
.share-bar-title {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.share-more-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-bd);
  color: var(--text-2); font-size: .8rem; font-weight: 500;
  transition: color .2s, border-color .2s, background .2s;
}
.share-more-toggle:hover { color: var(--text); border-color: var(--accent-line); }
.share-more-toggle svg { transition: transform .25s var(--ease-out); }
.share-bar.is-open .share-more-toggle svg { transform: rotate(180deg); }

.share-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s2); }

.share-btn {
  --sc: #5B6472;
  position: relative; overflow: hidden;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; cursor: pointer; text-decoration: none;
  border-radius: 15px; border: 1px solid var(--glass-bd);
  background: var(--glass-strong); color: var(--text);
  transition: transform .18s var(--ease-out), border-color .2s, background .2s, box-shadow .2s;
}
.share-btn::before {
  content: ""; position: absolute; inset: 0; opacity: .14;
  background: radial-gradient(120% 120% at 50% 0%, var(--sc), transparent 72%);
  transition: opacity .2s;
}
.share-btn:hover {
  transform: translateY(-3px);
  border-color: var(--sc);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.share-btn:hover::before { opacity: .28; }
.share-btn:active { transform: translateY(-1px); }
.share-btn:focus-visible { outline: 2px solid var(--sc); outline-offset: 2px; }

.share-btn--lg { width: 86px; height: 86px; }
.share-btn--sm { width: 100%; min-height: 78px; }

.share-btn svg { position: relative; z-index: 1; width: 22px; height: 22px; color: var(--sc); }
.share-btn--sm svg { width: 20px; height: 20px; }
.share-glyph {
  position: relative; z-index: 1; font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--sc);
}
.share-name {
  position: relative; z-index: 1; font-size: .76rem; font-weight: 500;
  line-height: 1.15; text-align: center; color: var(--text-2);
}
.share-btn:hover .share-name { color: var(--text); }

.share-more {
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line-soft);
}
.share-more[hidden] { display: none; }

/* list-page mini trigger */
.share-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-bd);
  color: var(--text-2);
  transition: color .2s, border-color .2s, transform .18s var(--ease-out), background .2s;
}
.share-mini:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }
.share-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-mini svg { width: 18px; height: 18px; }

/* floating popover for list pages */
.share-pop {
  position: absolute; z-index: 1200; display: none;
  width: 320px; max-width: calc(100vw - 16px);
  padding: var(--s2); border-radius: 18px;
  background: var(--glass-strong); border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1);
}
.share-pop.is-open { display: block; animation: sharePop .18s var(--ease-out); }
@keyframes sharePop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* QR sheet (modal) */
.share-sheet {
  position: fixed; inset: 0; z-index: 1500; display: none;
  align-items: center; justify-content: center; padding: var(--s3);
  background: rgba(4,7,14,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.share-sheet.in { display: flex; animation: shareFade .2s ease; }
@keyframes shareFade { from { opacity: 0; } to { opacity: 1; } }
.share-sheet-card {
  position: relative; width: min(320px, 100%);
  padding: var(--s4) var(--s3) var(--s3); border-radius: 22px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--glass-bd);
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
}
.share-sheet-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: var(--s2); }
.share-sheet-qr {
  width: 220px; height: 220px; border-radius: 12px; background: #fff;
  padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.share-sheet-hint { margin: var(--s2) 0 var(--s3); font-size: .85rem; color: var(--text-2); }
.share-sheet-x {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: none; background: transparent; color: var(--text-3); font-size: 1.4rem;
  cursor: pointer; border-radius: 50%; line-height: 1;
}
.share-sheet-x:hover { color: var(--text); background: var(--glass); }
.share-sheet-copy { width: 100%; }

@media (max-width: 560px) {
  .share-btn--lg { width: 72px; height: 72px; }
  .share-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .share-pop { width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .share-btn, .share-more-toggle svg, .share-mini,
  .share-pop, .share-sheet { transition: none; animation: none; }
}

/* ===================== Download gate modal ===================== */
/* Shown when an anonymous visitor clicks a member-only file: a gentle
   "sign in to download" prompt with register / login buttons. */
.dl-gate-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.dl-gate-modal.is-open { opacity: 1; }
.dl-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 14, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dl-gate-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 34px 30px 28px;
  text-align: center;
  background: var(--glass-strong);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  transform: translateY(12px) scale(.98);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.dl-gate-modal.is-open .dl-gate-dialog { transform: translateY(0) scale(1); }
.dl-gate-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dl-gate-close:hover { background: var(--accent-soft); color: var(--accent); }
.dl-gate-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: 0 0 30px var(--accent-soft);
}
.dl-gate-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong, var(--text));
}
.dl-gate-desc {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #9aa6b8);
}
.dl-gate-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.dl-gate-actions .btn { flex: 1; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .dl-gate-modal, .dl-gate-dialog { transition: none; }
}