/* ===== Fonts (Plus Jakarta Sans — variable font, weights 400–800) ===== */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Base + keyframes ===== */
html{scroll-behavior:smooth}
body{margin:0;background:#F0F1F3;font-family:'Plus Jakarta Sans',sans-serif;color:#1A1A2E;-webkit-font-smoothing:antialiased}
a{color:#E94560;text-decoration:none}
a:hover{color:#ff6b84}
@keyframes floatPhone{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatBadgeA{0%,100%{transform:translateY(0) translateZ(90px)}50%{transform:translateY(-10px) translateZ(90px)}}
@keyframes floatBadgeB{0%,100%{transform:translateY(0) translateZ(120px)}50%{transform:translateY(12px) translateZ(120px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealUp{from{opacity:0;transform:perspective(1000px) translateY(110px) rotateX(24deg) scale(0.92);filter:blur(6px)}to{opacity:1;transform:perspective(1000px) translateY(0) rotateX(0deg) scale(1);filter:blur(0px)}}
@keyframes exit3d{from{opacity:1;transform:perspective(1000px) translateY(0) rotateX(0deg) scale(1);filter:blur(0px)}to{opacity:0.08;transform:perspective(1000px) translateY(-90px) rotateX(-20deg) scale(0.92);filter:blur(5px)}}
@keyframes heroExit{from{opacity:1;transform:perspective(1000px) translateY(0) rotateX(0deg) scale(1)}to{opacity:0.15;transform:perspective(1000px) translateY(-70px) rotateX(14deg) scale(0.94)}}
@keyframes sweepR{from{opacity:0.4;transform:perspective(1200px) translateX(110px) rotateY(-22deg) scale(0.94)}to{opacity:1;transform:perspective(1200px) translateX(0) rotateY(0deg) scale(1)}}
@keyframes sweepL{from{opacity:0.4;transform:perspective(1200px) translateX(-110px) rotateY(22deg) scale(0.94)}to{opacity:1;transform:perspective(1200px) translateX(0) rotateY(0deg) scale(1)}}
@keyframes statPop{from{opacity:0;transform:scale(0.35) translateY(40px)}70%{opacity:1;transform:scale(1.12) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes underlineGrow{from{width:0}to{width:50px}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popIn{0%{opacity:0;transform:translateY(16px) scale(0.9)}60%{opacity:1;transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chipPop{from{opacity:0;transform:translateY(10px) scale(0.7)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---- service-card hover tooltip (was <sc-if> in the framework) ---- */
.card-pop { display: none; }
/* .pop-open is the single source of truth for keyboard users. (:focus-within
   was also listed here, but it fought the Enter key — focusing opened the
   popup, then Enter set aria-expanded=false while focus kept it visible.) */
.svc-card:hover .card-pop,
.svc-card.pop-open .card-pop { display: flex; }
.svc-card:focus-visible { outline: 3px solid #E94560; outline-offset: 3px; border-radius: 16px; }

/* ---- mobile hamburger + slide-down nav sheet ---- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: none; border: none; cursor: pointer;
}
.nav-burger span {
  display: block; width: 24px; height: 2px;
  border-radius: 2px; background: #1A1A2E;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 70px; left: 0; right: 0; z-index: 99;
  background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 14px 26px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; padding: 8px 20px 18px; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  /* in landscape the sheet ran past the bottom of the screen and the
     "Download App" CTA was unreachable with no way to scroll to it */
  max-height: calc(100vh - 70px);
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
  color: #1A1A2E; font-size: 16px; font-weight: 600;
  padding: 15px 4px; border-bottom: 1px solid #F0F1F3;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .mm-cta {
  margin-top: 12px; background: #E94560; color: #FFFFFF; text-align: center;
  border-radius: 12px; padding: 15px; box-shadow: 0 4px 0 #a81f37;
}

/* ---- footer "back to top" button ---- */
.to-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #E94560; color: #FFFFFF; border: none; cursor: pointer;
  box-shadow: 0 6px 0 #a81f37;
  transition: transform .15s ease, box-shadow .15s ease;
}
.to-top:hover  { transform: translateY(2px); box-shadow: 0 4px 0 #a81f37; }
.to-top:active { transform: translateY(4px); box-shadow: 0 2px 0 #a81f37; }
.to-top svg { width: 20px; height: 20px; display: block; }

/* ---- Legal pages (privacy / terms) ---- */
.legal {
  max-width: 760px; margin: 40px auto 72px;
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 48px 44px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.legal h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; color: #1A1A2E; }
.legal .updated { color: #9CA3AF; font-size: 14px; margin: 0 0 12px; }
.legal .lead { font-size: 17px; color: #6B7280; line-height: 1.7; margin: 0 0 8px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 34px 0 10px; color: #1A1A2E; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: #374151; }
.legal p { margin: 10px 0; }
.legal ul { margin: 12px 0; padding-left: 22px; }
.legal li { margin: 7px 0; }
.legal strong { color: #1A1A2E; }
.legal a { color: #E94560; }
@media (max-width: 640px) {
  .legal { padding: 32px 22px; margin: 20px auto 56px; }
  .legal h1 { font-size: 30px; }
}

/* =========================================================
   Responsive layout
   Inline styles carry specificity 1000, so overrides use
   !important. Layout containers were tagged with classes.
   ========================================================= */

/* prevent decorative / fixed-width elements from causing sideways scroll */
img { max-width: 100%; }

/* ===== CRITICAL: scroll-driven animation fallback =====
   Most sections carry inline `animation: revealUp 1s both, exit3d 1s both`
   driven by `animation-timeline: view()`. In browsers without scroll-driven
   animations (Safari, Firefox) the timeline declaration is dropped but the
   animation is NOT — it runs once on the document timeline and, because of
   `both`, freezes on its final frame. exit3d ends at opacity:0.08 and
   heroExit at 0.15, so ~28 blocks (service cards, stats, testimonial, the
   final CTA, the footer) end up near-invisible a second after load.
   Neutralising the animation entirely restores static, readable content. */
@supports not (animation-timeline: view()) {
  [style*="animation-timeline"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---- Visible keyboard focus ----
   The stylesheet defined exactly one focus style (.svc-card) and nothing for
   links or buttons, so tabbing through the nav and the dark footer relied on
   the browser default, which is nearly invisible on #12121f. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #E94560;
  outline-offset: 3px;
  border-radius: 4px;
}
footer a:focus-visible { outline-color: #FFFFFF; }

/* ---- Skip link ----
   Keyboard users had to tab the logo, five nav links and the burger on every
   page load before reaching content. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: #1A1A2E; color: #FFFFFF;
  padding: 12px 20px; border-radius: 0 0 10px 0;
  font-size: 15px; font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}

/* Clip stray horizontal overflow from the scroll-entrance transforms
   (sweepR/sweepL translate elements sideways before they scroll into view).

   `overflow: clip` only shipped in Safari 16, and an unsupported value is
   dropped entirely — Safari 15 got no clipping at all and scrolled sideways.
   `hidden` clips there (at the cost of position:sticky on the nav, which is
   the lesser problem); modern browsers take `clip` from the @supports block. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* nav links land their section just below the 70px sticky header
   instead of scrolling it underneath (offset works with smooth scroll). */
#top, #providers, #how, #features, #customers, #download { scroll-margin-top: 88px; }

/* let grid tracks shrink below their content's intrinsic width so long
   headings wrap instead of forcing the column (and page) wider. */
.hero-grid > *, .cards-grid > *, .grid-3 > *,
.feature-row > *, .stats-grid > *, .footer-grid > * { min-width: 0; }

/* ---- Tablet / small laptop: collapse the wide two-panel rows ---- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .feature-row { grid-template-columns: 1fr !important; gap: 32px !important; }
  .feat-text-2 { order: -1 !important; }              /* keep copy above its mockup */
}

/* ---- Tablet portrait: collapse the card / step grids ---- */
@media (max-width: 860px) {
  .cards-grid { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

/* ---- Nav: switch to the hamburger BEFORE the desktop links stop fitting ----
   Five nowrap links (~480px) + logo (~130px) + gutters (~40px) need ~700px.
   Between 641px and 700px the flex row overflowed and the "Download App" CTA
   was pushed off-screen, hidden by body's overflow-x:clip — invisible and
   unreachable. Swapping at 760px keeps a safety margin. */
@media (max-width: 760px) {
  .nav-links  { display: none !important; }
  .nav-burger { display: flex !important; }

  /* this whole range is touch territory, so footer links need real tap area
     (they are inline flex items ~18px tall by default) */
  .footer-grid a { display: block !important; padding: 7px 0 !important; }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  h1 { font-size: 38px !important; line-height: 1.1 !important; }
  h2 { font-size: 28px !important; }

  /* keep the three stats on ONE row (like desktop), just scaled down to fit */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .stats-grid span[style*="font-size:72px"] {
    font-size: 34px !important;
    text-shadow: 0 4px 0 rgba(0,0,0,0.12) !important;
  }
  /* 12px is the readable floor — below it iOS offers to pinch-zoom the page */
  .stats-grid span[style*="font-size:15px"] { font-size: 12px !important; line-height: 1.3 !important; }
  .footer-grid { grid-template-columns: 1fr !important; }

  /* testimonial card: 76px of horizontal padding inside a ~320px card left
     the quote squeezed into ~244px */
  [style*="padding:34px 38px"] { padding: 22px 20px !important; }

  /* tighter side gutters + far smaller vertical padding on every section.
     Desktop uses 92–130px which makes each block ~full-screen tall on a phone. */
  [style*="max-width:1180px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:92px 32px"]      { padding-top: 46px !important; padding-bottom: 46px !important; }
  [style*="padding:20px 32px 92px"] { padding-top: 6px !important;  padding-bottom: 46px !important; }
  [style*="padding:100px 32px"]     { padding-top: 54px !important; padding-bottom: 54px !important; }

  /* section heading blocks: less gap before the grid below them */
  [style*="margin-bottom:56px"] { margin-bottom: 28px !important; }
  [style*="gap:96px"]           { gap: 52px !important; }   /* feature-row stack spacing */

  /* feature "phone mockup" cards: a comfortable card size, not a full-width
     slab, and a much tighter dotted stage around them */
  [style*="width:300px"] { max-width: 248px !important; }
  /* scoped to the popover — the bare [style*="width:320px"] also matched the
     CTA section's decorative 320px ring, squashing that circle into an ellipse */
  .card-pop > div[style*="width:320px"] { max-width: 100% !important; }
  [style*="padding:44px 32px"] { padding: 22px 14px !important; }
  [style*="width:160px;height:160px"] { width: 128px !important; height: 128px !important; }  /* UPI QR */

  /* stacked grids: pull the cards/steps closer together */
  .cards-grid, .grid-3 { gap: 14px !important; }

  /* service cards: more compact on phones (smaller icon, padding & text) */
  .svc-card { padding: 16px !important; gap: 7px !important; }
  .svc-card h3 { font-size: 16px !important; }
  .svc-card ul { font-size: 12.5px !important; gap: 4px !important; line-height: 1.35 !important; }
  .svc-card > p { font-size: 12px !important; padding-top: 8px !important; margin-top: 0 !important; }
  /* also covers the three "For Customers" icon tiles, which are not .svc-card
     and so stayed chunky at 48px next to the shrunken provider cards */
  .svc-card span[style*="width:48px"],
  .grid-3 span[style*="width:48px"] {
    width: 40px !important; height: 40px !important;
    font-size: 19px !important; border-radius: 11px !important;
  }

  /* ---- category popups on mobile ----
     Touch has no :hover, so the popup is revealed by TAPPING the card (JS adds
     .pop-open). It expands inline at the top of the card rather than as an
     absolutely-positioned floating tooltip. Hidden until opened. */
  .card-pop {
    position: static !important;
    margin: 0 !important;               /* the card's flex gap handles spacing */
    perspective: none !important;
    pointer-events: auto !important;
    display: none !important;           /* hidden until the card is tapped open */
  }
  .svc-card:hover .card-pop,
  .svc-card.pop-open .card-pop { display: flex !important; }
  .card-pop > div {
    width: 100% !important;             /* fill the card instead of a fixed 320px */
    padding: 13px 14px 12px !important;
    box-shadow: 0 2px 10px rgba(26,26,46,0.08) !important;  /* softer than the floating shadow */
    animation: none !important;         /* static now — no pop-in */
  }
  /* the little tooltip arrow tail is pointless when inline */
  .card-pop > div > span[style*="rotate(45deg)"] { display: none !important; }

  /* Hero phone keeps its FULL desktop look on mobile — 3D tilt + the floating
     ₹/bills badges stay. It is only scaled to fit (see blocks below), nothing
     is stripped. */
}

/* ---- Decorative background circles ----
   At desktop sizes these are subtle corner glows. On a 360px phone a 700px
   radial gradient covers the whole viewport and the two overlap into a muddy
   full-bleed wash, so they get scaled to stay corner-sized. They are contained
   by their parents' overflow:hidden, so this is appearance, not overflow. */
@media (max-width: 640px) {
  [style*="width:700px;height:700px"] { width: 360px !important; height: 360px !important; top: -130px !important; right: -90px !important; }
  [style*="width:640px;height:640px"] { width: 330px !important; height: 330px !important; top: -160px !important; left: -80px !important; }
  [style*="width:520px;height:520px"] { width: 280px !important; height: 280px !important; }
  /* CTA rings: keep them circular and off the text */
  [style*="width:460px;height:460px"] { width: 240px !important; height: 240px !important; border-width: 34px !important; top: -105px !important; right: -80px !important; }
  [style*="width:320px;height:320px"] { width: 190px !important; height: 190px !important; border-width: 28px !important; bottom: -90px !important; left: -65px !important; }
}

/* ---- Print: privacy / terms get saved as PDF a lot ----
   Without this, printing carries the sticky nav, the whole dark 4-column
   footer, the back-to-top button and every decorative animation. */
@media print {
  nav, .mobile-menu, .nav-burger, footer, .to-top { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { background: #FFFFFF !important; color: #000000; }
  .legal {
    max-width: none !important; margin: 0 !important; padding: 0 !important;
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
  }
  .legal a { color: #000000; text-decoration: underline; }
  /* a printed page can't be clicked — spell the destination out */
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* ---- Respect prefers-reduced-motion ----
   The page runs many infinite animations (floating phone/badges, moving grid,
   pulsing CTA, spinning rings, twinkling particles). Users who ask their OS to
   reduce motion should not get them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Compact hero below the tablet breakpoint ----
   Once .hero-grid is a single column, the text block alone ran ~548px tall, so
   the phone started ~675px down and was pushed off the first screen. The two
   CTAs (250px each) no longer fit side by side in a ~442px column and wrapped
   to two rows; the feature pills wrapped to three. Tightening the stack brings
   the phone back above the fold. */
@media (max-width: 760px) {
  .hero-grid > div:first-child { gap: 18px !important; }
  /* let the CTAs sit side by side again instead of stacking */
  .hero-grid a[href="#download"],
  .hero-grid a[href="#how"] {
    padding: 0 20px !important;
    height: 50px !important;
    font-size: 15px !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* feature pills: one row, slightly tighter */
  .hero-grid span[style*="border-radius:8px"] {
    padding: 7px 11px !important;
    font-size: 12px !important;
  }
  .hero-grid p { font-size: 16px !important; line-height: 1.55 !important; }
}

/* ---- Very small phones: ease the biggest hero type further ---- */
@media (max-width: 400px) {
  h1 { font-size: 32px !important; }
  /* three stat columns at ~101px each wrapped labels to 4-5 ragged lines */
  .stats-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .stats-grid span[style*="font-size:72px"] { font-size: 40px !important; }
  .stats-grid span[style*="font-size:15px"] { font-size: 13px !important; }
}

/* =========================================================
   Hero phone on mobile: SAME as desktop (3D tilt + floating
   "₹12,400 collected" / "18 bills sent" badges), just scaled
   down so the whole stage fits. transform-origin:center keeps
   it centered; body's overflow-x:clip hides the scaled box.
   The JS mouse-tilt sets a non-!important inline transform, so
   these !important rules win on touch devices.
   ========================================================= */
/* 541–760px (large phones / small tablets) had NO phone scaling — the full
   590px phone sat below a tall text block, so it fell off the first screen. */
@media (max-width: 760px) and (min-width: 541px) {
  .hero-grid { padding-top: 40px !important; padding-bottom: 32px !important; gap: 4px !important; }
  #phone3d {
    transform: rotateX(8deg) rotateY(-16deg) scale(0.78) !important;
    transform-origin: 50% 0% !important;
    margin: 0 0 -130px !important;
  }
  #phone3d [style*="left:-96px"]  { left: -40px !important; }
  #phone3d [style*="right:-88px"] { right: -34px !important; }
}

@media (max-width: 540px) {
  /* tighter hero: less top/bottom padding, and the scaled phone sits right
     under the copy instead of after a huge gap */
  .hero-grid { padding-top: 44px !important; padding-bottom: 36px !important; gap: 10px !important; }
  #phone3d {
    transform: rotateX(8deg) rotateY(-16deg) scale(0.72) !important;
    transform-origin: 50% 0% !important;
    margin: 0 0 -165px !important;   /* collapse the 590px box down to its scaled height */
  }
  /* pull the floating "₹12,400" / "18 bills sent" badges inward so they
     don't clip off the screen edges */
  #phone3d [style*="left:-96px"] { left: -34px !important; }
  #phone3d [style*="right:-88px"] { right: -28px !important; }
}
@media (max-width: 430px) {
  #phone3d {
    transform: rotateX(8deg) rotateY(-16deg) scale(0.62) !important;
    transform-origin: 50% 0% !important;
    margin: 0 0 -224px !important;
  }
}
@media (max-width: 350px) {
  #phone3d {
    transform: rotateX(8deg) rotateY(-16deg) scale(0.54) !important;
    transform-origin: 50% 0% !important;
    margin: 0 0 -272px !important;
  }
}