/* ============================================================
   Loan Experts India — Section styles
   Every section carries its own visual treatment.
   ============================================================ */

/* ============ HERO SLIDER ============ */
/* The top bar, the menu, the slider and the highlights bar together occupy
   exactly one screen. The slider flexes into whatever is left over — roughly
   75–80% of the viewport — and the highlights bar is always in view. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--blue-ink);
  /* one screen, sized to exactly one screen */
  min-height: calc((100vh - var(--nav-h) - var(--topbar-h)) * 1.00);
  min-height: calc((100svh - var(--nav-h) - var(--topbar-h)) * 1.00);
  display: flex;
  flex-direction: column;
}

.hslider {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  --hs-dur: 6800ms;
}
.hslider__viewport {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 400px;
}

/* soft brand glows that sit above the photo, below the copy */
.hslider__glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hslider__glow span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.hslider__glow span:nth-child(1) {
  width: 520px; height: 520px; top: -180px; left: -140px;
  background: rgba(74, 65, 168, 0.55);
  animation: hsDrift 15s ease-in-out infinite alternate;
}
.hslider__glow span:nth-child(2) {
  width: 380px; height: 380px; right: 8%; bottom: -160px;
  background: rgba(227, 31, 37, 0.3);
  animation: hsDrift 19s ease-in-out infinite alternate-reverse;
}
@keyframes hsDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

/* ---- Slides ---- */
.hslide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  padding: clamp(30px, 4vw, 56px) 0 clamp(88px, 8vw, 108px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s var(--ease), visibility 0s linear 0.85s;
}
.hslide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 0.85s var(--ease);
}

/* ---- Slide media: Ken Burns + cinematic tint ---- */
.hslide__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  clip-path: inset(0 0 0 0);
  background: var(--blue-ink);
}
/* Plain photography with nothing baked into it, so it fills the frame rather
   than sitting letterboxed on the navy — the 1920x600 source is far wider than
   the hero box, so the crop takes a horizontal band through the middle. */
.hslide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none;
}
.hslide.is-active .hslide__media {
  animation: hsWipe 1.15s var(--ease) both;
}
.hslide.is-active .hslide__media img {
  animation: hsFloat 14s ease-in-out infinite alternate;
}
@keyframes hsWipe {
  from { clip-path: inset(0 0 0 32%); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes hsFloat {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}
/* light touch only — the photograph should carry the frame */
.hslide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, rgba(12, 10, 38, 0.9) 0%, rgba(12, 10, 38, 0.72) 32%,
      rgba(12, 10, 38, 0.3) 60%, rgba(12, 10, 38, 0) 80%),
    linear-gradient(180deg, rgba(12, 10, 38, 0.34) 0%, rgba(12, 10, 38, 0) 26%, rgba(12, 10, 38, 0.7) 100%);
}


/* ---- Slide copy ---- */
.hslide__inner {
  position: relative;
  z-index: 4;
  max-width: 100%;
}
/* localised scrim: keeps the words legible without dimming the whole photo */
.hslide__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--gutter) * -1);
  right: 34%;
  top: -6%;
  bottom: -8%;
  background: radial-gradient(86% 78% at 22% 50%, rgba(9, 8, 30, 0.94), rgba(9, 8, 30, 0.72) 55%, transparent 82%);
  filter: blur(6px);
  pointer-events: none;
}
.hslide__inner > * { max-width: 620px; }

.hslide__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.hslide__claim {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--red-bright), var(--red-dark));
  box-shadow: 0 12px 26px -12px rgba(227, 31, 37, 0.9);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.hslide__claim svg { width: 15px; height: 15px; flex: none; }

.hslide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.hslide__eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 0 0 rgba(239, 58, 64, 0.7);
  animation: hsPulse 2.4s ease-out infinite;
}
@keyframes hsPulse {
  70% { box-shadow: 0 0 0 9px rgba(239, 58, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 58, 64, 0); }
}

.hslide__title {
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.028em;
  word-spacing: 0.2em;
  color: #fff;
  margin-bottom: 18px;
  /* close shadow lifts the words off the photo, wide one seats them */
  text-shadow: 0 2px 10px rgba(8, 7, 28, 0.6), 0 14px 34px rgba(8, 7, 28, 0.5);
}
.hslide__title em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  background: linear-gradient(100deg, #fff 0%, #e4dcff 45%, #ffb3b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hslide__title em::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.04em -0.3em;
  border-radius: 14px;
  background: rgba(9, 8, 30, 0.44);
}
.hslide__lead {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 12px rgba(8, 7, 28, 0.66);
  margin-bottom: 28px;
}

.hslide__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 34px;
}
.hslide__points li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9063rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 10px rgba(8, 7, 28, 0.6);
}
.hslide__points svg {
  width: 15px;
  height: 15px;
  flex: none;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.hslide__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* staggered entrance for every block of copy */
.hslide__inner > * {
  opacity: 0;
  transform: translateY(30px);
}
.hslide.is-active .hslide__inner > * {
  animation: hsRise 0.9s var(--ease) forwards, hsDeblur 0.9s var(--ease);
}
.hslide.is-active .hslide__tags { animation-delay: 0.18s; }
.hslide.is-active .hslide__title { animation-delay: 0.3s; }
.hslide.is-active .hslide__lead { animation-delay: 0.42s; }
.hslide.is-active .hslide__points { animation-delay: 0.54s; }
.hslide.is-active .hslide__cta { animation-delay: 0.66s; }
@keyframes hsRise {
  to { opacity: 1; transform: none; }
}
@keyframes hsDeblur {
  from { filter: blur(8px); }
  to { filter: blur(0); }
}

/* ---- Controls ---- */
.hslider__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 3.6vw, 44px);
  z-index: 6;
}
.hslider__ui-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* keeps the arrows clear of the fixed WhatsApp / back-to-top buttons */
  padding-right: clamp(58px, 5vw, 76px);
}

.hs-dots { display: flex; align-items: center; gap: 10px; }
.hs-dot {
  position: relative;
  width: 30px;
  height: 4px;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.26);
  overflow: hidden;
  transition: width 0.6s var(--ease), background-color 0.4s ease;
}
.hs-dot:hover { background: rgba(255, 255, 255, 0.45); }
.hs-dot.is-active { width: 76px; background: rgba(255, 255, 255, 0.24); }
.hs-dot i {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, var(--red-bright));
}
.hs-dot.is-active i { animation: hsFill var(--hs-dur, 6800ms) linear forwards; }
.hslider.is-paused .hs-dot.is-active i,
.hslider.is-static .hs-dot.is-active i { animation-play-state: paused; }
.hslider.is-static .hs-dot.is-active i { transform: scaleX(1); }
@keyframes hsFill { to { transform: scaleX(1); } }

.hs-nav { display: flex; align-items: center; gap: 12px; }
.hs-count {
  font-family: var(--f-display);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}
.hs-count b { color: #fff; font-size: 1rem; font-weight: 800; }
.hs-count i { font-style: normal; opacity: 0.4; }

.hs-arrow {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease);
}
.hs-arrow svg { width: 19px; height: 19px; }
.hs-arrow:hover {
  background: var(--red);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--sh-red);
}

/* ---- Trust / stats bar under the slider ---- */
.hero__bar {
  position: relative;
  z-index: 5;
  flex: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(20, 18, 63, 0.94), rgba(14, 12, 44, 0.98));
  backdrop-filter: blur(14px);
}
.hero__bar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding: clamp(16px, 2vw, 26px) 0;
}

.hero__stats { display: flex; flex-wrap: wrap; gap: 14px 42px; }
.hero__stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.hero__stat strong em { font-style: normal; color: var(--red-bright); }
/* direct child only — the counter <span> lives inside <strong> */
.hero__stat > span { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; }

.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trust-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease);
}
.trust-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-3px);
}
.trust-chip svg.g { width: 20px; height: 20px; flex: none; color: #fff; }
.trust-chip__txt { line-height: 1.3; }
.trust-chip strong {
  display: block;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.trust-chip__txt span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.trust-chip .icon-chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.trust-chip .icon-chip svg { width: 18px; height: 18px; }

.hero__faces { display: flex; flex: none; }
.hero__faces img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  object-fit: cover;
}
.hero__faces img + img { margin-left: -11px; }

/* Short screens: tighten the copy so the slider + highlights still share
   a single viewport instead of spilling past it. */
@media (max-height: 860px) and (min-width: 761px) {
  .hslide__title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 14px; }
  .hslide__eyebrow { margin-bottom: 16px; padding: 6px 16px; }
  .hslide__lead { margin-bottom: 20px; }
  .hslide__points { margin-bottom: 24px; }
  .hslide__cta .btn-lg { padding: 15px 30px; }
  .hero__stat strong { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
}
@media (max-height: 720px) and (min-width: 761px) {
  .hslide__lead { display: none; }
  .hslide { padding-bottom: 84px; }
  .trust-chip { padding: 9px 15px; }
}

/* Motion-safe fallback: everything visible, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .hslide.is-active .hslide__inner > * { opacity: 1; transform: none; filter: none; }
  .hs-dot.is-active i { transform: scaleX(1); }
}

/* ============ FOUNDER ============ */
.founder__grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(40px, 5.5vw, 84px);
  align-items: center;
}
.founder__visual { position: relative; }
.founder__panel {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1 / 1.16;
  background:
    radial-gradient(120% 90% at 50% 105%, rgba(227, 31, 37, 0.22), transparent 58%),
    linear-gradient(165deg, var(--blue-mid) 0%, var(--blue-deep) 55%, var(--blue-ink) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.founder__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.08;
}
.founder__panel img {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 96%;
  object-fit: contain;
  object-position: bottom center;
  mix-blend-mode: normal;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.34));
}
.founder__years {
  position: absolute;
  z-index: 3;
  right: -18px;
  top: 40px;
  background: #fff;
  border-radius: 18px;
  padding: 17px 22px;
  text-align: center;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
}
.founder__years strong {
  display: block;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.045em;
  line-height: 1;
}
.founder__years span { font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.founder__stamp {
  position: absolute;
  z-index: 3;
  left: -22px;
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 18px 13px 14px;
  box-shadow: var(--sh-md);
}
.founder__stamp .icon-chip { width: 38px; height: 38px; border-radius: 11px; }
.founder__stamp .icon-chip svg { width: 19px; height: 19px; }
.founder__stamp b { display: block; font-family: var(--f-display); font-size: 0.875rem; color: var(--ink); letter-spacing: -0.01em; }
.founder__stamp span { font-size: 0.75rem; color: var(--muted); }

.founder__quote-mark { color: var(--blue-100); width: 56px; height: 56px; margin-bottom: 12px; }
.founder__body { font-family: var(--f-serif); font-size: 1.1563rem; line-height: 1.85; color: #3a3859; letter-spacing: -0.005em; }
.founder__body p + p { margin-top: 20px; }
.founder__sign {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.founder__sign-name { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.founder__sign-role { font-size: 0.8438rem; color: var(--muted); }
.founder__sign .btn { margin-left: auto; }

/* ============ WHY CHOOSE US ============ */
.why { position: relative; overflow: hidden; }

/* compact header: a short pitch on the left, the numbers inline on the right */
.why__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 46px);
}
.why__intro h2 { margin-top: 6px; }
.why__intro p {
  margin-top: 12px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 440px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  overflow: hidden;
}
.stat { padding: 18px 16px; background: rgba(20, 18, 63, 0.55); }
.stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.045em;
  line-height: 1.05;
  white-space: nowrap;
}
.stat strong em { font-style: normal; color: var(--blue-soft); }
.stat > span {
  display: block;
  margin-top: 7px;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}

.why__grid { position: relative; }

/* ---- Interactive India map — the centrepiece ---- */
.imap { position: relative; }
.imap__stage {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
}
.imap__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Every state draws itself in, then fills. Lengths are measured in JS. */
.imap__state {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(143, 136, 214, 0.3);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.5s ease, stroke 0.5s ease;
}
.imap__state.is-served {
  fill: rgba(143, 136, 214, 0.34);
  stroke: rgba(196, 191, 245, 0.85);
  stroke-width: 1.3;
}
.imap__state.is-current {
  fill: rgba(227, 31, 37, 0.4);
  stroke: var(--red-bright);
  stroke-width: 2;
}
.imap.is-drawing .imap__state {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  fill-opacity: 0;
}
.imap.is-drawn .imap__state {
  animation: imapDraw 1.5s var(--ease) forwards;
  animation-delay: calc(var(--o, 0) * 26ms);
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  fill-opacity: 0;
}
@keyframes imapDraw {
  40% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

.imap__pin { cursor: pointer; }
.imap__dot {
  fill: var(--red-bright);
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: r 0.35s var(--ease);
}
.imap__ping {
  fill: none;
  stroke: rgba(239, 58, 64, 0.8);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.imap__pin.is-current .imap__dot { r: 13; }
.imap__pin.is-current .imap__ping { animation: imapPing 2.2s ease-out infinite; }
.imap__pin.is-current .imap__ping--2 { animation-delay: 0.75s; }
@keyframes imapPing {
  0% { transform: scale(0.5); opacity: 0.9; }
  75% { transform: scale(3.4); opacity: 0; }
  100% { opacity: 0; }
}
.imap.is-drawn .imap__pin {
  opacity: 0;
  animation: imapDrop 0.6s var(--ease) forwards;
  animation-delay: calc(1.1s + var(--i) * 70ms);
}
/* uses the `translate` property, not `transform` — the pins already carry a
   transform attribute for their position, which must not be clobbered */
@keyframes imapDrop {
  from { opacity: 0; translate: 0 -16px; }
  to { opacity: 1; translate: 0 0; }
}
.imap__pin:focus-visible { outline: none; }
.imap__pin:focus-visible .imap__dot { stroke: var(--blue-soft); stroke-width: 4; }

/* ---- Read-out card, floated over the map on wide screens ---- */
.imap__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(330px, 30%);
  z-index: 3;
}
.imap__card {
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(46, 40, 110, 0.92), rgba(23, 20, 68, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}
.imap__card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.imap__loc {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--red-bright), var(--red-dark));
  color: #fff;
}
.imap__loc svg { width: 19px; height: 19px; }
.imap__card-name b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.imap__card-name span {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-soft);
  font-weight: 600;
}

.imap__metrics {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.imap__metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.imap__metric strong {
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
  order: 2;
}
/* direct child only — the counter <span> lives inside <strong> */
.imap__metric > span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
.imap__card.is-swapping .imap__metric strong,
.imap__card.is-swapping .imap__card-name b,
.imap__card.is-swapping .imap__card-name span { animation: imapSwap 0.45s var(--ease); }
@keyframes imapSwap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.imap__share { margin-top: 14px; }
.imap__share-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.imap__share-top b { font-family: var(--f-display); font-size: 0.875rem; color: #fff; }
.imap__track {
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.imap__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-soft), var(--red-bright));
  transition: width 0.7s var(--ease);
}

.imap__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: clamp(14px, 2vw, 24px);
}
.imap__chip {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.imap__chip:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.imap__chip.is-active {
  color: #fff;
  background: rgba(227, 31, 37, 0.9);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(227, 31, 37, 0.9);
}

/* ---- strengths, condensed to one row ---- */
.why__strengths {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: clamp(30px, 4vw, 52px);
}
.strength {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.5s var(--ease), background-color 0.4s ease, border-color 0.4s ease;
}
.strength:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.09); border-color: rgba(143, 136, 214, 0.42); }
.strength .icon-chip { width: 40px; height: 40px; border-radius: 12px; flex: none; margin: 0; }
.strength .icon-chip svg { width: 19px; height: 19px; }
.strength b {
  font-family: var(--f-display);
  font-size: 0.9063rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

/* ============ EXPERTISE ============ */
.exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Each problem card owns an accent (--c, an RGB triplet) that runs through its
   top rule, icon chip and bullet rows. The solution footer stays green on every
   card, so the positive line never reads in the "problem" colour. */
.prob-card {
  --c: 227 31 37;
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, rgb(var(--c) / 0.08), #fff 56%);
  border: 1px solid rgb(var(--c) / 0.22);
  border-radius: 22px;
  padding: 30px 26px 26px;
  box-shadow: var(--sh-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}
.exp-grid .prob-card:nth-child(1) { --c: 227 31 37; }   /* CIBIL    — red    */
.exp-grid .prob-card:nth-child(2) { --c: 234 88 12; }   /* Income   — orange */
.exp-grid .prob-card:nth-child(3) { --c: 37 99 235; }   /* Banking  — blue   */
.exp-grid .prob-card:nth-child(4) { --c: 13 148 136; }  /* Property — teal   */

.prob-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--c)), rgb(var(--c) / 0.2));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.prob-card:hover {
  transform: translateY(-7px);
  border-color: rgb(var(--c) / 0.5);
  box-shadow: 0 12px 22px -14px rgb(var(--c) / 0.5), 0 34px 58px -28px rgb(var(--c) / 0.6);
}
.prob-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.prob-card__head h4 { font-size: 1.0938rem; letter-spacing: -0.025em; }
.prob-card .icon-chip {
  width: 56px; height: 56px;
  border-radius: 17px;
  background: linear-gradient(145deg, rgb(var(--c)), rgb(var(--c) / 0.62));
  border-color: rgb(var(--c) / 0.5);
  color: #fff;
  box-shadow: 0 14px 26px -14px rgb(var(--c) / 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.prob-card .icon-chip svg { width: 28px; height: 28px; }
.prob-card:hover .icon-chip {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 20px 34px -16px rgb(var(--c)), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.prob-card ul { display: grid; gap: 8px; margin-bottom: 24px; }
.prob-card li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-radius: 11px;
  background: rgb(var(--c) / 0.07);
  border: 1px solid rgb(var(--c) / 0.16);
  font-family: var(--f-display);
  font-size: 0.9063rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}
.prob-card li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--c));
  box-shadow: 0 0 0 3px rgb(var(--c) / 0.18);
  flex: none;
}
.prob-card:hover li { background: rgb(var(--c) / 0.12); border-color: rgb(var(--c) / 0.3); }
.prob-card li:hover { transform: translateX(3px); }
.prob-card__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed rgb(var(--c) / 0.3);
  font-family: var(--f-display);
  font-size: 0.8438rem;
  font-weight: 700;
  color: #047857;
}
.prob-card__foot svg { width: 18px; height: 18px; flex: none; color: #10b981; }

.exp-cta {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 34px;
  padding: 30px 34px;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--blue-50), #fff 62%);
  border: 1px solid var(--blue-100);
}
.exp-cta h4 { font-size: 1.1875rem; letter-spacing: -0.025em; margin-bottom: 6px; }
.exp-cta p { font-size: 0.9375rem; }

/* ============ PARTNERS ============ */
/* A static wall of the empanelled banks — every logo on screen at once,
   nothing scrolling past. Four across on desktop, folding to two on phones. */
.bank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(34px, 4vw, 52px);
}
.bank-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 142px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.4s ease;
}
/* light sweeping across the card face */
.bank-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(143, 136, 214, 0.22), transparent);
  transition: left 0.75s var(--ease);
}
.bank-card:hover::before { left: 120%; }
/* Logos carry their own brand colours and several sit on solid blocks, so they
   run at full saturation rather than the usual greyed-out partner treatment. */
.bank-card img {
  max-height: 74px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.45s var(--ease);
}
.bank-card:hover {
  transform: translateY(-6px);
  border-color: rgba(143, 136, 214, 0.55);
  box-shadow: 0 22px 44px -22px rgba(57, 49, 134, 0.55), 0 0 0 4px rgba(143, 136, 214, 0.1);
}
.bank-card:hover img { transform: scale(1.06); }

.bank-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.bank-foot__item {
  padding: 18px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.bank-foot__item strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bank-foot__item span { font-size: 0.8125rem; color: var(--muted); }

/* ============ TESTIMONIALS ============ */
.tst__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 40px;
  margin-bottom: 44px;
}
.google-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 22px;
  box-shadow: var(--sh-sm);
}
.google-card svg.g { width: 30px; height: 30px; flex: none; }
.google-card strong { font-family: var(--f-display); font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.035em; line-height: 1; }
.google-card .stars { margin: 5px 0 3px; }
.google-card span { display: block; font-size: 0.75rem; color: var(--muted); }

/* Every review is on the page at once — no carousel. The column count is left
   to the browser: it fits as many ~340px columns as the viewport allows, up to
   three. Masonry columns rather than a grid so short and long quotes pack
   tightly instead of padding out to a shared row height. */
.tst__grid {
  columns: 3 340px;
  column-gap: 24px;
  margin-top: clamp(34px, 4vw, 48px);
}
.tcard {
  --c: 74 65 168;
  position: relative;
  break-inside: avoid;
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(168deg, rgb(var(--c) / 0.07), #fff 52%);
  border: 1px solid rgb(var(--c) / 0.2);
  border-radius: 24px;
  padding: 32px 30px 28px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
/* accent edge along the top of each card */
.tcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgb(var(--c)), rgb(var(--c) / 0.2));
}
.tcard:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--c) / 0.45);
  box-shadow: 0 14px 24px -16px rgb(var(--c) / 0.5), 0 38px 62px -30px rgb(var(--c) / 0.6);
}
.tcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tcard__quote { width: 34px; height: 34px; color: rgb(var(--c)); opacity: 0.3; }
.tcard p {
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: #34324f;
  letter-spacing: -0.005em;
  margin-bottom: 26px;
  flex: 1;
}
.tcard__foot { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgb(var(--c) / 0.22); }
.tcard__foot img {
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--c) / 0.4);
}
/* Initials stand in where we hold no portrait, in the card's own accent. */
.tcard__ava {
  width: 50px; height: 50px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(145deg, rgb(var(--c)), rgb(var(--c) / 0.68));
  box-shadow: 0 10px 20px -12px rgb(var(--c) / 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tcard__foot b { display: block; font-family: var(--f-display); font-size: 0.9688rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.verified { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--blue); font-weight: 600; margin-top: 3px; }
.tcard .verified { color: rgb(var(--c)); }
.verified svg { width: 14px; height: 14px; }

/* ============ PARTNERSHIP ============ */
.partner-band {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 38px);
  padding: clamp(44px, 5.5vw, 76px) clamp(28px, 4.5vw, 64px);
}
.partner-band__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(38px, 5vw, 68px);
  align-items: center;
}
.partner-band p { color: rgba(255, 255, 255, 0.68); }
.partner-band p + p { margin-top: 16px; }
.partner-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 34px; }
.partner-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8438rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}
.partner-chips svg { width: 15px; height: 15px; color: var(--blue-soft); }

.payout {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow: 0 34px 64px -28px rgba(0, 0, 0, 0.6);
}
.payout__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.payout__head b { font-family: var(--f-display); font-size: 1.0313rem; color: #fff; letter-spacing: -0.02em; }
.payout__head span {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-soft);
  background: rgba(143, 136, 214, 0.16);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-weight: 700;
}
.payout__row + .payout__row { margin-top: 20px; }
.payout__row-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.payout__row-top span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.76); }
.payout__row-top b { font-family: var(--f-display); font-size: 0.9375rem; color: #fff; letter-spacing: -0.01em; }

/* ---- payout chart ---- */
.chart { position: relative; padding-left: 22px; }
.chart__axis-y {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left center;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
.chart__svg { width: 100%; height: auto; overflow: visible; }
.chart__grid path {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
.chart__bar {
  fill: rgba(255, 255, 255, 0.16);
  transform-origin: center bottom;
  transform-box: fill-box;
  transform: scaleY(0);
}
.chart__bar--top { fill: url(#payoutGrad); }
.payout.is-in .chart__bar { animation: barGrow 1s var(--ease) forwards; }
.payout.is-in .chart__bar:nth-child(2) { animation-delay: 0.12s; }
.payout.is-in .chart__bar:nth-child(3) { animation-delay: 0.24s; }
.payout.is-in .chart__bar:nth-child(4) { animation-delay: 0.36s; }
@keyframes barGrow { to { transform: scaleY(1); } }

.chart__line {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 4px 10px rgba(239, 58, 64, 0.55));
}
.payout.is-in .chart__line { animation: barLine 1.2s var(--ease) 0.5s forwards; }
@keyframes barLine { to { stroke-dashoffset: 0; } }

.chart__flag circle { fill: #fff; stroke: var(--red-bright); stroke-width: 2.5; }
.chart__flag { opacity: 0; }
.payout.is-in .chart__flag { animation: flagIn 0.5s var(--ease) 1.6s forwards; }
@keyframes flagIn { from { opacity: 0; } to { opacity: 1; } }
.chart__flag-ring {
  fill: none;
  transform-origin: center;
  transform-box: fill-box;
  animation: flagPing 2.4s ease-out infinite;
}
@keyframes flagPing {
  0% { transform: scale(1); opacity: 0.85; }
  75% { transform: scale(3.2); opacity: 0; }
  100% { opacity: 0; }
}

.chart__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}
.chart__labels b { color: #fff; font-weight: 700; }

.partner-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.partner-band .hl {
  background: linear-gradient(100deg, #fff 10%, var(--blue-soft) 60%, #ff9ea1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.payout__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8438rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 10px;
}
.payout__foot svg { width: 16px; height: 16px; color: var(--blue-soft); flex: none; }

/* ============ PROCESS — file tracker ============ */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(26px, 3.5vw, 54px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 66px);
}

/* ---- left: the steps ---- */
.flow__steps { position: relative; display: grid; gap: 12px; }
.flow__step {
  position: relative;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.flow__step:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.flow__step.is-active {
  border-color: rgba(143, 136, 214, 0.55);
  box-shadow: 0 18px 40px -22px rgba(57, 49, 134, 0.55);
}
.flow__hit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
}
.flow__num {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--blue);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  transition: background 0.45s ease, color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease);
}
.flow__step.is-active .flow__num {
  background: linear-gradient(145deg, var(--blue-mid), var(--blue-deep));
  border-color: transparent;
  color: #fff;
  transform: rotate(-5deg);
}
.flow__step.is-done .flow__num { background: var(--red-50); border-color: rgba(227, 31, 37, 0.2); color: var(--red); }
.flow__head b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.flow__head span { font-size: 0.8438rem; color: var(--muted); line-height: 1.5; }

/* the detail list unfurls only for the step being played */
.flow__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.flow__step.is-active .flow__more { grid-template-rows: 1fr; }
.flow__more > div { overflow: hidden; }
.flow__more ul { display: grid; gap: 10px; padding: 0 22px 20px 80px; }
.flow__more li {
  position: relative;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--body);
  padding-left: 18px;
}
.flow__more li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-soft);
}
/* autoplay progress for the active step */
.flow__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); opacity: 0; }
.flow__step.is-active .flow__bar { opacity: 1; }
.flow__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue-mid), var(--red-bright));
}
.flow__step.is-active .flow__bar i { animation: flowFill var(--flow-dur, 7000ms) linear forwards; }
.flow.is-held .flow__step.is-active .flow__bar i { animation-play-state: paused; }
@keyframes flowFill { to { transform: scaleX(1); } }

/* ---- right: the window ---- */
.flow__stage { position: relative; }
.win {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(165deg, #1d1a55, #12102f);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 44px 80px -40px rgba(20, 18, 63, 0.85);
}
.win::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 50% at 78% 6%, rgba(143, 136, 214, 0.22), transparent 70%);
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}
.win__dots { display: flex; gap: 6px; }
.win__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.win__dots i:first-child { background: rgba(239, 58, 64, 0.7); }
.win__title {
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
}
.win__body { position: relative; display: grid; padding: 26px 26px 28px; min-height: 340px; }

.scene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.5s;
}
.scene.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}

.scene__top { display: flex; align-items: center; gap: 14px; }
.scene__ico {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.scene__ico svg { width: 21px; height: 21px; }
.scene__top b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  color: #fff;
  letter-spacing: -0.025em;
}
.scene__top span { font-size: 0.8438rem; color: rgba(255, 255, 255, 0.58); line-height: 1.5; }

.checks { display: grid; gap: 10px; }
.checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.9063rem;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
}
.scene.is-on .checks li { animation: rowIn 0.55s var(--ease) forwards; }
.scene.is-on .checks li:nth-child(1) { animation-delay: 0.2s; }
.scene.is-on .checks li:nth-child(2) { animation-delay: 0.45s; }
.scene.is-on .checks li:nth-child(3) { animation-delay: 0.7s; }
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
/* the tick draws itself as each row lands */
.checks i {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, #2fbf71, #1a8f50);
  box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.14);
}
.checks i::before,
.checks i::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
}
.checks i::before { width: 6px; height: 2px; left: 5px; top: 11px; rotate: 45deg; }
.checks i::after { width: 10px; height: 2px; left: 8.5px; top: 12.5px; rotate: -50deg; }
.scene.is-on .checks li:nth-child(1) i::before { animation: tick 0.16s ease-out 0.5s forwards; }
.scene.is-on .checks li:nth-child(1) i::after { animation: tick 0.2s ease-out 0.64s forwards; }
.scene.is-on .checks li:nth-child(2) i::before { animation: tick 0.16s ease-out 0.75s forwards; }
.scene.is-on .checks li:nth-child(2) i::after { animation: tick 0.2s ease-out 0.89s forwards; }
.scene.is-on .checks li:nth-child(3) i::before { animation: tick 0.16s ease-out 1s forwards; }
.scene.is-on .checks li:nth-child(3) i::after { animation: tick 0.2s ease-out 1.14s forwards; }
@keyframes tick { to { transform: scaleX(1); } }

.scene__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.scene__meta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: var(--f-display);
  letter-spacing: -0.01em;
}
.pill--ok { background: rgba(47, 191, 113, 0.16); border: 1px solid rgba(47, 191, 113, 0.4); color: #6ee7a4; }
.pill--ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fbf71;
  box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.6);
  animation: hsPulse 2.4s ease-out infinite;
}

/* the sanction stamp lands at the end of stage two */
.stamp {
  display: inline-block;
  padding: 9px 18px;
  border: 2px solid var(--red-bright);
  border-radius: 10px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-bright);
  background: rgba(239, 58, 64, 0.1);
  opacity: 0;
}
.scene.is-on .stamp { animation: stampIn 0.7s var(--ease) 1.3s forwards; }
@keyframes stampIn {
  from { opacity: 0; transform: scale(2) rotate(-18deg); }
  65% { opacity: 1; transform: scale(0.94) rotate(3deg); }
  to { opacity: 1; transform: scale(1) rotate(-6deg); }
}

.mini {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.mini__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}
.mini__bars { display: flex; align-items: flex-end; gap: 8px; height: 74px; }
.mini__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--blue-soft), rgba(143, 136, 214, 0.25));
  transform-origin: bottom;
  transform: scaleY(0);
}
.mini__bars i:last-child { background: linear-gradient(180deg, var(--red-bright), rgba(239, 58, 64, 0.3)); }
.scene.is-on .mini__bars i { animation: barUp 0.7s var(--ease) forwards; }
.scene.is-on .mini__bars i:nth-child(1) { animation-delay: 0.18s; }
.scene.is-on .mini__bars i:nth-child(2) { animation-delay: 0.26s; }
.scene.is-on .mini__bars i:nth-child(3) { animation-delay: 0.34s; }
.scene.is-on .mini__bars i:nth-child(4) { animation-delay: 0.42s; }
.scene.is-on .mini__bars i:nth-child(5) { animation-delay: 0.5s; }
.scene.is-on .mini__bars i:nth-child(6) { animation-delay: 0.58s; }
@keyframes barUp { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .checks li, .stamp { opacity: 1; }
  .checks i::before, .checks i::after { transform: scaleX(1); }
  .mini__bars i { transform: none; }
}

/* ============ FAQ ============ */
.faq__grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
/* grid items default to min-width:auto — without this the nowrap filter rail
   widens the whole column and pushes the page sideways on a phone */
.faq__grid > * { min-width: 0; }
.faq__aside { position: sticky; top: calc(var(--nav-h) + 32px); }

.faq__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; min-width: 0; }
.faq__filter {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--body);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease);
}
.faq__filter:hover { transform: translateY(-2px); border-color: var(--blue-soft); }
.faq__filter.is-active {
  color: #fff;
  background: linear-gradient(140deg, var(--blue-mid), var(--blue-deep));
  border-color: transparent;
  box-shadow: var(--sh-blue);
}

.faq__help {
  margin-top: 30px;
  padding: 28px 26px;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--blue-50), #fff);
  border: 1px solid var(--blue-100);
}
.faq__help .icon-chip { margin-bottom: 18px; }
.faq__help b { display: block; font-family: var(--f-display); font-size: 1.0625rem; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 7px; }
.faq__help p { font-size: 0.9063rem; margin-bottom: 20px; }
.faq__help .btn { width: 100%; }

.acc { display: grid; gap: 12px; }
.acc__item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-xs);
  transition: border-color 0.4s ease, box-shadow 0.45s var(--ease), transform 0.45s var(--ease),
    opacity 0.4s ease;
}
/* the accent rail that fills down the left edge of an open question */
.acc__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue-mid), var(--red-bright));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease);
}
.acc__item.is-open::before { transform: scaleY(1); }
.acc__item.is-open { border-color: rgba(143, 136, 214, 0.55); box-shadow: var(--sh-md); }
.acc__item.is-hidden { display: none; }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 21px 22px;
  text-align: left;
  font-family: var(--f-display);
  font-size: 1.0313rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.acc__btn i {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--blue-soft);
  flex: none;
  transition: color 0.3s ease;
}
.acc__item.is-open .acc__btn i { color: var(--red); }
.acc__btn:hover { color: var(--blue); }
.acc__ico {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease);
}
/* plus that morphs into a minus */
.acc__ico::before,
.acc__ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  translate: -50% -50%;
  transition: transform 0.45s var(--ease), background-color 0.4s ease;
}
.acc__ico::after { transform: rotate(90deg); }
.acc__item.is-open .acc__ico {
  background: linear-gradient(140deg, var(--red-bright), var(--red-dark));
  border-color: transparent;
  transform: rotate(180deg);
}
.acc__item.is-open .acc__ico::before,
.acc__item.is-open .acc__ico::after { background: #fff; }
.acc__item.is-open .acc__ico::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  padding: 0 22px 22px 58px;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--body);
}

/* ============ CONTACT ============ */
.cwrap {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.cwrap > * { min-width: 0; }

.cside {
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(170deg, var(--blue-50), #fff 52%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.cside__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 4px 18px;
}
.cside__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 5px;
}
.cside__top b { font-family: var(--f-display); font-size: 1.0313rem; color: var(--ink); letter-spacing: -0.02em; }
.cside__hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--body);
  white-space: nowrap;
}
.cside__hours i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fbf71;
  box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.6);
  animation: hsPulse 2.6s ease-out infinite;
}

.crow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.35s ease;
}
.crow + .crow { margin-top: 10px; }
.crow:hover { transform: translateX(4px); border-color: var(--blue-soft); box-shadow: var(--sh-sm); }
.crow__ico {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--blue-mid), var(--blue-deep));
  color: #fff;
}
.crow__ico svg { width: 19px; height: 19px; }
.crow--wa .crow__ico { background: linear-gradient(145deg, #35d06a, #189d4a); }
.crow__txt { min-width: 0; }
.crow__txt b {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.crow__txt span { font-size: 0.8125rem; color: var(--muted); }
.crow__go { width: 17px; height: 17px; flex: none; margin-left: auto; color: var(--blue-soft); transition: transform 0.4s var(--ease); }
.crow:hover .crow__go { transform: translateX(4px); }

.cmap {
  margin-top: 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-xs);
}
.cmap iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: grayscale(0.25) contrast(1.03);
}
.cmap__bar { display: flex; align-items: center; gap: 13px; padding: 15px 16px; }
.crow__ico--sq { width: 38px; height: 38px; border-radius: 12px; }
.cmap__addr { min-width: 0; }
.cmap__addr b { display: block; font-family: var(--f-display); font-size: 0.875rem; color: var(--ink); letter-spacing: -0.02em; }
.cmap__addr address { font-style: normal; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.cmap__bar .btn { margin-left: auto; flex: none; }

.cside__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.crating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--body);
}
.crating svg { width: 16px; height: 16px; color: var(--blue); }
.crating b { font-family: var(--f-display); color: var(--ink); }

.form-card__head { margin-bottom: 24px; }
.form-card__head p { font-size: 0.9375rem; color: var(--muted); margin-top: 6px; }

.cnext {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.cnext li { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--body); }
.cnext b {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-family: var(--f-display);
  font-size: 0.75rem;
  color: var(--blue);
}

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 3.2vw, 42px);
  box-shadow: var(--sh-lg);
}
.form-card h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 8px; }
.form-card > p { font-size: 0.9375rem; margin-bottom: 30px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 22px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fcfcfe;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  appearance: none;
}
.field textarea { min-height: 116px; resize: vertical; padding-top: 26px; }
.field label {
  position: absolute;
  left: 17px;
  top: 15px;
  font-size: 0.9375rem;
  color: var(--muted);
  pointer-events: none;
  transition: transform 0.28s var(--ease), font-size 0.28s var(--ease), color 0.28s ease;
  transform-origin: left top;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-mid);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(74, 65, 168, 0.1);
  outline: none;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select.has-value + label {
  transform: translateY(-9px) scale(0.76);
  color: var(--blue);
}
.field select { cursor: pointer; }
.field__caret { position: absolute; right: 16px; top: 20px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.form-consent { display: flex; gap: 11px; margin: 22px 0 24px; font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.form-consent input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.form-card .btn { width: 100%; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; font-size: 0.8125rem; color: var(--muted); }
.form-note svg { width: 15px; height: 15px; color: var(--blue); flex: none; }
.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: 0.875rem;
  color: var(--blue-deep);
}
.form-status.is-visible { display: block; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
  .why__strengths { grid-template-columns: repeat(2, 1fr); }
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .bank-foot { grid-template-columns: 1fr 1fr; }
  .bank-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  /* Phone & tablet: the banner photo sits whole across the top — nothing of it
     is cropped away — and the copy reads underneath it on the navy. */
  .hero { min-height: 0; }
  .hslider__viewport { min-height: 0; }
  .hslide {
    display: flex;
    flex-direction: column;
    padding: 0 0 96px;
    align-items: stretch;
  }
  .hslide__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 851 / 315;
    flex: none;
  }
  /* no Ken Burns on phones — a still banner keeps the scroll smooth */
  .hslide__media img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: none;
  }
  .hslide.is-active .hslide__media img,
  .hslide:nth-child(even).is-active .hslide__media img { animation: none; }
  .hslide.is-active .hslide__media { animation: none; }
  .hslide__media::after {
    background: linear-gradient(180deg, rgba(12, 10, 38, 0.16) 0%, rgba(12, 10, 38, 0) 45%,
      rgba(12, 10, 38, 0.55) 100%);
  }
  .hslide__inner { padding-top: 26px; }
  .hslide__inner::before { display: none; }
  .hslide__title { text-shadow: none; }
  .hslide__inner > * { max-width: 620px; }
  .hero__bar-in { justify-content: flex-start; }
  .founder__grid { grid-template-columns: 1fr; }
  .founder__visual { max-width: 440px; margin-inline: auto; width: 100%; }
  /* stacked layout has width to spare — a taller frame lets the portrait fill
     it instead of leaving wide empty margins either side */
  .founder__panel { aspect-ratio: 1 / 1.3; }
  .why__grid { grid-template-columns: 1fr; }
  .why__head { grid-template-columns: 1fr; align-items: start; }
  .imap__panel { position: static; width: 100%; max-width: 460px; margin: 18px auto 0; }
  .imap__stage { width: min(100%, 520px); }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  /* hard guard: nothing in this section may extend past the screen.
     Scoped to the breakpoint where the aside is no longer sticky —
     overflow on the section would otherwise kill position: sticky. */
  #faq { overflow-x: hidden; }
  /* wrap onto a second row rather than running off the side of the screen */
  .faq__filters { flex-wrap: wrap; overflow: visible; }
  .faq__filter { white-space: nowrap; }
  .cwrap { grid-template-columns: 1fr; }
  /* the window moves above the step list */
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow__stage { order: -1; }
  .win__body { min-height: 320px; }
  .partner-band__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .stat-grid { margin-top: 32px; }
  .stat { padding: 24px 18px; }
  .tst__head { flex-direction: column; align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
  .hslide__lead { font-size: 0.9688rem; margin-bottom: 22px; }
  .hslide__points { gap: 8px 16px; margin-bottom: 26px; }
  .hslide__cta .btn { flex: 1 1 auto; }
  .hs-count { display: none; }
  /* keep the highlights bar to two compact rows so it stays on screen */
  .hero__bar-in { gap: 14px 24px; padding: 16px 0; }
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
  }
  .hero__stat strong { font-size: clamp(0.9rem, 3.6vw, 1.3rem); }
  .hero__stat > span { font-size: 0.75rem; }
  .trust-chip { padding: 9px 14px; gap: 9px; }
  .trust-chip--faces { display: none; }
  .exp-cta { padding: 26px 24px; }
  .founder__sign .btn { margin-left: 0; width: 100%; }
}

@media (max-width: 700px) {
  /* map on top, read-out underneath, chips in a swipeable rail */
  .imap__stage { width: min(100%, 380px); }
  .imap__card { padding: 18px 16px 16px; }
  .imap__metrics { gap: 9px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .imap__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .imap__chips::-webkit-scrollbar { display: none; }
  .imap__chip { scroll-snap-align: start; }
}

@media (max-width: 560px) {
  .exp-grid { grid-template-columns: 1fr; }
  .why__strengths { grid-template-columns: 1fr; }
  .bank-foot { grid-template-columns: 1fr; }
  .bank-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .bank-card { min-height: 96px; padding: 18px; }
  .bank-card img { max-height: 42px; }
  .hslide__title { font-size: 1.6rem; }
  .hslide__points li:nth-child(3) { display: none; }
  .hslide__eyebrow { display: none; }
  .hslide__claim { font-size: 0.75rem; padding: 7px 14px; }
  .hslide__tags { margin-bottom: 14px; }
  .hslide__title em { white-space: normal; }
  .hs-arrow { width: 44px; height: 44px; }
  .hs-dot { width: 22px; }
  .hs-dot.is-active { width: 56px; }
  .hero__stat > span { font-size: 0.6875rem; }
  .hero__bar-in { gap: 20px; }
  .trust-chip { padding: 10px 14px; }
  .founder__years { right: -8px; padding: 14px 17px; }
  .founder__stamp { left: -8px; padding: 11px 15px 11px 12px; }
  .flow__hit { padding: 15px 16px; gap: 13px; }
  .flow__num { width: 38px; height: 38px; border-radius: 12px; font-size: 0.8125rem; }
  .flow__more ul { padding: 0 18px 18px 18px; }
  .win__body { padding: 20px 18px 22px; min-height: 320px; }
  .scene { gap: 14px; }
  .checks li { padding: 11px 13px; font-size: 0.8438rem; }
  .scene__foot { flex-wrap: wrap; gap: 10px; }
  .acc__panel p { padding: 0 18px 20px 18px; }
  .acc__btn { padding: 18px 16px; font-size: 0.9688rem; }
  .cmap__bar { flex-wrap: wrap; }
  .cmap__bar .btn { margin-left: 0; width: 100%; }
}