/* ==========================================================
   FinCalcHub - Global Stylesheet
   Palette: White / Blue #2563EB / Green #16A34A
   Fonts:   Plus Jakarta Sans (body), DM Serif Display (display)
   ========================================================== */

:root{
  --brand:#2563EB;
  --brand-dark:#1D4ED8;
  --brand-light:#DBEAFE;
  --success:#16A34A;
  --success-dark:#15803D;
  --success-light:#DCFCE7;
  --ink:#0F172A;
  --ink-2:#334155;
  --muted:#64748B;
  --muted-2:#94A3B8;
  --line:#E2E8F0;
  --bg:#FFFFFF;
  --bg-soft:#F8FAFC;
  --bg-hero: radial-gradient(1200px 600px at 10% -10%, #DBEAFE 0%, transparent 60%),
             radial-gradient(900px 500px at 100% 0%, #DCFCE7 0%, transparent 55%),
             #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 64px rgba(15,23,42,.10);
  --radius:  14px;
  --radius-lg:22px;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--brand-dark)}

.text-muted-2{color:var(--muted)!important}
.section{padding:88px 0}
.section-sm{padding:56px 0}
.section-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.01em;color:var(--ink);margin-bottom:.5rem}
.section-subtitle{color:var(--muted);max-width:640px;margin:0 auto 3rem}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:var(--brand-light);padding:.4rem .8rem;border-radius:999px}

/* ---------- Header ---------- */
.site-header{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);z-index:1030}
.navbar{padding:.85rem 0}
.navbar-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--ink)}
.navbar-brand:hover{color:var(--ink)}
.brand-mark{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand) 0%,var(--success) 100%);box-shadow:var(--shadow-sm);font-size:1.1rem}
.brand-text{font-family:var(--font-body);letter-spacing:-.01em}
.navbar .nav-link{color:var(--ink-2);font-weight:500;padding:.6rem 1rem;border-radius:10px;transition:all .18s ease}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--brand);background:var(--brand-light)}
.navbar .dropdown-menu{border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:14px;padding:.5rem}
.navbar .dropdown-item{border-radius:10px;padding:.6rem .8rem;font-weight:500;color:var(--ink-2)}
.navbar .dropdown-item:hover{background:var(--brand-light);color:var(--brand)}
.navbar-toggler{border:1px solid var(--line);border-radius:10px;padding:.35rem .6rem;font-size:1.4rem;color:var(--ink)}
.navbar-toggler:focus{box-shadow:none}
.btn-cta{border-radius:999px;padding:.55rem 1.15rem;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn-cta:hover{transform:translateY(-1px)}

/* ---------- Breadcrumb ---------- */
.breadcrumb-wrap{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:.75rem 0}
.breadcrumb{font-size:.9rem;margin:0}
.breadcrumb a{color:var(--muted)}
.breadcrumb .active{color:var(--ink);font-weight:600}
.breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--muted-2)}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;font-weight:600;padding:.7rem 1.1rem;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.25)}
.btn-success{background:var(--success);border-color:var(--success)}
.btn-success:hover{background:var(--success-dark);border-color:var(--success-dark)}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);color:#fff}
.btn-lg{padding:.9rem 1.4rem;font-size:1.05rem;border-radius:14px}

/* ---------- Hero ---------- */
.hero{background:var(--bg-hero);padding:96px 0 72px;position:relative;overflow:hidden}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.hero h1 .accent{color:var(--brand)}
.hero p.lead{color:var(--ink-2);font-size:1.12rem;max-width:560px}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.hero-badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-size:.85rem;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:.4rem;box-shadow:var(--shadow-sm)}
.hero-badge i{color:var(--success)}

.hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-lg);position:relative}
.hero-card .stat{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-radius:14px;background:var(--bg-soft);margin-bottom:.75rem}
.hero-card .stat:last-child{margin-bottom:0}
.hero-card .stat .label{color:var(--muted);font-size:.85rem;font-weight:600}
.hero-card .stat .value{font-weight:800;color:var(--ink);font-size:1.1rem}
.hero-card .stat.total{background:linear-gradient(135deg,var(--brand-light),#fff)}
.hero-card .stat.gain {background:linear-gradient(135deg,var(--success-light),#fff)}
.hero-float{position:absolute;top:-14px;right:-14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem .8rem;box-shadow:var(--shadow-md);font-size:.85rem;font-weight:700;color:var(--success);display:inline-flex;align-items:center;gap:.35rem}

/* ---------- Calculator cards on home ---------- */
.calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;height:100%;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;position:relative;overflow:hidden}
.calc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.06),transparent 60%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.calc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.calc-card:hover::before{opacity:1}
.calc-card .icon-wrap{width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1rem}
.calc-card.primary .icon-wrap{background:var(--brand-light);color:var(--brand)}
.calc-card.success .icon-wrap{background:var(--success-light);color:var(--success)}
.calc-card h3{font-size:1.2rem;font-weight:700;margin-bottom:.4rem;color:var(--ink)}
.calc-card p{color:var(--muted);margin-bottom:1rem}
.calc-card .arrow{color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:.35rem}
.calc-card:hover .arrow i{transform:translateX(3px)}
.calc-card .arrow i{transition:transform .2s ease}

/* ---------- Why choose us ---------- */
.feature{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem;border-radius:16px;background:#fff;border:1px solid var(--line);height:100%;transition:box-shadow .2s ease}
.feature:hover{box-shadow:var(--shadow-md)}
.feature .fi{width:44px;height:44px;border-radius:12px;background:var(--brand-light);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.feature h4{font-size:1.05rem;margin-bottom:.25rem;color:var(--ink)}
.feature p{color:var(--muted);margin:0;font-size:.95rem}

/* ---------- Tips / Blog ---------- */
.tip-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;height:100%;transition:transform .2s ease, box-shadow .2s ease}
.tip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tip-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand-light),var(--success-light));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--brand)}
.tip-card.g2 .thumb{background:linear-gradient(135deg,#FEF3C7,#DBEAFE);color:var(--success)}
.tip-card.g3 .thumb{background:linear-gradient(135deg,#FCE7F3,#DCFCE7);color:var(--brand-dark)}
.tip-card .body{padding:1.2rem}
.tip-card h5{font-size:1.05rem;color:var(--ink)}
.tip-card p{color:var(--muted);font-size:.92rem;margin:0}
.tip-card .meta{display:flex;gap:.75rem;color:var(--muted-2);font-size:.8rem;margin-bottom:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ---------- FAQ ---------- */
.faq .accordion-item{border:1px solid var(--line);border-radius:14px!important;overflow:hidden;margin-bottom:.75rem}
.faq .accordion-button{background:#fff;color:var(--ink);font-weight:600;padding:1.1rem 1.2rem}
.faq .accordion-button:not(.collapsed){background:var(--brand-light);color:var(--brand);box-shadow:none}
.faq .accordion-button:focus{box-shadow:none}
.faq .accordion-body{color:var(--ink-2);padding:0 1.2rem 1.2rem}

/* ---------- CTA ---------- */
.cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:24px;padding:56px;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-40px;top:-40px;width:280px;height:280px;background:radial-gradient(circle,var(--success) 0%,transparent 70%);opacity:.25;border-radius:50%}
.cta-band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;margin-bottom:.5rem}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:1.5rem}
.cta-band .btn-light{background:#fff;color:var(--brand);font-weight:700}
.cta-band .btn-light:hover{background:var(--success-light);color:var(--brand-dark)}
.cta-band .btn-outline-light{border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn-outline-light:hover{background:rgba(255,255,255,.15)}

/* ---------- Ads ---------- */
.ad-slot{background:var(--bg-soft);border:1px dashed var(--line);border-radius:14px;padding:1rem;text-align:center;color:var(--muted-2);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;min-height:100px;display:flex;align-items:center;justify-content:center}
.ad-slot::before{content:"Advertisement"}
.ad-slot ins{width:100%}
.ad-header{margin:1rem 0}
.ad-middle{margin:2rem 0}
.ad-footer{margin-top:1rem}

/* ---------- Calculator page ---------- */
.calc-shell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}
.calc-title-wrap{display:flex;align-items:center;gap:1rem;margin-bottom:.25rem}
.calc-title-wrap .icon{width:56px;height:56px;border-radius:16px;background:var(--brand-light);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem}
.calc-title-wrap.success .icon{background:var(--success-light);color:var(--success)}
.calc-title-wrap h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);margin:0}

.calc-group{margin-bottom:1.25rem}
.calc-group label{font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;font-size:.95rem}
.calc-group label .val-pill{background:var(--brand-light);color:var(--brand);border-radius:999px;padding:.2rem .7rem;font-weight:700;font-size:.85rem;min-width:80px;text-align:center}
.calc-group .input-group{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.calc-group .input-group:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.calc-group .input-group-text{background:var(--bg-soft);border:0;font-weight:600;color:var(--ink-2)}
.calc-group .form-control{border:0;font-weight:600;color:var(--ink);font-size:1rem}
.calc-group .form-control:focus{box-shadow:none}
.calc-group input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:var(--line);border-radius:999px;outline:none;margin-top:.75rem}
.calc-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brand);cursor:pointer;box-shadow:0 4px 12px rgba(37,99,235,.35);border:3px solid #fff}
.calc-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--brand);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.calc-group.success input[type=range]::-webkit-slider-thumb{background:var(--success);box-shadow:0 4px 12px rgba(22,163,74,.35)}
.calc-group.success input[type=range]::-moz-range-thumb{background:var(--success);box-shadow:0 4px 12px rgba(22,163,74,.35)}

.result-panel{background:linear-gradient(180deg,var(--bg-soft),#fff);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem;height:100%}
.result-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:.75rem}
.result-item.invested{border-left:4px solid var(--brand)}
.result-item.returns {border-left:4px solid var(--success)}
.result-item.total   {background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border:0}
.result-item .lbl{font-weight:600;color:var(--ink-2)}
.result-item.total .lbl{color:rgba(255,255,255,.85)}
.result-item .amt{font-weight:800;font-size:1.15rem;color:var(--ink)}
.result-item.total .amt{color:#fff;font-size:1.35rem}

.chart-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.25rem;margin-top:1rem}
.chart-wrap h5{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--ink)}
.chart-canvas-holder{position:relative;height:280px}

.growth-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.growth-table th{background:var(--bg-soft);font-weight:700;color:var(--ink-2);padding:.75rem;text-align:right;border-bottom:1px solid var(--line);position:sticky;top:0}
.growth-table th:first-child,.growth-table td:first-child{text-align:left}
.growth-table td{padding:.7rem .75rem;text-align:right;border-bottom:1px solid var(--line);color:var(--ink)}
.growth-table tbody tr:hover{background:var(--bg-soft)}
.table-scroll{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:14px}

/* ---------- Static pages ---------- */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:56px 0 40px}
.page-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.5vw,2.8rem);letter-spacing:-.01em}
.prose{color:var(--ink-2);font-size:1.02rem;line-height:1.75}
.prose h2{font-family:var(--font-display);font-weight:400;color:var(--ink);margin-top:2rem;margin-bottom:.75rem;font-size:1.5rem}
.prose h3{color:var(--ink);margin-top:1.5rem;margin-bottom:.5rem;font-size:1.15rem;font-weight:700}
.prose p{margin-bottom:1rem}
.prose ul{padding-left:1.25rem}
.prose ul li{margin-bottom:.35rem}
.prose a{color:var(--brand);font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:#0F172A;color:#CBD5E1;padding:64px 0 24px;margin-top:0}
.site-footer .text-muted-2{color:#94A3B8!important}
.footer-brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-size:1.25rem}
.footer-brand:hover{color:#fff}
.footer-title{color:#fff;font-weight:700;font-size:.95rem;margin-bottom:1rem;letter-spacing:.02em}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.55rem}
.footer-links a{color:#CBD5E1;font-size:.95rem;transition:color .18s ease}
.footer-links a:hover{color:#fff}
.footer-divider{border-color:rgba(255,255,255,.08);margin:2.25rem 0 1.25rem}
.social-row{display:flex;gap:.6rem;margin-top:1rem}
.social-row a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}
.social-row a:hover{background:var(--brand);transform:translateY(-2px)}

/* ---------- Scroll top ---------- */
.scroll-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;border:0;box-shadow:var(--shadow-md);display:none;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;z-index:1040;transition:transform .2s ease}
.scroll-top:hover{transform:translateY(-3px);background:var(--brand-dark)}
.scroll-top.show{display:flex}

/* ---------- Contact form ---------- */
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}
.contact-info{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:var(--radius-lg);padding:2rem;height:100%}
.contact-info h3{font-family:var(--font-display);font-weight:400;color:#fff}
.contact-info .info-item{display:flex;gap:.9rem;align-items:flex-start;margin-top:1.5rem}
.contact-info .info-item i{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.contact-info a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.form-label{font-weight:600;color:var(--ink);margin-bottom:.35rem}
.form-control,.form-select{border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-size:.95rem}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.alert{border-radius:14px;border:0;font-weight:500}
.alert-success{background:var(--success-light);color:var(--success-dark)}
.alert-danger{background:#FEE2E2;color:#B91C1C}

/* ---------- Animations ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.animate-in{opacity:0;animation:fadeInUp .7s ease forwards}
.animate-in.d1{animation-delay:.08s}
.animate-in.d2{animation-delay:.16s}
.animate-in.d3{animation-delay:.24s}
.animate-in.d4{animation-delay:.32s}
@media (prefers-reduced-motion: reduce){
  .animate-in{animation:none;opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .section{padding:64px 0}
  .hero{padding:64px 0 40px}
  .cta-band{padding:36px 24px}
  .calc-shell{padding:1.25rem}
}
@media (max-width: 575.98px){
  .navbar-brand{font-size:1.1rem}
  .brand-mark{width:32px;height:32px;font-size:.95rem}
  .btn-cta{padding:.45rem .9rem;font-size:.9rem}
  .section-title{font-size:1.6rem}
  .hero h1{font-size:2rem}
}

/* ---------- Utility ---------- */
.divider-soft{height:1px;background:var(--line);border:0;margin:1.5rem 0}
.badge-soft{background:var(--brand-light);color:var(--brand);font-weight:600;border-radius:999px;padding:.35rem .75rem}
.badge-soft.success{background:var(--success-light);color:var(--success-dark)}

::selection{background:var(--brand-light);color:var(--brand-dark)}