/* ================================
       JOBMATCH LANDING (OVERALL MAKEOVER)
       - Modern glassy hero
       - Better spacing & hierarchy
       - Improved accessibility
       - Logo not compressed (object-fit: contain)
       - Better mobile navigation
       - Cleaner cards, shadows, and borders
       ================================ */

    html {
      scrollbar-gutter: stable;
      scroll-behavior: smooth;
    }

    :root {
      --brand-blue: #c1272d;
      --brand-blue-dark: #d63031;
      --brand-cyan: #e74c3c;
      --accent-gold: #2980b9;

      --surface: #ffffff;
      --surface-muted: #f3f6fc;
      --surface-alt: #eef2fb;

      --ink: #0f172a;
      --muted: #64748b;
      --border: rgba(214, 222, 243, 1);

      --shadow-soft: 0 24px 60px rgba(15, 23, 42, .12);
      --shadow-card: 0 18px 45px rgba(2, 6, 23, .10), 0 4px 12px rgba(2, 6, 23, .06);
      --shadow-float: 0 26px 70px rgba(15, 23, 42, .18);

      --radius-lg: 28px;
      --radius-md: 18px;
      --radius-sm: 14px;

      --ring: 0 0 0 4px rgba(193, 39, 45, .25);
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(1200px 600px at 18% 8%, rgba(231, 76, 60, .16), transparent 60%),
        radial-gradient(1200px 600px at 85% 12%, rgba(193, 39, 45, .14), transparent 65%),
        linear-gradient(180deg, #fbfdff 0%, #eef2fb 100%);
      line-height: 1.45;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    a {
      color: var(--brand-blue);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .landing-container {
      width: min(1180px, 92vw);
      margin: 0 auto;
    }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      font-weight: 700;
      border-radius: 999px;
      padding: .72rem 1.55rem;
      border: 1px solid transparent;
      font-size: .95rem;
      cursor: pointer;
      transition: background .2s ease, color .2s ease, border .2s ease, transform .2s ease, box-shadow .2s ease;
      user-select: none;
      white-space: nowrap;
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    .btn:active {
      transform: translateY(1px);
    }

    .btn-sm {
      padding: .5rem 1.15rem;
      font-size: .86rem;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 90%);
      color: #fff;
      border-color: rgba(19, 64, 163, .35);
      box-shadow: 0 14px 26px rgba(19, 64, 163, .18);
    }

    .btn-primary:hover {
      filter: brightness(1.03);
      text-decoration: none;
      box-shadow: 0 18px 34px rgba(19, 64, 163, .22);
    }

    .btn-outline {
      border-color: rgba(19, 64, 163, .45);
      color: var(--brand-blue);
      background: rgba(255, 255, 255, .65);
      backdrop-filter: blur(8px);
    }

    .btn-outline:hover {
      background: rgba(19, 64, 163, .10);
      text-decoration: none;
    }

    .btn-ghost {
      border-color: transparent;
      color: var(--muted);
      background: transparent;
    }

    .btn-ghost:hover {
      color: var(--brand-blue);
      text-decoration: none;
      background: rgba(19, 64, 163, .06);
    }

    /* ---------- Header / Hero ---------- */
    .landing-header {
      position: relative;
      overflow: hidden;
      padding-bottom: 1.2rem;
    }

    .landing-header::before {
      content: "";
      position: absolute;
      inset: -200px -200px auto -200px;
      height: 520px;
      background:
        radial-gradient(circle at 18% 25%, rgba(29, 157, 216, .18), transparent 60%),
        radial-gradient(circle at 75% 30%, rgba(247, 181, 0, .16), transparent 55%),
        radial-gradient(circle at 40% 70%, rgba(19, 64, 163, .14), transparent 58%);
      pointer-events: none;
      filter: blur(0px);
      opacity: .95;
    }

    .nav-container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: 1rem 1.5rem;
      padding: 1.35rem 0 1.05rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .9rem;
      font-weight: 700;
      color: var(--ink);
      min-width: 240px;
    }

    /* Ensure logo never looks compressed */
    .brand img {
      height: 54px;
      width: auto;
      max-width: 240px;
      object-fit: contain;
      display: block;
    }

    .brand-copy span {
      font-size: 1.12rem;
      display: block;
      line-height: 1.05;
      color: var(--brand-blue-dark);
    }

    .brand-copy small {
      display: block;
      font-size: .78rem;
      color: var(--muted);
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-top: .15rem;
    }

    .nav-links {
      display: flex;
      gap: 1.2rem;
      flex-wrap: wrap;
      font-size: .95rem;
      color: var(--muted);
      justify-content: center;
    }

    .nav-links a {
      color: inherit;
      font-weight: 600;
      padding: .35rem .45rem;
      border-radius: 999px;
      transition: background .2s ease, color .2s ease;
    }

    .nav-links a:hover {
      color: var(--brand-blue);
      background: rgba(19, 64, 163, .06);
      text-decoration: none;
    }

    .nav-actions {
      display: flex;
      gap: .7rem;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(280px, 1.1fr) minmax(280px, .95fr);
      gap: 3rem;
      align-items: start;
      padding: 1.25rem 0 3.8rem;
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
      position: relative;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      font-size: .8rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--brand-blue);
      font-weight: 800;
    }

    .hero-eyebrow::before {
      content: "";
      width: 42px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
      opacity: .9;
    }

    .hero-title {
      margin: 0;
      font-size: clamp(2.6rem, 3vw + 1.1rem, 3.85rem);
      line-height: 1.06;
      letter-spacing: -.02em;
      color: var(--brand-blue-dark);
    }

    .hero-text {
      margin: 0;
      font-size: 1.07rem;
      color: var(--muted);
      max-width: 600px;
    }

    .hero-cta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      align-items: center;
      margin-top: .15rem;
    }

    .hero-points {
      list-style: none;
      margin: 1.25rem 0 0;
      padding: 0;
      display: grid;
      gap: .7rem;
      color: var(--muted);
      font-size: .96rem;
    }

    .hero-points li {
      display: flex;
      gap: .65rem;
      align-items: flex-start;
      padding: .55rem .75rem;
      border-radius: 16px;
      background: rgba(255, 255, 255, .52);
      border: 1px solid rgba(214, 222, 243, .75);
      backdrop-filter: blur(10px);
    }

    .hero-points i {
      color: var(--brand-cyan);
      font-size: 1.18rem;
      position: relative;
      top: .08rem;
      flex: 0 0 auto;
    }

    .hero-panel {
      display: flex;
      align-items: stretch;
      position: relative;
    }

    .hero-card {
      width: 100%;
      border-radius: var(--radius-lg);
      padding: 2.05rem;
      box-shadow: var(--shadow-float);
      border: 1px solid rgba(214, 222, 243, .8);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .74) 100%);
      backdrop-filter: blur(12px);
      display: flex;
      flex-direction: column;
      gap: 1.05rem;
    }

    .hero-card h3 {
      margin: 0;
      font-size: 1.22rem;
      color: var(--brand-blue-dark);
      letter-spacing: -.01em;
    }

    .hero-card p {
      margin: 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .hero-form {
      display: grid;
      gap: .85rem;
      margin-top: .25rem;
    }

    .hero-form label {
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .hero-form input {
      border: 1px solid rgba(214, 222, 243, .95);
      border-radius: 16px;
      padding: .78rem 1rem;
      font-size: .96rem;
      font-weight: 600;
      color: var(--ink);
      background: rgba(255, 255, 255, .9);
      transition: box-shadow .2s ease, border .2s ease;
    }

    .hero-form input:focus {
      outline: none;
      border-color: rgba(29, 157, 216, .8);
      box-shadow: var(--ring);
    }

    .hero-form input::placeholder {
      color: #9aa5c9;
      font-weight: 600;
    }

    .hero-form .btn {
      width: 100%;
      margin-top: .15rem;
    }

    .hero-divider {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .85rem;
      color: var(--muted);
      margin-top: .15rem;
    }

    .hero-divider::before,
    .hero-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(214, 222, 243, .95);
    }

    .hero-quick-grid {
      display: grid;
      gap: .7rem;
      grid-template-columns: 1fr;
    }

    .hero-quick-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding: .7rem 1.05rem;
      border-radius: 16px;
      border: 1px solid rgba(214, 222, 243, .95);
      background: rgba(255, 255, 255, .82);
      color: var(--brand-blue);
      font-weight: 800;
      font-size: .92rem;
      transition: transform .2s ease, border .2s ease, box-shadow .2s ease, background .2s ease;
      text-decoration: none;
    }

    .hero-quick-link .mdi {
      font-size: 1.22rem;
    }

    .hero-quick-link:hover {
      border-color: rgba(19, 64, 163, .65);
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(19, 64, 163, .16);
      background: rgba(255, 255, 255, .92);
      text-decoration: none;
    }

    .hero-card-footer {
      font-size: .85rem;
      color: var(--muted);
      margin-top: .1rem;
    }

    .hero-card-footer a {
      font-weight: 800;
    }

    .hero-note {
      display: flex;
      gap: .65rem;
      align-items: flex-start;
      background: rgba(243, 246, 252, .9);
      border-radius: 18px;
      padding: 1rem 1rem;
      color: var(--muted);
      font-size: .92rem;
      border: 1px solid rgba(214, 222, 243, .95);
    }

    .hero-note i {
      font-size: 1.22rem;
      color: var(--brand-cyan);
      position: relative;
      top: .12rem;
    }

    /* ---------- Sections ---------- */
    main section {
      padding: 4.2rem 0;
    }

    .section-head {
      margin: 0;
      font-size: 2.05rem;
      color: var(--brand-blue-dark);
      letter-spacing: -.01em;
    }

    .section-subhead {
      margin: .45rem 0 1.9rem;
      font-size: 1.06rem;
      color: var(--muted);
      max-width: 660px;
    }

    /* ---------- Jobs Carousel ---------- */
    .landing-jobs {
      padding-top: 0;
    }

    .jobs-shell {
      background: rgba(255, 255, 255, .86);
      border-radius: var(--radius-lg);
      padding: 2.55rem 2.25rem;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(214, 222, 243, .9);
      backdrop-filter: blur(10px);
    }

    .jobs-header {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem 2rem;
      align-items: flex-end;
      margin-bottom: 1.7rem;
    }

    .jobs-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .jobs-actions .small {
      color: var(--muted);
      font-weight: 600;
    }

    .jobs-carousel {
      width: 100%;
    }

    .jobs-track {
      position: relative;
      overflow: hidden;
      border-radius: 22px;
      background: rgba(243, 246, 252, .9);
      border: 1px solid rgba(214, 222, 243, .95);
      padding: 1.15rem 0;
    }

    .jobs-inner {
      display: flex;
      transition: transform .45s ease;
      will-change: transform;
    }

    .job-slide {
      flex: 0 0 100%;
      min-width: 100%;
      padding: 0 1.2rem;
      box-sizing: border-box;
    }

    .job-card {
      background: rgba(255, 255, 255, .95);
      border-radius: 22px;
      padding: 1.65rem;
      box-shadow: 0 20px 38px rgba(15, 23, 42, .12);
      border: 1px solid rgba(214, 222, 243, .85);
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    @media (min-width: 920px) {
      .job-card {
        flex-direction: row;
        align-items: stretch;
      }
    }

    .job-card__media {
      flex: 0 0 auto;
      width: 100%;
      max-width: 330px;
      border-radius: 18px;
      overflow: hidden;
      background: #f1f5f9;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
    }

    .job-card__media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .job-card__media--pdf {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      padding: 1rem;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
      background: rgba(255, 255, 255, .85);
    }

    .job-card__media--pdf iframe {
      width: 100%;
      height: 220px;
      border: none;
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
      background: #fff;
    }

    .job-card__media-link {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-weight: 800;
      color: var(--brand-blue);
    }

    .job-card__media-link:hover {
      color: var(--brand-blue-dark);
      text-decoration: none;
    }

    @media (max-width: 919px) {
      .job-card__media {
        max-width: 100%;
        height: 220px;
      }

      .job-card__media img {
        height: 100%;
      }
    }

    .job-card__content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }

    .job-badge {
      align-self: flex-start;
      background: rgba(29, 157, 216, .14);
      color: var(--brand-cyan);
      padding: .38rem .82rem;
      border-radius: 999px;
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      border: 1px solid rgba(29, 157, 216, .20);
    }

    .job-card__content .title {
      font-size: 1.22rem;
      font-weight: 800;
      color: var(--brand-blue-dark);
      letter-spacing: -.01em;
    }

    .job-card__content .meta {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      font-size: .92rem;
      color: var(--muted);
      font-weight: 600;
    }

    .job-card .muted {
      color: var(--muted);
    }

    .job-card__description {
      color: var(--muted);
      font-size: .92rem;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .job-card__links {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
    }

    .job-card__links .ext-link {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-weight: 800;
      color: var(--brand-blue);
      padding: .45rem .75rem;
      border-radius: 999px;
      background: rgba(19, 64, 163, .06);
      border: 1px solid rgba(19, 64, 163, .10);
      transition: background .2s ease, transform .2s ease, border .2s ease;
      text-decoration: none;
    }

    .job-card__links .ext-link:hover {
      background: rgba(19, 64, 163, .10);
      border-color: rgba(19, 64, 163, .22);
      transform: translateY(-1px);
      color: var(--brand-blue-dark);
      text-decoration: none;
    }

    .jobs-dots {
      display: flex;
      gap: .55rem;
      justify-content: center;
      margin-top: 1.4rem;
    }

    .jobs-dots button {
      width: 30px;
      height: 7px;
      border-radius: 999px;
      border: none;
      background: rgba(214, 222, 243, 1);
      cursor: pointer;
      transition: background .2s ease, opacity .2s ease, transform .2s ease;
      opacity: .75;
    }

    .jobs-dots button.active {
      background: var(--brand-blue);
      opacity: 1;
      transform: scaleX(1.05);
    }

    .carousel-nav {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: none;
      padding: 0 1.1rem;
    }

    .nav-btn {
      pointer-events: auto;
      border: none;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .95);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 34px rgba(15, 23, 42, .18);
      color: var(--brand-blue-dark);
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      border: 1px solid rgba(214, 222, 243, .95);
    }

    .nav-btn:hover {
      transform: scale(1.06);
      box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
      background: #fff;
    }

    .nav-btn:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    /* ---------- Insights ---------- */
    .landing-insights {
      padding: 4.2rem 0;
      background:
        radial-gradient(800px 380px at 80% 8%, rgba(247, 181, 0, .14), transparent 60%),
        linear-gradient(180deg, rgba(236, 243, 255, .65) 0%, rgba(255, 255, 255, 1) 54%);
    }

    .insights-shell {
      display: flex;
      flex-direction: column;
      gap: 1.85rem;
    }

    .insights-eyebrow {
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--brand-cyan);
    }

    .insights-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 1.4rem;
    }

    .insight-card {
      background: rgba(255, 255, 255, .9);
      border-radius: 22px;
      padding: 1.65rem;
      border: 1px solid rgba(19, 64, 163, .10);
      box-shadow: 0 24px 44px rgba(15, 23, 42, .08);
      display: flex;
      flex-direction: column;
      gap: .55rem;
      min-height: 170px;
      backdrop-filter: blur(10px);
    }

    .insight-label {
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .insight-value {
      font-size: 2.1rem;
      font-weight: 900;
      color: var(--brand-blue);
      letter-spacing: -.02em;
    }

    .insight-note {
      font-size: .82rem;
      color: var(--muted);
      font-weight: 600;
    }

    /* ---------- Stats ---------- */
    .landing-stats {
      padding-top: 4.6rem;
    }

    .stats-grid {
      display: grid;
      gap: 1.6rem;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .stat-card {
      background: rgba(255, 255, 255, .9);
      border-radius: 24px;
      padding: 1.95rem;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(214, 222, 243, .9);
      display: flex;
      flex-direction: column;
      gap: .45rem;
      backdrop-filter: blur(10px);
    }

    .stat-card strong {
      font-size: 2.05rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
      letter-spacing: -.02em;
    }

    .stat-card span {
      color: var(--muted);
      font-size: .96rem;
      font-weight: 600;
    }

    /* ---------- Toolkit ---------- */
    .landing-toolkit {
      padding: 4.7rem 0;
    }

    .toolkit-shell {
      background: rgba(255, 255, 255, .92);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(214, 222, 243, .9);
      padding: 2.6rem;
      display: flex;
      flex-direction: column;
      gap: 1.6rem;
      backdrop-filter: blur(10px);
    }

    .toolkit-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
    }

    .toolkit-tab {
      border: 1px solid rgba(214, 222, 243, .95);
      border-radius: 999px;
      background: rgba(238, 242, 251, .85);
      color: var(--muted);
      font-weight: 900;
      padding: .58rem 1.35rem;
      cursor: pointer;
      transition: background .2s ease, border .2s ease, color .2s ease, transform .2s ease;
    }

    .toolkit-tab:hover {
      border-color: rgba(19, 64, 163, .35);
      color: var(--brand-blue);
    }

    .toolkit-tab:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    .toolkit-tab.active {
      background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 90%);
      border-color: rgba(19, 64, 163, .50);
      color: #fff;
      transform: translateY(-1px);
    }

    .toolkit-summary {
      margin: 0;
      color: var(--muted);
      font-size: .97rem;
      max-width: 620px;
      font-weight: 600;
    }

    .toolkit-panels {
      position: relative;
    }

    .toolkit-panel {
      display: none;
    }

    .toolkit-panel.active {
      display: block;
    }

    .toolkit-list {
      list-style: none;
      display: grid;
      gap: 1rem;
      margin: 1.35rem 0 0;
      padding: 0;
    }

    .toolkit-link {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.08rem 1.2rem;
      border-radius: 18px;
      border: 1px solid rgba(214, 222, 243, .95);
      background: rgba(243, 246, 252, .9);
      transition: transform .2s ease, border .2s ease, box-shadow .2s ease, background .2s ease;
      text-decoration: none;
    }

    .toolkit-link:hover {
      border-color: rgba(19, 64, 163, .35);
      transform: translateY(-2px);
      text-decoration: none;
      box-shadow: 0 18px 36px rgba(19, 64, 163, .16);
      background: rgba(255, 255, 255, .9);
    }

    .toolkit-link:focus-visible {
      outline: none;
      box-shadow: var(--ring);
    }

    .toolkit-link strong {
      display: block;
      font-size: 1rem;
      color: var(--ink);
      font-weight: 900;
    }

    .toolkit-link small {
      display: block;
      color: var(--muted);
      font-size: .83rem;
      margin-top: .25rem;
      font-weight: 600;
    }

    .toolkit-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .95);
      color: var(--brand-blue);
      font-size: 1.32rem;
      box-shadow: 0 10px 24px rgba(19, 64, 163, .15);
      flex-shrink: 0;
      align-self: flex-start;
      border: 1px solid rgba(214, 222, 243, .95);
    }

    /* ---------- Features ---------- */
    .landing-features {
      background: rgba(255, 255, 255, .65);
      border-top: 1px solid rgba(214, 222, 243, .8);
      border-bottom: 1px solid rgba(214, 222, 243, .8);
    }

    .feature-grid {
      display: grid;
      gap: 1.55rem;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .feature-card {
      border: 1px solid rgba(214, 222, 243, .95);
      border-radius: 22px;
      padding: 1.65rem;
      background: rgba(238, 242, 251, .85);
      display: flex;
      flex-direction: column;
      gap: .8rem;
      box-shadow: 0 18px 36px rgba(2, 6, 23, .06);
    }

    .feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background: rgba(19, 64, 163, .10);
      color: var(--brand-blue);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.55rem;
      border: 1px solid rgba(19, 64, 163, .12);
    }

    .feature-card h3 {
      margin: 0;
      font-size: 1.2rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
      letter-spacing: -.01em;
    }

    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      font-weight: 600;
    }

    /* ---------- Journey ---------- */
    .landing-journey .journey-grid {
      display: grid;
      gap: 1.55rem;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .journey-step {
      background: rgba(255, 255, 255, .9);
      border-radius: 22px;
      padding: 1.9rem;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(214, 222, 243, .9);
      display: flex;
      flex-direction: column;
      gap: .75rem;
      backdrop-filter: blur(10px);
    }

    .journey-step .step-index {
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--brand-cyan);
    }

    .journey-step h3 {
      margin: 0;
      font-size: 1.16rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
    }

    .journey-step p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      font-weight: 600;
    }

    /* ---------- Partners ---------- */
    .partner-grid {
      display: grid;
      gap: 1.4rem;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .partner-card {
      background: rgba(255, 255, 255, .92);
      border-radius: 22px;
      padding: 1.8rem;
      border: 1px solid rgba(214, 222, 243, .92);
      box-shadow: 0 18px 36px rgba(2, 6, 23, .06);
      display: flex;
      flex-direction: column;
      gap: .65rem;
      backdrop-filter: blur(10px);
    }

    .partner-badge {
      align-self: flex-start;
      background: rgba(247, 181, 0, .18);
      color: #b86b00;
      font-size: .75rem;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 900;
      padding: .38rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(247, 181, 0, .20);
    }

    .partner-card h3 {
      margin: 0;
      font-size: 1.16rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
    }

    .partner-card p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      font-weight: 600;
    }

    /* ---------- Community ---------- */
    .community-grid {
      display: grid;
      gap: 1.55rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .community-card {
      background: rgba(255, 255, 255, .92);
      border-radius: 24px;
      padding: 2.05rem;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(214, 222, 243, .9);
      display: flex;
      flex-direction: column;
      gap: 1.05rem;
      backdrop-filter: blur(10px);
    }

    .community-card h3 {
      margin: 0;
      font-size: 1.26rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
    }

    .community-card p {
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      font-weight: 600;
    }

    /* ---------- CTA ---------- */
    .landing-cta {
      background:
        radial-gradient(900px 360px at 15% 30%, rgba(29, 157, 216, .16), transparent 60%),
        linear-gradient(135deg, rgba(19, 64, 163, .10) 0%, rgba(10, 45, 115, .14) 95%);
      padding: 4.6rem 0;
    }

    .cta-shell {
      background: rgba(255, 255, 255, .92);
      border-radius: var(--radius-lg);
      padding: 2.7rem;
      box-shadow: var(--shadow-float);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      align-items: center;
      border: 1px solid rgba(214, 222, 243, .92);
      backdrop-filter: blur(12px);
    }

    .cta-shell h2 {
      margin: 0;
      font-size: 2.05rem;
      color: var(--brand-blue-dark);
      font-weight: 900;
      letter-spacing: -.01em;
    }

    .cta-shell p {
      margin: 0;
      color: var(--muted);
      font-size: 1.02rem;
      max-width: 650px;
      font-weight: 600;
    }

    .cta-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: .35rem;
    }

    /* ---------- Footer ---------- */
    .landing-footer {
      background: #0f172a;
      color: #f8fafc;
      padding: 3.6rem 0 3.1rem;
      margin-top: 0;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .footer-grid {
      display: grid;
      gap: 1.4rem 2rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .footer-heading {
      font-weight: 900;
      margin-bottom: .85rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .78rem;
      color: #cbd5f5;
    }

    .footer-links {
      display: grid;
      gap: .48rem;
      font-size: .92rem;
      font-weight: 600;
    }

    .footer-links a {
      color: #f8fafc;
    }

    .footer-links a:hover {
      color: #91a4ff;
      text-decoration: none;
    }

    .footer-meta {
      margin-top: 2.9rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
      font-size: .86rem;
      color: #cdd2e8;
      font-weight: 600;
    }

    .footer-meta a {
      color: #f8fafc;
      font-weight: 700;
    }

    .muted {
      color: var(--muted);
    }

    .small {
      font-size: .86rem;
    }

    /* ---------- Responsive ---------- */
    @media (min-width: 640px) {
      .hero-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 992px) {
      .hero-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 1024px) {
      .nav-container {
        grid-template-columns: 1fr auto;
        gap: .9rem 1rem;
      }

      .nav-links {
        grid-column: 1 / -1;
        justify-content: center;
        order: 3;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .jobs-shell {
        padding: 2.05rem 1.6rem;
      }

      .toolkit-shell {
        padding: 2.15rem 1.7rem;
      }
    }

    @media (max-width: 768px) {
      .nav-container {
        padding: 1.1rem 0 1rem;
      }

      .nav-actions {
        justify-content: center;
      }

      .hero-card {
        padding: 1.65rem;
      }

      .hero-cta {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-cta .btn {
        width: 100%;
      }

      .hero-quick-grid {
        grid-template-columns: 1fr;
      }

      .job-slide {
        padding: 0 .65rem;
      }

      .jobs-track {
        padding: 1rem 0;
      }

      .carousel-nav {
        display: none;
      }

      .cta-shell {
        padding: 2.25rem 1.6rem;
      }

      .toolkit-tabs {
        justify-content: center;
      }

      .toolkit-link {
        flex-direction: column;
        align-items: flex-start;
      }

      .toolkit-icon {
        margin-bottom: .35rem;
      }
    }

    @media (max-width: 540px) {
      .brand {
        min-width: 0;
      }

      .nav-actions {
        width: 100%;
        justify-content: center;
      }

      .jobs-header {
        align-items: flex-start;
      }

      .jobs-actions {
        flex-direction: column;
        align-items: flex-start;
      }

      .toolkit-tabs {
        flex-direction: column;
        align-items: stretch;
      }

      .footer-meta {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      * {
        transition: none !important;
        animation: none !important;
      }
    }
    :root{
  /* STRICT: RED / WHITE / BLACK */
  --jm-red:#E20607;
  --jm-red-dark:#B80405;

  --jm-black:#0b0f14;         /* deeper than #0f172a */
  --jm-ink:var(--jm-black);
  --jm-muted:rgba(11,15,20,.70);

  --jm-bg:#ffffff;
  --jm-card:#ffffff;

  /* borders & shadows (neutral, NOT red) */
  --jm-line:rgba(11,15,20,.12);
  --jm-line-2:rgba(11,15,20,.18);
  --jm-shadow:0 18px 50px rgba(2,6,23,.10), 0 6px 16px rgba(2,6,23,.06);

  /* focus ring: red but subtle (not pink background) */
  --jm-ring:0 0 0 4px rgba(226,6,7,.22);
}

    /* ===== HERO-ONLY MODE (no scroll, hero-only) ===== */
    html,
    body {
      height: 100%;
    }

    body:not(.reveal-content) {
      height: 100vh;
      overflow: hidden !important;
    }

    body:not(.reveal-content) main,
    body:not(.reveal-content) footer {
      display: none !important;
    }

    body.reveal-content {
      overflow: auto !important;
      height: auto;
    }

    body.reveal-content main,
    body.reveal-content footer {
      display: block !important;
    }

    body:not(.reveal-content) .landing-header {
      min-height: 100vh;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--jm-bg);
      color: var(--jm-ink);
    }

    .landing-header {
      position: relative;
      overflow: hidden;
      padding-bottom: 0;
      background: var(--jm-bg);
      min-height: 86vh;
    }

    .landing-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("<?= base_url('assets/images/hero-bg.jpg'); ?>");
      background-size: cover;
      background-position: center;
      opacity: .08;
      filter: saturate(1) contrast(1);
      pointer-events: none;
    }

    /* REMOVE dark overlay completely */
    .landing-header::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 520px at 50% 25%, rgba(226, 6, 7, .10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, 1));
      pointer-events: none;
    }
    .nav-container {
      position: sticky;
      top: 0;
      z-index: 20;
      padding-top: 14px;
      padding-bottom: 14px;
      background: rgba(255, 255, 255, .92);
      border-bottom: 1px solid var(--jm-line);
      box-shadow: 0 10px 24px rgba(2, 6, 23, .06);
      backdrop-filter: blur(10px);
    }

    .landing-container.nav-container {
      max-width: 1240px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--jm-ink);
    }

    .brand img {
      height: 42px;
      width: 42px;
      object-fit: contain;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--jm-line);
      padding: 6px;
    }

    .brand-copy span {
      font-weight: 900;
      letter-spacing: .2px;
      font-size: 18px;
      line-height: 1.05;
      color: var(--jm-ink);
    }

    .brand-copy small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      opacity: .85;
      font-weight: 800;
      color: var(--jm-muted);
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      text-decoration: none;
      color: rgba(15, 23, 42, .80);
      font-weight: 900;
      font-size: 13px;
      border: 1px solid transparent;
      transition: all .15s ease;
      white-space: nowrap;
    }

    .nav-links a:hover {
      background: rgba(226, 6, 7, .08);
      border-color: rgba(226, 6, 7, .18);
      color: var(--jm-ink);
    }

    .nav-actions .btn {
      border-radius: 999px;
      font-weight: 900;
      letter-spacing: .2px;
      padding: 10px 16px;
      box-shadow: none;
      border: 1px solid var(--jm-line);
    }

    .nav-actions .btn.btn-ghost {
      background: transparent;
      color: var(--jm-ink);
    }

    .nav-actions .btn.btn-ghost:hover {
      background: rgba(15, 23, 42, .06);
    }

    /* Make top-right Register RED */
    .nav-actions .btn.btn-primary {
      background: var(--jm-red);
      border-color: var(--jm-red);
      color: #fff;
      box-shadow: 0 10px 22px rgba(226, 6, 7, .18);
    }

    .nav-actions .btn.btn-primary:hover {
      transform: translateY(-1px);
      background: var(--jm-red-dark);
      border-color: var(--jm-red-dark);
      box-shadow: 0 14px 30px rgba(226, 6, 7, .22);
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 54px 0 84px;
      min-height: calc(86vh - 76px);
      align-items: center;
      justify-items: center;
    }

    .hero-copy {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
      color: var(--jm-ink);
    }

    .hero-seal {
      width: 118px;
      height: 118px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid var(--jm-line);
      box-shadow: var(--jm-shadow);
      overflow: hidden;
      margin: 0 auto 16px;
    }

    .hero-seal img {
      width: 86%;
      height: 86%;
      object-fit: contain;
      filter: none;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(226, 6, 7, .08);
      border: 1px solid rgba(226, 6, 7, .18);
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(15, 23, 42, .75);
      margin: 0 auto 14px;
    }

    .hero-title {
      font-weight: 1000;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1.05;
      font-size: clamp(34px, 5.2vw, 64px);
      margin: 0 auto 12px;
      max-width: 980px;
      color: var(--jm-ink);
    }

    .hero-text {
      max-width: 980px;
      margin: 0 auto 18px;
      color: rgba(15, 23, 42, .75);
      font-size: clamp(14px, 2.1vw, 20px);
      line-height: 1.65;
      text-shadow: none;
    }

    .hero-cta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 18px auto 0;
    }

    .hero-cta .btn {
      border-radius: 12px;
      padding: 14px 22px;
      font-weight: 1000;
      letter-spacing: .03em;
      text-transform: uppercase;
      border: 1px solid transparent;
      min-width: 220px;
    }

    .hero-cta .btn.btn-primary {
      background: var(--jm-red);
      border-color: var(--jm-red);
      color: #fff;
      box-shadow: 0 14px 30px rgba(226, 6, 7, .18);
    }

    .hero-cta .btn.btn-primary:hover {
      transform: translateY(-1px);
      background: var(--jm-red-dark);
      border-color: var(--jm-red-dark);
      box-shadow: 0 18px 40px rgba(226, 6, 7, .22);
    }

    /* Outline = clean gray */
    .hero-cta .btn.btn-outline {
      background: #fff;
      border-color: rgba(15, 23, 42, .18);
      color: var(--jm-ink);
    }

    .hero-cta .btn.btn-outline:hover {
      background: rgba(15, 23, 42, .04);
      transform: translateY(-1px);
    }

    .hero-points {
      max-width: 980px;
      margin: 22px auto 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .hero-points li {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid var(--jm-line);
      border-radius: 14px;
      padding: 12px 14px;
      color: rgba(15, 23, 42, .82);
      box-shadow: 0 10px 22px rgba(2, 6, 23, .06);
      justify-content: center;
      text-align: left;
      min-height: 54px;
    }

    .hero-points i {
      color: var(--jm-red);
      font-size: 20px;
    }

    .hero-panel {
      display: none !important;
    }

    /* Mobile */
    @media (max-width: 992px) {
      .hero-points {
        grid-template-columns: 1fr;
      }

      .nav-links {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
      }
    }
.nav-container{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
  width: 100%;
}

.nav-container.landing-container{
  max-width: 1240px;
}

.landing-header{
  padding-top: 86px;
}

    @media (max-width: 520px) {
      .hero-cta .btn {
        width: 100%;
        min-width: unset;
      }
    }

    /* Kill any colored gradients/washes that make things look pink/blue */
body{
  background:#fff !important;
}

.landing-header::after,
.landing-insights,
.landing-cta{
  background:#fff !important;
}

/* If you still want depth: use neutral gray instead of red tint */
.landing-insights,
.landing-features{
  background: linear-gradient(180deg,#fff,#f7f7f8) !important;
}