.sidebar {
  background-color: #222a42 !important;
  color: white;
}
.white-content .sidebar p {
  color: black;
}

.sidebar .nav i {
  color: black;
}


.sidebar .nav li:hover {
  background-color: #1d253b;
  border-radius: 5px;
}

.current  {
  background-color: #cbd5f1;
  border-radius: 5px;
}

.navbar {
  padding-top: 20px;
}

.main-nav li a {
  font-weight: 600;
}

.main-nav li a:hover{
  text-decoration: underline;
}

.banner {
  display: block;
  height: 10px;
  background-color: #0a0c0d;
  width: 100vw;
}

.tim-upload {
  width: 80px;
  font-size: 3rem;
  display: block;
  text-align: center;
  margin: auto;
}

i.file-icon:hover {
  color: #ff8d72;
}
i.file-icon {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #222a42;
}
.fileuploader-input {
  padding: 20px 0px 0 !important;
}
.card-body ul li a {
  color: #1d253b !important;
}
.card-body ul li a:hover {
  color: #ff8d72 !important;
}
.card-subtitle {
  font-weight: 100;
}
.referral-card {
  background-color: #222a42 !important;
  color: white !important;
}
.referral-card .card-header .title {
  color: white;
}
.referral-card .card-header .card-subtitle {
  color: white;
}

.referral-card input {
  background-color: white !important;
}
.form-control-round {
  border-radius: 100px;
}

.card .title {
  display: inline;
  font-weight: 100;
  font-size: 1.3rem;
}

.stats-card .card-header {
  display: inline;
  font-weight: 300;
  font-size: 1.1rem;
}

.stats-card .stat {
  font-size: 2rem;
  font-weight: 300;
}

.table-hover tbody tr {
  cursor: pointer;
}
alert.alert-outline {
  background-color: transparent !important;
}

.sidebar-wrapper {
  background-color: #222a42 !important;
  border-radius: 5px;
}

.pricing1 {
  padding-right: 0px;
  background-color: white;
}
.pricin .pricing2 {
  padding-left: 0px;
}

.faqs .card {
  background-color: whitesmoke;
}

.faqs .btn-link:hover {
  color: #222a42 !important;
}

.faqs .btn-link:visited {
  color: #222a42 !important;
}

.faqs .btn-link:any-link {
  color: #222a42 !important;
}

.faqs h4 {
  color: #222a42 !important;
}

.faqs .card-header {
  padding-bottom: 10px;
  cursor: pointer;
}

.faqs .card {
  margin-bottom: 10px;
}
.rates {
  color: white;
}
.card-warning {
  background: #ff8d72;
  background-image: -webkit-linear-gradient(
    to bottom left,
    #ff8d72,
    #ff6491,
    #ff8d72
  );
  background-image: -o-linear-gradient(
    to bottom left,
    #ff8d72,
    #ff6491,
    #ff8d72
  );
  background-image: -moz-linear-gradient(
    to bottom left,
    #ff8d72,
    #ff6491,
    #ff8d72
  );
  background-image: linear-gradient(to bottom left, #ff8d72, #ff6491, #ff8d72);
  background-size: 210% 210%;
  background-position: top right;
  background-color: #ff8d72;
  transition: all 0.15s ease;
  box-shadow: none;
}

.card-success {
  background: #00f2c3;
  background-image: -webkit-linear-gradient(
    to bottom left,
    #00f2c3,
    #0098f0,
    #00f2c3
  );
  background-image: -o-linear-gradient(
    to bottom left,
    #00f2c3,
    #0098f0,
    #00f2c3
  );
  background-image: -moz-linear-gradient(
    to bottom left,
    #00f2c3,
    #0098f0,
    #00f2c3
  );
  background-image: linear-gradient(to bottom left, #00f2c3, #0098f0, #00f2c3);
  background-size: 210% 210%;
  background-position: top right;
  background-color: #00f2c3;
  transition: all 0.15s ease;
  box-shadow: none;
  color: #ffffff;
}

.navbar .underline {
  text-decoration: underline;
}

.faq-item {
  margin-bottom: 10px;
}
.faq-item .row {
  padding: 0px 10px;
}
.faq-qa {
}
.faq-q {
  border-left: 3px solid #ff6491;
  padding: 10px 0px;
  background-color: rgba(255, 100, 145, 0.04);
}
.faq-q .row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.faq-q .point {
  /* display: inline; */
  font-size: 2rem;
  color: #ff6491;
  opacity: 0.5;
}

.faq-q .copy {
  color: white;
  font-size: 1.1rem;
  /* font-weight: 900; */
}

.faq-a {
  border-left: 3px solid #9096a7;
  padding: 10px 0px;
  background-color: rgba(144, 150, 167, 0.04);
}
.faq-a .row {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.faq-a .point {
  /* display: inline; */
  font-size: 2rem;
  color: #9096a7;
  opacity: 0.5;
}

.faq-a .copy {
  color: white;
  font-weight: 100;
}
/*.stats-card:hover{*/
/*background-image: linear-gradient(to bottom left, #e14eca, #ba54f5, #e14eca) !important;*/
/*background-size: 210% 210%;*/
/*background-position: top right;*/
/*background-color: #ff8d72;*/
/*transition: all 0.15s ease;*/
/*!*box-shadow: none;*!*/
/*color: white !important;*/
/*color: #ffffff;*/
/*}*/

.clickable-row {
  cursor: pointer;
}

.bordered-textarea {
  border: 1px solid #9096a7 !important;
  border-radius: 5px !important;
  line-height: 0px;
  /* background-color: red; */
}

.h {
  display: none;
}

#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

#card-delivery .card-body {
  padding: 0px;
}

.payment-card {
  border: 1px #ced1d8 solid !important;
}

.payment-card .card-header {
  text-align: center;
}

.payment-card .card-body {
  padding: 10% 30% !important;
}
.payment-card .card-footer {
  text-align: center;
}

.lynk-card .card-body {
  padding: 10% 10% !important;
}

.page-item.active .page-link {
  background-color: #222a42;
  border-color: #222a42;
}

#check-in-feed .feed {
  overflow-y: scroll;
  height: 700px;
}

#checkout,
#multi-checkout {
  height: 100%;
}

#checkout #feed,
#multi-checkout #feed {
  overflow-y: scroll;
  height: 100%;
}

.checkout-button-container {
  /* height: 150px; */
  /* width: 130px; */
}

.checkout-button-container input {
  background-color: #fff;
  font-size: 17px;
}

#checkout .checkout-payment-button,
#checkout .checkout-payment-button.unselected,
#multi-checkout .checkout-payment-button {
  background: white !important;
  color: black;
  height: 70px;
  width: 100%;
}

#checkout .checkout-payment-button.selected,
#checkout .checkout-payment-button:hover,
#multi-checkout .checkout-payment-button.selected,
#multi-checkout .checkout-payment-button:hover {
  color: white;
  background: #530073 !important;
  background-size: 210% 210%;
  background-position: top right;
  background-color: #530073 !important;
}

/*
 * A full-bleed page (the kiosk, the warehouse board).
 *
 * min-height, not height: the kiosk stylesheet rides in the same bundle as
 * every other component and paints html itself, so a body capped at one
 * viewport leaves that dark colour showing under any page long enough to
 * scroll.
 */
body.body-full {
  min-height: 100vh;
  overflow-x: hidden;
}

@media screen and (min-width: 600px) {
  #checkin-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media screen and (max-width: 600px) {
  #checkin-buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #checkin-buttons-container a {
    margin-bottom: 10px;
  }
}

#checkout .lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}

#checkout .lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #1f062f;
  border-color: #1f062f transparent #1f062f transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

#checkout .loading-modal-content {
  background-color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px 30px;
}

#checkout .loading-modal {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paypal-badge {
  background-color: #1d253b !important;
  margin: 0;
}

.lynkid-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='30px' width='85px'><text x='5' y='23' fill='black' font-size='12' font-family='arial'>@</text></svg>");
  padding-left: 21px;
  background-repeat: no-repeat;
}

/* Gradient buttons matching RocketSea style */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: linear-gradient(288deg, #FF9A3E 11.23%, #FF3F3A 46.66%, #D130AD 81.36%) !important;
  border: none !important;
  color: white !important;
}

/* Transparent signup button */
.btn-signup {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border: 1px solid white !important;
  color: white !important;
}

.btn-signup:hover,
.btn-signup:focus,
.btn-signup:active {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border: 1px solid white !important;
  color: white !important;
  opacity: 0.8;
}

/* Login button with white background at 20% opacity */
.btn-login {
  background-color: rgba(255, 255, 255, 0.2) !important;
  background-image: none !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid white !important;
  color: white !important;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active {
  background-color: rgba(255, 255, 255, 0.3) !important;
  background-image: none !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border: 1px solid white !important;
  color: white !important;
}

/* === Hero: animated isometric shipping-network scene ========================
   Markup is generated by tools/iso-hero-gen.js into
   resources/views/site/sections/logistics-hero.blade.php. Geometry is static
   SVG; everything that moves is driven from the keyframes below (plus SMIL
   <animateMotion> for the data packets travelling the signal lines). */
.iso-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.iso-hero__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- Motion --------------------------------------------------------------- */
/* Whole scene breathes up and down. */
.iso-scene {
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-float 7s ease-in-out infinite;
}

/* Live signal lines: dashes stream from sender to receiver. */
.iso-signal {
  animation: iso-dash 1.1s linear infinite;
}
.iso-node {
  animation: iso-pulse 2.2s ease-in-out infinite;
}

/* Satellite bobs and the dish catches light. */
.iso-satellite {
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-bob 5.5s ease-in-out infinite;
}

/* Plane drifts forward and dips gently; contrail trails behind. */
.iso-plane {
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-plane-drift 9s ease-in-out infinite;
}
.iso-contrail {
  stroke-dasharray: 6 10;
  animation: iso-dash 0.9s linear infinite reverse;
}

/* Weather badge: clouds drift, sun glows. */
.iso-cloud--a { animation: iso-drift 8s ease-in-out infinite; }
.iso-cloud--b { animation: iso-drift 11s ease-in-out infinite reverse; }
.iso-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-pulse 3.5s ease-in-out infinite;
}

/* Container ship rocks on the water; ripples shimmer. */
.iso-ship {
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-rock 6s ease-in-out infinite;
}
.iso-ripple { animation: iso-pulse 4s ease-in-out infinite; }

/* Vehicles give a tiny idle bounce. */
.iso-van   { transform-box: fill-box; transform-origin: center; animation: iso-bounce 4.5s ease-in-out infinite; }
.iso-truck { transform-box: fill-box; transform-origin: center; animation: iso-bounce 5.2s ease-in-out infinite 0.6s; }

/* Chimney smoke: each puff rises, swells and fades on its own offset. */
.iso-puff {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: iso-smoke 3.9s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes iso-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes iso-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
@keyframes iso-dash {
  to { stroke-dashoffset: -18; }
}
@keyframes iso-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes iso-plane-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(14px, -6px) rotate(-2deg); }
}
@keyframes iso-drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(10px); }
}
@keyframes iso-rock {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(1.4deg); }
}
@keyframes iso-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes iso-smoke {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.5); }
  25%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translate(-10px, -46px) scale(1.7); }
}

/* ---- Scroll-driven journey states (toggled by logistics-hero.js) ---------- */
/* The camera group is transformed inline by JS; keep its transitions smooth. */
.iso-camera { transition: transform 0.18s linear; }

/* Parcel + route + draw-on trail. The whole journey layer fades in/out as a
   unit (JS sets .iso-journey opacity), so nothing flashes before scroll. */
.iso-journey { opacity: 0; transition: opacity 0.4s ease; }
.iso-parcel-glow { animation: iso-pulse 1.2s ease-in-out infinite; }

/* When a leg is active, dim the rest of the network so the live one reads. */
.iso-scene.dim-links .iso-signal { opacity: 0.22; transition: opacity 0.4s ease; }
.iso-signal.is-active {
  opacity: 1 !important;
  stroke-width: 3.6;
  animation-duration: 0.6s;
  filter: drop-shadow(0 0 4px rgba(255, 140, 200, 0.9));
}

/* Active structure lights up (steady glow). */
.iso-uswh, .iso-jawh, .iso-store, .iso-house, .iso-rocket {
  transition: filter 0.45s ease;
}
.iso-uswh.is-active, .iso-jawh.is-active, .iso-store.is-active,
.iso-house.is-active, .iso-rocket.is-active {
  filter: drop-shadow(0 0 9px rgba(255, 209, 102, 0.95));
}

/* Rocketship: its transform is driven by JS; a light transition smooths the
   flight between scroll frames. Exhaust is hidden until the blast-off beat. */
.iso-rocket { transition: transform 0.12s linear, filter 0.45s ease; }
.iso-flame { opacity: 0; transform-box: fill-box; transform-origin: 50% 0%; }
#rocket.is-launching .iso-flame {
  opacity: 1;
  animation: iso-flicker 0.09s steps(2, end) infinite;
}
@keyframes iso-flicker {
  0%   { transform: scaleY(0.9) scaleX(1.06); opacity: 0.85; }
  100% { transform: scaleY(1.14) scaleX(0.94); opacity: 1; }
}

/* =====================================================================
   Landing page type — same three roles as the auth pages (css/auth.css):
   Poppins for display, Space Mono for labels, Poppins for body.
   Scoped to .wraper, which only the landing page uses, so the shared nav,
   footer and the other site pages are left on Poppins.
   ===================================================================== */
.wraper {
  --display: "Poppins", -apple-system, sans-serif;
  --utility: "Space Mono", ui-monospace, Menlo, monospace;
}

/* Display: headlines, card titles, the big numerals */
.wraper h1,
.wraper h2,
.wraper h3,
.wraper .stat__num,
.wraper .step-card__num,
.wraper .faq__item summary,
.wraper .btn {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

/* The numerals and the FAQ toggle read better without the display tracking */
.wraper .stat__num,
.wraper .step-card__num {
  letter-spacing: -0.01em;
}

.wraper .btn {
  letter-spacing: 0.01em;
}

/* Utility: eyebrows, stat labels, attribution (the tracker HUD sets its own) */
.wraper .journey__eyebrow,
.wraper .home-eyebrow,
.wraper .stat__label,
.wraper .quote-card__name {
  font-family: var(--utility);
  text-transform: uppercase;
}

/* Space Mono sets wider than Poppins, so the label sizes come down a notch */
.wraper .journey__eyebrow,
.wraper .home-eyebrow {
  font-size: 0.66rem;
}

/* The longest label ("Million packages shipped") has to survive a col-md-3 */
.wraper .stat__label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.wraper .quote-card__name {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

/* =====================================================================
   Journey — the live-tracking console that plays the package journey
   (markup in site/index.blade.php, driven by public/js/flat-hero.js)
   ===================================================================== */
.journey {
  position: relative;
  padding: 40px 0 24px;
}

/* Centered SaaS-style hero above the tracking console. */
.journey__intro {
  max-width: 840px;
  margin: 0 auto;
  padding: 4vh 6vw 0;
  text-align: center;
}
.journey__intro h1 {
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.journey__intro h1 em { color: #ffd166; font-style: normal; }
.journey__intro p {
  font-size: 1.12rem;
  color: #c3c7f0;
  margin: 0 auto 26px;
  max-width: 620px;
}
.journey__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff7ac4;
}

/* Sized so the console and its caption fit one viewport on a laptop. */
.tracker {
  --tracker-ink: rgba(9, 11, 34, 0.66);
  --tracker-line: rgba(255, 255, 255, 0.09);
  width: min(1120px, 92vw, calc((100vh - 190px) * 16 / 9));
  min-width: min(640px, 92vw);
  margin: 0 auto;
}
.tracker__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0c2a;
  border: 1px solid var(--tracker-line);
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, 0.75),
    0 0 0 6px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Soft vignette + top sheen so the scene reads as a lit screen. */
.tracker__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    radial-gradient(120% 90% at 50% 45%, transparent 62%, rgba(4, 5, 22, 0.55));
}
.flat-hero__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- HUD: tracking id + status ---------------------------------------- */
.tracker__hud {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}
.tracker__id,
.tracker__chip,
.tracker__bar {
  background: var(--tracker-ink);
  border: 1px solid var(--tracker-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tracker__id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 11px;
  color: #9ea5dc;
}
.tracker__code { color: #fff; }
.tracker__live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d7f;
  animation: tracker-live 1.8s ease-out infinite;
}
.tracker__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.tracker__chip {
  --tone: #7aa2ff;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--tone) 45%, transparent);
  color: #fff;
  white-space: nowrap;
}
.tracker__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 10px var(--tone);
}
.tracker__chip[data-tone="launch"] { --tone: #ffb43c; }
.tracker__chip[data-tone="ok"] { --tone: #34d399; }
.tracker__chip.is-swap { animation: tracker-swap 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tracker__telemetry {
  display: flex;
  gap: 14px;
  padding-right: 4px;
  color: #9ea5dc;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tracker__telemetry.is-on { opacity: 1; transform: none; }
.tracker__telemetry b { color: #ffe7a6; font-weight: 700; }

/* HUD type: Space Mono labels, same role as the eyebrows */
.tracker__id,
.tracker__chip,
.tracker__telemetry,
.tracker__name {
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tracker__chip { font-size: 0.68rem; letter-spacing: 0.1em; }

/* ---- Bottom bar: play/pause + milestone timeline ----------------------- */
.tracker__bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 26px 10px 10px;
  border-radius: 14px;
}
.tracker__toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--tracker-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tracker__toggle:hover { background: rgba(255, 255, 255, 0.12); }
.tracker__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tracker__icon--pause {
  width: 10px;
  height: 11px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.tracker__icon--play {
  display: none;
  margin-left: 1px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.tracker__toggle.is-paused .tracker__icon--pause { display: none; }
.tracker__toggle.is-paused .tracker__icon--play { display: block; }

.tracker__timeline {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: space-between;
  height: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tracker__rail {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.tracker__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff3d7f, #ffb43c 60%, #ffd166);
  transform: scaleX(0);
  transform-origin: left center;
}
.tracker__node {
  position: relative;
  width: 16px;
  display: flex;
  justify-content: center;
}
.tracker__node button {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.tracker__node button:focus-visible,
.tracker__toggle:focus-visible {
  outline: 2px solid #ffd166;
  outline-offset: 3px;
  border-radius: 50%;
}
.tracker__dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1c1f4a;
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.tracker__node.is-done .tracker__dot {
  background: #ffd166;
  border-color: #ffd166;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.45);
}
.tracker__node.is-current .tracker__dot {
  border-color: #ffd166;
  animation: tracker-pulse 1.6s ease-out infinite;
}
.tracker__name {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.58rem;
  color: rgba(199, 203, 240, 0.55);
  transition: color 0.35s ease;
}
.tracker__node:first-of-type .tracker__name { left: 0; transform: none; }
.tracker__node:last-child .tracker__name { left: auto; right: 0; transform: none; }
.tracker__node.is-done .tracker__name,
.tracker__node.is-current .tracker__name { color: #fff; }
.tracker__node button:hover .tracker__dot { border-color: #fff; }

/* Dip to dark between loops (JS drives opacity) and on a timeline jump. */
.tracker__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #070920;
  opacity: 0;
  pointer-events: none;
}
.tracker__screen.is-seeking .tracker__veil { animation: tracker-veil 0.5s ease-out; }

/* ---- Captions under the console ---------------------------------------- */
.tracker__captions {
  display: grid;
  max-width: 660px;
  margin: 28px auto 0;
  padding: 0 6vw;
  text-align: center;
}
.tracker__caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.tracker__caption.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}
.tracker__caption h2 {
  margin: 0 0 10px;
  font-weight: 700;
  line-height: 1.12;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}
.tracker__caption p {
  margin: 0;
  font-size: 1.04rem;
  color: #c3c7f0;
}

@keyframes tracker-live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 61, 127, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(255, 61, 127, 0); }
}
@keyframes tracker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.5); }
  100% { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0); }
}
@keyframes tracker-swap {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tracker-veil {
  from { opacity: 0.85; }
  to   { opacity: 0; }
}

/* ---- Phones: 4:3 screen, trimmed HUD ----------------------------------- */
@media (max-width: 640px) {
  .journey { padding-top: 28px; }
  .tracker { width: 94vw; min-width: 0; }
  .tracker__screen { aspect-ratio: 4 / 3; border-radius: 16px; }
  .tracker__hud { top: 10px; left: 10px; right: 10px; }
  .tracker__id { padding: 7px 9px; gap: 7px; }
  .tracker__code, .tracker__telemetry { display: none; }
  .tracker__chip { padding: 7px 10px 7px 9px; font-size: 0.58rem; }
  .tracker__id { font-size: 0.56rem; }
  .tracker__bar { left: 10px; right: 10px; bottom: 10px; gap: 12px; padding: 8px 14px 8px 8px; }
  .tracker__toggle { width: 28px; height: 28px; }
  .tracker__timeline { height: 16px; }
  .tracker__name { display: none; }
  .tracker__captions { margin-top: 20px; }
}

/* ---- Reduced motion: no autoplay; the timeline shows stills ------------ */
@media (prefers-reduced-motion: reduce) {
  .tracker__toggle { display: none; }
  .tracker__live, .tracker__node.is-current .tracker__dot, .tracker__chip.is-swap,
  .tracker__screen.is-seeking .tracker__veil { animation: none; }
  .tracker__caption, .tracker__telemetry { transition: none; }
}

/* =====================================================================
   Home content sections (below the journey console)
   ===================================================================== */
.home-section {
  padding: 84px 0;
}
.home-section--alt {
  background: rgba(20, 21, 46, 0.45);
}
.home-section__head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}
.home-section__head h2 {
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
}
.home-section__head p {
  font-size: 1.08rem;
  color: #c3c7f0;
  margin: 0;
}
.home-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff7ac4;
}

/* Feature cards */
.feature-grid > [class*="col-"] {
  margin-bottom: 30px;
}
.feature-card {
  height: 100%;
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(20, 21, 46, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 209, 102, 0.4);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 1.4rem;
  color: #14152e;
  background: #ffd166;
}
.feature-card h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.feature-card p {
  font-size: 0.98rem;
  color: #c3c7f0;
  margin: 0;
}

/* Stats band */
.home-stats {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  background-color: #1a1b3a;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 122, 196, 0.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255, 209, 102, 0.22), transparent 45%),
    radial-gradient(circle at 50% 120%, rgba(186, 84, 245, 0.25), transparent 55%);
}
/* Subtle dot grid overlay for texture. */
.home-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.home-stats .container { position: relative; z-index: 1; }
.home-stats .stat {
  text-align: center;
  padding: 14px 0;
}
.stat__num {
  display: block;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff;
}
.stat__label {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

/* How it works step cards */
.step-card {
  height: 100%;
  margin-bottom: 46px;
  padding: 30px 28px;
  border-radius: 18px;
  background: rgba(20, 21, 46, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.2rem;
  color: #14152e;
  background: #ffd166;
}
.step-card h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 10px;
}
.step-card p {
  font-size: 0.98rem;
  color: #c3c7f0;
  margin: 0;
}

/* Testimonial cards */
.quote-card {
  height: 100%;
  margin-bottom: 30px;
  padding: 28px 26px;
  border-radius: 18px;
  background: rgba(20, 21, 46, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.quote-card__stars {
  margin-bottom: 14px;
  color: #ffd166;
  font-size: 0.9rem;
}
.quote-card p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #e7e9ff;
  margin: 0 0 16px;
}
.quote-card__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #ff7ac4;
}

/* FAQ */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq__item {
  margin-bottom: 14px;
  padding: 18px 24px;
  border-radius: 14px;
  background: rgba(20, 21, 46, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.06rem;
  color: #fff;
  position: relative;
  padding-right: 28px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffd166;
  transition: transform 0.25s ease;
}
.faq__item[open] summary::after {
  content: "\2212";
}
.faq__item p {
  margin: 14px 0 0;
  font-size: 0.99rem;
  line-height: 1.6;
  color: #c3c7f0;
}

/* Final CTA */
.home-cta {
  padding: 96px 0;
  text-align: center;
}
.home-cta h2 {
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.home-cta p {
  font-size: 1.12rem;
  color: #c3c7f0;
  margin: 0 auto 28px;
  max-width: 540px;
}

@media (max-width: 767px) {
  .home-section { padding: 56px 0; }
  .home-cta { padding: 64px 0; }
  .home-stats .stat { padding: 12px 0; }
}

/* === Journey art: animated FLAT side-view world ============================
   Markup is generated by tools/flat-hero-gen.js into
   resources/views/site/sections/flat-hero.blade.php. public/js/flat-hero.js
   writes every moving transform; the loops below are ambient life only. */
.flat-star:nth-child(3n) { animation: flat-twinkle 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flat-glint { animation: flat-twinkle 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flat-beacon { animation: flat-blink 1.6s steps(1, end) infinite; animation-delay: var(--d, 0s); }
.flat-cloud--a { animation: flat-drift 18s ease-in-out infinite; }
.flat-cloud--b { animation: flat-drift 24s ease-in-out infinite reverse; }
.flat-wave--0 { animation: flat-wave 7s linear infinite; }
.flat-wave--1 { animation: flat-wave 10s linear infinite reverse; }
.flat-wave--2 { animation: flat-wave 14s linear infinite; }
.flat-ship { transform-box: fill-box; transform-origin: 50% 100%; animation: flat-bob 5s ease-in-out infinite; }
.flat-farship { animation: flat-sail 90s ease-in-out infinite alternate; }
.flat-tree, .flat-palm { transform-box: fill-box; transform-origin: 50% 100%; animation: flat-sway 7s ease-in-out infinite; }
.flat-palm:nth-of-type(2n) { animation-duration: 8.5s; animation-delay: -2s; }
.flat-bird { transform-box: fill-box; transform-origin: center; animation: flat-flap 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.flat-lampglow { animation: flat-pulse 2.8s ease-in-out infinite; }
.flat-flagsheen { animation: flat-sheen 3.4s ease-in-out infinite; }
.flat-livedot { animation: flat-blink 1.2s steps(1, end) infinite; }

/* Rocket exhaust flickers from the nozzle; JS sets the throttle scale. */
.flat-flame { animation: flat-flicker 0.09s steps(2, end) infinite; }

/* Conveyor belt runs while the parcel rides it. */
.flat-conveyor.is-running .flat-belt { animation: flat-belt 0.45s linear infinite; }

/* Vehicles puff exhaust while they move. */
.flat-exhaust { opacity: 0; transition: opacity 0.3s ease; }
.flat-veh.is-driving .flat-exhaust { opacity: 1; }
.flat-exhaustpuff { transform-box: fill-box; transform-origin: center; animation: flat-exhaust 0.75s ease-out infinite; animation-delay: var(--d, 0s); }

/* Facility signs light up while the parcel is inside. */
.flat-signglow { transition: opacity 0.6s ease; }
.is-active .flat-signglow { opacity: 1; }

@keyframes flat-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } }
@keyframes flat-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
@keyframes flat-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes flat-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(34px); } }
@keyframes flat-wave { from { transform: translateX(0); } to { transform: translateX(-80px); } }
@keyframes flat-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(1.2deg); } }
@keyframes flat-sail { from { transform: translateX(-120px); } to { transform: translateX(260px); } }
@keyframes flat-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes flat-flap {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25%      { transform: translate(10px, -6px) scaleY(0.55); }
  50%      { transform: translate(18px, 2px) scaleY(1); }
  75%      { transform: translate(9px, -4px) scaleY(0.6); }
}
@keyframes flat-sheen { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 1; } 70%, 100% { transform: translateX(96px); opacity: 0; } }
@keyframes flat-flicker { 0% { transform: scale(1.04, 0.93); } 100% { transform: scale(0.96, 1.07); } }
@keyframes flat-belt { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
@keyframes flat-exhaust {
  0%   { opacity: 0.7; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0;   transform: translate(-22px, -8px) scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .flat-star, .flat-glint, .flat-beacon, .flat-cloud--a, .flat-cloud--b, .flat-wave--0,
  .flat-wave--1, .flat-wave--2, .flat-ship, .flat-farship, .flat-tree, .flat-palm, .flat-bird,
  .flat-lampglow, .flat-flagsheen, .flat-livedot, .flat-flame, .flat-belt, .flat-exhaustpuff {
    animation: none !important;
  }
}
/* =====================================================================
   Public site footer (resources/views/site/sections/footer.blade.php)

   The blk-design-system default paints the footer with a radial ellipse
   that fades #292D61 into the page's own #171941 — it reads as a stray
   glow behind the links rather than as a deliberate edge. Replaced here
   with a flat, slightly deeper slab than the page body, separated by a
   brand hairline (the same pink-to-orange used by the nav underline).
   ===================================================================== */
.site-footer {
  position: relative;
  padding: 64px 0 28px;
  border-top: 0;
  background: #12132c;
  color: #b9bde6;
}

/* Brand hairline along the top edge */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ec1f7f, #f7941d);
}

.site-footer [class*="container"] {
  padding-right: 15px;
  padding-left: 15px;
}

.site-footer__top > [class*="col-"] {
  margin-bottom: 32px;
}

/* --- Brand column --- */
.site-footer__logo {
  display: inline-block;
  margin-bottom: 18px;
}
.site-footer__logo img {
  height: 38px;
  width: auto;
}
.site-footer__blurb {
  max-width: 340px;
  margin: 0 0 20px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #8f95c8;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.site-footer__social a:hover,
.site-footer__social a:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  transform: translateY(-2px);
  text-decoration: none;
}

/* --- Link columns --- */
.site-footer__title {
  margin: 0 0 16px;
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

.site-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links li {
  margin-bottom: 10px;
}
.site-footer__links a {
  font-size: 0.875rem;
  color: #a7acdb;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__links a:hover,
.site-footer__links a:focus {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__links--contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.site-footer__links--contact i {
  width: 16px;
  text-align: center;
  color: #f7941d;
  font-size: 0.85rem;
}

/* --- Payment marks + currency / security note --- */
.site-footer__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__marks {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
/* Same height tile for both, so the pair reads as one row even though the
   artwork inside is sized separately. */
.site-footer__mark {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: #ffffff;
}
.site-footer__mark img {
  display: block;
  width: auto;
}
.site-footer__mark-img--visa {
  height: 32px;
}
.site-footer__mark-img--mastercard {
  height: 20px;
}
.site-footer__pay-note {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #8f95c8;
}

/* --- Bottom bar --- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__copyright {
  margin: 0;
  font-size: 0.8rem;
  color: #7d83b8;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__legal a {
  font-size: 0.8rem;
  color: #7d83b8;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 991px) {
  .site-footer {
    padding: 48px 0 24px;
    text-align: left;
  }
  .site-footer__blurb {
    max-width: none;
  }
}

@media (max-width: 575px) {
  .site-footer__bottom {
    justify-content: center;
    text-align: center;
  }
  .site-footer__copyright {
    width: 100%;
    text-align: center;
  }
  .site-footer__legal {
    justify-content: center;
    width: 100%;
  }
  .site-footer__pay {
    justify-content: center;
    text-align: center;
  }
}