/* ===========================
   Global Typography System
   =========================== */

:root {
    --ur-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ur-text-main: #212529;
    --ur-text-muted: #6c757d;
}

html, body {
    font-family: var(--ur-font);
    color: var(--ur-text-main);
}

body {
    line-height: 1.6;
}

/* ===========================
   Headings
   =========================== */

h1, h2, h3, h4, h5 {
    letter-spacing: -0.02em;
}

    /* Section titles */
    h1.fw-bolder {
        letter-spacing: -0.03em;
    }

/* Card titles — IMPORTANT */
.card h3,
.card h4 {
    font-size: 1.25rem; /* smaller than default h3 */
    margin-bottom: .75rem;
}

/* ===========================
   Paragraph & text rhythm
   =========================== */

p {
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.05rem; /* calmer than Bootstrap default */
}

/* ===========================
   Muted text consistency
   =========================== */

.text-muted {
    color: var(--ur-text-muted) !important;
}

.bi {
    font-size: 1.15rem;
    line-height: 1.2;
}

hr {
    opacity: .15;
}

/* ===========================
   Navbar (mobile polish)
   =========================== */

/* Bootstrap defaults can feel a bit chunky on mobile.
   Keep a good tap target while reducing visual bulk. */
@media (max-width: 991.98px) {
    .navbar .navbar-toggler {
        padding: .35rem .55rem;
        border-radius: .6rem;
    }

    .navbar .navbar-toggler-icon {
        width: 1.15em;
        height: 1.15em;
    }
}

.hero-illustration {
  max-width: 460px;      /* key: prevents it from overpowering */
  width: 100%;
  margin-top: 0.75rem;   /* nudges it down a tiny bit (tweak as needed) */
  position: relative;
}

.hero-illustration img {
  width: 100%;
  height: auto;
  border-radius: 1rem;   /* matches your rounded-4 look */
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.10)); /* subtle grounding */
}