/* ==========================================================================
   UDHYAMI FINTECH — DESIGN SYSTEM
   Brand-locked: Montserrat (display) + Open Sans (body)
   Palette: Cool Steel Gray · Muted Gold · Dark Saturn Blue-Gray · #F5F5F7 base
   Self-hosted CSS (no CDN dependency) for a reliable, premium render.
   ========================================================================== */

:root {
  /* Steel (primary / pillars) */
  --steel-950:#141a23; --steel-900:#1b2330; --steel-850:#212b3a; --steel-800:#28313d;
  --steel-700:#2d3848; --steel-600:#3a475c; --steel-500:#4a5870; --steel-400:#677490;
  --steel-300:#9aa4b6; --steel-200:#c4cbd6; --steel-100:#e7eaf0;
  /* Gold (accent / arrow) */
  --gold-700:#8f6b2e; --gold-600:#a87e37; --gold-500:#be9344; --gold-400:#c9a45c;
  --gold-300:#dcc58e; --gold-100:#f3ecdc;
  /* Reserved — negative figures / legal warnings ONLY (never headers) */
  --crimson:#82142d;
  /* Neutrals / surfaces */
  --paper:#ffffff;
  --bg:#f5f5f7;            /* Apple-like premium base */
  --mist:#eef0f3;
  --line:#e3e6ec;
  --ink:#1a2230;
  --slate:#5a6678;

  --container:1200px;
  --radius:14px; --radius-lg:20px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,26,35,.06), 0 1px 3px rgba(20,26,35,.05);
  --shadow:0 10px 30px -16px rgba(20,30,45,.30);
  --shadow-lg:0 30px 60px -30px rgba(20,30,45,.40);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:'Open Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--steel-900); margin:0; line-height:1.15; font-weight:700; }
h1{ font-size:clamp(2.1rem,4.4vw,3.25rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.01em; font-weight:700; }
h3{ font-size:1.15rem; font-weight:700; }
p{ margin:0; }
/* Body copy never set in Montserrat (brand rule: not for >3 lines). */

.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---- Layout --------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.section{ padding-block:clamp(48px,7vw,88px); }
.section--mist{ background:var(--mist); }
.section--paper{ background:var(--paper); }
.section--steel{ background:var(--steel-900); color:#fff; }
.section--steel h2,.section--steel h3{ color:#fff; }
.center{ text-align:center; }
.lead{ font-size:1.075rem; color:var(--slate); }
.muted{ color:var(--slate); }
.maxw-2{ max-width:640px; } .maxw-3{ max-width:760px; }

.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow--light{ color:var(--gold-300); }
.eyebrow::before{ content:""; width:42px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); }

.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.97rem;
  padding:13px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  transition:transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--gold-600); color:#fff; }
.btn-gold:hover{ background:var(--gold-700); }
.btn-steel{ background:var(--steel-800); color:#fff; }
.btn-steel:hover{ background:var(--steel-900); }
.btn-outline{ border-color:var(--steel-200); color:var(--steel-800); background:transparent; }
.btn-outline:hover{ border-color:var(--gold-500); }
.btn-ghost-light{ border-color:rgba(255,255,255,.25); color:#fff; }
.btn-ghost-light:hover{ border-color:var(--gold-400); }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 28px; font-size:1.02rem; }

/* ---- Utility bar ---------------------------------------------------------- */
.topbar{ background:var(--steel-900); color:var(--steel-100); font-size:.82rem; }
.topbar a{ color:var(--steel-100); }
.topbar a:hover{ color:var(--gold-300); }
.topbar .container{ height:38px; display:flex; align-items:center; justify-content:space-between; }
.topbar .links{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.topbar .sep{ width:1px; height:16px; background:var(--steel-600); }
.topbar strong{ color:#fff; }
@media (max-width:760px){ .topbar .hide-sm{ display:none; } }

/* ---- Header / logo (CRISP, never clipped) -------------------------------- */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.header .bar{ display:flex; align-items:center; gap:26px; height:74px; }
.brand{ display:flex; align-items:center; flex-shrink:0; overflow:visible; }
/* The logo image: height-constrained, width auto, no clipping, crisp scaling */
.brand img{ height:46px; width:auto; max-width:none; display:block;
  image-rendering:-webkit-optimize-contrast; }
@media (max-width:520px){ .brand img{ height:40px; } }

.nav{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.nav a, .nav .navbtn{
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--steel-700);
  padding:9px 13px; border-radius:9px; background:transparent; border:0; display:inline-flex;
  align-items:center; gap:5px; transition:background .15s, color .15s;
}
.nav a:hover, .nav .navbtn:hover{ background:var(--bg); color:var(--steel-900); }
.nav a.is-active{ color:var(--gold-700); }
.has-menu{ position:relative; }
.menu{ position:absolute; left:0; top:100%; padding-top:10px; display:none; min-width:240px; }
.has-menu:hover .menu, .has-menu:focus-within .menu{ display:block; }
.menu-inner{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; }
.menu-inner a{ display:block; width:100%; padding:9px 12px; border-radius:9px; font-size:.92rem; }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.menu-toggle{ margin-left:auto; display:none; background:transparent; border:0; padding:8px; color:var(--steel-800); }
.menu-toggle svg{ width:26px; height:26px; }
@media (max-width:1080px){ .nav, .header-cta{ display:none; } .menu-toggle{ display:inline-flex; } }

.mobile-menu{ display:none; border-top:1px solid var(--line); background:#fff; }
.mobile-menu.open{ display:block; }
.mobile-menu nav{ padding:12px 20px; display:grid; gap:4px; }
.mobile-menu a{ font-family:var(--font-display); font-weight:600; color:var(--steel-700); padding:11px 12px; border-radius:9px; }
.mobile-menu a:hover{ background:var(--bg); }

/* ---- Hero ----------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:
  radial-gradient(60% 70% at 88% -10%, rgba(190,147,68,.10), transparent 60%),
  linear-gradient(180deg,#fff 0%, var(--bg) 100%); }
.hero .container{ padding-block:clamp(44px,6vw,76px); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:32px; } }
.hero h1{ margin-top:18px; color:var(--steel-900); }
.hero h1 .accent{ color:var(--gold-600); }
.hero p.lead{ margin-top:18px; max-width:34em; }
.hero-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-trust{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 26px; color:var(--slate); font-size:.85rem; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg{ width:16px; height:16px; color:var(--gold-600); }

/* Floating form card */
.card-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:26px; }
.card-form .form-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.icon-badge{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:var(--gold-100); color:var(--gold-700); flex-shrink:0; }
.icon-badge svg{ width:21px; height:21px; }

/* ---- Forms ---------------------------------------------------------------- */
.field{ display:grid; gap:6px; }
.field > span{ font-size:.82rem; font-weight:600; color:var(--steel-700); }
.input, select.input, textarea.input{
  width:100%; height:46px; padding:0 13px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font-sans); font-size:.95rem; color:var(--ink); background:#fff; transition:border-color .15s, box-shadow .15s;
}
textarea.input{ height:auto; padding:11px 13px; resize:vertical; }
.input:focus, select.input:focus, textarea.input:focus{ outline:0; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,164,92,.18); }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .form-grid-2{ grid-template-columns:1fr; } }
.form-note{ font-size:.72rem; color:var(--slate); line-height:1.5; }
.field-error{ color:var(--crimson); font-size:.76rem; font-weight:600; }
.consent{ display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--slate); }
.consent input{ margin-top:3px; }

/* Form status messages */
.form-status{ border-radius:10px; padding:12px 14px; font-size:.9rem; display:none; }
.form-status.show{ display:block; }
.form-status.is-success{ background:#eaf6ee; color:#1c6b3a; border:1px solid #bfe3cb; }
.form-status.is-error{ background:#fbeaee; color:var(--crimson); border:1px solid #f0c2cc; }

/* ---- Cards ---------------------------------------------------------------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.card-link:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-400); }
.card .ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px;
  background:var(--steel-800); color:var(--gold-400); }
.card .ico svg{ width:24px; height:24px; }
.card h3{ margin-top:16px; color:var(--steel-900); }
.card p{ margin-top:7px; color:var(--slate); font-size:.92rem; }
.card .more{ margin-top:15px; display:inline-flex; align-items:center; gap:6px; color:var(--gold-700); font-weight:600; font-size:.9rem; font-family:var(--font-display); }
.card .more svg{ width:15px; height:15px; }

/* ---- Stat ribbon (base-plane motif) -------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.stats > div{ padding:26px 18px; text-align:center; border-right:1px solid var(--line); }
.stats > div:last-child{ border-right:0; }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:2.3rem; color:var(--steel-900); }
.stat-num.gold{ color:var(--gold-600); }
.stat-label{ font-size:.82rem; color:var(--slate); margin-top:4px; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } .stats > div:nth-child(2){ border-right:0; } .stats > div:nth-child(1),.stats>div:nth-child(2){ border-bottom:1px solid var(--line);} }

/* ---- Steps ---------------------------------------------------------------- */
.step{ background:var(--steel-850); border:1px solid var(--steel-700); border-radius:var(--radius); padding:24px; }
.step .n{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--gold-400); }
.step h3{ color:#fff; margin-top:4px; } .step p{ color:var(--steel-300); margin-top:6px; font-size:.9rem; }

/* ---- Feature list --------------------------------------------------------- */
.feature{ display:flex; gap:15px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.feature .ico{ flex-shrink:0; width:44px; height:44px; border-radius:11px; background:var(--gold-100); color:var(--gold-700); display:grid; place-items:center; }
.feature .ico svg{ width:22px; height:22px; }
.feature h3{ color:var(--steel-900); } .feature p{ color:var(--slate); font-size:.9rem; margin-top:4px; }

/* ---- Testimonials --------------------------------------------------------- */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.stars{ color:var(--gold-500); letter-spacing:2px; }
.quote blockquote{ margin:12px 0 0; color:var(--slate); }
.quote figcaption{ margin-top:18px; display:flex; align-items:center; gap:12px; }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--steel-800); color:var(--gold-300);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; }
.quote .name{ font-family:var(--font-display); font-weight:600; color:var(--steel-900); display:block; }
.quote .role{ font-size:.82rem; color:var(--slate); }

/* ---- FAQ / accordion ------------------------------------------------------ */
.faq{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:600; color:var(--steel-900); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ flex-shrink:0; color:var(--gold-600); transition:transform .2s; width:20px; height:20px; }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .answer{ padding:0 0 18px; color:var(--slate); }

/* ---- Marquee (partners) --------------------------------------------------- */
.partners-strip{ border-block:1px solid var(--line); background:#fff; overflow:hidden; }
.partners-strip .row{ display:flex; align-items:center; gap:24px; padding-block:18px; }
.marquee{ overflow:hidden; flex:1; }
.marquee .track{ display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite; }
.marquee .track span{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--steel-300); white-space:nowrap; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; } }

/* ---- Calculators ---------------------------------------------------------- */
.calc{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; }
@media (max-width:920px){ .calc{ grid-template-columns:1fr; } }
.calc-panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); }
.slider-row{ margin-bottom:22px; }
.slider-row .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.slider-row label{ font-weight:600; color:var(--steel-700); font-size:.9rem; }
.slider-val{ font-family:var(--font-display); font-weight:700; color:var(--steel-900); }
.slider-val .unit{ color:var(--slate); font-weight:600; font-size:.85em; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--steel-100); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--gold-500); border:3px solid #fff; box-shadow:0 0 0 1px var(--gold-500),0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--gold-500); border:3px solid #fff; box-shadow:0 0 0 1px var(--gold-500); cursor:pointer; }
.result-card{ background:var(--steel-900); color:#fff; border-radius:var(--radius-lg); padding:26px; }
.result-emi{ text-align:center; padding-bottom:18px; border-bottom:1px solid var(--steel-700); }
.result-emi .label{ color:var(--steel-300); font-size:.82rem; }
.result-emi .value{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--gold-300); margin-top:4px; }
.result-rows{ display:grid; gap:1px; margin-top:18px; }
.result-rows .r{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--steel-800); font-size:.92rem; }
.result-rows .r:last-child{ border-bottom:0; }
.result-rows .r span:first-child{ color:var(--steel-300); }
.result-rows .r span:last-child{ font-family:var(--font-display); font-weight:600; }
.result-rows .r .neg{ color:#f0a9b7; } /* crimson-tint for cost figures on dark */

/* Amortization / data table (numbers right-aligned per brand rules) */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.data{ width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th, table.data td{ padding:11px 14px; border-bottom:1px solid var(--line); }
table.data th{ background:var(--bg); font-family:var(--font-display); font-weight:600; color:var(--steel-700); text-align:left; }
table.data td.num, table.data th.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.data tr:last-child td{ border-bottom:0; }

/* ---- Credit score gauge --------------------------------------------------- */
.gauge{ text-align:center; }
.gauge .score{ font-family:var(--font-display); font-weight:800; font-size:3rem; }
.gauge .band{ display:inline-block; margin-top:6px; padding:5px 14px; border-radius:999px; font-weight:600; font-size:.82rem; }
.band-excellent{ background:#e7f6ec; color:#1c6b3a; } .band-good{ background:#eaf2fb; color:#1f5fae; }
.band-fair{ background:#fef3e2; color:#9a6b16; } .band-poor{ background:#fbeaee; color:var(--crimson); }
.dummy-flag{ font-size:.72rem; color:var(--slate); margin-top:8px; }

/* ---- Page hero (interior pages) ------------------------------------------ */
.page-hero{ background:linear-gradient(180deg,#fff,var(--bg)); border-bottom:1px solid var(--line); }
.page-hero .container{ padding-block:clamp(36px,5vw,60px); }
.breadcrumb{ font-size:.82rem; color:var(--slate); margin-bottom:12px; }
.breadcrumb a:hover{ color:var(--gold-700); }

/* ---- Banner CTA ----------------------------------------------------------- */
.banner{ background:var(--gold-600); }
.banner .container{ padding-block:46px; display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; }
.banner h2{ color:var(--steel-950); } .banner p{ color:rgba(20,26,35,.78); margin-top:4px; }
.banner .actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- Footer --------------------------------------------------------------- */
.footer{ background:var(--steel-950); color:var(--steel-300); }
.footer .top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-block:54px; }
@media (max-width:900px){ .footer .top{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:520px){ .footer .top{ grid-template-columns:1fr; } }
.footer img.flog{ height:96px; width:auto; }
.footer h4{ color:#fff; font-size:.85rem; letter-spacing:.04em; font-family:var(--font-display); }
.footer ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.footer a:hover{ color:var(--gold-300); }
.footer .small{ font-size:.88rem; line-height:1.7; }
.footer .bottom{ border-top:1px solid var(--steel-800); }
.footer .bottom .container{ padding-block:20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:.8rem; }
.social{ display:flex; gap:14px; } .social a{ color:var(--steel-300); } .social a:hover{ color:var(--gold-300); } .social svg{ width:20px; height:20px; }

/* ---- Floating action elements -------------------------------------------- */
.float-stack{ position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; gap:12px; }
.fab{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-lg); color:#fff; }
.fab svg{ width:26px; height:26px; }
.fab-wa{ background:#25d366; } .fab-call{ background:var(--steel-800); }
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  background:#fff; border-top:1px solid var(--line); padding:10px 14px; gap:10px; box-shadow:0 -8px 24px -16px rgba(0,0,0,.4); }
.sticky-cta .btn{ flex:1; }
@media (max-width:760px){ .sticky-cta{ display:flex; } .float-stack{ bottom:74px; } }

/* ---- Misc ----------------------------------------------------------------- */
.note{ font-size:.74rem; color:var(--slate); }
.divider-gold{ height:3px; width:54px; border-radius:2px; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.chiprow{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--steel-700); }
ul.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
ul.ticks li{ display:flex; gap:10px; color:var(--slate); }
ul.ticks svg{ flex-shrink:0; width:20px; height:20px; color:var(--gold-600); margin-top:2px; }

/* ==========================================================================
   v2 UPDATES — colorful 3D/embossed icons · images · modal · careers
   ========================================================================== */

/* ---- Colorful, 3D / embossed icon tiles --------------------------------- */
:root{ --ic-1:#cba85f; --ic-2:#a87e37; --ic-shadow:rgba(120,90,30,.45); }

.card .ico, .feature .ico, .icon-badge, .step-ico{
  position:relative;
  border-radius:16px;
  background:linear-gradient(155deg, var(--ic-1), var(--ic-2));
  color:#fff;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.5),
    inset 0 -4px 7px rgba(0,0,0,.22),
    0 12px 20px -10px var(--ic-shadow);
  overflow:hidden;
}
/* subtle glossy top sheen for the embossed look */
.card .ico::after, .feature .ico::after, .icon-badge::after{
  content:""; position:absolute; inset:0 0 50% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
.card .ico svg, .feature .ico svg, .icon-badge svg{
  position:relative; z-index:1;
  filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.35));
  stroke-width:1.9;
}
.icon-badge{ background:linear-gradient(155deg,#d8b873,#b7892f); }

/* Colorful variety: cycle premium hues across any icons inside a grid */
.grid > *:nth-child(8n+1) .ico{ --ic-1:#5b8def; --ic-2:#3160c8; --ic-shadow:rgba(40,80,180,.45); }
.grid > *:nth-child(8n+2) .ico{ --ic-1:#3ec9b0; --ic-2:#1f9e87; --ic-shadow:rgba(20,140,120,.45); }
.grid > *:nth-child(8n+3) .ico{ --ic-1:#cba85f; --ic-2:#a87e37; --ic-shadow:rgba(120,90,30,.45); }
.grid > *:nth-child(8n+4) .ico{ --ic-1:#8b7be8; --ic-2:#5d49c9; --ic-shadow:rgba(80,60,180,.45); }
.grid > *:nth-child(8n+5) .ico{ --ic-1:#4fb6e6; --ic-2:#2484c0; --ic-shadow:rgba(30,120,180,.45); }
.grid > *:nth-child(8n+6) .ico{ --ic-1:#5cc77a; --ic-2:#2f9b53; --ic-shadow:rgba(30,140,70,.45); }
.grid > *:nth-child(8n+7) .ico{ --ic-1:#e89a5c; --ic-2:#cf7a2f; --ic-shadow:rgba(180,100,30,.45); }
.grid > *:nth-child(8n+8) .ico{ --ic-1:#e07595; --ic-2:#bd476c; --ic-shadow:rgba(170,60,90,.4); }

/* slightly larger, rounder tiles read better in 3D */
.card .ico{ width:54px; height:54px; }
.feature .ico{ width:50px; height:50px; }
.card .ico svg, .feature .ico svg{ width:26px; height:26px; }

/* ---- Real-image frames -------------------------------------------------- */
.media-frame{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg, var(--steel-100), var(--mist));
  aspect-ratio:3 / 2;
}
.media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-frame__badge{
  position:absolute; left:14px; bottom:14px; display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-radius:999px; padding:8px 14px; box-shadow:var(--shadow);
  font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--steel-800);
}
.media-frame__badge svg{ width:16px; height:16px; color:var(--gold-600); }
.media-frame.media-fallback img{ display:none; }
.media-frame.media-fallback::after{
  content:"Image placeholder — replace per IMAGE-MANIFEST"; position:absolute; inset:0;
  display:grid; place-items:center; text-align:center; padding:20px;
  color:var(--slate); font-size:.82rem;
}
.media-frame--wide{ aspect-ratio:16 / 9; }

/* hero accent image (home) */
.hero-media{ position:relative; }
.hero-media .media-frame{ aspect-ratio:4 / 3; }

/* ---- Chips (sizes / variants used by careers) --------------------------- */
.chip-sm{ padding:5px 11px; font-size:.74rem; }
.chip-gold{ background:var(--gold-100); border-color:var(--gold-300); color:var(--gold-700); }

/* ---- Careers ------------------------------------------------------------ */
.career-card{ display:flex; flex-direction:column; }
.career-card .btn{ margin-top:auto; }
.career-subhead{
  font-family:var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--steel-700); margin:16px 0 10px;
}
.ticks-sm li{ font-size:.86rem; gap:8px; }
.ticks-sm svg{ width:17px; height:17px; }

/* ---- Modal (Apply Now) -------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
.modal.open{ display:block; }
.modal__overlay{ position:absolute; inset:0; background:rgba(16,22,30,.55); backdrop-filter:blur(3px); }
.modal__dialog{
  position:relative; max-width:560px; margin:6vh auto; background:#fff;
  border-radius:20px; box-shadow:var(--shadow-lg); padding:26px 26px 28px;
  max-height:88vh; overflow:auto; animation:modalIn .25s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.modal__close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--steel-700); display:grid; place-items:center;
}
.modal__close:hover{ border-color:var(--gold-500); color:var(--steel-900); }
.modal__close svg{ width:18px; height:18px; }
.modal__head{ display:flex; gap:12px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.modal__head .icon-badge{ width:46px; height:46px; flex-shrink:0; }
.modal__body{ margin-top:16px; }
@media (max-width:560px){ .modal__dialog{ margin:0; min-height:100vh; border-radius:0; } }

/* ---- Résumé uploader ---------------------------------------------------- */
.uploader__box{
  display:flex; gap:10px; align-items:center; cursor:pointer;
  border:1.5px dashed var(--steel-200); border-radius:10px; padding:13px 14px;
  color:var(--slate); transition:border-color .15s, background .15s, color .15s;
}
.uploader__box:hover{ border-color:var(--gold-500); color:var(--steel-700); }
.uploader__box.has-file{ border-style:solid; border-color:var(--gold-500); background:var(--gold-100); color:var(--steel-800); }
.uploader__box svg{ width:22px; height:22px; flex-shrink:0; color:var(--gold-600); }
.uploader__text{ font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* error state for inputs (shared) */
.input.has-error{ border-color:var(--crimson); box-shadow:0 0 0 3px rgba(130,20,45,.12); }

/* ---- Footer social icons (high-contrast brand tiles) -------------------- */
.footer .social{ display:flex; gap:12px; align-items:center; }
.footer .social .soc{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color:#fff; box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
  transition:transform .18s var(--ease), box-shadow .18s, filter .18s;
}
.footer .social .soc svg{ width:21px; height:21px; }
.footer .social .soc:hover{ transform:translateY(-3px); box-shadow:0 12px 22px -8px rgba(0,0,0,.7); filter:saturate(1.15); color:#fff; }
.footer .social .soc:focus-visible{ outline:3px solid var(--gold-400); outline-offset:2px; }

.soc-fb{ background:#1877F2; }
.soc-li{ background:#0A66C2; }
.soc-ig{ background:radial-gradient(circle at 30% 110%, #FEDA77 0%, #F58529 25%, #DD2A7B 55%, #8134AF 80%, #515BD4 100%); }
.soc-gb{ background:#ffffff; box-shadow:0 6px 14px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.05); }
.soc-gb:hover{ background:#ffffff; }

/* ---- Footer logo on a light plate (keeps full-colour logo legible on dark) ---- */
.footer img.flog{
  height:78px; width:auto; display:inline-block; box-sizing:content-box;
  background:#ffffff;
  padding:18px 24px;
  border-radius:16px;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.05);
}

/* ==========================================================================
   v3 UPDATES — multicolor icons · drawer · EMI/ROI · partners · logos · admin
   ========================================================================== */

/* ---- #18 Multicolor icons on light embossed tiles ----------------------- */
.card .ico, .feature .ico, .icon-badge, .step-ico{
  background:linear-gradient(155deg,#ffffff,#eaeef4);
  color:var(--steel-700);
  border:1px solid rgba(20,30,45,.06);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -3px 6px rgba(20,30,45,.10),
    0 12px 22px -12px rgba(20,30,45,.35);
}
.icon-badge{ background:linear-gradient(155deg,#ffffff,#f3ebd6); }
.card .ico::after, .feature .ico::after, .icon-badge::after{ display:none; }
.card .ico svg, .feature .ico svg, .icon-badge svg{
  color:var(--steel-700);
  filter:drop-shadow(0 1px 1px rgba(20,30,45,.16));
}

/* ---- #2 Hero logo (big) ------------------------------------------------- */
.hero-logo{ height:62px; width:auto; display:block; margin-bottom:18px; }
@media (min-width:768px){ .hero-logo{ height:78px; } }

/* ---- #3 Footer logo — dark-optimized, larger, no plate ------------------ */
.footer img.flog, .footer img.flog-dark{
  height:118px; width:auto; display:inline-block; box-sizing:content-box;
  background:none; padding:0; border-radius:0; box-shadow:none;
}

/* ---- #19 Partner logos + names ------------------------------------------ */
.partners-strip .track{ display:flex; align-items:center; gap:38px; }
.partner{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; color:var(--steel-700); font-size:.95rem; }
.partner-logo{ width:36px; height:36px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(150deg,#46587a,#2f3d54); color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.02em;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3), 0 5px 12px -5px rgba(20,30,45,.6); }

/* ---- #4 Credit-score drawer (right edge) -------------------------------- */
.cs-drawer{ position:fixed; inset:0 0 0 auto; z-index:70; pointer-events:none; }
.cs-tab{ position:fixed; right:0; top:36%; pointer-events:auto; cursor:pointer; border:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-700)); color:#fff;
  border-radius:12px 0 0 12px; padding:14px 9px;
  box-shadow:-5px 6px 16px -6px rgba(0,0,0,.55);
  font-family:var(--font-display); font-weight:600; letter-spacing:.03em; transition:right .3s var(--ease); }
.cs-tab svg{ width:20px; height:20px; }
.cs-tab__label{ writing-mode:vertical-rl; }
.cs-panel{ position:fixed; right:-380px; top:50%; transform:translateY(-50%);
  width:340px; max-width:86vw; background:#fff; border-radius:16px 0 0 16px;
  box-shadow:-18px 0 44px -18px rgba(0,0,0,.45); padding:24px 22px; pointer-events:auto;
  transition:right .3s var(--ease); }
.cs-drawer.open .cs-panel{ right:0; }
.cs-drawer.open .cs-tab{ right:340px; }
.cs-panel__close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line); background:#fff; color:var(--steel-700); display:grid; place-items:center; cursor:pointer; }
.cs-panel__close svg{ width:16px; height:16px; }
.cs-panel .icon-badge{ width:48px; height:48px; }
@media (max-width:560px){
  .cs-tab__label{ display:none; }
  .cs-drawer.open .cs-tab{ right:86vw; }
}

/* ---- #6 Flash the enquiry form ------------------------------------------ */
@keyframes ufFlash{
  0%{ box-shadow:0 0 0 0 rgba(199,154,62,0); }
  18%{ box-shadow:0 0 0 7px rgba(199,154,62,.38); }
  100%{ box-shadow:0 0 0 0 rgba(199,154,62,0); }
}
.card-form.flash{ animation:ufFlash 1.3s ease-out 1; border-color:var(--gold-500) !important; }

/* ---- #10 EMI: number boxes, donut, schedule toggle, disclaimer ---------- */
.num-wrap{ display:inline-flex; align-items:center; gap:3px; background:#fff;
  border:1.5px solid var(--steel-200); border-radius:9px; padding:4px 9px; }
.num-wrap:focus-within{ border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(199,154,62,.14); }
.num-box{ width:92px; border:0; outline:0; background:transparent; text-align:right;
  font-family:var(--font-display); font-weight:700; color:var(--steel-900); font-size:.95rem; }
.num-pfx, .num-sfx{ color:var(--slate); font-weight:600; font-size:.85rem; }

.emi-split{ display:flex; align-items:center; gap:20px; margin-top:20px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:18px; }
.donut{ --c-principal:#4fb6e6; --c-interest:#cba85f;
  width:118px; height:118px; border-radius:50%; flex-shrink:0; position:relative;
  background:conic-gradient(var(--c-interest) 0 100%); }
.donut-hole{ position:absolute; inset:15px; border-radius:50%; background:var(--steel-900);
  display:grid; place-items:center; text-align:center; line-height:1.2; }
.donut-cap{ display:block; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-300); }
.donut-legend{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.donut-legend .dot{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:8px; }
.dot-principal{ background:#4fb6e6; } .dot-interest{ background:#cba85f; }
.donut-legend b{ margin-left:6px; }

.sched-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:30px; flex-wrap:wrap; }
.seg{ display:inline-flex; background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px; }
.seg label{ display:inline-flex; align-items:center; padding:7px 15px; border-radius:7px; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--slate); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label:has(input:checked){ background:#fff; color:var(--steel-900); box-shadow:var(--shadow); }

.calc-disclaimer{ margin-top:18px; font-size:.82rem; color:var(--slate);
  background:var(--mist); border:1px dashed var(--line); border-radius:10px; padding:12px 14px; }

/* ---- #14 ROI risk indicator --------------------------------------------- */
.risk-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.risk-label{ font-weight:600; color:var(--steel-700); }
.risk-badge{ padding:4px 12px; border-radius:999px; font-weight:700; font-size:.78rem; border:1.5px solid var(--line); color:var(--steel-700); }
.risk-low{ color:#1c6b3a; border-color:#9bd3af; background:#e9f6ee; }
.risk-moderate{ color:#9a6b16; border-color:#e3c489; background:#fbf3e2; }
.risk-high{ color:#a3242f; border-color:#e2a9b2; background:#fbe9ec; }
.risk-note{ font-size:.82rem; }

/* ---- #12 Read-more ------------------------------------------------------ */
.readmore{ background:none; border:0; color:var(--gold-700); font-weight:600; font-family:var(--font-display);
  cursor:pointer; padding:8px 0; display:inline-flex; align-items:center; gap:6px; }
.readmore svg{ width:16px; height:16px; transition:transform .2s; }
.readmore[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* ---- #13 Glossary ------------------------------------------------------- */
.glossary summary{ font-weight:600; }

/* ---- #17 YouTube tile --------------------------------------------------- */
.soc-yt{ background:#FF0000; }

/* ---- #20 Admin manual add-lead form ------------------------------------- */
.add-lead{ background:var(--mist); border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:16px; }
.add-lead-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .add-lead-grid{ grid-template-columns:1fr; } }

/* ---- #19 Partner real-logo tiles (override) ----------------------------- */
.partner-logo{
  width:42px; height:42px; border-radius:9px; flex-shrink:0; position:relative; overflow:hidden;
  display:grid; place-items:center;
  background:#ffffff; border:1px solid var(--line);
  box-shadow:0 4px 10px -5px rgba(20,30,45,.3);
}
.partner-logo .mono{ font-family:var(--font-display); font-weight:700; color:#46587a; font-size:.82rem; }
.partner-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:5px; background:#fff; }