/* =========================================================
   DESH CAPITAL — SHARED DESIGN SYSTEM (v5)
   Scoped under .dc-scope so it never leaks into other pages.
   Custom properties are global (--dc-*) but only consumed
   inside .dc-scope, so they are safe to declare at :root.
   ========================================================= */

:root{
  --dc-deep:#0B2818;--dc-forest:#134D32;--dc-green:#1E7A50;--dc-mint:#3DBE81;
  --dc-sage:#A8D8BC;--dc-gold:#C9973A;--dc-gold-lt:#E8C06E;--dc-amber:#F0A830;
  --dc-bg:#F5F2EC;--dc-bg-card:#FFFFFF;--dc-bg-nav:rgba(255,252,247,0.92);
  --dc-txt:#111A14;--dc-txt-2:#3D5446;--dc-txt-3:#7A9488;
  --dc-border:rgba(19,77,50,0.12);--dc-border-md:rgba(19,77,50,0.2);
  --dc-sh-sm:0 2px 8px rgba(0,0,0,0.07);--dc-sh-md:0 6px 24px rgba(0,0,0,0.1);--dc-sh-lg:0 16px 56px rgba(0,0,0,0.15);
  --dc-r-sm:8px;--dc-r-md:14px;--dc-r-lg:20px;--dc-r-xl:28px;--dc-r-pill:9999px;
  --dc-font-h:'Cormorant Garamond',Georgia,serif;--dc-font-b:'Plus Jakarta Sans',system-ui,sans-serif;
  --dc-font-bn:'Hind Siliguri',sans-serif;
  --dc-ease:cubic-bezier(.4,0,.2,1);--dc-spring:cubic-bezier(.34,1.56,.64,1);
}
:root[data-theme="dark"]{
  --dc-bg:#0A1810;--dc-bg-card:#111F16;--dc-bg-nav:rgba(10,24,16,0.94);
  --dc-txt:#E8F0EB;--dc-txt-2:#8FB8A0;--dc-txt-3:#4D7860;
  --dc-border:rgba(61,190,129,0.1);--dc-border-md:rgba(61,190,129,0.2);--dc-deep:#E8F0EB;
  --dc-sh-sm:0 2px 8px rgba(0,0,0,.3);--dc-sh-md:0 6px 24px rgba(0,0,0,.4);--dc-sh-lg:0 16px 56px rgba(0,0,0,.55);
}

/* ---------- scoped reset ---------- */
.dc-scope,.dc-scope *,.dc-scope *::before,.dc-scope *::after{box-sizing:border-box}
.dc-scope{margin:0;padding:0;font-family:var(--dc-font-b);color:var(--dc-txt);font-size:16px;line-height:1.65}
.dc-scope[data-lang="bn"],[data-lang="bn"] .dc-scope,.dc-scope[data-lang="bn"] p,.dc-scope[data-lang="bn"] span,.dc-scope[data-lang="bn"] a,.dc-scope[data-lang="bn"] li,.dc-scope[data-lang="bn"] button,.dc-scope[data-lang="bn"] h1,.dc-scope[data-lang="bn"] h2,.dc-scope[data-lang="bn"] h3,.dc-scope[data-lang="bn"] h4{font-family:var(--dc-font-bn)}
.dc-scope img{max-width:100%;display:block}
.dc-scope a{color:inherit;text-decoration:none}
.dc-scope ul{list-style:none;margin:0;padding:0}
.dc-scope button{font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.dc-scope h1,.dc-scope h2,.dc-scope h3,.dc-scope h4,.dc-scope h5,.dc-scope p{margin:0}

/* ---------- signature background system ----------
   Deliberately not the blurred-orb + dot-grid combo every SaaS template
   ships with. Instead: a hard architectural wedge (roofline silhouette),
   a diagonal roof-pitch texture instead of a square dot-grid, and an
   animated rate-trend line that draws itself in — an accent that only
   makes sense for a mortgage-rate brand. */
.dc-hero-wedge{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dc-hero-wedge svg{position:absolute;top:0;right:0;width:62%;height:100%}
.dc-hero-wedge .dc-wedge-fill{fill:url(#dcWedgeGrad)}
:root[data-theme="dark"] .dc-hero-wedge .dc-wedge-fill{opacity:.6}
.dc-hero-wedge .dc-wedge-edge{fill:none;stroke:url(#dcEdgeGrad);stroke-width:.5}

.dc-roofline{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(65deg,var(--dc-border) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(-65deg,var(--dc-border) 0 1px,transparent 1px 46px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);
  mask-image:linear-gradient(180deg,#000,transparent 85%);
  opacity:.6}
:root[data-theme="dark"] .dc-roofline{opacity:.35}

/* confined to the right-side gutter (behind the rates panel), so it
   never crosses the left-column stats/text like it used to when it
   spanned the full hero width */
.dc-hero-rateline{position:absolute;left:54%;width:42%;bottom:8%;height:14%;z-index:0;pointer-events:none;opacity:.4}
@media(max-width:1100px){
  .dc-hero-rateline{display:none}
}
.dc-hero-rateline polyline{stroke-dasharray:1400;stroke-dashoffset:1400;animation:dcDrawLine 2.4s .5s cubic-bezier(.4,0,.2,1) forwards}
.dc-hero-rateline circle{opacity:0;animation:dcDotIn .4s 2.7s var(--dc-spring) forwards}
@keyframes dcDrawLine{to{stroke-dashoffset:0}}
@keyframes dcDotIn{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .dc-hero-rateline polyline{animation:none;stroke-dashoffset:0}
  .dc-hero-rateline circle{animation:none;opacity:1}
}

.dc-page-wrap{position:relative;z-index:1}

/* ---------- icon system (line icons, not emoji) ---------- */
.dc-icon-badge{width:48px;height:48px;border-radius:var(--dc-r-md);background:rgba(61,190,129,.12);color:var(--dc-green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-icon-badge svg{width:22px;height:22px}
:root[data-theme="dark"] .dc-icon-badge{color:var(--dc-mint)}
.dc-icon-badge.dc-icon-lg{width:64px;height:64px;border-radius:var(--dc-r-lg)}
.dc-icon-badge.dc-icon-lg svg{width:28px;height:28px}
.dc-icon-badge.dc-icon-sm{width:34px;height:34px;border-radius:var(--dc-r-sm)}
.dc-icon-badge.dc-icon-sm svg{width:16px;height:16px}
.dc-icon-badge.dc-icon-gold{background:rgba(201,151,58,.16);color:var(--dc-gold)}
.dc-icon-badge.dc-icon-white{background:rgba(255,255,255,.15);color:#fff}
.dc-icon{width:18px;height:18px;flex-shrink:0;display:inline-block;vertical-align:-3px}

/* ---------- layout utilities ---------- */
.dc-section{padding:80px 0}
.dc-section-alt{background:var(--dc-bg-card)}
.dc-container{max-width:1260px;margin:0 auto;padding:0 24px}
.dc-sec-head{margin-bottom:56px}
.dc-sec-head.dc-center{text-align:center}
.dc-sec-tag{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dc-green);margin-bottom:12px}
:root[data-theme="dark"] .dc-sec-tag{color:var(--dc-mint)}
.dc-sec-tag::before{content:'';width:18px;height:2px;background:linear-gradient(90deg,var(--dc-mint),var(--dc-gold));border-radius:1px}
.dc-sec-h2{font-family:var(--dc-font-h);font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--dc-txt);margin-bottom:12px}
.dc-sec-sub{font-size:1.02rem;color:var(--dc-txt-2);max-width:520px;line-height:1.7}
.dc-sec-head.dc-center .dc-sec-sub{margin:0 auto}

/* ---------- buttons ---------- */
.dc-btn-primary{padding:14px 30px;background:linear-gradient(135deg,var(--dc-green),var(--dc-forest));color:#fff;border-radius:var(--dc-r-pill);font-weight:600;font-size:.92rem;box-shadow:0 5px 18px rgba(19,77,50,.35);transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer}
.dc-scope a.dc-btn-primary,.dc-scope a.dc-btn-primary:hover{color:#fff}
.dc-btn-primary:hover{box-shadow:0 8px 28px rgba(19,77,50,.5);transform:translateY(-2px);color:#fff}
.dc-btn-outline{padding:14px 30px;border:2px solid var(--dc-border-md);color:var(--dc-txt-2);border-radius:var(--dc-r-pill);font-weight:600;font-size:.92rem;background:transparent;transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.dc-btn-outline:hover{border-color:var(--dc-mint);color:var(--dc-green);background:rgba(61,190,129,.06)}
:root[data-theme="dark"] .dc-btn-outline:hover{color:var(--dc-mint)}
.dc-btn-gold{padding:14px 30px;background:linear-gradient(135deg,var(--dc-gold),#A07820);color:#fff;border-radius:var(--dc-r-pill);font-weight:600;font-size:.92rem;box-shadow:0 5px 18px rgba(201,151,58,.35);transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none}
.dc-btn-gold:hover{box-shadow:0 8px 28px rgba(201,151,58,.5);transform:translateY(-2px);color:#fff}
.dc-btn-cta-white{padding:15px 32px;background:#fff;color:var(--dc-forest);border-radius:var(--dc-r-pill);font-weight:700;font-size:.95rem;box-shadow:0 5px 20px rgba(0,0,0,.2);transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer}
.dc-btn-cta-white:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.3);color:var(--dc-forest)}
.dc-btn-cta-outline{padding:15px 32px;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--dc-r-pill);font-weight:600;font-size:.95rem;transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;background:transparent;cursor:pointer}
.dc-scope .dc-btn-cta-outline,.dc-scope .dc-btn-cta-outline:hover{color:#fff}
.dc-btn-cta-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);color:#fff}
.dc-btn-cta-gold{padding:15px 32px;background:linear-gradient(135deg,var(--dc-gold),#A07820);color:#fff;border-radius:var(--dc-r-pill);font-weight:700;font-size:.95rem;box-shadow:0 5px 20px rgba(201,151,58,.4);transition:all .25s var(--dc-ease);display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none}
.dc-btn-cta-gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,151,58,.6);color:#fff}

/* ---------- generic modal shell (rate info + appointment) ---------- */
.dc-modal-backdrop{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s var(--dc-ease)}
.dc-modal-backdrop.dc-open{opacity:1;pointer-events:all}
.dc-modal-box{background:var(--dc-bg-card);border:1px solid var(--dc-border-md);border-radius:var(--dc-r-xl);box-shadow:var(--dc-sh-lg);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;transform:translateY(20px)scale(.97);transition:transform .3s var(--dc-spring);position:relative}
.dc-modal-backdrop.dc-open .dc-modal-box{transform:translateY(0)scale(1)}
.dc-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 16px;position:sticky;top:0;background:var(--dc-bg-card);border-radius:var(--dc-r-xl) var(--dc-r-xl) 0 0;border-bottom:1px solid var(--dc-border);z-index:1}
.dc-modal-icon{width:44px;height:44px;border-radius:var(--dc-r-md);flex-shrink:0;background:rgba(61,190,129,.12);display:flex;align-items:center;justify-content:center}
.dc-modal-icon svg{width:22px;height:22px;color:var(--dc-green)}
:root[data-theme="dark"] .dc-modal-icon svg{color:var(--dc-mint)}
.dc-modal-title{font-family:var(--dc-font-h);font-size:1.25rem;font-weight:700;color:var(--dc-txt);line-height:1.2;padding-top:4px}
.dc-modal-close{width:34px;height:34px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--dc-border-md);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dc-txt-3);font-size:1.1rem;transition:all .15s}
.dc-modal-close:hover{background:var(--dc-border);color:var(--dc-txt)}
.dc-modal-body{padding:20px 24px 28px}
.dc-modal-section-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dc-green);margin-bottom:8px;margin-top:20px;display:flex;align-items:center;gap:6px}
:root[data-theme="dark"] .dc-modal-section-title{color:var(--dc-mint)}
.dc-modal-section-title:first-child{margin-top:0}
.dc-modal-section-title::before{content:'';width:14px;height:2px;background:currentColor;border-radius:1px}
.dc-modal-body p{font-size:.875rem;color:var(--dc-txt-2);line-height:1.75;margin-bottom:10px}
.dc-modal-body a{color:var(--dc-green);text-decoration:underline;text-underline-offset:2px}
:root[data-theme="dark"] .dc-modal-body a{color:var(--dc-mint)}
.dc-modal-body a:hover{opacity:.8}
.dc-modal-footer{border-top:1px solid var(--dc-border);padding:16px 24px;display:flex;gap:10px;justify-content:flex-end}
.dc-modal-btn-close{padding:9px 22px;background:linear-gradient(135deg,var(--dc-green),var(--dc-forest));color:#fff;border-radius:var(--dc-r-pill);font-size:.855rem;font-weight:600;cursor:pointer;border:none;transition:opacity .15s}
.dc-modal-btn-close:hover{opacity:.85}

/* ---------- reveal-on-scroll ----------
   Content is always fully visible (opacity stays 1); only a subtle
   slide-up motion animates in, so nothing depends on JS/animation timing
   to actually be seen (avoids any window where content reads as invisible). */
@keyframes dcFadeUp{from{transform:translateY(24px)}to{transform:translateY(0)}}
.dc-reveal{transform:translateY(20px);transition:transform .6s var(--dc-ease)}
.dc-reveal.dc-visible{transform:none}
@media(prefers-reduced-motion:reduce){
  .dc-reveal{transform:none;transition:none}
  .dc-hero-eyebrow,.dc-hero h1,.dc-hero-sub,.dc-hero-actions,.dc-hero-stats,.dc-hero-right{animation:none}
}

/* ---------- responsive base ---------- */
@media(max-width:640px){
  .dc-section{padding:56px 0}
}