/* ============================================================

   ZenX Logistics — Public Recruitment Theme

   SmartEnd CMS · Bootstrap 4 public shell · mobile-first

   Source of truth: feature_planning/14_THEME_DESIGN.md §2

   ============================================================ */



/* ---- 0. Homepage redesign — premium dark (2026) ----

   Scoped to .zenx-home-redesign so the unchanged ZenX header

   (logistics_header partial) and all other pages keep their

   existing light theme. Background system: deep primary,

   slightly lighter secondary, accent used sparingly. ---- */

.zenx-home-redesign {

  --zx-bg-deep: #060D1F;

  --zx-bg-2: #0A142C;

  --zx-bg-3: #0D1A38;

  --zx-line: rgba(148, 178, 224, .14);

  --zx-line-soft: rgba(148, 178, 224, .10);

  --zx-text: #EAF1FB;

  --zx-muted: #93A7C7;

  --zx-accent: #4AA3FF;

  --zx-accent-2: #F2A915;

  --zx-glow: rgba(74, 163, 255, .28);

  background: var(--zx-bg-deep);

  color: var(--zx-text);

  overflow-x: hidden;

}

.zenx-home-redesign .container { max-width: 1240px; }



/* ---- Redesign: shared typography ---- */

.zenx-home-redesign .zx-h2 {

  font-size: clamp(1.9rem, 3.4vw, 2.7rem);

  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;

  color: var(--zx-text); margin: 0 0 16px;

}

.zenx-home-redesign .zx-lead { font-size: 1.05rem; line-height: 1.75; color: var(--zx-muted); margin: 0 0 28px; }

.zenx-home-redesign .zx-sub { font-size: 1rem; line-height: 1.7; color: var(--zx-muted); margin: 0; }

.zenx-home-redesign .zx-eyebrow {

  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;

  text-transform: uppercase; color: var(--zx-accent);

  background: rgba(74, 163, 255, .10); border: 1px solid rgba(74, 163, 255, .28);

  border-radius: 20px; padding: 6px 14px; margin-bottom: 18px;

}

.zenx-home-redesign .zx-eyebrow-on-dark {

  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff;

}

.zenx-home-redesign .zx-accent { color: var(--zx-accent); }



/* ---- Redesign: section head ---- */

.zenx-home-redesign .zx-section-head { margin-bottom: 52px; }

.zenx-home-redesign .zx-section-head-center { text-align: center; }

.zenx-home-redesign .zx-section-head-center .zx-sub { max-width: 680px; margin: 0 auto; }



/* ---- Redesign: buttons ---- */

.zenx-home-redesign .zx-btn {

  display: inline-flex; align-items: center; justify-content: center;

  min-height: 48px; padding: 12px 26px; border-radius: 8px;

  font-size: .95rem; font-weight: 700; letter-spacing: .01em;

  text-decoration: none !important; cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;

}

.zenx-home-redesign .zx-btn i { font-size: .85rem; transition: transform .18s ease; }

.zenx-home-redesign .zx-btn:hover i { transform: translateX(4px); }

.zenx-home-redesign .zx-btn-primary-glow {

  background: linear-gradient(135deg, var(--zx-accent) 0%, #2E7CE0 100%);

  color: #fff; border: 1px solid rgba(255, 255, 255, .18);

  box-shadow: 0 10px 30px rgba(46, 124, 224, .35);

}

.zenx-home-redesign .zx-btn-primary-glow:hover {

  transform: translateY(-2px); box-shadow: 0 14px 36px rgba(46, 124, 224, .5);

}

.zenx-home-redesign .zx-btn-ghost {

  background: rgba(255, 255, 255, .04); color: var(--zx-text);

  border: 1px solid var(--zx-line);

}

.zenx-home-redesign .zx-btn-ghost:hover {

  transform: translateY(-2px); border-color: var(--zx-accent); background: rgba(74, 163, 255, .08); color: #fff;

}

.zenx-home-redesign .zx-btn-glow {

  background: linear-gradient(135deg, var(--zx-accent) 0%, #2E7CE0 100%);

  color: #fff; border: 1px solid rgba(255, 255, 255, .2);

  box-shadow: 0 10px 30px rgba(46, 124, 224, .35);

}

.zenx-home-redesign .zx-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(46, 124, 224, .5); }

.zenx-home-redesign .zx-btn-ghost-on-dark {

  background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .28);

}

.zenx-home-redesign .zx-btn-ghost-on-dark:hover {

  transform: translateY(-2px); background: rgba(255, 255, 255, .12); color: #fff;

}



/* ---- Redesign: SECTION 1 — HERO ---- */

.zenx-home-redesign .zx-hero {

  position: relative; overflow: hidden;

  background:

    radial-gradient(1100px 520px at 85% -10%, rgba(74, 163, 255, .16) 0%, transparent 60%),

    radial-gradient(900px 480px at -10% 110%, rgba(46, 124, 224, .14) 0%, transparent 55%),

    linear-gradient(180deg, #0A142C 0%, var(--zx-bg-deep) 100%);

  padding: 88px 0 120px;

}

.zenx-home-redesign .zx-hero-bg { position: absolute; inset: 0; pointer-events: none; }

/* faint India-ish landmass shapes */

.zenx-home-redesign .zx-hero-map {

  position: absolute; opacity: .05; border: 2px solid var(--zx-accent); border-radius: 8px;

}

.zenx-home-redesign .zx-hero-map-a { width: 260px; height: 320px; right: -40px; top: 60px; transform: rotate(8deg); }

.zenx-home-redesign .zx-hero-map-b { width: 180px; height: 220px; left: -60px; bottom: 40px; transform: rotate(-6deg); }

/* animated route lines */

.zenx-home-redesign .zx-hero-route {

  position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(74, 163, 255, .5), transparent);

  transform-origin: left center;

}

.zenx-home-redesign .zx-hero-route-1 { width: 420px; top: 26%; right: 8%; transform: rotate(24deg); animation: zx-route-dash 9s linear infinite; }

.zenx-home-redesign .zx-hero-route-2 { width: 360px; top: 48%; right: -2%; transform: rotate(-18deg); animation: zx-route-dash 11s linear infinite .8s; }

.zenx-home-redesign .zx-hero-route-3 { width: 300px; bottom: 22%; right: 16%; transform: rotate(10deg); animation: zx-route-dash 10s linear infinite 1.6s; }

.zenx-home-redesign .zx-hero-route-4 { width: 240px; top: 16%; right: 34%; transform: rotate(-30deg); animation: zx-route-dash 12s linear infinite 2.2s; }

@keyframes zx-route-dash {

  0% { opacity: 0; }

  10% { opacity: 1; }

  90% { opacity: 1; }

  100% { opacity: 0; }

}

/* glowing nodes along the routes */

.zenx-home-redesign .zx-hero-node {

  position: absolute; width: 8px; height: 8px; border-radius: 50%;

  background: var(--zx-accent); box-shadow: 0 0 12px var(--zx-accent);

  animation: zx-node-pulse 2.8s ease-in-out infinite;

}

.zenx-home-redesign .zx-hero-node-1 { top: 24%; right: 24%; }

.zenx-home-redesign .zx-hero-node-2 { top: 44%; right: 10%; animation-delay: .5s; }

.zenx-home-redesign .zx-hero-node-3 { top: 60%; right: 26%; animation-delay: 1s; }

.zenx-home-redesign .zx-hero-node-4 { top: 18%; right: 40%; animation-delay: 1.5s; }

.zenx-home-redesign .zx-hero-node-5 { bottom: 18%; right: 34%; animation-delay: 2s; }

.zenx-home-redesign .zx-hero-node-6 { top: 52%; right: 42%; animation-delay: 2.4s; }

@keyframes zx-node-pulse {

  0%, 100% { opacity: .4; transform: scale(.8); }

  50% { opacity: 1; transform: scale(1.25); }

}

.zenx-home-redesign .zx-hero .container { position: relative; z-index: 2; }

.zenx-home-redesign .zx-hero-title {

  font-size: clamp(2.4rem, 5.2vw, 4.1rem);

  font-weight: 800; letter-spacing: -.025em; line-height: 1.06;

  color: var(--zx-text); margin: 0 0 20px;

}

.zenx-home-redesign .zx-hero-sub {

  font-size: 1.1rem; line-height: 1.7; color: var(--zx-muted);

  max-width: 600px; margin: 0 0 32px;

}

.zenx-home-redesign .zx-hero-cta { gap: 14px; margin-bottom: 28px; }

.zenx-home-redesign .zx-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.zenx-home-redesign .zx-hero-tags span {

  display: inline-flex; align-items: center; gap: 7px;

  background: rgba(255, 255, 255, .04); border: 1px solid var(--zx-line);

  border-radius: 20px; padding: 7px 14px;

  font-size: .8rem; font-weight: 600; color: var(--zx-muted);

}

.zenx-home-redesign .zx-hero-tags i { color: var(--zx-accent); }

/* hero visual — glass premium panel */

.zenx-home-redesign .zx-hero-visual { display: flex; align-items: center; justify-content: center; }

.zenx-home-redesign .zx-hero-visual-card {

  position: relative; width: 100%; max-width: 470px;

  background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);

  border: 1px solid var(--zx-line); border-radius: 20px;

  padding: 40px 32px; text-align: center; overflow: hidden;

  box-shadow: 0 30px 80px rgba(2, 8, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .06);

}

.zenx-home-redesign .zx-hero-visual-card::before {

  content: ''; position: absolute; top: -70px; right: -70px;

  width: 220px; height: 220px; border-radius: 50%;

  background: radial-gradient(circle, rgba(74, 163, 255, .22) 0%, transparent 70%);

}

.zenx-home-redesign .zx-hero-visual-badge {

  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;

  text-transform: uppercase; color: var(--zx-accent-2);

  border: 1px solid rgba(242, 169, 21, .4); background: rgba(242, 169, 21, .08);

  border-radius: 20px; padding: 5px 13px; margin-bottom: 22px;

}

.zenx-home-redesign .zx-hero-visual-ico { font-size: 3.4rem; color: var(--zx-accent); margin-bottom: 18px; display: block; }

.zenx-home-redesign .zx-hero-visual-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--zx-text); margin: 0 0 10px; }

.zenx-home-redesign .zx-hero-visual-card p { font-size: .92rem; color: var(--zx-muted); line-height: 1.6; margin: 0 0 24px; }

.zenx-home-redesign .zx-hero-visual-metrics { display: flex; gap: 12px; justify-content: center; }

.zenx-home-redesign .zx-hero-visual-metrics > div {

  flex: 1; background: rgba(255, 255, 255, .04); border: 1px solid var(--zx-line-soft);

  border-radius: 12px; padding: 12px 8px;

}

.zenx-home-redesign .zx-hero-visual-metrics strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--zx-text); }

.zenx-home-redesign .zx-hero-visual-metrics span { font-size: .72rem; color: var(--zx-muted); font-weight: 600; }



/* ---- Redesign: SECTION 2 — INTRO ---- */

.zenx-home-redesign .zx-intro { padding: 96px 0; background: var(--zx-bg-deep); position: relative; }

.zenx-home-redesign .zx-intro-accent {

  display: flex; align-items: center; gap: 16px;

  border: 1px solid var(--zx-line); background: rgba(255, 255, 255, .03);

  border-radius: 14px; padding: 18px 20px; max-width: 520px;

}

.zenx-home-redesign .zx-intro-accent-num {

  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;

  background: linear-gradient(135deg, var(--zx-accent), #2E7CE0);

  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;

  box-shadow: 0 8px 20px rgba(46, 124, 224, .35);

}

.zenx-home-redesign .zx-intro-accent strong { display: block; color: var(--zx-text); font-size: .95rem; margin-bottom: 2px; }

.zenx-home-redesign .zx-intro-accent span { color: var(--zx-muted); font-size: .85rem; line-height: 1.5; }

.zenx-home-redesign .zx-intro-visual { position: relative; }

.zenx-home-redesign .zx-intro-img {

  position: relative; border-radius: 18px; overflow: hidden;

  border: 1px solid var(--zx-line);

  box-shadow: 0 30px 70px rgba(2, 8, 22, .55);

}

.zenx-home-redesign .zx-intro-img::after {

  content: ''; position: absolute; inset: 0;

  background: linear-gradient(180deg, rgba(6, 13, 31, .05) 0%, rgba(6, 13, 31, .35) 100%);

}

.zenx-home-redesign .zx-intro-img img { width: 100%; height: 420px; object-fit: cover; display: block; }

.zenx-home-redesign .zx-intro-chip {

  position: absolute; left: 20px; bottom: 20px; z-index: 2;

  display: flex; align-items: center; gap: 12px;

  background: rgba(10, 20, 44, .85); backdrop-filter: blur(8px);

  border: 1px solid var(--zx-line); border-radius: 14px; padding: 14px 18px;

}

.zenx-home-redesign .zx-intro-chip i { font-size: 1.4rem; color: var(--zx-accent); }

.zenx-home-redesign .zx-intro-chip strong { display: block; color: var(--zx-text); font-size: .92rem; }

.zenx-home-redesign .zx-intro-chip small { color: var(--zx-muted); font-size: .78rem; }



/* ---- Redesign: SECTION 3 — SERVICES ---- */

.zenx-home-redesign .zx-services { padding: 96px 0; background: var(--zx-bg-2); border-top: 1px solid var(--zx-line-soft); border-bottom: 1px solid var(--zx-line-soft); }

.zenx-home-redesign .zx-service-card {

  position: relative; display: flex; flex-direction: column;

  background: rgba(255, 255, 255, .03); border: 1px solid var(--zx-line);

  border-radius: 14px; padding: 30px 26px; color: inherit;

  text-decoration: none !important; overflow: hidden;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;

}

.zenx-home-redesign .zx-service-card::before {

  content: ''; position: absolute; inset: 0; opacity: 0;

  background: radial-gradient(420px 200px at 50% 0%, rgba(74, 163, 255, .16) 0%, transparent 70%);

  transition: opacity .22s ease;

}

.zenx-home-redesign .zx-service-card:hover {

  transform: translateY(-5px); border-color: rgba(74, 163, 255, .5);

  background: rgba(74, 163, 255, .05); box-shadow: 0 18px 44px rgba(2, 8, 22, .5);

}

.zenx-home-redesign .zx-service-card:hover::before { opacity: 1; }

.zenx-home-redesign .zx-service-num {

  position: absolute; top: 20px; right: 22px;

  font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: rgba(148, 178, 224, .4);

}

.zenx-home-redesign .zx-service-icon {

  width: 54px; height: 54px; border-radius: 13px;

  background: linear-gradient(135deg, rgba(74, 163, 255, .18), rgba(74, 163, 255, .06));

  border: 1px solid rgba(74, 163, 255, .3);

  color: var(--zx-accent); display: flex; align-items: center; justify-content: center;

  font-size: 1.4rem; margin-bottom: 18px; transition: background .22s ease, color .22s ease, transform .22s ease;

}

.zenx-home-redesign .zx-service-card:hover .zx-service-icon { background: linear-gradient(135deg, var(--zx-accent), #2E7CE0); color: #fff; transform: scale(1.05); }

.zenx-home-redesign .zx-service-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--zx-text); margin: 0 0 8px; letter-spacing: -.01em; }

.zenx-home-redesign .zx-service-card p { font-size: .9rem; line-height: 1.6; color: var(--zx-muted); margin: 0 0 18px; flex-grow: 1; }

.zenx-home-redesign .zx-service-more {

  display: inline-flex; align-items: center; gap: 7px;

  font-size: .86rem; font-weight: 700; color: var(--zx-accent);

}

.zenx-home-redesign .zx-service-more i { transition: transform .18s ease; }

.zenx-home-redesign .zx-service-card:hover .zx-service-more i { transform: translateX(4px); }



/* ---- Redesign: SECTION 4 — PAN-INDIA NETWORK ---- */

.zenx-home-redesign .zx-network { padding: 96px 0; background: var(--zx-bg-deep); position: relative; overflow: hidden; }

.zenx-home-redesign .zx-network::before {

  content: ''; position: absolute; inset: 0;

  background:

    radial-gradient(800px 420px at 85% 20%, rgba(74, 163, 255, .10) 0%, transparent 60%),

    radial-gradient(700px 400px at 5% 90%, rgba(46, 124, 224, .08) 0%, transparent 55%);

  pointer-events: none;

}

.zenx-home-redesign .zx-network .container { position: relative; }

.zenx-home-redesign .zx-network-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.zenx-home-redesign .zx-network-stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 30px; }

.zenx-home-redesign .zx-network-stat strong {

  display: block; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800;

  color: var(--zx-text); letter-spacing: -.02em; line-height: 1.1;

}

.zenx-home-redesign .zx-network-stat span { color: var(--zx-muted); font-size: .9rem; font-weight: 600; }

.zenx-home-redesign .zx-network-visual { position: relative; }

.zenx-home-redesign .zx-map {

  position: relative; border-radius: 20px; overflow: hidden;

  background: radial-gradient(600px 380px at 50% 40%, rgba(74, 163, 255, .10) 0%, transparent 65%),

              linear-gradient(160deg, #0B1530 0%, #081124 100%);

  border: 1px solid var(--zx-line);

  box-shadow: 0 30px 70px rgba(2, 8, 22, .55);

  min-height: 380px;

}

.zenx-home-redesign .zx-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.zenx-home-redesign .zx-map-shape { fill: rgba(74, 163, 255, .06); stroke: none; }

.zenx-home-redesign .zx-map-outline { fill: none; stroke: rgba(74, 163, 255, .55); stroke-width: 1.6; stroke-dasharray: 5 5; }

.zenx-home-redesign .zx-map-route { fill: none; stroke: rgba(74, 163, 255, .38); stroke-width: 1.2; stroke-dasharray: 4 7; }

.zenx-home-redesign .zx-map-route-1 { animation: zx-map-flow 5s linear infinite; }

.zenx-home-redesign .zx-map-route-2 { animation: zx-map-flow 7s linear infinite .8s; }

.zenx-home-redesign .zx-map-route-3 { animation: zx-map-flow 6s linear infinite 1.4s; }

.zenx-home-redesign .zx-map-route-4 { animation: zx-map-flow 8s linear infinite 2s; }

.zenx-home-redesign .zx-map-route-5 { animation: zx-map-flow 6.5s linear infinite .5s; }

.zenx-home-redesign .zx-map-route-6 { animation: zx-map-flow 7.5s linear infinite 1.8s; }

@keyframes zx-map-flow {

  to { stroke-dashoffset: -110; }

}

.zenx-home-redesign .zx-map-node { fill: var(--zx-accent); animation: zx-map-node 3s ease-in-out infinite; }

.zenx-home-redesign .zx-map-node:nth-child(2n) { animation-delay: .5s; }

.zenx-home-redesign .zx-map-node:nth-child(3n) { animation-delay: 1s; }

@keyframes zx-map-node {

  0%, 100% { opacity: .45; }

  50% { opacity: 1; }

}

.zenx-home-redesign .zx-map-glow { animation: zx-map-glow 4s ease-in-out infinite; }

@keyframes zx-map-glow {

  0%, 100% { opacity: .5; }

  50% { opacity: 1; }

}

.zenx-home-redesign .zx-map-label {

  position: absolute; display: inline-flex; align-items: center; gap: 5px;

  font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--zx-muted);

}

.zenx-home-redesign .zx-map-label i { color: var(--zx-accent); font-size: .8rem; }

.zenx-home-redesign .zx-map-label-1 { top: 20%; left: 16%; }

.zenx-home-redesign .zx-map-label-2 { top: 34%; right: 10%; }

.zenx-home-redesign .zx-map-label-3 { bottom: 22%; left: 30%; }

.zenx-home-redesign .zx-map-label-4 { bottom: 14%; right: 22%; }

.zenx-home-redesign .zx-map-label-5 { top: 52%; right: 30%; }

.zenx-home-redesign .zx-map-label-6 { bottom: 40%; left: 44%; }



/* ---- Redesign: SECTION 5 — WHY ZENX ---- */

.zenx-home-redesign .zx-why { padding: 96px 0; background: var(--zx-bg-2); border-top: 1px solid var(--zx-line-soft); border-bottom: 1px solid var(--zx-line-soft); }

.zenx-home-redesign .zx-why-block {

  position: relative; height: 100%;

  background: rgba(255, 255, 255, .03); border: 1px solid var(--zx-line);

  border-radius: 14px; padding: 30px 26px;

  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;

}

.zenx-home-redesign .zx-why-block:hover { transform: translateY(-4px); border-color: rgba(74, 163, 255, .45); box-shadow: 0 16px 40px rgba(2, 8, 22, .5); }

.zenx-home-redesign .zx-why-num {

  position: absolute; top: 18px; right: 22px;

  font-size: 1.6rem; font-weight: 800; letter-spacing: .04em;

  color: rgba(148, 178, 224, .16);

}

.zenx-home-redesign .zx-why-icon {

  width: 52px; height: 52px; border-radius: 13px;

  background: linear-gradient(135deg, rgba(74, 163, 255, .16), rgba(74, 163, 255, .05));

  border: 1px solid rgba(74, 163, 255, .28);

  color: var(--zx-accent); display: flex; align-items: center; justify-content: center;

  font-size: 1.3rem; margin-bottom: 18px;

}

.zenx-home-redesign .zx-why-block h3 { font-size: 1.05rem; font-weight: 700; color: var(--zx-text); margin: 0 0 8px; }

.zenx-home-redesign .zx-why-block p { font-size: .88rem; line-height: 1.6; color: var(--zx-muted); margin: 0; }



/* ---- Redesign: SECTION 6 — HOW WE WORK (timeline) ---- */

.zenx-home-redesign .zx-process { padding: 96px 0; background: var(--zx-bg-deep); }

.zenx-home-redesign .zx-timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.zenx-home-redesign .zx-timeline-track {

  position: absolute; top: 27px; left: 6%; right: 6%; height: 2px;

  background: linear-gradient(90deg, rgba(74, 163, 255, .1), rgba(74, 163, 255, .55), rgba(74, 163, 255, .1));

}

.zenx-home-redesign .zx-timeline-step { position: relative; text-align: center; padding-top: 70px; }

.zenx-home-redesign .zx-timeline-dot {

  position: absolute; top: 0; left: 50%; transform: translateX(-50%);

  width: 54px; height: 54px; border-radius: 50%;

  background: var(--zx-bg-deep); border: 1px solid rgba(74, 163, 255, .5);

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 0 0 6px rgba(74, 163, 255, .06), 0 0 24px rgba(74, 163, 255, .25);

}

.zenx-home-redesign .zx-timeline-dot span { font-size: .82rem; font-weight: 800; color: var(--zx-accent); }

.zenx-home-redesign .zx-timeline-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--zx-text); margin: 0 0 8px; }

.zenx-home-redesign .zx-timeline-step p { font-size: .87rem; line-height: 1.6; color: var(--zx-muted); margin: 0; }



/* ---- Redesign: SECTION 7 — PEOPLE / TRUST ---- */

.zenx-home-redesign .zx-people { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }

.zenx-home-redesign .zx-people-bg { position: absolute; inset: 0; }

.zenx-home-redesign .zx-people-bg img { width: 100%; height: 100%; object-fit: cover; }

.zenx-home-redesign .zx-people-bg::after {

  content: ''; position: absolute; inset: 0;

  background: linear-gradient(90deg, rgba(6, 13, 31, .94) 0%, rgba(6, 13, 31, .78) 45%, rgba(6, 13, 31, .45) 100%);

}

.zenx-home-redesign .zx-people .container { position: relative; z-index: 2; }

.zenx-home-redesign .zx-people-inner { max-width: 620px; padding: 100px 0; }

.zenx-home-redesign .zx-people-inner .zx-h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }



/* ---- Redesign: SECTION 8 — LATEST NEWS ---- */

.zenx-home-redesign .zx-news { padding: 96px 0; background: var(--zx-bg-2); border-top: 1px solid var(--zx-line-soft); }

.zenx-home-redesign .zx-news-card {

  background: rgba(255, 255, 255, .03); border: 1px solid var(--zx-line);

  border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none !important;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;

}

.zenx-home-redesign .zx-news-card:hover { transform: translateY(-5px); border-color: rgba(74, 163, 255, .45); box-shadow: 0 18px 44px rgba(2, 8, 22, .5); }

.zenx-home-redesign .zx-news-img { height: 200px; overflow: hidden; position: relative; }

.zenx-home-redesign .zx-news-img::after {

  content: ''; position: absolute; inset: 0;

  background: linear-gradient(180deg, transparent 55%, rgba(6, 13, 31, .55) 100%);

}

.zenx-home-redesign .zx-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }

.zenx-home-redesign .zx-news-card:hover .zx-news-img img { transform: scale(1.06); }

.zenx-home-redesign .zx-news-body { padding: 24px 22px 26px; }

.zenx-home-redesign .zx-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.zenx-home-redesign .zx-news-cat {

  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;

  color: var(--zx-accent-2); background: rgba(242, 169, 21, .08);

  border: 1px solid rgba(242, 169, 21, .3); border-radius: 20px; padding: 3px 10px;

}

.zenx-home-redesign .zx-news-date { font-size: .78rem; color: var(--zx-muted); }

.zenx-home-redesign .zx-news-date i { margin-right: 4px; }

.zenx-home-redesign .zx-news-body h3 { font-size: 1.02rem; font-weight: 700; color: var(--zx-text); line-height: 1.4; margin: 0 0 8px; }

.zenx-home-redesign .zx-news-body p { font-size: .87rem; line-height: 1.6; color: var(--zx-muted); margin: 0 0 14px; }

.zenx-home-redesign .zx-news-more {

  display: inline-flex; align-items: center; gap: 7px;

  font-size: .86rem; font-weight: 700; color: var(--zx-accent);

}

.zenx-home-redesign .zx-news-more i { transition: transform .18s ease; }

.zenx-home-redesign .zx-news-card:hover .zx-news-more i { transform: translateX(4px); }

.zenx-home-redesign .zx-news-all { margin-top: 42px; }



/* ---- Redesign: SECTION 9 — FINAL CTA ---- */

.zenx-home-redesign .zx-final { position: relative; padding: 120px 0; overflow: hidden; background: var(--zx-bg-deep); }

.zenx-home-redesign .zx-final-glow {

  position: absolute; inset: 0;

  background:

    radial-gradient(700px 360px at 50% 0%, rgba(74, 163, 255, .22) 0%, transparent 65%),

    radial-gradient(600px 320px at 15% 100%, rgba(46, 124, 224, .14) 0%, transparent 60%),

    radial-gradient(600px 320px at 85% 100%, rgba(46, 124, 224, .14) 0%, transparent 60%);

  pointer-events: none;

}

.zenx-home-redesign .zx-final-inner {

  position: relative; text-align: center; max-width: 760px; margin: 0 auto;

}

.zenx-home-redesign .zx-final-inner .zx-h2 { font-size: clamp(2rem, 3.8vw, 3rem); }

.zenx-home-redesign .zx-final-inner .zx-lead { max-width: 560px; margin: 0 auto 34px; }

.zenx-home-redesign .zx-final-cta { gap: 14px; }



/* ---- Redesign: legacy CMS sections on dark (testimonials, jobs, FAQ, freight) ---- */

.zenx-home-redesign .zx-sub-section { padding: 72px 0; background: var(--zx-bg-2); border-top: 1px solid var(--zx-line-soft); }

.zenx-home-redesign .zx-card {

  background: rgba(255, 255, 255, .03); border: 1px solid var(--zx-line);

  border-radius: 14px; padding: 26px 24px; height: 100%; display: flex; flex-direction: column;

  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;

}

.zenx-home-redesign .zx-card:hover { transform: translateY(-4px); border-color: rgba(74, 163, 255, .45); box-shadow: 0 16px 40px rgba(2, 8, 22, .5); }

.zenx-home-redesign .zx-card p { color: var(--zx-muted); font-size: .9rem; line-height: 1.65; }

.zenx-home-redesign .zx-card-name { color: var(--zx-text) !important; font-weight: 700; }

.zenx-home-redesign .zx-card-title { color: var(--zx-text); font-size: 1.05rem; font-weight: 700; }

.zenx-home-redesign .zx-card-meta { color: var(--zx-muted); font-size: .84rem; }

.zenx-home-redesign .zx-salary { color: var(--zx-accent-2); font-weight: 700; }

.zenx-home-redesign .zx-card-caret { color: var(--zx-accent); }

.zenx-home-redesign .zx-card-faq { color: var(--zx-muted); }

.zenx-home-redesign .zx-pill {

  display: inline-block; padding: 4px 12px; border-radius: 20px;

  font-size: .72rem; font-weight: 800; letter-spacing: .06em;

  background: rgba(74, 163, 255, .12); border: 1px solid rgba(74, 163, 255, .3); color: var(--zx-accent);

}

.zenx-home-redesign #zenxHomeFaq .zx-card { cursor: pointer; }

.zenx-home-redesign #zenxHomeFaq .zx-card:hover { border-color: rgba(74, 163, 255, .45); }

.zenx-home-redesign .zenx-freight-band .zenx-card { background: rgba(255, 255, 255, .03); border-color: var(--zx-line); }

.zenx-home-redesign .zenx-freight-band .zenx-card h4 { color: var(--zx-text); }

.zenx-home-redesign .zenx-freight-band .zenx-card p { color: var(--zx-muted); }

.zenx-home-redesign .zenx-freight-band .zenx-card-icon { background: linear-gradient(135deg, rgba(74, 163, 255, .18), rgba(74, 163, 255, .06)); color: var(--zx-accent); }



/* ---- Redesign: reveal animation ---- */

.zenx-home-redesign .zx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }

.zenx-home-redesign .zx-reveal.zx-in { opacity: 1; transform: none; }



/* ---- Redesign: responsive ---- */

@media (max-width: 991.98px) {

  .zenx-home-redesign .zx-network-grid { grid-template-columns: 1fr; gap: 40px; }

  .zenx-home-redesign .zx-timeline { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }

  .zenx-home-redesign .zx-timeline-track { display: none; }

  .zenx-home-redesign .zx-people { min-height: 500px; }

  .zenx-home-redesign .zx-people-bg::after { background: linear-gradient(180deg, rgba(6, 13, 31, .9) 0%, rgba(6, 13, 31, .7) 100%); }

  .zenx-home-redesign .zx-intro-img img { height: 340px; }

}

@media (max-width: 575.98px) {

  .zenx-home-redesign .zx-hero { padding: 64px 0 84px; }

  .zenx-home-redesign .zx-intro, .zenx-home-redesign .zx-services,

  .zenx-home-redesign .zx-network, .zenx-home-redesign .zx-why,

  .zenx-home-redesign .zx-process, .zenx-home-redesign .zx-news { padding: 64px 0; }

  .zenx-home-redesign .zx-final { padding: 80px 0; }

  .zenx-home-redesign .zx-hero-cta { width: 100%; }

  .zenx-home-redesign .zx-hero-cta .zx-btn { flex: 1 1 100%; }

  .zenx-home-redesign .zx-hero-tags { justify-content: center; }

  .zenx-home-redesign .zx-hero-visual-card { padding: 30px 20px; }

  .zenx-home-redesign .zx-network-stats { gap: 26px; }

  .zenx-home-redesign .zx-map { min-height: 300px; }

  /* vertical timeline on mobile */

  .zenx-home-redesign .zx-timeline { grid-template-columns: 1fr; gap: 30px; padding-left: 40px; }

  .zenx-home-redesign .zx-timeline-track {

    display: block; left: 13px; right: auto; top: 6px; bottom: 6px;

    width: 2px; height: auto;

    background: linear-gradient(180deg, rgba(74, 163, 255, .1), rgba(74, 163, 255, .55), rgba(74, 163, 255, .1));

  }

  .zenx-home-redesign .zx-timeline-step { text-align: left; padding-top: 0; }

  .zenx-home-redesign .zx-timeline-dot { left: -40px; top: 0; width: 28px; height: 28px; box-shadow: 0 0 0 5px rgba(74, 163, 255, .06), 0 0 18px rgba(74, 163, 255, .25); }

  .zenx-home-redesign .zx-timeline-dot span { font-size: .7rem; }

  .zenx-home-redesign .zx-people-inner { padding: 64px 0; }

  .zenx-home-redesign .zx-intro-img img { height: 260px; }

  .zenx-home-redesign .zx-news-img { height: 180px; }

}



/* ============================================================

   ZenX Logistics — Public Recruitment Theme

   SmartEnd CMS · Bootstrap 4 public shell · mobile-first

   Source of truth: feature_planning/14_THEME_DESIGN.md §2

   ============================================================ */



/* ---- 1. Design tokens (single source of truth) ---- */

:root {

  --zenx-primary: #0755B8;

  --zenx-navy: #063B82;

  --zenx-sidebar-navy: #003B82;

  --zenx-primary-hover: #1476D4;

  --zenx-surface-blue: #EAF4FF;

  --zenx-bg: #F7FAFD;

  --zenx-surface: #FFFFFF;

  --zenx-border: #E4EAF2;

  --zenx-text: #102A43;

  --zenx-text-muted: #60758A;

  --zenx-success: #22A06B;

  --zenx-warning: #F59E0B;

  --zenx-danger: #D64545;

  --zenx-accent: #F39A22;



  --zenx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --zenx-radius-sm: 6px;

  --zenx-radius-md: 8px;

  --zenx-radius-lg: 12px;

  --zenx-shadow-sm: 0 2px 8px rgba(15,45,80,.06);

  --zenx-shadow-md: 0 4px 16px rgba(15,45,80,.08);



  --zenx-space-1: 4px;

  --zenx-space-2: 8px;

  --zenx-space-3: 12px;

  --zenx-space-4: 16px;

  --zenx-space-5: 20px;

  --zenx-space-6: 24px;

  --zenx-space-8: 32px;

  --zenx-space-10: 40px;

  --zenx-space-12: 48px;

}



/* ---- 2. Base ---- */

body {

  font-family: var(--zenx-font);

  background: var(--zenx-bg);

  color: var(--zenx-text);

}



.zenx-container {

  max-width: 1280px;

}



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



/* Spacing utilities (4/8/12/16/20/24/32/40) */

.zenx-mt-1 { margin-top: var(--zenx-space-1); } .zenx-mt-2 { margin-top: var(--zenx-space-2); }

.zenx-mt-3 { margin-top: var(--zenx-space-3); } .zenx-mt-4 { margin-top: var(--zenx-space-4); }

.zenx-mt-5 { margin-top: var(--zenx-space-5); } .zenx-mt-6 { margin-top: var(--zenx-space-6); }

.zenx-mt-8 { margin-top: var(--zenx-space-8); } .zenx-mt-10 { margin-top: var(--zenx-space-10); }

.zenx-mb-1 { margin-bottom: var(--zenx-space-1); } .zenx-mb-2 { margin-bottom: var(--zenx-space-2); }

.zenx-mb-3 { margin-bottom: var(--zenx-space-3); } .zenx-mb-4 { margin-bottom: var(--zenx-space-4); }

.zenx-mb-5 { margin-bottom: var(--zenx-space-5); } .zenx-mb-6 { margin-bottom: var(--zenx-space-6); }

.zenx-mb-8 { margin-bottom: var(--zenx-space-8); } .zenx-mb-10 { margin-bottom: var(--zenx-space-10); }



/* ---- 3. Buttons (touch targets ≥44px under 768px) ---- */

.zenx-btn {

  display: inline-flex; align-items: center; justify-content: center;

  min-height: 44px; padding: 10px 18px; border-radius: var(--zenx-radius-sm);

  font-size: 14px; font-weight: 600; line-height: 1.4;

  border: 1px solid transparent; cursor: pointer; text-decoration: none;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;

}

.zenx-btn:hover { text-decoration: none; }



.zenx-btn-primary { background: var(--zenx-primary); color: #fff; }

.zenx-btn-primary:hover, .zenx-btn-primary:focus { background: var(--zenx-primary-hover); color: #fff; }



.zenx-btn-outline { background: transparent; border-color: var(--zenx-primary); color: var(--zenx-primary); }

.zenx-btn-outline:hover, .zenx-btn-outline:focus { background: var(--zenx-surface-blue); border-color: var(--zenx-primary); color: var(--zenx-primary); }



.zenx-btn-success { background: var(--zenx-success); color: #fff; }

.zenx-btn-success:hover, .zenx-btn-success:focus { background: #1b8a5c; color: #fff; }



.zenx-btn-danger { background: var(--zenx-danger); color: #fff; }

.zenx-btn-danger:hover, .zenx-btn-danger:focus { background: #b93838; color: #fff; }



.zenx-btn-sm { min-height: 36px; padding: 4px 12px; font-size: 13px; }

.zenx-btn-block { width: 100%; }



.zenx-btn:disabled { opacity: .55; cursor: not-allowed; }



/* ---- 4. Cards ---- */

.zenx-card {

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border);

  border-radius: var(--zenx-radius-lg);

  box-shadow: var(--zenx-shadow-sm);

  padding: var(--zenx-space-5);

}



/* ---- 5. Section titles (primary underline accent) ---- */

.zenx-section-title {

  font-size: 24px; font-weight: 700; color: var(--zenx-navy);

  margin: 0 0 var(--zenx-space-3); position: relative;

  padding-bottom: var(--zenx-space-2);

}

.zenx-section-title::after {

  content: ''; position: absolute; left: 0; bottom: 0;

  width: 48px; height: 3px; border-radius: 2px; background: var(--zenx-primary);

}

.zenx-section-title.zenx-center { text-align: center; }

.zenx-section-title.zenx-center::after { left: 50%; transform: translateX(-50%); }

.zenx-section-sub { color: var(--zenx-text-muted); font-size: 15px; }



/* ---- 6. Hero (light premium — ZENX reference) ---- */

.zenx-hero {

  background: linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);

  color: var(--zenx-text);

  padding: 64px 16px 96px;

  position: relative;

  overflow: hidden;

}

/* soft blue radial glows — logistics/network feel, no hard imagery */

.zenx-hero::before {

  content: ''; position: absolute; top: -180px; right: -140px;

  width: 560px; height: 560px; border-radius: 50%;

  background: radial-gradient(circle, rgba(7,85,184,.10) 0%, rgba(7,85,184,0) 65%);

  pointer-events: none;

}

.zenx-hero::after {

  content: ''; position: absolute; bottom: -200px; left: -160px;

  width: 520px; height: 520px; border-radius: 50%;

  background: radial-gradient(circle, rgba(20,118,212,.08) 0%, rgba(20,118,212,0) 62%);

  pointer-events: none;

}

.zenx-hero .container { position: relative; z-index: 1; }

.zenx-hero h1 {

  font-size: 34px; font-weight: 800; margin: 0 0 14px;

  color: var(--zenx-navy); letter-spacing: -.02em; line-height: 1.15;

}

.zenx-hero h1 .zenx-hero-accent { color: var(--zenx-primary); }

.zenx-hero p { font-size: 17px; color: var(--zenx-text-muted); margin: 0 0 24px; line-height: 1.6; }

.zenx-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }



/* hero badge — light pill with blue accent */

.zenx-hero-badge {

  display: inline-flex; align-items: center; gap: 6px;

  background: var(--zenx-surface-blue); color: var(--zenx-primary);

  border: 1px solid #D8E8FB; border-radius: 20px;

  padding: 6px 14px; font-size: .78rem; font-weight: 600; margin-bottom: 20px;

}



/* hero visual — premium logistics scene built from stacked glass panels + icon grid */

.zenx-hero-illustration { display: flex; align-items: center; justify-content: center; }

.zenx-svg-box {

  background: linear-gradient(160deg, #FFFFFF 0%, var(--zenx-surface-blue) 100%);

  border: 1px solid #D8E8FB; border-radius: 20px; padding: 44px 28px;

  text-align: center; color: var(--zenx-navy);

  box-shadow: 0 24px 60px rgba(15,45,80,.12);

  position: relative; overflow: hidden; width: 100%; max-width: 480px;

}

.zenx-svg-box::before {

  content: ''; position: absolute; top: -60px; right: -60px;

  width: 200px; height: 200px; border-radius: 50%;

  background: radial-gradient(circle, rgba(7,85,184,.14) 0%, rgba(7,85,184,0) 70%);

}

.zenx-svg-box::after {

  content: ''; position: absolute; bottom: -80px; left: -50px;

  width: 180px; height: 180px; border-radius: 50%;

  background: radial-gradient(circle, rgba(243,154,34,.12) 0%, rgba(243,154,34,0) 70%);

}

.zenx-svg-box i { font-size: 3.2rem; color: var(--zenx-primary); }

.zenx-svg-box .font-weight-bold { font-size: 1.05rem; color: var(--zenx-navy); }

.zenx-svg-box .small { color: var(--zenx-text-muted); }



/* ---- 7. Trust strip (deep navy rounded container) ---- */

.zenx-trust-strip {

  background: linear-gradient(135deg, var(--zenx-navy), var(--zenx-primary));

  border-radius: 16px;

  color: #fff;

  padding: 24px 20px;

  display: grid; gap: 20px;

  box-shadow: 0 14px 34px rgba(6,59,130,.28);

}

.zenx-trust-strip .zenx-trust-item {

  display: flex; align-items: center; gap: 12px;

  font-size: 14px; font-weight: 500; line-height: 1.4;

}

.zenx-trust-strip .zenx-trust-icon {

  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--zenx-radius-md);

  background: rgba(255,255,255,.12); color: #fff;

  display: flex; align-items: center; justify-content: center; font-size: 18px;

}



/* Trust bar (corporate home — deep navy rounded container, floating over hero) */

.zenx-trust {

  background: linear-gradient(135deg, var(--zenx-navy), var(--zenx-primary));

  border-radius: 16px; color: #fff;

  margin-top: -56px; padding: 32px 24px; position: relative; z-index: 2;

  box-shadow: 0 18px 40px rgba(6,59,130,.30);

}

.zenx-trust-item { text-align: center; padding: 12px 8px; position: relative; }

.zenx-trust-item + .zenx-trust-item::before {

  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);

  width: 1px; height: 56%; background: rgba(255,255,255,.14);

}

.zenx-trust-item strong {

  display: block; font-size: 1.7rem; font-weight: 800;

  color: #fff; letter-spacing: -.01em; line-height: 1.2;

}

.zenx-trust-item strong i { color: #fff; font-size: 1.4rem; vertical-align: middle; }

.zenx-trust-item span { color: rgba(255,255,255,.78); font-size: .86rem; font-weight: 500; }



/* ---- 8. Service cards ---- */

.zenx-service-card {

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border);

  border-radius: var(--zenx-radius-lg);

  padding: var(--zenx-space-5);

  height: 100%;

  transition: box-shadow .2s ease, transform .2s ease;

}

.zenx-service-card .zenx-service-icon {

  width: 48px; height: 48px; border-radius: 50%;

  background: var(--zenx-surface-blue); color: var(--zenx-primary);

  display: flex; align-items: center; justify-content: center;

  font-size: 20px; margin-bottom: var(--zenx-space-3);

}

.zenx-service-card .zenx-service-title {

  font-size: 16px; font-weight: 600; color: var(--zenx-navy); margin: 0 0 6px;

}

.zenx-service-card .zenx-service-desc {

  font-size: 14px; color: var(--zenx-text-muted); margin: 0;

}



/* ---- 9. Job cards ---- */

.zenx-job-card {

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border);

  border-radius: var(--zenx-radius-lg);

  padding: var(--zenx-space-5);

  height: 100%;

  display: flex; flex-direction: column;

  transition: box-shadow .2s ease, transform .2s ease;

}

.zenx-job-card .zenx-job-title {

  font-size: 17px; font-weight: 700; color: var(--zenx-navy); margin: 0 0 6px;

}

.zenx-job-card .zenx-job-meta { font-size: 13px; color: var(--zenx-text-muted); margin: 0 0 12px; }

.zenx-job-card .zenx-job-salary {

  font-size: 15px; font-weight: 600; color: var(--zenx-primary); margin: 0 0 16px;

}

.zenx-job-card .zenx-job-actions { margin-top: auto; }



/* ---- 10. Status pills (light bg + darker text) ---- */

.zenx-pill {

  display: inline-block; padding: 3px 10px; border-radius: 12px;

  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;

}

.zenx-pill-blue   { background: var(--zenx-surface-blue); color: var(--zenx-primary); }

.zenx-pill-green  { background: #E6F6EE; color: var(--zenx-success); }

.zenx-pill-orange { background: #FDF3E0; color: #B45309; }

.zenx-pill-red    { background: #FCEBEA; color: var(--zenx-danger); }

.zenx-pill-gray   { background: #EEF2F7; color: var(--zenx-text-muted); }



/* ---- 11. Forms ---- */

.zenx-form-control {

  display: block; width: 100%;

  min-height: 48px; padding: 10px 14px;

  font-size: 14px; font-family: inherit; color: var(--zenx-text);

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border); border-radius: 7px;

  transition: border-color .15s ease, box-shadow .15s ease;

}

.zenx-form-control::placeholder { color: var(--zenx-text-muted); opacity: .7; }

.zenx-form-control:focus {

  border-color: var(--zenx-primary);

  outline: none;

  box-shadow: 0 0 0 2px rgba(7,85,184,.15);

}

.zenx-form-label { font-size: 13px; font-weight: 600; color: var(--zenx-navy); margin-bottom: 6px; }

.zenx-form-hint { font-size: 12px; color: var(--zenx-text-muted); }



/* ---- 12. Lifecycle stepper ---- */

.zenx-stepper { display: flex; flex-wrap: wrap; gap: 6px; }

.zenx-stepper .zenx-step {

  font-size: 12px; padding: 4px 12px; border-radius: 20px;

  background: #EEF2F7; color: var(--zenx-text-muted); white-space: nowrap;

}

.zenx-stepper .zenx-step.done { background: #E6F6EE; color: var(--zenx-success); }

.zenx-stepper .zenx-step.current { background: var(--zenx-surface-blue); color: var(--zenx-primary); font-weight: 600; }

.zenx-stepper .zenx-step.failed { background: #FCEBEA; color: var(--zenx-danger); }



/* ---- 13. Sticky Apply bar (mobile job detail) ---- */

.zenx-sticky-apply { display: none; }



/* ---- 14. Split-screen auth ---- */

.zenx-split-auth { display: flex; flex-direction: column; min-height: 100%; }

.zenx-split-auth .zenx-auth-brand { display: none; }

.zenx-split-auth .zenx-auth-form { padding: 32px 20px; }



/* ---- 15. Empty state ---- */

.zenx-empty { text-align: center; padding: 48px 20px; color: var(--zenx-text-muted); }

.zenx-empty .zenx-empty-icon { font-size: 40px; margin-bottom: 8px; opacity: .5; color: var(--zenx-primary); }

.zenx-empty .zenx-empty-title { font-size: 16px; font-weight: 600; color: var(--zenx-navy); margin: 0 0 4px; }



/* ---- 16. Footer note ---- */

.zenx-footer-note {

  font-size: 12px; color: var(--zenx-text-muted);

  padding: var(--zenx-space-4) var(--zenx-space-5);

  text-align: center;

}

.zenx-footer-note a { color: var(--zenx-primary); }



/* ---- 17. Accessibility: visible focus ---- */

a:focus, button:focus, input:focus, select:focus, textarea:focus {

  outline: 2px solid var(--zenx-primary);

  outline-offset: 1px;

}



/* ============================================================

   Responsive — 768px (tablet) and 992px (desktop) only

   Bootstrap 4 grid handles the rest

   ============================================================ */

@media (min-width: 768px) {

  body { font-size: 15px; }



  .zenx-btn { min-height: 40px; }



  .zenx-hero { padding: 84px 24px 110px; }

  .zenx-hero h1 { font-size: 40px; }



  /* Trust strip: 4-col grid */

  .zenx-trust-strip { grid-template-columns: repeat(4, 1fr); padding: 28px 32px; }



  .zenx-section-title { font-size: 30px; }



  /* Job/service cards get shared hover lift */

  .zenx-service-card:hover, .zenx-job-card:hover {

    box-shadow: var(--zenx-shadow-md);

    transform: translateY(-2px);

  }



  .zenx-split-auth { flex-direction: row; }

  .zenx-split-auth .zenx-auth-brand { display: flex; }

  .zenx-split-auth .zenx-auth-form { padding: 48px; }



  .zenx-form-control { min-height: 44px; }

}



@media (min-width: 992px) {

  .zenx-hero { padding: 104px 32px 128px; }

  .zenx-hero h1 { font-size: 50px; }

  .zenx-hero p { font-size: 18px; }



  .zenx-section-title { font-size: 34px; }



  /* Split auth: brand panel 45% / form 55% */

  .zenx-split-auth .zenx-auth-brand {

    width: 45%;

    background: linear-gradient(135deg, #063B82, #0755B8);

    color: #fff;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 48px;

  }

  .zenx-split-auth .zenx-auth-form { width: 55%; }



  .zenx-sticky-apply { display: none; }

}



/* ---- Sticky Apply bar: fixed bottom, mobile only ---- */

@media (max-width: 767.98px) {

  .zenx-sticky-apply {

    display: block;

    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;

    background: var(--zenx-surface);

    border-top: 1px solid var(--zenx-border);

    padding: 10px 16px;

  }

  body.zenx-has-sticky-apply { padding-bottom: 72px; }

}



/* ============================================================

   18. Page components — consolidated from the inline <style>

       blocks of the recruitment Blade views (single source).

       Mirrors the exact values so inline blocks can be removed.

   ============================================================ */



/* Page hero (inner pages: solutions, service detail, track) */

.zenx-page-hero {

  background: linear-gradient(135deg, var(--zenx-navy), var(--zenx-primary));

  color: #fff; padding: 48px 0 88px;

}

.zenx-page-hero h1 { color: #fff; font-weight: 700; font-size: 2rem; }

.zenx-page-hero p { color: rgba(255,255,255,.85); margin-bottom: 0; }



/* Section titles used with <h2>/<p> inside */

.zenx-section-title h2 { color: var(--zenx-navy); font-weight: 800; letter-spacing: -.01em; }

.zenx-section-title p { color: var(--zenx-text-muted); }



/* Cards (corporate anatomy — premium white card) */

.zenx-card {

  height: 100%; padding: 28px 24px;

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border);

  border-radius: var(--zenx-radius-lg);

  box-shadow: var(--zenx-shadow-sm);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}

.zenx-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--zenx-shadow-md);

  border-color: #CFE0F5;

}

.zenx-card-icon {

  width: 56px; height: 56px; border-radius: 12px;

  background: var(--zenx-surface-blue); color: var(--zenx-primary);

  display: flex; align-items: center; justify-content: center;

  font-size: 1.5rem; margin-bottom: 16px;

  transition: background .18s ease, color .18s ease;

}

.zenx-card:hover .zenx-card-icon { background: var(--zenx-primary); color: #fff; }

.zenx-card h4 { color: var(--zenx-navy); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }

.zenx-card p { color: var(--zenx-text-muted); font-size: .92rem; margin-bottom: 0; }

.zenx-card-title { color: var(--zenx-navy); font-weight: 700; letter-spacing: -.01em; }

.zenx-card-meta { color: var(--zenx-text-muted); font-size: .88rem; }

.zenx-salary { color: var(--zenx-primary); font-weight: 700; }

.zenx-link-more {

  color: var(--zenx-primary); font-weight: 600; font-size: .9rem;

  transition: transform .15s ease;

}

.zenx-card:hover .zenx-link-more i { transform: translateX(4px); }

.zenx-link-more i { transition: transform .15s ease; }



/* Check list (why-us) */

.zenx-check-list { list-style: none; padding: 0; margin: 0; }

.zenx-check-list li { display: flex; align-items: flex-start; padding: 11px 0; color: #243B53; }

.zenx-check-list i { color: var(--zenx-success); margin-right: 12px; font-size: 1.1rem; margin-top: 2px; }



/* FAQ accordion items — flat interaction, no hover lift */

#zenxHomeFaq .zenx-card { box-shadow: none; transition: border-color .15s ease; }

#zenxHomeFaq .zenx-card:hover { transform: none; box-shadow: none; border-color: #CFE0F5; }



/* Industry items */

.zenx-industry-item {

  text-align: center; padding: 22px 12px;

  background: var(--zenx-surface);

  border: 1px solid var(--zenx-border);

  border-radius: var(--zenx-radius-lg);

  margin-bottom: 16px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

}

.zenx-industry-item:hover { transform: translateY(-3px); box-shadow: var(--zenx-shadow-md); border-color: #CFE0F5; }

.zenx-industry-item i { font-size: 1.6rem; color: var(--zenx-primary); display: block; margin-bottom: 10px; }

.zenx-industry-item span { font-size: .92rem; color: var(--zenx-navy); font-weight: 600; }



/* CTA banner (premium blue) */

.zenx-cta {

  background: linear-gradient(135deg, var(--zenx-navy) 0%, var(--zenx-primary) 100%);

  border-radius: 20px; color: #fff; padding: 56px 32px; text-align: center;

  position: relative; overflow: hidden;

  box-shadow: 0 22px 50px rgba(6,59,130,.30);

}

.zenx-cta::before {

  content: ''; position: absolute; top: -120px; right: -80px;

  width: 320px; height: 320px; border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);

}

.zenx-cta::after {

  content: ''; position: absolute; bottom: -140px; left: -60px;

  width: 300px; height: 300px; border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);

}

.zenx-cta > * { position: relative; z-index: 1; }

.zenx-cta h2 { color: #fff; font-weight: 800; letter-spacing: -.01em; }

.zenx-cta p { color: rgba(255,255,255,.88); }



/* Careers strip */

.zenx-careers-strip {

  background: linear-gradient(135deg, var(--zenx-surface-blue) 0%, #FFFFFF 100%);

  border: 1px solid #D8E8FB; border-radius: 16px; padding: 24px 28px;

  box-shadow: var(--zenx-shadow-sm);

}



/* Buttons (corporate variants) */

.zenx-btn-accent { background: var(--zenx-primary); border-color: var(--zenx-primary); color: #fff; box-shadow: 0 6px 16px rgba(7,85,184,.25); }

.zenx-btn-accent:hover, .zenx-btn-accent:focus { background: var(--zenx-navy); border-color: var(--zenx-navy); color: #fff; box-shadow: 0 8px 20px rgba(6,59,130,.32); }

.zenx-btn-white { background: #fff; border-color: #fff; color: var(--zenx-navy); box-shadow: 0 6px 16px rgba(15,45,80,.12); }

.zenx-btn-white:hover, .zenx-btn-white:focus { background: var(--zenx-surface-blue); border-color: var(--zenx-surface-blue); color: var(--zenx-navy); }

.zenx-btn-outline-white {

  background: transparent; border: 1px solid #C7DBF5; color: var(--zenx-primary);

  border-radius: var(--zenx-radius-sm); min-height: 48px; font-weight: 600; padding-left: 24px; padding-right: 24px;

}

.zenx-btn-outline-white:hover, .zenx-btn-outline-white:focus { background: var(--zenx-surface-blue); border-color: var(--zenx-primary); color: var(--zenx-primary); }



/* outline button on dark/blue surfaces — white border + white text */

.zenx-btn-outline-white-on-blue {

  background: transparent; border: 1px solid rgba(255,255,255,.75); color: #fff;

  border-radius: var(--zenx-radius-sm); min-height: 48px; font-weight: 600; padding-left: 24px; padding-right: 24px;

}

.zenx-btn-outline-white-on-blue:hover, .zenx-btn-outline-white-on-blue:focus { background: #fff; border-color: #fff; color: var(--zenx-navy); }



/* Empty state extras used by track_result */

.zenx-empty i { font-size: 3rem; color: var(--zenx-border); }

.zenx-empty h2 { font-size: 18px; font-weight: 600; color: var(--zenx-navy); margin: 8px 0 4px; }



/* Footer note (navy variant used on recruitment pages) */

.zenx-footer-note-navy { background: var(--zenx-navy); color: #fff; font-size: .9rem; }

.zenx-footer-note-navy a { color: var(--zenx-accent); }



/* Form steps (register wizard) — scoped so track_result timeline is untouched */

#zenx-register-form .zenx-step { display: none; }

#zenx-register-form .zenx-step.active { display: block; }



/* Track result timeline (vertical) */

.zenx-stepper-timeline { padding-left: 28px; position: relative; }

.zenx-stepper-timeline::before {

  content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px;

  background: var(--zenx-border);

}

.zenx-stepper-timeline .zenx-step {

  position: relative; margin-bottom: 20px; padding-left: 20px;

}

.zenx-stepper-timeline .zenx-step::before {

  content: ''; position: absolute; left: -25px; top: 2px; width: 14px; height: 14px;

  border-radius: 50%; background: var(--zenx-surface);

  border: 3px solid var(--zenx-primary);

}

.zenx-stepper-timeline .zenx-step.done::before { background: var(--zenx-primary); }

.zenx-step-time { display: block; font-size: 12px; color: var(--zenx-text-muted); }



/* ============================================================

   19. CMS chrome — pin the generic SmartEnd chrome to ZenX

       tokens so corporate CMS pages match the theme.

   ============================================================ */

body #topbar { background: var(--zenx-navy); color: #fff; }

body #topbar a { color: rgba(255,255,255,.85); }

body #header { background: var(--zenx-surface); border-bottom: 1px solid var(--zenx-border); }

body .navbar .nav-link { color: var(--zenx-text); }

body .navbar .nav-link:hover, body .navbar .nav-link.active { color: var(--zenx-primary); }

body #footer { background: var(--zenx-navy); color: rgba(255,255,255,.85); }

body #footer a { color: rgba(255,255,255,.85); }

body #footer a:hover { color: var(--zenx-accent); }

body .breadcrumbs { background: var(--zenx-bg); border-bottom: 1px solid var(--zenx-border); }

/* portal.css left the heading/breadcrumb text white (designed for its navy banner);

   ZenX replaced the banner with a light background, so re-darken the text to keep headings visible. */

body .breadcrumbs h1, body .breadcrumbs h2 { color: var(--zenx-navy); }

body .breadcrumbs ol li { color: var(--zenx-text-muted); }

body .breadcrumbs ol li a { color: var(--zenx-text-muted); }

body .breadcrumbs ol li a:hover { color: var(--zenx-primary); }

/* dark mode (colors.blade.php darkens the breadcrumb banner) — keep headings legible */

body.dark .breadcrumbs h1, body.dark .breadcrumbs h2 { color: #fff; }

body.dark .breadcrumbs ol li, body.dark .breadcrumbs ol li a { color: rgba(255,255,255,.75); }

body.dark .breadcrumbs ol li a:hover { color: var(--zenx-accent); }

/* Compact page heading banner — portal.css reserved a tall 400px hero;

   ZenX keeps a slim banner that still reads as a page header. */

body .breadcrumbs { min-height: 0; padding: 36px 0 44px; }

body .breadcrumbs h1, body .breadcrumbs h2 { font-size: 28px; margin: 0; }

body .breadcrumbs .d-flex { gap: 10px; }

body .breadcrumbs ol { margin-top: 10px; }

body .breadcrumbs::after { height: 24px; }

@media (max-width: 991px) {

    body .breadcrumbs { padding: 28px 0 34px; }

    body .breadcrumbs h1, body .breadcrumbs h2 { font-size: 22px; }

    body .breadcrumbs::after { height: 18px; }

}

body .btn-theme, body .btn-primary { background: var(--zenx-primary); border-color: var(--zenx-primary); }

body .btn-theme:hover, body .btn-primary:hover { background: var(--zenx-primary-hover); border-color: var(--zenx-primary-hover); }

body .section-title, body .section-title h2 { color: var(--zenx-navy); }

body .text-primary { color: var(--zenx-primary) !important; }

body .bg-primary { background: var(--zenx-primary) !important; }



/* Responsive tweaks matching the inline blocks */

@media (max-width: 767.98px) {

  .zenx-hero { padding: 48px 16px 88px; text-align: center; }

  .zenx-hero h1 { font-size: 1.75rem; }

  .zenx-hero p { font-size: 1rem; }

  .zenx-hero-cta { justify-content: center; }

  .zenx-page-hero { padding: 40px 0 72px; text-align: center; }

  .zenx-page-hero h1 { font-size: 1.6rem; }

  .zenx-cta { padding: 40px 20px; }

  .zenx-trust { margin-top: -44px; }

  .zenx-trust-item + .zenx-trust-item::before { display: none; }

  .zenx-svg-box { padding: 32px 20px; }

}



/* ============================================================

   20. ZenX chrome — header (LOCKED design, logistics_header partial)

   Desktop ≥1200: logo + full nav | Tablet/mobile <1200: logo + hamburger

   ============================================================ */

.zenx-header {

  --zh-bg: #071A2B;

  --zh-bg-2: #0B2438;

  --zh-text: #FFFFFF;

  --zh-muted: rgba(255, 255, 255, .78);

  --zh-accent: #D9A441;

  --zh-accent-2: #E7B85A;

  position: sticky;

  top: 0;

  z-index: 1030;

  width: 100%;

  background: var(--zh-bg);

}

.zenx-header-inner {

  max-width: 1240px;

  height: 78px;

  margin: 0 auto;

  padding: 0 32px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}

.zenx-brand {

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  text-decoration: none !important;

  line-height: 0;

}

.zenx-logo {

  display: block;

  width: 118px;

  height: auto;

  max-height: 60px;

  object-fit: contain;

}

.zenx-brand-text {

  font-size: 1.3rem;

  font-weight: 800;

  color: #fff;

  letter-spacing: -0.02em;

  line-height: 1;

}

.zenx-brand-text b { color: var(--zh-accent); font-weight: 800; }



.zenx-nav { margin-left: auto; }

.zenx-nav-list {

  display: flex;

  align-items: center;

  gap: 28px;

  list-style: none;

  margin: 0;

  padding: 0;

}

.zenx-nav a {

  display: block;

  white-space: nowrap;

  padding: 6px 0;

  color: var(--zh-muted);

  font-size: 14px;

  font-weight: 500;

  letter-spacing: .01em;

  text-decoration: none !important;

  border-bottom: 2px solid transparent;

  transition: color .2s ease, border-color .2s ease;

}

.zenx-nav a:hover {

  color: var(--zh-text);

  border-bottom-color: rgba(217, 164, 65, .55);

}

.zenx-nav a.active {

  color: var(--zh-text);

  border-bottom-color: var(--zh-accent);

  font-weight: 600;

}



.zenx-menu {

  display: none;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  margin-left: auto;

  background: transparent;

  border: none;

  color: #fff;

  font-size: 24px;

  line-height: 1;

  cursor: pointer;

  padding: 0;

}



/* ---- Tablet (768–1199) ---- */

@media (max-width: 1199.98px) {

  .zenx-header-inner { height: 72px; padding: 0 28px; }

  .zenx-logo { width: 112px; }

  .zenx-menu { display: inline-flex; }

  .zenx-nav {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    width: 100%;

    background: var(--zh-bg);

    border-top: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 14px 28px rgba(2, 10, 20, .35);

    margin: 0;

    padding: 22px 28px 24px;

    opacity: 0;

    transform: translateY(-5px);

    visibility: hidden;

  }

  body.zenx-header--ready .zenx-nav {

    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;

  }

  .zenx-nav.open {

    display: block;

    opacity: 1;

    transform: translateY(0);

    visibility: visible;

  }

  .zenx-nav-list {

    flex-direction: column;

    align-items: stretch;

    gap: 0;

  }

  .zenx-nav-list li { width: 100%; }

  .zenx-nav-list a {

    display: flex;

    align-items: center;

    min-height: 44px;

    padding: 8px 4px;

    font-size: 15px;

    font-weight: 500;

    color: var(--zh-muted);

    border-bottom: 1px solid rgba(255, 255, 255, .08);

    border-bottom-color: rgba(255, 255, 255, .08) !important;

  }

  .zenx-nav-list a:hover { color: var(--zh-text); background: rgba(255, 255, 255, .04); }

  .zenx-nav-list a.active { color: var(--zh-text); background: rgba(217, 164, 65, .10); font-weight: 600; }

  .zenx-nav-list li:last-child a { border-bottom: none; }

}



/* ---- Mobile (<768) ---- */

@media (max-width: 767.98px) {

  .zenx-header-inner { height: 66px; padding: 0 20px; }

  .zenx-logo { width: 104px; }

  .zenx-menu { width: 44px; height: 44px; font-size: 24px; }

  .zenx-nav { padding: 16px 20px 20px; }

  .zenx-nav-list a { min-height: 44px; font-size: 15px; }

}



/* ============================================================

   21. ZenX chrome — footer (logistics_footer partial)

   ============================================================ */

.zenx-lf { --zenx-navy:#063B82; --zenx-primary:#0755B8; --zenx-accent:#F39A22; background:var(--zenx-navy); color:#fff; }

.zenx-lf h4, .zenx-lf h5 { color:#fff; }

.zenx-lf-title { font-weight:700; font-size:1.15rem; }

.zenx-lf-legal { color:rgba(255,255,255,.75); font-size:.88rem; line-height:1.6; }

.zenx-lf-heading { font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--zenx-accent); margin-bottom:14px; }

.zenx-lf-links { list-style:none; padding:0; margin:0; }

.zenx-lf-links li { margin-bottom:10px; }

.zenx-lf-links a { color:rgba(255,255,255,.85); font-size:.93rem; text-decoration:none !important; }

.zenx-lf-links a:hover { color:var(--zenx-accent); }

.zenx-lf-bottom { background:rgba(0,0,0,.18); }

.zenx-lf-copy { color:rgba(255,255,255,.8); font-size:.88rem; }

.zenx-lf-extra a { color:rgba(255,255,255,.85); font-size:.88rem; text-decoration:none !important; }

.zenx-lf-extra a:hover { color:var(--zenx-accent); }

.zenx-lf-social { display:flex; gap:10px; }

.zenx-lf-social a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#fff; color:#111; text-decoration:none; transition:background-color .2s ease, color .2s ease; }

.zenx-lf-social a:hover { background:var(--zenx-accent); color:#fff; }

.zenx-lf-social .fab, .zenx-lf-social svg { display:block; }



/* ============================================================

   22. ZenX corporate home — premium logistics sections

   ============================================================ */



/* Eyebrow label (small caps above section headings) */

.zenx-eyebrow {

  display: inline-block; font-size: .72rem; font-weight: 800;

  letter-spacing: .14em; text-transform: uppercase; color: var(--zenx-primary);

  background: var(--zenx-surface-blue); border: 1px solid #D8E8FB;

  border-radius: 20px; padding: 5px 14px; margin-bottom: 14px;

}

.zenx-eyebrow-center { display: block; text-align: center; }

.zenx-eyebrow-on-blue { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }



/* Hero: slightly larger display heading + visual tags */

.zenx-home .zenx-hero { padding: 72px 16px 104px; }

.zenx-home .zenx-hero h1 { font-size: 40px; line-height: 1.12; }

.zenx-hero-visual-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.zenx-hero-visual-tags span {

  display: inline-flex; align-items: center; gap: 6px;

  background: #fff; border: 1px solid #D8E8FB; border-radius: 20px;

  color: var(--zenx-navy); font-size: .8rem; font-weight: 600;

  padding: 6px 13px;

}

.zenx-hero-visual-tags i { color: var(--zenx-primary); }



/* PAN INDIA NETWORK — split copy + network visual */

.zenx-network { padding: 72px 0; background: #fff; }

.zenx-network-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }

.zenx-network-copy h2 { font-size: 34px; font-weight: 800; color: var(--zenx-navy); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; }

.zenx-network-copy p { color: var(--zenx-text-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 28px; }

.zenx-network-stats { display: flex; gap: 36px; flex-wrap: wrap; }

.zenx-network-stat strong {

  display: block; font-size: 42px; font-weight: 800; color: var(--zenx-primary);

  letter-spacing: -.02em; line-height: 1.1;

}

.zenx-network-stat span { color: var(--zenx-text-muted); font-size: .9rem; font-weight: 600; }

.zenx-network-visual { position: relative; min-height: 340px; }

.zenx-network-map {

  position: absolute; inset: 0; border-radius: 20px;

  background: linear-gradient(160deg, var(--zenx-surface-blue) 0%, #FFFFFF 100%);

  border: 1px solid #D8E8FB; box-shadow: var(--zenx-shadow-sm);

  display: flex; align-items: center; justify-content: center; overflow: hidden;

}

.zenx-network-map::before {

  content: ''; position: absolute; inset: 18%;

  border-radius: 50%; border: 2px dashed rgba(7,85,184,.25);

  background: radial-gradient(circle, rgba(7,85,184,.06) 0%, rgba(7,85,184,0) 70%);

}

.zenx-network-map-ico { font-size: 7rem; color: rgba(7,85,184,.18); }

.zenx-network-pin {

  position: absolute; width: 38px; height: 38px; border-radius: 50%;

  background: var(--zenx-primary); color: #fff;

  display: flex; align-items: center; justify-content: center; font-size: .95rem;

  box-shadow: 0 6px 14px rgba(7,85,184,.35); animation: zenx-pin-pulse 2.6s infinite;

}

.zenx-network-pin-1 { top: 18%; left: 24%; }

.zenx-network-pin-2 { top: 34%; right: 20%; animation-delay: .6s; }

.zenx-network-pin-3 { bottom: 26%; left: 30%; animation-delay: 1.2s; }

.zenx-network-pin-4 { bottom: 16%; right: 32%; animation-delay: 1.8s; }

@keyframes zenx-pin-pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.12); }

}



/* SECURE & RELIABLE — premium card row */

.zenx-reliable { padding: 72px 0; background: var(--zenx-bg); border-top: 1px solid var(--zenx-border); border-bottom: 1px solid var(--zenx-border); }

.zenx-reliable .zenx-section-title h2 { margin-bottom: 10px; }



/* DEDICATED SUPPORT CTA banner */

.zenx-support-cta { padding: 64px 32px; }

.zenx-support-cta h2 { font-size: 32px; }



/* ---- ZENX support chat widget (floating, matches live-site behavior) ---- */

.zenx-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1050; }

.zenx-chat-btn {

  width: 58px; height: 58px; border-radius: 50%; border: 0;

  background: var(--zenx-primary); color: #fff; font-size: 1.4rem; cursor: pointer;

  box-shadow: 0 10px 30px rgba(7,85,184,.42);

  display: flex; align-items: center; justify-content: center;

  transition: background-color .15s ease, transform .15s ease;

}

.zenx-chat-btn:hover { background: var(--zenx-navy); transform: translateY(-2px); }

.zenx-chat-panel {

  position: absolute; right: 0; bottom: 72px; width: 340px; max-width: calc(100vw - 32px);

  background: #fff; border: 1px solid var(--zenx-border); border-radius: 16px;

  box-shadow: 0 20px 50px rgba(8,42,74,.28); overflow: hidden;

  display: none; flex-direction: column;

}

.zenx-chat-panel.open { display: flex; }

.zenx-chat-head {

  background: linear-gradient(135deg, var(--zenx-navy), var(--zenx-primary));

  color: #fff; padding: 15px 17px; font-weight: 700; font-size: .95rem;

  display: flex; align-items: center; justify-content: space-between;

}

.zenx-chat-close { background: none; border: 0; color: rgba(255,255,255,.85); font-size: 1.5rem; line-height: 1; cursor: pointer; }

.zenx-chat-close:hover { color: #fff; }

.zenx-chat-messages {

  height: 230px; overflow-y: auto; padding: 14px; background: #F7FAFD;

  display: flex; flex-direction: column; gap: 8px;

}

.zenx-chat-msg {

  align-self: flex-start; max-width: 80%;

  background: #fff; border: 1px solid var(--zenx-border); border-radius: 12px;

  padding: 9px 12px; font-size: .85rem; color: var(--zenx-text); line-height: 1.4;

}

.zenx-chat-msg-own { align-self: flex-end; background: var(--zenx-surface-blue); border-color: #D8E8FB; color: var(--zenx-navy); }

.zenx-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--zenx-border); }

.zenx-chat-input {

  flex: 1; min-width: 0; border: 1px solid var(--zenx-border); border-radius: 9px;

  padding: 10px 12px; font-size: .88rem; color: var(--zenx-text); font-family: inherit;

}

.zenx-chat-input:focus { border-color: var(--zenx-primary); outline: none; box-shadow: 0 0 0 2px rgba(7,85,184,.14); }

.zenx-chat-form button {

  border: 0; background: var(--zenx-primary); color: #fff; border-radius: 9px;

  padding: 0 15px; cursor: pointer; transition: background-color .15s ease;

}

.zenx-chat-form button:hover { background: var(--zenx-navy); }



/* Responsive — home sections */

@media (min-width: 768px) {

  .zenx-home .zenx-hero h1 { font-size: 46px; }

  .zenx-network-copy h2 { font-size: 38px; }

}

@media (min-width: 992px) {

  .zenx-home .zenx-hero h1 { font-size: 54px; }

  .zenx-network-copy h2 { font-size: 42px; }

}

@media (max-width: 991.98px) {

  .zenx-network-grid { grid-template-columns: 1fr; gap: 32px; }

  .zenx-network-visual { min-height: 280px; }

}

@media (max-width: 575.98px) {

  .zenx-home .zenx-hero { padding: 52px 16px 92px; }

  .zenx-network { padding: 56px 0; }

  .zenx-network-stats { gap: 24px; }

  .zenx-network-stat strong { font-size: 34px; }

  .zenx-reliable { padding: 56px 0; }

  .zenx-support-cta { padding: 44px 20px; }

  .zenx-chat { right: 14px; bottom: 14px; }

  .zenx-chat-panel { right: 0; bottom: 66px; }

}



/* ============================================================

   ZENX Logistics — Home page recreation (2026)

   Visual port of the live corporate site: HERO → PAN INDIA

   NETWORK → SECURE & RELIABLE → DEDICATED SUPPORT → CHAT.

   Scoped to .zenx-home-recreate so the locked ZenX header,

   footer and all other pages keep their existing styles.

   Palette: navy #071A2B / deep navy #061522 / gold #D9A441.

   ============================================================ */

.zenx-home-recreate {

  --zr-navy: #071A2B;

  --zr-navy-deep: #061522;

  --zr-navy-2: #0B2438;

  --zr-white: #FFFFFF;

  --zr-soft: #F4F7F9;

  --zr-gray: #C9D2D9;

  --zr-gold: #D9A441;

  --zr-gold-hover: #E7B85A;

  background: var(--zr-white);

  color: var(--zr-navy);

  overflow-x: hidden;

}

.zenx-home-recreate .zr-container {

  max-width: 1240px;

  padding-left: 32px;

  padding-right: 32px;

}



/* ---- Shared typography ---- */

.zenx-home-recreate .zr-eyebrow {

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 2.2px;

  text-transform: uppercase;

  color: var(--zr-gray);

}

.zenx-home-recreate .zr-eyebrow-gold {

  color: var(--zr-gold);

}

.zenx-home-recreate .zr-eyebrow-ink {

  color: var(--zr-navy);

  opacity: .55;

}

.zenx-home-recreate h1,

.zenx-home-recreate h2 {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.06;

  color: inherit;

  margin: 0;

}

.zenx-home-recreate h1 { font-size: 72px; }

.zenx-home-recreate h2 { font-size: 52px; }

.zenx-home-recreate h1 span { color: var(--zr-gold); }



/* ---- Buttons (slight radius, navy/gold, hover lift) ---- */

.zenx-home-recreate .zr-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 52px;

  padding: 0 26px;

  border-radius: 5px;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: .2px;

  text-decoration: none !important;

  border: 1px solid transparent;

  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;

}

.zenx-home-recreate .zr-btn:hover { transform: translateY(-2px); }

.zenx-home-recreate .zr-btn-light {

  background: var(--zr-white);

  color: var(--zr-navy) !important;

  border-color: var(--zr-white);

}

.zenx-home-recreate .zr-btn-light:hover {

  background: #F0F3F6;

  border-color: #F0F3F6;

  box-shadow: 0 10px 24px rgba(4, 18, 30, .18);

}

.zenx-home-recreate .zr-btn-gold {

  background: var(--zr-gold);

  color: var(--zr-navy) !important;

  border-color: var(--zr-gold);

}

.zenx-home-recreate .zr-btn-gold:hover {

  background: var(--zr-gold-hover);

  border-color: var(--zr-gold-hover);

  box-shadow: 0 10px 24px rgba(217, 164, 65, .35);

}



/* ---- SECTION 1 — HERO ---- */

/* Begins immediately below the LOCKED header (no gap, no overlap). */

.zenx-home-recreate .zr-hero {

  position: relative;

  min-height: calc(100vh - 78px);

  min-height: 680px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--zr-navy-deep);

  isolation: isolate;

}

.zenx-home-recreate .zr-hero-bg {

  position: absolute;

  inset: 0;

  z-index: -1;

  background:

    linear-gradient(90deg, rgba(4, 18, 30, .88) 0%, rgba(4, 18, 30, .72) 34%, rgba(4, 18, 30, .38) 68%, rgba(4, 18, 30, .16) 100%),

    linear-gradient(180deg, rgba(4, 18, 30, .55) 0%, rgba(4, 18, 30, .25) 45%, rgba(6, 21, 34, .92) 100%),

    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=2000&q=90') center/cover no-repeat;

}

.zenx-home-recreate .zr-hero .zr-container { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 40px; }

.zenx-home-recreate .zr-hero-copy { max-width: 640px; color: var(--zr-white); }

.zenx-home-recreate .zr-hero-copy .zr-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 26px;

  padding: 8px 14px;

  border: 1px solid rgba(217, 164, 65, .35);

  border-radius: 999px;

  background: rgba(217, 164, 65, .10);

  color: #E7C87C;

}

.zenx-home-recreate .zr-hero-copy .zr-eyebrow::before {

  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--zr-gold);

}

.zenx-home-recreate .zr-hero-copy h1 {

  max-width: 650px;

  margin-bottom: 26px;

  color: var(--zr-white);

}

.zenx-home-recreate .zr-hero-copy p {

  max-width: 580px;

  font-size: 18px;

  line-height: 1.65;

  color: rgba(255, 255, 255, .82);

  margin: 0 0 34px;

}

.zenx-home-recreate .zr-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

}



/* ---- SECTION 2 — PAN INDIA NETWORK ---- */

.zenx-home-recreate .zr-network {

  position: relative;

  background: var(--zr-navy);

  padding: 120px 0;

  overflow: hidden;

}

.zenx-home-recreate .zr-network-bg {

  position: absolute;

  inset: 0;

  background: url('../img/india-network-map.jpg') center/cover no-repeat;

  pointer-events: none;

}

.zenx-home-recreate .zr-network-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(7, 26, 43, .78) 0%, rgba(7, 26, 43, .55) 50%, rgba(7, 26, 43, .78) 100%),

              linear-gradient(180deg, rgba(7, 26, 43, .9) 0%, rgba(7, 26, 43, .55) 30%, rgba(7, 26, 43, .55) 70%, rgba(7, 26, 43, .95) 100%);

}

.zenx-home-recreate .zr-network .zr-container { position: relative; }

.zenx-home-recreate .zr-network-inner {

  max-width: 760px;

  margin: 0 auto;

  text-align: center;

  color: var(--zr-white);

}

.zenx-home-recreate .zr-network-inner .zr-eyebrow { margin-bottom: 18px; }

.zenx-home-recreate .zr-network-inner h2 {

  font-size: 54px;

  margin-bottom: 18px;

}

.zenx-home-recreate .zr-network-desc {

  max-width: 700px;

  margin: 0 auto;

  font-size: 17px;

  line-height: 1.7;

  color: rgba(255, 255, 255, .70);

}

.zenx-home-recreate .zr-numbers {

  display: flex;

  justify-content: center;

  margin-top: 56px;

}

.zenx-home-recreate .zr-number {

  flex: 1;

  max-width: 260px;

  text-align: center;

  position: relative;

  margin: 0 10px;

  padding: 34px 18px;

  background: rgba(255, 255, 255, .045);

  border: 1px solid rgba(255, 255, 255, .09);

  border-radius: 14px;

  backdrop-filter: blur(4px);

  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;

}

.zenx-home-recreate .zr-number:hover {

  transform: translateY(-4px);

  border-color: rgba(217, 164, 65, .35);

  background: rgba(255, 255, 255, .07);

}

.zenx-home-recreate .zr-number + .zr-number::before {

  content: "";

  position: absolute;

  left: -11px;

  top: 50%;

  transform: translateY(-50%);

  height: 56px;

  width: 1px;

  background: rgba(255, 255, 255, .10);

}

.zenx-home-recreate .zr-number b {

  display: block;

  font-size: 48px;

  font-weight: 750;

  color: var(--zr-gold);

  line-height: 1.1;

}

.zenx-home-recreate .zr-number span {

  display: block;

  margin-top: 8px;

  font-size: 13px;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  color: rgba(255, 255, 255, .62);

}



/* ---- SECTION 3 — SECURE & RELIABLE (50/50) ---- */

.zenx-home-recreate .zr-feature {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 640px;

  background: var(--zr-soft);

}

.zenx-home-recreate .zr-feature-img {

  position: relative;

  min-height: 600px;

  overflow: hidden;

}

.zenx-home-recreate .zr-feature-img > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.zenx-home-recreate .zr-feature-img::after {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(5, 20, 32, .14);

}

.zenx-home-recreate .zr-logo-watermark {

  position: absolute;

  right: 44px;

  bottom: 44px;

  width: 120px;

  height: auto;

  object-fit: contain;

  opacity: .14;

  z-index: 2;

}

.zenx-home-recreate .zr-feature-copy {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 88px 64px 88px 88px;

  background: var(--zr-soft);

}

.zenx-home-recreate .zr-feature-copy .zr-eyebrow { margin-bottom: 18px; }

.zenx-home-recreate .zr-feature-copy h2 {

  font-size: 52px;

  color: var(--zr-navy);

  margin-bottom: 20px;

}

.zenx-home-recreate .zr-feature-copy > p {

  font-size: 17px;

  line-height: 1.7;

  color: #5B6B7B;

  margin: 0 0 34px;

}

.zenx-home-recreate .zr-feature-copy ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.zenx-home-recreate .zr-feature-copy li {

  position: relative;

  padding-left: 34px;

  margin-bottom: 16px;

  font-size: 16px;

  font-weight: 500;

  color: #263746;

  line-height: 1.5;

}

.zenx-home-recreate .zr-feature-copy li::before {

  content: "\f00c";

  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome, sans-serif;

  font-weight: 900;

  position: absolute;

  left: 0;

  top: 1px;

  width: 22px;

  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  color: #fff;

  background: linear-gradient(135deg, var(--zr-gold), var(--zr-gold-hover));

  border-radius: 50%;

  box-shadow: 0 4px 10px rgba(217, 164, 65, .28);

}



/* ---- SECTION 4 — DEDICATED SUPPORT ---- */

.zenx-home-recreate .zr-support {

  position: relative;

  min-height: 460px;

  display: flex;

  align-items: center;

  padding: 100px 0;

  overflow: hidden;

}

.zenx-home-recreate .zr-support-bg {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(4, 18, 30, .82) 0%, rgba(4, 18, 30, .70) 100%),

    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1900&q=85') center/cover no-repeat;

}

.zenx-home-recreate .zr-support .zr-container { position: relative; text-align: center; }

.zenx-home-recreate .zr-support-container { max-width: 820px; }

.zenx-home-recreate .zr-support .zr-eyebrow { margin-bottom: 18px; }

.zenx-home-recreate .zr-support h2 {

  font-size: 52px;

  color: var(--zr-white);

  margin-bottom: 20px;

}

.zenx-home-recreate .zr-support p {

  max-width: 700px;

  margin: 0 auto 34px;

  font-size: 17.5px;

  line-height: 1.65;

  color: rgba(255, 255, 255, .76);

}

.zenx-home-recreate .zr-support .zr-btn-light { height: 50px; padding: 0 30px; border-radius: 4px; }



/* ---- Scroll reveal (subtle fade-up) ---- */

.zenx-home-recreate .zr-reveal {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity .6s ease, transform .6s ease;

}

.zenx-home-recreate .zr-reveal.zr-in { opacity: 1; transform: none; }



/* ---- Responsive ---- */

@media (max-width: 1199.98px) {

  .zenx-home-recreate h1 { font-size: 64px; }

  .zenx-home-recreate h2 { font-size: 46px; }

  .zenx-home-recreate .zr-network-inner h2 { font-size: 48px; }

  .zenx-home-recreate .zr-feature-copy { padding: 72px 48px; }

}

@media (max-width: 991.98px) {

  .zenx-home-recreate .zr-container { padding-left: 28px; padding-right: 28px; }

  .zenx-home-recreate h1 { font-size: 56px; }

  .zenx-home-recreate .zr-hero { min-height: 660px; }

  .zenx-home-recreate .zr-feature { grid-template-columns: 1fr; }

  .zenx-home-recreate .zr-feature-img { min-height: 420px; }

  .zenx-home-recreate .zr-feature-copy { padding: 72px 40px; }

  .zenx-home-recreate .zr-network, .zenx-home-recreate .zr-support { padding: 84px 0; }

  .zenx-home-recreate .zr-number { max-width: none; margin: 0 6px; }

  .zenx-home-recreate .zr-number + .zr-number::before { left: -7px; }

}

@media (max-width: 767.98px) {

  .zenx-home-recreate .zr-container { padding-left: 20px; padding-right: 20px; }

  .zenx-home-recreate h1 { font-size: 46px; line-height: 1.05; }

  .zenx-home-recreate h2, .zenx-home-recreate .zr-network-inner h2 { font-size: 40px; }

  .zenx-home-recreate .zr-hero { min-height: 680px; padding: 72px 0; }

  .zenx-home-recreate .zr-hero-copy p { font-size: 16px; }

  .zenx-home-recreate .zr-actions { flex-direction: column; align-items: stretch; }

  .zenx-home-recreate .zr-network { padding: 75px 20px; }

  .zenx-home-recreate .zr-numbers { flex-direction: column; gap: 16px; }

  .zenx-home-recreate .zr-number { margin: 0; padding: 26px 18px; }

  .zenx-home-recreate .zr-number + .zr-number::before { display: none; }

  .zenx-home-recreate .zr-feature-img { min-height: 350px; }

  .zenx-home-recreate .zr-feature-copy { padding: 55px 20px; }

  .zenx-home-recreate .zr-support { padding: 80px 0; }

}



/* ============================================================

   ZENX Logistics - Services page (2026) - editorial layout

   Visual match of the ZENX services reference: centered intro,

   large alternating feature rows (media + "ZENX SERVICE" +

   name + description + CTA), compact icon cards for the

   remaining services, then a CTA band. All copy is DB-driven

   (existing website content). Scoped to .zenx-services-page so

   header, footer and every other page keep their own styles.

   ============================================================ */

.zenx-services-page {

  --zsv-navy: #071A2B;

  --zsv-navy-2: #0B2438;

  --zsv-blue: #0755B8;

  --zsv-deep: #062F63;

  --zsv-blue-hover: #1476D4;

  --zsv-ink: #10213A;

  --zsv-muted: #66778F;

  --zsv-soft: #F4F8FD;

  --zsv-surface: #FFFFFF;

  --zsv-border: #DFE8F2;

  --zsv-blue-soft: #EAF3FF;

  --zsv-blue-line: #D8E8FB;

  --zsv-gold: #D9A441;

  --zsv-gold-2: #F2A915;

  --zsv-radius: 18px;

  --zsv-shadow-sm: 0 2px 8px rgba(15,45,80,.06);

  --zsv-shadow-md: 0 10px 35px rgba(16,59,107,.10);

  background: #fff;

  color: var(--zsv-ink);

  overflow-x: hidden;

}

.zenx-services-page .zr-container { max-width: 1180px; padding-left: 32px; padding-right: 32px; }



/* ---- Section head / intro ---- */

.zenx-services-page .zsv-intro {

  padding: 88px 0 56px;

  background:

    radial-gradient(900px 320px at 50% -80px, rgba(7, 89, 183, .08), transparent 65%),

    #fff;

}

.zenx-services-page .zsv-intro-inner {

  max-width: 780px;

  margin: 0 auto;

  text-align: center;

}

.zenx-services-page .zsv-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--zsv-blue);

  margin-bottom: 16px;

}

.zenx-services-page .zsv-eyebrow::before,

.zenx-services-page .zsv-eyebrow::after {

  content: "";

  width: 22px;

  height: 1px;

  background: var(--zsv-blue-line);

}

.zenx-services-page .zsv-title {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-size: 52px;

  font-weight: 800;

  letter-spacing: -0.025em;

  line-height: 1.06;

  color: var(--zsv-navy);

  margin: 0 0 18px;

}

.zenx-services-page .zsv-lead {

  font-size: 18px;

  line-height: 1.75;

  color: var(--zsv-muted);

  margin: 0;

}



/* ---- Feature rows (editorial, alternating) ---- */

.zenx-services-page .zsv-rows {

  padding: 24px 0 30px;

  background: #fff;

}

.zenx-services-page .zsv-feature {

  display: grid;

  grid-template-columns: 1.05fr .95fr;

  margin-bottom: 34px;

  background: #fff;

  border: 1px solid var(--zsv-border);

  border-radius: var(--zsv-radius);

  overflow: hidden;

  box-shadow: var(--zsv-shadow-sm);

  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;

}

.zenx-services-page .zsv-feature:hover {

  box-shadow: var(--zsv-shadow-md);

  border-color: #C9DDF5;

}

.zenx-services-page .zsv-feature--flip { grid-template-columns: .95fr 1.05fr; }

.zenx-services-page .zsv-feature--flip .zsv-feature-media { order: 2; }

.zenx-services-page .zsv-feature--flip .zsv-feature-body { order: 1; }



/* Media panel - soft brand-tinted visual with the service icon */

.zenx-services-page .zsv-feature-media {

  position: relative;

  min-height: 360px;

  background:

    radial-gradient(420px 260px at 78% 16%, rgba(7, 89, 183, .14), transparent 60%),

    radial-gradient(380px 240px at 10% 92%, rgba(7, 89, 183, .09), transparent 55%),

    linear-gradient(155deg, #EDF4FD 0%, #F9FBFE 55%, #E9F2FC 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.zenx-services-page .zsv-feature-media::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image: radial-gradient(rgba(7, 89, 183, .16) 1px, transparent 1.4px);

  background-size: 22px 22px;

  opacity: .5;

  pointer-events: none;

}

.zenx-services-page .zsv-feature-visual {

  position: relative;

  z-index: 2;

  width: 150px;

  height: 150px;

  border-radius: 34px;

  background: #fff;

  border: 1px solid var(--zsv-blue-line);

  box-shadow: 0 18px 40px rgba(7, 59, 130, .14);

  display: flex;

  align-items: center;

  justify-content: center;

}

.zenx-services-page .zsv-feature-visual i {

  font-size: 3.6rem;

  color: var(--zsv-blue);

  line-height: 1;

}

.zenx-services-page .zsv-feature-emoji {

  position: absolute;

  right: 22px;

  bottom: 20px;

  font-size: 46px;

  opacity: .9;

  z-index: 2;

  filter: drop-shadow(0 6px 12px rgba(7, 59, 130, .18));

}



/* Feature body */

.zenx-services-page .zsv-feature-body {

  padding: 48px 50px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.zenx-services-page .zsv-mini-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2.6px;

  text-transform: uppercase;

  color: var(--zsv-blue);

  margin-bottom: 14px;

}

.zenx-services-page .zsv-mini-emoji { font-size: 14px; letter-spacing: 0; }

.zenx-services-page .zsv-feature-title {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-size: 30px;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.15;

  color: var(--zsv-navy);

  margin: 0 0 14px;

}

.zenx-services-page .zsv-feature-text {

  font-size: 15.5px;

  line-height: 1.75;

  color: var(--zsv-muted);

  margin: 0 0 18px;

}

.zenx-services-page .zsv-feature-list {

  list-style: none;

  margin: 0 0 24px;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  gap: 8px 22px;

}

.zenx-services-page .zsv-feature-list li {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 13.5px;

  font-weight: 600;

  color: #243B53;

}

.zenx-services-page .zsv-feature-list i { color: var(--zsv-blue); font-size: .95rem; }



/* Learn More CTA */

.zenx-services-page .zsv-learn {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-size: 13.5px;

  font-weight: 800;

  color: var(--zsv-blue);

  text-decoration: none !important;

  letter-spacing: .2px;

  transition: gap .2s ease, color .2s ease;

}

.zenx-services-page .zsv-learn:hover { gap: 14px; color: var(--zsv-deep); }

.zenx-services-page .zsv-learn i { font-size: 13px; transition: transform .2s ease; }

.zenx-services-page .zsv-learn:hover i { transform: translateX(2px); }



/* ---- Compact additional-service cards ---- */

.zenx-services-page .zsv-minis {

  padding: 34px 0 76px;

  background: var(--zsv-soft);

  border-top: 1px solid var(--zsv-border);

}

.zenx-services-page .zsv-mini-head {

  text-align: center;

  margin-bottom: 40px;

}

.zenx-services-page .zsv-mini-head .zsv-eyebrow { margin-bottom: 10px; }

.zenx-services-page .zsv-mini-head h2 {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-size: 34px;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--zsv-navy);

  margin: 0;

}

.zenx-services-page .zsv-mini-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

}

.zenx-services-page .zsv-mini {

  display: flex;

  flex-direction: column;

  background: #fff;

  border: 1px solid var(--zsv-border);

  border-radius: var(--zsv-radius);

  padding: 32px 28px 28px;

  text-decoration: none !important;

  color: inherit;

  box-shadow: var(--zsv-shadow-sm);

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;

}

.zenx-services-page .zsv-mini:hover {

  transform: translateY(-5px);

  box-shadow: var(--zsv-shadow-md);

  border-color: #C9DDF5;

}

.zenx-services-page .zsv-mini-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 62px;

  height: 62px;

  border-radius: 16px;

  background: var(--zsv-blue-soft);

  border: 1px solid var(--zsv-blue-line);

  font-size: 26px;

  margin-bottom: 20px;

}

.zenx-services-page .zsv-mini h3 {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-size: 19px;

  font-weight: 800;

  letter-spacing: -0.01em;

  color: var(--zsv-navy);

  margin: 0 0 10px;

}

.zenx-services-page .zsv-mini p {

  font-size: 14px;

  line-height: 1.65;

  color: var(--zsv-muted);

  margin: 0 0 20px;

  flex: 1;

}



/* ---- CTA band ---- */

.zenx-services-page .zsv-cta {

  padding: 70px 0 96px;

  background: #fff;

}

.zenx-services-page .zsv-cta-inner {

  position: relative;

  background:

    radial-gradient(700px 260px at 90% -20%, rgba(255,255,255,.16), transparent 60%),

    linear-gradient(135deg, var(--zsv-deep) 0%, var(--zsv-blue) 100%);

  border-radius: 24px;

  padding: 64px 56px;

  text-align: center;

  color: #fff;

  overflow: hidden;

  box-shadow: 0 24px 60px rgba(7, 89, 183, .26);

}

.zenx-services-page .zsv-cta-inner::after {

  content: "";

  position: absolute;

  bottom: -130px;

  left: -70px;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);

}

.zenx-services-page .zsv-cta-inner > * { position: relative; z-index: 1; }

.zenx-services-page .zsv-cta h2 {

  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;

  font-size: 36px;

  font-weight: 800;

  letter-spacing: -.02em;

  line-height: 1.12;

  color: #fff;

  max-width: 760px;

  margin: 0 auto 14px;

}

.zenx-services-page .zsv-cta p {

  font-size: 16.5px;

  line-height: 1.6;

  color: rgba(255,255,255,.88);

  max-width: 640px;

  margin: 0 auto 30px;

}

.zenx-services-page .zsv-cta-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px;

}

.zenx-services-page .zsv-cta .zr-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 52px;

  padding: 0 28px;

  border-radius: 6px;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: .2px;

  text-decoration: none !important;

  border: 1px solid transparent;

  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;

}

.zenx-services-page .zsv-cta .zr-btn:hover { transform: translateY(-2px); }

.zenx-services-page .zsv-cta .zr-btn-gold {

  background: var(--zsv-gold-2);

  color: var(--zsv-navy) !important;

  border-color: var(--zsv-gold-2);

}

.zenx-services-page .zsv-cta .zr-btn-gold:hover {

  background: #ffb62e;

  border-color: #ffb62e;

  box-shadow: 0 10px 24px rgba(242, 169, 21, .35);

}

.zenx-services-page .zsv-btn-outline-light {

  background: transparent;

  color: #fff !important;

  border: 1px solid rgba(255,255,255,.65);

}

.zenx-services-page .zsv-btn-outline-light:hover {

  background: #fff;

  color: var(--zsv-navy) !important;

  border-color: #fff;

}



/* ---- Freight band inside the services page ---- */

.zenx-services-page .zenx-freight-band {

  background: var(--zsv-soft) !important;

  border-top: 1px solid var(--zsv-border);

}

.zenx-services-page .zenx-freight-band .zenx-section-title h2 { color: var(--zsv-navy); }

.zenx-services-page .zenx-freight-band .zenx-card {

  border-radius: 16px;

  box-shadow: var(--zsv-shadow-sm);

}

.zenx-services-page .zenx-freight-band .zenx-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--zsv-shadow-md);

  border-color: #C9DDF5;

}



/* ---- Responsive ---- */

@media (max-width: 1199.98px) {

  .zenx-services-page .zsv-feature-body { padding: 40px 36px; }

  .zenx-services-page .zsv-feature-title { font-size: 27px; }

}

@media (max-width: 991.98px) {

  .zenx-services-page .zr-container { padding-left: 28px; padding-right: 28px; }

  .zenx-services-page .zsv-title { font-size: 44px; }

  .zenx-services-page .zsv-feature,

  .zenx-services-page .zsv-feature--flip { grid-template-columns: 1fr; }

  .zenx-services-page .zsv-feature--flip .zsv-feature-media { order: 1; }

  .zenx-services-page .zsv-feature--flip .zsv-feature-body { order: 2; }

  .zenx-services-page .zsv-feature-media { min-height: 300px; }

  .zenx-services-page .zsv-mini-grid { grid-template-columns: repeat(2, 1fr); }

  .zenx-services-page .zsv-cta-inner { padding: 52px 36px; }

}

@media (max-width: 767.98px) {

  .zenx-services-page .zr-container { padding-left: 20px; padding-right: 20px; }

  .zenx-services-page .zsv-intro { padding: 60px 0 40px; }

  .zenx-services-page .zsv-title { font-size: 34px; }

  .zenx-services-page .zsv-lead { font-size: 16px; }

  .zenx-services-page .zsv-feature-body { padding: 30px 24px; }

  .zenx-services-page .zsv-feature-media { min-height: 250px; }

  .zenx-services-page .zsv-feature-visual { width: 120px; height: 120px; border-radius: 26px; }

  .zenx-services-page .zsv-feature-visual i { font-size: 2.9rem; }

  .zenx-services-page .zsv-feature-emoji { font-size: 36px; }

  .zenx-services-page .zsv-mini-grid { grid-template-columns: 1fr; }

  .zenx-services-page .zsv-minis { padding: 30px 0 56px; }

  .zenx-services-page .zsv-mini-head h2 { font-size: 27px; }

  .zenx-services-page .zsv-cta { padding: 48px 0 72px; }

  .zenx-services-page .zsv-cta-inner { padding: 44px 24px; border-radius: 18px; }

  .zenx-services-page .zsv-cta h2 { font-size: 27px; }

}


/* ============================================================
   ZENX Logistics - Network page (2026)
   Premium navy pan-India network hero over the existing map
   asset, stat cards and a light "what the network means"
   band. Scoped to .zenx-network-page so header, footer and
   every other page keep their own styles. Palette matches the
   Home recreation (navy #071A2B / deep #061522 / gold #D9A441
   + ZENX blue accents).
   ============================================================ */
.zenx-network-page {
  --znt-navy: #071A2B;
  --znt-navy-deep: #061522;
  --znt-navy-2: #0B2438;
  --znt-blue: #0755B8;
  --znt-blue-soft: #4FA3FF;
  --znt-white: #FFFFFF;
  --znt-soft: #F4F7F9;
  --znt-muted: #5B6B7B;
  --znt-gold: #D9A441;
  --znt-gold-hover: #E7B85A;
  --znt-line: rgba(255, 255, 255, .14);
  background: #fff;
  color: var(--znt-navy);
  overflow-x: hidden;
}
.zenx-network-page .zr-container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }

/* ---- Hero ---- */
.zenx-network-page .znt-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: var(--znt-navy-deep);
  isolation: isolate;
  overflow: hidden;
}
.zenx-network-page .znt-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.zenx-network-page .znt-map {
  position: absolute;
  inset: 0;
}
.zenx-network-page .znt-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.zenx-network-page .znt-map-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 18, 30, .92) 0%, rgba(4, 18, 30, .72) 40%, rgba(4, 18, 30, .42) 100%),
    linear-gradient(180deg, rgba(4, 18, 30, .6) 0%, rgba(4, 18, 30, .3) 50%, rgba(6, 21, 34, .94) 100%);
}
.zenx-network-page .znt-hero .zr-container { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 90px; }
.zenx-network-page .znt-hero-inner { max-width: 760px; color: var(--znt-white); }

.zenx-network-page .znt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--znt-gold);
  margin-bottom: 24px;
}
.zenx-network-page .znt-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--znt-gold);
  opacity: .7;
}
.zenx-network-page .znt-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--znt-white);
  margin: 0 0 24px;
}
.zenx-network-page .znt-lead {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  max-width: 640px;
  margin: 0 0 30px;
}

/* Legend */
.zenx-network-page .znt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 34px;
}
.zenx-network-page .znt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.zenx-network-page .znt-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--znt-blue-soft);
  box-shadow: 0 0 0 3px rgba(79, 163, 255, .25);
}
.zenx-network-page .znt-legend-dot--hub {
  background: var(--znt-gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .28);
}
.zenx-network-page .znt-legend-line {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
}

/* Decorative live network layer (nodes + links) */
.zenx-network-page .znt-live {
  position: relative;
  height: 180px;
  max-width: 520px;
  margin-top: 6px;
}
.zenx-network-page .znt-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zenx-network-page .znt-links line {
  stroke: rgba(79, 163, 255, .5);
  stroke-width: .18;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 2;
  animation: zntDash 30s linear infinite;
}
@keyframes zntDash { to { stroke-dashoffset: -200; } }
.zenx-network-page .znt-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--znt-blue-soft);
  box-shadow: 0 0 0 3px rgba(79, 163, 255, .2);
  transform: translate(-50%, -50%);
}
.zenx-network-page .znt-node--hub {
  width: 11px;
  height: 11px;
  background: var(--znt-gold);
  box-shadow: 0 0 0 4px rgba(217, 164, 65, .22);
}
.zenx-network-page .znt-node i {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0;
  animation: zntPing 3s ease-out infinite;
}
.zenx-network-page .znt-node--hub i { border-color: var(--znt-gold); }
.zenx-network-page .znt-node i { border-color: var(--znt-blue-soft); }
@keyframes zntPing {
  0% { opacity: .5; transform: scale(.5); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

/* ---- Stats ---- */
.zenx-network-page .znt-stats {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: #fff;
  padding: 80px 0 90px;
}
.zenx-network-page .znt-stats-inner {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.zenx-network-page .znt-stat {
  flex: 1;
  max-width: 280px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--znt-soft-border, #E4EAF2);
  border-top: 4px solid var(--znt-blue);
  border-radius: 16px;
  padding: 38px 22px 34px;
  box-shadow: 0 12px 32px rgba(7, 26, 43, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.zenx-network-page .znt-stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(7, 26, 43, .12);
}
.zenx-network-page .znt-stat b {
  display: block;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--znt-navy);
  line-height: 1;
}
.zenx-network-page .znt-stat span {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--znt-muted);
}

/* ---- Copy band (light) ---- */
.zenx-network-page .znt-copy {
  background: var(--znt-soft);
  padding: 90px 0;
  border-top: 1px solid #E4EAF2;
}
.zenx-network-page .znt-copy-inner { max-width: 1080px; margin: 0 auto; }
.zenx-network-page .znt-copy-head { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.zenx-network-page .znt-eyebrow--ink {
  color: var(--znt-muted);
}
.zenx-network-page .znt-eyebrow--ink::before { background: var(--znt-blue); opacity: .6; }
.zenx-network-page .znt-copy-head h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--znt-navy);
  margin: 0 0 18px;
}
.zenx-network-page .znt-copy-head p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--znt-muted);
  margin: 0;
}
.zenx-network-page .znt-copy-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.zenx-network-page .znt-point {
  background: #fff;
  border: 1px solid #E4EAF2;
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 8px 26px rgba(7, 26, 43, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.zenx-network-page .znt-point:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(7, 26, 43, .10);
  border-color: #CFE0F5;
}
.zenx-network-page .znt-point i {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #EAF4FF;
  color: var(--znt-blue);
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.zenx-network-page .znt-point h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--znt-navy);
  margin: 0 0 10px;
}
.zenx-network-page .znt-point p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--znt-muted);
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .zenx-network-page .zr-container { padding-left: 28px; padding-right: 28px; }
  .zenx-network-page .znt-title { font-size: 48px; }
  .zenx-network-page .znt-hero { min-height: 560px; }
  .zenx-network-page .znt-stats-inner { gap: 18px; }
  .zenx-network-page .znt-stat { padding: 30px 16px 28px; }
  .zenx-network-page .znt-stat b { font-size: 44px; }
  .zenx-network-page .znt-copy-points { grid-template-columns: 1fr; }
  .zenx-network-page .znt-copy { padding: 70px 0; }
}
@media (max-width: 767.98px) {
  .zenx-network-page .zr-container { padding-left: 20px; padding-right: 20px; }
  .zenx-network-page .znt-title { font-size: 38px; }
  .zenx-network-page .znt-lead { font-size: 16px; }
  .zenx-network-page .znt-hero { min-height: 520px; }
  .zenx-network-page .znt-hero .zr-container { padding-top: 64px; padding-bottom: 64px; }
  .zenx-network-page .znt-stats { padding: 56px 0 64px; }
  .zenx-network-page .znt-stats-inner { flex-direction: column; align-items: center; gap: 16px; }
  .zenx-network-page .znt-stat { max-width: 340px; width: 100%; }
  .zenx-network-page .znt-copy { padding: 56px 0; }
  .zenx-network-page .znt-copy-head h2 { font-size: 32px; }
  .zenx-network-page .znt-live { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .zenx-network-page .znt-links line { animation: none; }
  .zenx-network-page .znt-node i { animation: none; opacity: 0; }
}


/* ============================================================
   ZENX Logistics - News page (2026)
   Premium editorial news layout: full-bleed navy hero, a
   two-column feature block, a navy network-update band and the
   shared chat widget. Scoped to .zenx-news-page so header,
   footer and every other page keep their own styles. Palette
   matches the Home/Network recreation (navy + gold + ZENX blue).
   ============================================================ */
.zenx-news-page {
  --znw-navy: #071A2B;
  --znw-navy-deep: #061522;
  --znw-navy-2: #0B2438;
  --znw-blue: #0755B8;
  --znw-white: #FFFFFF;
  --znw-soft: #F4F7F9;
  --znw-muted: #5B6B7B;
  --znw-gold: #D9A441;
  --znw-gold-hover: #E7B85A;
  background: #fff;
  color: var(--znw-navy);
  overflow-x: hidden;
}
.zenx-news-page .zr-container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }

/* ---- Hero ---- */
.zenx-news-page .znw-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--znw-navy-deep);
  isolation: isolate;
  overflow: hidden;
}
.zenx-news-page .znw-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.zenx-news-page .znw-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
}
.zenx-news-page .znw-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 18, 30, .94) 0%, rgba(4, 18, 30, .78) 45%, rgba(4, 18, 30, .45) 100%),
    linear-gradient(180deg, rgba(4, 18, 30, .5) 0%, rgba(4, 18, 30, .2) 55%, rgba(6, 21, 34, .95) 100%);
}
.zenx-news-page .znw-hero .zr-container { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.zenx-news-page .znw-hero-inner { max-width: 780px; color: var(--znw-white); }

.zenx-news-page .znw-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 26px;
}
.zenx-news-page .znw-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--znw-gold);
  color: var(--znw-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.zenx-news-page .znw-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--znw-white);
  margin: 0 0 22px;
}
.zenx-news-page .znw-lead {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  max-width: 620px;
  margin: 0;
}

/* ---- Feature (two-column) ---- */
.zenx-news-page .znw-feature {
  padding: 96px 0 40px;
  background: #fff;
}
.zenx-news-page .znw-feature-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 56px;
}
.zenx-news-page .znw-feature-media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(7, 26, 43, .16);
}
.zenx-news-page .znw-feature-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.zenx-news-page .znw-feature-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--znw-gold);
  color: var(--znw-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.zenx-news-page .znw-feature-body { padding: 10px 0; }
.zenx-news-page .znw-tag--ink {
  background: #EAF4FF;
  color: var(--znw-blue);
  border: 1px solid #D8E8FB;
}
.zenx-news-page .znw-feature-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--znw-navy);
  margin: 0 0 20px;
}
.zenx-news-page .znw-feature-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--znw-muted);
  margin: 0;
}

/* ---- Network update band ---- */
.zenx-news-page .znw-update {
  position: relative;
  margin: 60px 0 96px;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
}
.zenx-news-page .znw-update-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 300px at 88% -20%, rgba(79, 163, 255, .22), transparent 60%),
    linear-gradient(120deg, var(--znw-navy-deep) 0%, var(--znw-navy-2) 55%, var(--znw-blue) 130%);
}
.zenx-news-page .znw-update-inner {
  padding: 72px 64px;
  color: var(--znw-white);
}
.zenx-news-page .znw-update-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--znw-white);
  max-width: 820px;
  margin: 0 0 18px;
}
.zenx-news-page .znw-update-text {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
  max-width: 720px;
  margin: 0 0 30px;
}
.zenx-news-page .znw-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 6px;
  background: var(--znw-gold);
  color: var(--znw-navy) !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.zenx-news-page .znw-more:hover {
  background: var(--znw-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(217, 164, 65, .32);
}
.zenx-news-page .znw-more i { transition: transform .2s ease; }
.zenx-news-page .znw-more:hover i { transform: translateX(4px); }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .zenx-news-page .zr-container { padding-left: 28px; padding-right: 28px; }
  .zenx-news-page .znw-title { font-size: 48px; }
  .zenx-news-page .znw-hero { min-height: 540px; }
  .zenx-news-page .znw-feature-grid { grid-template-columns: 1fr; gap: 36px; }
  .zenx-news-page .znw-feature { padding: 70px 0 30px; }
  .zenx-news-page .znw-update { margin: 40px 0 70px; }
}
@media (max-width: 767.98px) {
  .zenx-news-page .zr-container { padding-left: 20px; padding-right: 20px; }
  .zenx-news-page .znw-title { font-size: 38px; }
  .zenx-news-page .znw-lead { font-size: 16px; }
  .zenx-news-page .znw-hero { min-height: 500px; }
  .zenx-news-page .znw-hero .zr-container { padding-top: 72px; padding-bottom: 72px; }
  .zenx-news-page .znw-feature-media img { height: 280px; }
  .zenx-news-page .znw-feature-title { font-size: 34px; }
  .zenx-news-page .znw-update-inner { padding: 52px 26px; }
  .zenx-news-page .znw-update-title { font-size: 32px; }
}


/* ============================================================
   ZENX Logistics - Gallery page (2026)
   Premium gallery layout: centered intro, 3x2 responsive
   photo grid with captions, and a two-column video section.
   Scoped to .zenx-gallery-page so header, footer and every
   other page keep their own styles.
   ============================================================ */
.zenx-gallery-page {
  --zng-navy: #071A2B;
  --zng-navy-2: #0B2438;
  --zng-blue: #0755B8;
  --zng-white: #FFFFFF;
  --zng-soft: #F4F7F9;
  --zng-muted: #5B6B7B;
  --zng-gold: #D9A441;
  --zng-border: #E4EAF2;
  background: #fff;
  color: var(--zng-navy);
  overflow-x: hidden;
}
.zenx-gallery-page .zr-container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }

/* ---- Hero / intro ---- */
.zenx-gallery-page .zng-hero {
  padding: 96px 0 64px;
  background:
    radial-gradient(900px 320px at 50% -80px, rgba(7, 85, 184, .08), transparent 65%),
    #fff;
  border-bottom: 1px solid var(--zng-border);
}
.zenx-gallery-page .zng-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.zenx-gallery-page .zng-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--zng-blue);
  margin-bottom: 20px;
}
.zenx-gallery-page .zng-eyebrow::before,
.zenx-gallery-page .zng-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: #C9DDF5;
}
.zenx-gallery-page .zng-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--zng-navy);
  margin: 0 0 20px;
}
.zenx-gallery-page .zng-lead {
  font-size: 17px;
  line-height: 1.75;
  color: var(--zng-muted);
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Photo grid ---- */
.zenx-gallery-page .zng-photos {
  padding: 72px 0 30px;
  background: #fff;
}
.zenx-gallery-page .zng-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.zenx-gallery-page .zng-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--zng-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 59, 107, .08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.zenx-gallery-page .zng-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(16, 59, 107, .14);
  border-color: #C9DDF5;
}
.zenx-gallery-page .zng-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--zng-soft);
}
.zenx-gallery-page .zng-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.zenx-gallery-page .zng-card:hover .zng-card-img img { transform: scale(1.05); }
.zenx-gallery-page .zng-card figcaption {
  padding: 18px 22px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--zng-navy);
}

/* ---- Videos ---- */
.zenx-gallery-page .zng-videos {
  padding: 60px 0 100px;
  background: var(--zng-soft);
  border-top: 1px solid var(--zng-border);
}
.zenx-gallery-page .zng-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.zenx-gallery-page .zng-section-head .zng-eyebrow { margin-bottom: 12px; }
.zenx-gallery-page .zng-section-head h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--zng-navy);
  margin: 0 0 14px;
}
.zenx-gallery-page .zng-section-head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--zng-muted);
  margin: 0;
}
.zenx-gallery-page .zng-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.zenx-gallery-page .zng-video-card {
  background: #fff;
  border: 1px solid var(--zng-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 59, 107, .08);
}
.zenx-gallery-page .zng-video-card video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: #061522;
}
.zenx-gallery-page .zng-video-title {
  padding: 16px 22px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--zng-navy);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .zenx-gallery-page .zr-container { padding-left: 28px; padding-right: 28px; }
  .zenx-gallery-page .zng-title { font-size: 42px; }
  .zenx-gallery-page .zng-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .zenx-gallery-page .zr-container { padding-left: 20px; padding-right: 20px; }
  .zenx-gallery-page .zng-hero { padding: 64px 0 44px; }
  .zenx-gallery-page .zng-title { font-size: 34px; }
  .zenx-gallery-page .zng-lead { font-size: 16px; }
  .zenx-gallery-page .zng-photos { padding: 48px 0 20px; }
  .zenx-gallery-page .zng-grid { grid-template-columns: 1fr; gap: 20px; }
  .zenx-gallery-page .zng-videos { padding: 44px 0 64px; }
  .zenx-gallery-page .zng-video-grid { grid-template-columns: 1fr; gap: 20px; }
  .zenx-gallery-page .zng-section-head h2 { font-size: 30px; }
}


/* ============================================================
   ZENX Logistics - Work With Us page (2026)
   Premium "choose your role" page: centered intro and two
   large image role cards linking to the EXISTING recruiter /
   rider registration flows. Scoped to .zenx-work-page so
   header, footer and every other page keep their own styles.
   ============================================================ */
.zenx-work-page {
  --zxw-navy: #071A2B;
  --zxw-navy-2: #0B2438;
  --zxw-blue: #0755B8;
  --zxw-blue-hover: #1476D4;
  --zxw-white: #FFFFFF;
  --zxw-soft: #F4F7F9;
  --zxw-muted: #5B6B7B;
  --zxw-gold: #F2A915;
  --zxw-border: #E4EAF2;
  background: #fff;
  color: var(--zxw-navy);
  overflow-x: hidden;
}
.zenx-work-page .zr-container { max-width: 1180px; padding-left: 32px; padding-right: 32px; }

/* ---- Hero / intro ---- */
.zenx-work-page .zxw-hero {
  padding: 96px 0 60px;
  background:
    radial-gradient(900px 320px at 50% -80px, rgba(7, 85, 184, .08), transparent 65%),
    #fff;
}
.zenx-work-page .zxw-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.zenx-work-page .zxw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--zxw-blue);
  margin-bottom: 20px;
}
.zenx-work-page .zxw-eyebrow::before,
.zenx-work-page .zxw-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: #C9DDF5;
}
.zenx-work-page .zxw-eyebrow--ink { color: var(--zxw-muted); }
.zenx-work-page .zxw-eyebrow--ink::before,
.zenx-work-page .zxw-eyebrow--ink::after { background: #D8E8FB; }
.zenx-work-page .zxw-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--zxw-navy);
  margin: 0 0 20px;
}
.zenx-work-page .zxw-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--zxw-muted);
  max-width: 680px;
  margin: 0 auto;
}

/* ---- Role cards ---- */
.zenx-work-page .zxw-roles {
  padding: 20px 0 100px;
  background: #fff;
}
.zenx-work-page .zxw-roles-head {
  text-align: center;
  margin-bottom: 44px;
}
.zenx-work-page .zxw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.zenx-work-page .zxw-card {
  background: #fff;
  border: 1px solid var(--zxw-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(16, 59, 107, .10);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex;
  flex-direction: column;
}
.zenx-work-page .zxw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(16, 59, 107, .16);
  border-color: #C9DDF5;
}
.zenx-work-page .zxw-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zxw-soft);
}
.zenx-work-page .zxw-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.zenx-work-page .zxw-card:hover .zxw-card-media img { transform: scale(1.05); }
.zenx-work-page .zxw-card-body {
  padding: 40px 36px 42px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.zenx-work-page .zxw-symbol {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 18px;
}
.zenx-work-page .zxw-card-body h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--zxw-navy);
  margin: 0 0 12px;
}
.zenx-work-page .zxw-card-body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--zxw-muted);
  max-width: 360px;
  margin: 0 auto 28px;
}
.zenx-work-page .zxw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 8px;
  background: var(--zxw-blue);
  border: 1px solid var(--zxw-blue);
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  margin-top: auto;
}
.zenx-work-page .zxw-btn:hover {
  background: var(--zxw-blue-hover);
  border-color: var(--zxw-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(7, 85, 184, .24);
}
.zenx-work-page .zxw-btn--gold {
  background: var(--zxw-gold);
  border-color: var(--zxw-gold);
  color: var(--zxw-navy) !important;
}
.zenx-work-page .zxw-btn--gold:hover {
  background: #ffb62e;
  border-color: #ffb62e;
  box-shadow: 0 14px 28px rgba(242, 169, 21, .28);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .zenx-work-page .zr-container { padding-left: 28px; padding-right: 28px; }
  .zenx-work-page .zxw-title { font-size: 44px; }
  .zenx-work-page .zxw-grid { gap: 22px; }
  .zenx-work-page .zxw-card-body { padding: 32px 26px 34px; }
}
@media (max-width: 767.98px) {
  .zenx-work-page .zr-container { padding-left: 20px; padding-right: 20px; }
  .zenx-work-page .zxw-hero { padding: 64px 0 40px; }
  .zenx-work-page .zxw-title { font-size: 36px; }
  .zenx-work-page .zxw-lead { font-size: 16px; }
  .zenx-work-page .zxw-grid { grid-template-columns: 1fr; gap: 24px; }
  .zenx-work-page .zxw-roles { padding: 16px 0 64px; }
  .zenx-work-page .zxw-card-body { padding: 30px 24px 32px; }
}


/* ============================================================
   ZENX Logistics - About Us page (2026)
   Premium full-screen crossfading slider (About / Mission /
   Vision) plus a values band. Scoped to .zenx-about-page so
   header, footer and every other page keep their own styles.
   ============================================================ */
.zenx-about-page {
  --zxa-navy: #071A2B;
  --zxa-navy-deep: #061522;
  --zxa-navy-2: #0B2438;
  --zxa-blue: #0755B8;
  --zxa-blue-soft: #4FA3FF;
  --zxa-white: #FFFFFF;
  --zxa-soft: #F4F7F9;
  --zxa-muted: #5B6B7B;
  --zxa-gold: #D9A441;
  --zxa-border: #E4EAF2;
  background: #fff;
  color: var(--zxa-navy);
  overflow-x: hidden;
}
.zenx-about-page .zr-container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }

/* ---- Slider ---- */
.zenx-about-page .zxa-slider {
  position: relative;
  height: min(92vh, 780px);
  min-height: 560px;
  background: var(--zxa-navy-deep);
  isolation: isolate;
  overflow: hidden;
}
.zenx-about-page .zxa-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}
.zenx-about-page .zxa-slide.is-active { opacity: 1; visibility: visible; }
.zenx-about-page .zxa-slide-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.zenx-about-page .zxa-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
  transform: scale(1.05);
}
.zenx-about-page .zxa-slide.is-active .zxa-slide-bg img { animation: zxaKen 9s ease-out forwards; }
@keyframes zxaKen { from { transform: scale(1.08); } to { transform: scale(1); } }
.zenx-about-page .zxa-slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 18, 30, .94) 0%, rgba(4, 18, 30, .8) 42%, rgba(4, 18, 30, .42) 100%),
    linear-gradient(180deg, rgba(4, 18, 30, .55) 0%, rgba(4, 18, 30, .25) 50%, rgba(6, 21, 34, .96) 100%);
}
.zenx-about-page .zxa-slide .zr-container { position: relative; z-index: 2; }
.zenx-about-page .zxa-slide-inner { max-width: 800px; color: var(--zxa-white); }

.zenx-about-page .zxa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--zxa-gold);
  margin-bottom: 24px;
}
.zenx-about-page .zxa-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--zxa-gold);
  opacity: .7;
}
.zenx-about-page .zxa-eyebrow--ink { color: var(--zxa-muted); }
.zenx-about-page .zxa-eyebrow--ink::before { background: var(--zxa-blue); opacity: .5; }
.zenx-about-page .zxa-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--zxa-white);
  margin: 0 0 24px;
}
.zenx-about-page .zxa-text {
  font-size: 18px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 680px;
  margin: 0;
}

/* ---- Dots ---- */
.zenx-about-page .zxa-dots {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  z-index: 5;
}
.zenx-about-page .zxa-dot {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
  padding: 0;
}
.zenx-about-page .zxa-dot.is-active {
  background: var(--zxa-gold);
  transform: scaleX(1.15);
}

/* ---- Values ---- */
.zenx-about-page .zxa-values {
  padding: 90px 0 100px;
  background: #fff;
}
.zenx-about-page .zxa-values-head {
  text-align: center;
  margin-bottom: 52px;
}
.zenx-about-page .zxa-values-head .zxa-eyebrow { margin-bottom: 14px; }
.zenx-about-page .zxa-values-head h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--zxa-navy);
  margin: 0;
}
.zenx-about-page .zxa-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 980px;
  margin: 0 auto;
}
.zenx-about-page .zxa-value {
  background: #fff;
  border: 1px solid var(--zxa-border);
  border-radius: 18px;
  padding: 40px 28px 38px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(7, 26, 43, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.zenx-about-page .zxa-value:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(7, 26, 43, .11);
  border-color: #C9DDF5;
}
.zenx-about-page .zxa-value-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EAF4FF;
  color: var(--zxa-blue);
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.zenx-about-page .zxa-value h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--zxa-navy);
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .zenx-about-page .zr-container { padding-left: 28px; padding-right: 28px; }
  .zenx-about-page .zxa-title { font-size: 48px; }
  .zenx-about-page .zxa-slider { height: auto; min-height: 600px; }
  .zenx-about-page .zxa-slide { position: relative; display: none; align-items: center; padding: 96px 0; }
  .zenx-about-page .zxa-slide.is-active { display: flex; }
}
@media (max-width: 767.98px) {
  .zenx-about-page .zr-container { padding-left: 20px; padding-right: 20px; }
  .zenx-about-page .zxa-title { font-size: 36px; }
  .zenx-about-page .zxa-text { font-size: 16px; }
  .zenx-about-page .zxa-slide { padding: 84px 0; }
  .zenx-about-page .zxa-values { padding: 60px 0 70px; }
  .zenx-about-page .zxa-values-head h2 { font-size: 32px; }
  .zenx-about-page .zxa-values-grid { grid-template-columns: 1fr; gap: 18px; }
  .zenx-about-page .zxa-dot { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .zenx-about-page .zxa-slide.is-active .zxa-slide-bg img { animation: none; }
}