/* Field Mapper — shared design system (loaded after each page's inline <style> to unify the whole site) */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary: #0079c1;
    --primary-dark: #00598f;
    --accent: #0079c1;
    --accent-light: #5bb8e0;
    --secondary: #0079c1;
    --dark: #0f172a;
    --muted: #475569;
    --light: #f8fafc;
    --border: #e2e8f0;
}

body {
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--dark);
}

h1, h2, h3, h4,
.logo-text strong {
    font-family: 'Mulish', 'Avenir Next', sans-serif;
    letter-spacing: -0.02em;
}

/* ---- Header + logo ---- */
header {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

nav { padding: 2.1rem 0; gap: 1.5rem; }

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,121,193,0.35);
}

.logo-mark svg { width: 24px; height: 24px; }

.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text strong { font-size: 1.25rem; font-weight: 800; color: var(--dark); }
.logo-text small {
    font-size: 0.68rem; font-weight: 600; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.08em;
}

.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--primary); }

/* ---- Hero sections (blue across the whole site) ---- */
.hero,
.feature-hero {
    background: linear-gradient(135deg, #003a5c 0%, #0079c1 55%, #00598f 100%);
}

/* ---- Sharp 4px corners everywhere ---- */
.btn, .btn-white, .btn-outline, .nav-cta,
.feat-card, .cap-card, .arch-layer, .int-card, .rel-card, .spec-item,
.badge, .tag,
.hero-icon, .cap-icon, .int-icon, .rel-icon, .layer-icon, .fcard-icon {
    border-radius: 4px;
}

/* ---- Icon tiles: turn the old emoji spots into clean, consistent chips ---- */
.cap-icon, .int-icon, .rel-icon, .fcard-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1;
    background: linear-gradient(135deg, #e8f3fa 0%, #d6ecf7 100%);
    color: var(--primary);
}

.cap-icon svg, .int-icon svg, .rel-icon svg, .fcard-icon svg { width: 26px; height: 26px; }

/* Hero + dark-section icon tiles (light-on-dark) */
.hero-icon {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1.25rem;
    font-size: 2.4rem;
    line-height: 1;
    border-radius: 4px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
}
.hero-icon svg { width: 38px; height: 38px; }

.layer-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    color: var(--accent-light);
}
.layer-icon svg { width: 26px; height: 26px; }

/* ---- Buttons ---- */
.btn-white { color: var(--primary); }
.btn-white:hover { color: var(--primary-dark); }
.btn-outline:hover { color: var(--primary); }

/* ---- Card hover accents tuned to blue ---- */
.feat-card:hover { border-color: var(--primary); box-shadow: 0 10px 30px rgba(0,121,193,0.14); }
.rel-card:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 4px 12px rgba(0,121,193,0.12); }

/* ---- Tag chips ---- */
.tag { background: #e8f3fa; color: var(--primary); }

/* ---- CTA band: unify to brand blue (some pages used a bright accent) ---- */
.cta-band { background: var(--primary); }

/* ---- Card titles: dark + pro on light sections, light on dark sections ---- */
.feat-card h3, .cap-card h3, .int-card h4, .rel-card h4 { color: var(--dark); }
.s-dark .cap-card h3 { color: var(--accent-light); }
.feat-card .learn { color: var(--primary); }