/* ==========================================================================
   PMB Tijari home page (marketing header, hero explorer, SME Financing,
   how it works). Loaded only by the home page, on top of public.css, so
   the apply journey keeps its own look.
   ========================================================================== */
.pub-home { --pub-max: 1360px; --mk-navy: #0b1d45; --mk-navy-2: #12306b; --mk-ink: #0b1324; --mk-muted: #5b6475; }
.pub-home .pub-section, .mk-solutions, .mk-how, .mk-hero { scroll-margin-top: 84px; }

/* Hero -------------------------------------------------------------------- */
/* Kuala Lumpur skyline photo under a navy scrim: darkest behind the copy
   on the left so the headline stays readable, lighter to the right so the
   towers and sunset still show. */
.mk-hero {
  position: relative; overflow: hidden;
  background: #0b1d45 url('../images/hero-kl-skyline.jpg') center 35% / cover no-repeat;
}
.mk-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 20, 50, .88) 0%, rgba(8, 20, 50, .72) 38%, rgba(8, 20, 50, .28) 70%, rgba(8, 20, 50, .12) 100%),
    linear-gradient(0deg, rgba(8, 20, 50, .45) 0%, transparent 35%);
}
.mk-hero .mk-hero-copy h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.mk-hero .mk-hero-copy h1 span { background: linear-gradient(90deg, #60a5fa, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.mk-hero .mk-lead { color: rgba(255, 255, 255, .86); }
.mk-hero .mk-cta.outline { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(4px); }
.mk-hero .mk-cta.outline:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: #fff; }
.mk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-top: calc(64px + 80px); padding-bottom: 72px; }
.mk-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid #dbe5f5; box-shadow: 0 4px 14px rgba(15, 35, 80, .06);
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-0);
}
.mk-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-0); box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.mk-hero h1 {
  margin: 34px 0 26px; font-size: clamp(42px, 5.2vw, 80px); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.05em; color: var(--mk-ink);
}
.mk-hero h1 span { display: block; white-space: nowrap; background: linear-gradient(90deg, #2563eb, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-lead { margin: 0 0 36px; max-width: 560px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; color: var(--mk-muted); }
.mk-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.mk-cta { padding: 20px 30px; font-size: 16.5px; border-radius: 10px; min-width: 188px; }
.mk-cta.outline { color: var(--mk-ink); border-color: #c9d6ea; }
.mk-cta.outline:hover { color: var(--accent-0); }

/* Strip ------------------------------------------------------------------- */
.mk-strip { background: var(--mk-navy); color: #fff; }
.mk-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-strip-grid > * { display: flex; align-items: center; gap: 12px; padding: 30px 0 30px 28px; font-size: 17px; font-weight: 600; border-left: 1px solid rgba(255, 255, 255, .12); }
.mk-strip-grid > :first-child { padding-left: 0; border-left: 0; font-weight: 700; }
.mk-strip-grid svg { color: #8fb3ff; }

/* SME Financing ------------------------------------------------------------ */
.mk-solutions { position: relative; overflow: hidden; padding: 80px 0 90px; background: #f8fbff; }
.mk-solutions::before, .mk-solutions::after { /* decorative arcs, top right */
  content: ""; position: absolute; right: -180px; top: -260px; width: 620px; height: 620px; border-radius: 50%;
  border: 90px solid rgba(37, 99, 235, .05); pointer-events: none;
}
.mk-solutions::after { right: -60px; top: -140px; width: 380px; height: 380px; border-width: 60px; }
.mk-solutions .pub-wrap { position: relative; z-index: 1; }
.mk-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent-0); }
.mk-eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--accent-0); }
.mk-h2 { margin: 18px 0 6px; font-size: clamp(38px, 5vw, 64px); font-weight: 800; letter-spacing: -0.04em; color: var(--mk-ink); line-height: 1.05; }
.mk-h2.sm { font-size: clamp(28px, 3.2vw, 40px); }
.mk-h2-sub { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; color: var(--mk-muted); letter-spacing: -0.01em; }
.mk-intro { margin: 0 0 40px; font-size: 16.5px; color: var(--mk-muted); }
.mk-sol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mk-sol {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: 0 10px 30px rgba(15, 35, 80, .07); border: 1px solid #edf1f8; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mk-sol:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 35, 80, .12); border-color: #d6e2fb; }
.mk-sol:target { border-color: var(--accent-0); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), 0 18px 40px rgba(15, 35, 80, .12); }
.mk-sol-head { display: flex; align-items: center; gap: 12px; }
.mk-sol-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-sol-ico { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 52px; display: grid; place-items: center; background: #ebf2ff; color: #1d4ed8; }
.mk-sol-ico.sm { width: 52px; height: 52px; flex-basis: 52px; border-radius: 50%; background: #eef3fb; color: var(--mk-navy-2); }
.mk-sol-go { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: grid; place-items: center; background: #eef3fb; color: var(--mk-navy); transition: background .15s ease, color .15s ease; }
.mk-sol:hover .mk-sol-go { background: var(--accent-0); color: #fff; }
.mk-sol > p { margin: 22px 0; min-height: 66px; font-size: 16px; line-height: 1.45; color: var(--mk-muted); }
.mk-sol dl { margin: auto 0 0; padding-top: 22px; border-top: 1px solid #e8edf5; display: grid; gap: 16px; }
.mk-sol dl > div { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: center; }
.mk-sol dl .mk-sol-ico { grid-row: span 2; }
.mk-sol dt { font-size: 13.5px; color: var(--mk-muted); }
.mk-sol dd { margin: 2px 0 0; font-size: 16px; white-space: nowrap; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-soon-eyebrow { margin-top: 44px; }
.mk-soon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.mk-soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 18px 24px; border: 1.5px dashed #cdd7e6; border-radius: 16px; background: rgba(255, 255, 255, .6); }
.mk-soon-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #eef3fb; color: #3b4f72; margin-bottom: 8px; }
.mk-soon strong { font-size: 17px; color: #3b4456; }
.mk-soon span { font-size: 14px; color: #6b7487; max-width: 200px; }

/* How it works -------------------------------------------------------------- */
.mk-how { padding: 64px 0; background: #fff; border-top: 1px solid var(--stroke); }
.mk-how-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mk-how-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--stroke); border-radius: 16px; background: #fbfcfe; }
.mk-how-n { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: grid; place-items: center; background: var(--mk-navy); color: #fff; font-weight: 800; }
.mk-how-steps strong { display: block; font-size: 16.5px; color: var(--mk-ink); }
.mk-how-steps p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--mk-muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .mk-sol-grid, .mk-soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: calc(44px + 68px); }
  .mk-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-strip-grid > * { padding: 18px 0 18px 18px; }
  .mk-strip-grid > :nth-child(3) { padding-left: 0; border-left: 0; }
  .mk-how-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mk-cta { width: 100%; }
  .mk-sol-grid, .mk-soon-grid, .mk-strip-grid { grid-template-columns: 1fr; }
  .mk-strip-grid > * { padding-left: 0; border-left: 0; }
}


/* Header over the hero ----------------------------------------------------
   The shared header floats transparent on the photo (white text), then
   returns to the solid white bar once the page scrolls or the menu opens.
   The hero's top padding makes room for it. */
.pub-header-mk.is-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pub-header-mk.is-overlay:not(.is-solid) .pub-brand-mk strong { color: #fff; }
/* Logo: white over the photo, its own navy once the header turns solid. */
.pub-header-mk.is-overlay .pub-brand-logo { transition: filter .25s ease; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-brand-logo { filter: brightness(0) invert(1); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-brand-mk span { color: rgba(255, 255, 255, .72); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-nav a { color: rgba(255, 255, 255, .86); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-nav a:hover,
.pub-header-mk.is-overlay:not(.is-solid) .pub-nav a.active { color: #fff; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-nav a.active::after { background: #93c5fd; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-signin-text { color: #fff !important; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-lang { border-color: rgba(255, 255, 255, .3); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-lang button { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-lang button.on { background: rgba(255, 255, 255, .92); color: var(--accent-0); }
.pub-header-mk.is-overlay:not(.is-solid) .pub-head-apply { background: #fff; color: #0b1d45; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-head-apply:hover { background: #e8efff; }
.pub-header-mk.is-overlay:not(.is-solid) .pub-burger { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.pub-header-mk.is-overlay.is-solid {
  background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: var(--stroke); box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}