/* HK MILLIONSMOOTH — corporate site stylesheet */

:root {
  --ink: #0b1b33;
  --ink-2: #142844;
  --ink-3: #1d3557;
  --accent: #c8a24a;
  --accent-soft: #f3e9d2;
  --blue: #1e6fd9;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --line: #e3e8ef;
  --text: #1b2430;
  --muted: #5c6b7f;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 27, 51, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 27, 51, 0.14);
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 14px; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

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

.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-size: 0.98rem;
  white-space: nowrap;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand { transition: opacity .18s ease; }
.brand:hover { opacity: .88; }
.brand-logo {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 1px 6px rgba(11, 27, 51, 0.16), 0 0 0 1px rgba(11, 27, 51, 0.06);
  background: #fff;
  transition: transform .18s ease;
}
.brand:hover .brand-logo { transform: scale(1.05); }
.brand small { display: block; font-size: 0.66rem; letter-spacing: 0.18em; color: var(--muted); font-weight: 500; }

/* Scrolled header elevation */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 8px 22px rgba(11, 27, 51, .09); }

/* Image zoom on hover for clickable cards */
.news-media, .product-media { overflow: hidden; }
.news-media img, .product-media img { transition: transform .35s ease; }
a.news-card:hover .news-media img,
.product-card:hover .product-media img,
.product-card-wrap:hover .product-media img { transform: scale(1.045); }

/* Keyboard focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1e6fd9; outline-offset: 2px; border-radius: 4px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .news-media img, .product-media img { transition: none; }
}

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { text-decoration: none; color: var(--ink); }
.nav a.active {
  color: var(--ink); font-weight: 600;
  border-bottom: none;
  background: linear-gradient(90deg, #1440a8, #35b9f1) bottom left / 100% 2px no-repeat;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Medium widths: compress the nav so long labels (EN/ES) never crowd the brand */
@media (min-width: 701px) and (max-width: 1320px) {
  .site-header .wrap { gap: 16px; }
  .nav { gap: 15px; }
  .nav a { font-size: .87rem; }
  .brand { font-size: .9rem; }
}
@media (min-width: 701px) and (max-width: 1120px) {
  .nav { gap: 10px; }
  .nav a { font-size: .82rem; }
  .brand span small { display: none; }
  .header-actions { gap: 6px; }
  .btn-sm { padding: 8px 12px; font-size: .8rem; }
}

.lang-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-switch button {
  border: 0;
  background: transparent;
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s ease, background .15s ease;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active { background: linear-gradient(135deg, #1440a8 10%, #0b1b33 90%); color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 8px 18px rgba(11,27,51,.18); }
.btn-primary:hover { background: var(--ink-2); }
.btn-accent { background: var(--accent); color: #22190a; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 7px 15px; font-size: .82rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  color: #fff;
  padding: 96px 0 88px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(11,27,51,.94) 0%, rgba(20,40,68,.86) 55%, rgba(29,53,87,.72) 100%),
              url('../img/hero-port.jpg') center 42% / cover no-repeat;
}
/* Pages where the port image would compete with the copy use the plain navy gradient. */
.hero.plain {
  background: radial-gradient(1200px 600px at 78% -10%, #24406b 0%, rgba(36,64,107,0) 60%),
              linear-gradient(135deg, #0b1b33 0%, #142844 55%, #1d3557 100%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -140px; bottom: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(200,162,74,.28);
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: 1.06rem; color: rgba(255,255,255,.82); max-width: 46ch; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.badge {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .78rem;
  color: rgba(255,255,255,.85);
}
.hero-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 26px;
  backdrop-filter: blur(6px);
}
.hero-card h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; letter-spacing: .02em; }
.hero-card ul { list-style: none; margin: 0; padding: 0; }
.hero-card li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.14);
  font-size: .88rem; color: rgba(255,255,255,.86);
}
.hero-card li:last-child { border-bottom: 0; }
.hero-card li b { color: var(--accent); font-weight: 700; }

/* ---------- stats ---------- */
.stats { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 12px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 1.85rem; color: var(--ink); line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--muted); }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section.soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.section-head p { color: var(--muted); font-size: 1rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* A grid item's default min-width:auto lets wide tables and strips blow the column
   out on narrow screens. Zero it so the table scrolls inside its own wrapper. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .model-grid > * { min-width: 0; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d3dae4; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .92rem; margin-bottom: 0; }
.card .kicker {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 10px;
}

.product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-media {
  height: 168px;
  background: linear-gradient(135deg, #eef2f7 0%, #dfe6ef 100%);
  display: grid; place-items: center;
  color: var(--ink-3);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.product-media { background: var(--bg-soft); }
.product-media img { width: 100%; height: 100%; object-fit: contain; }
.product-body { padding: 20px 22px 24px; }
.product-body h3 { margin-bottom: 6px; }
.product-body p { font-size: .9rem; }

/* model cards: wrap so brand/market filter attrs + a quote button sit outside the detail link */
.product-card-wrap { display: flex; flex-direction: column; }
.product-card-wrap .product-card { flex: 1; }
.pc-actions { padding: 0 22px 20px; }
.pc-actions .btn { width: 100%; }
.pc-ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--accent, #c8102e); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.price-block { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.price-row { display: flex; align-items: baseline; gap: 6px; font-size: .9rem; margin: 4px 0; flex-wrap: wrap; }
.price-label { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.price-value { font-weight: 700; color: var(--ink); }
.price-note { color: var(--muted); font-size: .72rem; font-style: italic; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { display: inline-block; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 700; }

.steps { counter-reset: step; }
.step { position: relative; padding-left: 58px; margin-bottom: 26px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
}
.step h3 { margin-bottom: 4px; }
.step p { color: var(--muted); font-size: .93rem; }

.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--muted); font-size: .93rem; }
.list-check li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.spec { width: 100%; border-collapse: collapse; background: #fff; font-size: .92rem; min-width: 620px; }
table.spec th, table.spec td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.spec th { background: var(--bg-soft); color: var(--ink); font-weight: 650; }
table.spec tr:last-child td { border-bottom: 0; }

/* ---------- contact ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: .93rem;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,111,217,.12);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: 10px; }
/* Anti-spam honeypot: kept off-screen (not display:none, which some bots detect and skip). */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-top: 14px; display: none; }
.alert.show { display: block; }
.alert.ok { background: #eaf6ee; border: 1px solid #bfe3cb; color: #1d6b39; }
.alert.err { background: #fdeeee; border: 1px solid #f3c7c7; color: #a03232; }

.contact-info .info-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.contact-info .info-row:last-child { border-bottom: 0; }
.contact-info .info-row b { color: var(--ink); min-width: 92px; }

/* ---------- cta band ---------- */
.band {
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff;
  padding: 62px 0;
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.8); margin-bottom: 26px; }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer { background: #08142a; color: rgba(255,255,255,.66); padding: 56px 0 26px; font-size: .88rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; font-size: .92rem; margin-bottom: 14px; letter-spacing: .04em; }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-bottom {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.5);
}

/* ICP / 公安联网备案 */
.footer-beian {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 26px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.footer-beian a {
  color: rgba(255,255,255,.6); display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.footer-beian a:hover { color: #fff; }
.footer-beian img { display: inline-block; }

/* ---------- AI assistant ---------- */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 70%, var(--accent) 150%);
  color: #fff; font-size: 1.25rem;
  box-shadow: var(--shadow-lg);
  display: grid; place-items: center;
}
.ai-fab:hover { transform: scale(1.04); }
.ai-fab .dot {
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #37d67a; border: 2px solid #fff;
}
.ai-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 81;
  width: min(400px, calc(100vw - 44px));
  height: min(560px, calc(100vh - 130px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ai-panel.open { display: flex; }
.ai-head {
  padding: 14px 16px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ai-head b { font-size: .95rem; font-weight: 650; }
.ai-head small { display: block; font-size: .74rem; color: rgba(255,255,255,.65); font-weight: 400; }
.ai-head button { background: transparent; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.ai-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-soft); }
.ai-msg { margin-bottom: 12px; max-width: 88%; }
.ai-msg.bot { margin-right: auto; }
.ai-msg.me { margin-left: auto; text-align: right; }
.ai-bubble {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg.bot .ai-bubble { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; color: var(--text); }
.ai-msg.me .ai-bubble { background: var(--ink); color: #fff; border-top-right-radius: 4px; }
.ai-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px; background: var(--bg-soft); }
.ai-quick button {
  font-family: inherit; font-size: .78rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.ai-quick button:hover { border-color: var(--ink); }
.ai-foot { border-top: 1px solid var(--line); padding: 12px; display: flex; gap: 8px; background: #fff; }
.ai-foot input {
  flex: 1; font-family: inherit; font-size: .9rem;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none;
}
.ai-foot input:focus { border-color: var(--blue); }
.ai-foot button { border: 0; border-radius: 10px; background: var(--ink); color: #fff; padding: 0 16px; cursor: pointer; font-weight: 600; }
.ai-foot button:disabled { opacity: .5; }
.ai-typing { font-size: .8rem; color: var(--muted); padding: 4px 2px; }

/* ---------- admin ---------- */
.admin-shell { max-width: 1080px; margin: 0 auto; padding: 34px 24px 80px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.panel h3 { margin-bottom: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.kpi b { display: block; font-size: 1.5rem; color: var(--ink); }
.kpi span { font-size: .78rem; color: var(--muted); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { background: var(--bg-soft); color: var(--ink); }
.admin-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.input-inline { font-family: inherit; font-size: .9rem; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; min-width: 200px; }
.log-box { background: #0b1b33; color: #cfe0f5; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; padding: 14px; border-radius: 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ≤960px: switch to the burger menu — long nav labels (EN/ES) cannot fit */
@media (max-width: 960px) {
  .nav { display: none; }
  .nav.mobile-open {
    display: flex; flex-direction: column; gap: 10px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 16px 24px; box-shadow: var(--shadow);
    animation: navIn .18s ease; z-index: 60;
  }
  .burger { display: grid !important; }
  .header-actions .btn { display: none; }
}

@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 14px; }
  .site-header .wrap { gap: 12px; }
  .brand { font-size: 0.88rem; gap: 8px; }
  .brand-logo { width: 34px; height: 34px; }
  .lang-switch button { padding: 5px 9px; font-size: 0.72rem; }
  .header-actions { gap: 6px; }
  .burger { width: 34px; height: 34px; }
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .footer-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
}
.burger {
  display: none;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  place-items: center; margin-left: auto;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--ink); margin: 2px 0; transition: transform .2s ease, opacity .18s ease; }
.burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
@keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav.mobile-open a { padding: 9px 0; border-bottom: 1px solid var(--line); }
.nav.mobile-open a:last-child { border-bottom: 0; }
@media (max-width: 700px) {
  .nav.mobile-open { top: 62px; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .burger span { transition: none; }
}

/* ---------- model detail ---------- */
.model-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 46px 0 54px; }
.model-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.model-media { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); min-height: 260px; display: grid; place-items: center; }
.model-media img { width: 100%; height: 100%; object-fit: cover; }
/* The hero is a centred grid item, so the gallery would otherwise take its
   min-content width from the thumbnail strip instead of filling the column. */
.model-media > * { width: 100%; min-width: 0; }
.model-ph { padding: 60px 20px; color: var(--muted); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.lead-muted { color: var(--muted); font-size: 1.02rem; }
a.card { color: inherit; display: flex; }
a.card:hover { text-decoration: none; }
.card-link { display: inline-block; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--ink); }
@media (max-width: 980px) { .model-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- content editor form ---------- */
.ce-field { display: block; margin: 0 0 14px; }
.ce-field > span {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.ce-field > span em { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ce-input { display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: .92rem; }
.ce-json { font-family: Consolas, Menlo, monospace; font-size: .8rem; line-height: 1.5; }
.ce-group {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 4px; margin: 0 0 16px;
}
.ce-group legend {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); padding: 0 6px;
}

/* ---------- growth timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 74px; top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}
.milestone {
  display: grid; grid-template-columns: 74px 1fr; gap: 24px;
  padding: 0 0 26px; position: relative;
}
.milestone-year {
  font-weight: 700; color: var(--accent); font-size: .95rem;
  padding-top: 2px; letter-spacing: .02em;
}
.milestone > div:last-child { position: relative; }
.milestone h3 { font-size: 1rem; margin-bottom: 4px; }
.milestone p { color: var(--muted); font-size: .92rem; margin: 0; }
@media (max-width: 700px) {
  .timeline::before { left: 6px; }
  .milestone { grid-template-columns: 34px 1fr; gap: 14px; }
  .milestone-year { font-size: .82rem; }
}

/* ---------- placeholder tile for models without a photo yet ---------- */
.ph-media {
  width: 100%; height: 100%; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #0b1b33 0%, #1d3557 100%);
  color: rgba(255,255,255,.92);
}
.ph-media span {
  font-size: 1.5rem; font-weight: 700; letter-spacing: .14em;
  color: var(--accent);
}
.ph-media small {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.ph-media-lg { min-height: 300px; }
.ph-media-lg span { font-size: 2.6rem; }

/* ---------- model photo gallery (real dealer photos) ---------- */
.model-gallery { width: 100%; min-width: 0; }
.model-gallery .mg-main {
  display: block; width: 100%; max-height: 460px; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 14px; background: #f1f3f6;
}
.model-gallery .mg-thumbs {
  display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px;
}
.model-gallery .mg-thumb {
  flex: 0 0 auto; width: 76px; height: 52px; padding: 0; border: 2px solid transparent;
  border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; line-height: 0;
}
.model-gallery .mg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-gallery .mg-thumb.active { border-color: var(--accent); }
.model-gallery .mg-thumb:hover { border-color: rgba(200,162,74,.6); }
.pm-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- editorial image band ---------- */
.figure-band { position: relative; overflow: hidden; background: var(--bg-soft); }
.figure-band img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.video-band { background: #0b1b33; }
.brand-video { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.video-mute {
  position: absolute; right: 18px; bottom: 18px;
  border-color: rgba(255,255,255,.5); color: #fff; background: rgba(11,27,51,.45);
  backdrop-filter: blur(6px);
}

/* ---------- insights / news ---------- */
.news-card { display: flex; flex-direction: column; }
.news-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.news-meta { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
.news-meta .tag {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-weight: 600; color: var(--ink);
}
.news-body h3 { font-size: 1.02rem; line-height: 1.4; }
.article p { margin: 0 0 14px; line-height: 1.75; color: var(--muted); }

/* News detail image wall — supports article charts/figures via item.gallery */
.news-gallery { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin:22px 0; }
.news-gallery-item { margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.news-gallery-item img { width:100%; display:block; }
.news-gallery-item figcaption { padding:8px 12px; font-size:13px; color:var(--muted); }
@media (max-width:600px){ .news-gallery { grid-template-columns:1fr; } }

/* ---------- evolution hint ---------- */
.evolve-hint {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: .84rem;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted);
}
.evolve-hint.due {
  border-color: var(--accent); background: #fdf7e8; color: #7a5b12; font-weight: 600;
}
.evolve-hint b { color: inherit; }

/* ---------- long spec tables & brand filter ---------- */
.spec-extra { display: none; }
.spec-extra.open { display: table-row; }
.brand-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cat-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cat-filter .filter-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.cat-filter .chip { background: linear-gradient(135deg, #0b1b33, #1d3a66); color: #fff; border-color: transparent; }
.cat-filter .chip.active { background: #c8a24a; color: #22190a; }
.cat-empty { display: grid; place-items: center; gap: 14px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 44px 24px; text-align: center; color: var(--muted); margin-top: 8px; }
.cat-empty p { margin: 0; max-width: 48ch; }
.market-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.market-filter .filter-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .15s ease; font-family: inherit;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.chip-static { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 600; }

/* ---------- testimonials + export guide ---------- */
.testimonial { padding: 24px 22px; }
.testimonial blockquote { margin: 0 0 14px; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.testimonial figcaption { font-size: .85rem; color: var(--muted); }
.testimonial figcaption b { color: var(--ink); display: block; }
.testimonial-cta { max-width: 560px; margin: 0 auto; padding: 28px 26px; text-align: center; }
.testimonial-cta p { color: var(--muted); margin-bottom: 16px; }
.guide-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
.guide-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.guide-step h3 { margin-bottom: 8px; font-size: 1.05rem; }
.guide-step p { color: var(--muted); line-height: 1.7; font-size: .92rem; }
.market-card { padding: 22px; }
.market-card h4 { margin-bottom: 8px; }
.market-card p { color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .guide-steps { grid-template-columns: 1fr; } }

/* ---------- floating conversion layer ---------- */
.wa-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 79;
  height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff; text-decoration: none;
  font-weight: 700; font-size: .88rem;
  box-shadow: var(--shadow-lg); transition: transform .15s ease;
}
.wa-fab:hover { transform: translateY(-2px); color: #fff; }
.wa-fab svg { flex: none; }
.totop {
  position: fixed; left: 22px; bottom: 82px; z-index: 79;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.totop.show { opacity: 1; pointer-events: auto; }
.totop:hover { border-color: var(--accent); color: var(--accent); }

/* Mobile sticky action bar: WhatsApp / quote / AI advisor */
.mobar { display: none; }
@media (max-width: 700px) {
  .wa-fab, .totop { display: none; }
  body { padding-bottom: 64px; }
  .ai-fab { bottom: 76px; }
  .ai-panel { bottom: 140px; height: min(480px, calc(100vh - 210px)); }
  .mobar {
    display: flex; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 78;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(11,27,51,.1);
  }
  .mobar-btn {
    flex: 1; min-height: 44px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-family: inherit; font-size: .82rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none; cursor: pointer; padding: 0 8px;
  }
  .mobar-btn.primary { background: #25d366; border-color: #25d366; color: #fff; }
  .mobar-btn svg { flex: none; }
}

/* Model shortcuts appended under an advisor answer */
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ai-link {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: .82rem; font-weight: 700;
}
.ai-link:hover { background: var(--ink-3); color: #fff; }
.ai-link.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ai-link.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- console: inquiry triage ---------- */
.kpi-accent { border-color: var(--accent); background: #fdf7e8; }
.kpi-accent b { color: #8a6414; }
.wa-link { color: #1a9e4b; font-weight: 700; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }
.lead-status, .lead-note {
  display: block; width: 100%; margin-bottom: 6px; font-size: .82rem;
}
.lead-save { width: 100%; }

/* Model page share row */
.model-share { margin-top: 12px; gap: 8px; }

/* ---------- print: turn a model page into a clean spec sheet PDF ---------- */
@media print {
  .site-header, .site-footer, .ai-fab, .ai-panel, .float-layer, .mobar,
  .wa-fab, .totop, .band, .news-card, .btn, .hero-cta, .hero-badges { display: none !important; }
  body { background: #fff; padding: 0; }
  .wrap { max-width: 100%; }
  .model-hero { background: #fff !important; color: #000; padding: 16px 0; }
  .model-hero h1 { font-size: 22pt; }
  .eyebrow, .lead-muted { color: #333 !important; }
  .section { padding: 12px 0; }
  .card, .table-wrap { border: 1px solid #ccc; break-inside: avoid; }
  .spec-extra { display: table-row !important; }
  #spec-toggle { display: none !important; }
  .grid-2, .grid-3, .model-grid { grid-template-columns: 1fr !important; }
  a[href]:after { content: ""; }
  .ph-media, .ph-media-lg { border: 1px solid #ccc; }
}

/* ---------- compare tool ---------- */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cmp-card {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.cmp-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.cmp-card input[data-cmp] { width: 18px; height: 18px; accent-color: var(--accent); }
.cmp-card .product-media { min-height: 120px; }
.cmp-card-body .kicker { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmp-card-body h4 { font-size: 1rem; margin: 2px 0; }
.cmp-card-body p { font-size: .82rem; color: var(--muted); margin: 0; }
.cmp-table { margin-top: 34px; overflow-x: auto; }
.cmp-table table.spec { min-width: 520px; }
.cmp-table th:first-child, .cmp-table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.cmp-cta { margin-top: 22px; }
.cmp-empty { margin-top: 22px; }
@media (max-width: 700px) {
  .cmp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- model FAQ block ---------- */
.faq-item { border-top: 1px solid var(--line); padding: 16px 0; }
.faq-item:first-of-type { border-top: 0; }
.faq-item h3 { font-size: 1.02rem; margin: 0 0 6px; }
.faq-item p { margin: 0; color: var(--muted); }

/* FAQ accordion: JS rewrites each item to a question button + answer panel.
   Desktop keeps every answer open (better scanning, and the text stays visible to
   crawlers); narrow screens collapse to a compact accordion. */
.faq-item .faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: 0; padding: 0; text-align: left; cursor: default;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.faq-item .faq-chev {
  flex: none; width: 9px; height: 9px; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg);
  transition: transform .22s ease; opacity: 0;
}
body.faq-collapsible .faq-item { padding: 4px 0; }
body.faq-collapsible .faq-item .faq-q { cursor: pointer; padding: 14px 0; }
body.faq-collapsible .faq-item .faq-q:hover { color: var(--accent); }
body.faq-collapsible .faq-item .faq-chev { opacity: 1; }
body.faq-collapsible .faq-item.open .faq-chev { transform: rotate(-135deg); }
body.faq-collapsible .faq-a { display: none; padding: 0 0 14px; }
body.faq-collapsible .faq-item.open .faq-a { display: block; }
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-chev { transition: none; }
}

/* ---------- photo lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  background: rgba(7, 15, 28, .92); padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox .lb-img {
  max-width: min(1100px, 100%); max-height: 88vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); background: #0b1b33;
}
.lightbox .lb-close, .lightbox .lb-nav {
  position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0;
  border-radius: 50%; cursor: pointer; line-height: 1; font-size: 1.6rem;
  display: grid; place-items: center; transition: background .15s ease;
}
.lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox .lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
.lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; display: none; }
.lightbox.multi .lb-nav { display: grid; }
.lightbox .lb-prev { left: 16px; }
.lightbox .lb-next { right: 16px; }
@media (max-width: 700px) {
  .lightbox { padding: 12px; }
  .lightbox .lb-nav { width: 40px; height: 40px; }
  .lightbox .lb-prev { left: 6px; }
  .lightbox .lb-next { right: 6px; }
}

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

/* ---------- AI lead button ---------- */
.ai-lead-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 0 10px; font-size: .82rem; cursor: pointer; white-space: nowrap;
}
.ai-lead-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- process flow (export guide / faq) ---- */
.flow { position: relative; margin: 4px 0 8px; }
.flow::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 14px; width: 2px; background: linear-gradient(180deg, #c8a24a, var(--line)); }
.flow-node { position: relative; padding: 0 0 20px 64px; }
.flow-node:last-child { padding-bottom: 4px; }
.flow-dot { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0b1b33, #1d3a66); color: #c8a24a; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 0 0 4px var(--bg, #fff), 0 4px 12px rgba(11, 27, 51, .18); z-index: 1; }
.flow-node .flow-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.flow-node:hover .flow-card { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 27, 51, .10); border-color: #c8a24a; }
.flow-node h3 { margin: 0 0 6px; font-size: 1.02rem; }
.flow-node h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c8a24a; margin-right: 8px; vertical-align: 2px; }
.flow-node p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.65; }
/* ---------- process track: 8 stops on two lanes of a gold rail ---------- */
/* Laid out like a transit line: stops 1-4 run left to right along the top lane, the
   rail folds down on the right, and 5-8 come back right to left along the bottom
   lane. DOM order stays 1-8 so screen readers and crawlers read it correctly. */
.flow-track {
  position: relative; list-style: none; margin: 26px 0 32px; padding: 30px 32px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px 46px;
  background: #f7f9fc;
  border: 1px solid var(--line); border-radius: 20px;
}
.flow-step {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-width: 0; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.3;
  box-shadow: 0 2px 8px rgba(11, 27, 51, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.flow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 162, 74, .65);
  box-shadow: 0 12px 24px rgba(11, 27, 51, .12);
}
.flow-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; font-size: .82rem; font-weight: 800;
  background: linear-gradient(135deg, #0b1b33, #1d3a66); color: #c8a24a;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(11, 27, 51, .2);
}
.flow-step span { min-width: 0; }

/* lane 1 placement (1 -> 2 -> 3 -> 4) */
.flow-step:nth-child(1) { grid-area: 1 / 1; }
.flow-step:nth-child(2) { grid-area: 1 / 2; }
.flow-step:nth-child(3) { grid-area: 1 / 3; }
.flow-step:nth-child(4) { grid-area: 1 / 4; }
/* lane 2 placement (5 -> 6 -> 7 -> 8), laid out right to left */
.flow-step:nth-child(5) { grid-area: 2 / 4; }
.flow-step:nth-child(6) { grid-area: 2 / 3; }
.flow-step:nth-child(7) { grid-area: 2 / 2; }
.flow-step:nth-child(8) { grid-area: 2 / 1; }

/* rail segment leaving each card, plus a chevron at its head. The card is stretched
   to its column, so the segment length is exactly the column gap minus the margin.
   Every stop draws an OUTGOING segment, so nothing is hidden on step 1 - it is the
   start of the run, not a stop without a rail. */
.flow-step::after {
  content: ""; position: absolute; top: 50%; right: -38px; width: 30px; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(200, 162, 74, .15), rgba(200, 162, 74, .95));
}
.flow-step::before {
  content: ""; position: absolute; top: 50%; right: -31px; width: 7px; height: 7px;
  border-top: 2px solid #c8a24a; border-right: 2px solid #c8a24a;
  transform: translateY(-50%) rotate(45deg);
}
/* step 4 closes lane 1: the rail drops straight down to step 5 underneath it */
.flow-step:nth-child(4)::after {
  top: 100%; right: auto; left: 50%; width: 2px; height: 42px; transform: none;
  background: linear-gradient(180deg, rgba(200, 162, 74, .15), rgba(200, 162, 74, .95));
}
.flow-step:nth-child(4)::before {
  top: calc(100% + 31px); right: auto; left: calc(50% - 4px); transform: rotate(135deg);
}
/* lane 2 runs the other way, so its rail segments and chevrons point left */
.flow-step:nth-child(n+5)::after {
  right: auto; left: -38px;
  background: linear-gradient(270deg, rgba(200, 162, 74, .15), rgba(200, 162, 74, .95));
}
.flow-step:nth-child(n+5)::before {
  right: auto; left: -31px; transform: translateY(-50%) rotate(-135deg);
}
.flow-step:nth-child(8)::after, .flow-step:nth-child(8)::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .flow-node, .flow-node .flow-card, .flow-step { transition: none; }
  .flow-node:hover .flow-card, .flow-step:hover { transform: none; }
}

/* Narrow screens: two lanes of four need too much width, so drop to two columns
   reading straight left to right, top to bottom. */
@media (max-width: 900px) {
  .flow-track {
    padding: 22px 18px; gap: 18px 30px; border-radius: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flow-step { font-size: .85rem; padding: 12px 14px; gap: 10px; }
  .flow-num { width: 27px; height: 27px; font-size: .78rem; }
  .flow-step:nth-child(1) { grid-area: 1 / 1; }
  .flow-step:nth-child(2) { grid-area: 1 / 2; }
  .flow-step:nth-child(3) { grid-area: 2 / 1; }
  .flow-step:nth-child(4) { grid-area: 2 / 2; }
  .flow-step:nth-child(5) { grid-area: 3 / 1; }
  .flow-step:nth-child(6) { grid-area: 3 / 2; }
  .flow-step:nth-child(7) { grid-area: 4 / 1; }
  .flow-step:nth-child(8) { grid-area: 4 / 2; }
  /* only the rail within a row survives; anything else would point nowhere */
  .flow-step:nth-child(odd)::after {
    top: 50%; right: -24px; left: auto; width: 16px; height: 2px; transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(200, 162, 74, .15), rgba(200, 162, 74, .95));
  }
  .flow-step:nth-child(odd)::before {
    top: 50%; right: -19px; left: auto; transform: translateY(-50%) rotate(45deg);
  }
  .flow-step:nth-child(even)::after, .flow-step:nth-child(even)::before { display: none; }
}
@media (max-width: 520px) {
  .flow-track { padding: 16px 12px; gap: 12px 14px; border-radius: 14px; }
  .flow-step { font-size: .78rem; gap: 8px; padding: 10px 11px; border-radius: 12px; }
  .flow-num { width: 24px; height: 24px; font-size: .72rem; }
  .flow-step::after, .flow-step::before { display: none; }
}

@media (max-width: 700px) {
  .flow::before { left: 15px; }
  .flow-dot { width: 32px; height: 32px; font-size: .85rem; }
  .flow-node { padding-left: 46px; }
  .flow-node .flow-card { padding: 12px 14px; }
}