/* =========================================================
   SILAM FINANCE — SHARED SITE CHROME
   One header + one footer used by every page.
   Load this file before page-specific CSS.
   ========================================================= */

:root{
  /* Shared design tokens */
  --site-paper:#fff8e7;
  --site-sky:#8cc1e9;
  --site-blue:#0055a0;
  --site-ocean:#12284b;
  --site-gold:#d6b45a;
  --site-white:#fff;
  --site-copy:#45627a;
  --site-line:rgba(18,40,75,.10);
  --site-nav-height:82px;

  /* Page aliases — keep one source of truth across all pages */
  --paper:var(--site-paper);
  --paper-deep:#f4ead4;
  --sky:var(--site-sky);
  --sky-light:#b9ddf2;
  --bluebird:#438bc4;
  --blueberry:var(--site-blue);
  --ocean:var(--site-ocean);
  --navy:var(--site-ocean);
  --navy-dark:#0b1f33;
  --navy-soft:#173653;
  --ink:#173653;
  --text:#173653;
  --copy:var(--site-copy);
  --text-soft:#60778c;
  --text-muted:#8092a1;
  --blue:#1769aa;
  --blue-dark:#0f4f82;
  --blue-light:#8fc4e8;
  --blue-pale:#eaf5fb;
  --gold:var(--site-gold);
  --gold-light:#ead49a;
  --gold-pale:#fbf3d9;
  --white:var(--site-white);
  --line:var(--site-line);
  --border:rgba(16,42,67,.12);
  --border-strong:rgba(16,42,67,.2);
  --border-light:rgba(255,255,255,.2);
  --shadow:0 18px 50px rgba(18,40,75,.10);
  --shadow-sm:0 8px 24px rgba(16,42,67,.07);
  --shadow-md:0 18px 48px rgba(16,42,67,.11);
  --shadow-lg:0 30px 80px rgba(16,42,67,.15);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-xl:34px;
  --transition:all .28s cubic-bezier(.2,.8,.2,1);
  --nav-height:var(--site-nav-height);
}

/* ---------- HEADER ---------- */
.custom-nav{
  z-index:1030;
  min-height:var(--site-nav-height);
  padding-block:14px;
  background:rgba(255,248,231,.78)!important;
  border-bottom:1px solid rgba(18,40,75,.08);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.custom-nav.scrolled{
  background:rgba(255,248,231,.96)!important;
  box-shadow:0 8px 28px rgba(18,40,75,.08);
}
.navbar-brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:0;
  color:var(--site-ocean)!important;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
}
.navbar-brand span{
  color:var(--site-blue);
  font-size:.65rem;
  letter-spacing:.12em;
}
.navbar-logo{
  display:block;
  width:145px;
  height:auto;
  object-fit:contain;
}
.navbar .nav-link{
  position:relative;
  padding:.55rem .75rem!important;
  color:var(--site-ocean)!important;
  font-size:.86rem;
  font-weight:600;
  transition:color .2s ease;
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:.2rem;
  height:2px;
  border-radius:999px;
  background:var(--site-blue);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link.active-page{
  color:var(--site-blue)!important;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after,
.navbar .nav-link.active-page::after{
  transform:scaleX(1);
}
.navbar-toggler{
  border:0;
  padding:.4rem .55rem;
  color:var(--site-ocean);
  box-shadow:none!important;
}
.navbar-toggler i{font-size:1.5rem}
.custom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--site-blue);
  color:var(--site-white)!important;
  font-weight:700;
  line-height:1;
  box-shadow:0 10px 28px rgba(0,85,160,.20);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.custom-btn:hover{
  transform:translateY(-2px);
  background:var(--site-ocean);
  box-shadow:0 14px 34px rgba(18,40,75,.20);
}
.custom-btn-lg{min-height:54px;padding-inline:25px}
.nav-cta{margin-left:8px}

/* ---------- FOOTER ---------- */
.site-footer{
  background:
    radial-gradient(ellipse 65% 70% at 80% 0%,rgba(0,85,160,.34),transparent 65%),
    #0a1a31;
  color:var(--site-white);
  padding-top:85px;
}
.footer-top,
.footer-grid{
  display:grid;
  grid-template-columns:1.45fr .8fr .8fr 1fr;
  gap:55px;
  padding-bottom:55px;
}
.footer-grid{grid-template-columns:1.45fr .8fr .8fr}
.footer-logo{display:inline-block;margin-bottom:18px}
.footer-logo-img{
  width:170px;
  height:auto;
  max-height:60px;
  object-fit:contain;
  object-position:left center;
}
.footer-brand>p{
  max-width:360px;
  margin:0;
  color:rgba(255,255,255,.66);
  font-size:.85rem;
  line-height:1.75;
}
.footer-socials{display:flex;gap:10px;margin-top:22px}
.footer-socials a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  color:var(--site-sky);transition:background .2s ease,transform .2s ease;
}
.footer-socials a:hover{transform:translateY(-2px);background:rgba(140,193,233,.12)}
.footer-column h4,
.footer-areas h4,
.footer-disclaimer h4,
.site-footer h4{
  margin:0 0 18px;
  color:var(--site-white);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.footer-column ul{padding:0;margin:0;list-style:none}
.footer-column li{margin-bottom:10px}
.footer-column a,
.footer-contact>a,
.footer-contact .footer-address,
.site-footer a{
  color:rgba(255,255,255,.68);
  font-size:.82rem;
  line-height:1.6;
  transition:color .2s ease;
}
.footer-column a:hover,
.footer-contact>a:hover,
.site-footer a:hover{color:var(--site-sky)}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start}
.footer-contact>a{display:inline-flex;align-items:center;gap:9px;margin-bottom:11px}
.footer-contact i,.footer-address i{color:var(--site-gold)}
.footer-address{display:flex;gap:10px;align-items:flex-start}
.footer-cta{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  margin-top:16px!important;
  color:var(--site-sky)!important;
  font-weight:700;
}
.footer-areas{
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.footer-areas p,.footer-disclaimer p{
  margin:0;
  color:rgba(255,255,255,.56);
  font-size:.76rem;
  line-height:1.8;
}
.footer-disclaimer{padding:30px 0}
.footer-disclaimer p+p{margin-top:10px}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0 30px;
  border-top:1px solid rgba(255,255,255,.09);
}
.footer-bottom p{margin:0;color:rgba(255,255,255,.45);font-size:.72rem}
.footer-bottom>div{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
}
.footer-bottom a{color:rgba(255,255,255,.55);font-size:.72rem}
.footer-bottom a:hover{color:var(--site-sky)}

.scroll-top{
  position:fixed;
  right:24px;bottom:24px;z-index:1020;
  width:46px;height:46px;display:grid;place-items:center;
  border:0;border-radius:50%;
  background:var(--site-blue);color:var(--site-white);
  box-shadow:0 12px 30px rgba(18,40,75,.22);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s ease;
}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--site-ocean)}

@media(max-width:1199.98px){
  .footer-top{grid-template-columns:1.2fr 1fr 1fr}
  .footer-contact{grid-column:span 3}
}
@media(max-width:991.98px){
  :root{--site-nav-height:74px}
  .custom-nav{padding-block:10px}
  .navbar-logo{width:115px}
  .navbar-collapse{
    margin-top:10px;padding:12px;border-radius:0 0 18px 18px;
    background:rgba(255,248,231,.98);
    box-shadow:0 18px 35px rgba(18,40,75,.08);
  }
  .navbar .nav-link{padding:.65rem .75rem!important}
  .navbar .nav-link::after{display:none}
  .nav-cta{margin:8px 0 0;width:100%}
  .footer-top,.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-contact{grid-column:auto}
}
@media(max-width:767.98px){
  .footer-top,.footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-contact{grid-column:auto}
  .footer-bottom{align-items:flex-start;flex-direction:column}
  .footer-bottom>div{justify-content:flex-start}
  .scroll-top{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .custom-btn:hover,.scroll-top:hover{transform:none}
}