/* ==========================================
   BOLD TYPOGRAPHY DESIGN SYSTEM
   ========================================== */

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

:root {
    /* Colors */
    --background: #0A0A0A;
    --foreground: #FAFAFA;
    --muted: #1A1A1A;
    --muted-foreground: #737373;
    --accent: #FF3D00; /* Vermillion */
    --accent-foreground: #0A0A0A;
    --border: #262626;
    --input: #1A1A1A;
    --card: #0F0F0F;
    --card-foreground: #FAFAFA;
    --ring: #FF3D00;

    /* Typography Stacks */
    --font-primary: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Tracking */
    --tracking-tighter: -0.06em;
    --tracking-tight: -0.04em;
    --tracking-normal: -0.01em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.2em;

    /* Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
    --text-7xl: 6rem;
    --text-8xl: 8rem;
    --text-9xl: 10rem;

    /* Spacing & Layout */
    --container-max: 1200px;
    --radius: 0px; /* Sharp edges only */
    --border-thin: 1px;
    --border-thick: 2px;
    
    /* Transitions */
    --ease-decisive: cubic-bezier(0.25, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-standard: 200ms;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--background);
}

body {
    font-family: var(--font-primary);
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    line-height: 1.6;
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
    /* Removed global noise as it can interfere with screenshots */
}

/* Typography Utilities */
.h1 { font-size: var(--text-5xl); font-weight: 900; letter-spacing: var(--tracking-tighter); line-height: 1; }
.h2 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.h3 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.2; }

@media (min-width: 768px) {
    .h1 { font-size: var(--text-7xl); }
    .h2 { font-size: var(--text-5xl); }
}

@media (min-width: 1024px) {
    .h1 { font-size: var(--text-8xl); }
}

.text-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted-foreground); }

/* Link Hover */
.link-hover {
    transition: color var(--duration-fast) var(--ease-decisive);
    text-decoration: none;
    color: inherit;
}
.link-hover:hover {
    color: var(--accent);
}

/* Layout Components */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) { .container { padding: 0 48px; } }
@media (min-width: 1024px) { .container { padding: 0 64px; } }

.section { padding: 80px 0; border-top: var(--border-thin) solid var(--border); }
@media (min-width: 768px) { .section { padding: 112px 0; } }
@media (min-width: 1024px) { .section { padding: 160px 0; } }

/* Button: Animated Underline */
.btn-primary {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: 12px 0;
    cursor: pointer;
    position: relative;
    transition: var(--duration-fast) var(--ease-decisive);
    text-decoration: none;
}

.btn-primary::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: var(--border-thick);
    background-color: var(--accent);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform var(--duration-fast) var(--ease-decisive);
}

.btn-primary:hover::after {
    transform: scaleX(1.1);
}

.btn-primary:active {
    transform: translateY(1px);
}

/* ===== NAV ===== */
.nav {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: var(--duration-standard) var(--ease-decisive);
}

.nav__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    font-size: var(--text-xl);
    font-weight: 900;
    text-decoration: none;
    color: var(--foreground);
    letter-spacing: var(--tracking-tighter);
}

.nav__links {
    display: flex;
    gap: 32px;
    list-style: none;
}

.nav__links a {
    text-decoration: none;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    transition: color var(--duration-fast) var(--ease-decisive);
}

.nav__links a:hover,
.nav__links a.active {
    color: var(--accent);
}

.nav__cta {
    color: var(--foreground) !important;
    border: 1px solid var(--foreground);
    padding: 8px 16px;
    transition: all var(--duration-fast) var(--ease-decisive) !important;
}

.nav__cta:hover {
    background-color: var(--foreground);
    color: var(--background) !important;
}

/* Timeline Polish */
.timeline__item {
    color: var(--foreground) !important;
}
.timeline__company {
    color: var(--foreground) !important;
}
.text-lg, .text-base, p {
    color: var(--muted-foreground);
}
.h1, .h2, .h3, .h4, strong {
    color: var(--foreground) !important;
}

.sector-chart {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
}

.evidence-card p {
    color: var(--muted-foreground);
}

.tech-radar__pill {
    background: none;
    border: 1px solid var(--border);
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-decisive);
    text-transform: uppercase;
}

.tech-radar__pill:hover,
.tech-radar__pill.active {
    border-color: var(--accent);
    color: var(--foreground);
}