/* ==========================================================================
   Money Bharti — Premium Homepage  ·  style.css  (v2)
   Custom layer on top of Tailwind CSS.
   Brand: #0E5F3B primary · #1F8A5B secondary · #EEF8F2 light · #D4AF37 gold
   ========================================================================== */

/* ============================================================== TOKENS === */
:root{
  /* brand — fixed, never themed */
  --green-900:#0B4A2E;
  --green-700:#0E5F3B;
  --green-500:#1F8A5B;
  --gold:#D4AF37;
  --gold-soft:#F3E3B3;

  /* semantic — these flip in dark mode */
  --page:#F4F8F6;            /* page canvas — cards sit ON this, never match it */
  --surface:#FFFFFF;         /* cards, header */
  --surface-2:#F7FBF9;       /* subtle raised */
  --green-100:#EEF8F2;       /* light green wash */
  --line:#DCE9DF;            /* borders */
  --ink:#1A1A1A;             /* primary text */
  --ink-soft:#5B6B62;        /* secondary text */
  --accent:var(--green-700); /* links / active */
  --accent-2:var(--green-500);

  --glass:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.86);
  --header-bg:rgba(255,255,255,.96);
  --header-glass:rgba(255,255,255,.72);

  --r-sm:12px; --r-md:18px; --r:24px; --r-lg:32px;

  --sh-soft:0 4px 24px rgba(14,95,59,.06);
  --sh-card:0 10px 40px rgba(14,95,59,.08);
  --sh-lift:0 22px 60px rgba(14,95,59,.16);
  --sh-glass:0 24px 70px rgba(14,95,59,.14);

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --header-h:76px;

  --grain:.035;
}

[data-theme="dark"]{
  --page:#0B100E;
  --surface:#141D19;
  --surface-2:#18231E;
  --green-100:#16241E;
  --line:#25382F;
  --ink:#E9F1EC;
  --ink-soft:#9CB3A6;
  --accent:#4FC28C;
  --accent-2:#6FD3A3;

  --glass:rgba(20,32,27,.72);
  --glass-strong:rgba(20,32,27,.85);
  --header-bg:rgba(13,20,17,.94);
  --header-glass:rgba(13,20,17,.66);

  --sh-soft:0 4px 24px rgba(0,0,0,.34);
  --sh-card:0 10px 40px rgba(0,0,0,.42);
  --sh-lift:0 22px 60px rgba(0,0,0,.55);
  --sh-glass:0 24px 70px rgba(0,0,0,.55);

  --grain:.05;
  color-scheme:dark;
}

/* theme swap should feel like a dissolve, not a snap */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), fill .4s var(--ease), box-shadow .4s var(--ease) !important;
}

/* ================================================================ BASE === */
/* Reset — replaces Tailwind Preflight now that the CDN is gone.
   Deliberately matches Preflight's behaviour so nothing shifts. */
*,*::before,*::after{ box-sizing:border-box; border:0 solid var(--line); }
*{ margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:700; }
img,svg,video,canvas{ display:block; vertical-align:middle; }
/* Safety net: an inline <svg> with no width attribute expands to its default
   box if its component CSS ever fails to apply — which renders as a giant
   black glyph. :where() carries zero specificity, so every component rule
   still overrides this; it only catches the failure case. */
:where(svg:not([width])){ width:1.25em; height:1.25em; }
button,input,select,textarea{ font:inherit; color:inherit; background:transparent; }
button{ cursor:pointer; }
[hidden]{ display:none; }
table{ border-collapse:collapse; }

html{ scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); background:var(--page); overflow-x:hidden;
}
h1,h2,h3,h4{ letter-spacing:-.02em; }
img,svg{ max-width:100%; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
b,strong{ font-weight:600; }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--green-700); color:#fff; padding:10px 18px; border-radius:0 0 12px 0; font-weight:600; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid rgba(31,138,91,.45); outline-offset:2px; border-radius:8px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--green-100); }
::-webkit-scrollbar-thumb{ background:#bcd9c8; border-radius:20px; border:2px solid var(--green-100); }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#2E4A3C; }
::-webkit-scrollbar-thumb:hover{ background:var(--green-500); }
::selection{ background:var(--green-500); color:#fff; }

/* Stroke-icon normalisation.
   :not([fill]) matters — a CSS `fill` beats a `fill="none"` presentation
   attribute, so without this guard every outline icon that declares
   fill="none" inline gets repainted as a solid blob. */
svg[viewBox]:not([fill]){ fill:currentColor; }
.icon-btn svg, .arw, .caret, .search-form__ic,
.trust__ic svg, .tick svg,
.city-box__pin svg, .float-card__ic svg, .phone__check svg, .marq-nav svg,
.ts-nav svg, .to-top svg, .news-form__btn svg, .shield svg, .why-card__shield svg,
.mini-phone__check svg, .cta__shield svg, .theme-btn svg,
.offers__caret, .mobile-bar svg, .search-tags svg,
.footer__contact-ic svg, .mobile-menu__contact svg, .cta__contact svg{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.shield svg path:first-child, .why-card__shield svg path:first-child, .cta__shield svg path:first-child{ fill:currentColor; }
.shield__tick{ stroke:#fff!important; stroke-width:2.4!important; }
.wa-fab svg{ fill:currentColor; stroke:none; }

/* ==================================================== PAGE FURNITURE === */
/* Film grain. No mix-blend-mode: a blended full-viewport fixed layer forces the
   whole page to re-composite on every scroll frame. Plain low opacity is ~free
   and visually near-identical. */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:130; pointer-events:none; background:transparent; }
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--green-700),var(--green-500) 55%,var(--gold));
  box-shadow:0 0 12px rgba(31,138,91,.55);
  transition:width .1s linear;
}

.toasts{ position:fixed; right:18px; bottom:88px; z-index:140; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:10px; max-width:320px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:12px 16px;
  box-shadow:var(--sh-lift); font-size:13px; font-weight:500;
  animation:toastIn .4s var(--spring);
}
.toast--ok{ border-left:3px solid var(--green-500); }
.toast--err{ border-left:3px solid #D9534F; }
.toast.is-out{ animation:toastOut .3s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(40px) scale(.94);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateX(40px) scale(.94);} }

/* ============================================================== TOPBAR === */
.topbar{ background:linear-gradient(90deg,var(--green-900),var(--green-700) 55%,var(--green-500)); color:rgba(255,255,255,.92); }
/* The contact block is flex:none, so phone + email are never squeezed or
   clipped. The feature list shrinks and hides items instead. */
.topbar__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:7px 0; font-size:12.5px; }
.topbar__left{ display:none; align-items:center; gap:22px; min-width:0; overflow:hidden; }
.topbar__right{ display:flex; align-items:center; gap:18px; flex:none; margin-left:auto; }
.topbar__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color .25s var(--ease); }
.topbar .ic{ width:15px; height:15px; flex:none; fill:var(--gold); }
.topbar a:hover{ color:var(--gold-soft); }
.topbar__item--x{ display:none; }
@media (min-width:768px){ .topbar__left{ display:flex; } }
@media (min-width:1280px){ .topbar__item--x{ display:inline-flex; } }
@media (max-width:559px){
  .topbar__right{ gap:12px; font-size:11.5px; width:100%; justify-content:space-between; }
  .topbar__row{ gap:0; }
}

/* ============================================================== HEADER === */
.site-header{
  position:sticky; top:0; z-index:90;
  background:var(--header-bg); border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{
  background:var(--header-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 10px 34px rgba(14,95,59,.10);
}
[data-theme="dark"] .site-header.is-stuck{ box-shadow:0 10px 34px rgba(0,0,0,.5); }

/* brand / logo — blend modes knock out the JPG backdrops */
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__logo{ display:block; width:auto; height:44px; mix-blend-mode:multiply; transition:transform .3s var(--ease); }
.brand:hover .brand__logo{ transform:scale(1.03); }
[data-theme="dark"] .brand__logo{ mix-blend-mode:normal; filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(1.15); }
.brand__tag{
  display:none; padding-left:11px; border-left:1px solid var(--line);
  font-size:8.5px; font-weight:500; letter-spacing:.16em; color:var(--ink-soft);
  line-height:1.5; max-width:74px; text-transform:uppercase;
}
@media (min-width:1024px){ .brand__tag{ display:block; } }
.brand__logo--invert{ height:40px; mix-blend-mode:screen; }
[data-theme="dark"] .brand__logo--invert{ mix-blend-mode:screen; filter:none; }
.brand--light{ display:inline-flex; }

.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:5px; position:relative;
  padding:9px 11px; border-radius:12px;
  font-size:14px; font-weight:500; color:var(--ink);
  background:transparent; border:0; cursor:pointer; font-family:inherit;
  transition:color .22s var(--ease), background .22s var(--ease);
}
.nav__link:hover, .nav__item.is-open > .nav__link{ color:var(--accent); background:var(--green-100); }
/* scroll-spy underline */
.nav__link.is-active::after{
  content:''; position:absolute; left:11px; right:11px; bottom:3px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--green-500),var(--gold));
  animation:navIn .35s var(--ease);
}
@keyframes navIn{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.caret{ width:14px; height:14px; transition:transform .25s var(--ease); }
.nav__item.is-open .caret{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:calc(100% + 12px); left:0; min-width:270px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-lift); padding:8px; z-index:40;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.98);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item.is-open .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{
  display:block; padding:10px 12px; border-radius:12px;
  font-size:13.5px; font-weight:500; color:var(--ink);
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.dropdown a:hover{ background:var(--green-100); color:var(--accent); padding-left:18px; }

/* ---- mega menu ----
   Debt Solution holds 47 links. Showing them all at once was a wall of text and
   made the panel taller than a laptop screen. Instead: a rail of five category
   tabs on the left, and only the hovered category's links on the right. The
   panel stays about 340px tall whichever group is open. Interaction is pure CSS
   — no JS, so it cannot break. */
.nav__item.has-mega{ position:static; }
.mega{
  position:absolute; left:0; right:0; top:calc(100% + 1px); z-index:60;
  background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 30px 70px rgba(14,95,59,.18);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item.has-mega.is-open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
/* Safety net: JS adds .is-open, but if script.js fails to load the menu must
   still open. Hover/focus alone is enough on desktop. */
.nav__item.has-menu:hover > .dropdown,
.nav__item.has-menu:focus-within > .dropdown,
.nav__item.has-mega:hover .mega,
.nav__item.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none; }


/* Static on purpose: a positioned rail would become the panel's containing
   block, and left:318px/right:0 would then measure against the 318px rail
   instead of the full bar, collapsing the panel to a sliver. */
.mega__rail{ position:static; width:318px; padding:14px 12px; height:342px; border-right:1px solid var(--line); }
.mega__group{ position:static; }

/* ---- left rail tab ---- */
.mega__tab{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:12px; cursor:default;
  transition:background .18s var(--ease), box-shadow .18s var(--ease);
}
.mega__tab-ic{
  width:32px; height:32px; min-width:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-100); color:var(--accent);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.mega__tab-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.mega__tab-txt b{ font-size:13.2px; font-weight:600; color:var(--ink); line-height:1.25; }
.mega__tab-txt em{ font-style:normal; font-size:10.5px; color:var(--ink-soft); }
.mega__tab-arw{ color:var(--ink-soft); opacity:0; transform:translateX(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease); }

.mega__group:hover .mega__tab{ background:var(--green-100); box-shadow:inset 0 0 0 1px rgba(31,138,91,.22); }
.mega__group:hover .mega__tab-ic{ background:linear-gradient(140deg,var(--green-700),var(--green-500)); color:#fff; }
.mega__group:hover .mega__tab-arw{ opacity:1; transform:none; color:var(--accent); }

/* ---- right panel ---- */
.mega__panel{
  position:absolute; left:318px; right:0; top:0; bottom:auto; height:342px;
  padding:18px 26px 20px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .18s var(--ease), visibility .18s;
}
.mega__panel-t{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; padding-bottom:8px; border-bottom:2px solid var(--green-100);
}
.mega__panel ul{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; align-content:start; }
@media (min-width:1500px){ .mega__panel ul{ grid-template-columns:1fr 1fr 1fr; } }
.mega__panel a{
  display:block; padding:6px 10px; border-radius:8px;
  font-size:12.2px; line-height:1.4; color:var(--ink-soft);
  transition:background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.mega__panel a:hover{ background:var(--green-100); color:var(--accent); transform:translateX(3px); }
/* the "Go to …" entry is the destination for the whole group */
.mega__panel li:first-child a{ font-weight:700; color:var(--accent); }

/* Closed menus must be untouchable, not merely invisible. visibility is
   inherited, so the "first panel visible by default" rule below could un-hide a
   panel while the whole menu was still closed; opacity:0 kept it from being
   seen but not from being hovered, and a transparent bar under the header stole
   the hover from the Personal Loan dropdown. */.nav__item.has-mega:hover .mega__group:first-child .mega__panel,
.nav__item.has-mega.is-open .mega__group:first-child .mega__panel,
.nav__item.has-mega:focus-within .mega__group:first-child .mega__panel{ opacity:1 !important; visibility:visible !important; }
.mega__rail:hover .mega__group:first-child:not(:hover) .mega__panel{ opacity:0 !important; visibility:hidden !important; }
.mega__group:hover .mega__panel{ opacity:1 !important; visibility:visible !important; }

/* ---- footer strip ---- */
.mega__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 26px; background:var(--green-100); border-top:1px solid var(--line);
}
.mega__foot span{ font-size:12.5px; color:var(--ink-soft); }

@media (max-width:1279px){
  .mega__rail{ width:270px; }
  .mega__panel{ left:270px; padding:16px 20px; }
  .mega__panel ul{ grid-template-columns:1fr; }
}

.icon-btn{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--green-100); color:var(--accent); border:1px solid var(--line);
  cursor:pointer; transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:var(--green-700); color:#fff; transform:translateY(-2px); }


/* theme toggle */
.theme-btn{ position:relative; overflow:hidden; }
.theme-btn svg{ position:absolute; width:19px; height:19px; transition:transform .45s var(--spring), opacity .3s var(--ease); }
.theme-btn__moon{ transform:translateY(26px) rotate(-40deg); opacity:0; }
[data-theme="dark"] .theme-btn__sun{ transform:translateY(-26px) rotate(40deg); opacity:0; }
[data-theme="dark"] .theme-btn__moon{ transform:none; opacity:1; }

.search-drawer{ border-top:1px solid var(--line); background:var(--green-100); animation:dropIn .3s var(--ease); }
.search-form{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:7px 7px 7px 14px; box-shadow:var(--sh-soft);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.search-form:focus-within{ border-color:var(--accent-2); box-shadow:var(--sh-card); }
.search-form__ic{ width:19px; height:19px; color:var(--accent); flex:none; }
.search-form input{ flex:1; min-width:0; border:0; outline:0; font-size:14.5px; font-family:inherit; background:transparent; color:var(--ink); padding:8px 0; }
.search-form input::-webkit-search-cancel-button{ cursor:pointer; }

.search-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.search-tags li{ display:flex; }
.search-tags span{ font-size:11.5px; color:var(--ink-soft); font-weight:500; padding:5px 0; }
.search-tags a{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  font-size:11.5px; font-weight:500;
  transition:all .22s var(--ease);
}
.search-tags a:hover{ background:var(--green-700); border-color:var(--green-700); color:#fff; transform:translateY(-2px); }

.mobile-menu{ position:sticky; top:var(--header-h); z-index:80; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--sh-card); animation:dropIn .3s var(--ease); }
.mobile-menu__inner{ display:flex; flex-direction:column; gap:2px; padding:14px 18px 20px; max-width:1200px; margin:0 auto; }
.mobile-menu__inner > a{ padding:12px 14px; border-radius:14px; font-weight:500; font-size:15px; transition:background .2s var(--ease); }
.mobile-menu__inner > a:not(.btn):hover{ background:var(--green-100); color:var(--accent); }
/* mobile: each top-level group is a native <details>, so the whole menu works
   with zero JavaScript */
.mnav{ border-bottom:1px solid var(--line); }
.mnav summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; cursor:pointer; list-style:none;
  font-size:15px; font-weight:500; color:var(--ink);
}
.mnav summary::-webkit-details-marker{ display:none; }
.mnav__sign{ position:relative; width:15px; height:15px; flex:none; }
.mnav__sign::before,.mnav__sign::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--accent);
  border-radius:2px; transform:translate(-50%,-50%); transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.mnav__sign::before{ width:12px; height:2px; }
.mnav__sign::after{ width:2px; height:12px; }
.mnav[open] .mnav__sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.mnav > a{
  display:block; padding:9px 14px 9px 26px; font-size:13.5px;
  color:var(--ink-soft); border-radius:10px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.mnav > a:hover{ background:var(--green-100); color:var(--accent); }
.mnav__t{
  padding:11px 14px 5px; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}

.mobile-menu__contact{ display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.mobile-menu__contact a{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--accent); }
.mobile-menu__contact svg{ width:16px; height:16px; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:translateY(0);} }

/* ============================================================= BUTTONS === */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:14px;
  font-size:14px; font-weight:600; line-height:1.2; font-family:inherit;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .22s var(--ease);
}
.btn .arw{ width:17px; height:17px; transition:transform .28s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--sm{ padding:9px 16px; font-size:13px; border-radius:12px; }
.btn--lg{ padding:14px 26px; font-size:15px; border-radius:16px; }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff; box-shadow:0 10px 26px rgba(14,95,59,.26); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(14,95,59,.34); }
/* sheen sweep */
.btn--primary::after{
  content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease);
}
.btn--primary:hover::after{ left:140%; }

.btn--ghost{ background:var(--surface); color:var(--accent); border-color:var(--accent); }
.btn--ghost:hover{ background:var(--green-100); transform:translateY(-3px); box-shadow:var(--sh-card); }
.btn--gold{ background:linear-gradient(135deg,#E7C55A,var(--gold)); color:#3B2E06; box-shadow:0 12px 30px rgba(212,175,55,.36); }
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(212,175,55,.46); }
.btn--white{ background:#fff; color:var(--green-700); }
.btn--white:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.22); }

.ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.45); animation:ripple .6s linear; pointer-events:none; }
.btn--ghost .ripple, .btn--white .ripple, .btn--gold .ripple{ background:rgba(14,95,59,.18); }
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }

.pill-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--accent);
  font-size:13px; font-weight:600; transition:all .25s var(--ease);
}
.pill-link .arw{ width:15px; height:15px; transition:transform .28s var(--ease); }
.pill-link:hover{ background:var(--green-700); color:#fff; border-color:var(--green-700); box-shadow:0 10px 24px rgba(14,95,59,.22); }
.pill-link:hover .arw{ transform:translateX(4px); }
.pill-link--sm{ padding:7px 14px; font-size:12px; background:transparent; }

/* ======================================================= SECTION HEADS === */
.section{ position:relative; padding:52px 0; }
.section--tight{ padding:32px 0; }

/* Page rhythm. The canvas is a soft tint, so white cards read as raised.
   A few sections get a pure-white band, which breaks the long middle stretch
   into visible chapters instead of one continuous expanse. */
.section--white{ background:var(--surface); }
.section--white::before,
.section--white::after{
  content:''; position:absolute; left:0; right:0; height:1px; background:var(--line); opacity:.55;
}
.section--white::before{ top:0; }
.section--white::after{ bottom:0; }

/* ambient depth so the flat areas aren't dead space */
.section--glow{ overflow:hidden; }
.section--glow > *{ position:relative; z-index:1; }
.section--glow::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:620px; height:620px; border-radius:50%;
  top:-42%; right:-14%;
  background:radial-gradient(circle,rgba(31,138,91,.10),transparent 66%);
}
.section--glow.section--glow-left::after{ right:auto; left:-16%; top:auto; bottom:-46%; background:radial-gradient(circle,rgba(212,175,55,.11),transparent 66%); }
[data-theme="dark"] .section--glow::after{ background:radial-gradient(circle,rgba(79,194,140,.11),transparent 66%); }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.section__headline{ min-width:0; }
.section__title{ font-size:clamp(21px,2.5vw,27px); font-weight:700; color:var(--ink); }
.section__sub{ margin-top:7px; font-size:13px; line-height:1.6; color:var(--ink-soft); max-width:560px; }

/* ================================================================ HERO === */
/* hero starts pure white and settles into the page tint, so the fold has depth */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 62%,var(--page) 100%); }
/* Sized so the whole hero clears the fold on a ~768px-tall laptop viewport
   (topbar 34 + header 76 + hero ≈ 600 = ~710px). */
.hero__grid{ position:relative; display:grid; grid-template-columns:1fr; gap:26px; align-items:center; padding:28px 0 38px; }
@media (min-width:1024px){ .hero__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; padding:32px 0 42px; } }
@media (min-width:1280px){ .hero__grid{ gap:26px; } }
/* short laptop screens (e.g. 1366×768 with toolbars): squeeze a little more
   so the hero still clears the fold */
@media (min-width:1024px) and (max-height:720px){
  .hero__grid{ padding:20px 0 26px; gap:18px; }
  .illus{ height:352px; }
  .phone{ width:152px; height:300px; }
  .hero__title{ font-size:clamp(28px,3.1vw,36px); }
  .hero__desc{ margin-top:9px; }
  .hero__features{ margin-top:12px; gap:6px; }
  .rating{ margin-top:12px; }
  .glass-card{ padding:15px; }
  .glass-card__title{ margin-bottom:11px; }
  .field{ margin-bottom:10px; }
  .emi-result{ margin:11px 0 8px; padding:11px; }
  .emi-result__value{ font-size:23px; }
  .donut{ width:56px; height:56px; }
}
.hero__blob{ position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; }
/* slow aurora drift */
.hero__blob--a{
  width:620px; height:620px; top:-160px; left:50%; transform:translateX(-42%);
  background:radial-gradient(circle at 40% 40%,rgba(31,138,91,.18),rgba(238,248,242,0) 68%);
  animation:aurora 18s ease-in-out infinite;
}
.hero__blob--b{
  width:460px; height:460px; bottom:-180px; right:-120px;
  background:radial-gradient(circle at 50% 50%,rgba(212,175,55,.16),rgba(255,255,255,0) 70%);
  animation:aurora 22s ease-in-out infinite reverse;
}
@keyframes aurora{
  0%,100%{ translate:0 0; scale:1; }
  33%    { translate:34px -22px; scale:1.07; }
  66%    { translate:-26px 18px; scale:.95; }
}
.hero__dots{
  position:absolute; width:180px; height:150px; left:calc(50% - 300px); top:46%;
  background-image:radial-gradient(rgba(31,138,91,.28) 1.6px,transparent 1.6px);
  background-size:14px 14px; opacity:.7; pointer-events:none;
}

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--gold); margin-bottom:10px; }
.eyebrow__dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.22); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(212,175,55,.22);} 50%{ box-shadow:0 0 0 9px rgba(212,175,55,0);} }

.hero__title{ font-size:clamp(31px,3.7vw,43px); font-weight:800; line-height:1.08; letter-spacing:-.03em; }
/* animated gradient shimmer on the accent line */
.hero__title-accent{
  background:linear-gradient(100deg,var(--green-700) 0%,var(--green-500) 30%,var(--gold) 50%,var(--green-500) 70%,var(--green-700) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
[data-theme="dark"] .hero__title-accent{ background-image:linear-gradient(100deg,#4FC28C,#6FD3A3 30%,var(--gold) 50%,#6FD3A3 70%,#4FC28C 100%); }
@keyframes shimmer{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }

.hero__desc{ margin-top:12px; font-size:14px; line-height:1.62; color:var(--ink-soft); max-width:400px; }
.hero__features{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.hero__features li{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:500; }
.tick{ width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--green-500); color:#fff; box-shadow:0 4px 10px rgba(31,138,91,.3); }
.tick svg{ width:13px; height:13px; stroke-width:3; }
.tick--sm{ width:20px; height:20px; }
.tick--sm svg{ width:12px; height:12px; }

.rating{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:17px; }
.rating__stars{ color:var(--gold); font-size:16px; letter-spacing:2px; }
.rating__text{ font-size:13px; color:var(--ink-soft); }
.rating__text strong{ color:var(--ink); font-weight:600; }
.rating__google svg{ width:20px; height:20px; }

/* ==================================================== HERO ILLUSTRATION === */
.illus{ position:relative; height:430px; display:grid; place-items:center; }
.illus__glow{ position:absolute; inset:6% 2% 10%; border-radius:50%; background:radial-gradient(circle at 50% 46%,rgba(31,138,91,.20),rgba(238,248,242,.35) 46%,rgba(255,255,255,0) 72%); }
[data-theme="dark"] .illus__glow{ background:radial-gradient(circle at 50% 46%,rgba(31,138,91,.30),rgba(20,40,30,.30) 46%,transparent 72%); }
.illus__ring{ position:absolute; width:280px; height:280px; border-radius:50%; border:1.5px dashed rgba(31,138,91,.22); animation:spin 34s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.phone{
  position:relative; z-index:3; width:178px; height:352px; border-radius:30px; padding:8px;
  background:linear-gradient(160deg,#20262a,#0d1113);
  box-shadow:0 34px 70px rgba(11,74,46,.30), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateY(-6px); animation:floatY 6s ease-in-out infinite;
}
.phone__notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:64px; height:6px; border-radius:6px; background:#000; z-index:4; }
.phone__screen{ height:100%; border-radius:26px; background:linear-gradient(178deg,#fff,#F4FBF7); display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 16px 16px; overflow:hidden; color:#1A1A1A; }
.phone__brand{ font-size:9px; font-weight:700; letter-spacing:.16em; color:var(--green-700); opacity:.65; margin-bottom:12px; }
.phone__check{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff; box-shadow:0 10px 26px rgba(31,138,91,.4), 0 0 0 8px rgba(31,138,91,.10); }
.phone__check svg{ width:26px; height:26px; stroke-width:3; }
.phone__title{ font-size:15.5px; font-weight:700; margin-top:12px; color:var(--green-700); }
.phone__sub{ font-size:10.5px; color:#5B6B62; margin-top:2px; }
.phone__amount{ font-size:22px; font-weight:800; margin-top:12px; letter-spacing:-.02em; }
.phone__label{ font-size:9.5px; color:#5B6B62; }
.phone__list{ margin-top:14px; width:100%; display:flex; flex-direction:column; gap:7px; padding:0 6px; }
.phone__list li{ display:flex; align-items:center; gap:7px; font-size:9.8px; color:#3d4f45; font-weight:500; }
.phone__list i{ width:11px; height:11px; border-radius:50%; background:#EEF8F2; border:2px solid var(--green-500); flex:none; }
.phone__cta{ margin-top:auto; width:100%; padding:10px; border-radius:12px; background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff; font-size:11px; font-weight:600; }

/* no backdrop-filter here — three of these plus the EMI card and the sticky
   header meant five live blur surfaces in the first viewport. The solid
   translucent fill reads the same over the hero gradient. */
.float-card{
  position:absolute; z-index:5; display:flex; align-items:center; gap:10px;
  background:var(--glass-strong);
  border:1px solid var(--line); border-radius:16px;
  padding:9px 13px; box-shadow:var(--sh-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.float-card:hover{ transform:scale(1.05); box-shadow:var(--sh-lift); }
.float-card span:last-child{ display:flex; flex-direction:column; line-height:1.25; }
.float-card em{ font-style:normal; font-size:8.6px; color:var(--ink-soft); }
.float-card strong{ font-size:11.6px; font-weight:700; color:var(--ink); }
.float-card__ic{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; flex:none; }
.float-card__ic svg{ width:14px; height:14px; }
.float-card__ic--green{ background:var(--green-100); color:var(--accent); }
.float-card__ic--gold{ background:#FBF3DA; color:#9C7A12; }
.float-card__ic--mint{ background:#E4F5EC; color:var(--green-500); }
.float-card--a{ top:14%; left:-4%; animation-delay:-1s; }
.float-card--b{ top:36%; left:-8%; animation-delay:-2.4s; }
.float-card--c{ top:58%; left:-2%; animation-delay:-3.6s; }

.coins{ position:absolute; bottom:8%; left:50%; transform:translateX(-52%); width:190px; height:92px; z-index:2; }
.coin{ position:absolute; border-radius:50%; background:linear-gradient(150deg,#F6DE96,var(--gold) 55%,#B98F1E); box-shadow:0 6px 16px rgba(184,141,26,.34); }
.coin::after{ content:''; position:absolute; inset:22%; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); }
.coin--1{ width:52px; height:52px; left:6px;  bottom:0; }
.coin--2{ width:52px; height:52px; left:20px; bottom:20px; }
.coin--3{ width:44px; height:44px; right:14px; bottom:2px; }
.coin--4{ width:44px; height:44px; right:26px; bottom:22px; }
.coin--5{ width:34px; height:34px; right:-6px; bottom:44px; opacity:.9; }

.shield{ position:absolute; z-index:6; right:2%; bottom:20%; width:56px; height:56px; display:grid; place-items:center; color:var(--green-500); filter:drop-shadow(0 14px 26px rgba(31,138,91,.34)); animation-delay:-1.8s; }
.shield svg{ width:56px; height:56px; }

/* standalone `translate` keeps element-level `transform` free for hover fx */
[data-float]{ animation:floatY 5.5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }

/* ==================================================== EMI CALCULATOR v2 === */
.glass-card{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line); border-radius:var(--r); padding:19px;
  box-shadow:var(--sh-glass);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.glass-card:hover{ transform:translateY(-4px); box-shadow:0 30px 84px rgba(14,95,59,.18); }
.glass-card__title{ font-size:15.5px; font-weight:700; margin-bottom:12px; }

/* rotating conic glow border (degrades to a static edge without @property) */
@property --glow-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.glow-border::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--glow-angle),transparent 0deg,var(--green-500) 55deg,var(--gold) 110deg,transparent 175deg,transparent 360deg);
  -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:.85;
}
/* the conic gradient re-rasterises every frame, so only spin it on hover/focus
   rather than burning a repaint loop for the whole session */
.glow-border:hover::before,
.glow-border:focus-within::before{ animation:glowSpin 7s linear infinite; }
@keyframes glowSpin{ to{ --glow-angle:360deg; } }

.field{ margin-bottom:10px; }
.field__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.field__head label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; }
.field__head output{ font-size:14.5px; font-weight:700; color:var(--accent); }
/* editable value chips */
.field__input{
  display:inline-flex; align-items:center; gap:1px;
  background:var(--green-100); border:1px solid var(--line); border-radius:10px; padding:4px 9px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field__input:focus-within{ border-color:var(--accent-2); background:var(--surface); }
.field__input i{ font-style:normal; font-size:13px; font-weight:700; color:var(--accent); }
.field__input input{
  width:74px; border:0; outline:0; background:transparent; text-align:right;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.field__input input#loanRateOut{ width:38px; }
.field__scale{ display:flex; justify-content:space-between; margin-top:3px; font-size:9.5px; color:var(--ink-soft); opacity:.8; }

.range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,var(--green-500) 0%,var(--green-500) var(--p,50%),var(--line) var(--p,50%),var(--line) 100%);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:5px solid var(--green-700); cursor:grab;
  box-shadow:0 4px 12px rgba(14,95,59,.32);
  transition:transform .18s var(--spring), box-shadow .18s var(--ease);
}
.range::-webkit-slider-thumb:hover{ transform:scale(1.2); box-shadow:0 6px 18px rgba(14,95,59,.42); }
.range:active::-webkit-slider-thumb{ cursor:grabbing; }
.range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:5px solid var(--green-700); box-shadow:0 4px 12px rgba(14,95,59,.32); cursor:grab; }
.range::-moz-range-track{ height:6px; border-radius:99px; background:var(--line); }
.range::-moz-range-progress{ height:6px; border-radius:99px; background:var(--green-500); }

.emi-result{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:12px 0 8px; padding:12px;
  background:linear-gradient(135deg,var(--green-100),var(--surface));
  border:1px solid var(--line); border-radius:var(--r-md);
}
.emi-result__label{ font-size:12px; color:var(--accent-2); font-weight:600; }
.emi-result__value{ font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; }
.emi-result__note{ font-size:10px; color:var(--ink-soft); margin-top:3px; }

.donut{ width:64px; height:64px; flex:none; transform:rotate(-90deg); }
.donut circle{ fill:none; stroke-width:5; }
.donut__track{ stroke:var(--line); }
.donut__seg{
  stroke:var(--gold); stroke-linecap:round;
  stroke-dasharray:0 100; /* set by JS: interest share of total */
  transition:stroke-dasharray .5s var(--ease);
}

/* principal / interest / total on one row — replaces the old two-block
   legend + rows stack and saves ~25px of hero height */
.emi-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-bottom:10px; padding-top:10px; border-top:1px solid var(--line);
}
.emi-strip li{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.emi-strip em{
  display:flex; align-items:center; gap:5px; font-style:normal;
  font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
}
.emi-strip b{ font-size:12.5px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.swatch{ width:8px; height:8px; border-radius:2px; flex:none; }
.swatch--principal{ background:var(--green-500); }
.swatch--interest{ background:var(--gold); }

/* lender comparison */
.offers{ border:0; border-top:1px solid var(--line); border-radius:0; margin-bottom:10px; background:transparent; }
.offers summary{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 0 0; cursor:pointer; font-size:11.5px; color:var(--ink-soft); list-style:none;
}
.offers summary::-webkit-details-marker{ display:none; }
.offers summary b{ color:var(--accent); font-weight:700; }
.offers__caret{ width:15px; height:15px; color:var(--ink-soft); transition:transform .28s var(--ease); flex:none; }
.offers[open] .offers__caret{ transform:rotate(180deg); }
.offers__list{ padding:6px 0 0; display:flex; flex-direction:column; gap:6px; }
.offers__row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:11.5px; }
.offers__row:first-child{ border-top:0; }
.offers__bank{ font-weight:600; flex:1; }
.offers__rate{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.offers__emi{ font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; min-width:66px; text-align:right; }
.offers__row--best .offers__bank::after{
  content:'BEST'; margin-left:7px; font-size:8.5px; font-weight:800; letter-spacing:.08em;
  background:var(--gold); color:#3B2E06; padding:2px 5px; border-radius:4px; vertical-align:1px;
}
.offers__note{ padding:7px 0 2px; font-size:9.5px; line-height:1.5; color:var(--ink-soft); }

/* ========================================================= TRUST STRIP === */
.trust{
  display:grid; grid-template-columns:repeat(5,1fr);
  background:linear-gradient(100deg,var(--green-900),var(--green-700) 62%,#126B44);
  border-radius:var(--r); padding:22px 10px; color:#fff;
  box-shadow:0 22px 56px rgba(11,74,46,.26); position:relative; overflow:hidden;
}
.trust::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 82% 0%,rgba(212,175,55,.20),transparent 52%); pointer-events:none; }
.trust__item{ display:flex; align-items:center; justify-content:center; gap:12px; padding:4px 14px; position:relative; }
.trust__item + .trust__item::before{ content:''; position:absolute; left:0; top:12%; height:76%; width:1px; background:rgba(255,255,255,.16); }
.trust__ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.10); color:var(--gold); flex:none; transition:transform .3s var(--spring); }
.trust__ic svg{ width:20px; height:20px; }
.trust__item:hover .trust__ic{ transform:translateY(-3px) scale(1.08); }
.trust__item span:last-child{ display:flex; flex-direction:column; line-height:1.3; }
.trust__item strong{ font-size:18px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.trust__item em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.72); }
.trust__stars{ color:var(--gold)!important; letter-spacing:.5px; }

/* ======================================================= CARD BEHAVIOUR === */
/* cursor spotlight — JS feeds --mx/--my */
.spot::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(31,138,91,.13),transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
[data-theme="dark"] .spot::after{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(79,194,140,.16),transparent 62%); }
.spot:hover::after{ opacity:1; }
.spot > *{ position:relative; z-index:1; }
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }

/* ============================================ LOAN CATEGORIES — BENTO === */
/* 12-column bento: two feature tiles on top, four compact tiles below.
   Every tile carries its own accent through --lc / --lc2 / --lc-soft. */
.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.lcard--feature{ grid-column:span 6; }
.lcard--mini{ grid-column:span 3; }

/* --lc-rgb carries the accent as raw channels so tints work with plain rgba()
   — avoids color-mix(), which older Safari/Firefox builds drop entirely */
.lcard--green { --lc:#0E5F3B; --lc2:#1F8A5B; --lc-soft:#E4F3EA; --lc-rgb:31,138,91; }
.lcard--gold  { --lc:#9C7A12; --lc2:#D4AF37; --lc-soft:#FBF2D9; --lc-rgb:212,175,55; }
.lc-orange    { --lc:#C2571F; --lc2:#E8834A; --lc-soft:#FDEBE1; --lc-rgb:232,131,74; }
.lc-purple    { --lc:#6A4CB0; --lc2:#9277D4; --lc-soft:#EEE9FA; --lc-rgb:146,119,212; }
.lc-gold      { --lc:#9C7A12; --lc2:#D4AF37; --lc-soft:#FBF2D9; --lc-rgb:212,175,55; }
.lc-sky       { --lc:#1E7FA8; --lc2:#49A9D0; --lc-soft:#E2F1FB; --lc-rgb:73,169,208; }
[data-theme="dark"] .lcard{ --lc-soft:rgba(255,255,255,.07); }
[data-theme="dark"] .lcard--green{ --lc:#4FC28C; }
[data-theme="dark"] .lcard--gold, [data-theme="dark"] .lc-gold{ --lc:#E0C051; }
[data-theme="dark"] .lc-orange{ --lc:#F0946A; }
[data-theme="dark"] .lc-purple{ --lc:#B49BE8; }
[data-theme="dark"] .lc-sky{ --lc:#6FC2E4; }

.lcard{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-soft);
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.lcard:hover{ box-shadow:var(--sh-lift); border-color:rgba(var(--lc-rgb),.55); }

/* --- feature tile --- */
.lcard--feature{ display:flex; flex-direction:column; padding:26px 26px 24px; min-height:296px; }
.lcard--feature:hover{ transform:translateY(-8px); }

/* soft accent wash that blooms from the top-right corner */
.lcard__wash{
  position:absolute; top:-40%; right:-18%; width:70%; height:130%; border-radius:50%;
  background:radial-gradient(circle,rgba(var(--lc-rgb),.26),rgba(var(--lc-rgb),0) 68%);
  opacity:.75; transition:opacity .45s var(--ease), transform .6s var(--ease); pointer-events:none;
}
.lcard--feature:hover .lcard__wash{ opacity:1; transform:scale(1.12); }

/* oversized watermark of the category icon */
.lcard__glyph{
  position:absolute; right:-14px; bottom:-18px; width:150px; height:150px;
  fill:none; stroke:var(--lc); stroke-width:1.1; opacity:.10;
  transition:transform .6s var(--ease), opacity .45s var(--ease); pointer-events:none;
}
.lcard--feature:hover .lcard__glyph{ transform:rotate(-8deg) scale(1.06); opacity:.16; }

.lcard__top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.lcard__ic{
  width:50px; height:50px; border-radius:16px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--lc),var(--lc2)); color:#fff;
  box-shadow:0 10px 24px rgba(var(--lc-rgb),.34);
  transition:transform .34s var(--spring);
}
.lcard__ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lcard:hover .lcard__ic{ transform:scale(1.09) rotate(-6deg); }

.lcard__badge{
  padding:6px 12px; border-radius:999px; flex:none;
  background:var(--lc-soft); color:var(--lc);
  font-size:11px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
.lcard__badge--gold{ background:linear-gradient(135deg,#E7C55A,var(--gold)); color:#3B2E06; box-shadow:0 6px 16px rgba(212,175,55,.34); }

.lcard--feature h3{ position:relative; z-index:1; font-size:21px; font-weight:700; letter-spacing:-.02em; margin-bottom:9px; }
.lcard--feature p{ position:relative; z-index:1; font-size:13px; line-height:1.68; color:var(--ink-soft); max-width:94%; }

.lcard__specs{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
}
.lcard__specs li{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lcard__specs em{ font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.lcard__specs b{ font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }

.lcard__cta{
  position:relative; z-index:1; margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:var(--lc);
}
.lcard__cta .arw{ width:16px; height:16px; transition:transform .3s var(--ease); }
.lcard:hover .lcard__cta .arw{ transform:translateX(6px); }

/* --- compact tile --- */
.lcard--mini{ display:flex; align-items:center; gap:14px; padding:17px 18px; }
.lcard--mini:hover{ transform:translateY(-6px); }
.lcard--mini .lcard__ic{ width:44px; height:44px; border-radius:14px; }
.lcard--mini .lcard__ic svg{ width:21px; height:21px; }
.lcard__body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.lcard--mini h3{ font-size:14.5px; font-weight:600; }
.lcard--mini em{ font-style:normal; font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.lcard__arw{ width:17px; height:17px; flex:none; color:var(--lc); transition:transform .3s var(--ease); }
.lcard--mini:hover .lcard__arw{ transform:translateX(5px); }

/* accent rail that wipes in on hover */
.lcard--mini::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--lc),var(--lc2));
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.lcard--mini:hover::before{ transform:scaleY(1); }

.bento__note{ margin-top:16px; font-size:11px; line-height:1.6; color:var(--ink-soft); }

@media (max-width:1279px){ .lcard--mini{ grid-column:span 6; } }
@media (max-width:1023px){ .lcard--feature{ grid-column:span 12; min-height:0; } }
@media (max-width:639px){
  .lcard--mini{ grid-column:span 12; }
  .lcard--feature{ padding:22px 20px; }
  .lcard--feature h3{ font-size:19px; }
  .lcard--feature p{ max-width:100%; }
  .lcard__specs{ grid-template-columns:1fr 1fr; }
  .lcard__glyph{ width:118px; height:118px; }
}

/* ========================================================= CITY SECTION === */
.city-box{ background:linear-gradient(168deg,var(--green-100) 0%,var(--surface) 58%); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-soft); }
/* nowrap + a fixed min-height keeps BOTH headers exactly one row tall, so the
   two city grids start on the same baseline even though the titles differ in
   length. Without this the longer title wraps its pill and pushes its grid down. */
.city-box__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:nowrap; min-height:46px; margin-bottom:16px;
}
.city-box__head h2{
  display:flex; align-items:center; gap:10px; min-width:0;
  font-size:15px; font-weight:700; line-height:1.25;
}
/* the label is its own element so it can shrink and ellipsis instead of
   wrapping to a second line and shoving the grid down */
.city-box__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.city-box__head .pill-link{ flex:none; white-space:nowrap; padding:6px 13px; font-size:11.5px; }
@media (min-width:1024px) and (max-width:1279px){
  .city-box__head h2{ font-size:14px; }
  .city-box__head .pill-link{ padding:6px 11px; font-size:11px; }
}
.city-box__pin{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--surface); color:var(--accent); border:1px solid var(--line); flex:none; }
.city-box__pin svg{ width:16px; height:16px; }
.city-box__pin--alt{ color:var(--gold); }

/* Column count alone isn't enough: below 1024px the two city boxes stack to
   full width, so a 4-column grid produces tiles LARGER than on desktop.
   max-width caps every tile at the same size no matter the container. */
.city-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:1023px){ .city-grid{ grid-template-columns:repeat(6,1fr); gap:9px; } }
@media (max-width:639px){ .city-grid{ grid-template-columns:repeat(4,1fr); gap:8px; } }
.city-card{ position:relative; display:block; width:100%; max-width:116px; justify-self:center; border-radius:var(--r-sm); overflow:hidden; box-shadow:0 6px 18px rgba(14,95,59,.10); transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.city-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift); }
.city-card__art{ display:block; position:relative; aspect-ratio:1/1; overflow:hidden; }
/* bottom scrim — a clean, reserved strip for the label */
.city-card__art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(5,28,17,.94) 0%, rgba(5,28,17,.72) 16%,
    rgba(5,28,17,.28) 34%, rgba(5,28,17,0) 58%);
}
/* soft sun glow + very light grain so each tile reads as a scene */
.city-card__art::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 74% 16%,rgba(255,255,255,.42),rgba(255,255,255,0) 30%),
             radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:auto,11px 11px;
}
/* Monuments are inlined per card and all share viewBox "0 0 200 130" with
   preserveAspectRatio="xMidYMax", so they sit on one common baseline.
   Sized to ~36% of tile height, well clear of the label strip below. */
.city-card .mon{
  display:block; position:absolute; left:50%; bottom:31%; transform:translateX(-50%);
  width:46%; height:auto; z-index:1;
  fill:rgba(255,255,255,.95); color:rgba(255,255,255,.95);
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.35));
  transition:transform .45s var(--ease);
}
.city-card:hover .mon{ transform:translateX(-50%) scale(1.09); }
.city-card__name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 4px 8px; text-align:center;
  color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.005em;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}

.art-delhi     { background:linear-gradient(180deg,#F0B27A,#C0703C 55%,#7A3F1D); }
.art-mumbai    { background:linear-gradient(180deg,#8FC3E8,#3F7FB5 55%,#1D4B72); }
.art-bangalore { background:linear-gradient(180deg,#9BD5B4,#3E9A6C 55%,#1C5A3C); }
.art-hyderabad { background:linear-gradient(180deg,#F3C98E,#C88B3C 55%,#7B4E17); }
.art-pune      { background:linear-gradient(180deg,#E8B7A0,#B96B4C 55%,#6E3722); }
.art-ahmedabad { background:linear-gradient(180deg,#EFD9A0,#C0A055 55%,#75612A); }
.art-gurgaon   { background:linear-gradient(180deg,#A9C6E4,#5B7FA8 55%,#2E4C6E); }
.art-noida     { background:linear-gradient(180deg,#B7CBB9,#5F8A70 55%,#2E5240); }
.art-jaipur    { background:linear-gradient(180deg,#F2A98F,#CF6A48 55%,#8A3B22); }
.art-lucknow   { background:linear-gradient(180deg,#EEC9A6,#C08C5B 55%,#75512E); }
.art-chennai   { background:linear-gradient(180deg,#F3B9A6,#CE7255 55%,#833C28); }
.art-kolkata   { background:linear-gradient(180deg,#CBD8EA,#8C9FC0 55%,#4E5C7A); }
.art--night{ filter:saturate(.72) brightness(.82) hue-rotate(-8deg); }

/* ============================================================ PARTNERS === */
.marquee-wrap{ position:relative; padding:0 46px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track, .marquee__track.is-paused{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.logo-card{
  flex:none; width:132px; height:74px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.logo-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-card); border-color:var(--accent-2); }
.logo-card span{ font-weight:800; font-size:14px; letter-spacing:-.02em; text-align:center; line-height:1.1; }
[data-theme="dark"] .logo-card span{ filter:brightness(1.6) saturate(1.2); }
.logo-hdfc { color:#004C8F; }
.logo-hdfc::before{ content:''; display:inline-block; width:9px; height:9px; background:#ED232A; margin-right:5px; vertical-align:1px; }
.logo-sbi  { color:#22409A; font-size:20px!important; letter-spacing:.06em; }
.logo-icici{ color:#AE282E; font-style:italic; }
.logo-axis { color:#97144D; font-size:13px!important; }
.logo-kotak{ color:#EF3E23; font-size:19px!important; text-transform:lowercase; }
.logo-pnb  { color:#A6192E; font-size:20px!important; letter-spacing:.06em; }
.logo-idfc { color:#9B1B30; font-size:13px!important; }
.logo-tata { color:#004B8D; font-size:12.5px!important; }
.logo-bajaj{ color:#0057B8; font-size:12px!important; }
.logo-hero { color:#E4002B; font-size:13px!important; }

.marq-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--accent);
  box-shadow:var(--sh-card); cursor:pointer; transition:all .25s var(--ease);
}
.marq-nav svg{ width:17px; height:17px; }
.marq-nav:hover{ background:var(--green-700); color:#fff; }
.marq-nav--prev{ left:0; } .marq-nav--next{ right:0; }

/* ========================================================== CALCULATORS === */
/* Compact single row: five tiles at ~120px tall instead of five 180px cards
   in an awkward 3+2 grid. */
.calcs{ display:grid; grid-template-columns:1fr; gap:11px; }
@media (min-width:560px){ .calcs{ grid-template-columns:1fr 1fr; } }
@media (min-width:820px){ .calcs{ grid-template-columns:repeat(3,1fr); } }
/* all five on one line from 1000px — tiles are compact enough to fit */
@media (min-width:1000px){ .calcs{ grid-template-columns:repeat(5,1fr); } }

.calc{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:14px 14px 16px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.calc:hover{ transform:translateY(-6px); box-shadow:var(--sh-lift); border-color:rgba(var(--lc-rgb),.5); }

.calc--green { --lc:#0E5F3B; --lc2:#1F8A5B; --lc-soft:#E4F3EA; --lc-rgb:31,138,91; }
.calc--sky   { --lc:#1E7FA8; --lc2:#49A9D0; --lc-soft:#E2F1FB; --lc-rgb:73,169,208; }
.calc--purple{ --lc:#6A4CB0; --lc2:#9277D4; --lc-soft:#EEE9FA; --lc-rgb:146,119,212; }
.calc--gold  { --lc:#9C7A12; --lc2:#D4AF37; --lc-soft:#FBF2D9; --lc-rgb:212,175,55; }
.calc--orange{ --lc:#C2571F; --lc2:#E8834A; --lc-soft:#FDEBE1; --lc-rgb:232,131,74; }
[data-theme="dark"] .calc{ --lc-soft:rgba(255,255,255,.08); }
[data-theme="dark"] .calc--green { --lc:#4FC28C; }
[data-theme="dark"] .calc--sky   { --lc:#6FC2E4; }
[data-theme="dark"] .calc--purple{ --lc:#B49BE8; }
[data-theme="dark"] .calc--gold  { --lc:#E0C051; }
[data-theme="dark"] .calc--orange{ --lc:#F0946A; }

/* accent rail wipes across the bottom on hover */
.calc::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--lc),var(--lc2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.calc:hover::after{ transform:scaleX(1); }

.calc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.calc__ic{
  width:32px; height:32px; min-width:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--lc-soft); color:var(--lc);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--spring);
}
.calc__ic svg{ width:17px; height:17px; }
.calc:hover .calc__ic{ background:linear-gradient(140deg,var(--lc),var(--lc2)); color:#fff; transform:rotate(-6deg) scale(1.06); }
.calc__arw{ width:14px; height:14px; color:var(--ink-soft); opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); }
.calc:hover .calc__arw{ opacity:1; transform:none; color:var(--lc); }
.calc b{ font-size:13.2px; font-weight:600; line-height:1.3; }
.calc em{ font-style:normal; margin-top:3px; font-size:11px; line-height:1.45; color:var(--ink-soft); }

/* ================================================ EMI SAVING CALCULATOR === */
.saver{
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-card); background:var(--surface);
}
@media (min-width:900px){ .saver{ grid-template-columns:1.05fr .95fr; } }
.saver__inputs{ padding:22px 20px; }
.saver__rule{ height:1px; border:0; background:var(--line); margin:18px 0 16px; }
.saver__out{
  padding:22px 20px; color:#fff;
  background:linear-gradient(150deg,var(--green-900),var(--green-700) 58%,#14724A);
  display:flex; flex-direction:column;
}
.saver__hl{ font-size:12px; color:rgba(255,255,255,.78); }
.saver__amt{ font-size:32px; font-weight:800; letter-spacing:-.03em; margin-top:2px; font-variant-numeric:tabular-nums; }
.saver__amt.is-zero{ color:var(--gold-soft); }

.saver__bars{ margin-top:20px; display:flex; flex-direction:column; gap:13px; }
.saver__bar em{ font-style:normal; display:flex; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,.8); margin-bottom:6px; }
.saver__bar b{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.bar{ display:block; height:9px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; }
.bar__fill{ display:block; height:100%; border-radius:99px; width:0; transition:width .5s var(--ease); }
.bar__fill--now{ background:linear-gradient(90deg,#E88A6A,#D9534F); }
.bar__fill--new{ background:linear-gradient(90deg,#6FD3A3,var(--gold)); }

.saver__rows{ margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:9px; }
.saver__rows > div{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:rgba(255,255,255,.8); }
.saver__rows dd{ margin:0; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; }
.saver__net{ padding-top:9px; border-top:1px solid rgba(255,255,255,.16); }
.saver__net dt{ color:#fff!important; font-weight:600; }
.saver__net dd{ color:var(--gold)!important; font-weight:800!important; }
.saver__note{ margin:14px 0 18px; font-size:11px; line-height:1.6; color:rgba(255,255,255,.72); min-height:32px; }
.saver__out .btn{ margin-top:auto; }

/* ==================================================== ELIGIBILITY === */
.elig{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:768px){ .elig{ grid-template-columns:1fr 1fr; } }
.elig__card{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(170deg,var(--lc-soft) 0%,var(--surface) 40%);
  box-shadow:var(--sh-soft); transition:box-shadow .3s var(--ease);
}
.elig__card:hover{ box-shadow:var(--sh-card); }
.elig--green{ --lc:#0E5F3B; --lc2:#1F8A5B; --lc-soft:#E4F3EA; --lc-rgb:31,138,91; }
.elig--gold { --lc:#9C7A12; --lc2:#D4AF37; --lc-soft:#FBF2D9; --lc-rgb:212,175,55; }
[data-theme="dark"] .elig--green{ --lc:#4FC28C; --lc-soft:rgba(79,194,140,.10); }
[data-theme="dark"] .elig--gold { --lc:#E0C051; --lc-soft:rgba(224,192,81,.10); }
.elig__head{ display:flex; align-items:center; gap:11px; padding:17px 18px 13px; }
.elig__ic{
  width:34px; height:34px; min-width:34px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--lc),var(--lc2)); color:#fff;
  box-shadow:0 6px 14px rgba(var(--lc-rgb),.3);
}
/* CSS beats the width/height attributes on the inline svg */
.elig__ic svg{ width:18px; height:18px; }
.elig__head h3{ font-size:15px; font-weight:700; }
.elig__rows{ padding:0 18px 16px; }
.elig__rows > div{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; border-top:1px solid var(--line); font-size:12.5px; }
.elig__rows > div:first-child{ border-top:0; }
.elig__rows dt{ color:var(--ink-soft); }
.elig__rows dd{ margin:0; font-weight:600; text-align:right; }

/* ===================================================== DOCUMENTS === */
.docs{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .docs{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .docs{ grid-template-columns:repeat(3,1fr); } }
.doc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 17px 15px; box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.doc:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift); border-color:var(--accent-2); }
.doc__ic{
  width:34px; height:34px; border-radius:11px; margin-bottom:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-100); color:var(--accent);
}
.doc__ic svg{ width:17px; height:17px; }
.doc h3{ font-size:13.5px; font-weight:600; margin-bottom:9px; }
.doc ul{ display:flex; flex-direction:column; gap:6px; }
.doc li{ position:relative; padding-left:17px; font-size:11.8px; line-height:1.5; color:var(--ink-soft); }
.doc li::before{
  content:''; position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%;
  background:var(--green-100); border:2px solid var(--green-500);
}
.doc li em{ font-style:normal; color:var(--gold); font-weight:600; font-size:11px; }

/* ============================================== COMPARISON TABLE === */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-soft); background:var(--surface); }
.cmp{ width:100%; min-width:660px; border-collapse:collapse; font-size:12.5px; }
.cmp thead th{
  text-align:left; padding:11px 14px; white-space:nowrap;
  background:linear-gradient(100deg,var(--green-900),var(--green-700)); color:#fff;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.cmp tbody tr{ border-top:1px solid var(--line); transition:background .2s var(--ease); }
.cmp tbody tr:hover{ background:var(--green-100); }
.cmp th[scope="row"]{ text-align:left; padding:11px 14px; font-weight:600; }
.cmp td{ padding:11px 14px; color:var(--ink-soft); white-space:nowrap; }
.cmp td b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.cmp__bank{ font-weight:600; color:var(--ink); }
.cmp__cta{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:var(--green-100); border:1px solid var(--line); color:var(--accent);
  font-size:12px; font-weight:600; transition:all .22s var(--ease);
}
.cmp__cta:hover{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.cmp__note{ margin-top:14px; font-size:11px; line-height:1.6; color:var(--ink-soft); }

/* =========================================================== FAQ === */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq__item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-soft); overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__item[open]{ border-color:var(--accent-2); box-shadow:var(--sh-card); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--accent); }
/* plus / minus built from two bars — no icon font, no SVG to break */
.faq__sign{ position:relative; width:18px; height:18px; min-width:18px; }
.faq__sign::before,.faq__sign::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--accent);
  border-radius:2px; transform:translate(-50%,-50%); transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.faq__sign::before{ width:14px; height:2px; }
.faq__sign::after{ width:2px; height:14px; }
.faq__item[open] .faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__a{ padding:0 20px 18px; }
.faq__a p{ font-size:13.2px; line-height:1.75; color:var(--ink-soft); }

/* =================================================== SEO CONTENT === */
.seo{
  background:linear-gradient(168deg,var(--green-100) 0%,var(--surface) 46%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 30px 26px; box-shadow:var(--sh-soft);
}
.seo h2{ font-size:clamp(19px,2.2vw,24px); font-weight:700; margin-bottom:14px; }
.seo h3{ font-size:16px; font-weight:700; margin:22px 0 9px; color:var(--accent); }
.seo p{ font-size:13.4px; line-height:1.82; color:var(--ink-soft); margin-bottom:11px; max-width:78ch; }
.seo em{ font-style:italic; color:var(--ink); }
.seo__disclaimer{
  margin-top:22px; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
  font-size:11.5px!important; line-height:1.7!important;
}
.seo__disclaimer strong{ color:var(--ink); }
/* Byline for the guide section. Loans are YMYL content, so who wrote it and
   when it was last checked are worth showing, not just putting in schema. */
.seo__meta{
  margin:-6px 0 22px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft);
}
.seo__meta time{ font-weight:600; color:var(--ink); }
@media (max-width:639px){ .seo{ padding:22px 18px; } }

/* ========================================================== WHY CHOOSE === */
.why-card{ position:relative; overflow:hidden; height:100%; background:linear-gradient(160deg,var(--green-100) 0%,var(--surface) 62%); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px 30px; box-shadow:var(--sh-soft); }
.why-card__title{ font-size:19px; font-weight:700; margin-bottom:18px; }
.why-list{ display:flex; flex-direction:column; gap:12px; max-width:74%; }
.why-list li{ display:flex; align-items:center; gap:11px; font-size:13.8px; font-weight:500; }
.why-card__shield{ position:absolute; right:-10px; bottom:6px; width:120px; height:120px; color:var(--green-500); filter:drop-shadow(0 16px 28px rgba(31,138,91,.30)); animation:floatY 6s ease-in-out infinite; }
.why-card__shield svg{ width:120px; height:120px; }

/* ============================================================= REVIEWS === */
.reviews{
  display:grid; grid-template-columns:1fr; gap:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-soft);
}
@media (min-width:600px){ .reviews{ grid-template-columns:190px 1fr; } }
.reviews__score{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:26px 18px; text-align:center;
  background:linear-gradient(160deg,var(--green-100) 0%,var(--surface) 90%);
  border-bottom:1px solid var(--line);
}
@media (min-width:600px){ .reviews__score{ border-bottom:0; border-right:1px solid var(--line); } }
.reviews__score b{ font-size:40px; font-weight:800; letter-spacing:-.03em; color:var(--accent); line-height:1; }
.reviews__stars{ color:var(--gold); font-size:15px; letter-spacing:2px; }
.reviews__score em{ font-style:normal; font-size:11px; color:var(--ink-soft); }
.reviews__body{ padding:24px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.reviews__g{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--green-100); border:1px solid var(--line); }
.reviews__body p{ font-size:13px; line-height:1.72; color:var(--ink-soft); }
.reviews__note{ margin-top:12px; font-size:10.8px; line-height:1.6; color:var(--ink-soft); }

/* ========================================================= TESTIMONIALS === */
.tslider{ position:relative; padding:0 40px; }
.tslider__viewport{ overflow:hidden; }
.tslider__track{ display:flex; gap:16px; transition:transform .55s var(--ease); }
.tcard{
  position:relative; flex:0 0 calc((100% - 32px)/3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 18px; box-shadow:var(--sh-soft);
  display:flex; flex-direction:column; min-height:196px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-lift); }
.tcard__stars{ color:var(--gold); font-size:14px; letter-spacing:2px; }
.tcard p{ margin-top:12px; font-size:13px; line-height:1.72; color:var(--ink-soft); }
.tcard__by{ margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:10px; }
.tcard__by > span:nth-child(2){ display:flex; flex-direction:column; line-height:1.3; }
.tcard__by strong{ font-size:13px; font-weight:600; color:var(--ink); }
.tcard__by em{ font-style:normal; font-size:11px; color:var(--ink-soft); }
.tcard__quote{ margin-left:auto; font-size:34px; line-height:1; color:var(--line); font-weight:700; }
.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12.5px; font-weight:700; flex:none; box-shadow:0 6px 16px rgba(14,95,59,.18); }
.avatar--1{ background:linear-gradient(135deg,#2E7D5B,#1F8A5B); }
.avatar--2{ background:linear-gradient(135deg,#B4763E,#D4AF37); }
.avatar--3{ background:linear-gradient(135deg,#2C5F8A,#3E8FC0); }
.avatar--4{ background:linear-gradient(135deg,#7A4C9E,#A177C9); }
.avatar--5{ background:linear-gradient(135deg,#0E5F3B,#3FA57B); }
.avatar--6{ background:linear-gradient(135deg,#A63D5A,#D0708A); }

.ts-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--accent);
  box-shadow:var(--sh-card); cursor:pointer; transition:all .25s var(--ease);
}
.ts-nav svg{ width:17px; height:17px; }
.ts-nav:hover{ background:var(--green-700); color:#fff; }
.ts-nav--prev{ left:0; } .ts-nav--next{ right:0; }
.ts-dots{ display:flex; justify-content:center; gap:7px; margin-top:18px; }
.ts-dots button{ width:8px; height:8px; border-radius:99px; background:var(--line); border:0; cursor:pointer; transition:all .3s var(--ease); }
.ts-dots button.is-active{ width:22px; background:var(--green-500); }

/* ================================================================ BLOG === */
/* six compact cards: 3 across on desktop, 2 rows */
.blogs{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:600px){ .blogs{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .blogs{ grid-template-columns:repeat(3,1fr); } }

.blog-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-soft); transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lift); }
.blog-card__media{ position:relative; display:block; aspect-ratio:16/7.6; overflow:hidden; }
.blog-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-card:hover .blog-photo{ transform:scale(1.07); }
.blogs__empty{ grid-column:1/-1; padding:26px; text-align:center; font-size:13px; color:var(--ink-soft); background:var(--green-100); border:1px solid var(--line); border-radius:var(--r-md); }
.blog-svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .6s var(--ease); }
.blog-card:hover .blog-svg{ transform:scale(1.08); }
.blog-svg rect, .blog-svg circle, .blog-svg path{ fill:rgba(255,255,255,.32); }
.blog-svg .acc{ fill:rgba(255,255,255,.6); }
.blog-art--debt{ background:linear-gradient(150deg,#0E5F3B,#1F8A5B); color:#fff; }
.blog-art--personal{ background:linear-gradient(150deg,#1E6A8C,#4CA3C4); color:#fff; }
.blog-art--cibil{ background:linear-gradient(150deg,#9C7A12,#D4AF37); color:#fff; }
.blog-art--compare{ background:linear-gradient(150deg,#5B3E9E,#9277D4); color:#fff; }
.blog-art--docs{ background:linear-gradient(150deg,#155E75,#3FA3B8); color:#fff; }
.blog-art--instant{ background:linear-gradient(150deg,#B4541C,#E8834A); color:#fff; }
.blog-art--cibil .blog-svg path[stroke], .blog-art--compare .blog-svg path[stroke]{ fill:none; }
.badge{ position:absolute; top:10px; left:10px; z-index:2; padding:4px 9px; border-radius:7px; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--surface); box-shadow:0 6px 16px rgba(0,0,0,.14); }
.badge--debt{ color:#0E5F3B; } .badge--personal{ color:#1E6A8C; } .badge--cibil{ color:#9C7A12; }
.badge--compare{ color:#5B3E9E; } .badge--docs{ color:#155E75; } .badge--instant{ color:#B4541C; }
[data-theme="dark"] .badge{ color:var(--ink)!important; }
.blog-card__body{ padding:14px 15px 15px; }
.blog-card__body h3{ font-size:13.5px; font-weight:600; line-height:1.42; transition:color .25s var(--ease); }
.blog-card:hover .blog-card__body h3{ color:var(--accent); }
.blog-card__meta{ margin-top:9px; display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--ink-soft); }
.dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

/* ================================================================= CTA === */
/* sits mid-page now, between two sections — no top margin, the neighbouring
   section padding already provides the breathing room */
.cta{ position:relative; overflow:hidden; margin:0; background:linear-gradient(105deg,var(--green-900) 0%,var(--green-700) 52%,#14724A 100%); color:#fff; padding:36px 0; }
.cta__glow{ position:absolute; right:-6%; top:-60%; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.22),transparent 62%); pointer-events:none; animation:aurora 20s ease-in-out infinite; }
.cta__inner{ position:relative; display:grid; grid-template-columns:1.15fr auto 250px; align-items:center; gap:24px; }
.cta__copy h2{ font-size:clamp(21px,2.6vw,29px); font-weight:800; letter-spacing:-.02em; }
.cta__copy p{ margin-top:8px; font-size:14px; color:rgba(255,255,255,.82); }
.cta__pills{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; }
.cta__pills li{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:rgba(255,255,255,.9); }
.dot-gold{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.cta__actions{ display:flex; flex-direction:column; gap:14px; }
.cta__buttons{ display:flex; gap:12px; flex-wrap:wrap; }
.cta__contact{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; }
.cta__contact a{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.92); font-weight:600; transition:color .22s var(--ease); }
.cta__contact a:hover{ color:var(--gold); }
.cta__contact svg{ width:15px; height:15px; }

.cta__art{ position:relative; height:170px; }
.mini-phone{ position:absolute; right:8px; top:-6px; width:150px; background:#fff; color:#1A1A1A; border-radius:16px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; box-shadow:0 22px 46px rgba(0,0,0,.30); }
.mini-phone__check{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff; margin-bottom:4px; }
.mini-phone__check svg{ width:18px; height:18px; stroke-width:3; }
.mini-phone strong{ font-size:11.5px; color:var(--green-700); }
.mini-phone em{ font-style:normal; font-size:9px; color:#5B6B62; }
.mini-phone b{ font-size:17px; font-weight:800; }
.cta__shield{ position:absolute; right:-14px; bottom:-4px; width:62px; height:62px; color:#2FA173; filter:drop-shadow(0 12px 22px rgba(0,0,0,.3)); }
.cta__shield svg{ width:62px; height:62px; }
.cta__coin{ position:absolute; border-radius:50%; background:linear-gradient(150deg,#F6DE96,var(--gold) 55%,#B98F1E); box-shadow:0 6px 16px rgba(0,0,0,.26); }
.cta__coin--1{ width:34px; height:34px; left:-6px; bottom:14px; }
.cta__coin--2{ width:26px; height:26px; left:22px; bottom:0; }
.cta__coin--3{ width:20px; height:20px; left:0; top:24px; opacity:.9; }

/* ====================================================== ARTICLE PAGES === */
.art-hero{ position:relative; overflow:hidden; padding:26px 0 30px; background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 60%,var(--page) 100%); }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); margin-bottom:14px; }
.crumbs a{ color:var(--accent); font-weight:600; }
.crumbs a:hover{ text-decoration:underline; }
.art-hero__title{ font-size:clamp(26px,3.4vw,38px); font-weight:800; line-height:1.14; letter-spacing:-.025em; max-width:20ch; }
.art-hero__sub{ margin-top:12px; font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.art-hero__facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.art-hero__facts li{ display:flex; flex-direction:column; gap:1px; padding:10px 16px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-soft); }
.art-hero__facts b{ font-size:16px; font-weight:800; color:var(--accent); letter-spacing:-.02em; }
.art-hero__facts span{ font-size:10.5px; color:var(--ink-soft); }
.art-hero__cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; }
.art-hero__note{ font-size:11.5px; color:var(--ink-soft); }

.art-layout{ display:grid; grid-template-columns:1fr; gap:26px; align-items:start; }
@media (min-width:1024px){ .art-layout{ grid-template-columns:250px 1fr; gap:38px; } }

.art-toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 18px 16px; box-shadow:var(--sh-soft); }
@media (min-width:1024px){ .art-toc{ position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; } }
.art-toc__title{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:11px; }
.art-toc ol{ list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.art-toc li{ counter-increment:toc; }
.art-toc a{ display:block; padding:6px 9px; border-radius:8px; font-size:12.2px; line-height:1.45; color:var(--ink-soft); transition:background .2s var(--ease), color .2s var(--ease); }
.art-toc a::before{ content:counter(toc) ". "; color:var(--accent-2); font-weight:700; }
.art-toc a:hover{ background:var(--green-100); color:var(--accent); }
.art-toc__cta{ margin-top:14px; }

.art{ max-width:74ch; }
.art h2{ font-size:clamp(20px,2.3vw,25px); font-weight:700; letter-spacing:-.02em; margin:38px 0 12px; padding-top:6px; scroll-margin-top:100px; }
.art h2:first-of-type{ margin-top:26px; }
.art h3{ font-size:16.5px; font-weight:700; margin:26px 0 8px; }
.art p{ font-size:14.4px; line-height:1.82; color:var(--ink-soft); margin-bottom:14px; }
.art__lead{ font-size:16px!important; line-height:1.75!important; color:var(--ink)!important; }
.art strong{ color:var(--ink); font-weight:600; }
.art a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.art a:hover{ text-decoration-thickness:2px; }
.art ul{ margin:0 0 16px 0; display:flex; flex-direction:column; gap:7px; }
.art ul li{ position:relative; padding-left:20px; font-size:14.2px; line-height:1.72; color:var(--ink-soft); }
.art ul li::before{ content:''; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--accent-2); }
.art-cap{ font-size:11.5px!important; color:var(--ink-soft); font-style:italic; margin-top:-6px; }
.art-formula{ text-align:center; background:var(--green-100); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; font-size:15px!important; color:var(--ink)!important; }

.art-key{ background:linear-gradient(160deg,var(--green-100) 0%,var(--surface) 70%); border:1px solid var(--line); border-left:4px solid var(--green-500); border-radius:var(--r-md); padding:18px 20px; margin:22px 0; }
.art-key__t{ font-size:11px!important; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)!important; margin-bottom:9px!important; }
.art-key ul{ margin-bottom:0; }

.art-box{ border-radius:var(--r-md); padding:16px 19px; margin:22px 0; border:1px solid var(--line); border-left-width:4px; }
.art-box__t{ font-size:13px!important; font-weight:700; color:var(--ink)!important; margin-bottom:6px!important; }
.art-box p:last-child{ margin-bottom:0; font-size:13.6px!important; }
.art-box--info{ background:rgba(33,150,243,.07); border-left-color:#2196F3; }
.art-box--warn{ background:rgba(212,175,55,.10); border-left-color:var(--gold); }
.art-box--tip { background:rgba(31,138,91,.08);  border-left-color:var(--green-500); }
.art-box--note{ background:var(--surface-2);      border-left-color:var(--ink-soft); }

.art-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); margin:18px 0; background:var(--surface); box-shadow:var(--sh-soft); }
.art table{ width:100%; min-width:520px; border-collapse:collapse; font-size:13.2px; }
.art thead th{ background:linear-gradient(100deg,var(--green-900),var(--green-700)); color:#fff; text-align:left; padding:11px 14px; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.art tbody tr{ border-top:1px solid var(--line); }
.art tbody tr:hover{ background:var(--green-100); }
.art td{ padding:11px 14px; color:var(--ink-soft); vertical-align:top; }
.art td:first-child{ color:var(--ink); font-weight:500; }
.art td.y{ color:var(--green-500); font-weight:700; }
.art td.n{ color:#C2571F; font-weight:700; }
.art td.m{ color:#9C7A12; font-weight:700; }

.art-flow{ display:grid; grid-template-columns:1fr; gap:12px; align-items:center; margin:20px 0; }
@media (min-width:620px){ .art-flow{ grid-template-columns:1fr auto 1fr; } }
.art-flow__col{ border:1px solid var(--line); border-radius:var(--r-md); padding:15px 17px; }
.art-flow__col--before{ background:rgba(217,83,79,.06); border-color:rgba(217,83,79,.3); }
.art-flow__col--after { background:rgba(31,138,91,.08); border-color:rgba(31,138,91,.35); }
.art-flow__t{ font-size:12px!important; font-weight:700; color:var(--ink)!important; margin-bottom:9px!important; }
.art-flow dl{ display:flex; flex-direction:column; gap:0; }
.art-flow dl > div{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:12.8px; color:var(--ink-soft); }
.art-flow dl > div:last-child{ border-bottom:0; }
.art-flow dd{ margin:0; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.art-flow__total dt, .art-flow__total dd{ font-weight:800!important; color:var(--accent)!important; }
.art-flow__arrow{ display:grid; place-items:center; color:var(--accent-2); transform:rotate(90deg); }
@media (min-width:620px){ .art-flow__arrow{ transform:none; } }

.art-pc{ display:grid; grid-template-columns:1fr; gap:14px; margin:20px 0; }
@media (min-width:720px){ .art-pc{ grid-template-columns:1fr 1fr; } }
.art-pc__col{ border:1px solid var(--line); border-left-width:4px; border-radius:var(--r-md); padding:16px 19px; }
.art-pc__col--pro{ background:rgba(31,138,91,.07); border-left-color:var(--green-500); }
.art-pc__col--con{ background:rgba(217,83,79,.06); border-left-color:#D9534F; }
.art-pc__t{ font-size:12.5px!important; font-weight:700; color:var(--ink)!important; margin-bottom:8px!important; }
.art-pc ul{ margin-bottom:0; }
.art-pc__col--con li::before{ background:#D9534F; }

.art-steps{ list-style:none; counter-reset:step; margin:20px 0; padding:0; }
.art-steps li{ counter-increment:step; position:relative; padding:0 0 20px 44px; margin-left:13px; border-left:2px solid var(--line); font-size:14px; line-height:1.7; color:var(--ink-soft); }
.art-steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.art-steps li::before{ content:counter(step); position:absolute; left:-15px; top:-2px; width:28px; height:28px; border-radius:50%; background:linear-gradient(140deg,var(--green-700),var(--green-500)); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
.art-steps strong{ display:block; margin-bottom:2px; color:var(--ink); font-size:14.5px; }

.art-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:18px 0; }
@media (min-width:560px){ .art-grid{ grid-template-columns:1fr 1fr; } }
.art-card{ display:flex; flex-direction:column; gap:5px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh-soft); text-decoration:none!important; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.art-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); border-color:var(--accent-2); }
.art-card b{ font-size:14.5px; font-weight:700; color:var(--ink); }
.art-card span{ font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.art-card em{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-style:normal; font-size:12px; font-weight:700; color:var(--accent); }
.art-card:hover em svg{ transform:translateX(4px); }
.art-card em svg{ transition:transform .28s var(--ease); }

/* ---- grouped link hub (Explore More …) ----
   Each category is its own block with its own small icon, so 50+ links stay
   scannable instead of collapsing into one undifferentiated wall. */
.xp{ display:flex; flex-direction:column; gap:22px; margin:20px 0 6px; }
.xp__group{ border-top:1px solid var(--line); padding-top:14px; }
.xp__group:first-child{ border-top:0; padding-top:0; }
.xp__head{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.xp__ic{
  width:26px; height:26px; min-width:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-100); color:var(--accent);
}
.xp__head h3{ font-size:13.5px!important; font-weight:700; margin:0!important; letter-spacing:-.01em; }
.xp__head em{
  margin-left:auto; font-style:normal; font-size:10.5px; font-weight:700;
  color:var(--accent); background:var(--green-100);
  padding:2px 8px; border-radius:999px;
}
.xp__grid{ display:grid; grid-template-columns:1fr; gap:7px; margin:0!important; }
@media (min-width:520px){ .xp__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .xp__grid{ grid-template-columns:repeat(3,1fr); } }
.xp__grid li{ padding:0!important; }
.xp__grid li::before{ display:none; }
.xp__grid a{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 9px 10px; border-radius:9px;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--green-500);
  font-size:12.6px; font-weight:600; color:var(--ink);
  text-decoration:none!important; line-height:1.35;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.xp__grid a span{ flex:1; min-width:0; }
.xp__grid a svg{ color:var(--accent); flex:none; transition:transform .22s var(--ease); }
.xp__grid a:hover{
  background:var(--green-100); border-color:var(--accent-2); border-left-color:var(--green-700);
  transform:translateX(2px); box-shadow:var(--sh-soft);
}
.xp__grid a:hover svg{ transform:translateX(2px); }

.art-cities{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.art-cities a{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:600; text-decoration:none!important; transition:all .22s var(--ease); }
.art-cities a:hover{ background:var(--green-700); border-color:var(--green-700); color:#fff; transform:translateY(-2px); }

.art-why li::before{ background:var(--gold); }

@media (max-width:639px){
  .art-hero{ padding:20px 0 24px; }
  .art-hero__facts li{ padding:8px 13px; }
  .art h2{ margin-top:30px; }
  .art{ max-width:none; }
}

/* ========================================================= CLOSING CTA === */
.endcta{ padding:34px 0 44px; }
.endcta__inner{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr; gap:20px; align-items:center;
  padding:26px 28px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--green-100) 0%,var(--surface) 55%);
  border:1px solid var(--line); box-shadow:var(--sh-card);
}
@media (min-width:900px){ .endcta__inner{ grid-template-columns:1.25fr auto; gap:30px; padding:28px 32px; } }
/* soft gold bloom so it reads as a moment, not just another panel */
.endcta__inner::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; border-radius:50%; top:-58%; right:-8%;
  background:radial-gradient(circle,rgba(212,175,55,.16),transparent 66%);
}
.endcta__copy, .endcta__actions{ position:relative; z-index:1; }
.endcta__copy h2{ font-size:clamp(18px,2.1vw,23px); font-weight:700; letter-spacing:-.02em; }
.endcta__copy p{ margin-top:7px; font-size:13px; line-height:1.65; color:var(--ink-soft); max-width:52ch; }
.endcta__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
@media (min-width:900px){ .endcta__actions{ align-items:flex-end; } }
.endcta__call{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); transition:color .22s var(--ease); }
.endcta__call b{ color:var(--accent); font-weight:700; }
.endcta__call:hover{ color:var(--accent); }
@media (max-width:639px){
  .endcta{ padding:26px 0 34px; }
  .endcta__inner{ padding:22px 18px; }
}

/* ============================================================== FOOTER === */
.footer{ background:linear-gradient(160deg,#0A4229,var(--green-900) 60%,#08381F); color:rgba(255,255,255,.74); padding:44px 0 0; font-size:13px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr repeat(5,1fr) 1.25fr; gap:26px 22px; padding-bottom:34px; }
.footer__about{ margin-top:16px; line-height:1.75; font-size:12.5px; max-width:280px; }
.footer__col h3{ color:#fff; font-size:13.5px; font-weight:600; margin-bottom:14px; }
.footer__col ul{ display:flex; flex-direction:column; gap:9px; }
.footer__col a{ font-size:12.5px; transition:color .22s var(--ease), padding-left .22s var(--ease); display:inline-block; }
.footer__col a:hover{ color:var(--gold); padding-left:5px; }
.footer__col a.more{ color:var(--gold); font-weight:600; }
.footer__news p{ font-size:12.5px; line-height:1.7; margin-bottom:14px; }

.footer__contact{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.footer__contact li{ display:flex; align-items:center; gap:10px; }
.footer__contact a{ font-size:13px; font-weight:600; color:#fff; transition:color .22s var(--ease); }
.footer__contact a:hover{ color:var(--gold); }
.footer__contact-ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.10); color:var(--gold); flex:none; }
.footer__contact-ic svg{ width:14px; height:14px; }

.socials{ display:flex; gap:9px; margin-top:18px; }
.socials a{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.10); color:#fff; transition:all .26s var(--spring); }
.socials svg{ width:15px; height:15px; fill:currentColor; }
.socials a:hover{ background:var(--gold); color:#0B4A2E; transform:translateY(-4px) scale(1.06); }

.news-form{ display:flex; gap:8px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:5px 5px 5px 12px; transition:border-color .25s var(--ease); }
.news-form:focus-within{ border-color:var(--gold); }
.news-form input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font-size:12.5px; font-family:inherit; padding:8px 0; }
.news-form input::placeholder{ color:rgba(255,255,255,.5); }
.news-form__btn{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--gold); color:#3B2E06; border:0; cursor:pointer; flex:none; transition:transform .25s var(--ease); }
.news-form__btn:hover{ transform:translateX(3px); }
.news-form__btn .arw{ width:16px; height:16px; }
.news-form__msg{ margin-top:9px; font-size:11.5px; min-height:16px; }
.news-form__msg.ok{ color:#8FE3B8; }
.news-form__msg.err{ color:#FFC2C2; }

/* ---- popular searches + top calculators ---- */
.footer__mid{ display:grid; grid-template-columns:1fr; gap:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10); }
@media (min-width:1024px){ .footer__mid{ grid-template-columns:1.55fr 1fr; gap:40px; } }
.footer__mid-title{ color:#fff; font-size:13.5px; font-weight:600; margin-bottom:14px; }

.fchips{ display:flex; flex-wrap:wrap; gap:9px; }
.fchips a{
  display:inline-block; padding:7px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82); font-size:12px; font-weight:500; white-space:nowrap;
  transition:all .22s var(--ease);
}
.fchips a:hover{ background:var(--gold); border-color:var(--gold); color:#3B2E06; transform:translateY(-2px); }

.fcalcs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .fcalcs{ grid-template-columns:repeat(4,1fr); } }
.fcalcs a{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:16px 8px; text-align:center;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.8);
  font-size:11.5px; line-height:1.35; font-weight:500;
  transition:all .25s var(--ease);
}
.fcalcs svg{ color:#4FC28C; transition:transform .3s var(--spring); }
.fcalcs a:hover{ background:rgba(255,255,255,.09); border-color:rgba(79,194,140,.55); color:#fff; transform:translateY(-3px); }
.fcalcs a:hover svg{ transform:scale(1.12); }

/* ---- disclaimer / fraud notice / trust badges ---- */
/* align-items:start stops the badges stretching to match the tallest box */
.footer__legal{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10); }
@media (min-width:1024px){ .footer__legal{ grid-template-columns:1fr 1fr auto; gap:14px; } }

.fbox{ padding:13px 15px; border-radius:var(--r-sm); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13); }
.fbox h3{
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#fff;
}
.fbox h3 svg{ color:#4FC28C; flex:none; width:14px; height:14px; }
.fbox p{ font-size:11px; line-height:1.62; color:rgba(255,255,255,.7); }
.fbox strong{ color:#fff; font-weight:600; }
.fbox a{ color:var(--gold); font-weight:600; }
.fbox a:hover{ text-decoration:underline; }
.fbox--warn{ background:rgba(212,175,55,.07); border-color:rgba(212,175,55,.42); }
.fbox--warn h3 svg{ color:var(--gold); }

.fbadges{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (min-width:560px){ .fbadges{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px){ .fbadges{ grid-template-columns:repeat(4,74px); } }
.fbadges li{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:10px 5px; text-align:center;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); background:rgba(255,255,255,.04);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.fbadges li:hover{ border-color:rgba(79,194,140,.5); background:rgba(255,255,255,.07); }
.fbadge__ic{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(79,194,140,.5); color:#4FC28C; margin-bottom:1px;
}
.fbadge__ic svg{ width:15px; height:15px; }
.fbadges b{ font-size:10px; font-weight:700; color:#fff; line-height:1.2; }
.fbadges em{ font-style:normal; font-size:8.8px; color:rgba(255,255,255,.58); line-height:1.2; }

/* ---- bottom bar ---- */
.footer__bottom{ border-top:1px solid rgba(255,255,255,.10); margin-top:26px; padding:16px 0 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; }
.footer__legal-links{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.footer__bottom a:hover{ color:var(--gold); }
.footer__made{ display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.6); }
.heart{ color:#E4506A; font-size:12px; }
@media (max-width:767px){
  .footer__bottom{ flex-direction:column; text-align:center; gap:10px; }
  .footer__legal-links{ gap:12px; font-size:11.5px; }
}

/* ===================================================== LEAD CAPTURE === */
/* display lives on :not([hidden]) so the hidden attribute always wins */
.lead{ position:fixed; inset:0; z-index:160; display:none; place-items:center; padding:16px; }
.lead:not([hidden]){ display:grid; }
.lead__backdrop{ position:absolute; inset:0; background:rgba(6,26,17,.62); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:fadeIn .25s var(--ease); }
.lead__panel{
  position:relative; width:100%; max-width:430px; max-height:92vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 40px 100px rgba(0,0,0,.4);
  animation:cmdkIn .34s var(--spring);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cmdkIn{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

.lead__x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-100); color:var(--ink-soft); border:1px solid var(--line); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lead__x:hover{ background:var(--green-700); color:#fff; }

.lead__head{ padding:22px 22px 0; }
.lead__head h2{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.lead__head > p{ margin-top:5px; font-size:12.5px; color:var(--ink-soft); }
.lead__steps{ display:flex; gap:10px; margin:16px 0 9px; }
.lead__steps li{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--ink-soft); transition:color .3s var(--ease); }
.lead__steps li span{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-100); color:var(--ink-soft); font-size:10px; border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.lead__steps li.is-on{ color:var(--accent); }
.lead__steps li.is-on span{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.lead__steps li.is-done span{ background:var(--green-500); border-color:var(--green-500); color:#fff; }
.lead__bar{ height:3px; border-radius:99px; background:var(--line); overflow:hidden; }
.lead__bar i{ display:block; height:100%; width:33%; border-radius:99px; background:linear-gradient(90deg,var(--green-700),var(--green-500)); transition:width .4s var(--ease); }

.lead__form{ padding:18px 22px 22px; }
.lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead__step{ border:0; display:flex; flex-direction:column; gap:12px; animation:leadIn .3s var(--ease); }
@keyframes leadIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }

.lead__field{ position:relative; display:flex; flex-direction:column; gap:5px; }
.lead__field > span{ font-size:11.5px; font-weight:600; color:var(--ink-soft); }
.lead__field i{ position:absolute; left:12px; bottom:11px; font-style:normal; font-size:13px; font-weight:700; color:var(--accent); pointer-events:none; }
.lead__field input, .lead__field select{
  width:100%; padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  font-family:inherit; font-size:14px; font-weight:600; outline:0;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.lead__field i ~ input{ padding-left:32px; }
.lead__field input:focus, .lead__field select:focus{ border-color:var(--accent-2); background:var(--surface); }
.lead__field input.is-bad, .lead__field select.is-bad{ border-color:#D9534F; }
.lead__hint{ font-size:10.8px; line-height:1.55; color:var(--ink-soft); }

.lead__msg{ margin-top:12px; font-size:11.8px; min-height:16px; }
.lead__msg.ok{ color:var(--accent); }
.lead__msg.err{ color:#D9534F; }
.lead__actions{ display:flex; gap:9px; margin-top:14px; }
.lead__actions .btn--ghost{ flex:none; }
.lead__legal{ margin-top:12px; font-size:10px; line-height:1.6; color:var(--ink-soft); }
.lead__legal a{ color:var(--accent); font-weight:600; }

.lead__done{ padding:34px 24px 26px; text-align:center; }
.lead__tick{
  width:58px; height:58px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff;
  box-shadow:0 12px 30px rgba(31,138,91,.36);
}
.lead__done h3{ font-size:18px; font-weight:700; }
.lead__done > p{ margin-top:7px; font-size:13px; color:var(--ink-soft); }
.lead__done-note{ margin:14px 0 18px!important; padding:11px 13px; border-radius:var(--r-sm); background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.4); font-size:10.8px!important; line-height:1.6; }
.lead__done-note a{ color:var(--accent); font-weight:600; }

@media (max-width:479px){
  .lead__panel{ max-height:94vh; }
  .lead__head{ padding:18px 16px 0; }
  .lead__form{ padding:16px; }
  .lead__steps li{ font-size:10px; }
}

/* ================================================== FLOATING ELEMENTS === */
.to-top{
  position:fixed; right:20px; bottom:88px; z-index:70;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--green-700),var(--green-500)); color:#fff; border:0; cursor:pointer;
  box-shadow:0 12px 30px rgba(14,95,59,.34);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:all .32s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ transform:translateY(-4px); }
.to-top svg{ width:20px; height:20px; }

.wa-fab{
  position:fixed; right:20px; bottom:22px; z-index:70;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,#38D06B,#1FA855); color:#fff;
  box-shadow:0 14px 34px rgba(31,168,85,.44);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease);
}
.wa-fab:hover{ transform:scale(1.09) rotate(-6deg); box-shadow:0 20px 46px rgba(31,168,85,.56); }
.wa-fab svg{ width:30px; height:30px; position:relative; z-index:2; }
.wa-fab__pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(56,208,107,.6); animation:waPulse 2.6s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.75; } 100%{ transform:scale(1.75); opacity:0; } }

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  display:none; align-items:center; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--header-glass); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(14,95,59,.12);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.mobile-bar.is-visible{ transform:none; }
.mobile-bar__call{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--accent); font-size:13.5px; font-weight:600; flex:none; }
.mobile-bar__call svg{ width:17px; height:17px; }
.mobile-bar__apply{ flex:1; justify-content:center; }

/* ============================================================= REVEAL === */
/* Everything below is scoped to .js (set by the inline head script). Without
   JS — or if JS throws before the reveal module runs — content stays visible
   instead of being stuck at opacity:0. Never hide content JS must un-hide. */
.js [data-reveal]{ opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.js [data-reveal="up"]{ transform:translateY(34px); }
.js [data-reveal="left"]{ transform:translateX(-34px); }
.js [data-reveal="right"]{ transform:translateX(34px); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
/* children stagger inside a revealed grid */
.js [data-stagger] > *{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-stagger].is-in > *{ opacity:1; transform:none; }

/* ========================================================= RESPONSIVE === */
@media (max-width:1279px){
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .footer__news{ grid-column:span 2; }
}
@media (max-width:1023px){
  .illus{ height:470px; max-width:520px; margin:0 auto; }
  .float-card--a{ left:2%; } .float-card--b{ left:0; } .float-card--c{ left:4%; }
  .trust{ grid-template-columns:repeat(3,1fr); gap:18px 0; padding:24px 12px; }
  .trust__item:nth-child(3n+1)::before{ display:none; }
  .tcard{ flex:0 0 calc((100% - 16px)/2); }
  .cta__inner{ grid-template-columns:1fr; text-align:center; }
  .cta__copy{ max-width:640px; margin:0 auto; }
  .cta__pills, .cta__actions, .cta__buttons, .cta__contact{ justify-content:center; align-items:center; }
  .cta__art{ display:none; }
  .why-list{ max-width:100%; }
  .why-card__shield{ opacity:.35; }
}
@media (max-width:767px){
  .section{ padding:40px 0; }
  .hero__title{ font-size:36px; }
  .hero__desc{ max-width:none; }
  .illus{ height:410px; }
  .phone{ width:180px; height:360px; }
  .float-card--a{ left:-2%; top:8%; } .float-card--b{ left:-4%; top:34%; } .float-card--c{ left:-2%; top:60%; }
  .float-card{ padding:7px 10px; }
  .trust{ grid-template-columns:repeat(2,1fr); }
  .trust__item::before{ display:none!important; }
  .trust__item{ justify-content:flex-start; }
  /* city-grid columns are set near .city-grid, with a max-width cap */
  .city-box{ padding:18px 16px; }
  .tcard{ flex:0 0 100%; }
  .tslider, .marquee-wrap{ padding:0 34px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand, .footer__news{ grid-column:span 2; }
  .footer__about{ max-width:none; }
  .hero__dots{ display:none; }
  .emi-result{ flex-direction:row; }
  /* make room for the sticky action bar */
  .mobile-bar{ display:flex; }
  .wa-fab{ bottom:82px; }
  .to-top{ bottom:146px; }
  .toasts{ bottom:148px; }
  body{ padding-bottom:70px; }
  .search-tags{ gap:7px; }
}
/* phones: the four data-heavy sections get an extra pass so nothing feels bulky */
@media (max-width:639px){
  .saver__inputs{ padding:18px 15px; }
  .saver__out{ padding:18px 15px; }
  .saver__amt{ font-size:27px; }
  .saver__note{ font-size:10.5px; min-height:0; }
  .elig__head{ padding:15px 15px 11px; gap:10px; }
  .elig__ic{ width:30px; height:30px; min-width:30px; border-radius:10px; }
  .elig__ic svg{ width:16px; height:16px; }
  .elig__head h3{ font-size:14px; }
  .elig__rows{ padding:0 15px 14px; }
  .elig__rows > div{ font-size:12px; padding:8px 0; }
  .doc{ padding:14px 15px; }
  .doc__ic{ width:30px; height:30px; border-radius:10px; margin-bottom:9px; }
  .doc__ic svg{ width:16px; height:16px; }
  .doc h3{ font-size:13px; }
  .doc li{ font-size:11.4px; }
  .cmp{ font-size:12px; min-width:620px; }
  .cmp thead th, .cmp th[scope="row"], .cmp td{ padding:10px 12px; }
  .cmp__cta{ padding:5px 11px; font-size:11.5px; }
}

@media (max-width:479px){
  .hero__title{ font-size:31px; }
  .illus{ height:360px; }
  .phone{ width:158px; height:318px; }
  .phone__amount{ font-size:19px; }
  .float-card strong{ font-size:10.5px; }
  /* city-grid columns are set near .city-grid, with a max-width cap */
  .trust{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__brand, .footer__news{ grid-column:span 1; }
  .glass-card{ padding:20px 16px; }
  .emi-result__value{ font-size:25px; }
  .donut{ width:62px; height:62px; }
}

/* ========================================================== UTILITIES ===
   The exact 61 utility classes this page uses, hand-written to replace the
   Tailwind Play CDN (~120 KB of JS that compiled these in the browser).
   Kept last so they out-rank component rules, same as Tailwind's utility layer.
   Breakpoints match Tailwind: sm 640 · md 768 · lg 1024 · xl 1280.
   ======================================================================= */
.antialiased{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.font-sans{ font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }

.relative{ position:relative; }
.grid{ display:grid; }
.flex{ display:flex; }
.hidden{ display:none; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.order-first{ order:-9999; }
.ml-auto{ margin-left:auto; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.w-full{ width:100%; }
.max-w-shell{ max-width:1200px; }
.h-\[76px\]{ height:76px; }
.text-\[12\.5px\]{ font-size:12.5px; }

.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.gap-1{ gap:.25rem; } .gap-2{ gap:.5rem; }  .gap-3{ gap:.75rem; } .gap-4{ gap:1rem; }
.gap-5{ gap:1.25rem; } .gap-6{ gap:1.5rem; } .gap-8{ gap:2rem; }

.mt-2{ margin-top:.5rem; } .mt-6{ margin-top:1.5rem; } .mt-7{ margin-top:1.75rem; }
.-mt-2{ margin-top:-.5rem; }
.mb-5{ margin-bottom:1.25rem; } .mb-6{ margin-bottom:1.5rem; }
.pt-10{ padding-top:2.5rem; } .pb-14{ padding-bottom:3.5rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }

.hover\:text-gold:hover{ color:var(--gold); }

@media (min-width:640px){
  .sm\:gap-3{ gap:.75rem; }
  .sm\:gap-6{ gap:1.5rem; }
  .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:inline-flex{ display:inline-flex; }
  .sm\:px-6{ padding-left:1.5rem; padding-right:1.5rem; }
}
@media (min-width:768px){
  .md\:gap-5{ gap:1.25rem; }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:inline-flex{ display:inline-flex; }
}
@media (min-width:1024px){
  .lg\:flex{ display:flex; }
  .lg\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .lg\:col-span-4{ grid-column:span 4/span 4; }
  .lg\:col-span-8{ grid-column:span 8/span 8; }
  .lg\:order-none{ order:0; }
  .lg\:pt-14{ padding-top:3.5rem; }
  .lg\:pb-20{ padding-bottom:5rem; }
}
@media (min-width:1280px){
  .xl\:flex{ display:flex; }
  .xl\:gap-6{ gap:1.5rem; }
  .xl\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .xl\:grid-cols-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .xl\:hidden{ display:none; }
}

/* ===================================================== REDUCED MOTION === */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  [data-reveal],[data-stagger] > *{ opacity:1!important; transform:none!important; }
  .grain{ display:none; }
}

/* =============================================================== PRINT === */
@media print{
  .topbar,.site-header,.mobile-menu,.to-top,.wa-fab,.mobile-bar,.cta,
  .marquee-wrap,.ts-nav,.marq-nav,.grain,.scroll-progress,.search-drawer,.toasts{ display:none!important; }
  body{ color:#000; background:#fff; padding-bottom:0; }
}