/* ============================================
   hero.css — Homepage hero
   ============================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + var(--topbar-h) + 3rem) 0 7.5rem;
  color: #fff;
  overflow: hidden;
  background: var(--km-dark-bg);
}
.hero__bg { position: absolute; inset: -6% 0; z-index: 1; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(10,10,20,.94) 8%, rgba(15,15,26,.78) 42%, rgba(15,15,26,.28) 78%, rgba(15,15,26,.45) 100%);
}
.hero__routes { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .7; }
.hero__routes path { stroke-dasharray: 6 10; animation: km-route 7s linear infinite; }

.hero .container { position: relative; z-index: 5; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

.hero h1 { color: #fff; }
.hero h1 .accent-line { color: transparent; background: var(--km-gradient); -webkit-background-clip: text; background-clip: text; }
.hero__sub { margin: 1.4rem 0 2.1rem; max-width: 560px; color: #C4C9DF; font-size: clamp(1rem, 1.4vw, 1.13rem); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__badges { display: flex; gap: 10px; margin-top: 1.6rem; flex-wrap: wrap; }
.hero-badge-iso {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 600; color: #E4E7F4;
  animation: km-float 5s ease-in-out infinite;
}
.hero-badge-iso svg { width: 17px; height: 17px; color: var(--km-primary); }

/* ---- Stats bar ---- */
.hero__stats {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(13,13,24,.55);
  backdrop-filter: blur(12px);
}
.hero__stats .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stat {
  padding: 1.5rem 1rem; text-align: center; position: relative;
}
.hero-stat + .hero-stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(255,255,255,.14);
}
.hero-stat strong {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: #fff;
}
.hero-stat strong em { font-style: normal; color: var(--km-primary); }
.hero-stat span { font-size: .82rem; color: #A4A9C4; letter-spacing: .04em; }

/* ---- Quick tracking widget ---- */
.track-widget {
  background: #fff; color: var(--km-text);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  position: relative;
}
.track-widget::before {
  content: ""; position: absolute; inset: -8px auto auto -8px; width: 58px; height: 58px;
  background: var(--km-gradient); border-radius: 18px; z-index: -1;
}
.track-widget h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.track-widget h3 svg { width: 20px; height: 20px; color: var(--km-primary); }
.track-widget > p { font-size: .85rem; color: var(--km-text-light); margin: 6px 0 16px; }
.track-widget form { display: flex; gap: 10px; }
.track-widget input {
  flex: 1; min-width: 0; padding: 13px 16px;
  border: 1.5px solid var(--km-border); border-radius: var(--radius);
  font-size: .92rem; text-transform: uppercase; letter-spacing: .05em;
}
.track-widget input:focus { outline: none; border-color: var(--km-primary); box-shadow: 0 0 0 4px rgba(255,107,0,.12); }
.track-widget .btn { padding-inline: 22px; }
.track-widget small { display: block; margin-top: 12px; color: var(--km-text-light); font-size: .78rem; }
.track-widget .live-dot {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .78rem; font-weight: 600; color: var(--km-success);
}
.live-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--km-success);
  animation: km-pulse-ring 1.8s infinite;
}

/* mini result inside widget */
.track-mini { margin-top: 14px; display: none; }
.track-mini.is-visible { display: block; animation: km-fade-up .5s var(--ease-out); }
.track-mini .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(22,163,74,.1); color: var(--km-success);
  border: 1px solid rgba(22,163,74,.3);
  padding: 7px 13px; border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 600;
}
.track-mini a { font-size: .82rem; color: var(--km-primary); font-weight: 600; margin-left: 8px; }

/* ---- Scroll cue ---- */
.hero__scroll {
  position: absolute; bottom: 112px; left: 50%; transform: translateX(-50%);
  z-index: 6; color: rgba(255,255,255,.65);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
}
.hero__scroll span {
  width: 1.5px; height: 44px;
  background: linear-gradient(var(--km-primary), transparent);
  display: block; animation: km-float 2.2s ease-in-out infinite;
}