:root{
  --ink:#0b1220;
  --muted:#6b7280;
  --bg:#ffffff;
  --page:#f6f8fc;
  --line:#e5e7eb;
  --blue:#0b57d0;
  --shadow:0 16px 40px rgba(15,23,42,.10);
  --r:18px;

  /* ✅ IMPORTANT: site container width */
  --container:1450px;
}

*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden} /* ✅ prevent horizontal scroll */
body{
  margin:0;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* ✅ MAIN PAGE WRAP */
main.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 16px 56px;
}

/* =========================
   HEADER
========================= */
.siteHeader{
  width:100%;
  background:#c7eeff;
  border-bottom:1px solid #eef2f7;
}

.headerIn{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brandCenter{
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;                 /* ✅ allow shrink */
  justify-content:center;      /* ✅ keep centered */
  min-width:0;                 /* ✅ ellipsis works */
}

.logoBox{
  width:54px;
  height:54px;
  border-radius:14px;
  border:2px solid var(--blue);
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow:0 10px 22px rgba(11,87,208,.10);
  flex:0 0 auto;              /* ✅ don't shrink logo */
}
.logoBox img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.logoBox span{
  font-weight:900;
  font-size:22px;
  color:var(--blue);
  font-family: Arial, system-ui, sans-serif;
}

/* ✅ Title text responsive + no overflow */
.titleWrap{
  line-height:1.1;
  text-align:center;
  min-width:0;                /* ✅ allow ellipsis */
  max-width:calc(100% - 70px);
}
.titleWrap h1{
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;         /* ✅ keep one line */
}
.titleWrap p{
  margin:6px 0 0;
  color:#111827;
  font-weight:800;
  letter-spacing:.2px;

  /* ✅ prevent subtitle breaking layout */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* ✅ optional pill style (matches your UI) */
  display:inline-block;
  background:#eaf2ff;
  border:1px solid rgba(11,87,208,.16);
  padding:6px 14px;
  border-radius:999px;
}

/* =========================
   ✅ FOOTER (SINGLE LINE FIX)
========================= */
.siteFooter{
  width:100%;
  border-top:1px solid #eef2f7;
  background:#fff;
}

/* ✅ single row always */
.footerIn{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.copy{
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--muted);
  font-weight:800;
  font-size:14px;
}

.footLinks{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.footLinks a{
  color:var(--blue);
  text-decoration:none;
  font-weight:900;
  font-size:13px;

  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(11,87,208,.14);
  background:#fff;
  box-shadow:0 10px 18px rgba(2,6,23,.06);
  white-space:nowrap;
}
.footLinks a:hover{
  box-shadow:0 14px 22px rgba(2,6,23,.10);
}

/* =========================
   FLOATING SOCIAL (RIGHT CENTER)
========================= */
.floatSocial{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:6000; /* ✅ above content */
}

.socIcon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  display:grid;
  place-items:center;
  text-decoration:none;
}

.socIcon svg{
  width:22px;height:22px;
  fill:var(--blue);
}

.socIcon:hover{
  border-color:rgba(11,87,208,.35);
  box-shadow:0 14px 30px rgba(11,87,208,.12);
}

/* =========================
   FLOATING HOME (BOTTOM RIGHT)
========================= */
.floatHome{
  position:fixed;
  right:16px;
  bottom:16px;
  width:58px;
  height:58px;
  border-radius:999px;
  background:var(--blue);
  display:grid;
  place-items:center;
  z-index:6500; /* ✅ above social bar */
  box-shadow:0 18px 40px rgba(11,87,208,.28);
  text-decoration:none;
}

.floatHome svg{
  width:26px;height:26px;
  fill:#fff;
}

/* =========================
   ✅ RESPONSIVE (FIX MOBILE)
========================= */
@media(max-width:720px){
  .headerIn{padding:12px 12px}
  .brandCenter{gap:10px}

  .titleWrap h1{font-size:24px}
  .titleWrap p{font-size:13px; padding:6px 10px; max-width:86vw}

  .logoBox{width:48px;height:48px}
  .logoBox span{font-size:20px}

  /* ✅ IMPORTANT: turn social into bottom bar */
  .floatSocial{
    left:10px;
    right:10px;
    top:auto;
    bottom:10px;
    transform:none;

    flex-direction:row;
    justify-content:space-around;
    gap:10px;

    padding:10px;
    background:#fff;
    border:1px solid rgba(2,6,23,.10);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(2,6,23,.10);
  }

  .socIcon{
    width:44px;
    height:44px;
    border-radius:14px;
  }
  .socIcon svg{width:20px;height:20px}

  /* ✅ Home button above bottom bar */
  .floatHome{
    right:12px;
    bottom:86px;  /* ✅ push up */
    width:54px;
    height:54px;
  }
  .floatHome svg{width:24px;height:24px}
}

@media(max-width:420px){
  .titleWrap h1{font-size:21px}
  .titleWrap p{font-size:12px; max-width:82vw}
}