/* ==========================================================================
   Mojaz landing page — RTL, Bootstrap 5 RTL + custom CSS
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/cairo-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/cairo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-200B, U+200F-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playpen Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/playpen-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Playpen Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/playpen-sans-arabic-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Brand tokens ---------- */
:root {
  --mojaz-blue: #046E98;
  --light-blue: #5BB3E6;
  --pale-blue: #EAF4FB;
  --accent-tint: #DFF3EE;
  --white: #FFFFFF;

  --ink: #16283f;          /* headings */
  --ink-soft: #6a819a;     /* subtitle / nav */
  --ink-mute: #8a9eb0;     /* captions */
  --line: #e7eef5;

  --bs-body-font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: #fbfdff;
  --bs-link-color-rgb: 4, 110, 152;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--bs-body-font-family);
  background: #fbfdff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { text-decoration: none; }

.page {
  position: relative;
  /* clip (not hidden): hidden makes .page a scroll container, so anchor
     links like #features would scroll the wrapper and break the layout */
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
}

#features, #download { scroll-margin-top: 24px; }
.page > header,
.page > main,
.page > footer { position: relative; z-index: 1; }

/* Content column: matches the ~1000px design canvas */
.stage {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 0 16px;
}

/* ---------- Decorative background ---------- */
.page-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg { position: absolute; border-radius: 50%; }
.bg-tl { width: 520px; height: 520px; left: -370px; top: 70px; background: #eef5fc; }
.bg-tr { width: 560px; height: 560px; right: -130px; top: -350px; background: #eef5fc; }
.bg-mint-r { width: 400px; height: 400px; right: -250px; top: 210px; background: #e9f5f2; }
.bg-bl { width: 520px; height: 520px; left: -220px; bottom: -330px; background: #eef5fc; }
.bg-br { width: 460px; height: 460px; right: -190px; bottom: -250px; background: #eef5fc; }

/* ---------- Header / nav ---------- */
.site-header { padding-top: 22px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 10px;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--pale-blue);
  border: 1px solid #dcebf7;
  color: var(--ink);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.btn-download .bi { color: var(--mojaz-blue); font-size: 1.05rem; }
.btn-download:hover { background: #dfeef9; border-color: #cfe3f3; color: var(--ink); }

.nav-links {
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 32px;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding: 6px 0 10px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1rem;
  transition: color .15s;
}
.nav-links a:hover { color: var(--mojaz-blue); }
.nav-links a.active { color: var(--mojaz-blue); font-weight: 600; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--light-blue);
}

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: 12px; }

.hero-logo {
  display: block;
  margin: 0 auto;
  width: 132px;
  height: 132px;
  border-radius: 24%;
  box-shadow: 0 14px 30px -12px rgba(4, 110, 152, .45);
}

.hero-title {
  margin: 18px 0 0;
  text-wrap: balance;
  font-weight: 800;
  font-size: clamp(1.7rem, .7rem + 3.7vw, 3.2rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: 0;
}
.hero-title .accent { color: var(--mojaz-blue); }

.hero-sub {
  margin: 8px 0 0;
  font-weight: 500;
  font-size: clamp(1.05rem, .5rem + 2.2vw, 2rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-rule {
  display: block;
  width: 66px;
  height: 3px;
  margin: 17px auto 12px;
  border-radius: 3px;
  background: var(--light-blue);
}

.hero-tag-ar {
  margin: 0;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.hero-tag-en {
  margin: 2px 0 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-mute);
}

/* ---------- Main: phone + features ---------- */
.hero-main {
  --s: .9;                      /* phone scale */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-top: 28px;
  text-align: start;
}

.info-col { position: relative; padding-top: 0; }
.phone-col { position: relative; display: flex; justify-content: center; align-items: flex-start; }

.skyline { display: none; pointer-events: none; user-select: none; }

/* Feature cards */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 112px;
  padding-block: 14px;
  padding-inline: 22px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(30, 80, 130, .06);
}
.feature-text { flex: 1 1 auto; min-width: 0; text-align: start; }
.feature-text h2 { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.feature-text p { margin: 4px 0 0; font-size: .94rem; line-height: 1.55; color: var(--ink-mute); font-weight: 400; }

.feature-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 1.6rem;
}
.ico-blue { background: #e4f0fb; color: #1f7ec4; }
.ico-mint { background: var(--accent-tint); color: #2f8f83; }

/* Store buttons */
.store {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--pale-blue);
  border-radius: 28px;
}
.store-btn {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-family: -apple-system, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition: transform .15s;
}
.store-btn:hover { color: #fff; transform: translateY(-1px); }
.store-ico { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.store-ico.gp { width: 28px; height: 28px; }
.store-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.store-txt small { font-size: .62rem; font-weight: 500; letter-spacing: .02em; }
.store-txt b { font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; }

/* Handwritten note */
.note {
  display: none;
  position: absolute;
  z-index: 2;
  color: var(--ink-soft);
  font-family: "Playpen Sans Arabic", "Cairo", cursive;
  font-weight: 500;
}
.note p { margin: 0; font-size: 1.4rem; line-height: 1.5; text-align: center; transform: rotate(-14deg); }
.note svg { display: block; margin: 6px 0 0; margin-inline-end: 34px; }

/* Halo shapes behind the phone */
.halo, .halo-mint { position: absolute; border-radius: 50%; z-index: 0; }
.halo { width: 440px; height: 440px; inset-inline-end: -50px; top: 70px; background: radial-gradient(circle at 50% 50%, #e2eefa 0%, #e6f1fb 60%, rgba(230, 241, 251, .3) 100%); }
.halo-mint { width: 210px; height: 160px; inset-inline-end: -40px; top: 430px; background: #e2f2ee; opacity: .85; filter: blur(2px); }

/* ---------- Phone ---------- */
.phone-scaler {
  position: relative;
  z-index: 1;
  width: calc(350px * var(--s));
  height: calc(720px * var(--s));
  filter: drop-shadow(0 34px 34px rgba(15, 55, 95, .28));
}

.phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  height: 720px;
  padding: 9px;
  border-radius: 58px;
  background: linear-gradient(140deg, #4a4f57 0%, #14161a 22%, #0b0c0e 60%, #30343b 100%);
  box-shadow:
    inset 0 0 0 2px #7a808a,
    inset 0 0 0 4px #15171b,
    -6px 1px 0 -1px #1b1e23,
    -10px 3px 0 -2px #444a53;
  transform: translate(-50%, -50%) perspective(1500px) rotateY(29deg) rotateZ(-3deg) scale(var(--s));
  transform-origin: center;
}

.side-btn { position: absolute; left: -4px; width: 4px; border-radius: 3px 0 0 3px; background: #5c626c; }
.sb-1 { top: 118px; height: 30px; }
.sb-2 { top: 176px; height: 56px; }
.sb-3 { top: 244px; height: 56px; }

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 49px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: "Cairo", sans-serif;
}
.island {
  position: absolute; z-index: 3; top: 10px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 30px; border-radius: 20px; background: #050506;
}
.status { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 0 30px; height: 46px; font-size: 13px; font-weight: 700; }
.sys { display: flex; gap: 5px; font-size: 14px; }

.app-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 20px 0; }
.wordmark { font-size: 33px; font-weight: 800; color: var(--mojaz-blue); line-height: 1.2; }
.loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #3a4f66; }
.loc .bi-geo-alt-fill { color: #1f86d0; font-size: 12px; }
.loc .bi-chevron-down { font-size: 9px; }

.app-search { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; }
.app-search .filter {
  flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: #fff; border: 1px solid #e4ecf4; box-shadow: 0 4px 10px rgba(30, 80, 130, .06); color: #1f6ea8; font-size: 14px;
}
.app-search .field {
  flex: 1 1 auto; height: 38px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border-radius: 12px; background: #f4f7fb; color: #a3b3c3; font-size: 11.5px;
}
.app-search .field em { font-style: normal; }

.car-main {
  margin: 14px 14px 0; border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 10px 26px rgba(30, 80, 130, .12); border: 1px solid #edf2f7;
}
.car-photo { position: relative; overflow: hidden; }
.car-photo img { display: block; width: 100%; object-fit: cover; }
.car-main .car-photo { height: 174px; }
.car-main .car-photo img { height: 174px; }
.badge-pick {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 10px; background: var(--mojaz-blue); color: #fff; font-size: 11px; font-weight: 700;
}
.badge-pick .bi { font-size: 10px; }
.fav {
  position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .28); color: #fff; font-size: 14px; backdrop-filter: blur(2px);
}
.car-body { padding: 8px 14px 10px; }
.car-body h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.car-body p { margin: 0; font-size: 10.5px; color: #93a4b4; line-height: 1.5; }
.car-body p b { padding: 0 3px; font-weight: 400; }
.price { display: block; margin-top: 2px; font-size: 20px; font-weight: 800; color: #1573b8; line-height: 1.3; }
.price small { font-size: 12px; font-weight: 700; }

.car-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 14px 0; }
.car-mini { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px rgba(30, 80, 130, .1); border: 1px solid #edf2f7; }
.car-mini .car-photo, .car-mini .car-photo img { height: 112px; }
.car-mini .fav { width: 22px; height: 22px; right: 7px; top: 7px; font-size: 12px; }
.car-mini .car-body { padding: 6px 10px 8px; }
.car-mini h3 { font-size: 10.5px; }
.car-mini .price { font-size: 13px; }
.car-mini .price small { font-size: 9px; }

.tabbar {
  display: flex; margin-top: auto; padding: 8px 6px 20px; border-top: 1px solid #eef2f6; background: #fff;
}
.tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 9px; color: #9aaabb; font-weight: 500; }
.tab .bi { font-size: 18px; }
.tab.on { color: #1573b8; font-weight: 700; }
.home-ind { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 112px; height: 4px; border-radius: 4px; background: #0b0c0e; }

/* ---------- Footer ---------- */

/* ---------- Mobile nav wrap ---------- */
@media (max-width: 767.98px) {
  .phone-col { order: -1; }
}
@media (max-width: 575.98px) {
  .site-nav { justify-content: center; }
  .nav-actions { width: 100%; justify-content: center; gap: 8px; }
  .btn-download { padding: 0 16px; gap: 8px; height: 44px; font-size: .9rem; }
  .store { padding: 14px 12px; gap: 10px; }
  .store-btn { flex: 1 1 0; padding: 0 8px; gap: 6px; min-height: 54px; }
  .store-ico { font-size: 1.6rem; }
  .store-ico.gp { width: 24px; height: 24px; }
  .store-txt b { font-size: 1rem; white-space: nowrap; }
  .store-txt small { white-space: nowrap; }
          .nav-links { order: 2; width: 100%; justify-content: center; gap: 26px; }
  .hero-main { --s: .88; }
}

/* ---------- Tablet (2-up, reduced phone + cards) ---------- */
@media (min-width: 768px) {
  .site-header { padding-top: 44px; }
  .site-nav { flex-wrap: nowrap; }
  .btn-download { height: 55px; padding: 0 26px; font-size: 1rem; }
  .nav-links { gap: 42px; }

  .hero { padding-top: 0; }
  .hero-logo { width: 158px; height: 158px; margin-top: 10px; }
  .hero-title { margin-top: 20px; }
  .hero-tag-ar { font-size: 1.05rem; }

  .hero-main {
    --s: .8;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
    align-items: start;
  }
  .info-col { padding-top: 110px; }
  .phone-col { justify-content: flex-start; padding-inline-start: 0; }
  .phone-scaler { margin-inline-end: 24px; }

  .feature { padding-inline: 32px 20px; }
  .feature-ico { width: 62px; height: 62px; font-size: 1.75rem; }
  .skyline { display: block; position: absolute; z-index: 0; top: -20px; inset-inline-start: -80px; width: 320px; opacity: .8; }
  .features, .store { position: relative; z-index: 1; }

  .note { display: block; inset-inline-end: -8px; top: 240px; }
  .halo { inset-inline-end: -70px; top: 60px; width: 380px; height: 380px; }
  .halo-mint { inset-inline-end: -50px; top: 390px; }

  .store { flex-wrap: nowrap; padding: 16px 18px; gap: 10px; }
  .store-btn { flex: 1 1 0; padding: 0 10px; gap: 8px; }
  .store-txt b { font-size: 1.05rem; }
}

/* ---------- Desktop: pixel target ---------- */
@media (min-width: 1100px) {
  .hero-logo { width: 172px; height: 172px; margin-top: -23px; }
  .hero-title { margin-top: 22px; }
  .hero-sub { font-size: 1.9rem; }
  .hero-rule { margin: 18px auto 14px; }
  .hero-tag-ar { font-size: 1.05rem; }
  .hero-tag-en { font-size: .75rem; }

  .hero-main { --s: 1.02; grid-template-columns: 484px minmax(0, 1fr); margin-top: -8px; gap: 0; }
  .info-col { padding-top: 176px; margin-inline-start: 3px; }
  .features { width: 388px; margin-inline: auto 10px; }
  .feature { min-height: 112px; padding-inline: 40px 20px; }
  .feature-ico { width: 66px; height: 66px; font-size: 1.85rem; }
  .store { margin-top: 26px; padding: 18px 32px; gap: 28px; border-radius: 28px; }
  .store-btn { flex: 0 0 auto; min-width: 184px; padding: 0 20px; }
  .store-btn:last-child { min-width: 204px; }
  .store-txt b { font-size: 1.38rem; }

  .skyline { top: -6px; inset-inline-start: min(-175px, calc((100vw - 1000px) / -2 - 16px)); width: 470px; }
  .phone-scaler { margin-inline-end: -34px; margin-top: 14px; }
  .note { inset-inline-end: -70px; top: 250px; }
  .halo { inset-inline-end: -150px; top: 90px; width: 470px; height: 470px; }
  .halo-mint { inset-inline-end: -130px; top: 450px; width: 210px; height: 160px; }
}



/* ==========================================================================
   Language switch + secondary tagline
   ========================================================================== */
.nav-actions { display: flex; align-items: center; gap: 12px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border: 1px solid #dcebf7;
  border-radius: 999px;
  background: var(--white);
  color: var(--mojaz-blue);
  font-weight: 600;
  font-size: .9rem;
}
.lang-switch:hover { background: var(--pale-blue); color: var(--mojaz-blue); }

/* Arabic used as the small secondary line in the English page: no letter-spacing (it breaks joined letters) */
.hero-tag-en.is-alt { letter-spacing: 0; font-size: .95rem; }

/* ==========================================================================
   English / LTR overrides.
   Flex/grid order and the logical properties above already mirror the layout;
   what is left is transforms, shadows, and the in-phone UI.
   ========================================================================== */
html[dir="ltr"] .page-bg { transform: scaleX(-1); }   /* mirror the decorative circles */
html[dir="ltr"] .skyline { transform: scaleX(-1); }

html[dir="ltr"] .phone {
  background: linear-gradient(220deg, #4a4f57 0%, #14161a 22%, #0b0c0e 60%, #30343b 100%);
  box-shadow:
    inset 0 0 0 2px #7a808a,
    inset 0 0 0 4px #15171b,
    6px 1px 0 -1px #1b1e23,
    10px 3px 0 -2px #444a53;
  transform: translate(-50%, -50%) perspective(1500px) rotateY(-29deg) rotateZ(3deg) scale(var(--s));
}
html[dir="ltr"] .side-btn { left: auto; right: -4px; border-radius: 0 3px 3px 0; }

html[dir="ltr"] .note p { transform: rotate(14deg); }
html[dir="ltr"] .note svg { transform: scaleX(-1); }

/* In-app UI reads left-to-right: wordmark left, location right; filter button right; icon before placeholder */
html[dir="ltr"] .app-head,
html[dir="ltr"] .app-search { flex-direction: row-reverse; }
html[dir="ltr"] .app-search .field { flex-direction: row-reverse; justify-content: flex-start; gap: 8px; }
html[dir="ltr"] .wordmark { letter-spacing: -.01em; }

/* English copy is longer than the Arabic: scale the hero type down a little */
html[lang="en"] .hero-title { font-size: clamp(1.6rem, .7rem + 3vw, 2.7rem); }
html[lang="en"] .hero-sub { font-size: clamp(1rem, .6rem + 1.7vw, 1.55rem); }
html[lang="en"] .note p { font-size: 1.25rem; }

/* The handwritten note has no room beside the phone on tablet-width English (phone column sits at the screen edge) */
@media (max-width: 1099.98px) {
  html[dir="ltr"] .note { display: none; }
}

/* ==========================================================================
   Footer — light, 3 columns (brand · navigation · contact), skyline base
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: 40px;
  padding: 52px 0 0;
  background: #fbfdff;
  border-top: 1px solid #dbe7f1;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.footer-inner {
  position: relative;
  width: 100%;
  padding-inline: clamp(20px, 6.5vw, 120px);
  padding-bottom: 28px;
}
.footer-inner .row { --bs-gutter-x: 32px; }

/* Brand */
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.footer-logo { display: inline-flex; }
.footer-logo img { width: clamp(84px, 8vw, 128px); height: auto; display: block; }
.footer-tagline { margin: 0; text-wrap: balance; max-width: 26ch; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink); line-height: 1.6; }

/* Navigation */
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 10px; }
.footer-nav li { white-space: nowrap; }
.footer-nav li + li { border-inline-start: 1px solid #d7e3ee; margin-inline-start: clamp(14px, 1.7vw, 26px); padding-inline-start: clamp(14px, 1.7vw, 26px); }
.footer-nav a { color: var(--mojaz-blue); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.25rem); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: #035a7d; text-decoration: underline; text-underline-offset: 6px; }

/* Contact */
.footer-contact { display: flex; justify-content: flex-end; }
.contact-block { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; direction: ltr; }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social a {
  width: 50px; height: 50px; border-radius: 50%; background: var(--pale-blue); color: var(--mojaz-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.footer-social a:hover, .footer-social a:focus-visible { background: var(--mojaz-blue); color: #fff; }
.footer-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-info a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.footer-info a:hover { color: var(--mojaz-blue); }
.footer-info .bi { color: var(--mojaz-blue); font-size: 1.4rem; line-height: 1; }

/* Copyright */
.footer-bottom { margin-top: 40px; padding-top: 18px; border-top: 1px solid #e3ecf4; text-align: center; }
.footer-bottom p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.footer-bottom .footer-credit { margin-top: 6px; font-size: .92rem; color: var(--ink-mute); }
.footer-credit a { color: var(--mojaz-blue); font-weight: 600; text-decoration: none; }
.footer-credit a:hover, .footer-credit a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Intentionally near-invisible admin entry point; a small hit-area, no visible mark. */
.footer-admin-dot { display: inline-block; width: 10px; height: 10px; margin-inline-start: 2px; vertical-align: middle; opacity: 0; }

/* LTR: the contact column sits on the right, decoration mirrors */

@media (max-width: 991.98px) {
  .site-footer { padding-top: 36px; }
  .footer-inner { padding-bottom: 22px; }
  .footer-contact { justify-content: center; }
  .contact-block { align-items: center; }
  .footer-info { align-items: flex-start; }
  .footer-nav li + li { margin-inline-start: 18px; padding-inline-start: 18px; }
  .footer-bottom { margin-top: 28px; }
}