/**
 * Vagyonfigyelő Homepage v5.0 — Design System CSS
 * Design tokens: DESIGN.md (2026-06-17)
 * Fonts: Inter + Source Serif 4 + JetBrains Mono
 * Namespace: .vf-
 * Mobile-first, WCAG 2.2 AA, dark mode, prefers-reduced-motion
 * Min. 300 lines — full production stylesheet
 */

/* ═══════════════════════════════════════════════════════════
   0. GOOGLE FONTS
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --vf-brand-red:        #c62828;
  --vf-brand-red-dark:   #8b0000;
  --vf-brand-red-mid:    #e53935;
  --vf-brand-red-light:  #ef9a9a;
  --vf-brand-red-bg:     #fdecea;
  --vf-brand-red-hover:  rgba(198,40,40,.08);

  /* ── Neutral scale — warm off-white (OCCRP-inspired) ── */
  --vf-neutral-950: #0d0d0d;
  --vf-neutral-900: #1a1a1a;
  --vf-neutral-800: #2c2c2c;
  --vf-neutral-700: #404040;
  --vf-neutral-600: #595959;
  --vf-neutral-500: #737373;
  --vf-neutral-400: #9e9e9e;
  --vf-neutral-300: #c8c8c8;
  --vf-neutral-200: #e0e0e0;
  --vf-neutral-100: #f0efeb;
  --vf-neutral-50:  #f7f6f2;

  /* ── Data / semantic ── */
  --vf-success:          #2e7d32;
  --vf-success-bg:       #e8f5e9;
  --vf-success-border:   #a5d6a7;
  --vf-warning:          #e65100;
  --vf-warning-bg:       #fff3e0;
  --vf-warning-border:   #ffcc80;
  --vf-danger:           #c62828;
  --vf-danger-bg:        #fdecea;
  --vf-danger-border:    #ef9a9a;
  --vf-info:             #1565c0;
  --vf-info-bg:          #e3f2fd;
  --vf-info-border:      #90caf9;
  --vf-data-up:          #2e7d32;
  --vf-data-down:        #c62828;
  --vf-data-neutral:     #1565c0;
  --vf-data-warn:        #e65100;

  /* ── Gold / Silver / Bronze rank ── */
  --vf-rank-gold:        #b8860b;
  --vf-rank-gold-bg:     #fffde7;
  --vf-rank-silver:      #546e7a;
  --vf-rank-silver-bg:   #eceff1;
  --vf-rank-bronze:      #bf360c;
  --vf-rank-bronze-bg:   #fbe9e7;

  /* ── Typography ── */
  --vf-font-headline: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --vf-font-body:     'Inter', 'system-ui', '-apple-system', sans-serif;
  --vf-font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Type scale (fluid) ── */
  --vf-text-display: clamp(2.2rem, 5.5vw, 3.75rem);
  --vf-text-h1:      clamp(1.75rem, 3.5vw, 2.5rem);
  --vf-text-h2:      clamp(1.35rem, 2.5vw, 1.875rem);
  --vf-text-h3:      clamp(1.05rem, 1.8vw, 1.375rem);
  --vf-text-body:    1rem;
  --vf-text-sm:      0.875rem;
  --vf-text-xs:      0.75rem;

  /* ── Spacing (4px base) ── */
  --vf-space-1:   4px;
  --vf-space-2:   8px;
  --vf-space-3:  12px;
  --vf-space-4:  16px;
  --vf-space-5:  20px;
  --vf-space-6:  24px;
  --vf-space-8:  32px;
  --vf-space-10: 40px;
  --vf-space-12: 48px;
  --vf-space-16: 64px;
  --vf-space-20: 80px;
  --vf-space-24: 96px;

  /* ── Layout ── */
  --vf-container-max:    1200px;
  --vf-container-wide:   1440px;
  --vf-container-narrow: 860px;
  --vf-section-pad-y:    clamp(2.5rem, 5vw, 4rem);
  --vf-section-pad-x:    clamp(1rem, 4vw, 2rem);
  --vf-card-pad:         clamp(1rem, 2vw, 1.5rem);

  /* ── Radius ── */
  --vf-radius-sm:   4px;
  --vf-radius-md:   8px;
  --vf-radius-lg:  12px;
  --vf-radius-xl:  16px;
  --vf-radius-full: 9999px;

  /* ── Shadow ── */
  --vf-shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --vf-shadow-md:  0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
  --vf-shadow-lg:  0 10px 28px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);
  --vf-shadow-xl:  0 20px 48px rgba(0,0,0,.13), 0 8px 18px rgba(0,0,0,.06);
  --vf-shadow-red: 0 4px 20px rgba(198,40,40,.22);

  /* ── Border ── */
  --vf-border-color:        var(--vf-neutral-200);
  --vf-border-color-strong: var(--vf-neutral-300);
  --vf-border-accent:       var(--vf-brand-red);

  /* ── Focus ring (WCAG 2.2) ── */
  --vf-focus-ring:           0 0 0 3px rgba(198,40,40,.35);
  --vf-focus-outline:        3px solid var(--vf-brand-red);
  --vf-focus-outline-offset: 2px;

  /* ── Transition ── */
  --vf-transition-fast: 120ms ease;
  --vf-transition-base: 200ms ease;
  --vf-transition-slow: 350ms cubic-bezier(.4, 0, .2, 1);

  /* ── Z-index ── */
  --vf-z-base:    1;
  --vf-z-raised:  10;
  --vf-z-nav:    100;
  --vf-z-overlay: 200;
  --vf-z-modal:  300;
  --vf-z-tooltip: 400;
}

/* ── Dark mode token overrides ── */
@media (prefers-color-scheme: dark) {
  :root {
    --vf-neutral-50:  #111111;
    --vf-neutral-100: #1c1c1c;
    --vf-neutral-200: #2a2a2a;
    --vf-neutral-300: #3a3a3a;
    --vf-neutral-400: #555555;
    --vf-neutral-500: #767676;
    --vf-neutral-600: #9a9a9a;
    --vf-neutral-700: #c0c0c0;
    --vf-neutral-800: #d8d7d3;
    --vf-neutral-900: #f0efeb;
    --vf-neutral-950: #fafaf8;
    --vf-brand-red:     #ef5350;
    --vf-brand-red-bg:  #2d1111;
    --vf-brand-red-dark: #ffcdd2;
    --vf-success-bg:    #1b2e1c;
    --vf-info-bg:       #0d1a2e;
    --vf-border-color:  var(--vf-neutral-200);
    --vf-rank-gold-bg:    #2a2100;
    --vf-rank-silver-bg:  #1a1f22;
    --vf-rank-bronze-bg:  #2a1209;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

@keyframes vf-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes vf-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vf-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes vf-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ═══════════════════════════════════════════════════════════
   3. RESET / BASE
   ═══════════════════════════════════════════════════════════ */

#vf-homepage *,
#vf-homepage *::before,
#vf-homepage *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#vf-homepage {
  font-family: var(--vf-font-body);
  font-size: var(--vf-text-body);
  line-height: 1.65;
  color: var(--vf-neutral-900);
  background-color: var(--vf-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#vf-homepage a {
  color: inherit;
  text-decoration: none;
}

#vf-homepage img {
  display: block;
  max-width: 100%;
  height: auto;
}

#vf-homepage ul,
#vf-homepage ol {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════════
   4. NEWSPAPER THEME ISOLATION
   ═══════════════════════════════════════════════════════════ */

body.vf-homepage-active .td-crumb-container,
body.vf-homepage-active .entry-crumbs,
body.vf-homepage-active .td-page-header,
body.vf-homepage-active h1.entry-title,
body.vf-homepage-active .td-header-sp-recs,
body.vf-homepage-active .td-a-rec-id-header,
body.vf-homepage-active .td-sidebar-bg,
body.vf-homepage-active .td-main-content .td-pb-span4 {
  display: none !important;
}

body.vf-homepage-active .td-pb-padding-side,
body.vf-homepage-active .td-container,
body.vf-homepage-active .td-main-content-wrap {
  padding: 0 !important;
  max-width: 100% !important;
}

body.vf-homepage-active .td-pb-span8.td-main-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
}

body.vf-homepage-active .td-main-content .td-inner-padding {
  padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   5. UTILITIES
   ═══════════════════════════════════════════════════════════ */

.vf-container {
  max-width: var(--vf-container-max);
  margin-inline: auto;
  padding-inline: var(--vf-section-pad-x);
}

.vf-section {
  padding-block: var(--vf-section-pad-y);
}

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

/* Skip link */
.vf-skip-link {
  position: absolute;
  top: -100%;
  left: var(--vf-space-4);
  background: var(--vf-brand-red);
  color: #fff;
  padding: var(--vf-space-2) var(--vf-space-5);
  border-radius: var(--vf-radius-sm);
  font-weight: 700;
  font-size: var(--vf-text-sm);
  z-index: var(--vf-z-modal);
  transition: top var(--vf-transition-fast);
}

.vf-skip-link:focus {
  top: var(--vf-space-4);
}

/* Focus ring — WCAG 2.2 */
#vf-homepage a:focus-visible,
#vf-homepage button:focus-visible,
#vf-homepage input:focus-visible,
#vf-homepage select:focus-visible,
#vf-homepage [tabindex]:focus-visible {
  outline: var(--vf-focus-outline);
  outline-offset: var(--vf-focus-outline-offset);
  border-radius: var(--vf-radius-sm);
}

/* Scroll-driven reveal */
.vf-animate-enter {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--vf-transition-slow), transform var(--vf-transition-slow);
}

.vf-animate-enter.vf-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vf-animate-enter,
  .vf-animate-enter.vf-visible {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .vf-ticker-track {
    animation: none !important;
  }
  .vf-hero-eyebrow-dot,
  .vf-ticker-label-dot,
  .vf-network-cta-content .vf-eyebrow-dot {
    animation: none !important;
  }
}

/* Section header pattern */
.vf-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vf-space-4);
  margin-bottom: var(--vf-space-10);
  flex-wrap: wrap;
}

.vf-section-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--vf-space-4);
}

.vf-section-accent-bar {
  width: 4px;
  min-height: 2.4em;
  background: var(--vf-brand-red);
  border-radius: var(--vf-radius-sm);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.vf-section-title {
  font-family: var(--vf-font-headline);
  font-size: var(--vf-text-h2);
  font-weight: 700;
  color: var(--vf-neutral-900);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.vf-section-subtitle {
  font-size: var(--vf-text-xs);
  color: var(--vf-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-top: var(--vf-space-1);
}

.vf-section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  font-size: var(--vf-text-sm);
  font-weight: 600;
  color: var(--vf-brand-red);
  padding: 0 var(--vf-space-4);
  border: 1.5px solid rgba(198,40,40,.3);
  border-radius: var(--vf-radius-full);
  white-space: nowrap;
  transition: background var(--vf-transition-base), border-color var(--vf-transition-base);
  min-height: 44px;
  text-decoration: none;
}

.vf-section-link:hover {
  background: var(--vf-brand-red-bg);
  border-color: var(--vf-brand-red);
}

/* ═══════════════════════════════════════════════════════════
   6. HEADER / NAV
   ═══════════════════════════════════════════════════════════ */

.vf-header {
  position: sticky;
  top: 0;
  z-index: var(--vf-z-nav);
  background: #ffffff;
  border-bottom: 1px solid var(--vf-border-color);
  transition: box-shadow var(--vf-transition-base);
}

/* JS adds .vf-header--scrolled when page scrolled > 40px */
.vf-header--scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.10);
}

.vf-header-inner {
  display: flex;
  align-items: center;
  gap: var(--vf-space-5);
  padding-block: var(--vf-space-3);
  padding-inline: var(--vf-section-pad-x);
  max-width: var(--vf-container-max);
  margin-inline: auto;
}

/* Logo */
.vf-logo {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  flex-shrink: 0;
  text-decoration: none;
}

.vf-logo-icon {
  width: 34px;
  height: 34px;
  background: var(--vf-brand-red);
  border-radius: var(--vf-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vf-logo-icon svg {
  width: 19px;
  height: 19px;
  fill: #ffffff;
}

.vf-logo-text {
  font-family: var(--vf-font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vf-neutral-900);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.vf-logo-text span {
  color: var(--vf-brand-red);
}

/* Nav */
.vf-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  list-style: none;
}

.vf-nav-item a {
  display: flex;
  align-items: center;
  height: 44px;
  padding-inline: var(--vf-space-3);
  font-size: var(--vf-text-sm);
  font-weight: 500;
  color: var(--vf-neutral-700);
  border-radius: var(--vf-radius-sm);
  transition: color var(--vf-transition-fast), background var(--vf-transition-fast);
  white-space: nowrap;
}

.vf-nav-item a:hover,
.vf-nav-item a[aria-current="page"] {
  color: var(--vf-brand-red);
  background: var(--vf-brand-red-hover);
}

/* Header search */
.vf-header-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  background: var(--vf-neutral-100);
  border: 1px solid var(--vf-border-color);
  border-radius: var(--vf-radius-md);
  padding: var(--vf-space-2) var(--vf-space-3);
  min-width: 200px;
  transition: border-color var(--vf-transition-base), box-shadow var(--vf-transition-base);
}

.vf-header-search:focus-within {
  border-color: var(--vf-brand-red);
  box-shadow: 0 0 0 3px rgba(198,40,40,.12);
  background: #fff;
}

.vf-header-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--vf-text-sm);
  color: var(--vf-neutral-900);
  font-family: var(--vf-font-body);
  width: 100%;
  min-height: 32px;
}

.vf-header-search input::placeholder {
  color: var(--vf-neutral-400);
}

.vf-header-search svg {
  width: 16px;
  height: 16px;
  color: var(--vf-neutral-500);
  flex-shrink: 0;
}

/* Mobile toggle */
.vf-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--vf-border-color);
  border-radius: var(--vf-radius-md);
  cursor: pointer;
  padding: var(--vf-space-2);
  color: var(--vf-neutral-700);
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: background var(--vf-transition-fast);
}

.vf-nav-toggle:hover {
  background: var(--vf-neutral-100);
}

@media (max-width: 767px) {
  .vf-nav,
  .vf-header-search {
    display: none;
  }
  .vf-nav-toggle {
    display: flex;
  }
  .vf-header-inner {
    gap: var(--vf-space-3);
  }
}

/* ─── Mobile nav open state ─── */
.vf-header.vf-mobile-open .vf-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: var(--vf-space-3) var(--vf-space-4) var(--vf-space-4);
  border-bottom: 1px solid var(--vf-border-color);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: var(--vf-z-nav);
}

.vf-header.vf-mobile-open .vf-nav-item a {
  padding-block: var(--vf-space-3);
  border-bottom: 1px solid var(--vf-neutral-100);
}

/* Dark mode header */
@media (prefers-color-scheme: dark) {
  .vf-header {
    background: var(--vf-neutral-100);
    border-bottom-color: var(--vf-neutral-200);
  }
  .vf-header.vf-mobile-open .vf-nav {
    background: var(--vf-neutral-100);
  }
  .vf-header-search {
    background: var(--vf-neutral-200);
  }
  .vf-header-search:focus-within {
    background: var(--vf-neutral-100);
  }
}

/* ═══════════════════════════════════════════════════════════
   7. HERO
   ═══════════════════════════════════════════════════════════ */

.vf-hero {
  background: #111111;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* Grid texture overlay */
.vf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(198,40,40,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,40,40,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Red ambient glow top-left */
.vf-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  left: -80px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(198,40,40,.18) 0%, transparent 70%);
  pointer-events: none;
}

.vf-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--vf-container-narrow);
  margin-inline: auto;
  padding-inline: var(--vf-section-pad-x);
  text-align: center;
}

/* Eyebrow pill */
.vf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  font-size: var(--vf-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-brand-red-mid);
  border: 1px solid rgba(229,57,53,.4);
  background: rgba(229,57,53,.09);
  border-radius: var(--vf-radius-full);
  padding: 0.4em 1.1em;
  margin-bottom: var(--vf-space-6);
}

.vf-hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vf-brand-red-mid);
  animation: vf-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Headline */
.vf-hero-title {
  font-family: var(--vf-font-headline);
  font-size: var(--vf-text-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #f5f4f0;
  margin-bottom: var(--vf-space-5);
}

.vf-hero-title em {
  color: var(--vf-brand-red-mid);
  font-style: italic;
}

/* Subtitle */
.vf-hero-subtitle {
  font-size: 1.0625rem;
  color: rgba(245,244,240,.52);
  line-height: 1.65;
  margin-bottom: var(--vf-space-8);
  max-width: 580px;
  margin-inline: auto;
}

/* Hero search bar */
.vf-hero-search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--vf-space-10);
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--vf-radius-xl);
  padding: var(--vf-space-1) var(--vf-space-1) var(--vf-space-1) var(--vf-space-5);
  transition: border-color var(--vf-transition-base), box-shadow var(--vf-transition-base), background var(--vf-transition-base);
}

.vf-hero-search:focus-within {
  border-color: rgba(229,57,53,.55);
  box-shadow: 0 0 0 3px rgba(198,40,40,.14), 0 8px 32px rgba(0,0,0,.25);
  background: rgba(255,255,255,.10);
}

.vf-hero-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f5f4f0;
  font-size: var(--vf-text-sm);
  font-family: var(--vf-font-body);
  min-height: 48px;
}

.vf-hero-search input::placeholder {
  color: rgba(245,244,240,.28);
}

.vf-hero-search-btn {
  background: var(--vf-brand-red);
  color: #ffffff;
  border: none;
  border-radius: var(--vf-radius-lg);
  padding: 0 var(--vf-space-6);
  font-size: var(--vf-text-sm);
  font-weight: 700;
  font-family: var(--vf-font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--vf-transition-fast), box-shadow var(--vf-transition-fast);
  min-height: 44px;
  min-width: 44px;
  letter-spacing: 0.01em;
}

.vf-hero-search-btn:hover {
  background: #b71c1c;
  box-shadow: var(--vf-shadow-red);
}

.vf-hero-search-btn:active {
  transform: scale(.97);
}

/* KPI grid */
.vf-hero-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vf-space-3);
  max-width: 680px;
  margin-inline: auto;
}

.vf-hero-kpi-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--vf-radius-lg);
  padding: var(--vf-space-5) var(--vf-space-4);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color var(--vf-transition-base), background var(--vf-transition-base);
}

.vf-hero-kpi-card:hover {
  border-color: rgba(229,57,53,.4);
  background: rgba(229,57,53,.06);
}

/* Subtle top-border accent on hover */
.vf-hero-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vf-brand-red-mid);
  transform: scaleX(0);
  transition: transform var(--vf-transition-base);
  transform-origin: left;
}

.vf-hero-kpi-card:hover::before {
  transform: scaleX(1);
}

.vf-hero-kpi-num {
  font-family: var(--vf-font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: #f5f4f0;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--vf-space-2);
}

.vf-hero-kpi-label {
  font-size: var(--vf-text-xs);
  color: rgba(245,244,240,.38);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 599px) {
  .vf-hero-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .vf-hero-title {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
  }
}

/* ═══════════════════════════════════════════════════════════
   8. LIVE TICKER
   ═══════════════════════════════════════════════════════════ */

.vf-ticker {
  background: #0d0d0d;
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  height: 46px;
  display: flex;
  align-items: center;
}

.vf-ticker-label {
  display: flex;
  align-items: center;
  gap: var(--vf-space-2);
  padding-inline: var(--vf-space-5);
  background: var(--vf-brand-red);
  color: #ffffff;
  font-size: var(--vf-text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right: var(--vf-space-8);
}

.vf-ticker-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: vf-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.vf-ticker-track-wrapper {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.vf-ticker-track {
  display: flex;
  gap: 0;
  animation: vf-ticker-scroll 40s linear infinite;
  white-space: nowrap;
  will-change: transform;
}

.vf-ticker-track:hover {
  animation-play-state: paused;
}

.vf-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-3);
  font-size: var(--vf-text-sm);
  color: rgba(240,239,235,.72);
  flex-shrink: 0;
  padding-inline: var(--vf-space-8);
  border-right: 1px solid rgba(255,255,255,.08);
}

.vf-ticker-item a {
  color: rgba(240,239,235,.82);
  transition: color var(--vf-transition-fast);
}

.vf-ticker-item a:hover {
  color: var(--vf-brand-red-light);
}

.vf-ticker-item::before {
  content: '■';
  color: var(--vf-brand-red-mid);
  font-size: 0.45rem;
  flex-shrink: 0;
  opacity: .8;
}

.vf-ticker-time {
  font-size: var(--vf-text-xs);
  color: rgba(240,239,235,.3);
  font-family: var(--vf-font-mono);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   9. SPOTLIGHTS — Kiemelt politikusok
   ═══════════════════════════════════════════════════════════ */

.vf-spotlights {
  background: var(--vf-neutral-50);
  padding-block: var(--vf-section-pad-y);
}

.vf-spotlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vf-space-6);
}

.vf-politician-card {
  background: #ffffff;
  border: 1px solid var(--vf-border-color);
  border-radius: var(--vf-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--vf-transition-base), border-color var(--vf-transition-base), transform var(--vf-transition-base);
  position: relative;
}

.vf-politician-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--vf-brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vf-transition-slow);
}

.vf-politician-card:hover {
  box-shadow: var(--vf-shadow-xl);
  border-color: rgba(198,40,40,.25);
  transform: translateY(-3px);
}

.vf-politician-card:hover::after {
  transform: scaleX(1);
}

/* Card dark header with subtle noise */
.vf-politician-card-header {
  position: relative;
  background: #1a1a1a;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: var(--vf-space-6) var(--vf-space-6) var(--vf-space-5);
  display: flex;
  align-items: flex-end;
  gap: var(--vf-space-4);
  min-height: 130px;
}

/* Small red accent line at top of card header */
.vf-politician-card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vf-brand-red) 0%, transparent 100%);
}

.vf-politician-avatar {
  width: 68px;
  height: 68px;
  border-radius: var(--vf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vf-font-body);
  font-size: 1.35rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,.18);
  aspect-ratio: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.vf-politician-card-header-info {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--vf-space-1);
}

.vf-politician-name {
  font-family: var(--vf-font-headline);
  font-size: 1.125rem;
  font-weight: 700;
  color: #f0efeb;
  line-height: 1.25;
  margin-bottom: var(--vf-space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-politician-role {
  font-size: var(--vf-text-xs);
  color: rgba(240,239,235,.45);
  line-height: 1.4;
  font-weight: 400;
}

.vf-politician-card-body {
  padding: var(--vf-card-pad);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-4);
}

.vf-politician-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vf-space-3);
}

.vf-politician-stat {
  background: var(--vf-neutral-100);
  border: 1px solid var(--vf-neutral-200);
  border-radius: var(--vf-radius-md);
  padding: var(--vf-space-3) var(--vf-space-3);
}

.vf-politician-stat-num {
  font-family: var(--vf-font-mono);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--vf-neutral-900);
  line-height: 1;
  margin-bottom: var(--vf-space-1);
  letter-spacing: -0.02em;
}

.vf-politician-stat-label {
  font-size: var(--vf-text-xs);
  color: var(--vf-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.vf-politician-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--vf-text-xs);
  font-weight: 700;
  font-family: var(--vf-font-mono);
  padding: 0.3em 0.75em;
  border-radius: var(--vf-radius-full);
  width: fit-content;
  letter-spacing: 0.02em;
}

.vf-delta-up {
  background: var(--vf-success-bg);
  color: var(--vf-success);
  border: 1px solid var(--vf-success-border);
}

.vf-delta-down {
  background: var(--vf-danger-bg);
  color: var(--vf-danger);
  border: 1px solid var(--vf-danger-border);
}

.vf-politician-card-footer {
  padding: var(--vf-space-3) var(--vf-card-pad) var(--vf-card-pad);
  border-top: 1px solid var(--vf-border-color);
}

.vf-politician-profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vf-space-2);
  width: 100%;
  padding: var(--vf-space-3) var(--vf-space-4);
  background: var(--vf-neutral-900);
  border: none;
  border-radius: var(--vf-radius-md);
  color: #f0efeb;
  font-size: var(--vf-text-sm);
  font-weight: 600;
  transition: background var(--vf-transition-base), box-shadow var(--vf-transition-base);
  min-height: 44px;
  text-decoration: none;
}

.vf-politician-profile-link:hover {
  background: var(--vf-brand-red);
  color: #ffffff;
  box-shadow: var(--vf-shadow-red);
}

.vf-politician-profile-link svg {
  transition: transform var(--vf-transition-fast);
}

.vf-politician-profile-link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .vf-spotlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .vf-spotlights-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode politician cards */
@media (prefers-color-scheme: dark) {
  .vf-politician-card {
    background: var(--vf-neutral-100);
    border-color: var(--vf-neutral-200);
  }
  .vf-politician-card-header {
    background: #000000;
  }
  .vf-politician-stat {
    background: var(--vf-neutral-200);
    border-color: var(--vf-neutral-300);
  }
}

/* ═══════════════════════════════════════════════════════════
   10. TOPLISTA PREVIEW — Top 5
   ═══════════════════════════════════════════════════════════ */

.vf-toplista {
  background: #ffffff;
  padding-block: var(--vf-section-pad-y);
  border-top: 1px solid var(--vf-border-color);
  border-bottom: 1px solid var(--vf-border-color);
}

.vf-toplista-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--vf-radius-lg);
  overflow: hidden;
  box-shadow: var(--vf-shadow-sm);
  border: 1px solid var(--vf-border-color);
}

.vf-toplista-table thead tr {
  background: var(--vf-neutral-900);
}

.vf-toplista-table th {
  font-size: var(--vf-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(240,239,235,.55);
  padding: var(--vf-space-3) var(--vf-space-4);
  text-align: left;
  white-space: nowrap;
}

.vf-toplista-table th:first-child {
  width: 60px;
  text-align: center;
}

.vf-toplista-table th:last-child {
  text-align: right;
  padding-right: var(--vf-space-4);
}

.vf-toplista-table tbody tr:nth-child(even) {
  background: var(--vf-neutral-50);
}

.vf-toplista-table tbody tr {
  border-bottom: 1px solid var(--vf-border-color);
  transition: background var(--vf-transition-fast);
}

.vf-toplista-table tbody tr:hover {
  background: var(--vf-brand-red-bg);
}

.vf-toplista-table tbody tr:last-child {
  border-bottom: none;
}

.vf-toplista-table td {
  padding: var(--vf-space-4);
  font-size: var(--vf-text-sm);
  color: var(--vf-neutral-800);
  vertical-align: middle;
}

/* Rank badge */
.vf-toplista-rank {
  text-align: center;
  font-family: var(--vf-font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  width: 60px;
}

.vf-toplista-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--vf-radius-full);
  font-family: var(--vf-font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vf-rank-1 .vf-toplista-rank-badge {
  background: var(--vf-rank-gold-bg);
  color: var(--vf-rank-gold);
  border: 2px solid #d4a017;
}

.vf-rank-2 .vf-toplista-rank-badge {
  background: var(--vf-rank-silver-bg);
  color: var(--vf-rank-silver);
  border: 2px solid #8fa0a8;
}

.vf-rank-3 .vf-toplista-rank-badge {
  background: var(--vf-rank-bronze-bg);
  color: var(--vf-rank-bronze);
  border: 2px solid #d4542a;
}

.vf-rank-4 .vf-toplista-rank-badge,
.vf-rank-5 .vf-toplista-rank-badge {
  background: var(--vf-neutral-100);
  color: var(--vf-neutral-500);
  border: 1px solid var(--vf-neutral-300);
}

.vf-toplista-person {
  display: flex;
  align-items: center;
  gap: var(--vf-space-3);
  min-width: 0;
}

.vf-toplista-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--vf-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--vf-text-xs);
  font-weight: 800;
  color: rgba(255,255,255,.92);
  flex-shrink: 0;
  aspect-ratio: 1;
  box-shadow: var(--vf-shadow-sm);
}

.vf-toplista-person-info {
  min-width: 0;
}

.vf-toplista-name {
  font-weight: 700;
  color: var(--vf-neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--vf-text-sm);
}

.vf-toplista-name a {
  color: inherit;
  transition: color var(--vf-transition-fast);
}

.vf-toplista-name a:hover {
  color: var(--vf-brand-red);
}

.vf-toplista-role {
  font-size: var(--vf-text-xs);
  color: var(--vf-neutral-500);
  margin-top: 2px;
}

.vf-toplista-amount {
  font-family: var(--vf-font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--vf-neutral-900);
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.vf-toplista-change {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--vf-font-mono);
  font-size: var(--vf-text-xs);
  font-weight: 700;
  padding: 0.25em 0.6em;
  border-radius: var(--vf-radius-full);
  letter-spacing: 0.01em;
}

.vf-change-up   { background: var(--vf-success-bg); color: var(--vf-success); }
.vf-change-down { background: var(--vf-danger-bg);  color: var(--vf-danger); }
.vf-change-flat { background: var(--vf-neutral-100); color: var(--vf-neutral-500); }

.vf-toplista-link {
  font-size: var(--vf-text-xs);
  font-weight: 700;
  color: var(--vf-brand-red);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  white-space: nowrap;
  transition: gap var(--vf-transition-fast);
  text-decoration: none;
}

.vf-toplista-link:hover {
  gap: 6px;
}

/* Responsive: hide less critical columns on mobile */
@media (max-width: 767px) {
  .vf-toplista-table .vf-col-party,
  .vf-toplista-table .vf-col-change {
    display: none;
  }
  .vf-toplista-amount {
    text-align: left;
  }
}

@media (max-width: 479px) {
  .vf-toplista-table .vf-col-link {
    display: none;
  }
}

/* Dark mode toplista */
@media (prefers-color-scheme: dark) {
  .vf-toplista {
    background: var(--vf-neutral-100);
    border-color: var(--vf-neutral-200);
  }
  .vf-toplista-table {
    border-color: var(--vf-neutral-200);
  }
  .vf-toplista-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,.03);
  }
  .vf-toplista-table tbody tr:hover {
    background: rgba(198,40,40,.06);
  }
}

/* ═══════════════════════════════════════════════════════════
   11. INVESTIGÁCIÓK — Article cards (horizontal layout)
   ═══════════════════════════════════════════════════════════ */

.vf-investigations {
  background: var(--vf-neutral-50);
  padding-block: var(--vf-section-pad-y);
}

.vf-investigations-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-5);
}

/* Horizontal card: image left, content right */
.vf-article-card {
  background: #ffffff;
  border: 1px solid var(--vf-border-color);
  border-radius: var(--vf-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
  transition: box-shadow var(--vf-transition-base), border-color var(--vf-transition-base), transform var(--vf-transition-base);
  position: relative;
}

.vf-article-card:hover {
  box-shadow: var(--vf-shadow-lg);
  border-color: rgba(198,40,40,.2);
  transform: translateX(3px);
}

/* Left: image area */
.vf-article-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--vf-neutral-200);
  flex-shrink: 0;
}

.vf-article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
}

.vf-article-card:hover .vf-article-card-image img {
  transform: scale(1.05);
}

/* Placeholder with investigative grid pattern */
.vf-article-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.vf-article-card-image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(198,40,40,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,40,40,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.vf-article-card-image-placeholder svg {
  width: 40px;
  height: 40px;
  color: rgba(255,255,255,.2);
  position: relative;
  z-index: 1;
}

.vf-article-category {
  position: absolute;
  top: var(--vf-space-3);
  left: var(--vf-space-3);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3em 0.75em;
  border-radius: var(--vf-radius-full);
  z-index: 1;
}

.vf-cat-investigation { background: var(--vf-brand-red); color: #ffffff; }
.vf-cat-analysis      { background: var(--vf-info); color: #ffffff; }
.vf-cat-data          { background: #1a1a1a; color: #f0efeb; }

/* Right: content */
.vf-article-card-body {
  padding: var(--vf-space-6) var(--vf-space-6) var(--vf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--vf-space-3);
  justify-content: center;
}

.vf-article-meta {
  display: flex;
  align-items: center;
  gap: var(--vf-space-3);
  font-size: var(--vf-text-xs);
  color: var(--vf-neutral-500);
}

.vf-article-date {
  font-family: var(--vf-font-mono);
}

.vf-article-separator {
  color: var(--vf-neutral-300);
}

.vf-article-title {
  font-family: var(--vf-font-headline);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--vf-neutral-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.vf-article-title a {
  color: inherit;
  transition: color var(--vf-transition-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vf-article-title a:hover {
  color: var(--vf-brand-red);
}

.vf-article-excerpt {
  font-size: var(--vf-text-sm);
  color: var(--vf-neutral-600);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vf-article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--vf-space-3);
  border-top: 1px solid var(--vf-border-color);
  margin-top: auto;
}

.vf-article-author {
  font-size: var(--vf-text-xs);
  color: var(--vf-neutral-500);
  font-weight: 500;
}

.vf-article-readmore {
  font-size: var(--vf-text-xs);
  font-weight: 700;
  color: var(--vf-brand-red);
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-1);
  transition: gap var(--vf-transition-fast);
  white-space: nowrap;
  min-height: 44px;
  text-decoration: none;
}

.vf-article-readmore:hover {
  gap: var(--vf-space-2);
}

/* Responsive: stack vertically on mobile */
@media (max-width: 767px) {
  .vf-article-card {
    grid-template-columns: 1fr;
  }
  .vf-article-card-image {
    aspect-ratio: 16 / 9;
  }
  .vf-article-card:hover {
    transform: translateY(-2px);
  }
}

/* Dark mode articles */
@media (prefers-color-scheme: dark) {
  .vf-investigations {
    background: var(--vf-neutral-50);
  }
  .vf-article-card {
    background: var(--vf-neutral-100);
    border-color: var(--vf-neutral-200);
  }
}

/* ═══════════════════════════════════════════════════════════
   12. NETWORK CTA
   ═══════════════════════════════════════════════════════════ */

.vf-network-cta {
  background: #111111;
  padding-block: var(--vf-section-pad-y);
  position: relative;
  overflow: hidden;
}

/* Dot matrix pattern */
.vf-network-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(198,40,40,.14) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* Red glow bottom-right */
.vf-network-cta::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(198,40,40,.12) 0%, transparent 70%);
  pointer-events: none;
}

.vf-network-cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--vf-container-max);
  margin-inline: auto;
  padding-inline: var(--vf-section-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vf-space-16);
  align-items: center;
}

/* Eyebrow badge */
.vf-network-cta-content .vf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  font-size: var(--vf-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(46,125,50,.15);
  color: #66bb6a;
  border: 1px solid rgba(46,125,50,.35);
  border-radius: var(--vf-radius-full);
  padding: 0.35em 1em;
  margin-bottom: var(--vf-space-5);
}

.vf-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66bb6a;
  animation: vf-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.vf-network-cta-title {
  font-family: var(--vf-font-headline);
  font-size: var(--vf-text-h1);
  font-weight: 700;
  color: #f5f4f0;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: var(--vf-space-4);
}

.vf-network-cta-desc {
  font-size: var(--vf-text-sm);
  color: rgba(245,244,240,.55);
  line-height: 1.75;
  margin-bottom: var(--vf-space-8);
  max-width: 460px;
}

.vf-network-cta-actions {
  display: flex;
  gap: var(--vf-space-3);
  flex-wrap: wrap;
}

/* Primary CTA button */
.vf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  padding: var(--vf-space-3) var(--vf-space-6);
  background: var(--vf-brand-red);
  color: #ffffff;
  border: none;
  border-radius: var(--vf-radius-md);
  font-size: var(--vf-text-sm);
  font-weight: 700;
  font-family: var(--vf-font-body);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--vf-transition-fast), box-shadow var(--vf-transition-fast);
  min-height: 44px;
  letter-spacing: 0.01em;
}

.vf-btn-primary:hover {
  background: #b71c1c;
  color: #ffffff;
  box-shadow: var(--vf-shadow-red);
}

.vf-btn-primary:active {
  transform: scale(.98);
}

/* Outline CTA button */
.vf-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  padding: var(--vf-space-3) var(--vf-space-6);
  background: transparent;
  color: rgba(245,244,240,.75);
  border: 1.5px solid rgba(245,244,240,.22);
  border-radius: var(--vf-radius-md);
  font-size: var(--vf-text-sm);
  font-weight: 600;
  font-family: var(--vf-font-body);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--vf-transition-fast), color var(--vf-transition-fast), background var(--vf-transition-fast);
  min-height: 44px;
}

.vf-btn-outline:hover {
  border-color: rgba(245,244,240,.55);
  color: #f5f4f0;
  background: rgba(255,255,255,.05);
}

/* Network SVG preview card */
.vf-network-cta-preview {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--vf-radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}

.vf-network-cta-preview svg {
  width: 100%;
  height: 100%;
}

.vf-network-cta-label {
  position: absolute;
  bottom: var(--vf-space-3);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: rgba(245,244,240,.28);
  white-space: nowrap;
  font-style: italic;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  .vf-network-cta-inner {
    grid-template-columns: 1fr;
    gap: var(--vf-space-8);
  }
  .vf-network-cta-preview {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. FOOTER
   ═══════════════════════════════════════════════════════════ */

.vf-footer {
  background: #0d0d0d;
  color: rgba(245,244,240,.55);
  padding-block: var(--vf-space-12) var(--vf-space-8);
  border-top: 2px solid var(--vf-brand-red);
}

.vf-footer-inner {
  max-width: var(--vf-container-max);
  margin-inline: auto;
  padding-inline: var(--vf-section-pad-x);
}

.vf-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--vf-space-10);
  padding-bottom: var(--vf-space-8);
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: var(--vf-space-6);
}

.vf-footer-brand .vf-logo {
  margin-bottom: var(--vf-space-4);
}

.vf-footer-brand .vf-logo-text {
  color: #f0efeb;
}

.vf-footer-tagline {
  font-size: var(--vf-text-sm);
  color: rgba(245,244,240,.42);
  line-height: 1.7;
  max-width: 300px;
}

.vf-footer-nav-title {
  font-size: var(--vf-text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(245,244,240,.35);
  margin-bottom: var(--vf-space-4);
}

.vf-footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vf-footer-nav-list a {
  font-size: var(--vf-text-sm);
  color: rgba(245,244,240,.52);
  transition: color var(--vf-transition-fast), padding-left var(--vf-transition-fast);
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.vf-footer-nav-list li:last-child a {
  border-bottom: none;
}

.vf-footer-nav-list a:hover {
  color: var(--vf-brand-red-light);
  padding-left: var(--vf-space-2);
}

/* Trust indicator badges */
.vf-footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vf-space-2);
  margin-bottom: var(--vf-space-5);
  padding-bottom: var(--vf-space-5);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.vf-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vf-space-2);
  font-size: var(--vf-text-xs);
  font-weight: 500;
  color: rgba(245,244,240,.4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--vf-radius-sm);
  padding: var(--vf-space-2) var(--vf-space-3);
  transition: border-color var(--vf-transition-fast), color var(--vf-transition-fast);
}

.vf-trust-badge:hover {
  border-color: rgba(255,255,255,.14);
  color: rgba(245,244,240,.6);
}

.vf-trust-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .6;
}

/* Footer bottom bar */
.vf-footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vf-space-4);
  flex-wrap: wrap;
}

.vf-footer-legal {
  font-size: var(--vf-text-xs);
  color: rgba(245,244,240,.28);
  line-height: 1.7;
}

.vf-footer-legal a {
  color: rgba(245,244,240,.38);
  transition: color var(--vf-transition-fast);
  text-decoration: none;
}

.vf-footer-legal a:hover {
  color: var(--vf-brand-red-light);
}

.vf-footer-source {
  display: flex;
  gap: var(--vf-space-2);
  flex-wrap: wrap;
  align-items: flex-start;
}

.vf-source-chip {
  font-size: var(--vf-text-xs);
  font-family: var(--vf-font-mono);
  color: rgba(245,244,240,.28);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--vf-radius-sm);
  padding: 0.2em 0.6em;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

@media (max-width: 1023px) {
  .vf-footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 599px) {
  .vf-footer-top {
    grid-template-columns: 1fr;
    gap: var(--vf-space-8);
  }
  .vf-footer-bottom {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. PRINT
   ═══════════════════════════════════════════════════════════ */

@media print {
  .vf-ticker,
  .vf-network-cta,
  .vf-header,
  .vf-footer,
  .vf-hero-search,
  .vf-skip-link {
    display: none !important;
  }

  #vf-homepage {
    background: white;
    color: black;
  }

  .vf-hero {
    background: white !important;
    padding: 1rem 0;
  }

  .vf-hero-title,
  .vf-hero-subtitle {
    color: black !important;
  }

  .vf-politician-card,
  .vf-article-card,
  .vf-toplista-table {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}