/* ==========================================================================
   FINA — Future Improvement for Notable Advancement Society
   Design language: "The Ledger & The Stitch"
   A running-stitch (kantha embroidery) motif meets the passbook ledger line —
   the two physical objects at the heart of grassroots microfinance in
   Bangladesh: the hand-stitched quilt of community craft, and the savings
   passbook that records a family's slow climb toward security.
   ========================================================================== */

:root{
  /* Color */
  --ink:            #1c2a24;   /* near-black, warm green undertone */
  --paddy:          #1b4d3e;   /* deep paddy-field green — primary */
  --paddy-deep:     #123329;
  --marigold:       #e2a13a;   /* marigold gold — accent / CTA */
  --marigold-deep:  #c4841f;
  --thread:         #8b2635;   /* kantha thread maroon — secondary accent */
  --paper:          #f7f3ea;   /* warm parchment background */
  --paper-deep:     #efe8d8;
  --cream-card:     #fffdf8;
  --line:           #d9cfb8;   /* hairline / stitch color on paper */
  --line-deep:      #1b4d3e33;
  --white:          #ffffff;

  /* Type */
  --font-display: 'Fraunces', serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 4px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paddy-deep);
  letter-spacing: -0.01em;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--thread);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--thread);
  display:inline-block;
}

a{color: var(--paddy); text-decoration:none;}
a:hover{color: var(--marigold-deep);}

::selection{ background: var(--marigold); color: var(--paddy-deep); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--marigold-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ==========================================================================
   Stitch motif — the signature element
   ========================================================================== */
.stitch-rule{
  border: 0;
  height: 10px;
  margin: 0;
  background-image: radial-gradient(circle, var(--thread) 1.6px, transparent 1.7px);
  background-size: 14px 10px;
  background-position: center;
  opacity: 0.55;
}
.stitch-rule.-gold{ background-image: radial-gradient(circle, var(--marigold) 1.6px, transparent 1.7px); }

.stitch-border{
  position: relative;
}
.stitch-border::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background-image: radial-gradient(circle, var(--line) 1.3px, transparent 1.4px);
  background-size: 10px 10px;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
}

/* ==========================================================================
   Preloader
   ========================================================================== */
#preloader{
  position: fixed; inset:0; z-index: 2000;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.loaded{ opacity:0; visibility:hidden; }
.preloader-mark{
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--paddy);
  display:flex; flex-direction:column; align-items:center; gap: .75rem;
}
.stitch-loader{
  width: 120px; height: 10px;
  background-image: radial-gradient(circle, var(--thread) 1.6px, transparent 1.7px);
  background-size: 14px 10px;
  background-position: 0 center;
  animation: stitchmove 1.1s linear infinite;
}
@keyframes stitchmove{ to{ background-position: 14px center; } }

/* ==========================================================================
   Navbar
   ========================================================================== */

.brand-logo {
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .brand-logo {
      max-height: 48px;
  }
}

@media (max-width: 575.98px) {
  .brand-logo {
      max-height: 45px;
  }
}

.navbar-fina{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-top: .7rem; padding-bottom: .7rem;
  transition: box-shadow .3s ease, padding .3s ease;
}
.navbar-fina.is-scrolled{
  box-shadow: 0 6px 18px rgba(27,77,62,0.08);
  padding-top: .4rem; padding-bottom: .4rem;
}
.navbar-brand-fina{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--paddy-deep) !important;
}
.brand-mark{
  width: 40px; height:40px; border-radius: 50%;
  background: var(--paddy);
  color: var(--marigold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.05rem;
  flex-shrink:0;
}
.brand-sub{
  display:block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--thread);
}
.navbar-fina .nav-link{
  font-weight: 500;
  color: var(--ink);
  padding: .5rem .9rem !important;
  position: relative;
}
.navbar-fina .nav-link.active,
.navbar-fina .nav-link:hover{ color: var(--paddy-deep); }
.navbar-fina .nav-link.active::after{
  content:"";
  position:absolute; left:.9rem; right:.9rem; bottom:.15rem; height:2px;
  background: var(--marigold);
}
.btn-fina-nav{
  background: var(--paddy); color:var(--white);
  border-radius: var(--radius);
  padding: .55rem 1.3rem; font-weight:600; font-size:.9rem;
  border: 1px solid var(--paddy);
}
.btn-fina-nav:hover{ background: var(--paddy-deep); color: var(--white); }

.dropdown-menu{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(27,42,36,.12);
}
.dropdown-item:active,.dropdown-item.active{ background: var(--paddy); }

/* ==========================================================================
   Dropdown submenu — refined, mobile-first
   ========================================================================== */
.dropdown-menu{
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(27,42,36,.14);
  padding: .5rem;
  margin-top: .3rem !important;
}
.dropdown-item{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-radius: 6px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.dropdown-item::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--thread);
  flex-shrink: 0;
  transition: background .18s ease;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--paper-deep);
  color: var(--paddy-deep);
  padding-left: 1.05rem;
}
.dropdown-item:hover::before{ background: var(--marigold-deep); }
.dropdown-item:active, .dropdown-item.active{
  background: var(--paddy);
  color: #fff;
}
.dropdown-item:active::before, .dropdown-item.active::before{ background: var(--marigold); }

/* Mobile: submenu shown inline inside the collapse, styled as a nested card */
@media (max-width: 991.98px){
  .navbar-collapse .dropdown-menu{
    position: static;
    float: none;
    display: none;
    width: 100%;
    margin: .4rem 0 .6rem !important;
    background: var(--paper-deep);
    border: 1px solid var(--line);
    border-left: 3px solid var(--marigold);
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    animation: dropdownFade .2s ease;
  }
  .navbar-collapse .dropdown-menu.show{ display: block; }
  .navbar-collapse .dropdown-item{
    color: var(--ink);
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--marigold);
  }
  .navbar-collapse .dropdown-item:hover,
  .navbar-collapse .dropdown-item:focus{
    background: var(--cream-card);
    padding-left: 1.15rem;
  }
  .navbar-collapse .dropdown-toggle::after{
    transition: transform .25s ease;
  }

}

@keyframes dropdownFade{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-marigold{
  background: var(--marigold); border-color: var(--marigold);
  color: var(--paddy-deep); font-weight:700;
  border-radius: var(--radius);
  padding: .8rem 1.9rem;
}
.btn-marigold:hover{ background: var(--marigold-deep); border-color: var(--marigold-deep); color:var(--white); }
.btn-outline-paddy{
  border: 1.5px solid var(--paddy); color: var(--paddy);
  border-radius: var(--radius); font-weight:600; padding: .78rem 1.8rem;
  background: transparent;
}
.btn-outline-paddy:hover{ background: var(--paddy); color:var(--white); }
.btn-outline-cream{
  border: 1.5px solid rgba(255,255,255,.65); color: var(--white);
  border-radius: var(--radius); font-weight:600; padding: .78rem 1.8rem;
}
.btn-outline-cream:hover{ background: var(--white); color: var(--paddy-deep); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  background: linear-gradient(160deg, var(--paddy-deep) 0%, var(--paddy) 62%, #2c6b53 100%);
  color: var(--white);
  overflow:hidden;
  padding-top: 7.5rem;
  padding-bottom: 6rem;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(226,161,58,.18) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  opacity:.5;
}
.hero-content{ position:relative; z-index:2; }
.hero .eyebrow{ color: var(--marigold); }
.hero .eyebrow::before{ background: var(--marigold); }
.hero h1{ color: var(--white); font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.08; }
.hero p.lead{ color: rgba(255,255,255,.86); font-size: 1.15rem; max-width: 42rem; }

.hero-stats{
  position: relative; z-index: 2;
  display:flex; flex-wrap:wrap; gap: 2.2rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-stat .num{
  font-family: var(--font-mono);
  font-size: 1.9rem; font-weight:600; color: var(--marigold); line-height:1;
}
.hero-stat .label{ font-size:.8rem; color: rgba(255,255,255,.75); margin-top:.3rem; }

.ledger-card{
  background: var(--cream-card);
  border-radius: 8px;
  padding: 1.8rem;
  box-shadow: 0 30px 60px rgba(10,25,20,.35);
  color: var(--ink);
  position: relative;
}
.ledger-card .ledger-row{
  display:flex; justify-content:space-between;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: .85rem;
}
.ledger-card .ledger-row:last-child{ border-bottom:0; }
.ledger-card .ledger-row .amt{ color: var(--paddy-deep); font-weight:600; }

/* page hero (interior pages) */
.page-hero{
  background: linear-gradient(160deg, var(--paddy-deep) 0%, var(--paddy) 100%);
  color: var(--white);
  padding: 6.5rem 0 3.2rem;
  position: relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(226,161,58,.16) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
}
.page-hero h1{ color:var(--white); position:relative; z-index:2; }
.page-hero .breadcrumb{ position:relative; z-index:2; }
.page-hero .breadcrumb a{ color: rgba(255,255,255,.7); }
.page-hero .breadcrumb .active{ color: var(--marigold); }

/* ==========================================================================
   Sections & cards
   ========================================================================== */
section{ padding: 5.5rem 0; }
.section-tight{ padding: 3.5rem 0; }
.bg-paper-deep{ background: var(--paper-deep); }
.bg-paddy{ background: var(--paddy); color:var(--white); }
.bg-paddy h2, .bg-paddy h3{ color: var(--white); }
.bg-ink{ background: var(--ink); color: var(--paper); }

.section-head{ max-width: 46rem; margin-bottom: 3rem; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }

.card-fina{
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-fina:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(27,42,36,.1);
  border-color: var(--marigold);
}
.card-icon{
  width: 54px; height:54px; border-radius: 50%;
  background: var(--paddy); color: var(--marigold);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; margin-bottom: 1.2rem;
}
.card-fina.-thread .card-icon{ background: var(--thread); color: var(--white); }

.pgm-card{
  border-left: 3px solid var(--marigold);
  padding: 1.6rem 1.8rem;
  background: var(--cream-card);
  border-radius: 0 6px 6px 0;
  height:100%;
}

.loan-card{
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow:hidden;
  height:100%;
}
.loan-card .loan-head{
  background: var(--paddy);
  color: var(--white);
  padding: 1.4rem 1.6rem;
}
.loan-card .loan-head .tag{
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--marigold);
}
.loan-card .loan-body{ padding: 1.6rem; }
.loan-card ul{ list-style:none; padding:0; margin:0; }
.loan-card ul li{ padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size:.93rem; }
.loan-card ul li:last-child{ border-bottom:0; }
.loan-card ul li i{ color: var(--marigold-deep); margin-right:.5rem; }

.stat-block{
  text-align:center; padding: 1.6rem 1rem;
}
.stat-block .num{
  font-family: var(--font-mono); font-size: 2.4rem; font-weight:700;
  color: var(--paddy-deep);
}
.stat-block .num .accent{ color: var(--thread); }
.stat-block .label{ font-size:.85rem; color:#5a5f56; margin-top:.3rem; }

.value-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  border: 1px solid var(--line); border-radius: 30px;
  padding: .55rem 1.2rem; font-size:.9rem; font-weight:600;
  background: var(--cream-card);
  margin: .3rem;
}
.value-pill i{ color: var(--thread); }

.timeline-fina{ position:relative; padding-left: 2.2rem; }
.timeline-fina::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background-image: linear-gradient(var(--line) 60%, transparent 0%);
  background-size: 1px 10px;
}
.timeline-item{ position:relative; padding-bottom: 2.4rem; }
.timeline-item::before{
  content:""; position:absolute; left:-2.2rem; top:.3rem;
  width:11px; height:11px; border-radius:50%;
  background: var(--marigold); border:2px solid var(--paddy);
}
.timeline-item:last-child{ padding-bottom:0; }

.quote-fina{
  border-left: 3px solid var(--thread);
  padding-left: 1.6rem; font-family: var(--font-display);
  font-size: 1.3rem; font-style: italic; color: var(--paddy-deep);
}

.accordion-fina .accordion-button{
  font-family: var(--font-display); font-weight:600; color: var(--paddy-deep);
  background: var(--cream-card);
}
.accordion-fina .accordion-button:not(.collapsed){
  background: var(--paddy); color: var(--white); box-shadow:none;
}
.accordion-fina .accordion-item{ border: 1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom: .8rem; }
.accordion-fina .accordion-button:focus{ box-shadow:none; }

.cta-band{
  background: var(--paddy-deep);
  color: var(--white);
  border-radius: 10px;
  padding: 3.2rem;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(226,161,58,.16) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}
.cta-band > *{ position:relative; z-index:2; }

.table-fina{ font-family: var(--font-mono); font-size:.88rem; }
.table-fina thead th{
  background: var(--paddy); color: var(--white);
  font-weight:600; border:0; text-transform:uppercase; letter-spacing:.04em; font-size:.72rem;
}
.table-fina td, .table-fina th{ vertical-align:middle; padding: .9rem 1rem; }
.table-fina tbody tr{ border-bottom: 1px dashed var(--line); }

.placeholder-callout{
  border: 1.5px dashed var(--thread);
  background: rgba(139,38,53,.05);
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  font-size: .9rem;
  color: var(--thread);
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.footer-fina{
  background: var(--ink);
  color: rgba(247,243,234,.78);
  padding-top: 4.5rem;
}
footer.footer-fina h6{
  color: var(--marigold);
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom: 1.2rem;
}
footer.footer-fina a{ color: rgba(247,243,234,.72); }
footer.footer-fina a:hover{ color: var(--marigold); }
footer.footer-fina ul{ list-style:none; padding:0; }
footer.footer-fina ul li{ margin-bottom:.65rem; font-size:.92rem; }
.footer-bottom{
  border-top: 1px solid rgba(247,243,234,.14);
  margin-top: 3rem; padding: 1.4rem 0; font-size:.82rem;
  color: rgba(247,243,234,.55);
}
.social-fina a{
  width:38px; height:38px; border-radius:50%;
  border: 1px solid rgba(247,243,234,.25);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
.social-fina a:hover{ background: var(--marigold); border-color: var(--marigold); color: var(--paddy-deep); }

/* ==========================================================================
   Scroll to top
   ========================================================================== */
#scrollTop{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1000;
  width: 46px; height:46px; border-radius: 50%;
  background: var(--paddy); color: var(--marigold);
  display:flex; align-items:center; justify-content:center;
  border: none; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s ease;
  box-shadow: 0 10px 24px rgba(27,42,36,.25);
}
#scrollTop.show{ opacity:1; visibility:visible; transform:none; }
#scrollTop:hover{ background: var(--marigold); color: var(--paddy-deep); }

/* ==========================================================================
   404
   ========================================================================== */
.error-mark{
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 10rem);
  color: var(--paddy);
  line-height:1;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control-fina, .form-select-fina{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; background: var(--cream-card);
}
.form-control-fina:focus, .form-select-fina:focus{
  border-color: var(--paddy); box-shadow: 0 0 0 .2rem rgba(27,77,62,.12);
}
label.form-label-fina{ font-weight:600; font-size:.88rem; margin-bottom:.4rem; color: var(--paddy-deep); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-marigold{ color: var(--marigold-deep) !important; }
.text-thread{ color: var(--thread) !important; }
.bg-cream-card{ background: var(--cream-card); }
.rounded-fina{ border-radius: 8px !important; }
.shadow-fina{ box-shadow: 0 20px 50px rgba(27,42,36,.1); }

@media (max-width: 991.98px){
  section{ padding: 3.6rem 0; }
  .hero{ padding-top: 6.5rem; padding-bottom: 3.5rem; }
}