/* ============================================================
 FOKUSINVESTOR — Base Design System
 Geteilt von allen BYD-Dateien. Inspiriert von index-v1-research.
 ============================================================ */

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

:root {
 /* Ink scale — dark navy/charcoal */
 --fi-ink-900: #05080f;
 --fi-ink-800: #0a0f1a;
 --fi-ink-700: #111826;
 --fi-ink-600: #1a2233;
 --fi-ink-500: #252f44;
 --fi-ink-400: #3a4560;
 --fi-ink-300: #8a95ad;
 --fi-ink-200: #b8c0d2;
 --fi-ink-100: #e8edf5;

 /* Gold accent */
 --fi-gold-500: #c9a84c;
 --fi-gold-600: #a08532;
 --fi-gold-400: #dcbf72;

 /* Teal accent */
 --fi-teal-500: #00b4d8;
 --fi-teal-400: #3ec7e3;

 /* Semantic */
 --fi-bull: #2ec27e;
 --fi-bear: #e84a5f;
 --fi-warn: #f0a020;
 --fi-critical: #e84a5f;

 /* Typography */
 --fi-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
 --fi-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
 --fi-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
 background: var(--fi-ink-900);
 color: var(--fi-ink-100);
 font-family: var(--fi-font-sans);
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

a { color: var(--fi-teal-500); text-decoration: none; }
a:hover { color: var(--fi-teal-400); }

/* ============ LAYOUT ============ */
.fi-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.fi-section { padding: 72px 0; }

/* ============ TOPBAR ============ */
.fi-topbar {
 border-bottom: 1px solid var(--fi-ink-500);
 background: linear-gradient(180deg, var(--fi-ink-900), rgba(5,8,15,.9));
 position: sticky;
 top: 0;
 z-index: 50;
 backdrop-filter: blur(8px);
}
.fi-topbar-inner {
 display: flex; align-items: center; justify-content: space-between;
 padding: 18px 0; gap: 24px;
}
.fi-logo {
 font-family: var(--fi-font-display);
 font-weight: 500;
 font-size: 22px;
 letter-spacing: -.01em;
 color: var(--fi-ink-100);
}
.fi-logo em {
 font-style: italic;
 color: var(--fi-gold-500);
}
.fi-nav {
 display: flex; gap: 24px; font-family: var(--fi-font-mono);
 font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.fi-nav a { color: var(--fi-ink-300); }
.fi-nav a:hover, .fi-nav a.active { color: var(--fi-gold-500); }

/* ============ EYEBROW ============ */
.fi-eyebrow {
 display: inline-flex; align-items: center; gap: 10px;
 font-family: var(--fi-font-mono);
 font-size: 11px;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--fi-ink-300);
 font-weight: 500;
}
.fi-eyebrow::before {
 content: ""; width: 24px; height: 1px; background: var(--fi-gold-500);
}
.fi-eyebrow.teal::before { background: var(--fi-teal-500); }
.fi-eyebrow.bear::before { background: var(--fi-bear); }
.fi-eyebrow.bull::before { background: var(--fi-bull); }
.fi-eyebrow.warn::before { background: var(--fi-warn); }

/* ============ HEADINGS ============ */
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--fi-font-display); line-height: 1.08; }
em { font-style: italic; color: var(--fi-gold-500); }

.fi-display-1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.015em; }
.fi-display-2 { font-size: clamp(32px, 4vw, 52px); }
.fi-display-3 { font-size: clamp(26px, 3vw, 36px); }

/* ============ BUTTONS ============ */
.fi-btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 padding: 12px 22px;
 border-radius: 10px;
 font-family: var(--fi-font-sans);
 font-size: 14px; font-weight: 600;
 letter-spacing: .02em;
 border: 1px solid transparent;
 cursor: pointer;
 transition: all .2s ease;
 text-decoration: none;
 white-space: nowrap;
}
.fi-btn-primary {
 background: var(--fi-gold-500);
 color: var(--fi-ink-900);
 border-color: var(--fi-gold-500);
}
.fi-btn-primary:hover {
 background: var(--fi-gold-400);
 border-color: var(--fi-gold-400);
 color: var(--fi-ink-900);
}
.fi-btn-ghost {
 background: transparent;
 color: var(--fi-ink-100);
 border-color: var(--fi-ink-500);
}
.fi-btn-ghost:hover {
 border-color: var(--fi-gold-500);
 color: var(--fi-gold-500);
}

/* ============ SECTION HEAD ============ */
.section-head {
 display: flex; justify-content: space-between; align-items: flex-end;
 margin-bottom: 32px; gap: 24px; padding-bottom: 20px;
 border-bottom: 1px solid var(--fi-ink-500);
}
.section-head h2 {
 font-size: clamp(32px, 4vw, 48px);
 line-height: 1.1;
 letter-spacing: -.01em;
 max-width: 22ch;
}
.section-head .meta {
 font-family: var(--fi-font-mono);
 font-size: 11px;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--fi-ink-300);
 white-space: nowrap;
}

/* ============ CARD ============ */
.fi-card {
 background: var(--fi-ink-700);
 border: 1px solid var(--fi-ink-500);
 border-radius: 12px;
 padding: 28px;
}
.fi-card.elevated {
 background: linear-gradient(180deg, var(--fi-ink-700), var(--fi-ink-800));
}
.fi-card .label {
 font-family: var(--fi-font-mono);
 font-size: 11px;
 letter-spacing: .12em;
 text-transform: uppercase;
 color: var(--fi-ink-300);
 margin-bottom: 10px;
}
.fi-card .value {
 font-family: var(--fi-font-display);
 font-size: 52px;
 line-height: 1;
 font-weight: 400;
 color: var(--fi-gold-500);
}
.fi-card .value.bear { color: var(--fi-bear); }
.fi-card .value.bull { color: var(--fi-bull); }
.fi-card .value.warn { color: var(--fi-warn); }
.fi-card .value.teal { color: var(--fi-teal-500); }
.fi-card .caption {
 font-size: 13px;
 color: var(--fi-ink-200);
 margin-top: 8px;
 line-height: 1.5;
}
.fi-card.accent-gold { border-top: 3px solid var(--fi-gold-500); }
.fi-card.accent-bear { border-top: 3px solid var(--fi-bear); }
.fi-card.accent-bull { border-top: 3px solid var(--fi-bull); }
.fi-card.accent-warn { border-top: 3px solid var(--fi-warn); }
.fi-card.accent-teal { border-top: 3px solid var(--fi-teal-500); }

/* ============ CALLOUT ============ */
.fi-callout {
 background: rgba(201,168,76,.06);
 border: 1px solid var(--fi-gold-600);
 border-radius: 12px;
 padding: 20px 28px;
 color: var(--fi-ink-100);
 font-size: 16px;
 line-height: 1.6;
}
.fi-callout.bear {
 background: rgba(232,74,95,.07);
 border-color: var(--fi-bear);
}
.fi-callout.warn {
 background: rgba(240,160,32,.07);
 border-color: var(--fi-warn);
}
.fi-callout.teal {
 background: rgba(0,180,216,.06);
 border-color: var(--fi-teal-500);
}
.fi-callout .hd {
 font-family: var(--fi-font-mono);
 font-size: 11px;
 letter-spacing: .14em;
 text-transform: uppercase;
 color: var(--fi-gold-500);
 margin-bottom: 8px;
 font-weight: 600;
}
.fi-callout.bear .hd { color: var(--fi-bear); }
.fi-callout.warn .hd { color: var(--fi-warn); }
.fi-callout.teal .hd { color: var(--fi-teal-500); }

/* ============ BADGE ============ */
.fi-badge {
 display: inline-flex; align-items: center; gap: 6px;
 font-family: var(--fi-font-mono);
 font-size: 10px;
 letter-spacing: .12em;
 text-transform: uppercase;
 padding: 4px 10px;
 border-radius: 6px;
 border: 1px solid var(--fi-ink-500);
 color: var(--fi-ink-200);
 background: var(--fi-ink-800);
 font-weight: 600;
}
.fi-badge.bull { border-color: var(--fi-bull); color: var(--fi-bull); }
.fi-badge.bear { border-color: var(--fi-bear); color: var(--fi-bear); }
.fi-badge.warn { border-color: var(--fi-warn); color: var(--fi-warn); }
.fi-badge.gold { border-color: var(--fi-gold-500); color: var(--fi-gold-500); }
.fi-badge.teal { border-color: var(--fi-teal-500); color: var(--fi-teal-500); }

/* ============ FOOTER ============ */
.fi-footer {
 border-top: 1px solid var(--fi-ink-500);
 padding: 40px 0 32px;
 margin-top: 72px;
 color: var(--fi-ink-300);
 font-size: 13px;
}
.fi-footer-inner {
 display: flex; justify-content: space-between; align-items: center;
 gap: 24px; flex-wrap: wrap;
}
.fi-footer .mono {
 font-family: var(--fi-font-mono);
 font-size: 11px;
 letter-spacing: .14em;
 text-transform: uppercase;
}

/* ============ UTILITIES ============ */
.fi-stack-sm > * + * { margin-top: 10px; }
.fi-stack > * + * { margin-top: 16px; }
.fi-stack-lg > * + * { margin-top: 24px; }
.fi-stack-xl > * + * { margin-top: 40px; }
.fi-mono { font-family: var(--fi-font-mono); }
.fi-display { font-family: var(--fi-font-display); }
.fi-muted { color: var(--fi-ink-300); }
.fi-dim { color: var(--fi-ink-200); }
.fi-gold { color: var(--fi-gold-500); }
.fi-teal { color: var(--fi-teal-500); }
.fi-bull { color: var(--fi-bull); }
.fi-bear { color: var(--fi-bear); }
.fi-warn { color: var(--fi-warn); }
.text-center { text-align: center; }

@media (max-width: 820px) {
 .fi-wrap { padding: 0 20px; }
 .fi-section { padding: 48px 0; }
 .section-head { flex-direction: column; align-items: flex-start; }
 .fi-topbar-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
 .fi-nav { flex-wrap: wrap; }
}