@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
      * { font-family: "Ubuntu", sans-serif; }

      .navbar-transparent,
      .navbar-scrolled {
        background-color: rgb(1 30 147 / var(--tw-bg-opacity, 1));
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) !important;
      }

      .nav-link-active {
        position: relative;
        display: inline-block;
      }
      .nav-link-active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.35rem;
        width: 100%;
        height: 2px;
        background-color: #c41420;
        border-radius: 9999px;
      }

      /* Mobile menu */
      .mobile-menu {
        position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px;
        height: 100vh; background: #011e93; z-index: 1000;
        transition: right 0.3s ease-in-out; overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0,0,0,0.3);
      }
      .mobile-menu.active { right: 0; }
      .mobile-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 999;
        opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      }
      .mobile-menu-overlay.active { opacity: 1; visibility: visible; }
      .mobile-menu-header {
        padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex; justify-content: space-between; align-items: center;
      }
      .mobile-menu-content { padding: 2rem 1.5rem; }
      .mobile-menu-link {
        display: block; padding: 1rem 0; color: white; font-size: 1.125rem;
        border-bottom: 1px solid rgba(255,255,255,0.1); transition: color 0.3s ease;
      }
      .mobile-menu-link:hover { color: #ef4444; }
      .mobile-menu-services { border-bottom: 1px solid rgba(255,255,255,0.1); }
      .mobile-menu-services-toggle {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 1rem 0; color: white; font-size: 1.125rem;
        background: none; border: none; cursor: pointer; transition: color 0.3s ease; text-align: left;
      }
      .mobile-menu-services-toggle:hover { color: #ef4444; }
      .mobile-menu-services-toggle i { transition: transform 0.3s ease; }
      .mobile-menu-services.open .mobile-menu-services-toggle i { transform: rotate(180deg); }
      .mobile-menu-services-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
      .mobile-menu-services.open .mobile-menu-services-dropdown { max-height: 500px; }
      .mobile-menu-sublink {
        display: block; padding: 0.75rem 0 0.75rem 1.25rem;
        color: rgba(255,255,255,0.9); font-size: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.08); transition: color 0.3s ease;
      }
      .mobile-menu-sublink:hover { color: #ef4444; }

      /* Hero */
      .blog-hero {
        background: linear-gradient(135deg, #011e93 0%, #1a0a6e 50%, #0d0a4a 100%);
        position: relative;
        overflow: hidden;
      }
      .blog-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(136,51,255,0.2) 0%, transparent 70%);
        pointer-events: none;
      }
      .blog-hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(196,20,32,0.15) 0%, transparent 70%);
        pointer-events: none;
      }

      /* Content typography */
      .blog-content {
        line-height: 1.9;
        color: #374151;
        font-size: 1.05rem;
      }
      .blog-content h1, .blog-content h2, .blog-content h3,
      .blog-content h4, .blog-content h5, .blog-content h6 {
        font-weight: 700;
        color: #011e93;
        margin-top: 2rem;
        margin-bottom: 1rem;
        line-height: 1.3;
      }
      .blog-content h1 { font-size: 2rem; }
      .blog-content h2 { font-size: 1.65rem; border-left: 4px solid #C41420; padding-left: 1rem; }
      .blog-content h3 { font-size: 1.35rem; }
      .blog-content h4 { font-size: 1.15rem; }
      .blog-content p { margin-bottom: 1.5rem; }
      .blog-content ul, .blog-content ol {
        margin: 1.25rem 0 1.5rem 1.5rem;
      }
      .blog-content ul { list-style: none; padding-left: 0; }
      .blog-content ul li {
        position: relative;
        padding-left: 1.75rem;
        margin-bottom: 0.6rem;
      }
      .blog-content ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.6rem;
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #C41420, #8833ff);
        border-radius: 50%;
      }
      .blog-content ol { list-style: decimal; }
      .blog-content ol li { margin-bottom: 0.6rem; padding-left: 0.25rem; }
      .blog-content blockquote {
        border-left: 4px solid #8833ff;
        background: linear-gradient(135deg, rgba(136,51,255,0.05), rgba(196,20,32,0.03));
        padding: 1.25rem 1.5rem;
        margin: 2rem 0;
        border-radius: 0 0.5rem 0.5rem 0;
        font-style: italic;
        color: #4b5563;
      }
      .blog-content a { color: #8833ff; text-decoration: underline; }
      .blog-content a:hover { color: #C41420; }
      .blog-content strong { color: #111827; font-weight: 700; }
      .blog-content em { font-style: italic; }
      .blog-content table {
        width: 100%; border-collapse: collapse; margin: 1.5rem 0;
        border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden;
      }
      .blog-content th {
        background: linear-gradient(135deg, #011e93, #8833ff);
        color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600;
      }
      .blog-content td { padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; }
      .blog-content tr:nth-child(even) td { background: #f9fafb; }
      .blog-content code {
        background: #f3f4f6; padding: 0.15rem 0.4rem;
        border-radius: 0.25rem; font-size: 0.875em; color: #C41420; font-family: monospace;
      }
      .blog-content pre {
        background: #1f2937; color: #f9fafb; padding: 1.5rem;
        border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0;
      }
      .blog-content pre code { background: none; color: inherit; padding: 0; }
      .blog-content img { max-width: 100%; border-radius: 0.5rem; margin: 1.5rem 0; }
      .blog-content hr { border: none; border-top: 2px solid #e5e7eb; margin: 2.5rem 0; }

      /* Sidebar */
      .sidebar-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        overflow: hidden;
      }
      .sidebar-card-header {
        background: linear-gradient(135deg, #011e93 0%, #8833ff 100%);
        padding: 1rem 1.5rem;
      }

      /* Share buttons */
      .share-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.25rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s;
      }

      /* Related blogs */
      .related-card:hover .related-title { color: #C41420; }

      /* Progress bar */
      #readingProgress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, #011e93, #8833ff, #C41420);
        z-index: 9999;
        transition: width 0.1s linear;
      }

      /* TOC */
      .toc-link {
        display: block;
        padding: 0.4rem 0.75rem;
        color: #4b5563;
        font-size: 0.875rem;
        border-left: 2px solid transparent;
        transition: all 0.2s;
      }
      .toc-link:hover { color: #8833ff; border-left-color: #8833ff; }
      .toc-link.active { color: #C41420; border-left-color: #C41420; font-weight: 600; }

      /* TOC sticky scroll */
      #tocContainer {
        max-height: calc(100vh - 7rem);
        display: flex;
        flex-direction: column;
      }
      #tocLinks {
        overflow-y: auto;
        flex: 1;
        scrollbar-width: thin;
        scrollbar-color: #e5e7eb transparent;
      }
      #tocLinks::-webkit-scrollbar { width: 4px; }
      #tocLinks::-webkit-scrollbar-track { background: transparent; }
      #tocLinks::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 9999px; }

      /* TOC mobile toggle */
      .toc-mobile-toggle {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1.25rem;
        background: linear-gradient(135deg, #011e93 0%, #8833ff 100%);
        color: white;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: none;
        cursor: pointer;
      }
      .toc-mobile-toggle i.toggle-icon { transition: transform 0.3s ease; }
      .toc-mobile-toggle.open i.toggle-icon { transform: rotate(180deg); }

      .toc-desktop-header { display: flex; }

      #tocBody {
        transition: max-height 0.35s ease, opacity 0.3s ease;
        overflow: hidden;
      }

      @media (max-width: 1023px) {
        #tocContainer {
          max-height: none !important;
          position: static !important;
        }
        .toc-mobile-toggle { display: flex; }
        .toc-desktop-header { display: none; }
        #tocBody {
          max-height: 0;
          opacity: 0;
        }
        #tocBody.open {
          max-height: 400px;
          opacity: 1;
          overflow-y: auto;
        }
        #tocLinks { overflow-y: visible; }

        /* On mobile, right sidebar loses sticky */
        aside.sticky { position: static !important; }
      }

      /* Back to top */
      #backToTop {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #011e93, #8833ff);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s;
        z-index: 100;
        box-shadow: 0 4px 15px rgba(1,30,147,0.4);
      }
      #backToTop.visible { opacity: 1; transform: translateY(0); }
      #backToTop:hover { background: linear-gradient(135deg, #C41420, #8833ff); }

      .section-gradient {
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
      }