@import url("base.css"); /* base tokens (--blue etc.) — must stay at top */

 /* ==========================================================================
       BLOG LISTING — catalog UI is scoped with the bl- prefix so it does not
       depend on (or fight with) blog-style.css. Tokens match blog-detail.html.
       ========================================================================== */
 :root {
     --bd-brand: #0063a6;
     --bd-brand-deep: #004a7c;
     --bd-brand-tint: #e8f1f8;
     --bd-ink: #122033;
     --bd-body: #2b3a4c;
     --bd-muted: #5d6b7c;
     --bd-line: #dfe6ee;
     --bd-soft: #f5f8fb;
     --bd-paper: #ffffff;
     --bd-head-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
     --bd-text-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
 }

 /* Canvas safety: keep particle canvases behind content without affecting layout */
 .blog-hero,
 .banner {
     position: relative;
     overflow: hidden;
 }

 #hero-canvas,
 #banner-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }

 .blog-hero>.wrap,
 .banner>.wrap {
     position: relative;
     z-index: 1;
 }

 .bl-catalog [hidden],
 .bl-catalog[hidden] {
     display: none !important;
 }

 .bl-catalog {
     padding-block: clamp(40px, 6vw, 80px);
     background: var(--bd-paper);
     color: var(--bd-body);
 }

 .bl-catalog :focus-visible {
     outline: 3px solid var(--bd-brand);
     outline-offset: 3px;
     border-radius: 6px;
 }

 /* ---------- Controls ---------- */
 .bl-controls {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 16px 24px;
     margin-bottom: 28px;
 }

 .bl-tabs {
     display: flex;
     gap: 8px;
     overflow-x: auto;
     scrollbar-width: thin;
     padding: 4px 2px;
     margin: -4px -2px;
     max-width: 100%;
 }

 .bl-tab {
     flex: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     height: 40px;
     padding: 0 16px;
     border: 1px solid var(--bd-line);
     border-radius: 999px;
     background: var(--bd-paper);
     color: var(--bd-ink);
     font: 600 .875rem/1 var(--bd-text-font);
     cursor: pointer;
     white-space: nowrap;
     transition: border-color .15s, background-color .15s, color .15s;
 }

 .bl-tab:hover {
     border-color: var(--bd-brand);
     color: var(--bd-brand);
 }

 .bl-tab[aria-selected="true"] {
     background: var(--bd-brand);
     border-color: var(--bd-brand);
     color: #fff;
 }

 .bl-tab-count {
     min-width: 22px;
     height: 22px;
     padding: 0 6px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     font-size: .75rem;
     background: var(--bd-soft);
     color: var(--bd-muted);
 }

 .bl-tab[aria-selected="true"] .bl-tab-count {
     background: rgba(255, 255, 255, .2);
     color: #fff;
 }

 .bl-sort {
     display: flex;
     align-items: center;
     gap: 10px;
     font: 500 .875rem/1 var(--bd-text-font);
     color: var(--bd-muted);
 }

 .bl-sort select {
     height: 40px;
     padding: 0 36px 0 14px;
     border: 1px solid var(--bd-line);
     border-radius: 10px;
     background: var(--bd-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235d6b7c' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
     appearance: none;
     -webkit-appearance: none;
     color: var(--bd-ink);
     font: 600 .875rem/1 var(--bd-text-font);
     cursor: pointer;
 }

 .bl-status {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin: -8px 0 24px;
     padding: 12px 16px;
     border-radius: 10px;
     background: var(--bd-soft);
     font: 500 .9rem/1.4 var(--bd-text-font);
     color: var(--bd-muted);
 }

 .bl-status strong {
     color: var(--bd-ink);
 }

 .bl-clear {
     border: 0;
     background: none;
     color: var(--bd-brand);
     font: 600 .875rem/1 var(--bd-text-font);
     cursor: pointer;
     padding: 6px 0;
 }

 .bl-clear:hover {
     text-decoration: underline;
 }

 /* ---------- Grid + cards ---------- */
 .bl-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 28px;
 }

 .bl-card {
     display: flex;
     flex-direction: column;
     border: 1px solid var(--bd-line);
     border-radius: 14px;
     overflow: hidden;
     background: var(--bd-paper);
     transition: border-color .15s;
 }

 .bl-card:hover {
     border-color: #b9cde0;
 }

 .bl-card-media {
     display: block;
     aspect-ratio: 1200 / 628;
     background: linear-gradient(135deg, var(--bd-brand-tint), var(--bd-soft));
     overflow: hidden;
 }

 .bl-card-media img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .35s ease;
 }

 .bl-card:hover .bl-card-media img {
     transform: scale(1.03);
 }

 .bl-card-body {
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 20px 22px 22px;
 }

 .bl-card-cats {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-bottom: 12px;
 }

 .bl-chip {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 999px;
     background: var(--bd-brand-tint);
     color: var(--bd-brand-deep);
     font: 600 .75rem/1.3 var(--bd-text-font);
     text-decoration: none;
 }

 .bl-chip:hover {
     background: var(--bd-brand);
     color: #fff;
 }

 .bl-card-title {
     margin: 0 0 10px;
     font: 700 1.1875rem/1.35 var(--bd-head-font);
     letter-spacing: -.01em;
 }

 .bl-card-title a {
     color: var(--bd-ink);
     text-decoration: none;
 }

 .bl-card-title a:hover {
     color: var(--bd-brand);
 }

 .bl-card-excerpt {
     margin: 0 0 18px;
     font: 400 .9375rem/1.6 var(--bd-text-font);
     color: var(--bd-body);
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .bl-card-foot {
     margin-top: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding-top: 16px;
     border-top: 1px solid var(--bd-line);
     font: 500 .8125rem/1.4 var(--bd-text-font);
     color: var(--bd-muted);
 }

 .bl-card-foot strong {
     display: block;
     color: var(--bd-ink);
     font-weight: 600;
 }

 .bl-card-read {
     flex: none;
     color: var(--bd-brand);
     font-weight: 600;
     text-decoration: none;
 }

 .bl-card-read:hover {
     text-decoration: underline;
 }

 /* ---------- Skeleton ---------- */
 .bl-skel {
     display: block;
     background: linear-gradient(90deg, #e9eef4 0%, #f5f8fb 50%, #e9eef4 100%);
     background-size: 200% 100%;
     animation: blShimmer 1.3s linear infinite;
     border-radius: 8px;
 }

 .bl-card--skel .bl-card-media {
     background: none;
 }

 .bl-card--skel .bl-card-media .bl-skel {
     width: 100%;
     height: 100%;
     border-radius: 0;
 }

 .bl-card--skel .bl-skel-line {
     height: 14px;
     margin-bottom: 10px;
 }

 .bl-card--skel .bl-skel-line:nth-child(1) {
     width: 40%;
     margin-bottom: 16px;
 }

 .bl-card--skel .bl-skel-line:nth-child(2) {
     height: 20px;
 }

 .bl-card--skel .bl-skel-line:last-child {
     width: 70%;
 }

 @keyframes blShimmer {
     to {
         background-position: -200% 0;
     }
 }

 /* ---------- Empty / error ---------- */
 .bl-empty {
     text-align: center;
     padding: 56px 20px;
     border: 1px dashed var(--bd-line);
     border-radius: 14px;
 }

 .bl-empty h3 {
     margin: 0 0 8px;
     font: 700 1.35rem/1.3 var(--bd-head-font);
     color: var(--bd-ink);
 }

 .bl-empty p {
     margin: 0 auto 22px;
     max-width: 52ch;
     color: var(--bd-muted);
     font: 400 .975rem/1.6 var(--bd-text-font);
 }

 /* ---------- Pagination ---------- */
 .bl-pager {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-top: 40px;
     padding-top: 24px;
     border-top: 1px solid var(--bd-line);
     font: 500 .875rem/1 var(--bd-text-font);
     color: var(--bd-muted);
 }

 .bl-pager-nums,
 .bl-pager-ctrls {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .bl-page-btn,
 .bl-step-btn {
     min-width: 40px;
     height: 40px;
     padding: 0 12px;
     border: 1px solid var(--bd-line);
     border-radius: 10px;
     background: var(--bd-paper);
     color: var(--bd-ink);
     font: 600 .875rem/1 var(--bd-text-font);
     cursor: pointer;
 }

 .bl-page-btn:hover,
 .bl-step-btn:hover:not(:disabled) {
     border-color: var(--bd-brand);
     color: var(--bd-brand);
 }

 .bl-page-btn[aria-current="page"] {
     background: var(--bd-brand);
     border-color: var(--bd-brand);
     color: #fff;
 }

 .bl-step-btn:disabled {
     opacity: .45;
     cursor: not-allowed;
 }

 /* ---------- Hero search (dark glass style) ---------- */
 .bl-search {
     max-width: 680px;
     margin: 28px auto 24px;
 }

 .bl-search-row {
     position: relative;
     display: flex;
     align-items: center;
     background: rgba(15, 23, 42, 0.85);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(71, 85, 105, 0.8);
     border-radius: var(--r-full, 999px);
     padding: 6px 14px 6px 18px;
     box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.4);
     transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }

 .bl-search-row:focus-within {
     border-color: var(--blue-400, #60a5fa);
     background: rgba(15, 23, 42, 0.95);
     box-shadow: 0 16px 36px -4px rgba(37, 99, 235, 0.35), 0 0 0 3px rgba(37, 99, 235, 0.25);
 }

 .bl-search-row>svg {
     flex: none;
     width: 20px;
     height: 20px;
     margin-right: 12px;
     fill: none;
     stroke: var(--slate-400, #94a3b8);
     stroke-width: 2;
     stroke-linecap: round;
     pointer-events: none;
     transition: stroke 0.2s;
 }

 .bl-search-row:focus-within>svg {
     stroke: var(--blue-400, #60a5fa);
 }

 .bl-search input {
     flex: 1;
     min-width: 0;
     width: 100%;
     height: auto;
     border: 0;
     outline: none;
     background: transparent;
     padding: 8px 0;
     font-family: inherit;
     font-size: 0.98rem;
     line-height: 1.4;
     color: #ffffff;
     -webkit-appearance: none;
     appearance: none;
 }

 .bl-search input::placeholder {
     color: var(--slate-400, #94a3b8);
     opacity: 1;
 }

 .bl-search input::-webkit-search-cancel-button,
 .bl-search input::-webkit-search-decoration {
     -webkit-appearance: none;
 }

 /* Keep browser autofill from painting a light box inside the dark bar */
 .bl-search input:-webkit-autofill {
     -webkit-text-fill-color: #ffffff;
     -webkit-box-shadow: 0 0 0 40px rgba(15, 23, 42, 1) inset;
     caret-color: #ffffff;
 }

 .bl-search-clear {
     flex: none;
     display: flex;
     align-items: center;
     justify-content: center;
     width: auto;
     height: auto;
     padding: 6px;
     border: 0;
     border-radius: 50%;
     background: none;
     color: var(--slate-400, #94a3b8);
     cursor: pointer;
     transition: color 0.2s, background 0.2s;
 }

 .bl-search-clear:hover {
     color: #ffffff;
     background: rgba(255, 255, 255, 0.12);
 }

 .bl-search-clear:focus-visible {
     outline: 2px solid var(--blue-400, #60a5fa);
     outline-offset: 2px;
 }

 .bl-search-clear svg {
     width: 16px;
     height: 16px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2.5;
     stroke-linecap: round;
 }

 .bl-kbd {
     flex: none;
     margin: 0 0 0 8px;
     padding: 3px 8px;
     background: rgba(255, 255, 255, 0.12);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     color: var(--slate-300, #cbd5e1);
     font: 500 0.72rem/1 'IBM Plex Mono', monospace;
 }

 /* The hidden attribute must win over the display rules above */
 .bl-search-clear[hidden],
 .bl-kbd[hidden] {
     display: none;
 }

 /* ---------- Newsletter feedback ---------- */
 .newsletter-feedback[data-state="ok"],
 .newsletter-feedback[data-state="info"] {
     color: #fff;
 }

 .newsletter-feedback[data-state="error"] {
     color: #ffd6d6;
 }

 .bl-sr {
     position: absolute;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
 }

 @media (max-width: 1024px) {
     .bl-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (max-width: 640px) {
     .bl-grid {
         grid-template-columns: 1fr;
     }

     .bl-pager {
         justify-content: center;
     }

     .bl-kbd {
         display: none;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .bl-skel {
         animation: none;
     }

     .bl-card-media img,
     .bl-tab,
     .bl-card {
         transition: none;
     }

     .bl-card:hover .bl-card-media img {
         transform: none;
     }
 }


 .blog-hero {
     position: relative;
     background: linear-gradient(180deg, var(--slate-900) 0%, #111a2e 100%);
     color: #ffffff;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     padding-top: 56px;
     padding-bottom: 50px;
 }

 #hero-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: auto;
 }

 .blog-hero .wrap {
     position: relative;
     z-index: 2;
 }

 .hero-content {
     max-width: 860px;
     margin: 0 auto;
     text-align: center;
 }

 .blog-hero .eyebrow {
     color: var(--blue-400);
     font-weight: 700;
     letter-spacing: 0.18em;
     margin-bottom: 8px;
 }

 .blog-hero .eyebrow::before {
     background: #fff;
 }

 .blog-hero h1 {
     color: #ffffff;
     font-size: clamp(2.3rem, 4.2vw, 3.6rem);
     font-weight: 800;
     line-height: 1.15;
     margin: 12px 0 16px;
 }

 .blog-hero h1 .grad {
     background: linear-gradient(100deg, #60a5fa 10%, #93c5fd 50%, #38bdf8 90%);
     background-size: 200% auto;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shine 6s linear infinite;
 }

 @keyframes shine {
     to {
         background-position: -200% center;
     }
 }

 .blog-hero p.lead {
     font-size: 1.12rem;
     color: var(--slate-300);
     margin: 0 auto 30px;
     max-width: 720px;
     line-height: 1.6;
 }


 /* ==========================================================================
   Complimentary Cyber Risk Audit Section
   ========================================================================== */

 .audit-cta-section {
     background: #ffffff;
     border-top: 1px solid var(--slate-200);
     border-bottom: 1px solid var(--slate-200);
 }

 .audit-card {
     display: grid;
     grid-template-columns: 1.4fr 1fr;
     gap: 40px;
     align-items: center;
     background: linear-gradient(135deg, var(--slate-50) 0%, #edf4fc 100%);
     border: 1px solid var(--blue-100);
     border-radius: var(--r-lg);
     padding: 44px;
     box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08);
 }

 .audit-card-content h2 {
     font-size: clamp(1.6rem, 2.5vw, 2.1rem);
     margin: 10px 0 12px;
     color: var(--slate-900);
 }

 .audit-card-content p {
     color: var(--slate-600);
     font-size: 0.98rem;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .audit-checklist {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .audit-checklist li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 0.9rem;
     color: var(--slate-700);
 }

 .audit-checklist li svg {
     width: 18px;
     height: 18px;
     stroke: var(--blue);
     stroke-width: 2.5;
     fill: none;
     margin-top: 2px;
 }

 .audit-card-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 16px;
     padding: 28px;
     background: #ffffff;
     border: 1px solid var(--slate-200);
     border-radius: var(--r-md);
     box-shadow: var(--shadow-sm);
 }

 .audit-badge {
     font-family: "IBM Plex Mono", monospace;
     font-size: 0.76rem;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--blue-700);
     background: var(--blue-50);
     border: 1px solid var(--blue-100);
     padding: 4px 12px;
     border-radius: var(--r-full);
 }

 .audit-card-action .btn-primary {
     width: 100%;
     padding: 13px 24px;
 }

 .audit-direct-call {
     font-size: 0.84rem;
     color: var(--slate-500);
 }

 .audit-direct-call a {
     color: var(--blue);
     font-weight: 700;
     font-family: "IBM Plex Mono", monospace;
 }

 /* ==========================================================================
   Newsletter Section (.banner from 3nerds New Home)
   ========================================================================== */

 .banner {
     background: linear-gradient(135deg, var(--slate-900) 0%, var(--blue-800) 55%, var(--blue) 100%);
     color: #ffffff;
     position: relative;
     overflow: hidden;
     padding: 80px 0;
 }

 #banner-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .banner .wrap {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
 }

 .banner-content {
     max-width: 580px;
 }

 .banner-content .eyebrow {
     color: var(--blue-300);
 }

 .banner-content .eyebrow::before {
     background: var(--blue-300);
 }

 .banner-content h2 {
     font-size: clamp(2rem, 3.4vw, 2.6rem);
     color: #ffffff;
     margin: 14px 0 12px;
 }

 .banner-content p {
     color: var(--blue-100);
     font-size: 1.05rem;
     line-height: 1.55;
 }

 .banner-actions {
     flex: 1;
     max-width: 500px;
 }

 .newsletter-form {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .newsletter-input-group {
     display: flex;
     gap: 10px;
 }

 .newsletter-input {
     flex: 1;
     font-family: inherit;
     font-size: 0.92rem;
     padding: 12px 18px;
     border-radius: var(--r-md);
     border: 1px solid rgba(255, 255, 255, 0.25);
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(8px);
     color: #ffffff;
     outline: none;
     transition: border-color 0.2s, background 0.2s;
 }

 .newsletter-input::placeholder {
     color: var(--blue-200);
 }

 .newsletter-input:focus {
     border-color: #ffffff;
     background: rgba(255, 255, 255, 0.2);
 }

 .newsletter-disclaimer {
     font-size: 0.76rem;
     color: var(--blue-200);
 }

 .newsletter-disclaimer a {
     color: #ffffff;
     text-decoration: underline;
 }

 .newsletter-feedback {
     font-size: 0.85rem;
     font-weight: 600;
     min-height: 20px;
 }

 .newsletter-feedback.success {
     color: #86efac;
 }

 .newsletter-feedback.error {
     color: #fca5a5;
 }

 /* ==========================================================================
   Full Article Reader Modal / Slide-In Drawer
   ========================================================================== */

 .reader-modal-overlay {
     position: fixed;
     inset: 0;
     z-index: 120;
     background: rgba(15, 23, 42, 0.75);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 30px 20px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .reader-modal-overlay.open {
     opacity: 1;
     pointer-events: auto;
 }

 .reader-modal-card {
     background: #ffffff;
     border: 1px solid var(--slate-200);
     border-radius: var(--r-lg);
     box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3);
     max-width: 860px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     position: relative;
     padding: 44px;
     transform: scale(0.95) translateY(20px);
     transition: transform 0.3s var(--ease);
 }

 .reader-modal-overlay.open .reader-modal-card {
     transform: scale(1) translateY(0);
 }

 .reader-modal-close {
     position: sticky;
     top: 0;
     float: right;
     z-index: 10;
     background: var(--slate-100);
     border: 1px solid var(--slate-200);
     color: var(--slate-600);
     width: 36px;
     height: 36px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: color 0.2s, background 0.2s, transform 0.2s;
 }

 .reader-modal-close:hover {
     background: var(--slate-900);
     color: #ffffff;
     transform: rotate(90deg);
 }

 .reader-modal-close svg {
     width: 18px;
     height: 18px;
     stroke: currentColor;
     stroke-width: 2.5;
 }

 .reader-header {
     margin-bottom: 28px;
 }

 .reader-meta-row {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
     flex-wrap: wrap;
 }

 .reader-cat-badge {
     background: var(--blue-100);
     color: var(--blue-700);
     font-family: "IBM Plex Mono", monospace;
     font-size: 0.72rem;
     font-weight: 700;
     text-transform: uppercase;
     padding: 3px 10px;
     border-radius: var(--r-full);
 }

 .reader-time-badge {
     background: var(--slate-100);
     color: var(--slate-600);
     font-family: "IBM Plex Mono", monospace;
     font-size: 0.72rem;
     font-weight: 600;
     padding: 3px 10px;
     border-radius: var(--r-full);
 }

 .reader-date {
     font-family: "IBM Plex Mono", monospace;
     font-size: 0.78rem;
     color: var(--slate-400);
 }

 .reader-title {
     font-size: clamp(1.6rem, 2.5vw, 2.2rem);
     font-weight: 800;
     color: var(--slate-900);
     line-height: 1.25;
     margin-bottom: 8px;
 }

 .reader-subtitle {
     font-size: 1.05rem;
     color: var(--slate-500);
     line-height: 1.5;
     margin-bottom: 20px;
 }

 .reader-author-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 0;
     border-top: 1px solid var(--slate-200);
     border-bottom: 1px solid var(--slate-200);
     gap: 16px;
     flex-wrap: wrap;
 }

 .author-details {
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .reader-share-group {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .btn-share-icon {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: var(--slate-100);
     border: 1px solid var(--slate-200);
     color: var(--slate-600);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
 }

 .btn-share-icon:hover {
     background: var(--blue);
     color: #ffffff;
     border-color: var(--blue);
     transform: translateY(-1px);
 }

 .btn-share-icon svg {
     width: 16px;
     height: 16px;
     stroke: currentColor;
     stroke-width: 2;
     fill: none;
 }

 /* Reader Key Takeaways Box */
 .reader-takeaways {
     background: var(--blue-50);
     border: 1px solid var(--blue-100);
     border-radius: var(--r-md);
     padding: 22px;
     margin-bottom: 30px;
 }

 .takeaways-header {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 12px;
 }

 .takeaways-header svg {
     width: 18px;
     height: 18px;
     stroke: var(--blue-700);
     fill: var(--blue-200);
 }

 .takeaways-header h5 {
     font-size: 0.98rem;
     color: var(--blue-800);
     font-weight: 700;
 }

 .takeaways-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .takeaways-list li {
     font-size: 0.9rem;
     color: var(--slate-700);
     line-height: 1.5;
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .takeaways-list li::before {
     content: "•";
     color: var(--blue);
     font-weight: bold;
     font-size: 1.2rem;
     line-height: 1;
 }

 /* Reader Body Typography */
 .reader-body {
     color: var(--slate-700);
     font-size: 1.02rem;
     line-height: 1.75;
 }

 .reader-body h3 {
     font-size: 1.45rem;
     color: var(--slate-900);
     margin: 28px 0 12px;
 }

 .reader-body h4 {
     font-size: 1.2rem;
     color: var(--slate-800);
     margin: 22px 0 10px;
 }

 .reader-body p {
     margin-bottom: 18px;
 }

 .reader-body ul,
 .reader-body ol {
     margin: 0 0 20px 24px;
 }

 .reader-body li {
     margin-bottom: 8px;
 }

 .reader-body blockquote {
     background: var(--slate-50);
     border-left: 4px solid var(--blue);
     padding: 16px 20px;
     border-radius: 0 var(--r) var(--r) 0;
     font-style: italic;
     color: var(--slate-700);
     margin: 24px 0;
 }

 .reader-footer-cta {
     margin-top: 40px;
     padding-top: 30px;
     border-top: 1px solid var(--slate-200);
 }

 .cta-inner {
     background: var(--slate-50);
     border: 1px solid var(--slate-200);
     border-radius: var(--r-md);
     padding: 26px;
     text-align: center;
 }

 .cta-inner h4 {
     font-size: 1.25rem;
     color: var(--slate-900);
     margin: 8px 0 6px;
 }

 .cta-inner p {
     color: var(--slate-600);
     font-size: 0.94rem;
     max-width: 580px;
     margin: 0 auto 18px;
 }

 .cta-btns {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
 }

 /* ==========================================================================
   Toast Notification
   ========================================================================== */

 .toast-container {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 150;
     display: flex;
     flex-direction: column;
     gap: 8px;
     pointer-events: none;
 }

 .toast {
     background: var(--slate-900);
     color: #ffffff;
     padding: 12px 18px;
     border-radius: var(--r);
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
     font-size: 0.88rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     animation: slideInUp 0.3s ease;
     pointer-events: auto;
 }

 @keyframes slideInUp {
     from {
         transform: translateY(20px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .toast svg {
     width: 16px;
     height: 16px;
     stroke: #4ade80;
     stroke-width: 2.5;
     fill: none;
 }

 /* ==========================================================================
   Footer (Matching 3nerds New Home)
   ========================================================================== */

 /* FOOTER */
 .footer {
     background: var(--ink);
     color: #9fb6cb;
     padding: 72px 0 0
 }

 .foot-grid {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
     gap: 40px;
     padding-bottom: 54px;
     border-bottom: 1px solid rgba(255, 255, 255, .1)
 }

 .foot-logo {
     background: #fff;
     border-radius: 12px;
     padding: 14px 16px;
     display: inline-block;
     margin-bottom: 20px
 }

 .foot-logo img {
     height: 38px
 }

 .foot-brand p {
     font-size: .92rem;
     max-width: 300px;
     margin-bottom: 22px
 }

 .foot-soc {
     display: flex;
     gap: 10px
 }

 .foot-soc a {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(255, 255, 255, .07);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: .25s
 }

 .foot-soc a:hover {
     background: var(--blue);
     transform: translateY(-3px)
 }

 .foot-soc svg {
     width: 16px;
     height: 16px;
     fill: #fff
 }

 .foot-col h5 {
     font-family: "Space Grotesk";
     color: #fff;
     font-size: 1rem;
     margin-bottom: 18px;
     font-weight: 600
 }

 .foot-col ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 11px
 }

 .foot-col a {
     font-size: .9rem;
     transition: color .2s, padding .2s
 }

 .foot-col a:hover {
     color: #fff;
     padding-left: 4px
 }

 .foot-contact li {
     display: flex;
     gap: 11px;
     font-size: .9rem;
     margin-bottom: 14px;
     align-items: flex-start
 }

 .foot-contact svg {
     width: 17px;
     height: 17px;
     stroke: var(--blue-300);
     fill: none;
     flex: none;
     margin-top: 3px
 }

 .foot-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 24px 0;
     flex-wrap: wrap;
     gap: 12px;
     font-size: .84rem;
     font-family: "IBM Plex Mono"
 }

 .foot-bottom a {
     color: #9fb6cb
 }

 .foot-bottom a:hover {
     color: #fff
 }

 /* ==========================================================================
   Floating Action Button (FAB)
   ========================================================================== */

 .fab {
     position: fixed;
     bottom: 28px;
     right: 28px;
     z-index: 50;
     background: var(--blue);
     color: #fff;
     padding: 12px 22px;
     border-radius: var(--r-full);
     font-weight: 700;
     font-size: 0.88rem;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.45);
     transform: translateY(100px);
     opacity: 0;
     transition: transform 0.35s var(--ease), opacity 0.35s ease, background 0.2s ease;
     text-decoration: none;
 }

 .fab.show {
     transform: translateY(0);
     opacity: 1;
 }

 .fab:hover {
     background: var(--blue-700);
     transform: translateY(-3px);
     box-shadow: 0 14px 32px -4px rgba(37, 99, 235, 0.55);
 }

 .fab svg {
     width: 15px;
     height: 15px;
     stroke: #fff;
     fill: none;
     stroke-width: 2.5;
 }

 /* ==========================================================================
   Reveal Animations
   ========================================================================== */

 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
 }

 .reveal.in {
     opacity: 1;
     transform: translateY(0);
 }

 .d1 {
     transition-delay: 0.1s;
 }

 .d2 {
     transition-delay: 0.2s;
 }

 .d3 {
     transition-delay: 0.3s;
 }

 /* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

 @media (max-width: 1024px) {
     .featured-card {
         grid-template-columns: 1fr;
     }

     .featured-visual {
         min-height: 240px;
     }

     .blog-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 22px;
     }

     .audit-card {
         grid-template-columns: 1fr;
         gap: 28px;
         padding: 32px;
     }

     .foot-grid {
         grid-template-columns: 1fr 1fr;
         gap: 36px;
     }

     .banner .wrap {
         flex-direction: column;
         align-items: flex-start;
     }
 }

 @media (max-width: 768px) {

     .topbar-left span:nth-child(2),
     .topbar-left span:nth-child(3) {
         display: none;
     }

     .nav-links,
     .nav-phone {
         display: none;
     }

     .burger {
         display: flex;
     }

     .nav-links.open {
         display: flex;
         position: absolute;
         top: 76px;
         left: 0;
         right: 0;
         flex-direction: column;
         background: #ffffff;
         border-bottom: 1px solid var(--slate-200);
         padding: 20px;
         gap: 6px;
         box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
     }

     .nav-links.open a {
         width: 100%;
         padding: 10px 16px;
     }

     .blog-grid {
         grid-template-columns: 1fr;
     }

     .hero-telemetry-bar {
         display: none;
     }

     .blog-hero {
         padding-top: 40px;
         padding-bottom: 40px;
     }

     .featured-content {
         padding: 26px 20px;
     }

     .newsletter-input-group {
         flex-direction: column;
     }

     .newsletter-input-group .btn {
         width: 100%;
     }

     .reader-modal-card {
         padding: 28px 20px;
     }

     .foot-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 480px) {
     .category-tabs {
         width: 100%;
         overflow-x: auto;
         flex-wrap: nowrap;
         padding-bottom: 6px;
     }

     .cat-tab {
         flex-shrink: 0;
     }

     .blog-hero h1 {
         font-size: 2rem;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     * {
         animation: none !important;
         transition: none !important;
     }

     .reveal {
         opacity: 1;
         transform: none;
     }
 }

.foot-logo2 {
    display: inline-block;
    margin-bottom: 20px
}

.foot-logo2 img{
    width:50%;
}