/* Examination Center — shared design system for landing + demo pages.
   Type + palette guided by the ui-ux-pro-max skill: IBM Plex Sans (UI) +
   JetBrains Mono (code), slate neutrals, teal brand, green "run" accent.
   Vanilla CSS, no build step. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Palette — deep teal + warm gold, high-contrast neutrals (premium). */
    --ec-ink: #0c1820;          /* near-black headings for crisp contrast */
    --ec-ink-soft: #3a4954;
    --ec-muted: #5e6b76;
    --ec-line: #e0e6ea;
    --ec-line-strong: #c3ccd3;
    --ec-bg: #f4f6f8;
    --ec-surface: #ffffff;
    --ec-surface-alt: #eef2f5;
    --ec-primary: #0c3b4a;      /* deeper teal */
    --ec-primary-600: #114e63;
    --ec-primary-700: #082a35;
    --ec-ink-on-dark: #eaf2f4;
    --ec-accent: #c88a1e;       /* richer gold */
    --ec-accent-strong: #a9731a;
    --ec-accent-soft: #f6e8cd;
    --ec-success: #1c7a4f;
    --ec-success-soft: #ddf0e6;
    --ec-run: #1f9d57;
    --ec-run-hover: #17833f;
    --ec-warn: #8a5d0c;
    --ec-warn-soft: #f7ecd4;
    --ec-danger: #a3322d;
    --ec-danger-soft: #f8e1df;
    --ec-info: #1a5a74;

    /* Typography */
    --ec-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ec-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;

    /* Spacing scale */
    --ec-s1: 4px; --ec-s2: 8px; --ec-s3: 12px; --ec-s4: 16px;
    --ec-s5: 24px; --ec-s6: 32px; --ec-s7: 48px; --ec-s8: 64px; --ec-s9: 96px;

    /* Radius + shadow */
    --ec-r-sm: 8px; --ec-r-md: 12px; --ec-r-lg: 18px; --ec-r-xl: 26px; --ec-r-pill: 999px;
    --ec-shadow-sm: 0 1px 2px rgba(12, 24, 32, .07), 0 2px 6px rgba(12, 24, 32, .05);
    --ec-shadow-md: 0 8px 24px rgba(12, 24, 32, .10);
    --ec-shadow-lg: 0 24px 60px rgba(12, 24, 32, .16);
    --ec-ring: 0 0 0 3px rgba(12, 59, 74, .22);

    --ec-maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ec-font);
    color: var(--ec-ink);
    background: var(--ec-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; color: var(--ec-ink); margin: 0 0 var(--ec-s4); }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 720; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 680; }
h3 { font-size: 1.15rem; font-weight: 660; }
p { margin: 0 0 var(--ec-s4); color: var(--ec-ink-soft); }
a { color: var(--ec-primary-600); text-decoration: none; }
a:hover { color: var(--ec-primary); }
img, svg { max-width: 100%; }

.ec-container { width: 100%; max-width: var(--ec-maxw); margin: 0 auto; padding: 0 var(--ec-s5); }
.ec-eyebrow {
    text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700;
    color: var(--ec-accent); margin: 0 0 var(--ec-s3);
}
.ec-lead { font-size: 1.15rem; color: var(--ec-ink-soft); max-width: 60ch; }
.ec-muted { color: var(--ec-muted); }

/* Buttons */
.ec-btn {
    display: inline-flex; align-items: center; gap: var(--ec-s2); justify-content: center;
    padding: .72rem 1.25rem; border-radius: var(--ec-r-pill); font-weight: 640; font-size: .98rem;
    border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    text-decoration: none; white-space: nowrap;
}
.ec-btn:focus-visible { outline: none; box-shadow: var(--ec-ring); }
/* color !important: ancestor link-color rules (.ec-nav-links a, .content-main a)
   otherwise win on specificity and render the white CTA label as dark teal on the
   teal pill — making the button look disabled. A button's own text colour must win. */
.ec-btn-primary { background: linear-gradient(180deg, var(--ec-primary-600), var(--ec-primary)); color: #fff !important; box-shadow: var(--ec-shadow-sm); }
.ec-btn-primary:hover { background: linear-gradient(180deg, var(--ec-primary), var(--ec-primary-700)); color: #fff !important; transform: translateY(-1px); box-shadow: var(--ec-shadow-md); }
.ec-btn-secondary { background: var(--ec-surface); color: var(--ec-primary); border-color: var(--ec-line-strong); }
.ec-btn-secondary:hover { border-color: var(--ec-primary); transform: translateY(-1px); }
.ec-btn-ghost { background: transparent; color: var(--ec-ink); }
.ec-btn-ghost:hover { background: var(--ec-surface-alt); }
.ec-btn-sm { padding: .45rem .8rem; font-size: .86rem; }

/* Cards + surfaces */
.ec-card {
    background: var(--ec-surface); border: 1px solid var(--ec-line);
    border-radius: var(--ec-r-lg); padding: var(--ec-s5); box-shadow: var(--ec-shadow-sm);
}
.ec-card-pad-lg { padding: var(--ec-s6); }

/* Badges */
.ec-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ec-r-pill);
    font-size: .76rem; font-weight: 650; letter-spacing: .01em; border: 1px solid transparent;
}
.ec-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.ec-badge-success { background: var(--ec-success-soft); color: var(--ec-success); }
.ec-badge-warn { background: var(--ec-warn-soft); color: var(--ec-warn); }
.ec-badge-danger { background: var(--ec-danger-soft); color: var(--ec-danger); }
.ec-badge-info { background: #e4eef2; color: var(--ec-info); }
.ec-badge-neutral { background: var(--ec-surface-alt); color: var(--ec-ink-soft); }
.ec-badge-accent { background: var(--ec-accent-soft); color: var(--ec-warn); }

/* Top navigation (shared) */
.ec-nav {
    position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--ec-line);
}
.ec-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-s4); height: 76px; }
.ec-brand { display: flex; align-items: center; gap: 12px; font-weight: 720; font-size: 1.08rem; color: var(--ec-primary); letter-spacing: -0.01em; }
.ec-brand img { height: 46px; width: auto; }
.ec-nav-links { display: flex; align-items: center; gap: var(--ec-s5); }
.ec-nav-links a { color: var(--ec-ink-soft); font-weight: 560; font-size: .95rem; }
.ec-nav-links a:hover { color: var(--ec-ink); }
/* Mobile menu button — hidden on desktop, shown below the collapse breakpoint. */
.ec-nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: var(--ec-surface);
    border: 1px solid var(--ec-line-strong); border-radius: 10px; cursor: pointer;
}
.ec-nav-toggle span { display: block; width: 20px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--ec-ink); transition: opacity .15s ease; }

/* Section rhythm */
.ec-section { padding: var(--ec-s9) 0; }
.ec-section-tight { padding: var(--ec-s8) 0; }
.ec-section-head { max-width: 64ch; margin-bottom: var(--ec-s7); }
.ec-center { text-align: center; margin-left: auto; margin-right: auto; }

/* Grid helpers */
.ec-grid { display: grid; gap: var(--ec-s5); }
.ec-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ec-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ec-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Accessibility helpers */
.ec-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 2px; }

@media (max-width: 900px) {
    .ec-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ec-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ec-grid-2, .ec-grid-3, .ec-grid-4 { grid-template-columns: 1fr; }
    .ec-section { padding: var(--ec-s8) 0; }
}
/* Collapse the primary nav into a tap-to-open menu before the links overflow.
   Targets the header nav only (.ec-nav ...), never the footer's .ec-nav-links. */
@media (max-width: 860px) {
    .ec-nav-toggle { display: flex; }
    .ec-nav .ec-nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: var(--ec-s2);
        margin: 0; padding: var(--ec-s4);
        background: var(--ec-surface); border-bottom: 1px solid var(--ec-line);
        box-shadow: var(--ec-shadow-md);
    }
    .ec-nav .ec-nav-links:not(.is-open) { display: none; }
    .ec-nav .ec-nav-links a { padding: 10px 6px; font-size: 1rem; }
    .ec-nav .ec-nav-links a.ec-btn { justify-content: center; padding: .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}