/* -- CSS variables - light theme -- */
      :root {
        --pri-yellow: #f09a0f;
        --text-blue: #25265e;
        --black: #000000;
        --white: #ffffff;
        --header-bor-bottom: #f4f4f4;
        --header-border: rgba(246, 246, 246, 0.4);
        --pro-h1-h-p: rgba(37, 38, 95, 0.87);
        --load-wrap-bg: rgba(31, 11, 11, 0.8);
        --sj-spinner-color: #3498db;
      }

      /* -- Dark theme overrides -- */
      .dark-theme {
        background-color: #121225;
      }
      body.dark-theme {
        --text-blue: #ffffff;
        --black: #eeeeee;
        --white: #121225;
        --header-bor-bottom: #0d0d1e;
        --header-border: rgb(49, 49, 49);
        --pro-h1-h-p: rgba(255, 255, 255, 0.87);
      }

      /* -- Reset -- */
      *, *::before, *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      * {
        font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        letter-spacing: -0.01em;
      }
      ul, li, ol { list-style: none; }
      a { display: inline-block; text-decoration: none !important; }

      /* -- Body -- */
      body {
        background-color: #fff;
        color: var(--black);
        transition: background-color 0.3s, color 0.3s;
      }
      .sj-syntax-particles {
        position: fixed;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
      }
      .sj-syntax-particles span {
        position: absolute;
        color: rgba(37, 38, 94, 0.12);
        font-family: "Cascadia Code", "Fira Code", monospace;
        font-size: clamp(1rem, 2vw, 1.7rem);
        font-weight: 700;
        animation: sj-syntax-float 18s ease-in-out infinite alternate;
        animation-delay: var(--particle-delay);
        transform: translate3d(0, 0, 0);
      }
      .sj-syntax-particles span:nth-child(2n) { color: rgba(240, 154, 15, 0.16); }
      .sj-syntax-particles span:nth-child(3n) { font-size: clamp(0.85rem, 1.6vw, 1.35rem); }
      .sj-syntax-particles span:nth-child(4n) { animation-duration: 24s; }
      .sj-syntax-particles span:nth-child(5n) { animation-direction: alternate-reverse; }
      body.dark-theme .sj-syntax-particles span { color: rgba(220, 220, 255, 0.16); }
      body.dark-theme .sj-syntax-particles span:nth-child(2n) { color: rgba(240, 154, 15, 0.2); }
      @keyframes sj-syntax-float {
        from { transform: translate3d(-12px, 10px, 0) rotate(-8deg); }
        to { transform: translate3d(18px, -24px, 0) rotate(8deg); }
      }
      body > header,
      body > main,
      body > #footer-div { position: relative; z-index: 2; }
      @media (max-width: 576px) {
        .sj-syntax-particles span:nth-child(n + 7) { display: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .sj-syntax-particles span { animation: none; }
      }

      /* -- Loader overlay -- */
      .loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--load-wrap-bg);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* Pure-CSS spinner (replaces Font Awesome gear - no FA dependency on critical path) */
      .sj-loader-spinner {
        width: 44px;
        height: 44px;
        border: 4px solid rgba(52, 152, 219, 0.25);
        border-top-color: var(--sj-spinner-color);
        border-radius: 50%;
        animation: sj-spin 0.8s linear infinite;
      }
      @keyframes sj-spin { to { transform: rotate(360deg); } }

      /* -- Header / navbar -- */
      .header {
        top: 0;
        width: 100%;
        background-color: var(--white) !important;
        z-index: 999;
        border-bottom: 1px solid var(--header-bor-bottom);
        position: sticky;
      }
      .header .nabvar-bg-color { background-color: var(--white); }
      .header-border { border-bottom: 2px solid var(--header-border); }
      .navexplorer > li > a,
      .navexplorer > li > ul > li > a {
        font-size: 17px;
        font-weight: 600;
        color: var(--black);
        position: relative;
        white-space: nowrap;
      }
      .nav-link { padding: 0 !important; }
      .navbar-toggler {
        padding: 3px 4px !important;
        background-color: transparent !important;
        border: 1px solid !important;
        border-radius: 3px;
      }

      /* -- Hero section -- */
      .sj-hero { padding: 64px 0 48px; }
      .sj-hero__title {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        font-weight: 700;
        color: var(--text-blue);
        letter-spacing: -0.035em;
        line-height: 1.12;
        margin-bottom: 16px;
      }
      .sj-hero__subtitle {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-blue);
        opacity: 0.7;
        margin-bottom: 16px;
        line-height: 1.5;
      }
      .sj-hero__desc {
        font-size: 17px;
        line-height: 1.8;
        color: var(--pro-h1-h-p);
        margin-bottom: 32px;
        max-width: 540px;
      }
      .sj-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
      body.dark-theme .sj-hero__subtitle { color: rgba(220, 220, 255, 0.65); }
      body.dark-theme .sj-hero__desc    { color: rgba(220, 220, 255, 0.72); }
      .sj-hero-code__body code::after {
        content: "";
        display: inline-block;
        width: 8px;
        height: 1.1em;
        margin-left: 3px;
        vertical-align: -0.15em;
        background: #f09a0f;
        animation: sj-code-cursor 0.9s steps(1) infinite;
      }
      @keyframes sj-code-cursor {
        50% { opacity: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .sj-hero-code__body code::after { animation: none; }
      }

      /* -- CTA buttons -- */
      .sj-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 28px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
          border-color 0.2s ease, color 0.2s ease;
        cursor: pointer;
        border: 2px solid transparent;
      }
      .sj-btn--primary {
        background: linear-gradient(135deg, #f09a0f 0%, #d97e00 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(240, 154, 15, 0.32);
      }
      .sj-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(240, 154, 15, 0.42);
        color: #fff;
      }
      .sj-btn--secondary {
        background: transparent;
        color: var(--text-blue);
        border-color: rgba(37, 38, 94, 0.2);
      }
      body.dark-theme .sj-btn--secondary {
        color: rgba(220, 220, 255, 0.85);
        border-color: rgba(220, 220, 255, 0.2);
      }
      .sj-btn--secondary:hover {
        border-color: var(--pri-yellow);
        color: var(--pri-yellow);
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(240, 154, 15, 0.12);
      }

      /* -- Hook section -- */
      .sj-hook { padding: 50px 0 40px; }
      .sj-hook__list {
        list-style: none;
        padding: 0;
        max-width: 620px;
        margin: 28px auto 0;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .sj-hook__list li {
        font-size: 1.05rem;
        padding: 14px 18px 14px 46px;
        position: relative;
        color: #555;
        background: #fdf4f4;
        border-radius: 8px;
        line-height: 1.5;
      }
      .sj-hook__list li::before {
        content: '\f06a';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #e74c3c;
        font-size: 1rem;
      }
      .sj-hook__reassure {
        max-width: 560px;
        margin: 30px auto 0;
        font-size: 1.08rem;
        color: #222;
        font-weight: 500;
        line-height: 1.6;
        text-align: center;
      }
      body.dark-theme .sj-hook__list li,
      [data-theme="dark"] .sj-hook__list li {
        color: #ccc;
        background: rgba(255, 255, 255, 0.06);
      }
      body.dark-theme .sj-hook__reassure,
      [data-theme="dark"] .sj-hook__reassure {
        color: #e0e0e0;
      }

      /* -- Hero pain line -- */
      .sj-hero__pain {
        font-size: 1.05rem;
        color: #e74c3c;
        font-weight: 600;
        margin-bottom: 14px;
        letter-spacing: 0;
        line-height: 1.5;
      }
      body.dark-theme .sj-hero__pain { color: #ff6b6b; }

      /* -- Start Here visual path -- */
      .sj-path-overview {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        max-width: 800px;
        margin: 40px auto 0;
        position: relative;
      }
      .sj-path-stage {
        flex: 1;
        text-align: center;
        position: relative;
        padding: 0 16px;
      }
      .sj-path-stage__dot {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        font-weight: 800;
        color: #fff;
        margin: 0 auto 16px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.15);
        position: relative;
        z-index: 2;
      }
      .sj-path-stage--beginner .sj-path-stage__dot { background: linear-gradient(135deg, #22c55e, #16a34a); }
      .sj-path-stage--intermediate .sj-path-stage__dot { background: linear-gradient(135deg, #3b82f6, #2563eb); }
      .sj-path-stage--advanced .sj-path-stage__dot { background: linear-gradient(135deg, #a855f7, #7c3aed); }
      .sj-path-stage__connector {
        position: absolute;
        top: 28px;
        left: calc(50% + 28px);
        width: calc(100% - 56px);
        height: 4px;
        border-radius: 2px;
        z-index: 1;
      }
      .sj-path-stage--beginner .sj-path-stage__connector { background: linear-gradient(90deg, #22c55e, #3b82f6); }
      .sj-path-stage--intermediate .sj-path-stage__connector { background: linear-gradient(90deg, #3b82f6, #a855f7); }
      .sj-path-stage h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-blue);
        margin-bottom: 6px;
      }
      .sj-path-stage p {
        font-size: 0.9rem;
        color: var(--pro-h1-h-p);
        line-height: 1.5;
        margin-bottom: 8px;
      }
      .sj-path-stage__time {
        font-size: 0.8rem;
        font-weight: 600;
        color: #888;
        background: rgba(0,0,0,0.04);
        padding: 3px 14px;
        border-radius: 50px;
        display: inline-block;
      }
      body.dark-theme .sj-path-stage__time {
        background: rgba(255,255,255,0.08);
        color: #aaa;
      }
      .sj-path-cta {
        text-align: center;
        margin-top: 36px;
        display: flex;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .sj-learning-guide {
        flex-basis: 100%;
        margin: 4px 0 0;
        color: var(--pro-h1-h-p);
        font-size: 0.9rem;
      }
      .sj-learning-guide a { color: var(--text-blue); font-weight: 700; }
      .sj-learning-guide a:hover { color: var(--pri-yellow); }
      @media (max-width: 640px) {
        .sj-path-overview {
          flex-direction: column;
          align-items: center;
          gap: 28px;
        }
        .sj-path-stage__connector { display: none; }
      }