/* Insights — editorial hub */
.insights-bar { height:28px; display:flex; align-items:center; background:#0B1220; color:#94A3B8; font-size:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.insights-bar-inner { width:min(calc(100% - 32px),1240px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.insights-header { height:60px; display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.insights-header-inner { width:min(calc(100% - 32px),1240px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; height:100%; }
.insights-hero { position:relative; overflow:hidden; background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%); border-bottom:1px solid var(--border); padding:36px 0 22px; }
[data-theme="dark"] .insights-hero { background: radial-gradient(700px 400px at 70% 0%, rgba(15,111,92,.10), transparent 60%), linear-gradient(180deg, #0B1220 0%, #070B14 100%); }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.filter-btn { padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; }
.filter-btn.is-active { background:var(--de-navy); color:#fff; border-color:var(--de-navy); }
.search-box { flex:1; min-width:220px; max-width:340px; position:relative; }
.search-box input { width:100%; padding:9px 12px 9px 36px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:13px; }
.search-box svg { position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.featured { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:var(--shadow-sm); }
.featured-media { height:220px; border-radius:14px; background: linear-gradient(135deg, #0B1220 0%, #0F6F5C 100%); position:relative; overflow:hidden; }
.featured-body h3 { font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1.2; }
.article-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.article-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition: transform var(--ease), box-shadow var(--ease); }
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.article-media { height:140px; background: linear-gradient(135deg, #E2E8F0, #F1F5F9); position:relative; }
[data-theme="dark"] .article-media { background: linear-gradient(135deg, #1E293B, #0F172A); }
.article-body { padding:14px; flex:1; display:flex; flex-direction:column; gap:8px; }
.kicker { display:flex; gap:6px; flex-wrap:wrap; }
.kicker span { padding:4px 8px; border-radius:999px; background:var(--surface-muted); border:1px solid var(--border); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.kicker span.product { background:var(--de-accent-soft); color:var(--de-accent); border-color:rgba(15,111,92,.18); }
.article-body h3 { font-size:15px; font-weight:800; line-height:1.35; letter-spacing:-.01em; }
.article-body p { font-size:13px; color:var(--text-secondary); line-height:1.5; }
.article-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); }
.flow-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; font-weight:700; color:var(--text-muted); }
.flow-box span { padding:5px 8px; border-radius:999px; background:var(--surface-muted); border:1px solid var(--border); }
.flow-box span.hl { background:var(--de-accent); color:#fff; border-color:var(--de-accent); }
@media (max-width: 1100px){ .featured { grid-template-columns:1fr; } .article-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px){ .article-grid { grid-template-columns:1fr; } }