html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--primary-dark);
    }

    .blog-template-page {
      background: linear-gradient(180deg, var(--primary-dark) 0%, #02223a 100%);
      min-height: 100vh;
      padding-left: 16%;
      padding-right: 16%;
    }

    p, li{
      line-height: 1.6em !important;
    }

    .blog-shell {
      max-width: 100% !important;
      width: 100%;
      padding: 32px 32px 72px;
    }

    .blog-breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
      color: rgba(239, 239, 239, 0.72);
      font-size: 13px;
      line-height: 1.4;
    }

    .blog-breadcrumb a {
      color: rgba(239, 239, 239, 0.72);
      text-decoration: none;
    }

    .blog-breadcrumb a:hover {
      color: var(--highlight-light);
    }

    .blog-breadcrumb .separator {
      opacity: 0.45;
    }

    .blog-layout {
      display: block;
    }

    .blog-main {
      min-width: 0;
    }

    .blog-sidebar {
      position: sticky;
      top: 110px;
      max-height: calc(100vh - 126px);
      overflow-y: auto;
      padding-right: 6px;
    }

    .blog-intro {
      max-width: 920px;
      margin-bottom: 24px;
    }

    .blog-intro p {
      color: rgba(239, 239, 239, 0.84);
      font-size: 18px !important;
      line-height: 1.9em;
      margin-bottom: 0;
    }

    .blog-author-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 28px;
    }

    .blog-author-badge {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(20, 61, 89, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--white);
      font-size: 12px;
      font-weight: 800;
      box-shadow: rgba(0, 0, 0, 0.25) 0 8px 22px;
    }

    .blog-author-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      color: rgba(239, 239, 239, 0.78);
      font-size: 14px;
    }

    .blog-author-meta strong {
      display: block;
      color: var(--white);
      font-size: 15px;
      line-height: 1.2;
    }

    .blog-meta-divider {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(239, 239, 239, 0.45);
    }

    .blog-hero {
      /* margin-bottom: 34px; */
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(170deg, rgba(109, 197, 255, 0.92), rgb(8, 58, 93));
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: rgba(0, 0, 0, 0.28) 0 18px 40px;
      min-height: 340px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px;
      margin: 50px 80px;
    }

    .blog-hero img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 8px;
    }

    .blog-hero-placeholder {
      color: rgba(239, 239, 239, 0.55);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 13px;
    }

    .blog-body-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 32px;
      align-items: start;
    }

    .blog-article {
      min-width: 0;
    }

    .blog-article-section {
      margin-bottom: 34px;
    }

    .blog-article-section h2 {
      position: relative;
      padding-left: 16px;
      margin-bottom: 18px;
      font-size: 2.15rem;
      line-height: 1.2;
    }

    .blog-article-section h2::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 4px;
      height: calc(100% - 12px);
      border-radius: 999px;
      background: var(--highlight-light);
    }

    .blog-article-section h3 {
      font-size: 1.4rem;
      line-height: 1.4;
      margin: 26px 0 12px;
      color: var(--white);
      font-family: 'Raleway', sans-serif !important;
      font-weight: 800;
    }

    .blog-article-section p,
    .blog-article-section li {
      font-size: 18px !important;
      line-height: 1.95em;
      color: rgba(239, 239, 239, 0.9);
    }

    .blog-card-panel {
      background: linear-gradient(180deg, rgba(20, 61, 89, 0.95), rgba(11, 46, 74, 0.96));
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      box-shadow: rgba(0, 0, 0, 0.25) 0 16px 36px;
    }

    .blog-sidebar-card {
      padding: 20px;
      margin-bottom: 18px;
    }

    .blog-sidebar-card h4 {
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: 'Raleway', sans-serif !important;
      font-weight: 800;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    }

    .blog-sidebar-list {
      margin: 0;
      padding-left: 18px;
    }

    .blog-sidebar-list li {
      color: rgba(239, 239, 239, 0.88);
      margin-bottom: 12px;
      font-size: 14px;
      line-height: 1.7;
    }

    .blog-sidebar-list a {
      color: rgba(239, 239, 239, 0.88);
      text-decoration: none;
    }

    .blog-sidebar-list a:hover {
      color: var(--highlight-light);
    }

    .takeaway-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .takeaway-list li {
      position: relative;
      padding-left: 16px;
      margin-bottom: 12px;
      color: rgba(239, 239, 239, 0.88);
      font-size: 14px;
      line-height: 1.7;
    }

    .takeaway-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--highlight-light);
      font-size: 16px;
      line-height: 1.6;
    }

    .download-card {
      text-align: center;
      overflow: hidden;
      background:
        radial-gradient(circle at top, rgba(25, 103, 153, 0.22), transparent 45%),
        linear-gradient(180deg, rgba(13, 52, 84, 1), rgba(5, 31, 52, 1));
    }

    .download-icon-wrap {
      width: 110px;
      height: 110px;
      margin: 0 auto 18px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.02);
    }

    .download-icon-wrap i {
      font-size: 44px;
      color: rgba(239, 239, 239, 0.92);
    }

    .download-card p {
      color: rgba(239, 239, 239, 0.72);
      font-size: 13px !important;
      line-height: 1.7em;
      margin-bottom: 16px;
    }

    .download-card .nav-btn {
      display: inline-block;
      min-width: 160px;
      padding: 10px 18px !important;
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      background: var(--highlight-light);
      color: var(--primary-dark);
      border-color: var(--highlight-light);
    }

    .download-card .nav-btn:hover {
      background: var(--highlight-dark) !important;
      border-color: var(--highlight-dark) !important;
      color: var(--primary-dark) !important;
    }

    .blog-callout {
      margin: 24px 0;
      padding: 22px 24px;
      border-radius: 14px;
      background: rgba(17, 52, 79, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: rgba(0, 0, 0, 0.18) 0 12px 28px;
    }

    .blog-callout-label {
      display: inline-block;
      margin-bottom: 12px;
      color: rgba(239, 239, 239, 0.75);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .blog-callout p:last-child {
      margin-bottom: 0;
    }

    .blog-callout-highlight {
      border-left: 4px solid #f0f5ff;
      border-radius: 0 14px 14px 0;
    }

    .blog-callout-warning {
      background: linear-gradient(180deg, rgba(60, 42, 7, 0.98), rgba(42, 27, 2, 0.98));
      border-left: 4px solid #d6971c;
      border-radius: 0 14px 14px 0;
    }

    .blog-callout-tip {
      background: linear-gradient(180deg, rgba(7, 57, 37, 0.98), rgba(4, 42, 27, 0.98));
      border-left: 4px solid #12a85d;
      border-radius: 0 14px 14px 0;
    }

    .blog-step-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .blog-step-list li {
      position: relative;
      padding-left: 52px;
      margin-bottom: 18px;
    }

    .blog-step-number {
      position: absolute;
      left: 0;
      top: 4px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--highlight-light);
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 800;
      box-shadow: rgba(0, 0, 0, 0.2) 0 8px 20px;
    }

    .blog-step-list strong {
      color: var(--white);
      font-weight: 800;
    }

    .related-reading {
      margin: 44px 0 34px;
    }

    .related-reading-label {
      margin-bottom: 18px;
      color: rgba(239, 239, 239, 0.72);
      font-size: 14px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 800;
      font-family: 'Raleway', sans-serif !important;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .related-card {
      overflow: hidden;
      border-radius: 14px;
      background: rgba(20, 61, 89, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: rgba(0, 0, 0, 0.18) 0 14px 30px;
      text-decoration: none !important;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .related-card:hover {
      transform: translateY(-4px);
      box-shadow: rgba(0, 0, 0, 0.28) 0 18px 34px;
      text-decoration: none !important;
    }

    .related-thumb {
      aspect-ratio: 16 / 9;
      min-height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(1, 28, 45, 0.98);
      color: rgba(239, 239, 239, 0.28);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .related-thumb img {
      width: 100%;
    }

    .related-card-body {
      padding: 16px 16px 18px;
    }

    .related-category {
      display: block;
      margin-bottom: 8px;
      color: var(--highlight-light);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: color 0.25s ease;
    }

    .related-card-title {
      color: var(--white);
      font-size: 16px;
      line-height: 1.5;
      margin: 0;
      font-family: 'Raleway', sans-serif !important;
      font-weight: 700;
      transition: color 0.25s ease;
    }

    .related-card:hover .related-category,
    .related-card:hover .related-card-title {
      color: #c5463b;
    }

    .faq-section {
      margin-top: 34px;
    }

    .faq-subtitle {
      margin-top: -6px;
      margin-bottom: 22px;
      color: rgba(239, 239, 239, 0.58);
      font-size: 15px;
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      overflow: hidden;
      border-radius: 14px;
      background: rgba(20, 61, 89, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: rgba(0, 0, 0, 0.18) 0 14px 30px;
    }

    .faq-question {
      width: 100%;
      background: transparent;
      border: 0;
      padding: 20px 24px;
      color: var(--white);
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
    }

    .faq-question:focus {
      outline: none;
    }

    .faq-icon {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 111, 97, 0.18);
      color: var(--highlight-light);
      font-size: 12px;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      background: rgba(255, 111, 97, 0.26);
    }

    .faq-answer {
      display: none;
      padding: 0 24px 22px;
    }

    .faq-item.active .faq-answer {
      display: block;
    }

    .faq-answer p:last-child {
      margin-bottom: 0;
    }

    .footer .link,
    .footer .footer-body {
      font-size: 15px;
      line-height: 1.9;
    }

    @media (max-width: 1199px) {
      .blog-body-grid {
        grid-template-columns: minmax(0, 1fr) 280px;
      }
    }

    @media (max-width: 991px) {
      .blog-layout,
      .blog-body-grid,
      .related-grid {
        grid-template-columns: 1fr;
      }

      .blog-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      .blog-shell {
        padding-top: 24px;
        padding-left: 18px;
        padding-right: 18px;
      }

      .blog-hero {
        min-height: 260px;
      }
    }

    @media (max-width: 767px) {
      .blog-shell {
        padding-bottom: 56px;
      }

      .blog-author-row {
        align-items: flex-start;
      }

      .blog-author-meta {
        gap: 8px;
      }

      .blog-intro p,
      .blog-article-section p,
      .blog-article-section li {
        font-size: 16px !important;
      }

      .blog-article-section h2 {
        font-size: 1.8rem;
      }

      .faq-question {
        font-size: 16px;
        padding: 18px 18px;
      }

      .faq-answer {
        padding: 0 18px 18px;
      }

      .blog-sidebar-card,
      .blog-callout {
        padding: 18px;
      }
    }