/* ═══════════════════════════════════════════════════════════
 * LimaQI · public site · v2 shell
 * Bolder direction: dark dramatic hero, unified globe atlas,
 * new sections for shop-from-URL / tracking / logistics system.
 * ═════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--lmq-text-1);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
:lang(zh) body { font-family: var(--font-cjk), var(--font-sans); }
a { color: inherit; text-decoration: none; }
img, svg, iframe { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── layout ─────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
section { padding: 112px 0; }
section.tight { padding: 72px 0; }

/* ── type primitives ────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.eyebrow-white { color: rgba(255,255,255,0.62); }
.eyebrow-gold { color: var(--rcz-gold); }
h1, h2, h3, h4, h5 { color: var(--lmq-text-1); letter-spacing: -0.018em; }
h1 {
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
}
h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
h4 { font-size: 15px; line-height: 1.35; font-weight: 600; }
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--lmq-text-2);
  max-width: 680px;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 64px; max-width: 760px; }
.section-head.center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

/* ── nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--lmq-border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand-mark {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--brand-primary);
  font-size: 24px;
  line-height: 1;
}
.brand-mark .brand-q { color: var(--lmq-text-1); }
.brand-mark .brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--lmq-text-3);
  font-weight: 500;
  padding-left: 14px;
  border-left: 1px solid var(--lmq-border);
  text-transform: uppercase;
}
.brand-mark .brand-cjk {
  font-family: var(--font-cjk);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--lmq-text-2);
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 13px; font-weight: 500;
  color: var(--lmq-text-2);
  padding: 10px 14px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.nav-links a:hover { color: var(--lmq-text-1); background: var(--lmq-surface-tint); }
.nav-links a.on { color: var(--brand-primary); background: var(--brand-primary-light); }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* lang switcher */
.lang-switch {
  display: flex; gap: 2px;
  padding: 4px;
  background: var(--lmq-page-bg);
  border-radius: 6px;
  border: 1px solid var(--lmq-border);
}
.lang-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--lmq-text-3);
  transition: all 120ms;
  min-width: 32px;
  text-align: center;
}
.lang-btn:hover { color: var(--lmq-text-1); }
.lang-btn.on { background: var(--brand-primary); color: #fff; }

/* buttons */
.btn {
  font-size: 13px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 120ms;
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-dark); }
.btn-secondary { background: #fff; color: var(--lmq-text-1); border-color: var(--lmq-border); }
.btn-secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-ghost { color: var(--lmq-text-2); }
.btn-ghost:hover { color: var(--brand-primary); }
.btn-lg { padding: 14px 26px; font-size: 14px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ───────────────────────────────────────────────────────── */
/* HERO · DARK · UNIFIED ATLAS                               */
/* ───────────────────────────────────────────────────────── */
.hero-dark {
  background:
    radial-gradient(1400px 700px at 75% 30%, rgba(0,56,168,0.48) 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 100%, rgba(212,166,74,0.10) 0%, transparent 50%),
    radial-gradient(2px 2px at 14% 22%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(255,255,255,0.38), transparent),
    radial-gradient(1px 1px at 86% 78%, rgba(255,255,255,0.28), transparent),
    radial-gradient(2px 2px at 48% 88%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1.5px 1.5px at 6% 8%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1px 1px at 92% 32%, rgba(255,255,255,0.30), transparent),
    linear-gradient(180deg, #050B14 0%, #0A1426 50%, #0F1A2E 100%);
  color: #fff;
  padding: 80px 0 0;
  position: relative;
  overflow: hidden;
  min-height: 92vh;
}
.hero-dark .eyebrow { color: rgba(255,255,255,0.55); }
.hero-dark h1 { color: #fff; }
.hero-dark h1 em { font-style: normal; color: #FFE9B0; }
.hero-dark .hero-sub {
  font-size: 18px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin-top: 28px;
  max-width: 580px;
}
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 2;
  padding-bottom: 0;
  max-width: 920px;
}
.hero-grid > div:first-child { width: 100%; }

/* Globe is now a dedicated full-width stage below the hero text */
.atlas-stage-section {
  position: relative;
  width: 100%;
  padding: 32px 0 96px;
  z-index: 1;
}
.atlas-stage-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-ctas .btn-primary { background: #fff; color: var(--brand-primary); }
.hero-ctas .btn-primary:hover { background: #E3F2FD; }
.hero-ctas .btn-secondary {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.32);
}
.hero-ctas .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hs { display: flex; flex-direction: column; gap: 6px; }
.hs-num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hs-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ───────────────────────────────────────────────────────── */
/* UNIFIED GLOBE ATLAS · 3-in-1                              */
/*   layer 1: real-earth d3 globe (iframe)                   */
/*   layer 2: orbital stylized rings overlay                 */
/*   layer 3: flat world map ribbon below                    */
/* ───────────────────────────────────────────────────────── */
/* Globe stage — full width, breathing room */
.atlas {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 0;
}
.atlas-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px 14px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.atlas-head .live {
  display: inline-flex; align-items: center; gap: 8px;
  color: #5B8DEF;
}
.atlas-head .live::before {
  content: '';
  width: 6px; height: 6px;
  background: #5B8DEF;
  border-radius: 50%;
  box-shadow: 0 0 8px #5B8DEF;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.atlas-globe-stage {
  position: relative;
  width: 100%;
  height: min(78vh, 860px);
  min-height: 600px;
  overflow: hidden;
  border-radius: 0;
}
.atlas-globe-stage iframe {
  width: 100%; height: 100%;
  border: 0;
  position: relative; z-index: 1;
  background: transparent;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.6));
}
.atlas-rings {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.atlas-rings ellipse {
  fill: none;
  transform-origin: 50% 50%;
  transform-box: view-box;
}
@keyframes orbit-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-2 { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes orbit-3 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.atlas-rings .ring-1 {
  stroke: rgba(91,141,239,0.32);
  stroke-width: 0.4;
  animation: orbit-1 18s linear infinite;
}
.atlas-rings .ring-2 {
  stroke: rgba(212,166,74,0.36);
  stroke-width: 0.4;
  animation: orbit-2 26s linear infinite;
}
.atlas-rings .ring-3 {
  stroke: rgba(91,141,239,0.22);
  stroke-width: 0.3;
  animation: orbit-3 34s linear infinite;
}

/* atlas readout strip on top of globe */
.atlas-readout {
  position: absolute;
  bottom: 24px; right: 24px;
  z-index: 4;
  background: rgba(10,20,40,0.82);
  border: 1px solid rgba(91,141,239,0.32);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.82);
  pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  max-width: 260px;
}
.atlas-readout .ar-row { display: flex; gap: 10px; justify-content: space-between; min-width: 160px; }
.atlas-readout .ar-row .v { color: #FFE9B0; }

/* flat world map ribbon */
.atlas-flat {
  background: linear-gradient(180deg, rgba(15,26,46,0.96) 0%, rgba(8,16,28,1) 100%);
  border-top: 1px solid rgba(91,141,239,0.18);
  padding: 16px 18px 14px;
  position: relative;
  z-index: 3;
}
.atlas-flat svg { width: 100%; height: auto; display: block; }
.atlas-flat .flat-cap {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-top: 8px;
}
.atlas-flat .flat-cap .legend {
  display: inline-flex; gap: 14px;
}
.atlas-flat .flat-cap .legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.atlas-flat .flat-cap .legend .swatch-air { width: 16px; height: 0; border-top: 1.5px dashed #FFE9B0; }
.atlas-flat .flat-cap .legend .swatch-sea { width: 16px; height: 2px; background: #5B8DEF; }

/* ─── DDP section · full-bleed #0038A8 ──────────────────── */
.ddp {
  background: var(--brand-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ddp::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.ddp h2 { color: #fff; }
.ddp .eyebrow { color: rgba(255,255,255,0.6); }
.ddp .lede { color: rgba(255,255,255,0.78); max-width: 760px; }
.ddp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  position: relative; z-index: 1;
}
.ddp-panel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 36px;
  position: relative;
  backdrop-filter: blur(8px);
}
.ddp-panel .panel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.ddp-panel h3 { color: #fff; font-size: 24px; font-weight: 600; }
.ddp-panel p { color: rgba(255,255,255,0.78); margin-top: 14px; line-height: 1.55; }
.ddp-panel .panel-side-strip {
  position: absolute; top: 36px; right: 36px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.ddp-bullets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.ddp-bullet {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
}
.ddp-bullet svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--rcz-gold);
}

/* ─── SHOP-LINK section (paste any chinese URL) ─────────── */
.shop-link {
  background: var(--lmq-page-bg);
  position: relative;
}
.shop-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.url-card {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 24px 60px -20px rgba(15,34,64,0.18);
  position: relative;
  overflow: hidden;
}
.url-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0,56,168,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.url-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
}
.url-card-head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 6px rgba(56,142,60,0.55);
}
.url-input-wrap {
  display: flex; gap: 8px;
  margin-bottom: 14px;
}
.url-input-wrap input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--lmq-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--lmq-page-bg);
  color: var(--lmq-text-1);
  outline: none;
}
.url-input-wrap input:focus {
  background: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,56,168,0.12);
}
.url-input-wrap button {
  background: var(--brand-primary);
  color: #fff;
  padding: 0 22px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
}
.url-input-wrap button:hover { background: var(--brand-primary-dark); }
.url-demo-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.url-demo-pill {
  padding: 6px 12px;
  background: var(--lmq-surface-tint);
  border: 1px solid var(--lmq-border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lmq-text-2);
  cursor: pointer;
  transition: all 120ms;
}
.url-demo-pill:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* supported marketplace row */
.marketplace-row {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--lmq-border);
  position: relative; z-index: 1;
}
.marketplace-row .mr-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.market-tag {
  padding: 10px 12px;
  background: var(--lmq-page-bg);
  border: 1px solid var(--lmq-border);
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--lmq-text-2);
  font-weight: 500;
}
.market-tag .market-logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cjk);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* shop features cards */
.shop-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.shop-feat {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 200ms;
}
.shop-feat:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(0,56,168,0.18);
}
.shop-feat .sf-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.shop-feat .sf-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.shop-feat h4 { font-size: 16px; font-weight: 600; }
.shop-feat p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--lmq-text-2);
  line-height: 1.55;
}

/* ─── flow ──────────────────────────────────────────────── */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  margin-top: 24px;
}
.flow::before {
  content: '';
  position: absolute;
  top: 32px; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(to right,
    var(--lmq-border) 0%,
    var(--brand-primary) 30%,
    var(--brand-primary) 70%,
    var(--lmq-border) 100%);
  z-index: 0;
}
.flow-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 12px;
  position: relative; z-index: 1;
}
.flow-step .step-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--brand-primary);
  transition: all 200ms;
}
.flow-step:hover .step-num { background: var(--brand-primary); color: #fff; }
.flow-step h4 { margin-top: 18px; font-size: 14px; font-weight: 600; }
.flow-step p {
  font-size: 12px;
  color: var(--lmq-text-2);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 180px;
}

/* ─── TRACKING SYSTEM showcase ──────────────────────────── */
.tracksys {
  background: linear-gradient(180deg, #FAFBFC 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.tracksys-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.tracksys-feats { display: flex; flex-direction: column; gap: 20px; }
.tracksys-feat {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--lmq-border);
}
.tracksys-feat:last-child { border-bottom: 0; }
.tracksys-feat .tf-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  font-weight: 600;
  min-width: 32px;
}
.tracksys-feat h4 { font-size: 16px; font-weight: 600; }

/* phone mockup w/ tracking timeline */
.phone-mock {
  background: #1a1a2e;
  border-radius: 36px;
  padding: 16px;
  box-shadow:
    0 32px 80px -20px rgba(15,34,64,0.45),
    inset 0 0 0 2px rgba(255,255,255,0.06);
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.phone-screen {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.phone-head {
  background: var(--brand-primary);
  color: #fff;
  padding: 20px 20px 16px;
}
.phone-head .ph-status {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.phone-head .ph-id {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.phone-head .ph-route {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.phone-head .ph-eta {
  margin-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.phone-head .ph-eta .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6);
}
.phone-head .ph-eta .val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.phone-events { padding: 16px 20px; max-height: 380px; overflow-y: auto; }
.ph-event {
  display: flex; gap: 12px;
  padding: 8px 0;
  position: relative;
}
.ph-event::before {
  content: '';
  position: absolute; left: 5px; top: 22px; bottom: -8px;
  width: 2px;
  background: var(--lmq-border);
}
.ph-event:last-child::before { display: none; }
.ph-event .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--lmq-border);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.ph-event.done .dot { background: var(--brand-primary); border-color: var(--brand-primary); }
.ph-event.now .dot {
  background: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0,56,168,0.16);
  animation: phone-pulse 2.4s ease-in-out infinite;
}
@keyframes phone-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,56,168,0.16); }
  50% { box-shadow: 0 0 0 7px rgba(0,56,168,0.04); }
}
.ph-event .text { flex: 1; }
.ph-event .text h5 { font-size: 13px; font-weight: 500; }
.ph-event.done .text h5 { color: var(--lmq-text-1); }
.ph-event:not(.done):not(.now) .text h5 { color: var(--lmq-text-3); }
.ph-event.now .text h5 { color: var(--brand-primary); }
.ph-event .text .when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lmq-text-3);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ─── LOGISTICS SYSTEM dashboard mock ───────────────────── */
.logsys {
  background: var(--lmq-sidebar-bg);
  color: rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
}
.logsys::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,56,168,0.22) 0%, transparent 60%);
  pointer-events: none;
}
.logsys h2 { color: #fff; }
.logsys .eyebrow { color: rgba(255,255,255,0.55); }
.logsys .lede { color: rgba(255,255,255,0.7); max-width: 760px; }
.logsys-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.module-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
  transition: all 200ms;
}
.module-card:hover {
  background: rgba(0,56,168,0.18);
  border-color: rgba(91,141,239,0.42);
}
.module-card .mc-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rcz-gold);
  min-width: 36px;
}
.module-card .mc-name {
  font-size: 14px;
  color: #fff;
}

/* admin panel mock */
.panel-mock {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 32px 80px -20px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}
.panel-mock-chrome {
  background: #f1f3f5;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--lmq-border);
}
.pmc-dot { width: 10px; height: 10px; border-radius: 50%; }
.pmc-dot.r { background: #FF5F57; }
.pmc-dot.y { background: #FFBD2E; }
.pmc-dot.g { background: #28C840; }
.pmc-url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lmq-text-3);
  letter-spacing: 0.04em;
}
.panel-mock-body {
  display: grid;
  grid-template-columns: 140px 1fr;
  min-height: 360px;
  color: var(--lmq-text-1);
}
.pm-side {
  background: #1A1A2E;
  padding: 14px 0;
}
.pm-side-h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  padding: 8px 14px 6px;
  text-transform: uppercase;
}
.pm-side-item {
  padding: 7px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.pm-side-item.on {
  color: #fff;
  background: rgba(0,56,168,0.42);
  border-left-color: var(--rcz-gold);
}
.pm-main { padding: 16px 18px; background: var(--lmq-page-bg); }
.pm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pm-kpi {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 6px;
  padding: 10px 12px;
}
.pm-kpi .lbl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
}
.pm-kpi .val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.pm-kpi .val .small { font-size: 10px; color: var(--lmq-text-3); font-weight: 400; }
.pm-table {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 6px;
  overflow: hidden;
}
.pm-table-head {
  background: #FAFBFC;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.7fr 0.6fr;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--lmq-border);
}
.pm-row {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.7fr 0.6fr;
  gap: 10px;
  font-size: 11px;
  border-bottom: 1px solid var(--lmq-border);
  color: var(--lmq-text-1);
  align-items: center;
}
.pm-row:last-child { border-bottom: 0; }
.pm-row .pm-id { font-family: var(--font-mono); font-weight: 600; }
.pm-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-status-pill.transit { background: var(--status-transit-bg); color: var(--status-transit-fg); }
.pm-status-pill.customs { background: var(--status-customs-bg); color: var(--status-customs-fg); }
.pm-status-pill.delivered { background: var(--status-success-bg); color: var(--status-success-fg); }
.pm-status-pill.received { background: var(--status-active-bg); color: var(--status-active-fg); }

/* ─── NETWORK / globe gallery (with all 3 globe views) ──── */
.network {
  background:
    radial-gradient(2px 2px at 14% 22%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 72% 28%, rgba(255,255,255,0.30), transparent),
    radial-gradient(1px 1px at 86% 78%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 48% 88%, rgba(255,255,255,0.20), transparent),
    linear-gradient(180deg, #0A1F3A 0%, #050B14 100%);
  color: #fff;
}
.network h2 { color: #fff; }
.network .eyebrow { color: #5B8DEF; }
.network .lede { color: rgba(255,255,255,0.62); }
.ports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 56px;
}
.port-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(91,141,239,0.16);
  border-radius: 8px;
  padding: 16px;
  transition: all 200ms;
}
.port-card:hover { background: rgba(91,141,239,0.08); border-color: rgba(91,141,239,0.42); }
.port-card .pc-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--rcz-gold);
}
.port-card .pc-name {
  margin-top: 4px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}
.port-card .pc-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
}

/* ─── services grid ─────────────────────────────────────── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.svc-card {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 10px;
  padding: 28px;
  transition: all 200ms;
  position: relative;
}
.svc-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--lmq-shadow-card);
  transform: translateY(-2px);
}
.svc-card .svc-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-radius: 8px;
  margin-bottom: 18px;
}
.svc-card .svc-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.svc-card h3 { font-size: 17px; font-weight: 600; }
.svc-card p { margin-top: 8px; font-size: 13px; color: var(--lmq-text-2); line-height: 1.55; }
.svc-card .svc-tag {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
}

/* ─── trust band ────────────────────────────────────────── */
.trust {
  background: var(--lmq-surface-tint);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust-cell {
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 24px;
  border-right: 1px solid var(--lmq-border);
}
.trust-cell:last-child { border-right: 0; }
.trust-cell .tc-num {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.trust-cell .tc-lbl {
  font-size: 13px;
  color: var(--lmq-text-2);
  line-height: 1.4;
}
.compliance-row {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--lmq-border);
  align-items: center;
}
.compliance-row .cr-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lmq-text-3);
  margin-right: 12px;
}
.compliance-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lmq-text-1);
  font-weight: 500;
}
.compliance-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}

/* ─── SISTER BRAND strip ────────────────────────────────── */
.sister {
  background:
    linear-gradient(180deg, var(--lmq-surface-tint) 0%, #fff 100%);
  position: relative;
  overflow: hidden;
}
.sister-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 48px;
  position: relative;
}
.sister-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--lmq-border), transparent);
  transform: translateX(-50%);
  z-index: 1;
}
.sister-card {
  padding: 36px;
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
}
.sister-card.limaqi {
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 16px;
}
.sister-card.resh {
  background: #0F1A2E;
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(212,166,74,0.36);
}
.sister-card .sc-mark {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1;
}
.sister-card.limaqi .sc-mark { color: var(--brand-primary); }
.sister-card.resh .sc-mark { color: var(--rcz-gold); }
.sister-card .sc-mark .alt {
  font-family: var(--font-cjk);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--lmq-text-3);
  margin-left: 14px;
}
.sister-card.resh .sc-mark .alt { color: rgba(255,255,255,0.55); font-family: var(--font-sans); }
.sister-card .sc-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sister-card.limaqi .sc-tag { color: var(--brand-primary); }
.sister-card.resh .sc-tag { color: var(--rcz-gold); }
.sister-card .sc-for-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 16px;
}
.sister-card.limaqi .sc-for-h { color: var(--lmq-text-3); }
.sister-card.resh .sc-for-h { color: rgba(255,255,255,0.5); }
.sister-card .sc-for-d { font-size: 14px; line-height: 1.55; }
.sister-card.limaqi .sc-for-d { color: var(--lmq-text-2); }
.sister-card.resh .sc-for-d { color: rgba(255,255,255,0.78); }
.sister-card .sc-link {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.sister-card.limaqi .sc-link { color: var(--brand-primary); }
.sister-card.resh .sc-link { color: var(--rcz-gold); }

/* ─── contact section ───────────────────────────────────── */
.contact-section {
  background: var(--brand-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  bottom: -20%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  border-radius: 50%;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
  position: relative; z-index: 1;
}
.contact-section h2 { color: #fff; }
.contact-section .eyebrow { color: rgba(255,255,255,0.55); }
.contact-section .lede { color: rgba(255,255,255,0.78); }
.contact-card {
  background: #fff;
  color: var(--lmq-text-1);
  border-radius: 12px;
  padding: 32px;
}
.contact-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lmq-text-3);
}
.field input, .field select, .field textarea {
  padding: 10px 12px;
  border: 1px solid var(--lmq-border);
  border-radius: 6px;
  background: #fff;
  color: var(--lmq-text-1);
  font-size: 14px;
  outline: none;
  transition: border-color 120ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,56,168,0.12);
}
.field textarea { resize: vertical; min-height: 80px; }
.contact-card .btn-primary { width: 100%; justify-content: center; padding: 14px; }
.disclaimer { font-size: 12px; color: var(--lmq-text-3); margin-top: 14px; text-align: center; line-height: 1.55; }
.contact-side { padding-top: 24px; }
.contact-channel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.contact-channel:last-child { border-bottom: 0; }
.contact-channel-ico {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-channel-ico svg { width: 20px; height: 20px; stroke-width: 1.6; color: #fff; }
.contact-channel-text { flex: 1; }
.contact-channel-text .ccl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.contact-channel-text .ccv { font-size: 14px; color: #fff; margin-top: 2px; font-weight: 500; }

/* ─── footer ────────────────────────────────────────────── */
footer {
  background: var(--lmq-sidebar-bg);
  color: rgba(255,255,255,0.62);
  padding: 72px 0 32px;
  font-size: 13px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
}
footer h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  font-weight: 500;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer a:hover { color: #fff; }
.foot-brand .brand-mark { color: #fff; }
.foot-brand .brand-mark .brand-q { color: #fff; }
.foot-brand .brand-mark .brand-sub { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.15); }
.foot-tagline {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  max-width: 320px;
}
.foot-office { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.foot-office-h { font-size: 13px; font-weight: 500; color: #fff; }
.foot-office-l { font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.5; }
.foot-bar {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.foot-sister { color: var(--rcz-gold); font-weight: 500; }

/* ─── floating WhatsApp ─────────────────────────────────── */
.wa-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.32);
  cursor: pointer; z-index: 50;
  transition: transform 200ms;
}
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 28px; height: 28px; }

/* ─── page banner (non-home) ────────────────────────────── */
.page-banner {
  background: var(--lmq-page-bg);
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--lmq-border);
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,56,168,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.page-banner .crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lmq-text-3);
  margin-bottom: 16px;
  display: flex; gap: 8px; align-items: center;
}
.page-banner .crumb .sep { opacity: 0.5; }
.page-banner h1 { font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; }
.page-banner h1 em { font-style: normal; color: var(--brand-primary); }
.page-banner .lede { margin-top: 18px; max-width: 640px; }

/* ─── group structure card (Nosotros) ───────────────────── */
.group-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 56px;
}
.group-card {
  background: #fff;
  border: 1px solid var(--lmq-border);
  border-radius: 12px;
  padding: 36px;
  position: relative;
}
.group-card.limaqi { border-top: 4px solid var(--brand-primary); }
.group-card.resh {
  border-top: 4px solid var(--rcz-gold);
  background: linear-gradient(180deg, #FAFAF7 0%, #fff 60%);
}
.group-card .gc-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.group-card.limaqi .gc-role { color: var(--brand-primary); }
.group-card.resh .gc-role { color: var(--rcz-gold-lo); }
.group-card .gc-name {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.group-card.limaqi .gc-name { color: var(--brand-primary); }
.group-card.resh .gc-name { color: var(--lmq-text-1); }
.group-card .gc-legal {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lmq-text-3);
  letter-spacing: 0.04em;
}
.group-card .gc-scope {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lmq-text-2);
}
.group-card .gc-meta { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.group-card .gc-meta-row { display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.group-card .gc-meta-row .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--lmq-text-3);
  text-transform: uppercase;
  min-width: 64px;
}
.group-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--lmq-text-3);
}
.group-arrow svg { width: 32px; height: 32px; stroke-width: 1.3; }

/* ─── timeline (Nosotros) ───────────────────────────────── */
.timeline { position: relative; margin-top: 32px; padding-left: 32px; }
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-primary), var(--lmq-border));
}
.tl-row {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 16px 0;
  position: relative;
}
.tl-row::before {
  content: '';
  position: absolute; left: -32px; top: 24px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-primary);
}
.tl-year { flex-shrink: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--brand-primary); min-width: 80px; }
.tl-text h4 { font-size: 16px; font-weight: 600; }
.tl-text p { font-size: 13px; color: var(--lmq-text-2); margin-top: 4px; line-height: 1.55; }

/* ─── tracking page (search UI) ─────────────────────────── */
.track-shell { max-width: 720px; margin: 56px auto; padding: 0 32px; }
.track-input-wrap { display: flex; gap: 8px; margin-bottom: 16px; }
.track-input-wrap input {
  flex: 1;
  padding: 16px 20px;
  font-size: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  border: 1px solid var(--lmq-border);
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.track-input-wrap input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.12); }
.track-input-wrap button { padding: 0 28px; background: var(--brand-primary); color: #fff; font-weight: 500; border-radius: 8px; }
.track-input-wrap button:hover { background: var(--brand-primary-dark); }
.track-demo-row { font-family: var(--font-mono); font-size: 11px; color: var(--lmq-text-3); letter-spacing: 0.06em; }
.track-demo-row a { color: var(--brand-primary); border-bottom: 1px dotted var(--brand-primary); margin: 0 4px; }
.track-result { margin-top: 40px; background: #fff; border: 1px solid var(--lmq-border); border-radius: 12px; overflow: hidden; }
.track-result-head { background: var(--brand-primary); color: #fff; padding: 24px 28px; }
.track-result-head .trh-id { font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.06em; font-weight: 600; }
.track-result-head .trh-meta { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.track-result-head .trh-meta-row { display: flex; flex-direction: column; gap: 4px; }
.track-result-head .trh-meta-row .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.track-result-head .trh-meta-row .val { font-size: 14px; color: #fff; font-weight: 500; }
.track-events { padding: 24px 28px; }
.track-event { display: flex; align-items: flex-start; gap: 20px; padding: 14px 0; position: relative; }
.track-event::before {
  content: '';
  position: absolute; left: 9px; top: 30px; bottom: -10px;
  width: 2px; background: var(--lmq-border);
}
.track-event:last-child::before { display: none; }
.track-event-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--lmq-border); background: #fff;
  flex-shrink: 0; position: relative; z-index: 1;
}
.track-event.done .track-event-dot { background: var(--brand-primary); border-color: var(--brand-primary); }
.track-event.now .track-event-dot {
  background: #fff; border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(0,56,168,0.16);
  animation: pulse-ring 2.4s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,56,168,0.16); }
  50% { box-shadow: 0 0 0 8px rgba(0,56,168,0.04); }
}
.track-event-body { flex: 1; }
.track-event-body h4 { font-size: 15px; font-weight: 600; }
.track-event.done h4 { color: var(--lmq-text-1); }
.track-event:not(.done):not(.now) h4 { color: var(--lmq-text-3); }
.track-event.now h4 { color: var(--brand-primary); }
.track-event-body .meta { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--lmq-text-3); letter-spacing: 0.04em; }

/* ─── SPA pages ─────────────────────────────────────────── */
.page { display: none; }
.page.on { display: block; }

/* ─── responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid, .ddp-grid, .shop-grid, .tracksys-grid, .logsys-grid,
  .contact-grid, .sister-grid { grid-template-columns: 1fr; gap: 32px; }
  .ddp-bullets, .hero-stats, .trust-grid, .svc-grid, .ports-grid { grid-template-columns: repeat(2, 1fr); }
  .sister-grid::before { display: none; }
  .group-grid { grid-template-columns: 1fr; }
  .group-arrow { transform: rotate(90deg); padding: 16px 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .atlas { width: 100%; max-width: 100%; margin-right: 0; }
  .atlas-globe-stage { min-height: 480px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  section { padding: 72px 0; }
  .hero-stats, .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ddp-bullets, .svc-grid, .marketplace-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 24px; }
  .flow::before { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .hs-num { font-size: 28px; }
  .track-result-head .trh-meta { grid-template-columns: repeat(2, 1fr); }
}