/* ============================================================
   Loan Experts India — Services section ("What We Offer for You")
   Motion is deliberate: drifting ambience, a product ticker,
   pointer-reactive cards. Everything folds away under
   prefers-reduced-motion at the end of this file.
   ============================================================ */

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.svc2 { position: relative; overflow: hidden; }
.svc2 > .container-wide { position: relative; z-index: 1; }

/* ---------- Drifting ambience ---------- */
.svc2__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.svc2__aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
.svc2__aurora span:nth-child(1) {
  width: 540px; height: 540px;
  background: rgba(74, 65, 168, 0.16);
  top: -140px; left: -120px;
  animation: drift-a 26s ease-in-out infinite alternate;
}
.svc2__aurora span:nth-child(2) {
  width: 480px; height: 480px;
  background: rgba(227, 31, 37, 0.09);
  bottom: -160px; right: -100px;
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(120px, 80px, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-110px, -70px, 0) scale(1.1); } }

/* ---------- Product ticker ---------- */
.ticker {
  position: relative;
  margin: 40px 0 clamp(48px, 5vw, 76px);
  padding: 14px 0;
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tick 44s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.ticker__item:hover { color: var(--blue); }
.ticker__item svg { width: 17px; height: 17px; color: var(--blue-soft); flex: none; }
.ticker__item::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  opacity: 0.45;
  margin-left: 26px;
}

/* ---------- Group headers ---------- */
.svc2-group + .svc2-group { margin-top: clamp(52px, 6vw, 92px); }
.svc2-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 36px;
}
.svc2-head__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  flex: none;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--blue);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.svc2-head h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); letter-spacing: -0.03em; }
.svc2-head__rule {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  position: relative;
  overflow: hidden;
}
.svc2-head__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  transform: translateX(-100%);
  animation: sweep 5s ease-in-out infinite;
}
@keyframes sweep {
  0%, 55% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}
.svc2-head__note { font-size: 0.9063rem; color: var(--muted); max-width: 380px; }

/* ---------- Shared card chrome ---------- */
.svc2-card,
.scheme2 {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
/* animated gradient hairline that traces the card edge */
.svc2-card::before,
.scheme2::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(from var(--ang), transparent 0 52%, rgba(227, 31, 37, 0.75) 66%, rgba(74, 65, 168, 0.85) 80%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 4;
}
.svc2-card:hover::before,
.scheme2:hover::before { opacity: 1; animation: trace 3.4s linear infinite; }
@keyframes trace { to { --ang: 360deg; } }

/* pointer-following light */
.svc2-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(74, 65, 168, 0.14), transparent 62%);
  z-index: 3;
}
.svc2-card:hover .svc2-glow { opacity: 1; }
.scheme2:hover .svc2-glow { opacity: 1; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 62%); }

/* ---------- 01 · Retail cards ---------- */
.svc2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.svc2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.svc2-card:hover { box-shadow: var(--sh-lg); border-color: transparent; }

.svc2-card__media { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: var(--blue-50); }
.svc2-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.3s var(--ease), filter 0.6s ease;
}
.svc2-card:hover .svc2-card__media img { transform: scale(1.09); }
.svc2-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 63, 0.28) 0%, rgba(20, 18, 63, 0) 42%, rgba(20, 18, 63, 0.4) 100%);
}

/* ribbon slides in from the top-right on hover */
.svc2-card__ribbon {
  position: absolute;
  z-index: 2;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.svc2-card:hover .svc2-card__ribbon { opacity: 1; transform: translateY(0); }

.svc2-card__body { position: relative; z-index: 2; padding: 44px 24px 26px; display: flex; flex-direction: column; flex: 1; }

.svc2-card__icon {
  position: absolute;
  top: -27px; left: 24px;
  background: #fff;
  border-color: #fff;
  box-shadow: var(--sh-sm);
  z-index: 3;
}
.svc2-card:hover .svc2-card__icon {
  background: linear-gradient(140deg, var(--blue-mid), var(--blue-deep));
  color: #fff;
  transform: translateY(-5px) rotate(-6deg);
}

.svc2-card h4 { font-size: 1.1563rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.svc2-card > .svc2-card__body > p { font-size: 0.9063rem; line-height: 1.7; color: var(--body); margin-bottom: 18px; }

/* fact list — staggers up when the card is hovered */
.svc2-meta { display: grid; gap: 9px; margin-bottom: 20px; }
.svc2-meta li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8438rem;
  line-height: 1.5;
  color: var(--muted);
  transition: color 0.35s ease, transform 0.5s var(--ease);
}
.svc2-meta li svg { width: 15px; height: 15px; color: var(--blue-soft); flex: none; margin-top: 3px; transition: color 0.35s ease; }
.svc2-card:hover .svc2-meta li,
.scheme2:hover .svc2-meta li { color: var(--body); transform: translateX(3px); }
.svc2-card:hover .svc2-meta li svg { color: var(--red); }
.svc2-card:hover .svc2-meta li:nth-child(2),
.scheme2:hover .svc2-meta li:nth-child(2) { transition-delay: 60ms; }

.svc2-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- 02 · Government schemes (dark band) ---------- */
.svc2-group--dark {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 38px);
  padding: clamp(44px, 5vw, 70px) clamp(26px, 4vw, 56px);
}
/* slow-moving mesh so the dark band never feels flat */
.svc2-group--dark .svc2__mesh {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(420px circle at 20% 30%, rgba(143, 136, 214, 0.28), transparent 60%),
    radial-gradient(380px circle at 78% 68%, rgba(227, 31, 37, 0.18), transparent 62%);
  animation: mesh 22s ease-in-out infinite alternate;
}
@keyframes mesh { to { transform: translate3d(6%, -5%, 0) rotate(8deg); } }

.svc2-group--dark .svc2-head__num {
  background: rgba(143, 136, 214, 0.16);
  border-color: rgba(143, 136, 214, 0.3);
  color: var(--blue-soft);
}
.svc2-group--dark .svc2-head h3 { color: #fff; }
.svc2-group--dark .svc2-head__rule { background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent); }
.svc2-group--dark .svc2-head__note { color: rgba(255, 255, 255, 0.55); }

.scheme2 {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.scheme2:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(143, 136, 214, 0.42); }

/* oversized numeral drifts on hover */
.scheme2__n {
  position: absolute;
  top: 10px; right: 18px;
  font-family: var(--f-display);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.06);
  transition: transform 0.6s var(--ease), color 0.5s ease;
  pointer-events: none;
}
.scheme2:hover .scheme2__n { transform: translate(-6px, 4px) scale(1.08); color: rgba(227, 31, 37, 0.26); }

.scheme2 .icon-chip { margin-bottom: 20px; position: relative; z-index: 2; }
.scheme2:hover .icon-chip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-4px) rotate(6deg);
}
.scheme2__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-soft);
  background: rgba(143, 136, 214, 0.14);
  border: 1px solid rgba(143, 136, 214, 0.26);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.scheme2 h4 { font-size: 1.1563rem; letter-spacing: -0.025em; margin-bottom: 10px; position: relative; z-index: 2; }
.scheme2 > p { font-size: 0.9063rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin-bottom: 18px; position: relative; z-index: 2; }
.scheme2 .svc2-meta { position: relative; z-index: 2; }
.scheme2 .svc2-meta li { color: rgba(255, 255, 255, 0.52); }
.scheme2 .svc2-meta li svg { color: var(--blue-soft); }
.scheme2:hover .svc2-meta li { color: rgba(255, 255, 255, 0.8); }
.scheme2 .link-arrow { margin-top: auto; align-self: flex-start; color: #fff; position: relative; z-index: 2; }
.scheme2 .link-arrow:hover { color: var(--red-bright); }

/* ---------- 03 · Corporate split cards ---------- */
.corp2-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.corp2 {
  position: relative;
  display: grid;
  grid-template-columns: 216px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform 0.45s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.corp2:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.corp2__media { position: relative; overflow: hidden; background: var(--blue-50); }
.corp2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.corp2:hover .corp2__media img { transform: scale(1.09); }
.corp2__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 18, 63, 0.3), rgba(20, 18, 63, 0) 62%);
}
/* thin brand rail that fills on hover */
.corp2__rail {
  position: absolute;
  z-index: 2;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--red), var(--blue-mid));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
}
.corp2:hover .corp2__rail { transform: scaleY(1); }

.corp2__body { padding: 28px 28px 26px; display: flex; flex-direction: column; }
.corp2__body .icon-chip { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px; }
.corp2__body .icon-chip svg { width: 23px; height: 23px; }
.corp2:hover .icon-chip {
  background: linear-gradient(140deg, var(--blue-mid), var(--blue-deep));
  color: #fff;
  border-color: transparent;
  transform: rotate(-6deg);
}
.corp2__body h4 { font-size: 1.1875rem; letter-spacing: -0.025em; margin-bottom: 9px; }
.corp2__body > p { font-size: 0.9063rem; line-height: 1.7; margin-bottom: 16px; }
.corp2 .svc2-meta { margin-bottom: 18px; }
.corp2:hover .svc2-meta li { color: var(--body); transform: translateX(3px); }
.corp2:hover .svc2-meta li svg { color: var(--red); }
.corp2 .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Closing strip ---------- */
.svc2-foot {
  margin-top: clamp(44px, 5vw, 68px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 34px;
  padding: 28px 34px;
  border-radius: 22px;
  background: linear-gradient(120deg, var(--blue-50), #fff 64%);
  border: 1px solid var(--blue-100);
}
.svc2-foot p { font-size: 0.9375rem; }
.svc2-foot h4 { font-size: 1.1875rem; letter-spacing: -0.025em; margin-bottom: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .svc2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .corp2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .svc2-grid { grid-template-columns: 1fr; }
  .corp2 { grid-template-columns: 1fr; }
  .corp2__media { height: 200px; }
  .svc2-head__rule { display: none; }
  .svc2-foot { padding: 24px 22px; }
}

/* ---------- Motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc2__aurora span,
  .svc2-group--dark .svc2__mesh,
  .ticker__track,
  .svc2-head__rule::after { animation: none !important; }
  .svc2-card:hover::before,
  .scheme2:hover::before { animation: none; }
  .svc2-card, .scheme2, .corp2 { transform: none !important; }
}