/* ══════════════════════════
       SECTION (full-width)
       Hero height uses clamp() so it adapts to viewport
       without ever feeling cramped or absurdly tall.
    ══════════════════════════ */
    .nj-hero {
      position: relative;
      width: 100%;
      min-height: auto;
      background: #0D0E0A;
      color: #F3EFE3;
      font-family: "Bitter", Georgia, serif;
      overflow: hidden;
      box-sizing: border-box;
    }
    .nj-hero *,
    .nj-hero *::before,
    .nj-hero *::after {
      box-sizing: border-box;
    }

    /* ══════════════════════════
       BACKGROUND LAYERS (scoped)
    ══════════════════════════ */
    .nj-hero .nj-bg-base {
      position: absolute;
      inset: 0;
      background: #0D0E0A;
      z-index: 0;
      pointer-events: none;
    }
    .nj-hero .nj-glow-a {
      position: absolute;
      width: 1000px; height: 800px;
      right: -180px; bottom: -200px;
      background: radial-gradient(ellipse at center, rgba(255,91,31,0.11) 0%, transparent 62%);
      pointer-events: none;
      z-index: 1;
    }
    .nj-hero .nj-glow-b {
      position: absolute;
      width: 600px; height: 500px;
      left: -80px; top: -120px;
      background: radial-gradient(ellipse at center, rgba(212,242,90,0.055) 0%, transparent 65%);
      pointer-events: none;
      z-index: 1;
    }
    .nj-hero .nj-grain {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.032;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }
    .nj-hero .nj-v-rule {
      position: absolute;
      left: 50%;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent 0%, #2A2B24 20%, #2A2B24 80%, transparent 100%);
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      animation: njFadeRule 0.8s ease 1.6s forwards;
    }
    @keyframes njFadeRule { to { opacity: 1; } }

    /* ══════════════════════════
       CONTAINER (centered, max 1216px)
    ══════════════════════════ */
    .nj-container {
      position: relative;
      z-index: 4;
      width: 100%;
      max-width: 1216px;
      margin: 0 auto;
      padding: clamp(64px, 8vh, 96px) 32px clamp(24px, 3vh, 40px);
      min-height: auto;
      display: flex;
      align-items: center;
    }

    /* ══════════════════════════
       CONTENT (split layout)
    ══════════════════════════ */
    .nj-content {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }

    /* ── LEFT ── */
    .nj-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .nj-headline {
      font-family: "Archivo Black", sans-serif; font-weight: 900;
      font-size: 82px;
      line-height: 0.91;
      letter-spacing: -2.5px;
      color: #F3EFE3;
      margin-bottom: 36px;
      overflow: hidden;
    }
    .nj-hline {
      display: block;
      overflow: hidden;
      line-height: 1.0;
    }
    .nj-hline-inner {
      display: block;
      transform: translateY(105%);
      animation: njLineUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .nj-hline:nth-child(1) .nj-hline-inner { animation-delay: 0.20s; }
    .nj-hline:nth-child(2) .nj-hline-inner { animation-delay: 0.33s; }
    .nj-hline:nth-child(3) .nj-hline-inner { animation-delay: 0.46s; }
    .nj-hline:nth-child(4) .nj-hline-inner { animation-delay: 0.59s; color: #5DBA63; }
    .nj-hline:nth-child(5) .nj-hline-inner { animation-delay: 0.72s; color: #5DBA63; }

    @keyframes njLineUp { to { transform: translateY(0); } }
    @keyframes njFadeUp { to { opacity: 1; transform: translateY(0); } }
    @keyframes njFadeIn { to { opacity: 1; } }

    .nj-body-copy {
      font-family: "Bitter", serif;
      font-size: 17px;
      line-height: 1.68;
      color: #A8A393;
      max-width: 420px;
      margin-bottom: 44px;
      opacity: 0;
      animation: njFadeUp 0.6s ease 0.95s forwards;
    }
    .nj-body-copy strong { color: #5DBA63; font-weight: 500; }

    .nj-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      opacity: 0;
      animation: njFadeUp 0.5s ease 1.15s forwards;
    }

    .nj-btn-primary {
      font-family: "JetBrains Mono", monospace;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 1.2px;
      padding: 15px 30px;
      background: #5DBA63;
      color: #1A1B15;
      border: none;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: opacity 0.15s;
    }
    .nj-btn-primary:hover { opacity: 0.88; }

    .nj-btn-outline {
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      letter-spacing: 1.2px;
      padding: 15px 24px;
      border: 1px solid #2A2B24;
      background: transparent;
      color: #A8A393;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: border-color 0.15s, color 0.15s;
    }
    .nj-btn-outline:hover { border-color: #5DBA63; color: #5DBA63; }

    /* ── RIGHT ── */
    .nj-right {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-width: 0;
      width: 100%;
      padding-top: 20px;
    }

    .nj-truck-img {
      display: block;
      width: 100%;
      max-width: 680px;
      height: auto;
      margin: 0 auto;
      background: transparent;
      opacity: 0;
      animation: njFadeIn 0.8s ease 0.6s forwards;
    }

    /* ══════════════════════════
       RESPONSIVE
    ══════════════════════════ */

    /* Tablet (≤ 1024px) - image moves ABOVE headline */
    @media (max-width: 1024px) {
      .nj-hero { min-height: auto; }
      .nj-container {
        min-height: auto;
        padding: clamp(56px, 8vh, 88px) 28px;
        align-items: stretch;
      }
      .nj-hero .nj-v-rule { display: none; }

      .nj-content {
        grid-template-columns: 1fr;
        gap: clamp(40px, 6vh, 64px);
      }
      /* Place RIGHT (image) before LEFT (text) on narrow viewports */
      .nj-right { order: 1; }
      .nj-left  { order: 2; }

      .nj-truck-img { max-width: 560px; }

      .nj-headline {
        font-size: 64px;
        letter-spacing: -2px;
      }
    }

    /* Small tablet (≤ 768px) */
    @media (max-width: 768px) {
      .nj-container { padding: clamp(48px, 7vh, 72px) 24px; }

      .nj-truck-img { max-width: 480px; }

      .nj-headline {
        font-size: 52px;
        letter-spacing: -1.5px;
        margin-bottom: 28px;
      }
      .nj-body-copy {
        font-size: 16px;
        margin-bottom: 36px;
      }
    }

    /* Mobile (≤ 560px) */
    @media (max-width: 560px) {
      .nj-container { padding: 56px 20px; }
      .nj-content   { gap: 36px; }

      .nj-truck-img { max-width: 360px; }

      .nj-headline {
        font-size: 42px;
        letter-spacing: -1px;
        line-height: 0.95;
        margin-bottom: 24px;
      }
      .nj-body-copy {
        font-size: 15px;
        margin-bottom: 32px;
      }

      .nj-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }
      .nj-btn-primary,
      .nj-btn-outline {
        justify-content: center;
        padding: 14px 22px;
      }
    }

    /* Very small mobile (≤ 380px) */
    @media (max-width: 380px) {
      .nj-headline { font-size: 36px; }
      .nj-truck-img { max-width: 300px; }
    }