/* ==========================================================================
   Asoug Green — design tokens (colors/fonts sampled from Figma export)
   ========================================================================== */
:root {
  --color-primary: #8B5CF6;
  --color-primary-dark: #7C3AED;
  --color-primary-light: #A78BFA;
  --color-primary-soft: #EDE9FE;

  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-green-accent: #0E9F6E;

  --color-dark: #111827;
  --color-dark-soft: #1F2937;
  --color-navy-card: #102647;
  --color-blue-card: #2451B0;

  --color-light: #F9FAFB;
  --color-light-gray: #F3F4F6;
  --color-white: #FFFFFF;
  --color-border: #E5E7EB;

  --color-text: #000000;
  --color-text-body: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-placeholder: #D9D9D9;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius-btn: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 20px rgba(17, 24, 39, 0.06);
  --shadow-card-hover: 0 10px 30px rgba(17, 24, 39, 0.1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: var(--color-light);
  overflow-x: hidden;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 700;
}

h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 700;
}

a { text-decoration: none; }

.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.bg-light-alt { background: var(--color-light-gray); }
.bg-white-section { background: var(--color-white); }
.bg-dark { background: var(--color-dark); color: #D1D5DB; }
.bg-dark-soft { background: var(--color-dark-soft); color: #D1D5DB; }

.text-primary-custom { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-green-accent { color: var(--color-green-accent) !important; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-block;
  margin-bottom: 0.75rem;
}
.eyebrow.eyebrow-purple { color: var(--color-primary-light); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; }

.btn-purple {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 0.7rem 1.6rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-purple:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; transform: translateY(-1px); }

.btn-outline-purple {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 0.7rem 1.6rem;
  transition: background .2s ease, color .2s ease;
}
.btn-outline-purple:hover { background: var(--color-primary); color: #fff; }

.btn-dark-pill {
  background: #000;
  color: #fff;
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  border: 1px solid #000;
}
.btn-dark-pill:hover { background: var(--color-dark-soft); color: #fff; }

.btn-link-purple {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}
.btn-link-purple:hover { color: var(--color-primary-dark); }

/* ---------- Navbar ---------- */
.topbar {
  background: var(--color-dark);
  color: #9CA3AF;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.65rem 0;
}
.topbar a { color: #D1D5DB; text-transform: none; letter-spacing: normal; font-size: 0.8rem; }
.topbar a:hover { color: #fff; }
.topbar .divider { color: #4B5563; margin: 0 .5rem; }
.topbar .lang-btn {
  border: 1px solid #374151;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.85rem;
  /* Logical margin so the pill sits correctly in both LTR and RTL. */
  margin-inline-start: .75rem;
  /* It is a <button> in a form now (a real POST to locale.switch) rather
     than the dead href="#" anchor it used to be — reset the UA chrome so it
     still looks identical to the surrounding topbar links. */
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.topbar .lang-btn:hover {
  color: #fff;
  border-color: #6b7280;
}

.main-navbar { background: var(--color-light); padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  margin-right: 0.6rem;
  flex-shrink: 0;
}
.logo-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-right: 0.6rem;
  flex-shrink: 0;
}
.brand-text {
  font-family: var(--font-body);
  line-height: 1.1;
  font-size: 0.95rem;
  color: var(--color-text);
}
.brand-text strong { display: block; font-weight: 700; }
.brand-text .brand-green { color: var(--color-primary); font-weight: 700; }

.main-navbar .nav-link {
  color: #1F2937;
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
}
.main-navbar .nav-link.active,
.main-navbar .nav-link:hover { color: var(--color-primary); }

.btn-icon-search {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EEF0F3;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #374151;
}

/* ---------- Hero ---------- */
.hero-illustration img { border-radius: var(--radius-lg); width: 100%; height: auto; }

/* ---------- Stat band ---------- */
.stat-band { background: var(--color-dark); padding: 3rem 0; }
.stat-item { border-left: 1px solid #374151; padding-left: 1.5rem; }
.stat-number { font-family: var(--font-display); font-size: 3rem; color: var(--color-accent); line-height: 1; font-weight: 700; }
.stat-caption { color: #9CA3AF; font-size: 0.9rem; margin-top: 0.5rem; }

/* ---------- Cards ---------- */
.card-custom {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-custom:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
}
.icon-circle.icon-blue { background: #DBEAFE; color: #2563EB; }
.icon-circle.icon-green { background: #D1FAE5; color: #059669; }
.icon-circle.icon-orange { background: #FEF3C7; color: #D97706; }
.icon-circle.icon-purple { background: #EDE9FE; color: #7C3AED; }

.service-card-link { font-size: 0.85rem; font-weight: 600; }

/* ---------- Tabs (Four operating tracks) ---------- */
.track-tabs .nav-link {
  border-radius: var(--radius-pill);
  color: var(--color-text-body);
  font-weight: 600;
  padding: 0.55rem 1.4rem;
  background: transparent;
}
.track-tabs .nav-link.active { background: var(--color-primary); color: #fff; }
.track-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
}

/* ---------- Strategic initiatives ---------- */
.initiative-list { list-style: none; padding: 0; margin: 0; }
.initiative-list li {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  color: #9CA3AF;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .2s ease, color .2s ease;
}
.initiative-list li:hover { color: #fff; }
.initiative-list li.active { background: var(--color-primary); color: #fff; }

.initiative-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
  background-size: cover;
  background-position: center;
}
.initiative-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 55%);
}
.initiative-caption {
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  max-width: 70%;
}
.initiative-arrow {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Ecosystem integration panel ---------- */
.ecosystem-panel { background: var(--color-dark); border-radius: var(--radius-lg); padding: 2.5rem; }
.ecosystem-pill {
  background: #1A2233;
  border: 1px solid #2A3346;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #E5E7EB;
  font-size: 0.9rem;
  height: 100%;
}
.ecosystem-pill .pill-num {
  background: #232C3E;
  border-radius: 6px;
  color: var(--color-accent-light);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}
.ecosystem-pill .pill-plus { margin-left: auto; color: var(--color-accent-light); flex-shrink: 0; }

/* ---------- Ecosystem logos ---------- */
.eco-logo-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  text-align: center;
}
.eco-logo-card.active { border-color: var(--color-primary); }
.eco-logo-card strong { display: block; font-size: 0.85rem; }
.eco-logo-card span { font-size: 0.65rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.eco-logo-card.active span { color: var(--color-primary); }

/* ---------- Operating partner columns ---------- */
.partner-col {
  border-left: 3px solid var(--color-primary);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-size: 0.95rem;
  height: 100%;
}

/* ---------- Step list (numbered) ---------- */
.step-list { list-style: none; padding: 1.75rem; margin: 0; background: var(--color-light); border-radius: var(--radius-md); }
.step-list li { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-text); }
.step-list li:last-child { border-bottom: none; }
.step-num {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------- Portal cards ---------- */
.portal-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.75rem; height: 100%; }

/* ---------- Vision ---------- */
.vision-photo img { border-radius: var(--radius-lg); width: 100%; height: auto; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero-img img { border-radius: var(--radius-md); width: 100%; height: auto; }
.page-hero-placeholder {
  background: var(--color-placeholder);
  border-radius: var(--radius-md);
  width: 100%;
  aspect-ratio: 16 / 11;
}

/* ---------- Vision / Mission split cards ---------- */
.vm-card {
  border-radius: var(--radius-md);
  padding: 2rem;
  height: 100%;
  color: #E5E7EB;
}
.vm-card.vm-vision { background: linear-gradient(135deg, #0B1B33 0%, #14304F 100%); }
.vm-card.vm-mission { background: linear-gradient(135deg, #1E44A8 0%, #2F63DE 100%); }
.vm-card h6 {
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin: 1.25rem 0 1rem;
}
.vm-card.vm-vision h6 { color: var(--color-accent-light); }
.vm-card.vm-mission h6 { color: #fff; }
.vm-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.vm-card.vm-vision .vm-icon { background: rgba(245,158,11,.18); color: var(--color-accent-light); }
.vm-card.vm-mission .vm-icon { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Offer cards (icon + title only) ---------- */
.offer-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow .2s ease;
}
.offer-card:hover { box-shadow: var(--shadow-card); }
.offer-card .icon-circle { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 1.5rem; }
.offer-card h6 { font-size: 0.95rem; margin: 0; line-height: 1.4; }

/* ---------- Solution cards (photo on top) ---------- */
.solution-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
}
.solution-card img { border-radius: var(--radius-sm); width: 100%; height: 200px; object-fit: cover; margin-bottom: 1.25rem; }

/* ================= Shipment Management page ================= */

/* Full-bleed photo hero with dark gradient overlay */
.shipment-hero {
  position: relative;
  background-image: url('../images/shipment-hero.jpg');
  background-size: cover;
  background-position: center;
  padding: 6rem 0;
  color: #fff;
}
.shipment-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,32,26,.92) 0%, rgba(11,32,26,.55) 45%, rgba(11,32,26,.1) 100%);
}
.shipment-hero > .container { position: relative; z-index: 2; }
.hero-badge {
  display: inline-block;
  background: var(--color-accent-light);
  color: #3B2503;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}
.btn-amber {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-light);
  color: #3B2503;
  border-radius: var(--radius-btn);
  padding: 0.7rem 1.6rem;
  font-weight: 600;
}
.btn-amber:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 0.7rem 1.6rem;
  font-weight: 600;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Lifecycle stage cards (horizontal scroll on small screens) */
.lifecycle-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.lifecycle-track { display: flex; align-items: stretch; gap: 0; min-width: max-content; }
.lifecycle-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
  width: 200px;
  flex-shrink: 0;
}
.lifecycle-card.is-active { border-color: var(--color-dark); border-width: 2px; }
.lifecycle-card .stage-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #14532D;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.lifecycle-card.is-active .stage-icon { background: var(--color-dark); }
.lifecycle-card h5 { font-size: 1rem; margin-bottom: 0.5rem; }
.lifecycle-card p { font-size: 0.8rem; margin: 0; }
.lifecycle-arrow {
  display: flex; align-items: center;
  color: var(--color-text-muted);
  padding: 0 0.85rem;
  flex-shrink: 0;
}

/* Shipment Registration serpentine flow grid */
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 0; align-items: stretch; }
.flow-cell { display: flex; align-items: stretch; }
.flow-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.1rem;
  text-align: center;
  flex: 1 1 auto;
}
.flow-card.is-active { border-color: var(--color-dark); border-width: 2px; }
.flow-card .stage-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #14532D;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.flow-card.is-active .stage-icon { background: var(--color-dark); }
.flow-card h5 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.flow-card p { font-size: 0.8rem; margin: 0; }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  width: 44px;
  flex-shrink: 0;
}
/* Row 2 flows right-to-left in the Figma layout */
.flow-grid .row-rtl { direction: rtl; }
.flow-grid .row-rtl .flow-card { direction: ltr; }

@media (max-width: 991.98px) {
  .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .flow-arrow { display: none; }
  .flow-grid .row-rtl { direction: ltr; }
}
@media (max-width: 575.98px) {
  .flow-grid { grid-template-columns: 1fr; }
}

/* Panel card used across shipment sections */
.panel-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  height: 100%;
}
.panel-card h4, .panel-card h5 { color: #14532D; }
.panel-title-dark { color: var(--color-text) !important; }
.chip-badge {
  background: #E8F0EC;
  color: #14532D;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
}

/* Read-only form field display */
.field-label { font-size: 0.78rem; color: var(--color-text-body); margin-bottom: 0.3rem; }
.field-value {
  background: #F3F4F6;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  color: var(--color-text);
}
.notes-box {
  background: #F3F4F6;
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text);
}

/* Receiving process (dark panel with icon rows) */
.dark-panel { background: var(--color-dark); border-radius: var(--radius-md); padding: 1.75rem; height: 100%; }
.icon-row { display: flex; gap: 0.9rem; margin-bottom: 1.35rem; }
.icon-row:last-child { margin-bottom: 0; }
.icon-row .icon-ring {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #374151;
  color: #E5E7EB;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.icon-row strong { display: block; color: #fff; font-size: 0.9rem; font-weight: 600; }
.icon-row small { color: #9CA3AF; }

/* AI-driven operations (blue panel) */
.blue-panel {
  background: linear-gradient(150deg, #0B3C63 0%, #0D4B78 100%);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  height: 100%;
}
.blue-panel h4 { color: #7DD3FC; }
.blue-tile {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  height: 100%;
}
.blue-tile strong { display: block; color: #fff; font-size: 0.9rem; margin-bottom: 0.35rem; }
.blue-tile small { color: #A5D8F3; }

/* Status pill pair (Quality Assessment / Lab Test) */
.status-tile {
  background: #F3F4F6;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
}
.status-tile .lbl { font-size: 0.78rem; color: var(--color-text-body); }
.status-tile .val { font-weight: 700; font-size: 0.9rem; color: var(--color-text); }

/* Progress stepper */
.stepper { display: flex; align-items: flex-start; overflow-x: auto; padding-bottom: 0.5rem; }
.stepper-node { text-align: center; flex: 1 0 auto; min-width: 96px; position: relative; }
.stepper-node::before {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 100%; height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.stepper-node:last-child::before { display: none; }
.stepper-node.done::before { background: #14532D; }
.stepper-dot {
  display: block;
  position: relative;
  z-index: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-border);
  margin: 0 auto 0.75rem;
}
.stepper-node.done .stepper-dot { background: #14532D; }
.stepper-node.current .stepper-dot { background: #14532D; box-shadow: 0 0 0 4px rgba(20,83,45,.2); }
.stepper-label { display: block; font-size: 0.78rem; color: var(--color-text-body); }

/* Metric row (Current Location / ETA / ...) */
.metric-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.metric-item .bi { font-size: 1.15rem; color: var(--color-text); flex-shrink: 0; }
.metric-item .lbl { font-size: 0.78rem; color: var(--color-text-body); }
.metric-item .val { font-size: 1.15rem; font-weight: 700; color: var(--color-text); line-height: 1.25; }

/* Soft gray tile (Warehousing / Refrigerated Trucking / Distribution) */
.soft-tile {
  background: #F3F4F6;
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  height: 100%;
}
.soft-tile .bi { font-size: 1.1rem; color: #14532D; display: block; margin-bottom: 0.7rem; }
.soft-tile strong { display: block; font-size: 0.9rem; color: var(--color-text); margin-bottom: 0.4rem; }
.soft-tile small { color: var(--color-text-body); }

/* Financial integration inner box + white pills */
.inner-box { background: #F9FAFB; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.35rem; }
.pill-white {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Inventory progress + alert */
.inv-bar { height: 10px; background: var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.inv-bar span { display: block; height: 100%; background: #14532D; }
.alert-soft {
  background: #FEFCE8;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
}
.alert-soft .alert-title { color: var(--color-accent); font-size: 0.78rem; display: block; margin-bottom: 0.2rem; }

/* KPI tiles */
.kpi-tile { background: #F3F4F6; border-radius: var(--radius-sm); padding: 1.1rem; text-align: center; height: 100%; }
.kpi-tile .kpi-val { font-size: 1.35rem; font-weight: 700; color: #14532D; line-height: 1.2; }
.kpi-tile .kpi-lbl { font-size: 0.75rem; color: var(--color-text-body); }

/* Trigger matrix rows */
.trigger-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 0.88rem;
  color: var(--color-text);
}
.trigger-dot { width: 8px; height: 8px; border-radius: 50%; background: #14532D; flex-shrink: 0; }
.trigger-dot.warn { background: var(--color-accent); }
.trigger-dot.idle { background: var(--color-text-muted); }

/* Quote panel */
.quote-panel { background: var(--color-dark-soft); border-radius: var(--radius-md); padding: 3rem 2rem; text-align: center; }
.quote-panel p { color: #E5E7EB; max-width: 800px; margin: 0 auto; }
.quote-footer { border-top: 1px solid #374151; margin-top: 2.5rem; padding-top: 1.75rem; }
.partner-logo {
  width: 88px; height: 42px;
  background: #F3F4F6;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-dark);
  font-size: 0.6rem;
  text-align: center;
  line-height: 1.1;
}

/* ================= Logistics Solutions page ================= */

/* Section heading with left accent bar */
.heading-accent {
  border-left: 4px solid var(--color-accent-light);
  padding-left: 0.9rem;
  font-family: var(--font-body);
  font-weight: 700;
}

/* Ecosystem node tiles (Transportation / Truck Fleets / ...) */
.node-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
}
.node-tile .bi { font-size: 1.35rem; color: #14532D; display: block; margin-bottom: 0.75rem; }
.node-tile span { font-size: 0.9rem; color: var(--color-text); }

/* Feature list with icon + label + sublabel */
.feature-grid-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.feature-grid-item .bi { color: var(--color-accent); font-size: 1rem; line-height: 1.4; flex-shrink: 0; }
.feature-grid-item strong { display: block; font-size: 0.92rem; color: var(--color-text); font-weight: 600; }
.feature-grid-item small { color: var(--color-text-muted); }

/* Dark section rows (Cold Chain) */
.dark-row {
  background: #1A2233;
  border: 1px solid #2A3346;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #E5E7EB;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.dark-row .bi { color: #9CA3AF; }

/* Tracking dashboard card (dark) */
.tracking-card {
  background: #1A2233;
  border: 1px solid #2A3346;
  border-radius: var(--radius-md);
  padding: 1.75rem;
}
.tracking-row {
  background: #212A3C;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.tracking-row.is-transit { border-left-color: var(--color-accent-light); }
.tracking-row .label { color: #9CA3AF; }
.tracking-row .eta-ontime { color: var(--color-accent-light); }
.tracking-row .eta-late { color: #F87171; }
.tracking-stats { border-top: 1px solid #2A3346; padding-top: 1.25rem; margin-top: 1.25rem; }
.tracking-stats .stat-val { font-size: 1.5rem; font-weight: 700; color: #fff; }
.tracking-stats .stat-lbl { font-size: 0.75rem; color: #9CA3AF; }

/* Warehouse feature cards (icon in gray square) */
.wh-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
}
.wh-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #EEF0F3;
  color: var(--color-dark);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.wh-icon-dark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-dark);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Bulleted list with sublabels (Distribution & Delivery) */
.bullet-list { list-style: none; padding: 0; margin: 0; }
.bullet-list li { position: relative; padding-left: 1.5rem; margin-bottom: 1.1rem; }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .45rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #14532D;
}
.bullet-list strong { display: block; font-size: 0.95rem; color: var(--color-text); font-weight: 600; }
.bullet-list small { color: var(--color-text-body); }

/* Platform integration tiles (light blue) */
.integration-tile {
  background: #CFE0FB;
  border-radius: var(--radius-sm);
  padding: 1.5rem 1rem;
  text-align: center;
  color: #1E3A8A;
  height: 100%;
}
.integration-tile .bi { font-size: 1.2rem; display: block; margin-bottom: 0.65rem; }
.integration-tile span { font-size: 0.9rem; }

/* AI insights card (dark) */
.ai-card { background: var(--color-dark); border-radius: var(--radius-md); padding: 2rem; }
.ai-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.ai-item:last-child { margin-bottom: 0; }
.ai-item .bi { color: var(--color-accent-light); font-size: 1.1rem; flex-shrink: 0; }
.ai-item strong { display: block; color: #E5E7EB; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
.ai-item small { color: #9CA3AF; }

/* Report cards (key/value rows) */
.report-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
}
.report-card .report-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  color: var(--color-text);
  font-size: 0.95rem;
}
.report-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.report-row:last-child { border-bottom: none; }
.report-row .val { font-weight: 700; color: var(--color-text); }
.report-row .val.neg { color: #DC2626; }
.report-row .val.pos { color: #14532D; }
.report-row .val.live { color: var(--color-accent); }

/* Service ecosystem chips (dark CTA section) */
.eco-chip {
  background: #2A3346;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  color: #E5E7EB;
  font-size: 0.85rem;
  display: inline-block;
}

/* ---------- Initiative cards (Strategic Projects page) ---------- */
.initiative-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  height: 100%;
}
.initiative-card .card-thumb {
  background: var(--color-placeholder);
  border-radius: var(--radius-sm);
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.25rem;
}
.initiative-card h5 { font-size: 0.95rem; margin: 0 0 0.9rem; }
.initiative-card p { font-size: 0.85rem; margin: 0; }

/* ---------- Vision banner (Strategic Projects page) ---------- */
.vision-banner {
  background: linear-gradient(115deg, #0B1B33 0%, #123A6B 55%, #0E2647 100%);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  color: #D1D5DB;
}
.vision-banner h6 {
  font-family: var(--font-display);
  color: var(--color-accent-light);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin: 1.25rem 0 1rem;
}
.vision-banner .vm-icon { background: rgba(245,158,11,.18); color: var(--color-accent-light); }

/* ---------- Service detail cards (Our Services page) ---------- */
.service-detail-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-detail-card .card-thumb {
  background: var(--color-placeholder);
  border-radius: var(--radius-sm);
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.25rem;
}
.service-detail-card h5 { margin-bottom: 1rem; font-size: 1.05rem; }
.service-detail-card .card-desc { font-size: 0.9rem; margin-bottom: 1.25rem; }
.service-detail-card h6 { font-size: 0.85rem; margin-bottom: 0.9rem; }
.service-detail-card .btn { margin-top: auto; width: 100%; }

.tick-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--color-text-body);
  margin-bottom: 0.6rem;
}
.tick-list li .bi {
  color: var(--color-dark);
  font-size: 0.95rem;
  line-height: 1.35;
  flex-shrink: 0;
}

/* ---------- Check list (Why / Objectives) ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  color: var(--color-text);
  width: auto;
  transition: background .2s ease, color .2s ease;
}
.check-list li .bi {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--color-primary-light);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.check-list li.highlight { background: var(--color-primary); color: #fff; }
.check-list li.highlight .bi { background: rgba(255,255,255,.3); }

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--color-dark-soft); padding: 4.5rem 0; text-align: center; }
.cta-banner .callout {
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent-light);
  padding: 1rem 1.5rem;
  display: inline-block;
  margin-top: 1.5rem;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: #9CA3AF; padding: 3.5rem 0 1.5rem; font-size: 0.9rem; }
.site-footer h6 { color: var(--color-primary-light); font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.65rem; }
.site-footer a { color: #9CA3AF; }
.site-footer a:hover { color: #fff; }
.footer-input {
  background: #1F2937;
  border: 1px solid #374151;
  color: #fff;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.footer-input::placeholder { color: #6B7280; }
.footer-input:focus { background: #1F2937; color: #fff; box-shadow: none; border-color: var(--color-primary); }
.footer-submit-btn { background: var(--color-primary); border: 1px solid var(--color-primary); color: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.social-icon {
  width: 34px; height: 34px;
  border: 1px solid #374151;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9CA3AF;
  font-size: 0.8rem;
}
.social-icon:hover { color: #fff; border-color: #6B7280; }
.footer-bottom { border-top: 1px solid #1F2937; margin-top: 2.5rem; padding-top: 1.25rem; font-size: 0.75rem; color: #6B7280; }

/* ---------- Back to top ---------- */
#backToTop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card-hover);
  z-index: 999;
}
#backToTop.show { display: inline-flex; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .main-navbar .navbar-nav { margin: 1rem 0; }
  .main-navbar .nav-actions { margin-top: .5rem; }
  .section { padding: 3.5rem 0; }
  .stat-item { border-left: none; border-top: 1px solid #374151; padding: 1rem 0 0; margin-top: 1rem; }
  .stat-item:first-child { border-top: none; margin-top: 0; }
}

@media (max-width: 767.98px) {
  h1 { font-size: 2rem !important; }
  .section { padding: 2.75rem 0; }
  .initiative-caption { font-size: 1.25rem; max-width: 85%; }
  .cta-banner { padding: 3rem 0; }
}

/* ---------- Auth pages (login/register) ---------- */
.auth-shell { min-height: 100vh; }

.auth-illustration-panel {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary-dark) 100%);
  position: relative;
  overflow: hidden;
  padding: 3.5rem;
}
.auth-illustration-panel .brand-text { color: #fff; }
.auth-illustration-panel .brand-text .brand-green { color: var(--color-accent-light); }
.auth-illustration-heading {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 2.5rem;
  font-size: 1.85rem;
}
.auth-illustration-text { color: #C7CDD6; max-width: 420px; }
.auth-illustration-svg { width: 100%; max-width: 400px; height: auto; margin-top: 2rem; }

.auth-form-panel { background: var(--color-light); }
.auth-card { width: 100%; max-width: 460px; }
.auth-card .form-label { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.auth-card .form-control,
.auth-card .form-select {
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.9rem;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}
.auth-card .btn-purple { width: 100%; padding: 0.75rem 1.6rem; }
.auth-back-link { color: var(--color-text-body); font-size: 0.875rem; }
.auth-back-link:hover { color: var(--color-primary); }