/* ============================================================
   Solvifin shared design system v2
   Bold fintech-app language: near-black glowing hero sections,
   chunky rounded type, glossy pill buttons, overlapping white
   cards, ghost-numeral step cards, warm peach contrast banners —
   in Solvifin's green brand, not a literal copy of any reference.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f7f9f8; --card:#ffffff;
  --ink:#0e1512; --body:#48534d; --muted:#71827a;
  --green:#0EA968; --green2:#12C77D; --green-deep:#075c3c; --green-btn:#0a7a4c;
  --mint:#e3f7ec; --mint2:#d3f3e2; --lime:#9bd34f; --peach:#fdece0; --orange:#ef7d1f;
  --line:#e6ebe8; --shadow-sm:0 1px 2px rgba(10,30,20,.05);
  --shadow:0 1px 2px rgba(10,30,20,.05),0 14px 40px rgba(10,30,20,.08);
  --shadow-lg:0 30px 70px -24px rgba(5,15,10,.45);
  --radius-sm:14px; --radius:20px; --radius-lg:28px; --pill:999px;
  --black:#050706; --black2:#0d1210;
  --font-head:'Baloo 2','Poppins',-apple-system,sans-serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);color:var(--ink);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
html{scroll-behavior:smooth}
h1,h2,h3{font-family:var(--font-head)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-nar{max-width:800px;margin:0 auto;padding:0 24px}
.green{color:var(--green)}

/* ---- buttons (glossy pill, diagonal shine) ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font:inherit;font-weight:700;border-radius:var(--pill);transition:.15s;overflow:hidden}
.btn-primary{background:linear-gradient(180deg,var(--green2),var(--green-btn));color:#fff;padding:16px 28px;box-shadow:0 10px 24px rgba(10,122,76,.32)}
.btn-primary::after{content:"";position:absolute;top:0;left:-30%;width:35%;height:100%;background:rgba(255,255,255,.22);transform:skewX(-18deg)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff;color:var(--ink);padding:14px 24px;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--green)}
.btn-light{background:#fff;color:var(--black)}
.btn-light:hover{background:var(--mint2)}
.btn-dark{background:var(--black);color:#fff;padding:15px 24px}
.btn-dark:hover{background:#000}
.btn-arrow{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.btn-ghost .btn-arrow{background:var(--mint);color:var(--green)}
.btn-dark .btn-arrow{background:rgba(255,255,255,.16)}

/* ---- promo bar ---- */
.promo-bar{background:var(--black);color:#d7fbe6;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.2px;padding:9px 16px}
.promo-bar b{color:var(--green2)}
.promo-bar a{text-decoration:underline}

/* ---- nav ---- */
header.nav2{position:sticky;top:0;z-index:30;background:rgba(247,249,248,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(230,235,232,.8)}
.nav2-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:-.2px}
.logo .mark{width:32px;height:32px;display:grid;place-items:center;flex:none}
.navlinks2{display:flex;gap:34px;align-items:center}
.navlinks2 a{font-size:14px;font-weight:600;color:#3c4a41;display:flex;align-items:center;gap:5px}
.navlinks2 a.active,.navlinks2 a:hover{color:var(--green)}
.navdrop{position:relative}
.navdrop-btn{appearance:none;background:none;border:0;font:inherit;font-size:14px;font-weight:600;color:#3c4a41;display:flex;align-items:center;gap:5px;cursor:pointer;padding:0}
.navdrop-btn:hover{color:var(--green)}
.navdrop .caret{font-size:10px;transition:transform .15s}
.navdrop.open .caret{transform:rotate(180deg)}
.navdrop-menu{display:none;position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:190px;z-index:35}
.navdrop.open .navdrop-menu{display:block}
.navdrop-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:#3c4a41;white-space:nowrap}
.navdrop-menu a:hover{background:var(--mint);color:var(--green)}
.nav2-cta{display:flex;align-items:center;gap:14px}
.nav2-cta .btn-primary{padding:11px 20px;font-size:14px}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;place-items:center;padding:0}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--green);margin:0 auto;transition:.2s}
.menu-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mmenu2{display:none;position:sticky;top:78px;z-index:29;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(10,30,20,.1)}
.mmenu2.show{display:block}
.mmenu2 a{display:block;padding:15px 26px;font-weight:700;font-size:15px;color:var(--green);border-top:1px solid var(--line)}
.mmenu2 a:active{background:var(--mint)}
@media(max-width:960px){
  .navlinks2{display:none}.menu-btn{display:grid}
  .nav2-cta .btn-primary{display:none}
}

/* ---- page kicker / section intro ---- */
.pagetop{padding:56px 0 8px;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--green)}
.intro{max-width:640px;margin:14px auto 0;text-align:center}
.intro p.lead-sm{font-size:16px;color:var(--muted);margin:0}
.intro h2.big{font-family:var(--font-head);font-size:clamp(26px,3.6vw,40px);letter-spacing:-.5px;line-height:1.2;margin:10px 0 0;font-weight:700}

/* ---- dark glowing hero ---- */
.hero2{padding:22px 0 10px}
.hero-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:580px;display:flex;flex-direction:column;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px),
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(18,199,125,.28), transparent 65%),
    linear-gradient(180deg,#0a0e0c 0%,#050706 70%);
  box-shadow:var(--shadow-lg)}
.hero-topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:26px 34px 0;color:#fff}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;padding:8px 14px;border-radius:var(--pill);text-transform:uppercase;backdrop-filter:blur(4px)}
.hero-body{position:relative;z-index:2;text-align:center;padding:10px 34px 0;color:#fff}
.hero-body h1{font-size:clamp(34px,5.6vw,62px);line-height:1.08;letter-spacing:-.5px;margin:18px auto 14px;font-weight:700;max-width:760px}
.hero-body h1 .lime{color:var(--green2)}
.hero-body p.lead{font-size:17px;color:rgba(255,255,255,.72);max-width:480px;margin:0 auto 30px}
.hero-cta2{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

/* glowing floating orb (approximates the app's 3D coin/wallet renders) */
.hero-orb-stage{position:relative;height:260px;margin:12px auto 0;display:flex;align-items:flex-end;justify-content:center}
.orb-glow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:420px;height:200px;background:radial-gradient(ellipse at center,rgba(18,199,125,.55),transparent 70%);filter:blur(4px)}
.orb-ring{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:260px;height:34px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(18,199,125,.5),transparent 75%)}
.orb{position:relative;z-index:2;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#dffbe9,#12C77D 45%,#075c3c 100%);
  box-shadow:0 0 50px rgba(18,199,125,.55),inset 0 -10px 18px rgba(0,0,0,.25),inset 0 8px 14px rgba(255,255,255,.35);
  display:grid;place-items:center;font-size:44px;color:#075c3c;font-weight:800;font-family:var(--font-head)}
@media(max-width:640px){.hero-frame{min-height:520px;border-radius:22px}.hero-topbar{padding:20px 20px 0}.hero-body{padding:6px 20px 0}.hero-orb-stage{height:200px}.orb{width:92px;height:92px;font-size:34px}}

/* ---- overlap card (white card floating over dark hero, into the section below) ---- */
.overlap-wrap{position:relative;margin-top:-70px;z-index:5;padding:0 24px}
.overlap-card{max-width:900px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.overlap-card .oc-txt h3{margin:0 0 6px;font-size:22px;font-weight:700;font-family:var(--font-head)}
.overlap-card .oc-txt p{margin:0;color:var(--body);font-size:15px}
.overlap-card .oc-txt .amt{color:var(--green-deep);font-weight:800}
.overlap-card .oc-icon{width:64px;height:64px;border-radius:18px;background:var(--mint);display:grid;place-items:center;font-size:28px;flex:none}
@media(max-width:640px){.overlap-wrap{margin-top:-50px}.overlap-card{padding:22px;flex-direction:column;text-align:center}}

/* ---- segment pill row ---- */
.segrow{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:34px 0}
.segpill{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:8px 20px 8px 8px;box-shadow:var(--shadow-sm);font-weight:700;font-size:14.5px;color:var(--ink)}
.segpill .si{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-size:16px}
.segrow-cta{text-align:center;margin-top:6px}

/* ---- ghost-numeral step cards ---- */
.steps-ghost{display:flex;flex-direction:column;gap:22px}
.step-ghost{display:flex;align-items:center;gap:8px}
.step-ghost .gn{font-family:var(--font-head);font-size:96px;font-weight:800;color:var(--line);line-height:1;flex:none;width:110px;text-align:center;user-select:none}
.step-ghost.alt .gn{order:2}
.step-ghost .gcard{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.step-ghost .gcard h4{margin:0 0 6px;font-size:18px;font-weight:700;font-family:var(--font-head)}
.step-ghost .gcard p{margin:0;color:var(--body);font-size:14px;max-width:420px}
.step-ghost .gicon{width:52px;height:52px;border-radius:14px;background:var(--mint);display:grid;place-items:center;font-size:24px;flex:none}
@media(max-width:640px){.step-ghost{gap:0}.step-ghost .gn{width:64px;font-size:56px}.step-ghost .gcard{padding:16px 18px}}

/* ---- EMI calculator (functional slider widget) ---- */
.calc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.calc-head{background:var(--mint);padding:20px 28px;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--green-deep)}
.calc-body{padding:26px 28px 30px}
.calc-row{margin-bottom:22px}
.calc-row:last-of-type{margin-bottom:26px}
.calc-row .cr-top{display:flex;justify-content:space-between;font-size:14.5px;font-weight:600;margin-bottom:10px}
.calc-row .cr-top b{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.calc-row input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:99px;background:var(--line);outline:none}
.calc-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid var(--green);box-shadow:0 2px 8px rgba(10,30,20,.25);cursor:pointer}
.calc-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid var(--green);box-shadow:0 2px 8px rgba(10,30,20,.25);cursor:pointer}
.calc-row .cr-minmax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px}
.calc-result{background:var(--mint);border-radius:14px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.calc-result div span{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.calc-result div b{display:block;font-family:var(--font-head);font-size:22px;color:var(--green-deep);margin-top:2px}

/* ---- showcase (dark rounded product-style card) ---- */
.showcase{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(160deg,#0d1a15,#050706);color:#fff;box-shadow:var(--shadow-lg);padding:56px 40px 0;text-align:center}
.showcase .kicker{color:var(--green2)}
.showcase h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.3px;line-height:1.3;margin:14px auto 0;max-width:640px;font-weight:700;color:#fff}
.showcase h2 b{color:var(--green2)}
.showcase-stage{position:relative;margin-top:34px;height:280px;display:flex;align-items:flex-end;justify-content:center}
.showcase-glow{position:absolute;inset:0;margin:auto;width:520px;height:280px;background:radial-gradient(ellipse at center,rgba(18,199,125,.4),transparent 65%);filter:blur(6px)}
.showcase-card{position:relative;z-index:2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:22px 22px 0 0;padding:22px 26px;display:flex;align-items:center;gap:18px;min-width:320px;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.showcase-card .sc-txt{text-align:left;flex:1}
.showcase-card .sc-txt b{display:block;font-size:15.5px}
.showcase-card .sc-txt small{color:#a8e8c6;font-size:12.5px}
.showcase-card .sc-price{font-size:19px;font-weight:800}
@media(max-width:640px){.showcase{padding:40px 22px 0}.showcase-stage{height:220px}.showcase-card{min-width:0;width:100%;flex-wrap:wrap}}

/* ---- feature rows (alternating image / text) ---- */
.feature-rows{display:flex;flex-direction:column;gap:20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.frow.rev{grid-template-columns:1fr 1fr}
.frow.rev .fr-art{order:2}
.frow.rev .fr-txt{order:1}
.fr-art{border-radius:24px;min-height:280px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fr-art svg{position:relative;z-index:2}
.fr-txt{padding:20px 28px 20px 6px}
.frow.rev .fr-txt{padding:20px 6px 20px 28px}
.fr-txt .ftag{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}
.fr-txt h3{font-family:var(--font-head);font-size:clamp(20px,2.6vw,27px);letter-spacing:-.3px;margin:10px 0 10px;font-weight:700;line-height:1.25}
.fr-txt p{font-size:15px;color:var(--body);margin:0 0 18px;max-width:420px}
.fr-stats{display:flex;gap:10px;flex-wrap:wrap}
.fr-stat{background:var(--mint);border-radius:12px;padding:9px 14px}
.fr-stat b{display:block;font-family:var(--font-head);font-size:15px;color:var(--green-deep)}
.fr-stat span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
@media(max-width:860px){
  .frow{grid-template-columns:1fr;padding:16px}
  .frow.rev .fr-art,.frow.rev .fr-txt{order:initial}
  .fr-art{min-height:200px}
  .fr-txt{padding:8px 14px 20px}
  .frow.rev .fr-txt{padding:8px 14px 20px}
}

/* ---- trust strip ---- */
.trust-strip{background:var(--mint);border-radius:var(--radius-lg);padding:34px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-strip .ts{text-align:center}
.trust-strip .ts b{display:block;font-family:var(--font-head);font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--green-deep)}
.trust-strip .ts span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
@media(max-width:860px){.trust-strip{grid-template-columns:1fr 1fr;padding:26px}}
@media(max-width:520px){.trust-strip{grid-template-columns:1fr}}

/* ---- warm peach contrast banner (debt / "stuck" callouts) ---- */
.banner-peach{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:40px 44px;background:linear-gradient(120deg,var(--peach),#fff6ee);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.banner-peach .bp-txt{max-width:520px}
.banner-peach h2{font-size:clamp(22px,3vw,29px);letter-spacing:-.3px;margin:0 0 10px;font-weight:700}
.banner-peach h2 .accent{color:var(--orange)}
.banner-peach p{margin:0 0 20px;color:var(--body);font-size:15px}
@media(max-width:640px){.banner-peach{padding:30px 26px}}

/* ---- CTA banner (colorful full-bleed rounded, dot-glow pattern) ---- */
.cta-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:52px 44px;color:#fff;
  background:linear-gradient(125deg,#050706,#075c3c 55%,#12C77D 130%)}
.cta-banner .dots{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.5) 1.6px,transparent 1.6px);
  background-size:26px 26px;mask-image:radial-gradient(ellipse 70% 90% at 85% 30%, black, transparent 70%)}
.cta-banner-in{position:relative;z-index:2;max-width:560px}
.cta-banner h2{font-size:clamp(24px,3.2vw,32px);letter-spacing:-.3px;margin:0 0 12px;font-weight:700;color:#fff}
.cta-banner p{margin:0 0 22px;color:rgba(255,255,255,.82);font-size:15.5px}
@media(max-width:640px){.cta-banner{padding:36px 26px}}

/* ---- FAQ split ---- */
.faqsplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.faqsplit .fq-left h2{font-family:var(--font-head);font-size:clamp(24px,3.2vw,32px);letter-spacing:-.3px;line-height:1.25;margin:0 0 12px;font-weight:700}
.faqsplit .fq-left p{color:var(--body);font-size:15px;margin:0 0 22px;max-width:340px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:12px;padding:4px 6px}
.faq-item summary{cursor:pointer;list-style:none;padding:18px;font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .chev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--green);font-weight:800;transition:transform .15s}
.faq-item[open] summary .chev{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 18px 18px;color:var(--body);font-size:14.5px;line-height:1.6}
@media(max-width:860px){.faqsplit{grid-template-columns:1fr}.faqsplit .fq-left p{max-width:none}}

/* ---- dark footer ---- */
footer.ft2{background:var(--black);color:#8fb5a2;margin-top:8px}
.ft2-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding:64px 0 40px}
.ft2 .logo{color:#fff;margin-bottom:14px}
.ft2 p.blurb{font-size:13.5px;color:#6f8c7c;max-width:280px;margin:0 0 18px;line-height:1.6}
.ft2 h4{color:#fff;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;margin:0 0 16px}
.ft2 a{display:block;color:#87a596;font-size:13.5px;margin-bottom:11px}
.ft2 a:hover{color:var(--green2)}
.ft2-social{display:flex;gap:10px}
.ft2-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff}
.ft2-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ft2-badges span{font-size:11.5px;font-weight:700;color:#87a596;background:rgba(255,255,255,.06);border-radius:8px;padding:6px 10px}
.ft2-bot{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#5c7466}
@media(max-width:960px){.ft2-in{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.ft2-in{grid-template-columns:1fr 1fr;padding:44px 0 28px}}

/* ---- generic section rhythm ---- */
.sect{padding:64px 0;scroll-margin-top:96px}
.sect-tight{padding:28px 0}
@media(max-width:640px){.sect{padding:40px 0}}