:root{
      --navy:#0a1a3e;
      --blue:#0077ff;
      --white:#f4f7fa;
      --gray:#4b5563;
      --emerald:#00c46c;
      --accent:#00e6a4;
    }

    .blog-hero{
      position:relative;
      background:url("https://images.unsplash.com/photo-1526378722484-cc5c5103f5c5?auto=format&fit=crop&w=1920&q=60")
        center/cover no-repeat;
      color:#fff;
      padding:180px 0 140px;
      overflow:hidden;
    }
    .blog-hero:before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.65);
    }
    .blog-hero .container{ position:relative; z-index:2; }

    .badge{
      display:inline-block;
      background:var(--accent);
      color:#000;
      padding:6px 12px;
      border-radius:999px;
      font-weight:600;
      font-size:.85rem;
      margin-bottom:14px;
    }

    .post-meta{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
      margin-top:14px;
      opacity:.95;
      font-size:.95rem;
    }
    .post-meta span{
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      padding:6px 12px;
      border-radius:999px;
    }

    .blog-wrap{
      display:grid;
      grid-template-columns: 1fr 340px;
      gap:30px;
      align-items:start;
    }

    .article-card{
      background:#fff;
      border-radius:12px;
      padding:30px;
      box-shadow:0 12px 30px rgba(0,0,0,.06);
      border:1px solid rgba(0,0,0,.06);
    }

    .article-card h2{
      margin-top:32px;
      margin-bottom:12px;
      color:var(--accent);
      font-weight:600;
      font-size:1.8rem;
    }
    .article-card h3{
      margin-top:20px;
      margin-bottom:10px;
      color:var(--navy);
      font-weight:600;
      font-size:1.25rem;
    }

    .article-card p, .article-card li{
      color:var(--gray);
      font-size:1.03rem;
    }
    .article-card ul{ margin:12px 0 0 18px; }
    .article-card li{ margin-bottom:10px; }

    .callout{
      margin-top:18px;
      background: rgba(0, 230, 164, .08);
      border: 1px solid rgba(0, 230, 164, .25);
      padding:16px;
      border-radius:10px;
    }

    .grid-2{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
      margin-top:14px;
    }
    .card-mini{
      border-radius:12px;
      padding:16px;
      background:#000;
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
    }
    .card-mini strong{ color:var(--accent); display:block; margin-bottom:6px; }
    .card-mini p{ color:rgba(255,255,255,.88); margin:0; font-size:.95rem; }

    .toc{
      background:#000;
      color:#fff;
      border-radius:12px;
      padding:22px;
      position:sticky;
      top:110px;
      border:1px solid rgba(255,255,255,.12);
    }
    .toc h3{ color:var(--accent); margin-bottom:12px; font-size:1.2rem; }
    .toc a{
      color:#fff;
      opacity:.9;
      text-decoration:none;
      display:block;
      padding:10px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-size:.95rem;
    }
    .toc a:hover{ opacity:1; color:var(--blue); }

    .checklist{
      margin-top:16px;
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.08);
    }
    .check-item{
      display:grid;
      grid-template-columns: 26px 1fr;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(0,0,0,.06);
      background:#fff;
    }
    .check-item:nth-child(odd){ background:rgba(0,0,0,.02); }
    .check-item i{ color:var(--emerald); margin-top:2px; }

    .table{
      margin-top:14px;
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
    }
    .row{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
      gap:10px;
      padding:14px 16px;
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .row:nth-child(odd){ background:rgba(0,0,0,.02); }
    .row strong{ color:var(--navy); }

    .faq{
      margin-top:16px;
      border:1px solid rgba(0,0,0,.08);
      border-radius:12px;
      overflow:hidden;
    }
    .faq details{
      padding:14px 16px;
      border-bottom:1px solid rgba(0,0,0,.06);
      background:#fff;
    }
    .faq details:nth-child(odd){ background:rgba(0,0,0,.02); }
    .faq summary{
      cursor:pointer;
      font-weight:600;
      color:var(--navy);
      list-style:none;
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq p{ margin-top:10px; }

    .author-box{
      margin-top:24px;
      padding:18px;
      border-radius:12px;
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
      box-shadow:0 10px 24px rgba(0,0,0,.05);
      display:flex;
      gap:14px;
      align-items:center;
    }
    .author-box .avatar{
      width:54px; height:54px;
      border-radius:50%;
      background:#000;
      display:grid;
      place-items:center;
      color:var(--accent);
      font-size:1.3rem;
      flex:0 0 auto;
    }
    .author-box p{ margin:0; }

    .related{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    .related a{
      display:block;
      padding:14px;
      border-radius:10px;
      text-decoration:none;
      background:#000;
      color:#fff;
      border:1px solid rgba(255,255,255,.10);
      transition: transform .2s ease;
    }
    .related a:hover{
      transform: translateY(-2px);
      border-color: rgba(0, 230, 164, .35);
    }

    @media (max-width: 992px){
      .blog-wrap{ grid-template-columns: 1fr; }
      .toc{ position:relative; top:0; }
      .grid-2{ grid-template-columns: 1fr; }
      .row{ grid-template-columns: 1fr; }
      .related{ grid-template-columns: 1fr; }
    }