/* ====================== RESET / BASE ====================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: #ffffff;
  color: #0a0f0b;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { text-decoration: none; color: inherit; }

:root {
  --main-text: #27ae60;
  --text: #0a0f0b;
  --accent2: #dcfce7;
  --accent3: #007732;
  --button-main: #2ecc71;
  --orange: #ff7b00;
}

.green { color: var(--main-text); }

/* ====== Responsive scaling wrapper (fits 1440 desktop canvas to any width) ====== */
html, body { overflow-x: clip; background: #ffffff; }

/* Hide the page's right-side scrollbar (still fully scrollable via wheel/trackpad/keys). */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* The 1440 canvas is fit to the viewport with `zoom` (set by app.js), NOT
   `transform: scale()`. WHY: transform makes #scaler a containing block that
   severs position:sticky from the viewport scrollport (the feature-card stack
   then can't pin); zoom scales layout without that side effect, so native sticky
   works — smooth and compositor-driven. Likewise `overflow-x: clip` (not hidden)
   clips horizontally WITHOUT turning these elements into scroll containers, which
   would also break sticky. #frame centers the zoomed canvas. */
#frame { position: relative; width: 100%; overflow-x: clip; display: flex; justify-content: center; }
#scaler { width: 1440px; }   /* zoom applied by app.js fit() */

/* Fixed desktop canvas */
.page {
  width: 1440px;
  position: relative;
  overflow-x: clip;
}

/* ====================== HERO ====================== */
.hero {
  position: relative;
  width: 1440px;
  height: 778px;
  background: #000;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Drone background video sits above the still fallback image, below the gradients/content. */
.hero__bgvid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  opacity: 0; transform: scale(1.12); animation: heroReveal 2.6s ease-out 1.7s forwards;
}
.hero__topgrad {
  position: absolute; top: 0; left: 0; width: 1440px; height: 160px;
  background: linear-gradient(to bottom, rgba(0,0,0,.85) 10%, rgba(0,0,0,0));
  z-index: 2; pointer-events: none;
}
.hero__botgrad {
  position: absolute; bottom: 0; left: 0; width: 1440px; height: 120px;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index: 2; pointer-events: none;
}
/* Soft radial vignette: darkens the frame edges & corners so the centred hero
   text/badge keep contrast against the bright drone footage, without flattening
   the whole image like a full-screen scrim would. */
.hero__vignette {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background:
    /* central scrim — darkens the middle band BEHIND the hero text so it stays
       legible over bright/moving video frames (white roads, vehicles) */
    radial-gradient(72% 62% at 50% 45%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 48%, rgba(0,0,0,.12) 82%),
    /* edge vignette */
    radial-gradient(130% 120% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 58%, rgba(0,0,0,.32) 100%);
  /* gentle overall darken so the whole frame reads a touch deeper */
  background-color: rgba(0,0,0,.28);
  z-index: 2; pointer-events: none;
}

/* NAV */
/* The nav is ALWAYS a fixed top bar (one positioning model → no absolute↔fixed jank, no double
   nav, no flash). It's TRANSPARENT over the hero (so it matches the hero look) and gets a solid
   background once you scroll past the hero (.nav--solid). It hides on scroll-down / reappears on
   scroll-up by sliding up via `top` (the hero entrance animation holds `transform`, so we must NOT
   hide via transform). app.js toggles --solid / --hidden. */
/* Language switcher — a compact icon + current-language toggle sitting inline among the other
   nav links (matches how most sites surface a language picker), opening a small dropdown on
   click instead of a separate always-visible bar. */
.langbar { position: relative; }
.langbar__toggle {
  display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  color: #fff; font-family: inherit; font-weight: 500; font-size: 14.4px; line-height: 1; padding: 0;
  transition: color .2s;
}
.langbar__toggle:hover, .langbar[data-open="true"] .langbar__toggle { color: #2ecc71; }
.langbar__globe { width: 16px; height: 16px; flex: none; }
.langbar__chevron { width: 10px; height: 6px; flex: none; transition: transform .2s; }
.langbar[data-open="true"] .langbar__chevron { transform: rotate(180deg); }

.langbar__opts {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  display: flex; flex-direction: column; min-width: 160px; margin-top: 14px;
  background: #191919; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35); padding: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.langbar[data-open="true"] .langbar__opts {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.langbar__opt {
  background: none; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
  color: #d6d6d6; font-family: inherit; font-size: 15px; line-height: 1; padding: 10px 12px;
  display: flex; align-items: center; transition: color .15s, background .15s;
}
.langbar__opt.is-active, .langbar__opt:hover { color: #fff; font-weight: 600; background: rgba(255,255,255,.08); }

.nav {
  position: fixed; top: 0; left: 0; right: 0; width: auto;
  padding: 16px 38px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 50;
  /* Desktop: solid black bar behind the navbar at all times (over the hero AND content). */
  background: linear-gradient(180deg, rgba(8,11,9,.97) 55%, rgba(8,11,9,.9));
  transition: top .35s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.nav--solid { box-shadow: 0 6px 22px rgba(0,0,0,.28); }   /* add a shadow once past the hero */
.nav--hidden { top: -160px; }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; }   /* hamburger is mobile-only; the @media block shows it as flex */
.nav__logo {
  width: 36px; height: 36px; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 3px rgba(0,0,0,.25);
}
.nav__logo img { width: 24px; height: 22px; object-fit: contain; }
.nav__name { color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__links a { color: #fff; font-weight: 500; font-size: 14.4px; white-space: nowrap; transition: color .2s, text-shadow .2s, opacity .2s; }
.nav__links a.nav__phone:hover { opacity: .85; }   /* the green phone pill: keep its subtle dim */
/* text links: green tint + soft green glow on hover */
.nav__links a:not(.nav__phone):hover {
  color: #2ecc71;
  text-shadow: 0 0 12px rgba(46, 204, 113, .9), 0 0 26px rgba(46, 204, 113, .55);
}
.nav__phone {
  display: flex; align-items: center; gap: 7px;
  background: #27ae60; color: #fff !important; font-weight: 500; font-size: 13px;
  padding: 6px 16px; border-radius: 22px;
}
.nav__phone img { width: 14px; height: 14px; }
/* Mobile-drawer header ("Menu" + X) — desktop never shows it; the mobile @media reveals it. */
.nav__menuhead { display: none; }

/* HERO CONTENT */
.hero__content {
  position: absolute; left: 0; right: 0; top: 205px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; z-index: 4; padding: 0 24px;
  /* Whole hero group scaled up uniformly (Figma "select all + resize") — ~4px bigger on the
     title. Mobile keeps its own transform (translateY centering), so this is desktop-only. */
  transform: scale(1.18); transform-origin: top center;
}
.hero__title {
  font-size: 50px; font-weight: 700; color: var(--orange);
  line-height: 1; margin-bottom: 8px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.hero__subtitle {
  font-size: 37px; font-weight: 700; color: #fff;
  text-transform: uppercase; line-height: 1.19; max-width: 500px;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
/* Hero trust badge: laurel wreath cradling "5000+ Smart Bus Owners" (Figma node
   1195:9065). Two copies of the single-branch laurel png, the left one mirrored,
   rotated to Figma's exact angles, pulled in over the text with negative margins. */
.hero__trust {
  margin-top: 18px; display: flex; align-items: center; justify-content: center; width: 361px;
}
.hero__laurel { flex: none; width: 63px; height: 63px; object-fit: contain; opacity: .6; }
.hero__laurel--l { transform: rotate(-146.73deg) scaleY(-1); margin-right: -16px; }
.hero__laurel--r { transform: rotate(-33.27deg); margin-left: -16px; }
.hero__trusttxt {
  flex: none; width: 269px; text-align: center;
  font-size: 18px; font-weight: 700; line-height: 1.42; color: #cfcfcf;
}
.hero__trusttxt span { font-weight: 500; }
.hero__trusttxt b { color: #ff9400; font-weight: 700; }

/* GREEN PILL BUTTON */
.btn-pill {
  position: relative; margin-top: 30px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 8px 52px;
  background: #007732; border: .75px solid #8ad9aa; border-radius: 999px;
  color: #fff; font-size: 16px; overflow: hidden;
  box-shadow: 0 1px 16px 6px rgba(86,224,144,.25);
  transition: transform .25s ease, box-shadow .3s ease;
}
/* Figma "Shine": a soft blurred bright-green circle (shine SVG, #22C405) centred ~13px
   below the pill bottom, so it glows up into the bottom-centre. (Figma: 180px img, top -17px) */
/* The bright-green "shine" blob continuously SWEEPS inside the pill (left→centre→right) with a
   brightness pulse — matches the reference recording. overflow:hidden on .btn-pill clips it to the
   pill so the glow appears to travel inside the button. On hover it speeds up + brightens. */
.btn-pill__shine {
  position: absolute; z-index: 0; pointer-events: none;
  width: 180px; height: 180px; left: 50%; top: -14px; transform: translate(-50%, 0);
  animation: shineSweep 3.6s ease-in-out infinite;
  will-change: transform, opacity; backface-visibility: hidden;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 34px 4px rgba(40,210,90,.5); }
.btn-pill:hover .btn-pill__shine { animation-duration: 1.7s; filter: brightness(1.3) saturate(1.25); }
.btn-pill span { position: relative; z-index: 1; }
.btn-pill__arrow { position: relative; z-index: 1; color: #fff; font-size: 24px; line-height: 1; margin-top: -3px; }

/* ====================== MANAGE & GROW ====================== */
.manage { position: relative; width: 1440px; background: #fafffc; padding-top: 30px; }
.manage__head { text-align: center; }
.manage__head h2 { font-size: 36px; font-weight: 800; color: var(--text); }
.manage__head h3 { font-size: 32px; font-weight: 700; color: var(--text); margin-top: 4px; }

.manage__stage { position: relative; width: 1440px; height: 790px; margin-top: 20px; isolation: isolate; }
/* green gradient backdrop behind the phone (Figma "Rectangle 42211") */
.manage__bg {
  position: absolute; left: 491px; top: 72px; width: 459px; height: 429px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(to bottom, #27ae60, #fafffc);
  z-index: 0;
}
.manage__phone {
  position: absolute; left: 333px; top: 16px;
  width: 762px; height: 428px; object-fit: contain;
}
.manage__mgif { display: none; }   /* mobile-only; desktop uses .manage__phone above */
/* Feature-card device wrapper: invisible box on desktop (its device layers position against
   .fcard exactly as before); becomes a scaled device zone on mobile (see @media). */
.fdevs { display: contents; }
.mcard {
  position: absolute; height: 242px;
  background: #fff; border: 2px solid rgba(205,205,205,.5); border-radius: 15px;
  display: flex; flex-direction: column; align-items: center;
  padding: 38px 24px 22px; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.mcard--wide { width: 488px; }
.mcard--narrow { width: 330px; }
.mcard__icon {
  position: relative; width: 64px; height: 64px; margin-bottom: 14px;
  border-radius: 50%; background: linear-gradient(135deg, #34c46e, #27ae60);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(39,174,96,.28);
}
.mcard__glyph { width: 34px; height: 34px; object-fit: contain; }
.mcard__title { font-size: 16px; font-weight: 800; color: #3e3e3e; line-height: 1.4; }
.mcard__text { font-size: 14px; color: #000; line-height: 1.65; margin-top: 10px; }
/* wrap the wide cards' text into two lines (desktop) */
.mcard--wide .mcard__text { max-width: 250px; margin-left: auto; margin-right: auto; }

/* phone GIF (with its fanned-out product tiles) floats ABOVE the side cards, per Figma.
   It's decorative, so it must NOT swallow hover events meant for the cards behind it —
   pointer-events:none lets the cursor reach a .mcard even where the phone overlaps it. */
.mcard { z-index: 2; }
.manage__phone { z-index: 3; pointer-events: none; }
.manage__bg { pointer-events: none; }

/* desktop: scale the whole manage section down so it fits in one screen. the negative
   margin removes the gap the scale leaves below it. mobile is not affected. */
@media (min-width: 601px) {
  .manage { transform: scale(0.85); transform-origin: top center; margin-bottom: -180px; }
}
/* The hovered card stays BELOW the phone GIF (z-index 2 < 3): its green ambient glow
   radiates in the background around the card edges, but the card itself never jumps
   on top of the floating phone. (pointer-events:none on the phone above lets the
   hover still register through it.) */

/* ====================== SUMMARY / TESTIMONIALS ====================== */
.summary {
  position: relative; width: 1440px; padding: 100px 0 80px; overflow: hidden;
  /* Mint-green frames the section: green at the top, a lighter band behind the white
     testimonial card, then green RETURNS for the "Trusted by 5000+" carousel and ends
     green at the bottom edge — so the green→white seam with .features reads as the
     section boundary (matches Figma node 1195:11263). */
  background: linear-gradient(to bottom,
    #d6f5e1 0%, #e9fbf1 15%, #f5fdf9 33%, #f5fdf9 50%,
    #e4f9ec 68%, #d6f5e1 90%, #d6f5e1 100%);
}
/* concave curved top edge (Figma "Ellipse 192"): white dips into the green at top-centre */
.summary::before {
  content: ""; position: absolute; top: -78px; left: 50%; transform: translateX(-50%);
  width: 1640px; height: 156px; background: #fafffc; border-radius: 50%; z-index: 0;
}
.summary > * { position: relative; z-index: 1; }
.summary__head { text-align: center; margin-bottom: 44px; }
.summary__head h2 { font-size: 41px; font-weight: 700; color: var(--text); }
.summary__head p { font-size: 20px; color: #5a5a5a; margin-top: 10px; }
/* Testimonial card: real video (left) + "ApniBus at a glance" panel (right) */
.tcard {
  width: 1139px; margin: 0 auto; display: flex; gap: 16px; padding: 20px;
  background: #fff; border-radius: 28px; box-shadow: 0 24px 50px rgba(0,0,0,.07);
}
.tcard__video {
  position: relative; flex: none; width: 728px; aspect-ratio: 728 / 453;
  border-radius: 20px; overflow: hidden; background: #000;
}
/* Show the WHOLE video frame, never cropped — object-fit:contain letterboxes against
   the card's #000 background. (Earlier a transform:scale(1.26) was used to hide the
   source's baked-in bars, but that cropped the app-demo scenes off the edges.) */
.tcard__vid { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.tcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: #27ae60; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s ease, background .2s ease;
}
.tcard__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.tcard__play:hover { background: #229554; transform: translate(-50%, -50%) scale(1.08); }
.tcard__play:focus-visible { outline: 3px solid rgba(46,204,113,.7); outline-offset: 4px; }
.tcard__play.is-hidden { display: none; }
/* glance list lives in its OWN rounded card nested inside the testimonial card (Figma) */
.tcard__panel {
  flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 40px;
  background: #fff; border-radius: 20px; box-shadow: 0 6px 26px rgba(0,0,0,.08);
}
.tcard__ptitle { font-size: 20px; font-weight: 600; color: var(--main-text); margin-bottom: 14px; text-align: center; }
.tcard__list { list-style: none; }
.tcard__item { display: flex; align-items: center; gap: 28px; padding: 17px 0; }
.tcard__item + .tcard__item { border-top: 1px solid #d5d5d5; }
.tcard__ic {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(46,204,113,.12); display: flex; align-items: center; justify-content: center;
}
.tcard__ic img { width: 34px; height: 34px; object-fit: contain; }
/* narrow text column so each description wraps to 2 lines, matching Figma (text box ~184px) */
.tcard__txt { flex: 1; min-width: 0; }
.tcard__txt h4 { font-size: 17px; font-weight: 600; color: #0a0f0b; line-height: 1.2; }
.tcard__txt p { font-size: 13.5px; font-weight: 500; color: #414141; line-height: 1.35; margin-top: 3px; }
/* "Trusted by 5000+" heads the carousel's LEFT column, left-aligned directly above the
   "Quick Performance Insights" subtitle (was a separate centered heading). */
.summary__trusted {
  text-align: left; font-size: 41px; font-weight: 700; white-space: nowrap;
  color: var(--main-text); margin: 0 0 14px; line-height: 1.12;
}
/* ---- Performance-insights video carousel ---- */
.carousel { position: relative; width: 1113px; height: 558px; margin: 90px auto 0; }
.carousel__intro { position: absolute; left: 0; top: 0; width: 700px; z-index: 1; }
.carousel__sub { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 26px; color: #0a0f0b; line-height: 1.22; }
.carousel__desc { font-size: 18px; color: #4e4e4e; line-height: 1.5; margin-top: 12px; max-width: 560px; }
.vslide {
  position: absolute; border-radius: 18px; overflow: hidden; background: #e9e9e9;
  box-shadow: 0 2px 9px rgba(0,0,0,.25); cursor: pointer;
  transition: left .55s cubic-bezier(.5,0,.2,1), top .55s cubic-bezier(.5,0,.2,1),
              width .55s cubic-bezier(.5,0,.2,1), height .55s cubic-bezier(.5,0,.2,1),
              filter .55s ease, box-shadow .3s ease;
}
.vslide__v { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.vslide--thumb .vslide__v { filter: grayscale(1); }
.vslide--stage { background: #fff; }
/* Centred play/pause control. Shown on the STAGE (big) video; hidden on thumbnails (click a
   thumbnail to promote it). Videos don't autoplay — press to play, press again to pause. */
.vslide__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: #27ae60; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.vslide__play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.vslide__play:hover { background: #229554; transform: translate(-50%, -50%) scale(1.08); }
.vslide--thumb .vslide__play { display: none; }   /* thumbnails: click promotes, no control */
/* Playing → swap the triangle for a two-bar PAUSE icon; dim so the video shows (full on hover). */
.vslide__play.is-playing { opacity: .5; }
.vslide__play.is-playing:hover { opacity: 1; }
.vslide__play.is-playing::after {
  left: 50%; width: 14px; height: 16px;
  border-width: 0; border-left: 5px solid #fff; border-right: 5px solid #fff;
}
.carousel__arrow {
  position: absolute; right: 0; top: 452px; width: 56px; height: 56px; padding: 0;
  border: 2px solid #27ae60; border-radius: 50%; background: #fff; cursor: pointer; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: background .2s, transform .2s;
}
.carousel__arrow::before {
  content: ""; width: 11px; height: 11px; margin-left: -3px;
  border-right: 2.5px solid #27ae60; border-top: 2.5px solid #27ae60; transform: rotate(45deg);
}
.carousel__arrow:hover { background: #27ae60; transform: scale(1.06); }
.carousel__arrow:hover::before { border-color: #fff; }
/* Left/previous arrow is mobile-only (desktop uses the single right arrow + thumbnails). */
.carousel__arrow--prev { display: none; }
.carousel__dots { position: absolute; left: 858px; top: 536px; display: flex; align-items: center; gap: 4px; z-index: 6; }
.carousel__dot { width: 4px; height: 10px; border-radius: 6px; background: #d9d9d9; transition: all .35s ease; }
.carousel__dot.is-active { width: 6px; height: 22px; background: var(--main-text); }

/* ====================== SMART FEATURES ====================== */
.features { width: 1440px; background: #fafffc; padding: 70px 0 40px; }
.features__title {
  /* Sticky heading: pins just below the fixed nav and stays fixed for the whole
     Smart Features section while the feature cards stack up underneath it. The
     opaque #fafffc band (full-width block) masks cards scrolling behind it, and the
     high z-index keeps it painted above the (later-in-DOM) sticky cards. The card
     pin offset (app.js setPins) is measured from this title's height.
     top: 68px (not 0) — the fixed .nav is 68px tall; without the offset it pins BEHIND
     the nav (nav's z-index is higher) instead of below it. The nav auto-hides on
     scroll-down though, so that reserved 68px goes dead-blank while it's gone —
     body.nav-is-hidden (app.js, same toggle that hides the nav) collapses it to 0. */
  position: sticky; top: 68px; z-index: 10;
  background: #fafffc;
  text-align: center; font-size: 44px; font-weight: 800; color: var(--text);
  padding: 16px 0 8px; margin: 0 0 24px; line-height: 1.25;
  transform: translateZ(0) translateY(0); will-change: transform; backface-visibility: hidden;
  transition: top .35s cubic-bezier(.22,.61,.36,1);
}
body.nav-is-hidden .features__title { top: 0; }
.features__list {
  display: flex; flex-direction: column; align-items: center; gap: 64px;
}
/* Reconstructed feature card (GRBG background + content + device + pills) */
.fcard {
  /* Sticky stacking: every card pins at the same `top` (set per-resize by app.js so
     the stack is vertically centred) and the next card scrolls up and covers it,
     until the list ends and the whole stack scrolls away together. This is NATIVE
     CSS sticky (works because the canvas uses `zoom`, not `transform` — see #scaler),
     so it's compositor-smooth with zero per-scroll JS. */
  position: sticky; top: 40px;
  width: 1139px; border-radius: 24px; overflow: hidden;
  isolation: isolate;
  /* When the viewport is too short for a full-size card, app.js setPins() shrinks
     the card with transform: scale(); keep the top edge on the pin line. */
  transform-origin: top center;
  /* Hint the compositor to keep each card on its own layer (paired with the
     translateZ(0) app.js sets) so the snap-tween composites instead of repainting. */
  will-change: transform; backface-visibility: hidden;
}
/* Desktop: the mobile-only green-card wrapper is dissolved so the card's children behave
   exactly as before (absolute-positioned relative to .fcard). On mobile it becomes the
   rounded green box (see the @media block). */
.fcard__body { display: contents; }
.fcard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; }
.fcard__head {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; padding-top: 24px; text-align: center;
}
.fcard__title { font-size: 32px; font-weight: 700; color: #fff; line-height: 1.25; }
.fcard__sub { font-size: 26px; font-weight: 500; color: #fff; line-height: 1.2; margin-top: 2px; }
.fcard__eyebrow {
  margin-top: 12px; background: #d2ffe5; border-radius: 101px; padding: 4px 17px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
}
.fcard__eyebrow .d { color: #0a0f0b; }
.fcard__eyebrow .g { color: #007732; }
.fcard__btn {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 10px;
  background: #27ae60; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: .17px;
  padding: 12px 21px; border-radius: 10px; box-shadow: 0 2px 3px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
}
.fcard__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.fcard__btn img { width: 12px; height: 19px; transform: rotate(180deg); }
.fdev { position: absolute; z-index: 1; overflow: hidden; }
/* Give each device image its own compositor layer so an animating GIF only
   repaints itself, not the whole scaled page (big scroll-perf win). */
.fdev img { position: absolute; max-width: none; display: block; transform: translateZ(0); backface-visibility: hidden; }
/* Transparent device animation served as alpha video (VP9-alpha WebM / HEVC-alpha .mov)
   in place of the GIF. object-fit:fill makes the video stretch to the inline width/height %
   exactly like the GIF <img> did, so the crop/geometry is pixel-identical. */
.fdev video { position: absolute; max-width: none; display: block; object-fit: fill; transform: translateZ(0); backface-visibility: hidden; }
.fdev--rot { overflow: visible; display: flex; align-items: center; justify-content: center; }
.fdev__rot { position: relative; overflow: hidden; flex: none; }
/* Each card's device collage was tuned to sit flush against its green bottom edge at the card's
   ORIGINAL height. Equalising every .fcard to 596px (so each fully covers the previous in the
   sticky stack) opened a gap = the height delta. Nudge each collage back down by that delta so it
   stays attached. Desktop only — mobile scales/translates .fdevs separately (see @media block).
   `> .fdev` targets only the top-level device boxes (GPS's nested trip-card won't double-shift). */
@media (min-width: 601px) {
  /* desktop-only: shift device right for new layout (mobile uses inline left:280) + let the
     machine overflow the clip box so its right edge isn't cut (card still clips the bottom). */
  #ticketing .fdevs > .fdev { transform: translate(180px, 5px); overflow: visible; }
  #gps .fdevs > .fdev       { transform: translate(150px, 5px); }   /* desktop-only: shift device group right for new layout (mobile uses inline lefts) */
  #fuel .fdevs > .fdev      { transform: translate(150px, 10px); }   /* desktop-only: shift device group right for new layout */
  /* FASTag: scale the WHOLE device group as one box, anchored to the card bottom, so it grows
     bigger while its bottom stays stuck to the card edge. (Wrapper becomes a box covering the
     card; children keep their coords since it's inset:0.) Desktop only. */
  #fastag .fdevs           { display: block; position: absolute; inset: 0; transform: translate(130px, 20px) scale(1.12); transform-origin: bottom center; }
  #fastag .fdevs > .fdev   { transform: none; }
  /* Travel: scale the whole device group as one box, anchored to the card bottom (like FASTag). */
  #travel .fdevs           { display: block; position: absolute; inset: 0; transform: translate(240px, 25px) scale(1.22); transform-origin: bottom center; }
  #travel .fdevs > .fdev   { transform: none; }
}
.fpill {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 6px; padding: 6px 17px; height: 60px;
  box-shadow: 0 2px 4px rgba(0,119,50,.30);
}
.fpill__txt { display: flex; flex-direction: column; white-space: nowrap; }
.fpill__h { font-size: 14px; font-weight: 700; color: #007732; line-height: 1.25; }
.fpill__s { font-size: 11px; font-weight: 600; color: #27ae60; line-height: 1.4; }
.fpill__ic {
  flex: none; width: 33px; height: 33px; border-radius: 5px; background: rgba(46,204,113,.18);
  display: flex; align-items: center; justify-content: center;
}
.fpill__ic img { width: 22px; height: 22px; object-fit: contain; }

/* Extra stat text (top-right of the new feature-card layout). Hidden by default — shown only
   on the cards/desktop that opt into the new layout below. Never shows on mobile. */
.fcard__stat { display: none; }

/* on desktop the button is hidden and the popup wrappers dissolve, so the pills stay on the
   card as before. the mobile block makes the popup a real overlay. */
.fcard__seefeat { display: none; }
.fpop, .fpop__list { display: contents; }
.fpop__close, .fpop__title { display: none; }

/* ---- NEW feature-card layout (desktop only). Scoped per-card while we roll it out. ---- */
@media (min-width: 601px) {
  /* Heading block → top-LEFT, left-aligned (was centered full-width). */
  /* Any card with .fcard--new opts into this layout (heading top-left, stat top-right,
     pills down the left, Get Started bottom-left). Per-card device shifts stay in the
     min-width:601px block above; equal-width pills are opted-in per card below. */
  .fcard--new .fcard__head {
    left: 72px; top: 50px; width: auto; max-width: 620px;
    align-items: flex-start; text-align: left; padding-top: 0;
  }
  /* Extra stat → top-RIGHT, centered text with dash rules around "Saved". */
  .fcard--new .fcard__stat {
    display: block; position: absolute; top: 50px; right: 160px; z-index: 3;
    /* Fixed width so every card's stat block is the SAME size and its centered text lands at the
       same x — otherwise each shrinks to its own text width and shorter stats look shifted. */
    width: 360px;
    text-align: center; text-transform: uppercase;
    /* Figma drop shadow: X0 Y2.44 Blur2.2 #000 10% (inherits to all 3 lines). */
    text-shadow: 0 2.44px 2.2px rgba(0,0,0,.10);
  }
  .fcard--new .fcard__stat-big { font-size: 32px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: .5px; }
  .fcard--new .fcard__stat-line {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 0; font-size: 24px; font-weight: 600; color: #fff; letter-spacing: 4px;
  }
  /* Tapered brush dash beside "Saved" — symmetric lens, pointed ends (#00401B). Shared by all cards. */
  .fcard__dash { flex: none; width: 60px; height: 8px; fill: #00401B; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
  .fcard--new .fcard__stat-sub {
    margin: 2px auto 0; max-width: 360px; font-size: 16.5px; font-weight: 600;
    color: #013F1A; letter-spacing: 1px; line-height: 1.35;
  }
  /* Get Started → bottom-LEFT. */
  .fcard--new .fcard__btn {
    position: absolute; left: 72px; bottom: 60px; top: auto; margin: 0; z-index: 4;
  }
  /* Soft dark shadow under the left pills (all new-layout cards). */
  .fcard--new .fpill { box-shadow: 0 6px 14px rgba(0,0,0,.35); }
  /* Uniform pill width + icon to the right edge — opt-in per card (GPS keeps natural widths). */
  #ticketing .fpill, #fuel .fpill { width: 300px; justify-content: space-between; }
}

/* ====================== IMPROVE EFFICIENCY ====================== */
/* Target look (user ref image copy.png): the 3 text lines (pill / heading / subtitle) sit on
   WHITE in the centre, with a soft green shade band at the TOP edge and another at the BOTTOM
   edge — text sandwiched between two green washes. Built as two wide, flat, feathered radial
   ellipses (green centre-of-edge → transparent) over a white base, so left/right also fade out. */
.efficiency {
  position: relative; width: 1440px;
  background:
    radial-gradient(58% 80px at 50% 0%, rgba(39, 174, 96, .22), rgba(39, 174, 96, 0) 72%),
    radial-gradient(58% 80px at 50% 100%, rgba(39, 174, 96, .22), rgba(39, 174, 96, 0) 72%),
    #ffffff;
  padding: 70px 0 28px; text-align: center; overflow: hidden;
}
.efficiency__pill {
  position: relative; display: inline-block;
  background: #d2ffe5; color: #27ae60;
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}
.efficiency h2 { position: relative; font-size: 27.7px; font-weight: 700; color: #18271b; }
.efficiency p { position: relative; font-size: 18px; color: #18271b; margin-top: 5px; }
.br-mobile { display: none; }   /* forced line break used only on mobile */

/* ====================== CTA ====================== */
.cta { width: 1440px; background: #fafffc; padding: 0 0 70px; display: flex; justify-content: center; }
.cta__wrap {
  position: relative; width: 1106px; height: 390px;   /* ← BOX HEIGHT: lower this to trim the box from the bottom */
  border-radius: 17px; overflow: hidden;
  background: linear-gradient(180deg, #e9f4ec, #f7fdf9);  /* shows where the image doesn't cover */
}
/* Bus image — pan/zoom knobs (edit these live in inspect):
     left  → move LEFT / RIGHT (negative = left)
     top   → move UP / DOWN   (negative = up)
     width → ZOOM in/out (bigger = zoomed in); height:auto keeps the photo's aspect.
   The .cta__wrap is overflow:hidden, so the image is cropped to the box. */
.cta__bg {
  position: absolute; inset: auto;
  left: 0px;
  top: -231px;
  width: 1106px;
  height: auto;
}
.cta__card {
  position: absolute; left: 40px; top: 51px;
  width: 408px; height: 300px;
  background: #fff; border-radius: 26px; padding: 28px 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
}
.cta__copy h2 { font-size: 25px; font-weight: 700; color: var(--accent3); line-height: 1.42; }
.cta__copy p { font-size: 18px; font-weight: 500; color: var(--main-text); line-height: 1.45; margin-top: 26px; }
.cta__actions { display: flex; align-items: center; gap: 14px; }
.cta__call {
  position: relative; overflow: hidden;
  width: 54px; height: 54px; border-radius: 999px; flex: none;
  background: #007732; border: .75px solid #8ad9aa;
  box-shadow: 0 1px 16px 6px rgba(86,224,144,.25);
  display: flex; align-items: center; justify-content: center;
}
.cta__call-shine {
  position: absolute; z-index: 0; pointer-events: none;
  width: 120px; height: 120px; left: 50%; top: -28px; transform: translateX(-50%);
  transition: top .35s ease;
}
.cta__call-icon { position: relative; z-index: 1; width: 16px; height: 16px; }
.cta__or { font-size: 20px; font-weight: 500; color: var(--main-text); }
/* "Contact Us" — the Figma ContactUsButton: deep-green pill, mint border, soft green
   glow + an inner "shine", white 18px regular text. Same component as the hero pill. */
.cta__btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 169px; height: 54px;
  background: #007732; border: .75px solid #8ad9aa; border-radius: 999px;
  color: #fff; font-size: 18px; font-weight: 400; letter-spacing: .2px;
  box-shadow: 0 1px 16px 6px rgba(86,224,144,.25);
  transition: transform .25s ease, box-shadow .3s ease;
}
.cta__btn span { position: relative; z-index: 1; }
.cta__btn-shine {
  position: absolute; z-index: 0; pointer-events: none;
  width: 160px; height: 160px; left: 50%; top: -12px; transform: translate(-50%, 0);
  animation: shineSweep 3.6s ease-in-out infinite;
  will-change: transform, opacity; backface-visibility: hidden;
}
.cta__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px 4px rgba(40,210,90,.45); }
.cta__btn:hover .cta__btn-shine { animation-duration: 1.7s; filter: brightness(1.3) saturate(1.25); }

/* Shared sweep used by the hero "Get in Touch" + CTA "Contact Us" pill shines. */
@keyframes shineSweep {
  0%   { transform: translate(-50%, 0) translate(-58px, 6px) scale(.88); }
  25%  { transform: translate(-50%, 0) translate(0, -7px)    scale(1.08); }
  50%  { transform: translate(-50%, 0) translate(58px, 6px)  scale(.88); }
  75%  { transform: translate(-50%, 0) translate(0, -7px)    scale(1.08); }
  100% { transform: translate(-50%, 0) translate(-58px, 6px) scale(.88); }
}

/* ====================== FOOTER ====================== */
.footer { width: 1440px; background: #1a1a1a; border-top: 1px solid #3a3a3a; position: relative; }
/* Figma footer "grid": two vertical dividers separating brand | links | contact,
   and a horizontal rule above the (empty) bottom bar. All #3a3a3a, 1px. The verticals
   sit at x=450 / x=1021 of the 1440 canvas — right in the gaps between our columns. */
.footer::before {
  content: ''; position: absolute; top: 0; bottom: 52px; left: 0; right: 0; pointer-events: none;
  background:
    linear-gradient(#3a3a3a, #3a3a3a) 450px 0 / 1px 100% no-repeat,
    linear-gradient(#3a3a3a, #3a3a3a) 1021px 0 / 1px 100% no-repeat;
}
.footer::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 52px; height: 1px;
  background: #3a3a3a; pointer-events: none;
}
.footer__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 104px 0 84px; display: flex; gap: 64px;
}
.footer__brand { width: 340px; flex-shrink: 0; }
.footer__logo-row { display: flex; align-items: center; gap: 16px; }
.footer__logo {
  width: 69px; height: 69px; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 5px rgba(0,0,0,.25);
}
.footer__logo img { width: 50px; height: 46px; object-fit: contain; }
.footer__name { color: #fff; font-weight: 700; font-size: 41px; }
.footer__tag { color: #6b7280; font-weight: 500; font-size: 15px; letter-spacing: .38px; margin-top: 22px; line-height: 1.5; }
.footer__social { display: flex; gap: 15px; margin-top: 24px; }
.soc { position: relative; display: block; width: 45px; height: 45px; }
.soc__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.soc__g { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: contain; }
/* Figma-exact glyph sizing (% of the 45px badge) */
.soc--fb .soc__g { width: 34%; height: 62%; }
.soc--li .soc__g { width: 56%; height: 56%; }
.soc--ig .soc__g { width: 64%; height: 62%; }

.footer__col { flex-shrink: 0; }
.footer__col h4, .footer__contact h4 {
  color: #fff; font-weight: 500; font-size: 14px; letter-spacing: .15px; margin-bottom: 24px;
}
.footer__col ul { list-style: disc; padding-left: 18px; }
.footer__col li { color: #9ca3af; font-size: 12px; letter-spacing: .5px; margin-bottom: 12px; }
.footer__col li::marker { color: #9ca3af; }
.footer__col a:hover { color: #fff; }

.footer__contact { width: 280px; margin-left: auto; }
.footer__contact-row { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.footer__contact-row img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.footer__contact-row p { color: #9ca3af; font-size: 11px; line-height: 2; }
.footer__contact-row strong { color: #fff; font-weight: 600; font-size: 12px; }
.footer__col a, .footer__social a, .footer__contact-row a { transition: color .2s, opacity .2s, transform .2s; }
.footer__social a:hover { transform: translateY(-3px); }

/* ====================== ANIMATIONS ====================== */

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* Hero entrance (plays on load) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
/* Hero content fades in with a quick stagger right on load (the APNIBUS intro was removed). */
.nav { opacity: 0; animation: fadeDown .7s ease .15s forwards; }
.hero__title { opacity: 0; animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) .25s forwards; }
.hero__subtitle { opacity: 0; animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) .4s forwards; }
.hero__trust { opacity: 0; animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) .55s forwards; }
.hero .btn-pill { opacity: 0; animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) .7s forwards; }
.hero__bg { opacity: 0; transform: scale(1.12); animation: heroReveal 2.6s ease-out 0s forwards; }
@keyframes heroReveal { 0% { opacity: 0; transform: scale(1.12); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* Hover micro-interactions */
.mcard { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
/* Soft green ambient glow on hover (matches Figma hover state). */
.mcard:hover {
  transform: translateY(-6px);
  border-color: rgba(46,204,113,.6);
  box-shadow: 0 18px 40px rgba(39,174,96,.30), 0 0 46px rgba(52,196,110,.45);
}

/* Manage phone sits still (float removed per request). */

/* Hover lift uses box-shadow only — the `transform` is owned by the sticky-stack
   logic (app.js sets translate3d every frame), so animating/overriding it here
   would make pinned cards jump. */
.fcard { transition: box-shadow .4s ease; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.fcard:hover { box-shadow: 0 22px 44px rgba(0,0,0,.12); }

.tcard, .summary__carousel { transition: transform .4s ease; }
.tcard:hover { transform: translateY(-4px); }

.cta__call-icon { transition: transform .3s ease; }
.cta__call:hover .cta__call-icon { transform: scale(1.08) rotate(-4deg); }
.cta__call:hover .cta__call-shine { top: -40px; }
.cta__wrap { transition: transform .4s ease, box-shadow .4s ease; }
.cta__wrap:hover { box-shadow: 0 24px 50px rgba(0,0,0,.18); }

.nav__phone { transition: transform .2s ease, box-shadow .2s ease; }
.nav__phone:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(39,174,96,.4); }

/* ====================== VIDEO LIGHTBOX ====================== */
.vmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.vmodal[hidden] { display: none; }
.vmodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(2px); animation: vfade .25s ease; }
.vmodal__inner { position: relative; z-index: 1; width: min(90vw, 1100px); animation: vpop .3s cubic-bezier(.22,.61,.36,1); }
.vmodal__inner video { width: 100%; height: auto; max-height: 84vh; border-radius: 14px; background: #000; display: block; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.vmodal__close {
  position: absolute; top: -46px; right: 0; width: 38px; height: 38px;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%;
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s;
}
.vmodal__close:hover { background: rgba(255,255,255,.28); }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vpop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ===== Contact form modal — split brand + form panel (dark) ===== */
.cmodal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Poppins', sans-serif; }
.cmodal[hidden] { display: none; }
.cmodal__backdrop { position: absolute; inset: 0; background: rgba(4,10,8,.78); backdrop-filter: blur(4px); animation: vfade .25s ease; }
.cmodal__card {
  position: relative; z-index: 1; display: flex; width: min(96vw, 1000px); max-height: 94vh;
  border-radius: 26px; overflow: hidden; box-shadow: 0 40px 110px rgba(0,0,0,.6);
  animation: vpop .3s cubic-bezier(.22,.61,.36,1);
}
.cmodal__close {
  position: absolute; top: 18px; right: 18px; z-index: 3; width: 42px; height: 42px;
  background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s; backdrop-filter: blur(2px);
}
.cmodal__close:hover { background: rgba(255,255,255,.22); }

/* --- LEFT brand panel --- */
.cmodal__brand {
  flex: none; width: 42%; padding: 40px 38px; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: linear-gradient(158deg, #0c5a2c 0%, #08401f 46%, #052915 76%, #03190d 100%);
  color: #fff;
}
.cmodal__brandtop { display: flex; align-items: center; gap: 14px; }
.cmodal__logobox { width: 54px; height: 54px; flex: none; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; }
.cmodal__logobox img { width: 34px; height: 34px; object-fit: contain; }
.cmodal__brandname { font-size: 23px; font-weight: 700; letter-spacing: .2px; }
.cmodal__brandhead { margin: 34px 0 0; font-size: 38px; font-weight: 700; line-height: 1.16; }
.cmodal__brandpills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cmodal__bpill {
  padding: 9px 18px; border-radius: 30px; font-size: 14.5px; font-weight: 600;
  color: #57e08c; background: rgba(46,204,113,.10); border: 1px solid rgba(46,204,113,.32);
}
.cmodal__brandfoot { margin-top: auto; padding-top: 30px; }
.cmodal__rule { height: 1px; background: rgba(255,255,255,.14); margin-bottom: 22px; }
.cmodal__stats { display: flex; }
.cmodal__stat { flex: 1; padding-left: 18px; }
.cmodal__stat:first-child { padding-left: 0; }
.cmodal__stat + .cmodal__stat { border-left: 1px solid rgba(255,255,255,.14); }
.cmodal__stat b { display: block; font-size: 27px; font-weight: 700; color: #2ee06d; line-height: 1.1; }
.cmodal__stat span { font-size: 13px; color: #9fb6a8; }

/* --- RIGHT form panel --- */
.cmodal__form { flex: 1; min-width: 0; padding: 44px 46px; box-sizing: border-box; overflow-y: auto; background: #0e1a2b; }
.cmodal__steppill {
  display: inline-block; padding: 7px 18px; margin-bottom: 18px; border-radius: 30px;
  font-size: 13.5px; font-weight: 600; color: #35d27a;
  background: rgba(46,204,113,.10); border: 1px solid rgba(46,204,113,.40);
}
.cmodal__title { margin: 0 0 6px; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.12; }
.cmodal__lead { margin: 0 0 26px; font-size: 16px; color: #8a97a8; line-height: 1.4; }

.cfield { display: block; margin-bottom: 18px; }
.cfield > span { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #8a97a8; }
.cfield input, .cfield textarea, .cgroup textarea {
  width: 100%; box-sizing: border-box; padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.03);
  font: inherit; font-size: 15px; color: #fff; transition: border-color .2s, box-shadow .2s;
}
.cfield input::placeholder, .cfield textarea::placeholder, .cgroup textarea::placeholder { color: #5d6b7e; }
.cfield input:focus, .cfield textarea:focus, .cgroup textarea:focus { outline: none; border-color: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.16); background: rgba(255,255,255,.05); }
.cfield textarea, .cgroup textarea { resize: vertical; min-height: 92px; font-family: 'Poppins', sans-serif; }
.cfield.is-invalid input { border-color: #ef5350; box-shadow: 0 0 0 3px rgba(239,83,80,.16); }
/* validation message under a field */
.cfield__err { display: none; margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #ef5350; }
.cfield.is-invalid .cfield__err { display: block; }

/* phone with +91 prefix */
.cphone { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.cphone__cc { display: flex; align-items: center; padding: 0 16px; font-weight: 600; color: #fff; background: rgba(255,255,255,.04); border-right: 1px solid rgba(255,255,255,.10); }
.cphone input { border: 0; border-radius: 0; background: transparent; }
.cphone input:focus { box-shadow: none; background: transparent; }
.cphone:focus-within { border-color: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.16); }
.cfield.is-invalid .cphone { border-color: #ef5350; box-shadow: 0 0 0 3px rgba(239,83,80,.16); }

/* step-2 banner: the product they came in from */
.cbanner { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 15px 18px; border-radius: 12px; font-size: 15px; color: #d7e4dc; background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.34); }
.cbanner[hidden] { display: none; }
.cbanner__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(46,204,113,.18); color: #2ee06d; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.cbanner b { color: #2ee06d; font-weight: 700; }

.cgroup { margin-bottom: 20px; }
.cglabel { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #8a97a8; }

.cchips { display: flex; flex-wrap: wrap; gap: 11px; }
.cchip {
  padding: 12px 20px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500;
  color: #c3cdd9; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12);
  transition: border-color .15s, background .15s, color .15s;
}
.cchip[hidden] { display: none; }
.cchip:hover { border-color: rgba(46,204,113,.5); color: #fff; }
.cchip.is-on { border-color: #2ecc71; background: rgba(46,204,113,.16); color: #fff; }

.cmodal__actions { display: flex; align-items: stretch; gap: 14px; margin-top: 26px; }
/* error message shown if the form submit fails */
.cform__err { display: none; margin-top: 18px; padding: 11px 15px; border-radius: 10px; font-size: 13.5px; color: #ef5350; background: rgba(239,83,80,.10); border: 1px solid rgba(239,83,80,.34); }
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 26px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.cbtn span { font-size: 17px; line-height: 1; }
.cbtn--next, .cbtn--submit { background: linear-gradient(180deg, #34d77f, #1eb35f); color: #06281a; box-shadow: 0 10px 26px rgba(46,204,113,.30); }
.cbtn--next:hover, .cbtn--submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(46,204,113,.40); }
.cbtn--submit { flex: 1; }
.cbtn--back { background: rgba(255,255,255,.06); color: #c3cdd9; }
.cbtn--back:hover { background: rgba(255,255,255,.12); }
.cbtn--full { width: 100%; margin-top: 8px; }

.cmodal__done { text-align: center; padding: 28px 0 14px; }
.cmodal__check { width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%; background: rgba(46,204,113,.14); color: #2ee06d; font-size: 36px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 820px) {
  .cmodal__card { flex-direction: column; width: min(96vw, 560px); }
  .cmodal__brand { width: 100%; padding: 30px 28px; }
  .cmodal__brandhead { margin-top: 22px; font-size: 30px; }
  .cmodal__brandpills { margin-top: 18px; }
  .cmodal__brandfoot { padding-top: 22px; }
  .cmodal__form { padding: 32px 28px; }
  .cmodal__title { font-size: 26px; }
}
@media (max-width: 480px) {
  .cmodal__brandhead { font-size: 26px; }
  .cmodal__brand .cmodal__brandpills, .cmodal__brand .cmodal__brandfoot { display: none; }
}

/* ============================================================================
   MOBILE  (≤600px) — the fixed 1440 canvas is rendered fluid (app.js fit() sets
   zoom:1 below 600px) and every section is re-laid-out single-column to match the
   412px Figma mobile design (node 1523:2279). Inline-positioned elements (mcards,
   feature pills/devices) need !important to beat their style="" attributes.
   ============================================================================ */
@media (max-width: 600px) {
  #scaler { width: 100% !important; zoom: 1 !important; }
  .page { width: 100%; }
  .hero, .manage, .summary, .features, .features__list, .efficiency, .cta, .footer { width: 100% !important; }

  /* ---------------- NAV (solid white bar at the top, hamburger menu) ----------------
     The nav is fixed (from the base rule). On mobile it's a solid WHITE bar over the hero AND
     content (never the desktop dark gradient), so --solid stays white too. */
  .nav {
    top: 0; left: 0; width: 100%; height: 58px; padding: 0 18px;
    background: #141414; box-shadow: 0 2px 12px rgba(0,0,0,.25); z-index: 50;
  }
  .nav--solid { background: #141414; box-shadow: 0 2px 14px rgba(0,0,0,.35); }
  /* Hide on scroll-down / reappear on scroll-up like desktop. Must come AFTER the mobile .nav
     rule so it wins when the scroll handler adds .nav--hidden. */
  .nav--hidden { top: -160px; }
  /* Language switcher: one more row in the slide-in drawer, styled like the nav links. */
  .langbar { padding: 26px 22px; border-bottom: 1px solid #2b2b2b; }
  .langbar__toggle { width: 100%; justify-content: space-between; font-size: 18px; font-weight: 600; }
  .langbar__opts { left: auto; right: 0; transform: translateY(-6px); margin-top: 8px; }
  .langbar[data-open="true"] .langbar__opts { transform: translateY(0); }
  .nav__name { font-size: 18px; color: #fff; }
  /* White rounded square behind the bus logo on the black bar. */
  .nav__logo { background: #fff; border-radius: 8px; box-shadow: 0 2px 3px rgba(0,0,0,.25); }
  .nav__logo img { width: 26px; height: 24px; }
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 34px; height: 34px; padding: 5px; background: none; border: 0; cursor: pointer;
  }
  .nav__burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Mobile menu = full-screen DARK drawer that SLIDES IN FROM THE RIGHT (image-1 design).
     Always rendered (so it can animate); off-screen via translateX(100%) until .open. */
  .nav__links {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 0; right: 0; left: 0; bottom: 0;
    width: 100%; height: 100vh; height: 100svh; overflow-y: auto;
    background: #141414; padding: 0; border-radius: 0; box-shadow: none; z-index: 40;
    transform: translateX(100%); visibility: hidden;
    transition: transform .33s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .33s;
  }
  /* visibility flips instantly on open, but is delayed on close so the slide-OUT stays visible */
  .nav__links.open {
    transform: translateX(0); visibility: visible;
    transition: transform .33s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }
  /* drawer header: "Menu" title (left) + X close button (right) */
  .nav__menuhead {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 16px 22px; border-bottom: 1px solid #2b2b2b;
  }
  .nav__menuhead span { color: #fff; font-size: 22px; font-weight: 700; }
  .nav__close {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; background: none; border: 0;
    color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
  }
  /* menu rows: white text, divider under each, > chevron on the right */
  .nav__links a {
    display: flex; align-items: center; justify-content: space-between;
    color: #fff; font-size: 18px; font-weight: 600; opacity: 1;
    padding: 26px 22px; border-bottom: 1px solid #2b2b2b;
  }
  .nav__links a:not(.nav__phone)::after {
    content: "\203a"; color: #fff; font-size: 26px; font-weight: 400; line-height: 1; opacity: .85;
  }
  .nav__links a:hover { opacity: 1; background: rgba(255, 255, 255, .04); }
  /* phone number is hidden in the mobile drawer (per design) — desktop nav still shows it */
  .nav__phone { display: none !important; }

  /* ---------------- HERO (full first screen) ---------------- */
  .hero { height: 100vh; height: 100svh; min-height: 580px; }
  .hero__topgrad, .hero__botgrad { width: 100%; }
  .hero__content { top: 50%; transform: translateY(-50%); padding: 0 22px; }
  .hero__title { font-size: 40px; margin-bottom: 16px; }
  .hero__subtitle { font-size: 22px; font-weight: 600; line-height: 1.2; max-width: 300px; }
  .hero__trust { width: auto; margin-top: 30px; }
  .hero__laurel { width: 48px; height: 48px; }
  .hero__laurel--l { margin-right: -12px; } .hero__laurel--r { margin-left: -12px; }
  .hero__trusttxt { width: 210px; font-size: 14px; line-height: 1.42; }
  .hero .btn-pill { margin-top: 40px; height: 59px; font-size: 18px; padding: 7px 64px; }
  /* ---------------- MANAGE & GROW (scaled up to match the reference) ---------------- */
  .manage { padding-top: 30px; }
  .manage__head { padding: 0 4px; }
  /* Heading: bigger + bold; line 1 stays on ONE line (19px fits ≥~375px phones with minimal padding). */
  .manage__head h2 { font-size: 19px; font-weight: 800; line-height: 3.4; }
  .manage__head h3 { font-size: 18px; font-weight: 700; margin-top: -6px; }
  .manage__stage {
    /* z-index:2 + padding-bottom keep the 2×2 cards painting ABOVE — and clear of — the
       summary section's green curved top (which was bleeding up under the bottom row and
       reading as a grey wash). The 44px bottom padding also pushes the summary down. */
    position: relative; z-index: 2; width: 100% !important; height: auto !important; margin-top: 38px !important; padding: 0 17px 44px;
    /* minmax(0,1fr) (NOT plain 1fr): the full-bleed collage gif spans both columns
       (grid-column 1/-1, width 120.6vw). Plain `1fr` = minmax(auto,1fr), so that giant
       gif blows BOTH card tracks out to its own width (~318px each at 390px) and shoves
       the right column off-screen. Capping the track minimum at 0 lets the gif overflow
       its row (clipped, size unchanged) while the 2×2 cards fit the viewport. */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
  }
  /* Green backdrop — near full-width band (Figma gradient 180deg #27AE60 → #FFFFFF, rounded top),
     wide enough that a BIG collage still sits inside it with margin (no spill). */
  /* Green backdrop = the perfect rounded rect (DO NOT TOUCH — user-approved). */
  .manage__bg {
    position: absolute !important; left: 50% !important; top: 75px !important; transform: translateX(-50%);
    width: 91% !important; max-width: 396px; height: 300px !important; border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #27AE60, #FFFFFF) !important;
  }
  /* Mobile uses the dedicated mobile gif; hide the desktop one. Collage enlarged to fill the
     green as much as possible while staying inside it (no spill past the rounded corners). */
  .manage__phone { display: none !important; }
  .manage__mgif {
    display: block !important;
    position: relative !important; left: -15.16vw !important; top: auto !important; z-index: 2;
    grid-column: 1 / -1; justify-self: center;
    /* Both gif width AND its left offset are in vw, so they scale together — the collage stays
       centred across every phone width (responsive). left -15.16vw = user-tuned centre. */
    width: 120.6vw !important; max-width: 640px; height: auto !important;
    /* margin-top 10 = gif nudged up; margin-bottom 11 adds to the 5px grid row-gap
       → 16px gap between the gif and the 2×2 cards below (kept after the card gap → 5px). */
    margin: 10px auto 11px; animation: none;
  }
  /* 2×2 cards — taller, bigger icon/title, more padding (title only, Title-Case #3e3e3e).
     min-height (not fixed height) + flex:none on the icon so a 2–3 line title can't squeeze
     the icon into an oval. */
  .mcard {
    position: relative !important; left: auto !important; top: 20px !important; z-index: 2;
    width: auto !important; min-height: 118px; height: auto !important; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16px 8px; border-radius: 10px; gap: 9px;
    background: #fff !important;   /* pure white cards (no green/grey bleed from the summary below) */
  }
  .mcard__icon { width: 34px; height: 34px; margin: 0; flex: none; }
  .mcard__glyph { width: 18px; height: 18px; }
  /* Title = exactly 2 lines like the reference: first word on its own line (the .mcard__w1
     span is display:block ONLY here — inline on desktop, so desktop is unchanged), the rest
     flowing on line 2. No max-width cap (it forced a 3rd line); the narrow card width keeps
     the second line tidy. */
  .mcard__title { font-size: 12px; font-weight: 700; color: #3e3e3e; text-transform: capitalize;
    line-height: 1.35; margin: 0 auto; max-width: none; }
  /* The first word is already cased correctly in the HTML; text-transform:none keeps
     "Real-time" (lowercase t) instead of capitalize turning it into "Real-Time". */
  .mcard__title .mcard__w1 { display: block; text-transform: none; }
  .mcard__text { display: none; }   /* Figma mobile cards show titles only */

  /* ---------------- TESTIMONIALS / SUMMARY ---------------- */
  /* The desktop curved-top ellipse is 1640px wide — constrain it so it doesn't overflow
     the phone width and expand the layout viewport. */
  /* Curved white top edge: a WIDE shallow ellipse (clipped by .summary's overflow:hidden, so
     no viewport expansion). width:100% made a full ellipse whose sides curved up sharply into
     an ugly "bowl"; widening to 180% shows only the gentle near-flat centre = a soft dip. */
  .summary::before { width: 150% !important; left: -25% !important; transform: none !important; height: 96px; top: -68px; }
  .summary { padding: 60px 0 50px; }
  .summary__head { padding: 0 24px; }
  .summary__head h2 { font-size: 18px; text-wrap: balance; }
  /* constrain + centre the subtitle so it wraps into balanced lines instead of "...every / day" */
  .summary__head p { font-size: 13px; max-width: 300px; margin: 10px auto 0; line-height: 1.5; }
  .tcard { flex-direction: column; width: auto !important; margin: 18px 16px 0; padding: 14px; gap: 14px; }
  .tcard__video { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  .tcard__vid { width: 100% !important; max-width: 100% !important; }
  /* "ApniBus at a glance" panel → GREEN VERTICAL SIDE-TAB (left) + the 4-item list (right),
     per the Figma mobile design. The .tcard__ptitle heading IS the green tab; the white
     .tcard__panel still wraps both. */
  .tcard__panel {
    width: 100% !important; max-width: 100% !important; padding: 0 !important;
    flex-direction: row !important; align-items: stretch; gap: 12px;
    /* drop the inner white box — the outer .tcard already provides the card around this */
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  }
  .tcard__ptitle {
    flex: none; width: 96px; margin: 0 !important; padding: 14px 6px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-radius: 18px; color: #fff !important;
    /* Custom green "shine": a vertical brand-green gradient with a soft diagonal gloss
       highlight overlaid (top-left) — same family as the Figma fill, but our own take. */
    background:
      linear-gradient(120deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 46%),
      linear-gradient(160deg, #4cc680 0%, #2bb066 48%, #1f9a55 100%);
    filter: drop-shadow(0 2px 5px rgba(11, 80, 40, .28));
    font-size: 16px; font-weight: 700; line-height: 1.4; text-transform: none;
  }
  /* Capitalize only "at" & "glance" → "ApniBus At a Glance" (the lone "a" stays lowercase,
     matching the Figma). Desktop has no transform, so the spans render the original text. */
  .tcard__ptitle .tg-cap { text-transform: capitalize; }
  .tcard__list { flex: 1; min-width: 0; gap: 0; }
  .tcard__item { gap: 12px; padding: 11px 0; }
  .tcard__ic { width: 44px !important; height: 44px !important; }
  .tcard__ic img { width: 26px; height: 26px; }
  .tcard__txt h4 { font-size: 14px; } .tcard__txt p { font-size: 11.5px; }

  /* Carousel (mobile, per Figma): centered text block, then a row of [‹ arrow][video][› arrow]
     where flex align-items:center auto-centres the arrows on the video (no JS positioning),
     then round dots. flex-wrap + 100%-basis on intro/dots forces them onto their own rows;
     `order` slots the prev arrow (1) before the slides (2) and the next arrow (3) after. */
  .carousel {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    width: auto !important; height: auto !important; margin: 22px 16px 0; padding: 0 0 4px !important;
    column-gap: 10px; row-gap: 14px;   /* gap between the video and each side arrow */
  }
  .carousel__intro {
    order: 0; flex: 0 0 100%;
    position: relative !important; left: auto !important; top: auto !important; width: auto !important; text-align: center;
  }
  /* override desktop left-align + nowrap so the heading centres and wraps */
  /* Fixed copy (same as desktop): Trusted heading → subheading → small description, with proper
     vertical spacing. */
  .summary__trusted { font-size: 18px; text-align: center !important; white-space: normal !important; margin: 22px 0 14px !important; }
  .carousel__sub { font-size: 16px; line-height: 1.25; margin: 0 0 6px; }
  .carousel__desc { font-size: 12px; line-height: 1.5; max-width: 300px; margin: 0 auto 4px; }
  .vslide {
    order: 2; position: relative !important; left: auto !important; top: auto !important;
    width: 70% !important; max-width: 268px; height: auto !important; aspect-ratio: 3 / 4;
    transform: none !important; filter: none !important; display: none !important; margin: 0;
  }
  .vslide--stage { display: block !important; }
  .vslide--stage .vslide__v { filter: none !important; }
  /* "Easy Finance Tracking" (review1) cropped the speaker's head — anchor its crop to the
     TOP so the head shows; the bottom gets cropped instead. (video2 & testimonial-4 were
     reverted — top-anchoring revealed white bg on those.) */
  .vslide__v[data-dash*="review1"] { object-position: center top !important; }
  /* both side arrows: round, in normal flow (order puts one on each side of the video) */
  .carousel__arrow {
    order: 3; position: static !important; right: auto !important; bottom: auto !important;
    top: auto !important; left: auto !important; flex: none; width: 34px; height: 34px; z-index: 6; margin: 0;
  }
  .carousel__arrow--prev { order: 1; display: flex; }
  .carousel__arrow--prev::before { margin-left: 3px; transform: rotate(-135deg); }  /* chevron points left */
  /* On touch screens the desktop :hover sticks after a tap → the arrow stayed green/dark.
     Neutralise hover/focus on mobile so the button returns to white after a tap. */
  .carousel__arrow:hover, .carousel__arrow:focus, .carousel__arrow:focus-visible {
    background: #fff !important; transform: none !important;
  }
  .carousel__arrow:hover::before { border-color: #27ae60 !important; }
  .carousel__dots {
    order: 4; flex: 0 0 100%;
    position: relative !important; left: auto !important; top: auto !important;
    justify-content: center; margin-top: 4px;
  }
  /* round dots on mobile (desktop keeps the equalizer-bar indicator) */
  .carousel__dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
  .carousel__dot.is-active { width: 7px !important; height: 7px !important; background: var(--main-text) !important; }

  /* ---------------- SMART FEATURES — STICKY STACKING cards (one full card per screen) ----------------
     The heading is pinned at the top and the FIRST card pins right under it; every following card
     scrolls up and STACKS OVER the one before it (each card's opaque .fcard__bg hides the card
     beneath). Each card is ~one viewport tall (min-height in svh), so it reads as "one card per
     screen, the rest come on scroll". Sticky works here because mobile uses zoom:1 (no transform
     ancestor) + overflow-x:clip (not a scroll container) — same reason desktop sticky works. */
  .features { padding: 0 0 40px !important; position: relative; background: #fff; }
  /* Reserved-height heading (normal centred text — NOT a flex container, which would split
     the text and the green span into two side-by-side columns) so the card pin is steady.
     top: 58px (not 0) — the fixed mobile nav is 58px tall and sits ABOVE this in z-index, so
     without the offset the nav bar covers the top of the sticky title/card as it pins.
     BUT the nav auto-hides on scroll-down — while it's hidden that reserved 58px is just dead
     blank space above the title. body.nav-is-hidden (toggled by app.js in lockstep with the
     nav's own hide/show) collapses the offset to 0 so the title/card ride right up under the
     viewport edge instead, closing the gap; it re-opens the instant the nav reappears. */
  .features__title {
    position: sticky; top: 58px; z-index: 6; background: #fff; text-align: center;
    min-height: 90px; box-sizing: border-box; padding: 20px 26px 16px; margin: 8px 0 0;
    font-size: 22px; line-height: 1.25;
    transition: top .35s cubic-bezier(.22,.61,.36,1);
  }
  body.nav-is-hidden .features__title { top: 0; }
  .features__list { display: block; padding: 0; }
  /* Spacer = real, empty block after the last card. It gives the LAST card the room it needs
     to STAY pinned (a sticky card only holds while its container still extends below it — and
     a real child reliably extends that room in every browser, unlike padding). The Improve-
     Efficiency section is pulled up by the SAME height (negative margin-top below) so it slides
     up and COVERS this spacer — same "pin, then next slides over" feel, with no blank gap. */
  .fspacer { display: block; height: calc(100svh - 165px); }
  /* STACKING UNIT = .fcard: an EQUAL full-screen-height, opaque-white, sticky block. Equal height
     means a card sliding over another fully covers it (no shorter card revealing a taller one
     beneath). No vertical margin → the cards pile TIGHTLY; the whole stack only releases (and the
     next section appears) after the last card. The visible GREEN card is the inner .fcard__body.
     top: 165px = 58px nav + ~91px title + 16px buffer, so the card pins right under both instead
     of under the title alone (which left it pinned 58px too high, under the nav). Collapses to
     the title-only offset (107px) while the nav is hidden, same as the title above. */
  .fcard {
    position: sticky !important; top: 165px !important; transform: none !important;
    width: auto !important; height: auto !important; min-height: calc(100svh - 165px) !important;
    transition: top .35s cubic-bezier(.22,.61,.36,1), min-height .35s cubic-bezier(.22,.61,.36,1);
    margin: 0 12px !important; padding: 0 !important; border-radius: 0; overflow: hidden;
    display: flex; flex-direction: column; align-items: stretch;
    /* transparent (was #fff): the white was showing through the green card's rounded top
       corners as it slid up over the previous card. Transparent lets the card behind show
       through the corner notches → seamless. The green .fcard__body stays opaque, so the
       stack still fully covers each previous card. */
    background: transparent; box-shadow: none;
  }
  body.nav-is-hidden .fcard { top: 107px !important; min-height: calc(100svh - 107px) !important; }
  /* Kill the desktop hover shadow on mobile: on touch it sticks after a tap and fades in/out
     while scrolling (the .4s transition = a shaky flicker), and on the LAST card that shadow
     is exposed at the bottom as a dark line/band (other cards hide it under the next card). */
  .fcard:hover { box-shadow: none !important; }
  /* The rounded GREEN card: sized to its content (ends with rounded corners just below the gif),
     sitting at the top of the full-height white .fcard → plain white shows below it. */
  .fcard__body {
    display: flex !important; flex-direction: column; align-items: center; position: relative;
    padding: 26px 16px 0; border-radius: 28px;
    box-shadow: none;
    /* Opaque green base: the rounded clip antialiases the card content against the body's
       background; a TRANSPARENT body left a dark premultiplied-alpha edge. Green base = the
       clipped edge blends green↔green. The .fcard__bg image covers 100% on top, so this only
       shows at the 1px AA edge. */
    background: #27ae60;
    /* Clip with clip-path instead of `overflow:hidden`. On webkit, position:sticky + overflow:hidden
       + border-radius repaints the rounded edge every scroll frame and exposes a flickering dark
       1px line on the last card. clip-path composites the rounded clip stably and — unlike a
       translateZ GPU layer — does NOT rasterise the text/icons, so they stay crisp. It still trims
       the device gif that bleeds off the card bottom (clip-path clips descendants too). */
    -webkit-clip-path: inset(0 round 28px);
    clip-path: inset(0 round 28px);
  }
  .fcard__bg { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  /* display:contents dissolves the head's box so title/sub/eyebrow/button become direct flex
     children of .fcard — letting us order them: …eyebrow → pills → button (Figma order). */
  .fcard__head { display: contents !important; }
  .fcard__title { position: relative; z-index: 2; order: 0; font-size: 23px; font-weight: 600; line-height: 1.15; text-align: center; }
  .fcard__sub { position: relative; z-index: 2; order: 0; font-size: 18px; font-weight: 400; margin-top: 3px; }
  .fcard__eyebrow { position: relative; z-index: 2; order: 0; margin: 20px auto 12px; font-size: 10.29px; font-weight: 700; letter-spacing: 1.029px; text-transform: uppercase; padding: 3px 14px; }
  /* Get Started: SAME width as the pills (300px), just slightly taller/bigger text */
  .fcard__btn {
    position: relative !important; left: auto !important; top: auto !important; order: 3; z-index: 2;
    width: 65% !important; max-width: 300px; justify-content: center; gap: 10px; font-weight: 600;
    background: #007732; margin: 22px auto 4px; padding: 14px 22px; font-size: 17px; border-radius: 12px;
  }
  .fcard__btn img { width: 11px; height: 17px; }
  /* Feature pills → full-width vertical list (icon on the LEFT, like Figma), between eyebrow & button.
     Compact so all of: title + 3 pills + button + device collage fit one screen with space below. */
  .fpill, .fpill--left {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important;
    width: 65% !important; max-width: 300px; height: auto !important; margin: 22px auto 0; z-index: 2;
    order: 2; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 13px 14px; border-radius: 4.579px;
    /* exact Figma pill shadow */
    box-shadow: 0 1.832px 6.035px 0 #007732;
  }
  .fpill__ic { order: -1; width: 30px !important; height: 30px !important; border-radius: 6px; }   /* icon always on the left */
  .fpill__ic img { width: 16px !important; height: 16px !important; }
  .fpill__h { font-size: 11px; }
  .fpill__s { font-size: 8.5px; white-space: nowrap; }   /* small enough to stay on one line at 65% width */
  .fpill__txt { display: flex; flex-direction: column; gap: 1.2px; align-items: flex-start; text-align: left; white-space: normal; }
  .hide-mobile { display: none; }   /* e.g. "Ignition," in the GPS alerts pill — hidden on mobile only */
  /* Device collage at the bottom of each card: the .fdevs wrapper is a fixed box after the button
     (order 4); the desktop device layers inside keep their 1139-space positions and the wrapper is
     scaled+translated to fill the card width (~320px). Heights cut a little so devices bleed off the
     card bottom like the reference; .fcard's overflow:hidden trims it. */
  .fcard .fdev { display: block !important; }
  .fdevs {
    /* Sits right under the Get Started button (normal flow), bleeding off the card bottom.
       Negative margin-top pulls the whole gif AND the card bottom UP together so the gif hugs
       the Get Started button while still bleeding off the card's bottom edge. */
    display: block !important; position: relative; z-index: 2; order: 4;
    width: 320px; margin: 3px auto 0; transform-origin: top left; pointer-events: none;
  }
  /* ALL gif boxes share the SAME height (200) so every card is the SAME total height as card 1
     (the content above the gif is identical across cards). Each gif keeps its own scale/translate
     so the device art is unchanged — only the reserved box (where the card ends) is equalised. */
  #ticketing .fdevs { height: 250px; transform: scale(.519) translate(-280px, -114px); }
  #gps .fdevs      { height: 250px; transform: scale(.550) translate(-293px, -136px); }
  #fuel .fdevs     { height: 250px; transform: scale(.607) translate(-316px, -172px); }
  #fastag .fdevs   { height: 250px; transform: scale(.590) translate(-363px, -142px); }
  #travel .fdevs   { height: 250px; transform: scale(.78) translate(-360px, -233px); }

  /* mobile feature cards: show the stat block and the "See Our Features" popup */
  .fcard__stat {
    display: block !important; position: static !important; order: 1; z-index: 2;
    width: 100%; text-align: center; text-transform: uppercase; margin: 6px auto 0;
    text-shadow: 0 2.44px 2.2px rgba(0,0,0,.10);
  }
  .fcard__stat-big { font-size: 27px; font-weight: 600; color: #fff; line-height: 1.1; letter-spacing: .5px; }
  .fcard__stat-line { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 1px; font-size: 19px; font-weight: 600; color: #fff; letter-spacing: 3px; }
  .fcard__dash { flex: none; width: 46px; height: 7px; fill: #00401B; }
  /* min-height keeps all cards the same height even when the sub text is one line */
  .fcard__stat-sub { margin: 3px auto 0; max-width: 290px; min-height: 46px; text-align: center; font-size: 17.5px; font-weight: 600; color: #013F1A; letter-spacing: .5px; line-height: 1.3; }

  /* "See Our Features" button */
  .fcard__seefeat {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    order: 2; z-index: 2; width: 65%; max-width: 300px; margin: 39px auto 0;
    padding: 13px 22px; border: 0; border-radius: 12px; cursor: pointer;
    background: #27ae60; color: #fff; font: inherit; font-size: 16px; font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
  }
  .fcard__seefeat-arr { font-size: 18px; line-height: 1; }

  /* centered popup card, backdrop is added by app.js */
  .fpop {
    display: none !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 95; width: calc(100% - 36px); max-width: 440px; max-height: 86vh; overflow-y: auto;
    flex-direction: column; padding: 26px 20px 28px;
    background: linear-gradient(180deg, #0f5d2c, #16713a);
    border-radius: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  }
  .fpop--open { display: flex !important; animation: fpopIn .28s cubic-bezier(.22,.61,.36,1) both; }
  /* exit animation: kept display:flex so it stays visible while it fades + shrinks out */
  .fpop--closing { display: flex !important; animation: fpopOut .24s cubic-bezier(.4,0,.2,1) both; }
  .fpop-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,.22); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    animation: fpopBackdropIn .28s ease both;
  }
  .fpop-backdrop--closing { animation: fpopBackdropOut .24s ease both; }
  .fpop__close {
    display: block !important; position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; background: none; border: 0; color: #fff;
    font-size: 32px; line-height: 1; cursor: pointer;
  }
  .fpop__title { display: block !important; color: #fff; text-align: center; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 30px 14px 22px; white-space: nowrap; }
  .fpop__title span { display: block; font-size: 15px; font-weight: 600; margin-top: 3px; white-space: normal; }
  .fpop__list { display: flex !important; flex-direction: column; gap: 16px; }
  .fpop .fpill {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important;
    order: 0 !important; flex-direction: row; justify-content: flex-start; gap: 16px;
    padding: 17px 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  .fpop .fpill__ic { order: -1; width: 46px !important; height: 46px !important; border-radius: 10px; }
  .fpop .fpill__ic img { width: 24px !important; height: 24px !important; }
  .fpop .fpill__h { font-size: 17px; }
  .fpop .fpill__s { font-size: 12.5px; white-space: normal !important; }

  /* ---------------- IMPROVE EFFICIENCY (match Figma) ---------------- */
  /* Soft green glows bleeding in from the 4 corners (replaces the strong top-center band). */
  .efficiency {
    padding: 50px 0 52px;
    /* PURE WHITE section. Two glow LAYERS whose dense origin sits at the CONTENT BOUNDARY (just
       above the badge / just below the paragraph) and fade OUTWARD — up-and-out at the top,
       down-and-out at the bottom — toward the section edges. The content (badge/heading/paragraph)
       sits on white between the two soft boundaries. NOT a full-section wash. */
    background: #ffffff !important;
  }
  .efficiency::before,
  .efficiency::after {
    content: ""; position: absolute; left: 0; right: 0; height: 130px;
    pointer-events: none; z-index: 0; filter: blur(34px);
  }
  /* TOP: origin at the layer's BOTTOM (boundary just above the badge), fades UP & OUT */
  .efficiency::before {
    top: -86px;
    background: radial-gradient(62% 100% at 50% 100%, rgba(39,174,96,.55), rgba(39,174,96,0) 72%);
  }
  /* BOTTOM: origin at the layer's TOP (boundary just below the paragraph), fades DOWN & OUT */
  .efficiency::after {
    bottom: -86px;
    background: radial-gradient(62% 100% at 50% 0%, rgba(39,174,96,.55), rgba(39,174,96,0) 72%);
  }
  /* content stays crisply on white, above the glow layers */
  .efficiency__pill, .efficiency h2, .efficiency p { z-index: 1; }
  .efficiency__pill { font-size: 10px; letter-spacing: .8px; padding: 6px 14px; margin-bottom: 23px; }
  .efficiency h2 { font-size: 18px; padding: 0 34px; line-height: 1.3; }
  .efficiency p { font-size: 12px; padding: 3px 30px 0; line-height: 1.5; }
  .br-mobile { display: inline; }   /* "…Maximize every" / "rupee and operate…" */

  /* ---------------- CTA (Figma mobile: centred white card over the bus photo, no "or") ---------- */
  .cta { padding: 6px 0 40px; }
  .cta__wrap { width: auto !important; height: auto !important; min-height: 470px; margin: 0 14px; border-radius: 22px; }
  /* fill the card, object-position controls the crop */
  .cta__bg {
    inset: 0 !important; top: -17px !important; left: -8px !important; right: 0 !important; bottom: 0 !important;
    transform: none !important; scale: 1;
    width: 103% !important; height: 105% !important;
    object-fit: cover; object-position: center 62%;
  }
  .cta__card {
    position: relative !important; left: auto !important; top: 13px !important;
    width: auto !important; height: auto !important; margin: 14px; padding: 27px 20px !important; gap: 36px !important;
    text-align: center; border-radius: 24px;
  }
  .cta__copy h2 { font-size: 19px; line-height: 1.32; }
  .cta__copy p { font-size: 14px; margin-top: 14px !important; }
  /* centre the actions and drop the "or" — Figma shows call icon + Contact Us only */
  .cta__actions { justify-content: center; gap: 14px; }
  .cta__or { display: none; }

  /* ---------------- FOOTER (Figma mobile: brand → Company → Products → social → Get in Touch;
     Company/Products are collapsible accordions; social bigger + centred) ---------------- */
  .footer::before, .footer::after { display: none; }   /* desktop vertical/horizontal grid dividers */
  .footer__inner { flex-direction: column; gap: 0; padding: 40px 34px; }
  /* display:contents promotes logo-row/tag/social to flex children so we can reorder them */
  .footer__brand { display: contents; }
  .footer__logo-row { order: 0; gap: 14px; }
  /* brand block — exact Figma footer (node 1523:2650) sizes */
  .footer__logo { width: 60px; height: 60px; border-radius: 12px; }
  .footer__logo img { width: 44px; height: 40px; }
  .footer__tag { order: 0; font-size: 13px; margin-top: 8px; margin-bottom: 0; padding-bottom: 30px; line-height: 1.85; }
  .footer__col { width: 100% !important; order: 1; padding: 0; border-top: 1px solid #3a3a3a; }
  .footer__social { order: 2; }
  .footer__contact { width: 100% !important; order: 3; margin-left: 0; border-top: 1px solid #3a3a3a; padding: 34px 0 0; }
  .footer__name { font-size: 36px; }
  /* accordion rows */
  .footer__col h4 {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; padding: 22px 0; margin: 0; font-size: 18px; font-weight: 500;
  }
  .footer__col h4::after {
    content: ""; width: 11px; height: 11px; margin-right: 4px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); transition: transform .25s;
  }
  .footer__col.open h4::after { transform: rotate(-135deg); }
  /* accordion body: animate open/close (max-height + fade) instead of an instant show/hide */
  .footer__col ul {
    display: block; overflow: hidden; max-height: 0; opacity: 0;
    padding: 0 0 0 18px;
    transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, padding .34s ease;
  }
  .footer__col.open ul { max-height: 280px; opacity: 1; padding: 0 0 18px 18px; }
  .footer__col li { font-size: 13px; margin-bottom: 12px; }
  /* "Get in Touch" block — exact Figma sizes */
  .footer__contact h4 { font-size: 18px; font-weight: 700; margin-bottom: 24px; }
  .footer__contact-row { gap: 14px; margin-bottom: 12px; align-items: flex-start; }
  .footer__contact-row img { width: 20px; height: 20px; }
  .footer__contact-row p { font-size: 11px; line-height: 2; }
  .footer__contact-row strong { font-size: 12px; }
  /* social: centred band, Figma gap/size */
  .footer__social { justify-content: center; gap: 46px; margin: 0; padding: 32px 0; border-top: 1px solid #3a3a3a; }
  .footer__social .soc { width: 50px; height: 50px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__bg, .manage__phone { animation: none; transform: none; opacity: 1; }
  .nav, .hero__title, .hero__subtitle, .hero__trust, .hero .btn-pill { opacity: 1; animation: none; }
}

/* Mobile "See Our Features" popup entrance (the .fpop overlay + its backdrop) */
@keyframes fpopIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fpopBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fpopOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
}
@keyframes fpopBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}