/* CTA Band */
   .cta-band {
     background: var(--bg-card);
     border-top: 1px solid var(--bg-border);
     border-bottom: 1px solid var(--bg-border);
     padding: 4rem 2rem;
     position: relative;
     overflow: hidden;
   }
   .cta-band::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--lime), transparent);
   }
   .cta-band-inner {
     max-width: 900px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
   }
   .cta-band-eyebrow {
     font-family: var(--mono);
     font-size: 0.65rem;
     color: var(--text-dim);
     letter-spacing: 0.2em;
     text-transform: uppercase;
     margin-bottom: 0.4rem;
   }
   .cta-band-title {
     font-family: var(--mono);
     font-size: clamp(1.2rem, 2.5vw, 1.8rem);
     font-weight: 700;
     color: var(--text-bright);
     margin-bottom: 0.5rem;
   }
   .cta-band-sub { font-size: 0.84rem; color: var(--text-dim); }
   .cta-band-btn {
     font-family: var(--mono);
     font-weight: 700;
     font-size: 0.78rem;
     letter-spacing: 0.1em;
     padding: 0.9rem 2rem;
     background: var(--lime);
     color: var(--nav-cta-text);
     text-decoration: none;
     text-transform: uppercase;
     clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
     transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
     white-space: nowrap;
     flex-shrink: 0;
   }
   .cta-band-btn:hover {
     background: #6affaa;
     transform: translateY(-2px);
     box-shadow: 0 0 24px rgba(50,255,126,0.35);
   }

   /* =============================================
      PAGE HERO
   ============================================= */
   #page-hero {
     padding: 9rem 2rem 4rem;
     text-align: center;
     position: relative;
     overflow: hidden;
     border-bottom: 1px solid var(--bg-border);
   }

   .hex-bg {
     position: absolute;
     inset: 0;
     font-family: var(--mono);
     font-size: 0.6rem;
     line-height: 1.4;
     color: var(--hex-color);
     word-break: break-all;
     overflow: hidden;
     user-select: none;
     pointer-events: none;
     padding: 1rem;
     letter-spacing: 0.05em;
   }

   .page-eyebrow {
     font-family: var(--mono);
     font-size: 0.7rem;
     color: var(--red);
     letter-spacing: 0.22em;
     text-transform: uppercase;
     margin-bottom: 1rem;
   }

   .page-title {
     font-family: var(--mono);
     font-size: clamp(1.8rem, 4vw, 3rem);
     font-weight: 700;
     color: var(--text-bright);
     margin-bottom: 1rem;
     letter-spacing: -0.01em;
   }
   .page-title .accent { color: var(--lime); }

   .page-sub {
     max-width: 580px;
     margin: 0 auto 2rem;
     font-size: 0.9rem;
     color: var(--text-dim);
     line-height: 1.7;
   }

   /* Framework filter tabs */
   .filter-bar {
     display: flex;
     gap: 0.5rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 1.5rem;
   }

   .filter-btn {
     font-family: var(--mono);
     font-size: 0.68rem;
     letter-spacing: 0.08em;
     padding: 0.4rem 0.9rem;
     background: transparent;
     border: 1px solid var(--bg-border);
     color: var(--text-dim);
     cursor: pointer;
     transition: all 0.2s;
   }
   .filter-btn:hover,
   .filter-btn.active { border-color: var(--lime); color: var(--lime); background: rgba(50,255,126,0.05); }
   .filter-btn[data-filter="red"].active   { border-color: var(--red);  color: var(--red);  background: rgba(255,62,62,0.05); }
   .filter-btn[data-filter="blue"].active  { border-color: var(--blue); color: var(--blue); background: rgba(24,220,255,0.05); }
   .filter-btn[data-filter="dfir"].active  { border-color: var(--amber); color: var(--amber); background: rgba(255,165,0,0.05); }

   /* =============================================
      MAIN CONTENT LAYOUT
   ============================================= */
   main {
     max-width: 1200px;
     margin: 0 auto;
     padding: 4rem 2rem 6rem;
   }

   /* =============================================
      CATEGORY HEADERS
   ============================================= */
   .cat-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 2rem;
     margin-top: 4rem;
   }
   .cat-header:first-child { margin-top: 0; }

   .cat-line {
     flex: 1;
     height: 1px;
     background: var(--bg-border);
   }

   .cat-label {
     font-family: var(--mono);
     font-size: 0.72rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 0.3rem 0.8rem;
     border: 1px solid;
     white-space: nowrap;
   }
   .cat-label.red   { color: var(--red);   border-color: rgba(255,62,62,0.4);  background: rgba(255,62,62,0.05); }
   .cat-label.blue  { color: var(--blue);  border-color: rgba(24,220,255,0.4); background: rgba(24,220,255,0.05); }
   .cat-label.dfir  { color: var(--amber); border-color: rgba(255,165,0,0.4);  background: rgba(255,165,0,0.05); }

   /* =============================================
      FRAMEWORK CARDS
   ============================================= */
   .framework-grid {
     display: grid;
     gap: 1.5rem;
   }

   .framework-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-border);
     overflow: hidden;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   .framework-card:hover {
     transform: translateY(-2px);
   }
   .framework-card[data-cat="red"]:hover   { box-shadow: 0 6px 28px rgba(255,62,62,0.1); }
   .framework-card[data-cat="blue"]:hover  { box-shadow: 0 6px 28px rgba(24,220,255,0.1); }
   .framework-card[data-cat="dfir"]:hover  { box-shadow: 0 6px 28px rgba(255,165,0,0.1); }

   .card-accent {
     height: 2px;
   }
   [data-cat="red"]  .card-accent { background: var(--red); }
   [data-cat="blue"] .card-accent { background: var(--blue); }
   [data-cat="dfir"] .card-accent { background: var(--amber); }

   .card-body { padding: 1.8rem 2rem; }

   .card-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
     margin-bottom: 1rem;
     flex-wrap: wrap;
   }

   .card-title-wrap {}

   .card-framework-id {
     font-family: var(--mono);
     font-size: 0.62rem;
     color: var(--text-dim);
     letter-spacing: 0.15em;
     margin-bottom: 0.3rem;
   }

   .card-title {
     font-family: var(--mono);
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--text-bright);
   }

   .card-badge {
     font-family: var(--mono);
     font-size: 0.6rem;
     letter-spacing: 0.12em;
     padding: 0.2rem 0.6rem;
     border: 1px solid;
     white-space: nowrap;
     align-self: flex-start;
     flex-shrink: 0;
   }
   [data-cat="red"]  .card-badge { color: var(--red);   border-color: rgba(255,62,62,0.4); }
   [data-cat="blue"] .card-badge { color: var(--blue);  border-color: rgba(24,220,255,0.4); }
   [data-cat="dfir"] .card-badge { color: var(--amber); border-color: rgba(255,165,0,0.4); }

   .card-desc {
     font-size: 0.86rem;
     color: var(--text-dim);
     line-height: 1.7;
     margin-bottom: 1.5rem;
   }

   /* Phase stepper */
   .phase-label {
     font-family: var(--mono);
     font-size: 0.65rem;
     color: var(--text-dim);
     letter-spacing: 0.15em;
     text-transform: uppercase;
     margin-bottom: 0.75rem;
   }

   .phases {
     display: flex;
     flex-wrap: wrap;
     gap: 0;
     margin-bottom: 1.4rem;
     position: relative;
   }

   .phase {
     flex: 1;
     min-width: 90px;
     position: relative;
     padding: 0.7rem 0.5rem 0.7rem 1rem;
     background: var(--hover-tint);
     border: 1px solid var(--bg-border);
     border-right: none;
     cursor: default;
     transition: background 0.2s;
   }
   .phase:last-child { border-right: 1px solid var(--bg-border); }

   .phase:hover { background: rgba(255,255,255,0.04); }

   /* Arrow connector */
   .phase:not(:last-child)::after {
     content: '';
     position: absolute;
     right: -9px;
     top: 50%;
     transform: translateY(-50%);
     width: 0; height: 0;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
     z-index: 2;
   }
   [data-cat="red"]  .phase:not(:last-child)::after { border-left: 9px solid rgba(255,62,62,0.5); }
   [data-cat="blue"] .phase:not(:last-child)::after { border-left: 9px solid rgba(24,220,255,0.5); }
   [data-cat="dfir"] .phase:not(:last-child)::after { border-left: 9px solid rgba(255,165,0,0.5); }

   .phase-num {
     font-family: var(--mono);
     font-size: 0.55rem;
     font-weight: 700;
     margin-bottom: 0.2rem;
     opacity: 0.5;
   }
   [data-cat="red"]  .phase-num { color: var(--red); }
   [data-cat="blue"] .phase-num { color: var(--blue); }
   [data-cat="dfir"] .phase-num { color: var(--amber); }

   .phase-name {
     font-family: var(--mono);
     font-size: 0.68rem;
     font-weight: 600;
     color: var(--text-bright);
     line-height: 1.2;
   }

   .phase-detail {
     font-size: 0.72rem;
     color: var(--text-dim);
     margin-top: 0.2rem;
     line-height: 1.4;
   }

   /* Expandable details */
   .expand-toggle {
     font-family: var(--mono);
     font-size: 0.68rem;
     color: var(--text-dim);
     background: none;
     border: 1px solid var(--bg-border);
     padding: 0.35rem 0.8rem;
     cursor: pointer;
     letter-spacing: 0.05em;
     transition: all 0.2s;
     display: flex;
     align-items: center;
     gap: 0.4rem;
   }
   .expand-toggle:hover { color: var(--lime); border-color: var(--lime); }
   .expand-toggle .arrow { transition: transform 0.25s; display: inline-block; }
   .expand-toggle.open .arrow { transform: rotate(90deg); }

   .expand-body {
     display: none;
     margin-top: 1.2rem;
     border-top: 1px solid var(--bg-border);
     padding-top: 1.2rem;
   }
   .expand-body.open { display: block; }

   .detail-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
     gap: 0.8rem;
   }

   .detail-item {
     background: var(--bg-card2);
     border: 1px solid var(--bg-border);
     padding: 0.9rem 1rem;
   }

   .detail-phase-name {
     font-family: var(--mono);
     font-size: 0.72rem;
     font-weight: 700;
     color: var(--text-bright);
     margin-bottom: 0.35rem;
   }
   [data-cat="red"]  .detail-phase-name { color: var(--red); }
   [data-cat="blue"] .detail-phase-name { color: var(--blue); }
   [data-cat="dfir"] .detail-phase-name { color: var(--amber); }

   .detail-phase-desc {
     font-size: 0.78rem;
     color: var(--text-dim);
     line-height: 1.55;
   }

   /* Source link */
   .card-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     margin-top: 1.2rem;
     padding-top: 1rem;
     border-top: 1px solid var(--bg-border);
     flex-wrap: wrap;
   }

   .source-link {
     font-family: var(--mono);
     font-size: 0.65rem;
     color: var(--text-dim);
     text-decoration: none;
     letter-spacing: 0.05em;
     transition: color 0.2s;
   }
   .source-link:hover { color: var(--lime); }
   .source-link::before { content: '// src: '; }

   .card-tags {
     display: flex;
     gap: 0.4rem;
     flex-wrap: wrap;
   }
   .ctag {
     font-family: var(--mono);
     font-size: 0.6rem;
     padding: 0.15rem 0.45rem;
     border: 1px solid var(--bg-border);
     color: var(--text-dim);
   }

   /* =============================================
      COMPARISON TABLE
   ============================================= */
   #comparison {
     margin-top: 5rem;
     padding-top: 4rem;
     border-top: 1px solid var(--bg-border);
   }

   .section-label {
     font-family: var(--mono);
     font-size: 0.7rem;
     color: var(--text-dim);
     letter-spacing: 0.22em;
     text-transform: uppercase;
     margin-bottom: 0.4rem;
   }
   .section-title {
     font-family: var(--mono);
     font-size: clamp(1.3rem, 2.5vw, 1.8rem);
     font-weight: 700;
     color: var(--text-bright);
     margin-bottom: 2rem;
   }

   .table-wrap { overflow-x: auto; }

   table {
     width: 100%;
     border-collapse: collapse;
     font-family: var(--mono);
     font-size: 0.75rem;
   }
   th {
     background: var(--bg-card);
     color: var(--text-dim);
     font-weight: 600;
     letter-spacing: 0.1em;
     padding: 0.7rem 1rem;
     text-align: left;
     border-bottom: 1px solid var(--bg-border);
     white-space: nowrap;
   }
   td {
     padding: 0.65rem 1rem;
     border-bottom: 1px solid rgba(26,26,26,0.8);
     color: var(--text);
     vertical-align: middle;
   }
   tr:hover td { background: var(--hover-tint); }

   .td-name { font-weight: 600; color: var(--text-bright); }

   .pill {
     display: inline-block;
     padding: 0.15rem 0.5rem;
     font-size: 0.62rem;
     letter-spacing: 0.08em;
     border-radius: 2px;
   }
   .pill.red   { background: rgba(255,62,62,0.12);  color: var(--red);   border: 1px solid rgba(255,62,62,0.3); }
   .pill.blue  { background: rgba(24,220,255,0.12); color: var(--blue);  border: 1px solid rgba(24,220,255,0.3); }
   .pill.dfir  { background: rgba(255,165,0,0.12);  color: var(--amber); border: 1px solid rgba(255,165,0,0.3); }

   /* =============================================
      LIVE THREAT FEED (fixed bottom)
   ============================================= */
   #threat-feed {
     position: fixed;
     bottom: 0; left: 0; right: 0;
     z-index: 50;
     background: var(--overlay-bg);
     border-top: 1px solid var(--bg-border);
     padding: 0.45rem 1rem;
     overflow: hidden;
     height: 34px;
   }
   .feed-inner { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
   .feed-label {
     font-family: var(--mono);
     font-size: 0.65rem;
     color: var(--red);
     letter-spacing: 0.12em;
     font-weight: 700;
     flex-shrink: 0;
     padding-right: 0.8rem;
     border-right: 1px solid var(--bg-border);
   }
   .feed-scroll {
     font-family: var(--mono);
     font-size: 0.65rem;
     color: var(--text-dim);
     display: flex;
     gap: 3rem;
     animation: scroll-feed 35s linear infinite;
     will-change: transform;
   }
   .feed-item span.crit  { color: var(--red); }
   .feed-item span.warn  { color: var(--amber); }
   .feed-item span.info  { color: var(--blue); }
   .feed-item span.ok    { color: var(--lime); }
   @keyframes scroll-feed {
     from { transform: translateX(0); }
     to   { transform: translateX(-50%); }
   }

   /* =============================================
      FOOTER
   ============================================= */
   footer {
     padding: 3rem 2rem;
     border-top: 1px solid var(--bg-border);
     text-align: center;
   }
   .footer-logo { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--lime); margin-bottom: 0.4rem; letter-spacing: 0.08em; }
   .footer-tagline { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 1.2rem; }
   .footer-links { display: flex; gap: 1.5rem; justify-content: center; list-style: none; flex-wrap: wrap; margin-bottom: 1.5rem; }
   .footer-links a { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); text-decoration: none; letter-spacing: 0.07em; transition: color 0.2s; }
   .footer-links a:hover { color: var(--lime); }
   .footer-copy { font-family: var(--mono); font-size: 0.63rem; color: var(--footer-copy); letter-spacing: 0.07em; }

   /* =============================================
      RESPONSIVE
   ============================================= */
   @media (max-width: 768px) {
     .phases { flex-direction: column; }
     .phase  { border-right: 1px solid var(--bg-border); border-bottom: none; }
     .phase:last-child { border-bottom: 1px solid var(--bg-border); }
     .phase:not(:last-child)::after {
       right: unset; top: unset;
       bottom: -9px; left: 50%;
       transform: translateX(-50%);
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 9px solid;
     }
     [data-cat="red"]  .phase:not(:last-child)::after { border-left-color: transparent; border-top-color: rgba(255,62,62,0.5); }
     [data-cat="blue"] .phase:not(:last-child)::after { border-left-color: transparent; border-top-color: rgba(24,220,255,0.5); }
     [data-cat="dfir"] .phase:not(:last-child)::after { border-left-color: transparent; border-top-color: rgba(255,165,0,0.5); }
     nav { padding: 0.85rem 1rem; }
     .nav-links { display: none; }
   }

   /* Hidden state for filter */
   .framework-card.hidden { display: none; }