/* ═══════════════════════════════════════════════════════════
   DRISHYA MLFF — Multi Lane Free Flow Tolling
   ─────────────────────────────────────────────────────────
   Rides on the shared brand system (Manrope, #43AF43, pill
   buttons, --content-ease, the reveal + counter scripts) and
   reuses the Angad primitives (.ag-head / .ag-stats / .ag-approach /
   .ag-mission / .ag-closing) + the About shells (.ab-intro / .ab-do).

   MLFF'S OWN IDENTITY — the TRANSACTION WALKTHROUGH.
   The client shipped real annotated system frames from a live gantry
   (entry → classification → exit). For an NHAI-grade buyer that
   engineering detail IS the pitch, so the signature section is a
   click-through of an actual toll transaction rather than another
   card grid. New components are prefixed `ml-`.
════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */

/* The hero's height is now handled site-wide in style.css (calc(100vh - 85px) —
   it must subtract the navbar it is margined clear of, or its bottom 85px falls
   below the fold).

   Still needed HERE: this banner carries its own feature strip (Multi Lane Free
   Flow, ANPR & OCR Cameras, …) along its VERY BOTTOM EDGE, and .slide-img is
   object-fit:cover with the default CENTRE origin — so on any viewport wider
   than the banner's 1.874:1 the crop eats top AND bottom and takes the strip
   with it. Anchor it to the bottom; the sky up top is expendable. */
.hero-slider .slide-img {
  object-position: center bottom;
}

/* ── THE KNOB: clearance between the CTAs and the banner's feature strip ──
   .slide-content is a centre-justified flex column (style.css: padding 0 9% 88px).
   Because it centres, bottom padding lifts the copy by HALF of what you add:
       88px  = shared default
      148px  = +60px  ⇒ copy sits ~30px higher   ← current
      128px  = +40px  ⇒ ~20px higher
      168px  = +80px  ⇒ ~40px higher
   Tune this one number; nothing else needs to change. */
.hero-slider .slide-content {
  padding-bottom: 148px;
}
.ml-tagline-line {
  display: block;
  margin: 0 0 20px;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6bd46b;
}
.ml-tagline-line { opacity: 0; }
.slide.is-entering .ml-tagline-line {
  animation: hsContentUp 0.76s var(--content-ease) 0.42s both;
}

/* The "ZERO" stat — the payoff number, so it gets the accent treatment */
.ag-stat--zero .ag-stat-num { letter-spacing: -0.04em; }

/* ═══════════════════════════════════════════════════════════
   ★ SIGNATURE — THE TRANSACTION WALKTHROUGH
   Three real gantry frames; click (or let it cycle) through a
   complete toll transaction at highway speed.
════════════════════════════════════════════════════════════ */
.ml-walk-section {
  position: relative;
  overflow: hidden;
  background: #0a0c0a;
}
.ml-walk-section::before {
  content: "";
  position: absolute;
  inset: -25% -10% auto -10%;
  height: 140%;
  background: radial-gradient(55% 42% at 50% 0%, rgba(67, 175, 67, 0.13) 0%, transparent 62%);
  pointer-events: none;
}
.ml-walk-section > * { position: relative; z-index: 1; }

.ml-walk {
  max-width: 1120px;
  margin: clamp(40px, 5vh, 56px) auto 0;
}

/* ── Step tabs ── */
.ml-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.ml-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.4s var(--content-ease);
}
.ml-tab:hover { transform: translateY(-3px); border-color: rgba(67, 175, 67, 0.4); }
.ml-tab.is-active {
  background: rgba(67, 175, 67, 0.12);
  border-color: rgba(67, 175, 67, 0.62);
}
.ml-tab:focus-visible {
  outline: 2px solid #6bd46b;
  outline-offset: 3px;
}
/* progress bar on the active tab */
.ml-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #43af43, #6bd46b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--content-ease);
}
.ml-tab.is-active::after { transform: scaleX(1); }

.ml-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: #6bd46b;
  background: rgba(67, 175, 67, 0.14);
  border: 1px solid rgba(67, 175, 67, 0.34);
}
.ml-tab-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ml-tab-title {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.ml-tab-hint {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Frame panels ── */
/* Frames CROSSFADE; they are never display:none.
   The obvious build — display:none on the inactive panels, display:block on
   the active one — is a trap: an image inside a display:none subtree isn't
   laid out or reliably decoded, so swapping a panel in can show an empty box
   before its frame is ready. Keeping every panel in layout and toggling
   opacity means all three frames are loaded and decoded up front, and the
   switch is instant. */
.ml-panels {
  position: relative;
  aspect-ratio: 1400 / 760;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0f140f;
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.8);
}
.ml-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--content-ease);
}
.ml-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* <picture> is display:inline by default, which collapses the percentage
   height of the <img> inside it — the frame then measures 0 and paints
   nothing. It has to be a block for `height:100%` to resolve. */

.ml-panel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .ml-panel { transition: none; }
}

/* No JS → no tabs to drive the switcher, so let the frames simply stack.
   (main.js sets .js on <html> before paint.) */
html:not(.js) .ml-panels { aspect-ratio: auto; }
html:not(.js) .ml-panel {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
html:not(.js) .ml-panel-img { height: auto; }

/* ── What happens at this step ── */
.ml-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.ml-point {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.ml-point::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #43af43;
  box-shadow: 0 0 0 3px rgba(67, 175, 67, 0.18);
}

@media (max-width: 820px) {
  .ml-tabs { grid-template-columns: 1fr; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════
   INTRO — the gantry overview render
════════════════════════════════════════════════════════════ */
.ml-intro-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 40px 70px -34px rgba(16, 44, 28, 0.4);
}