/* ========== Design Tokens ========== */
:root{
  --primary:#139fe6;
  --primary-2:#0f63c8;
  --primary-dark:#0d8abc;
  --accent:#38b6ff;
  --ink:#223454;
  --muted:#5b6b84;
  --soft:#f6f8fb;
  --soft-2:#eef4fb;
  --bg-soft:#f5f9ff;
  --panel:#ffffff;
  --white:#ffffff;
  --border:#dbe6f5;
  --shadow:0 8px 28px #c8d4e540, 0 2px 10px #d0dbec30;
  --radius:14px;
  --link-pill:#edf3ff;
  --contact-icon-offset:52px;
}
/* ========== Base Reset ========== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:#fbfdff }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  line-height:1.45;
}
/* ========== Utilities ========== */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 16px }
.ti{ display:inline-block } /* tabler-like helper */
a{ -webkit-tap-highlight-color:transparent }
/* =================================
   Topbar
================================== */
.topbar{
  /* Changed from gradient to solid color for dynamic inline styling */
  background-color: var(--primary);
  color:#fff; font-size:.95rem; position:relative; z-index:5;
}
.topbar-inner{
  min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar-left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.tb-item{ display:flex; align-items:center; gap:10px }
.tb-icon.badge{
  width:30px;height:30px;border-radius:10px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: saturate(140%) blur(2px);
}
.tb-icon.badge i{ font-size:15px; color:#fff }
.tb-text{ font-weight:700; letter-spacing:.2px; opacity:.98 }
.topbar-right.social-icons{ display:flex; align-items:center; gap:10px }
.topbar-right.social-icons a{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  transition: background .15s ease,color .15s ease,transform .15s ease;
}
.topbar-right.social-icons a:hover{ background:#fff; color:#0b78b2; transform:translateY(-1px) }
@media (max-width:600px){
  .tb-text{ font-weight:600; font-size:.9rem }
  .topbar-inner{ gap:12px }
}
/* =================================
   Header
================================== */
.header{
  position:sticky; top:0; z-index:60;
  background:#fff; border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none }
.logo img{ height:64px; width:auto; border-radius:12px; background:#fff }
.logo-text{ font-weight:900; color:var(--primary-2); font-size:1.28rem; letter-spacing:.2px }
.nav-toggle{ display:none }
.nav-toggle-btn{
  display:none; width:46px; height:42px; border-radius:12px; border:1px solid var(--border);
  align-items:center; justify-content:center; background:#fff; cursor:pointer;
}
.nav-toggle-btn span{ display:block; width:22px; height:2px; background:#2a4570; margin:4px 0 }
.nav-menu{ position:relative }
.nav-menu ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px }
.nav-menu li{ display:flex }
.nav-menu a{
  text-decoration:none; color:#2a4570; font-weight:700; letter-spacing:.2px;
  padding:10px 16px; border-radius:12px; transition:none; transform:none; box-shadow:none;
}
.nav-menu a:hover{ background:#eef4fb; color:#0f63c8 }
.nav-menu a.active{ background:#139fe6; color:#fff !important }
@media (max-width:1024px){
  .logo img{ height:56px }
  .header-inner{ min-height:74px }
}
@media (max-width:600px){
  .logo img{ height:48px }
  .header-inner{ min-height:72px }
}
@media (max-width:900px){
  .nav-toggle-btn{ display:flex }
  .nav-menu{
    position:absolute; left:0; right:0; top:78px; display:none;
    background:#fff; border-bottom:1px solid var(--border);
  }
  .nav-menu ul{ flex-direction:column; gap:6px; padding:12px 12px 14px }
  .nav-menu a{ width:100% }
  .nav-toggle:checked ~ .nav-menu{ display:block }
}
/* =================================
   Footer v3
================================== */
.footer-wrap.v3{
  background: var(--bg-soft);
  border-top:1px solid var(--border);
  padding:36px 0 0 0;
  margin:0;
}
.footer-grid.v3{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap:28px;
  align-items:start;
  margin-bottom:12px;
}
/* Brand */
.footer-brand.v3{ text-align:center; padding:0 10px }
.footer-brand.v3 .brand-logo{
  max-width:120px; height:auto;
  background: transparent !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important;
}
.footer-brand.v3 .brand-name{ margin:12px 0 6px 0; font-size:22px; font-weight:900; color:#0f63c8 }
.footer-brand.v3 .brand-tagline{ margin:0 0 10px 0; font-size:15.5px; color:#3f5f8a; font-weight:600; line-height:1.5 }
.footer-brand.v3 .brand-note{ margin:6px 0 0 0; font-size:14px; color:#5a7091; font-weight:600 }
/* Quick Links */
.footer-links.v3{ text-align:center }
.footer-links.v3 h4{ color:#0f63c8; margin:0 0 12px 0; font-size:18.5px; font-weight:900 }
.links-center{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:10px; align-items:center
}
.links-center li{ width:100%; max-width:240px }
.links-center a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; color:#2e4d7a; font-weight:800;
  background:var(--link-pill); border:1px solid var(--border);
  padding:10px 14px; border-radius:12px
}
/* Contact centered */
.footer-contact.v3{ text-align:center }
.footer-contact.v3 .center-title{ color:#0f63c8; margin:0 0 12px 0; font-size:18.5px; font-weight:900 }
.footer-contact.v3 .contact-lines{ display:inline-block; text-align:left }
.footer-contact.v3 .contact-lines p{
  display:flex; align-items:center; gap:10px; margin:0 0 10px 0;
  color:#263e63; font-weight:800; font-size:15.5px
}
.footer-contact.v3 .contact-lines .ci{
  min-width:34px; height:34px; border-radius:10px; background:#edf3ff;
  border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center
}
.footer-contact.v3 .contact-lines .ci i{ color:#139fe6; font-size:15px }
.footer-contact.v3 .contact-lines p .ctxt{ margin-left:8px; display:inline-block }
/* avoid duplicate icons if both fonts loaded */
.footer-contact.v3 .contact-lines .ci .ti + .fa-solid,
.footer-contact.v3 .contact-lines .ci .fa-solid + .ti{ display:none }
/* Subscribe + Social align with icon start */
.align-with-icons{ margin-left: var(--contact-icon-offset) !important }
.subscribe-form.v3{ margin-top:12px; display:flex; max-width:360px }
.subscribe-form.v3 input[type="email"]{
  flex:1; padding:11px 14px; border:2px solid #d3e3f3; background:#fff;
  border-radius:12px 0 0 12px; font-size:1rem
}
.subscribe-form.v3 button{
  display:flex; align-items:center; gap:8px; padding:11px 18px;
  border:none; background:#139fe6; color:#fff; border-radius:0 12px 12px 0; font-weight:800
}
.social-block{ margin-top:16px; text-align:left }
.social-label{ display:block; font-size:14.5px; font-weight:800; color:#3f5f8a; margin-bottom:8px }
.social-icons.v3{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start }
.social-icons.v3 a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:#139fe6; background:#eaf2fd; border:1px solid var(--border); border-radius:50%
}
/* =================================
   Bottombar (Modern)
================================== */
.bottombar{
  /* Changed from gradient to solid background-color for dynamic inline colors */
  background-color: var(--bg-soft);
  /* subtle top accent line in primary tint */
  border-top:2px solid rgba(19,159,230,.35);
  padding:8px 0;              /* was 14px -> tighter */
  margin-top:0 !important;
  color:#3f5473;
}
.bottombar-inner{
  min-height:38px;            /* was 48px -> compact */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;                   /* was 16px */
}
.bb-left{ display:flex; align-items:center }
.bb-copy{
  font-size:13.5px;           /* a bit smaller */
  font-weight:800;
  letter-spacing:.2px;
  color:#4b6386;
  opacity:.95;
}
/* Minimal rounded chips */
.bb-right{ display:flex; align-items:center; gap:6px }  /* tighter gap */
.bb-chip{
  --chip-bg: #eaf4ff;         /* slightly stronger tint */
  --chip-br: #cfe2ff;
  display:inline-flex; align-items:center; justify-content:center;
  height:28px;                /* was 32px */
  padding:0 10px;             /* was 12px */
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-br);
  color:#2e4f7d;
  text-decoration:none;
  font-size:13px;             /* was 13.5px */
  font-weight:800;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.bb-chip:hover{
  background:#dff0ff;
  border-color:#bcd9ff;
  color:#0f63c8;
  transform:translateY(-1px);
}
.bb-chip:focus-visible{ outline:2px solid #9cc8ff; outline-offset:2px }
/* Mobile: still super-clean */
@media (max-width:720px){
  .bottombar-inner{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:8px;
    min-height:unset;        /* allow natural height */
  }
  .bb-right{ display:none }
}
/* =================================
   Responsive tweaks
================================== */
@media (max-width:1000px){ .footer-grid.v3{ grid-template-columns: 1fr 1fr } }
@media (max-width:650px){
  .footer-grid.v3{ grid-template-columns: 1fr; gap:18px }
  .footer-brand.v3 .brand-logo{ max-width:105px }
}
