/* === Nevsky IP Scan — Hub Page (/) === */
/* Grid of tools, sidebar with news/cases, hero stats */

/* Light theme overrides for hub */
[data-theme="light"] .tool-card:hover { background: #f0f0f0 }
[data-theme="light"] .tool-card { background: #ffffff }

/* Hub Layout */
.hub-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px }
.hub-hero { margin-bottom: 32px }
.hub-hero h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; margin-bottom: 12px }
.hub-hero .accent { color: var(--accent) }
.hub-hero-desc { color: var(--text2); font-size: 16px; line-height: 1.6; margin-bottom: 24px; max-width: 560px }
.hub-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(196,30,30,.1); color: var(--accent); border: 1px solid rgba(196,30,30,.2); margin-bottom: 16px; letter-spacing: .5px }
.hub-stats { display: flex; gap: 24px; flex-wrap: wrap }
.hub-stat { text-align: center }
.hub-stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; color: var(--text) }
.hub-stat span { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px }

/* Tools Grid */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tool-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .3s; text-decoration: none; color: inherit; opacity: 0; transform: translateY(16px); animation: card-enter 0.5s ease forwards }
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15) }
.tool-card-wide { grid-column: span 2 }
.tool-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(196,30,30,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text2) }
.tool-card:hover .tool-icon { color: var(--accent); background: rgba(196,30,30,.12) }
.tool-info { flex: 1; min-width: 0 }
.tool-title { font-weight: 600; font-size: 14px; margin-bottom: 2px }
.tool-desc { font-size: 12px; color: var(--text2); line-height: 1.4 }
.tool-badge { font-size: 11px; color: var(--text2); background: rgba(255,255,255,.05); border: 1px solid var(--border); padding: 3px 8px; border-radius: 6px; white-space: nowrap }
.tool-badge-new { font-size: 9px; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 700; letter-spacing: .5px; vertical-align: middle }
.tool-arrow { color: var(--text2); opacity: .4; transition: all .3s; flex-shrink: 0; animation: pulse-arrow 2.5s ease-in-out infinite }
.tool-card:hover .tool-arrow { opacity: 1; color: var(--accent); transform: translateX(3px) }

/* Card staggered entrance */
.tools-grid .tool-card:nth-child(1) { animation-delay: 0.1s }
.tools-grid .tool-card:nth-child(2) { animation-delay: 0.2s }
.tools-grid .tool-card:nth-child(3) { animation-delay: 0.3s }
.tools-grid .tool-card:nth-child(4) { animation-delay: 0.4s }
.tools-grid .tool-card:nth-child(5) { animation-delay: 0.5s }

@keyframes card-enter { to { opacity: 1; transform: translateY(0) } }
@keyframes pulse-arrow { 0%,100% { box-shadow: 0 0 0 0 rgba(196,30,30,.3) } 50% { box-shadow: 0 0 0 8px rgba(196,30,30,0) } }

/* Hero text rotation */
.hero-rotate-wrap { display: inline-block; position: relative; height: 1.2em; overflow: hidden; vertical-align: bottom }
.hero-rotate-text { display: block; animation: text-rotate 9s ease-in-out infinite }
@keyframes text-rotate { 0%,28% { transform: translateY(0) } 33%,61% { transform: translateY(-100%) } 66%,94% { transform: translateY(-200%) } 100% { transform: translateY(0) } }

/* Stat counter glow */
.stat-num { transition: color 0.3s }
.stat-num.counted { text-shadow: 0 0 20px rgba(196,30,30,.3) }

/* Sidebar */
.hub-sidebar { display: flex; flex-direction: column; gap: 16px }
.sidebar-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; overflow: hidden }
.sidebar-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 12px }
.sidebar-digest { font-size: 13px; color: var(--text2); line-height: 1.6 }
.sidebar-digest p { margin-bottom: 8px }
.sidebar-news { margin-top: 12px }
.news-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px }
.news-item:last-child { border-bottom: none }
.news-item a { color: var(--text); text-decoration: none; font-weight: 500; transition: color .2s }
.news-item a:hover { color: var(--accent) }
.news-item .news-src { color: var(--text2); font-size: 11px; margin-top: 2px }
.case-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px }
.case-item:last-child { border-bottom: none }
.case-item a { color: var(--text); text-decoration: none; transition: color .2s }
.case-item a:hover { color: var(--accent) }
.case-cat { font-size: 10px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .5px }
.case-date { font-size: 11px; color: var(--text2) }

/* Responsive */
@media (max-width: 768px) {
    .hub-layout { grid-template-columns: 1fr; padding: 24px 16px 40px }
    .tools-grid { grid-template-columns: 1fr }
    .tool-card-wide { grid-column: span 1 }
    .hub-stats { gap: 16px }
}