/* ============================================================================
   magneterp.com — the site stylesheet (redesign approved by the owner, 2026-11-05).
   The design was agreed as a PDF mockup first: design_previews/website-redesign-2026-11-05/.
   The site as it stood before is in design_backups/marketing-2026-11-05/ (with revert steps).

   THESIS: MagnetERP for the companies that run Nigeria - real people at plants, depots, ports and
     head offices, and one idea said plainly: capture once, it reflects everywhere. Short copy that
     hits the point; no walls of text.
   OWN-WORLD: daylight. A sky-to-mint field with a sun disc and an emerald arc; the same shapes
     (sun disc, sun ring, emerald arc, sky and mint circles, a dot grid echoing the logo's dots)
     come in from the edges of every section. White rounded photo cards, navy actions, emerald
     "posted" ticks, Figtree throughout; MagnetFont only in the wordmark and the mark's M.
   STORY: see companies like yours -> get the idea in one line -> watch one sale reach four
     records -> see it fits Nigeria and your industry -> talk to a person on WhatsApp.
   FIRST VIEWPORT: headline left at ~76px, one line under it, two buttons; a large team photo
     right with a floating invoice card ticking off four records; a white section bar riding the
     field's lower edge, which sticks to the top as the page scrolls.
   FORM: owner-pinned to modern business software (Dynamics 365 / marketing-site references).

   RULES THAT STILL HOLD (PRODUCT.md, DESIGN.md "Surface: the marketing site"):
   - Low bandwidth is a requirement: one stylesheet, one small hand-written script, photos <= 1400px
     and re-encoded, every word readable with no JavaScript (html.js scopes every hidden start state).
   - Never fabricated proof: every figure on the page is the house example and says it is one; no
     client names, logos, testimonials or numbers that are not ours.
   - A page stylesheet names colours only through these tokens - light and dark both live here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS - light
   --------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --page: #FFFFFF;
    --surface: #FFFFFF;          /* cards, the section bar, the post card */
    --surface-2: #F3F6F8;        /* the quieter section ground (modules, AI & CRM) */
    --ink: #0D1B2A;
    --text: #33414F;
    --muted: #5E6B78;
    --line: #E2E7EE;
    --line-firm: #CBD3DD;

    --action: #14284B;           /* navy - every filled button */
    --action-ink: #FFFFFF;
    --action-hover: #0C1B36;

    --emerald: #0D7A54;          /* fills: the arc, the projects panel, the ticks */
    --emerald-ink: #0D7A54;      /* emerald used as TEXT */
    --emerald-soft: #DCF2E8;
    --sun: #F6B330;
    --sun-soft: #FDF0D5;
    --sun-ink: #9A6206;
    --sky: #9BD8F2;
    --sky-soft: #E3F4FC;
    --sky-ink: #136C99;
    --shape-sky: #D3EEFA;        /* the soft circles behind sections */
    --shape-mint: #CDEEDB;
    --dot: #14284B;              /* the dot grid */

    --hero-bg: linear-gradient(115deg, #E6F6FD 0%, #CFEBF9 38%, #DDF2E7 78%, #EAF7EE 100%);
    --field: #14284B;            /* a navy band (privacy / 404 heads, the currency panel) */
    --on-field: #FFFFFF;
    --on-field-soft: #D5E2F5;
    --close-bg: linear-gradient(120deg, #0C1B36 0%, #14284B 55%, #0D5E46 100%);
    --veil: linear-gradient(90deg, rgba(8, 24, 44, 0.88) 0%, rgba(8, 24, 44, 0.6) 45%, rgba(8, 24, 44, 0.08) 82%);

    --brand-blue: #2563EB;       /* the logo's own blue - "ERP" in the wordmark, nowhere else */
    --mark-r1: #CBD5E1;
    --mark-r2: #1E3A8A;
    --mark-r3: #0F172A;
    --mark-m: #0F172A;

    --shadow: 0 18px 40px -18px rgba(13, 27, 42, 0.30);
    --shadow-soft: 0 10px 30px -14px rgba(13, 27, 42, 0.20);

    --face: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --face-mark: 'MagnetFont', 'Figtree', sans-serif;

    --r-sm: 10px;
    --r-control: 12px;           /* buttons and small controls */
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;

    --t-small: 0.875rem;
    --t-body: 1.0625rem;
    --t-lead: 1.25rem;
    --t-h3: 1.375rem;
    --t-h2: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
    --t-display: clamp(2.75rem, 1.4rem + 4.3vw, 4.75rem);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* aliases the pages written before 2026-11-05 still read */
    --paper: var(--surface);
    --accent: var(--action);
    --accent-soft: var(--sky-soft);
}

/* ---------------------------------------------------------------------------
   1b. TOKENS - dark. Followed from the operating system until the visitor picks one with the
   toggle (App.razor stamps data-theme before first paint; site.js owns the button). Same names,
   re-pointed - no component knows which mode it is in.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: #0A1220;
        --surface: #121B2B;
        --surface-2: #0E1626;
        --ink: #F2F5F9;
        --text: #C8D2DE;
        --muted: #93A0B0;
        --line: #23304A;
        --line-firm: #34425E;
        --action: #8ECFF0;
        --action-ink: #0B1A33;
        --action-hover: #B5E2F7;
        --emerald: #0D7A54;
        --emerald-ink: #45D19A;
        --emerald-soft: rgba(69, 209, 154, 0.14);
        --sun: #E8A928;
        --sun-soft: rgba(232, 169, 40, 0.16);
        --sun-ink: #F2C062;
        --sky: #8ECFF0;
        --sky-soft: rgba(142, 207, 240, 0.13);
        --sky-ink: #8ECFF0;
        --shape-sky: #13304A;
        --shape-mint: #10362A;
        --dot: #8ECFF0;
        --hero-bg: linear-gradient(115deg, #0D2236 0%, #0C2A3B 40%, #0D2F26 78%, #0B2A22 100%);
        --field: #13203B;
        --on-field: #FFFFFF;
        --on-field-soft: #C9D6EA;
        --close-bg: linear-gradient(120deg, #091428 0%, #122648 55%, #0B4A38 100%);
        --brand-blue: #60A5FA;
        --mark-r1: #3E5C93;
        --mark-r2: #60A5FA;
        --mark-r3: #E9EEF7;
        --mark-m: #E9EEF7;
        --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
        --shadow-soft: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page: #0A1220;
    --surface: #121B2B;
    --surface-2: #0E1626;
    --ink: #F2F5F9;
    --text: #C8D2DE;
    --muted: #93A0B0;
    --line: #23304A;
    --line-firm: #34425E;
    --action: #8ECFF0;
    --action-ink: #0B1A33;
    --action-hover: #B5E2F7;
    --emerald: #0D7A54;
    --emerald-ink: #45D19A;
    --emerald-soft: rgba(69, 209, 154, 0.14);
    --sun: #E8A928;
    --sun-soft: rgba(232, 169, 40, 0.16);
    --sun-ink: #F2C062;
    --sky: #8ECFF0;
    --sky-soft: rgba(142, 207, 240, 0.13);
    --sky-ink: #8ECFF0;
    --shape-sky: #13304A;
    --shape-mint: #10362A;
    --dot: #8ECFF0;
    --hero-bg: linear-gradient(115deg, #0D2236 0%, #0C2A3B 40%, #0D2F26 78%, #0B2A22 100%);
    --field: #13203B;
    --on-field: #FFFFFF;
    --on-field-soft: #C9D6EA;
    --close-bg: linear-gradient(120deg, #091428 0%, #122648 55%, #0B4A38 100%);
    --brand-blue: #60A5FA;
    --mark-r1: #3E5C93;
    --mark-r2: #60A5FA;
    --mark-r3: #E9EEF7;
    --mark-m: #E9EEF7;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --shadow-soft: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

/* Figtree, self-hosted (SIL Open Font License 1.1, https://openfontlicense.org): one variable file per subset covers 400-800. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/figtree-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The wordmark face carries the product name and nothing else (One Family Rule): MagnetFont, the owner's own
   letterforms - it sets only M a g n e t E R P and a space. */
@font-face {
    font-family: MagnetFont;
    src: url("fonts/magnetfont.ttf") format("truetype");
    font-weight: 400 900;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. RESET AND BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* The section bar sticks to the top of the screen, so an anchor jump lands its target below it. */
[id] { scroll-margin-top: 110px; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: var(--face);
    font-size: var(--t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html.theme-anim body,
html.theme-anim body * {
    transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.2; text-wrap: balance; }

:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
    border-radius: 4px;
}
.sheet--field :focus-visible,
.on-field :focus-visible { outline-color: var(--sky); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Skip link - the first tab stop on every page. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--action);
    color: var(--action-ink);
    font-weight: 700;
    border-radius: var(--r-sm);
    text-decoration: none;
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

/* ---------------------------------------------------------------------------
   3. STRUCTURE
   --------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1264px;
    margin-inline: auto;
    padding-inline: 32px;
}
.wrap--narrow { max-width: 824px; }

.sheet {
    padding-block: 110px;
    background: var(--page);
}
.sheet--tight { padding-block: 72px; }
.sheet--mist { background: var(--surface-2); }

.sheet--field {
    background: var(--field);
    color: var(--on-field-soft);
}
.sheet--field h1,
.sheet--field h2,
.sheet--field h3 { color: var(--on-field); }
.sheet--field a:not(.btn) { color: var(--on-field); }

@media (max-width: 700px) {
    .wrap { padding-inline: 18px; }
    .sheet { padding-block: 64px; }
    .sheet--tight { padding-block: 48px; }
}

/* ---------------------------------------------------------------------------
   4. TYPE
   --------------------------------------------------------------------------- */
/* The kicker: a small pill with a dot. Used ONCE per page head, never over every section. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--action);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    padding: 8px 14px;
    border-radius: 999px;
}
.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald-ink);
    flex: none;
}
.sheet--field .eyebrow {
    color: var(--on-field);
    background: rgba(255, 255, 255, 0.1);
}
.sheet--field .eyebrow::before { background: var(--sun); }

.display {
    font-size: var(--t-display);
    line-height: 1.0;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.h2 {
    font-size: var(--t-h2);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.h2--quiet { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); }
.h3 {
    font-size: var(--t-h3);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.lead {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--muted);
    max-width: 640px;
}
.sheet--field .lead { color: var(--on-field-soft); }

.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s-3); }
.prose a { color: var(--action); }
.sheet--field .prose { color: var(--on-field-soft); }

.small { font-size: var(--t-small); }

/* A caption that names a demonstration as a demonstration. Every example figure carries one. */
.synthetic {
    font-size: 0.8125rem;
    color: var(--muted);
}
.sheet--field .synthetic { color: var(--on-field-soft); opacity: 0.85; }

.fig { font-variant-numeric: tabular-nums lining-nums; }

.link {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.link:hover { text-decoration-thickness: 2px; }

/* A small uppercase column head - footer groups, the cookie notice. */
.colhead {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}
.sheet--field .colhead { color: var(--on-field); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule--firm { border-top-color: var(--line-firm); }

/* ---------------------------------------------------------------------------
   5. BUTTONS - filled controls deepen on hover, never brighten.
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: var(--r-control);
    border: 2px solid transparent;
    font-family: var(--face);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn .ic { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); }

.btn--outline {
    border-color: var(--action);
    color: var(--action);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.btn--outline:hover { background: var(--surface); }

.btn--ghost {
    border-color: var(--line-firm);
    color: var(--ink);
    background: var(--surface);
}
.btn--ghost:hover { border-color: var(--action); }

/* On a navy ground: a white button and a white-outlined one. */
.btn--paper { background: #FFFFFF; color: #14284B; }
.btn--paper:hover { background: #E6EEF8; }
.btn--light-outline { border-color: rgba(255, 255, 255, 0.75); color: #FFFFFF; background: transparent; }
.btn--light-outline:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.sheet--field .btn--outline { border-color: rgba(255, 255, 255, 0.75); color: #FFFFFF; background: transparent; }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 1rem; }

/* ---------------------------------------------------------------------------
   6. THE SCHEDULE - a ruled list (the 404 page's "where to go from here").
   --------------------------------------------------------------------------- */
.schedule { border-top: 1px solid var(--line); }
.schedule__row {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
    gap: var(--s-2) var(--s-5);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.schedule__name { font-weight: 700; color: var(--ink); }
.schedule__note { color: var(--muted); }
.schedule__ref { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 700px) {
    .schedule__row { grid-template-columns: minmax(0, 1fr) auto; }
    .schedule__note { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   7. THE SHAPES - the hero's sun disc, emerald arc and sky circles, plus a dot grid that echoes
   the logo's dots, coming in from the edges of every section (owner, 2026-11-05: "the background
   shapes with color should be all over the background of the website"). Always behind the content.
   --------------------------------------------------------------------------- */
.has-shapes { position: relative; overflow: hidden; }
.has-shapes > .wrap { position: relative; z-index: 1; }
.shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.shape--sun { background: var(--sun); }
.shape--sun-ring { border: 30px solid var(--sun); }
.shape--arc { border: 54px solid var(--emerald); }
.shape--arc-thin { border: 26px solid var(--emerald); }
.shape--sky { background: var(--shape-sky); }
.shape--mint { background: var(--shape-mint); }
.shape--white { background: #FFFFFF; opacity: 0.55; }
.shape--dots {
    border-radius: 0;
    background-image: radial-gradient(circle, var(--dot) 2.2px, transparent 2.6px);
    background-size: 22px 22px;
    opacity: 0.16;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .shape--white { opacity: 0.06; }
}
html[data-theme="dark"] .shape--white { opacity: 0.06; }
@media (max-width: 700px) {
    .shape { transform: scale(0.55); }
    .shape--dots,
    .shape--sun-ring { display: none; }   /* a ring crosses the text column on a phone */
}

/* ---------------------------------------------------------------------------
   8. THE MARK - the eighteen dots and the owner's M, inline so the colours follow the theme.
   --------------------------------------------------------------------------- */
.mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.mark__mk { width: 40px; height: 40px; flex: none; overflow: visible; }
.mark__word {
    font-family: var(--face-mark);
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
}
.mark__word em { font-style: normal; color: var(--brand-blue); }
.mk-r1 circle { fill: var(--mark-r1); }
.mk-r2 circle { fill: var(--mark-r2); }
.mk-r3 circle { fill: var(--mark-r3); }
.mk-m { fill: var(--mark-m); font-family: var(--face-mark); }
.mk-r1 circle, .mk-r2 circle, .mk-r3 circle, .mk-m { transition: fill 260ms var(--ease-out); }
@media (max-width: 700px) {
    .mark__mk { width: 34px; height: 34px; }
    .mark__word { font-size: 1.375rem; }
}

/* ---------------------------------------------------------------------------
   9. ICONS AND THE THEME TOGGLE
   --------------------------------------------------------------------------- */
.ic { width: 24px; height: 24px; }

/* The toggle exists only once the script that drives it has arrived. */
.theme-toggle { display: none; }
html.js .theme-toggle { display: inline-grid; }
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
}

/* ---------------------------------------------------------------------------
   10. THE ONE AUTHORED MOMENT - the hero card ticks its four records off in turn. Scoped to
   html.js so with no script every tick is simply there; the reduced-motion rule above skips it.
   --------------------------------------------------------------------------- */
@keyframes tick-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
html.js .tick-run > * {
    animation: tick-in 520ms var(--ease-out) both;
}
html.js .tick-run > *:nth-child(1) { animation-delay: 350ms; }
html.js .tick-run > *:nth-child(2) { animation-delay: 650ms; }
html.js .tick-run > *:nth-child(3) { animation-delay: 950ms; }
html.js .tick-run > *:nth-child(4) { animation-delay: 1250ms; }