/* ==========================================================================
   上海语林医疗科技有限公司 — Shared Stylesheet
   ========================================================================== */

:root {
  --navy-950: #0f1e1a;
  --navy-900: #163029;
  --navy-800: #1d3f36;
  --navy-700: #275146;
  --blue-600: #2f6b5c;
  --cyan-500: #2f9678;
  --cyan-400: #4db894;
  --cyan-300: #8fd9bf;
  --gold-500: #bf9d54;
  --ink-900: #14201c;
  --ink-700: #34443e;
  --ink-500: #5b6f68;
  --paper-0: #ffffff;
  --paper-50: #f5f9f7;
  --paper-100: #eef4f1;
  --paper-200: #e1ebe6;
  --line-200: #dbe6e1;
  --success-500: #2f9f74;
  --shadow-sm: 0 2px 10px rgba(15, 30, 26, 0.07);
  --shadow-md: 0 12px 30px rgba(15, 30, 26, 0.11);
  --shadow-lg: 0 24px 60px rgba(15, 30, 26, 0.17);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-900);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold-500);
  display: inline-block;
}

.section-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.28;
  color: var(--navy-900);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.section-sub {
  font-size: 16px;
  color: var(--ink-500);
  line-height: 1.85;
  max-width: 680px;
  margin: 0 0 40px;
}
.section-head { margin-bottom: 44px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

section { position: relative; }
.pad { padding: 96px 0; }
.pad-sm { padding: 64px 0; }
.bg-paper { background: var(--paper-50); }
.bg-navy { background: linear-gradient(160deg, var(--navy-950), var(--navy-800)); color: #eaf2fb; }
.bg-navy .section-title { color: #fff; }
.bg-navy .section-sub { color: #b7c8dc; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(120deg, var(--cyan-500), var(--blue-600));
  color: #fff;
  box-shadow: 0 10px 24px rgba(36, 107, 89, 0.32);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(36, 107, 89, 0.42); }
.btn-ghost {
  background: transparent;
  color: #eaf2fb;
  border-color: rgba(234, 242, 251, 0.35);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-3px); }
.btn-dark {
  background: var(--navy-900);
  color: #fff;
}
.btn-dark:hover { background: var(--navy-700); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: var(--navy-900);
  color: var(--navy-900);
}
.btn-outline:hover { background: var(--navy-900); color: #fff; transform: translateY(-3px); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg { width: 14px; height: 14px; }

/* ---------------- Top bar ---------------- */
.topbar {
  background: var(--navy-950);
  color: #9fb3c8;
  font-size: 12.5px;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 38px;
}
.topbar-left { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 10px 22px; }
.topbar-left span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-right { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 10px 18px; }
.topbar-right a { white-space: nowrap; }
.topbar a:hover { color: var(--cyan-300); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-400);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(77,184,148,.6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(77,184,148,.55); }
  70% { box-shadow: 0 0 0 8px rgba(77,184,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(77,184,148,0); }
}

/* ---------------- Header / Nav ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-200);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(15,30,26,.08); }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  transition: height .3s var(--ease);
}
.site-header.scrolled .nav-row { height: 68px; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }
.brand-mark {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-200);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  padding: 3px;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { line-height: 1.25; min-width: 0; max-width: 260px; }
.brand-text .cn { font-size: 17px; font-weight: 700; color: var(--navy-900); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text .en { font-size: 10.5px; color: var(--ink-500); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav > ul > li { position: relative; }
.main-nav a.nav-link {
  display: flex;
  align-items: center;
  height: 84px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  position: relative;
  white-space: nowrap;
}
.site-header.scrolled .main-nav a.nav-link { height: 68px; }
.main-nav a.nav-link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 20px;
  height: 2px;
  background: var(--cyan-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a.nav-link:hover::after, .main-nav li.active a.nav-link::after { transform: scaleX(1); }
.main-nav a.nav-link:hover, .main-nav li.active a.nav-link { color: var(--navy-900); }

.has-drop > .nav-link .caret { margin-left: 5px; font-size: 10px; transition: transform .3s var(--ease); }
.has-drop:hover > .nav-link .caret { transform: rotate(180deg); }
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 240px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-200);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 40;
}
.has-drop:hover .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown li a {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
}
.dropdown li a span.sub { font-weight: 400; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.dropdown li a:hover { background: var(--paper-100); color: var(--navy-900); }

.nav-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  background: #fff;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.burger span { width: 18px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: all .3s var(--ease); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  /* Fill the first screen (viewport minus the topbar + sticky header
     above it) rather than a fixed 560px. At 560px fixed, taller desktop
     viewports showed the top of the next section already peeking in
     without any scrolling - which made the "Scroll" hint at the hero's
     bottom edge sit right on top of that next section's heading instead
     of having real separation from it. 560px remains as a floor for
     short viewports via the min-height fallback. */
  min-height: 560px;
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  background: radial-gradient(1100px 620px at 78% 18%, rgba(47,150,120,.35), transparent 60%),
              linear-gradient(155deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color: #fff;
  overflow: hidden;
}
.hero-orbit {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}
.hero-orbit span {
  position: absolute;
  border: 1px solid rgba(143,217,191,.16);
  border-radius: 50%;
}
.hero-orbit span:nth-child(1) { width: 420px; height: 420px; top: 6%; right: 4%; animation: spin-slow 40s linear infinite; }
.hero-orbit span:nth-child(2) { width: 620px; height: 620px; top: -4%; right: -6%; animation: spin-slow 60s linear infinite reverse; }
.hero-orbit span:nth-child(3) { width: 280px; height: 280px; top: 20%; right: 16%; animation: spin-slow 26s linear infinite; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.hero-glow {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--cyan-400);
  filter: blur(3px);
  opacity: .7;
  animation: float-y 7s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-26px) translateX(10px); }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 85%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  padding: 84px 0 52px;
  width: 100%;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--cyan-300);
  margin-bottom: 18px;
  max-width: 100%;
}
.hero-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.hero-badge span { overflow-wrap: anywhere; }
.hero h1 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  /* With 9 languages of very different lengths sharing one layout, a
     hard-coded line break reads clean for some and leaves a single
     orphan word stranded on its own line for others. text-wrap:balance
     asks supporting browsers to distribute the wrapped text evenly
     instead, so no language is left with an awkward one-word line -
     this fixes the class of problem at the CSS level rather than by
     hand-trimming every language's string to the same target length. */
  text-wrap: balance;
}
.hero h1 .accent { color: var(--cyan-400); }
.hero p.lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: #c3d3e6;
  max-width: 600px;
  margin: 0 0 22px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; gap: 30px; flex-wrap: wrap; }
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust b { font-size: 26px; font-weight: 700; color: #fff; }
.hero-trust span { font-size: 12.5px; color: #9fb3c8; margin-top: 3px; }

.hero-visual {
  position: relative;
  height: 460px;
}
.hero-card {
  position: absolute;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  animation: float-card 6s ease-in-out infinite;
}
.hero-card.c1 { width: 78%; top: 6%; left: 6%; animation-delay: 0s; }
.hero-card.c2 { width: 62%; bottom: 4%; right: 0; animation-delay: 1.2s; background: rgba(47,150,120,.14); }
@keyframes float-card {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-.4deg); }
}
.hero-card .hc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero-card .hc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(140deg, var(--cyan-500), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-card .hc-title { font-size: 13.5px; font-weight: 700; color: #fff; }
.hero-card .hc-sub { font-size: 11px; color: #9fb3c8; }
.hero-card .hc-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 8px; }
.hero-card .hc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan-400), var(--gold-500)); border-radius: 3px; animation: fill-bar 2.4s var(--ease) forwards; }
@keyframes fill-bar { from { width: 0%; } }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero {
  position: relative;
  padding: 168px 0 74px;
  background: radial-gradient(900px 460px at 85% 0%, rgba(47,150,120,.28), transparent 60%),
              linear-gradient(155deg, var(--navy-950), var(--navy-800));
  color: #fff;
  overflow: hidden;
}
.page-hero .hero-grid { opacity: .5; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #9fb3c8; margin-bottom: 18px; position: relative; z-index: 2;}
.breadcrumb a:hover { color: var(--cyan-300); }
.page-hero h1 { position: relative; z-index: 2; font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 14px; }
.page-hero p { position: relative; z-index: 2; color: #c3d3e6; max-width: 620px; font-size: 15.5px; line-height: 1.85; margin: 0; }

/* ---------------- Stat counters ---------------- */
.stats-strip {
  position: relative;
  z-index: 2;
  background: var(--navy-900);
  margin-top: -1px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-item {
  padding: 34px 20px;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.stat-item:first-child { border-left: none; }
.stat-item .num { font-size: 34px; font-weight: 700; color: var(--cyan-300); display: flex; justify-content: center; gap: 2px; }
.stat-item .label { font-size: 13px; color: #9fb3c8; margin-top: 8px; }

/* ---------------- Reveal animation ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------------- Feature / advantage cards ---------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.feature-card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan-500), var(--gold-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feature-card:hover::before { transform: scaleX(1); }
.f-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(140deg, var(--navy-900), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: transform .4s var(--ease);
}
.feature-card:hover .f-icon { transform: rotate(-8deg) scale(1.06); }
.f-icon svg { width: 26px; height: 26px; stroke: #fff; }
/* Translated titles run different lengths per language - some wrap to one
   line, others to two. Reserving a fixed two-line block (instead of
   letting the card grow/shrink around whatever the text does) keeps every
   card in the same row the same height and its title starting at the
   same baseline, so the row reads as one deliberate grid regardless of
   which language is active - not "sometimes even, sometimes ragged." */
.feature-card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--navy-900); margin: 0 0 10px; min-height: 2.6em; display: flex; align-items: flex-start; }
.feature-card p { font-size: 14px; line-height: 1.85; color: var(--ink-500); margin: 0; }
.f-num { position: absolute; right: 22px; top: 18px; font-size: 42px; font-weight: 700; color: var(--paper-200); }

/* ---------------- Product cards ---------------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-700);
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--cyan-500); color: var(--navy-900); }
.filter-btn.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pc-media {
  height: 148px;
  background: linear-gradient(150deg, var(--paper-100), var(--paper-200));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pc-media svg { width: 56px; height: 56px; stroke: var(--navy-700); transition: transform .5s var(--ease); }
.product-card:hover .pc-media svg { transform: scale(1.12) rotate(4deg); }
.pc-condition { font-size: 12.5px; color: var(--ink-500); margin-bottom: 10px; }
.pc-condition b { color: var(--ink-700); }
.pc-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(47,150,120,.16) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.product-card:hover .pc-media::after { transform: translateX(120%); }
.pc-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--success-500); color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .03em;
}
.pc-badge.low { background: var(--gold-500); }
.pc-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.pc-brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cyan-500); text-transform: uppercase; margin-bottom: 6px; }
.pc-title { font-size: 15px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; line-height: 1.5; }
.pc-meta { font-size: 12.5px; color: var(--ink-500); margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.pc-meta b { color: var(--ink-700); }
.pc-price { font-size: 11px; color: var(--ink-500); margin-bottom: 14px; padding-top: 10px; border-top: 1px dashed var(--line-200); }
.pc-price b { display: block; font-size: 16px; font-weight: 700; color: var(--navy-900); margin-top: 2px; }
.pc-price b span { font-size: 11px; font-weight: 600; color: var(--ink-500); margin-left: 4px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.pc-stock { font-size: 12px; color: var(--ink-500); }
.pc-link { font-size: 13px; font-weight: 700; color: var(--navy-900); display: inline-flex; align-items: center; gap: 4px; }
.pc-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.product-card:hover .pc-link svg { transform: translateX(4px); }

/* ---------------- Process / timeline ---------------- */
.process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-step { text-align: center; padding: 0 18px; position: relative; }
.process-step .ps-num {
  width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 20px;
  background: #fff; border: 2px solid var(--line-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--navy-900);
  position: relative; z-index: 2;
  transition: all .4s var(--ease);
}
.process-step:hover .ps-num { background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: scale(1.08); }
.process-row::before {
  content: "";
  position: absolute; top: 31px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-200) 0 8px, transparent 8px 14px);
  z-index: 1;
}
.process-step h4 { font-size: 15.5px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; }
.process-step p { font-size: 13px; color: var(--ink-500); line-height: 1.7; margin: 0; }

.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line-200); }
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute; left: -40px; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--cyan-500);
}
.tl-year { font-size: 13px; font-weight: 700; color: var(--cyan-500); letter-spacing: .04em; margin-bottom: 6px; }
.tl-item h4 { font-size: 17px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; }
.tl-item p { font-size: 14px; color: var(--ink-500); line-height: 1.8; margin: 0; max-width: 560px; }

/* ---------------- Brand / logo strip ---------------- */
.brand-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.brand-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.brand-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.bc-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--navy-900), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
}
.bc-icon svg { width: 19px; height: 19px; stroke: #fff; }
.bc-text { min-width: 0; }
.bc-brand { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-500); margin-bottom: 2px; }
.bc-model { font-size: 14px; font-weight: 700; color: var(--navy-900); line-height: 1.3; }

/* ---------------- CTA band ---------------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 56px 50px;
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800) 60%, var(--blue-600));
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-band h3 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.cta-band p { color: #c3d3e6; margin: 0; font-size: 14.5px; max-width: 480px; }
.cta-band .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(47,150,120,.35); filter: blur(60px); top: -80px; right: 10%; pointer-events: none; z-index: 0; }
.cta-band .cta-actions { position: relative; z-index: 1; }

/* ---------------- Quality steps ---------------- */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qa-card {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.qa-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.qa-index { font-size: 13px; font-weight: 700; color: var(--cyan-500); letter-spacing: .08em; margin-bottom: 12px; }
/* Same fixed two-line reservation as .feature-card h3, for the same
   reason: qa-card titles sit in a row too and must not go ragged across
   languages. */
.qa-card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--navy-900); margin: 0 0 10px; min-height: 2.6em; display: flex; align-items: flex-start; }
.qa-card p { font-size: 13.5px; color: var(--ink-500); line-height: 1.8; margin: 0; }
.qa-card ul { margin-top: 12px; }
.qa-card ul li { font-size: 13px; color: var(--ink-700); padding-left: 18px; position: relative; margin-bottom: 6px; }
.qa-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--success-500); font-weight: 700; }

.cert-strip { display: flex; gap: 20px; flex-wrap: wrap; }
.cert-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 700; color: var(--navy-900);
  background: #fff;
  transition: all .3s var(--ease);
}
.cert-chip:hover { border-color: var(--cyan-500); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cert-chip svg { width: 20px; height: 20px; stroke: var(--cyan-500); flex-shrink: 0; }

/* ---------------- Forms ---------------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.field label .req { color: #d9534f; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line-200);
  background: var(--paper-50);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47,150,120,.14);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 12.5px; color: var(--ink-500); margin-top: 14px; line-height: 1.7; }
.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #eafaf3;
  border: 1px solid #b9e8d3;
  color: #1c7a53;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 16px;
}
.form-success.show { display: flex; }
.form-success svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------- Contact info cards ---------------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 46px; }
.info-card {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md);
  padding: 26px; text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.info-card .ic-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
  background: linear-gradient(140deg, var(--navy-900), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
}
.info-card .ic-icon svg { width: 24px; height: 24px; stroke: #fff; }
.info-card h4 { font-size: 14.5px; font-weight: 700; color: var(--navy-900); margin: 0 0 8px; }
.info-card p { font-size: 13.5px; color: var(--ink-500); margin: 0; line-height: 1.7; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 320px;
  border: 1px solid var(--line-200);
  background: linear-gradient(135deg, var(--paper-100), var(--paper-200));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.map-frame .map-pin {
  width: 46px; height: 46px; border-radius: 50% 50% 50% 0;
  background: linear-gradient(140deg, var(--cyan-500), var(--blue-600));
  transform: rotate(-45deg);
  box-shadow: var(--shadow-md);
  animation: bounce-pin 2.4s ease-in-out infinite;
}
@keyframes bounce-pin { 0%,100% { transform: rotate(-45deg) translateY(0); } 50% { transform: rotate(-45deg) translateY(-10px); } }
.map-frame .map-label {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; color: var(--navy-900);
  background: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* ---------------- Footer ---------------- */
.site-footer { background: var(--navy-950); color: #9fb3c8; }
.footer-top { padding: 70px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand .brand-text .cn { color: #fff; }
.footer-brand p { font-size: 13.5px; line-height: 1.9; color: #93a8bd; margin: 16px 0 20px; max-width: 320px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
}
.footer-social a svg { width: 17px; height: 17px; stroke: #cddcec; }
.footer-social a:hover { background: var(--cyan-500); border-color: var(--cyan-500); transform: translateY(-3px); }
.footer-col h5 { color: #fff; font-size: 14.5px; font-weight: 700; margin: 0 0 20px; letter-spacing: .02em; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { font-size: 13.5px; color: #93a8bd; transition: all .3s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.footer-col ul li a:hover { color: var(--cyan-300); padding-left: 4px; }
.footer-contact li { font-size: 13.5px; color: #93a8bd; margin-bottom: 14px; display: flex; gap: 10px; line-height: 1.6; }
.footer-contact li svg { width: 16px; height: 16px; stroke: var(--cyan-400); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #7690a8;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom a:hover { color: var(--cyan-300); }

/* ---------------- Floating widget ---------------- */
.float-widget {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.fw-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform .3s var(--ease), background .3s var(--ease);
  pointer-events: auto;
}
.fw-btn:hover { transform: scale(1.08); background: var(--cyan-500); }
.fw-btn svg { width: 22px; height: 22px; stroke: #fff; }
.fw-tooltip {
  position: absolute; right: 62px; top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--navy-900); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all .3s var(--ease);
}
.fw-btn:hover .fw-tooltip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.fw-btn.top { background: #fff; border: 1px solid var(--line-200); opacity: 0; pointer-events: none; transform: translateY(10px); }
.fw-btn.top svg { stroke: var(--navy-900); }
.fw-btn.top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------------- Mobile nav ---------------- */
.mobile-nav {
  position: fixed; inset: 0;
  background: var(--navy-950);
  z-index: 999;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  padding: 90px 30px 30px;
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav ul li { border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav ul li a { display: block; padding: 16px 4px; color: #fff; font-size: 16px; font-weight: 700; }
.mobile-nav .sub-list { padding-left: 14px; display: none; }
.mobile-nav .sub-list.open { display: block; }
.mobile-nav .sub-list li a { font-size: 14px; font-weight: 500; color: #b7c8dc; padding: 12px 4px; }
.mobile-close {
  position: absolute; top: 26px; right: 26px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.mobile-close svg { width: 18px; height: 18px; stroke: #fff; }

/* ---------------- Utility ---------------- */
.mt-0 { margin-top: 0; }
.center-text { text-align: center; }
.tag-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tag-pill {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--paper-100); color: var(--ink-700);
}

/* ---------------- Homepage AI advisor teaser ---------------- */
.advisor-teaser {
  display: flex;
  align-items: center;
  gap: 26px;
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  border-radius: var(--radius-lg);
  padding: 34px 40px;
  color: #fff;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.advisor-teaser::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 90% 20%, rgba(47,150,120,.32), transparent 60%);
}
.at-icon {
  width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(140deg, var(--cyan-500), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  animation: pulse-scale 2.6s ease-in-out infinite;
}
.at-icon svg { width: 28px; height: 28px; }
@keyframes pulse-scale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.at-body { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.at-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.at-body p { font-size: 13.5px; color: #b7c8dc; margin: 0; }
.advisor-teaser .btn { position: relative; z-index: 1; flex-shrink: 0; }

/* ---------------- Equipment 3x3 grid (advisor page) ---------------- */
.eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.eq-tile {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  position: relative;
}
.eq-tile .eq-icon {
  width: 52px; height: 52px; border-radius: 14px;
  margin: 0 auto 14px;
  background: var(--paper-100);
  display: flex; align-items: center; justify-content: center;
  transition: all .35s var(--ease);
}
.eq-tile .eq-icon svg { width: 24px; height: 24px; stroke: var(--navy-700); }
.eq-tile .eq-name { font-size: 14.5px; font-weight: 700; color: var(--navy-900); margin-bottom: 4px; }
.eq-tile .eq-sub { font-size: 11.5px; color: var(--ink-500); }
.eq-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--cyan-500); }
.eq-tile.active {
  border-color: var(--cyan-500);
  background: linear-gradient(160deg, #eef9fc, #fff);
  box-shadow: 0 0 0 3px rgba(47,150,120,.16), var(--shadow-md);
}
.eq-tile.active .eq-icon { background: linear-gradient(140deg, var(--cyan-500), var(--blue-600)); }
.eq-tile.active .eq-icon svg { stroke: #fff; }
.eq-tile.other .eq-icon { background: var(--paper-200); }
.eq-tile .eq-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cyan-500);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.4);
  transition: all .3s var(--ease);
}
.eq-tile.active .eq-check { opacity: 1; transform: scale(1); }
.eq-tile .eq-check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; }

/* ---------------- Brand logo grid ---------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.logo-card {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative;
}
.logo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.logo-card.active { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(191,157,84,.16), var(--shadow-md); }
.logo-word {
  font-size: 19px; font-weight: 700; color: var(--navy-900);
  letter-spacing: .02em; margin-bottom: 6px;
  transition: color .3s var(--ease);
}
.logo-card:hover .logo-word, .logo-card.active .logo-word { color: var(--blue-600); }
.logo-card::after {
  content: "";
  display: block;
  width: 30px; height: 3px; border-radius: 2px;
  margin: 10px auto 10px;
  background: var(--line-200);
  transition: all .3s var(--ease);
}
.logo-card:hover::after, .logo-card.active::after { width: 46px; background: linear-gradient(90deg, var(--cyan-500), var(--gold-500)); }
.logo-cn { font-size: 12px; color: var(--ink-500); }

/* ---------------- AI advisor console ---------------- */
.ai-console {
  background: linear-gradient(165deg, #122a23, #1d3f36);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.ai-console-inner {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 30px;
}
.ai-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ai-avatar {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(140deg, var(--cyan-500), var(--blue-600));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-avatar svg { width: 22px; height: 22px; stroke: #fff; }
.ai-head h4 { color: #fff; font-size: 15.5px; font-weight: 700; margin: 0 0 2px; }
.ai-head span { color: #8fa6bd; font-size: 12px; display: flex; align-items: center; gap: 6px; }

.ai-form .field label { color: #d7e4f0; }
.ai-form .field input, .ai-form .field select, .ai-form .field textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #fff;
}
.ai-form .field input::placeholder, .ai-form .field textarea::placeholder { color: #7d93aa; }
.ai-form .field input:focus, .ai-form .field select:focus, .ai-form .field textarea:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(47,150,120,.18);
}
.ai-form select option { color: #0d1b2a; }

.ai-result { margin-top: 22px; }
.ai-bubble {
  display: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.ai-bubble.show { display: block; }
.ai-bubble.in { opacity: 1; transform: translateY(0); }
.ai-bubble .ab-title { display: flex; align-items: center; gap: 8px; color: var(--cyan-300); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.ai-bubble h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ai-bubble .ab-price { font-size: 26px; font-weight: 700; color: var(--cyan-300); margin: 6px 0 14px; }
.ai-bubble .ab-price span { font-size: 13px; color: #8fa6bd; font-weight: 500; margin-left: 6px; }
.ai-bubble p.ab-note { font-size: 13.5px; line-height: 1.85; color: #c3d3e6; margin: 0 0 16px; }
.ab-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ab-chips span {
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #d7e4f0; border: 1px solid rgba(255,255,255,.12);
}
.ab-chips span.top { background: linear-gradient(120deg, var(--cyan-500), var(--blue-600)); color: #fff; border-color: transparent; }
.ab-disclaimer { font-size: 11.5px; color: #7d93aa; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; margin-top: 6px; }
.ab-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.typing-dots { display: none; align-items: center; gap: 5px; padding: 10px 0; }
.typing-dots.show { display: flex; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan-400);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }

.selected-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.selected-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #0d1b2a;
  background: #fff; padding: 7px 14px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.selected-pill b { color: var(--blue-600); }

/* ---------------- Language switcher ---------------- */
.lang-switcher { position: relative; }
.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: #fff;
  transition: all .3s var(--ease);
}
.lang-trigger:hover { border-color: var(--cyan-500); box-shadow: var(--shadow-sm); }
.lang-trigger .flag { font-size: 17px; line-height: 1; }
.lang-trigger .lang-code { font-size: 12.5px; font-weight: 700; color: var(--ink-700); letter-spacing: .03em; }
.lang-chevron { width: 12px; height: 12px; stroke: var(--ink-500); transition: transform .3s var(--ease); }
.lang-switcher:hover .lang-chevron, .lang-switcher.open .lang-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .28s var(--ease);
  z-index: 60;
  max-height: 340px;
  overflow-y: auto;
}
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-opt:hover { background: var(--paper-100); color: var(--navy-900); }
.lang-opt .flag { font-size: 18px; }
.lang-opt .lname { flex: 1; }
.lang-opt .lang-check { width: 15px; height: 15px; stroke: var(--cyan-500); opacity: 0; flex-shrink: 0; }
.lang-opt.active .lang-check { opacity: 1; }
.lang-opt.active { color: var(--navy-900); background: var(--paper-100); }

.lang-switcher.mobile { margin: 4px 0 22px; }
.lang-switcher.mobile .lang-trigger {
  width: 100%; justify-content: space-between;
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
.lang-switcher.mobile .lang-trigger .lang-code { color: #fff; }
.lang-switcher.mobile .lang-chevron { stroke: #fff; }
.lang-switcher.mobile .lang-menu {
  position: static;
  opacity: 1; visibility: visible; transform: none;
  display: none;
  margin-top: 8px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  max-height: none;
}
.lang-switcher.mobile.open .lang-menu { display: block; }
.lang-switcher.mobile .lang-opt { color: #cddcec; }
.lang-switcher.mobile .lang-opt:hover, .lang-switcher.mobile .lang-opt.active { background: rgba(255,255,255,.08); color: #fff; }

/* ---------------- Currency switcher ---------------- */
.currency-switcher { position: relative; }
.cur-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: #fff;
  transition: all .3s var(--ease);
}
.cur-trigger:hover { border-color: var(--cyan-500); box-shadow: var(--shadow-sm); }
.cur-trigger .cur-symbol { font-size: 14px; font-weight: 700; color: var(--ink-700); }
.cur-trigger .cur-code { font-size: 12.5px; font-weight: 700; color: var(--ink-700); letter-spacing: .03em; }
.cur-chevron { width: 12px; height: 12px; stroke: var(--ink-500); transition: transform .3s var(--ease); }
.currency-switcher:hover .cur-chevron, .currency-switcher.open .cur-chevron { transform: rotate(180deg); }
.cur-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .28s var(--ease);
  z-index: 60;
}
.currency-switcher.open .cur-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.cur-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: none;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cur-opt:hover { background: var(--paper-100); color: var(--navy-900); }
.cur-opt .cur-opt-symbol { font-size: 13px; font-weight: 700; min-width: 30px; flex-shrink: 0; color: var(--cyan-500); }
.cur-opt .cur-name { flex: 1; }
.cur-opt .cur-check { width: 15px; height: 15px; stroke: var(--cyan-500); opacity: 0; flex-shrink: 0; }
.cur-opt.active .cur-check { opacity: 1; }
.cur-opt.active { color: var(--navy-900); background: var(--paper-100); }

.currency-switcher.mobile { margin: 4px 0 22px; }
.currency-switcher.mobile .cur-trigger {
  width: 100%; justify-content: space-between;
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
.currency-switcher.mobile .cur-trigger .cur-code, .currency-switcher.mobile .cur-trigger .cur-symbol { color: #fff; }
.currency-switcher.mobile .cur-chevron { stroke: #fff; }
.currency-switcher.mobile .cur-menu {
  position: static;
  opacity: 1; visibility: visible; transform: none;
  display: none;
  margin-top: 8px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.currency-switcher.mobile.open .cur-menu { display: block; }
.currency-switcher.mobile .cur-opt { color: #cddcec; }
.currency-switcher.mobile .cur-opt:hover, .currency-switcher.mobile .cur-opt.active { background: rgba(255,255,255,.08); color: #fff; }

/* ---------------- Full Parts Catalog (search/filter table) ---------------- */
.parts-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.parts-search {
  flex: 1 1 320px;
  position: relative;
  display: flex;
  align-items: center;
}
.parts-search svg { position: absolute; left: 16px; width: 17px; height: 17px; stroke: var(--ink-500); pointer-events: none; }
.parts-search input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border-radius: 999px;
  border: 1px solid var(--line-200);
  background: var(--paper-50);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.parts-search input:focus {
  outline: none;
  border-color: var(--cyan-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47,150,120,.14);
}
.parts-filter { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.parts-filter label { font-size: 12px; font-weight: 700; color: var(--ink-500); letter-spacing: .04em; text-transform: uppercase; }
.parts-filter select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-200);
  background: #fff;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--navy-900);
}
.parts-count { font-size: 13.5px; color: var(--ink-500); margin-bottom: 14px; }
.parts-table-wrap {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.parts-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.parts-table thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--paper-50);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-200);
  white-space: nowrap;
}
.parts-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--paper-100);
  font-size: 13.5px;
  color: var(--ink-700);
  vertical-align: top;
}
.parts-table tbody tr:last-child td { border-bottom: none; }
.parts-table tbody tr:hover { background: var(--paper-50); }
.pt-name-main { font-weight: 700; color: var(--navy-900); font-size: 14px; }
.pt-name-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.pt-sub { font-size: 12px; color: var(--ink-500); }
.pt-cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--paper-100);
  color: var(--blue-600);
  white-space: nowrap;
}
.pt-price { font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.parts-noresults { padding: 60px 20px; text-align: center; color: var(--ink-500); font-size: 14px; }
.parts-loadmore-wrap { display: flex; justify-content: center; margin-top: 26px; }
.parts-disclaimer { font-size: 12.5px; color: var(--ink-500); line-height: 1.7; margin-top: 20px; text-align: center; }

/* ---------------- RTL (Arabic) support ---------------- */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .eyebrow::before { order: 2; }
html[dir="rtl"] .topbar-left, html[dir="rtl"] .topbar-right,
html[dir="rtl"] .nav-cta, html[dir="rtl"] .hero-actions, html[dir="rtl"] .hero-trust,
html[dir="rtl"] .cta-actions, html[dir="rtl"] .ab-actions, html[dir="rtl"] .footer-social,
html[dir="rtl"] .tag-list, html[dir="rtl"] .cert-strip, html[dir="rtl"] .brand-chip,
html[dir="rtl"] .ab-chips, html[dir="rtl"] .selected-pills { flex-direction: row-reverse; }
html[dir="rtl"] .main-nav a.nav-link::after { left: auto; right: 16px; }
html[dir="rtl"] .dropdown, html[dir="rtl"] .lang-menu, html[dir="rtl"] .cur-menu { left: 0; right: auto; }
html[dir="rtl"] .breadcrumb, html[dir="rtl"] .footer-contact li, html[dir="rtl"] .cert-chip,
html[dir="rtl"] .info-card .ic-icon, html[dir="rtl"] .pc-foot, html[dir="rtl"] .hc-top {
  flex-direction: row-reverse;
}
html[dir="rtl"] .float-widget { right: auto; left: 26px; align-items: flex-start; }
html[dir="rtl"] .fw-tooltip { right: auto; left: 62px; transform: translateY(-50%) translateX(-6px); }
html[dir="rtl"] .fw-btn:hover .fw-tooltip { transform: translateY(-50%) translateX(0); }
html[dir="rtl"] .f-num { right: auto; left: 22px; }
html[dir="rtl"] .timeline { padding-left: 0; padding-right: 40px; }
html[dir="rtl"] .timeline::before { left: auto; right: 8px; }
html[dir="rtl"] .tl-item::before { left: auto; right: -40px; }
html[dir="rtl"] .breadcrumb a { margin-left: 4px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 150px; }
  .hero-visual { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(3) { border-left: none; }
  .grid-4, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .process-row { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .process-row::before { display: none; }
}

/* ====================================================================
   MOBILE MODE — a deliberately distinct, simplified visual treatment
   for phones (≤860px = collapsed nav, ≤560px = portrait phone tuning).
   Desktop decorative flourishes that only make sense next to the
   hero-visual column (orbit rings, floating glow dots) are removed
   rather than scaled down, and dense multi-column grids collapse to
   a single readable column instead of squeezing.
   ==================================================================== */
@media (max-width: 860px) {
  .topbar { display: none; }
  .main-nav { display: none; }
  .burger { display: flex; }
  .nav-cta > a.btn { display: none; }
  .nav-row { height: 64px; }
  .site-header.scrolled .nav-row { height: 64px; }
  .brand-mark { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
  .brand-text .cn { font-size: 15px; }
  .brand-text .en { display: none; }
  /* The sticky header already reserves its own space in normal flow
     (it is not fixed/absolute), so the hero doesn't need extra top
     padding to avoid being covered — the old 104px was dead space
     left over from a desktop-oriented value, and is the main cause
     of the large empty gap reported above the mobile hero. */
  /* Bottom padding is deliberately generous (not just "some spacing") -
     it is the dark hero's own closing margin, giving the trust-stat card
     real air beneath it before the section boundary, so the next (white)
     section reads as a clean new block instead of butting up against it. */
  /* Forcing the hero to exactly fill the viewport (tried two rounds ago)
     was the actual mistake: this page's hero content is short, so a
     forced 100vh box left a large dead gap no matter how it was
     anchored - top, center, or split top/bottom, it still read as
     empty rather than designed. Filling that gap with an unrelated
     product card (tried last round) was also wrong - it read as
     bolted-on rather than composed, because it had no real connection
     to the headline above it. The real fix is neither padding tricks
     nor filler content: give the headline and lead itself real
     typographic weight (see the larger font-size below) so the top
     zone carries its own visual presence, then let the hero's height
     be whatever that content plus generous - not stretched - padding
     actually needs. */
  /* Forcing a tall vh/svh box (tried in the previous two rounds) was
     the actual mistake, again: this hero's real content (title, lead,
     button, stats) is short, so ANY forced height taller than that
     content leaves a dead, empty gap in the middle no matter how it's
     anchored - the ambient glow softens that gap visually but does not
     remove it. The fix is to let the hero be exactly as tall as its
     content plus modest, fixed padding - not a percentage of the
     screen - so there is no leftover empty space to fill in the first
     place. */
  .hero { align-items: flex-start; min-height: 0; }
  .hero-inner { padding-top: 56px; padding-bottom: 40px; }
  .hero-copy { display: flex; flex-direction: column; }

  .hero h1 { font-size: 38px; line-height: 1.22; font-weight: 500; margin-bottom: 16px; }
  .hero h1 .accent { font-size: 27px; font-weight: 500; display: inline-block; margin-top: 8px; }
  .hero p.lead { font-size: 14.5px; line-height: 1.75; margin-bottom: 22px; }

  /* Two soft, oversized ambient blurs (not the small hard floating dots
     used on desktop) fill the gap between the CTA and the trust stats -
     this is the piece that was missing before: without it the extra
     room reads as empty; with it, it reads as a deliberately spacious,
     premium dark section, matching the reference mockup's atmosphere. */
  /* Sized well past what's visible and faded out gradually (transparent
     at 80%+) rather than 60-65%, so what's on screen is only ever the
     soft falloff of the gradient - never a perceptible circular edge.
     A blur filter on top removes the last trace of "pasted-on sticker"
     look, so it reads as ambient light instead of a decorative shape. */
  .hero::before, .hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(30px);
  }
  /* Positioned low and to the sides, well clear of both the button
     above and the stats row below - the previous version placed the
     gold blob directly behind the stats text, tinting the white
     numbers an off, muddy amber. */
  .hero::before { width: 360px; height: 360px; top: 140px; right: -160px; background: radial-gradient(circle, rgba(90,200,165,.4), transparent 80%); }
  .hero::after { width: 300px; height: 300px; bottom: -120px; left: -120px; background: radial-gradient(circle, rgba(214,180,105,.28), transparent 80%); }

  .hero-trust { margin-top: 36px; padding-top: 20px; }

  .page-hero { padding-top: 28px; }
  .grid-3, .qa-grid, .info-grid, .form-row, .grid-2 { grid-template-columns: 1fr; }
  .grid-4, .product-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; padding-bottom: 20px; }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-strip { grid-template-columns: repeat(2, 1fr); }
  .advisor-teaser { flex-direction: column; align-items: flex-start; }
  .parts-search { flex: 1 1 100%; }
  .parts-filter { flex: 1 1 45%; min-width: 0; }

  /* On mobile the visible top-right control is language (the more
     frequently needed switch); currency stays one tap away inside
     the menu drawer instead of crowding the header. */
  .nav-cta > .currency-switcher:not(.mobile) { display: none; }

  /* The floating action buttons (call/email/chat) are fixed to the
     bottom-right of the viewport. On mobile the hero + stats block is
     tall enough that this fixed position often lands directly on top
     of the stat numbers on first load, blocking them - so the call/
     email/chat buttons (everything except "back to top") stay hidden
     until the user has scrolled past the hero, matching the same
     scroll threshold main.js already uses for the back-to-top button. */
  .float-widget .fw-btn:not(.top) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .float-widget.fab-visible .fw-btn:not(.top) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Decorative hero elements are tuned for the two-column desktop hero;
     once the visual column is hidden they float loose over the copy
     and read as visual noise, so remove them on mobile instead. */
  .hero-orbit, .hero-glow { display: none; }
  .hero-grid { opacity: .85; }

  /* ---- Real simplification, not just re-spacing ----
     Feedback was specific: the hero itself has too many competing
     elements (badge + heading + lead + two buttons + a boxed stat card)
     stacked on top of each other, and it reads as crowded no matter how
     the gaps between them are tuned. The fix is to remove elements, not
     pad them further apart:
       1. The eyebrow badge is dropped on mobile - it's a decorative
          label, the heading already carries the same message.
       2. Only ONE call-to-action survives in the hero. "Get a Quote"
          is not gone from the site - it already lives in the bottom
          "Can't find the part you need?" band further down the page -
          it is just not fighting for attention in the first screen.
       3. The stat numbers drop their boxed/bordered "card" treatment
          entirely and become two plain inline numbers under a hairline
          divider - information kept, but no longer another visually
          heavy block competing with the hero text above it. */
  .hero-badge { display: none; }
  .hero-actions .btn-ghost { display: none; }

  .hero-actions { margin-bottom: 26px; }
  .hero-actions .btn { width: 100%; padding: 15px 24px; }

  .hero-trust {
    display: flex;
    gap: 36px;
    border-top: 1px solid rgba(255,255,255,.14);
    background: none;
    border-left: none; border-right: none; border-bottom: none;
    border-radius: 0;
  }
  .hero-trust div { flex-direction: column; }
  .hero-trust b { font-size: 24px; }

  /* Only the two stats that answer what a time-pressed engineer actually
     asks first - "do you stock it" / "how fast can I get it" - the other
     two (countries served, QC pass rate) still appear later on the page
     and on About/Quality, so nothing is lost, it's just not competing
     for attention in the first three seconds on mobile. */
  .hero-trust > div:nth-child(2),
  .hero-trust > div:nth-child(4) { display: none; }

  /* The section right after the hero needs more separation than deeper
     sections, since it follows a visually dense dark block - too little
     top padding here reads as crowded even though padding further down
     the page can be tighter without the same effect. Combined with the
     hero's own bottom padding above, this is a real gap (not a hairline
     one) so "Why Choose Us" reads as its own section instead of sitting
     glued to the hero. */
  .hero + .pad { padding-top: 80px; }
  .pad { padding: 64px 0; }
  .pad-sm { padding: 44px 0; }
  .section-head { margin-bottom: 32px; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 18px; }
  .form-card { padding: 26px 20px; }
  .cta-band { padding: 40px 26px; }
  .eq-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid { grid-template-columns: 1fr 1fr; }
  .brand-strip { grid-template-columns: 1fr; }
  .ai-console-inner { padding: 20px; }
  .brand-text .cn { font-size: 13.5px; max-width: 140px; }
  .hero-trust b { font-size: 22px; }
  .cta-band h3 { font-size: 21px; }
  .process-row { grid-template-columns: 1fr 1fr; }
  .hero-badge { font-size: 11.5px; padding: 6px 13px; margin-bottom: 14px; }
  .hero h1 { font-size: 27px; margin-bottom: 12px; }
  .hero h1 .accent { font-size: 21px; }
  .hero p.lead { font-size: 14px; margin-bottom: 18px; }
  .section-title { font-size: 24px; }
  .page-hero { padding: 24px 0 50px; }
  .page-hero h1 { font-size: 26px; }
  .parts-filter { flex: 1 1 100%; }
  .hero + .pad { padding-top: 60px; }
  .pad { padding: 52px 0; }
  .pad-sm { padding: 36px 0; }
  .section-head { margin-bottom: 28px; }
  .hero-trust { gap: 14px; }
  /* The 140px cap here was too tight for the full company name at this
     font size - it forced "Shanghai Yulin Me..." to truncate with an
     ellipsis in the header on narrow phones, which reads as broken/
     unfinished rather than deliberate. There is enough room in the nav
     row (brand can flex-shrink, the language pill and burger button are
     already compact) to show the full name instead. */
  .brand-text .cn { max-width: 210px; }
}