/* ============================================================================
   ZakERP - public website design system
   One stylesheet for every page: marketing, ERP-101 and the user manual.

   Dark is the default because that is how the product itself ships; light is a
   full, first-class theme, not an afterthought, because a manual gets read for
   twenty minutes at a stretch and printed.
   ========================================================================== */

@import url("../vendor/fonts/fonts.css");
@import url("../vendor/bootstrap-icons/bootstrap-icons.min.css");

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* brand - lifted from the app's zakerp.css so site and product read as one */
    --brand:          #6c63ff;
    --brand-dark:     #5a52d5;
    --brand-light:    #8b85ff;
    --violet:         #a855f7;
    --cyan:           #4facfe;
    --mint:           #43e97b;
    --amber:          #ffa502;
    --rose:           #ff4757;

    --grad-brand:  linear-gradient(135deg, #6c63ff 0%, #a855f7 55%, #4facfe 100%);
    --grad-warm:   linear-gradient(135deg, #a855f7 0%, #f093fb 100%);
    --grad-mint:   linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

    /* surfaces - dark */
    --bg:             #07060f;
    --bg-2:           #0b0918;
    --bg-3:           #110e23;
    --surface:        rgba(255, 255, 255, 0.035);
    --surface-2:      rgba(255, 255, 255, 0.06);
    --surface-solid:  #100d20;
    --border:         rgba(255, 255, 255, 0.09);
    --border-strong:  rgba(255, 255, 255, 0.16);

    --ink:            rgba(255, 255, 255, 0.94);
    --ink-2:          rgba(255, 255, 255, 0.66);
    --ink-3:          rgba(255, 255, 255, 0.42);
    --on-brand:       #ffffff;

    --code-bg:        #0d0b1c;
    --code-border:    rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);
    --shadow:    0 12px 34px rgba(0, 0, 0, .38);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .52);
    --glow:      0 14px 44px rgba(108, 99, 255, .40);

    --r-sm: 8px;  --r: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

    --font:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Poppins', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;

    --nav-h: 68px;
    --wrap:  1180px;
    --ease:  cubic-bezier(.22, 1, .36, 1);
}

:root[data-theme="light"] {
    --bg:             #ffffff;
    --bg-2:           #f7f7fb;
    --bg-3:           #eeedf7;
    --surface:        #ffffff;
    --surface-2:      #f5f4fb;
    --surface-solid:  #ffffff;
    --border:         rgba(16, 12, 40, 0.10);
    --border-strong:  rgba(16, 12, 40, 0.20);

    --ink:            #14112b;
    --ink-2:          #55506f;
    --ink-3:          #8b86a3;

    --code-bg:        #14112b;
    --code-border:    rgba(255, 255, 255, 0.10);

    --shadow-sm: 0 2px 8px rgba(20, 17, 43, .06);
    --shadow:    0 10px 30px rgba(20, 17, 43, .10);
    --shadow-lg: 0 28px 60px rgba(20, 17, 43, .14);
    --glow:      0 14px 40px rgba(108, 99, 255, .30);
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 16.5px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background .3s var(--ease), color .3s var(--ease);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4, h5 { font-family: var(--font-head); line-height: 1.16; font-weight: 700; letter-spacing: -.022em; }
h1 { font-size: clamp(2.35rem, 1.35rem + 3.9vw, 4.2rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.95rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.22rem, 1.05rem + .7vw, 1.6rem); }
h4 { font-size: 1.08rem; font-weight: 600; }
p  { color: var(--ink-2); }

.lead { font-size: clamp(1.03rem, .96rem + .38vw, 1.24rem); color: var(--ink-2); line-height: 1.72; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--brand-light);
}
:root[data-theme="light"] .eyebrow { color: var(--brand-dark); }

.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------- layout --- */
.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.6rem, 820px); margin-inline: auto; }
section { padding-block: clamp(4rem, 2.4rem + 6vw, 7.5rem); position: relative; }
.section-tint { background: var(--bg-2); }
.section-head { max-width: 680px; margin-bottom: 3.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: .85rem 0 1rem; }

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }

/* ---------------------------------------------------------------- navbar -- */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 900; height: var(--nav-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.14rem; letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand span { color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav-links a {
    padding: .5rem .82rem; border-radius: var(--r-sm); font-size: .93rem; font-weight: 500;
    color: var(--ink-2); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
.nav-links a.active { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: .6rem; }
.icon-btn {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    color: var(--ink-2); font-size: 1.02rem; transition: all .2s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--border-strong); transform: translateY(-1px); }
.nav-toggle { display: none; }

/* mobile drawer */
@media (max-width: 940px) {
    .nav-links {
        position: fixed; inset: var(--nav-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: .15rem;
        padding: 1rem 1.3rem 1.6rem;
        background: var(--bg); border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateY(-125%); opacity: 0; pointer-events: none;
        transition: transform .35s var(--ease), opacity .25s;
    }
    .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nav-links a { padding: .8rem .7rem; font-size: 1rem; }
    .nav-toggle { display: grid; }
    .nav .wrap { gap: .6rem; }
    .nav-actions { margin-left: auto; }
}

/* On a phone the header's own contents were wider than the screen, and because
   the bar cannot shrink below them it stretched every page sideways. The demo
   button is the widest thing in it and is reachable from the drawer and the
   footer anyway, so below tablet width it steps out of the bar. */
@media (max-width: 620px) {
    .nav .wrap { gap: .45rem; }
    .nav-actions > .btn { display: none; }
    .brand { font-size: 1.02rem; min-width: 0; }
    .brand img { width: 28px; height: 28px; }
}
/* Belt and braces: nothing in the chrome may force the page wider than the
   screen, whatever is added to it later. */
.nav, .nav .wrap, .nav-links { max-width: 100vw; min-width: 0; }

/* --------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .82rem 1.55rem; border-radius: var(--r-full);
    font-weight: 600; font-size: .96rem; letter-spacing: -.005em;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, border-color .22s, color .22s;
}
.btn i { font-size: 1.05em; }
.btn-primary { background: var(--grad-brand); color: var(--on-brand); box-shadow: var(--glow); background-size: 160% 160%; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 52px rgba(108, 99, 255, .52); background-position: 100% 0; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-link { padding: 0; color: var(--brand-light); font-weight: 600; }
:root[data-theme="light"] .btn-link { color: var(--brand-dark); }
.btn-link:hover { gap: .8rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ----------------------------------------------------------------- cards -- */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 1.7rem; position: relative; overflow: hidden;
    transition: transform .28s var(--ease), border-color .28s, box-shadow .28s, background .28s;
}
:root[data-theme="light"] .card { box-shadow: var(--shadow-sm); }
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); background: var(--surface-2); }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .95rem; }

.card-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.32rem; margin-bottom: 1.15rem; color: var(--on-brand);
    background: var(--grad-brand); box-shadow: var(--glow);
}
.card-ico.v2 { background: var(--grad-warm); box-shadow: 0 12px 32px rgba(168, 85, 247, .34); }
.card-ico.v3 { background: var(--grad-mint); box-shadow: 0 12px 32px rgba(67, 233, 123, .30); color: #06281a; }
.card-ico.plain { background: var(--surface-2); color: var(--brand-light); box-shadow: none; border: 1px solid var(--border); }

/* topline accent that only shows on hover */
.card-top::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
}
.card-top:hover::before { transform: scaleX(1); }

/* ----------------------------------------------------------------- pills -- */
.pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .34rem .82rem; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: .8rem; font-weight: 600; color: var(--ink-2);
}
.pill.brand { color: var(--brand-light); border-color: color-mix(in srgb, var(--brand) 42%, transparent); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.pill.mint  { color: var(--mint);  border-color: color-mix(in srgb, var(--mint) 40%, transparent);  background: color-mix(in srgb, var(--mint) 12%, transparent); }
.pill.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); }
:root[data-theme="light"] .pill.brand { color: var(--brand-dark); }

/* ----------------------------------------------------------------- stats -- */
.stat { text-align: center; padding: 1.5rem .8rem; }
.stat-num {
    font-family: var(--font-head); font-weight: 700; letter-spacing: -.04em;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.stat-label { margin-top: .6rem; font-size: .88rem; color: var(--ink-2); }

/* ------------------------------------------------------------------ code -- */
.code {
    background: var(--code-bg); border: 1px solid var(--code-border); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow);
}
.code-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .95rem; border-bottom: 1px solid var(--code-border);
    background: rgba(255, 255, 255, .025);
}
.code-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.code-name { margin-left: .5rem; font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.5); }
.code pre {
    margin: 0; padding: 1.15rem 1.25rem; overflow-x: auto;
    font-family: var(--font-mono); font-size: .845rem; line-height: 1.72;
    color: rgba(255, 255, 255, .88);
}
.code pre::-webkit-scrollbar { height: 8px; }
.code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.tok-key { color: #a78bfa; font-weight: 600; }
.tok-str { color: #7ee787; }
.tok-com { color: rgba(255,255,255,.34); font-style: italic; }
.tok-num { color: #79c0ff; }
code.inline {
    font-family: var(--font-mono); font-size: .87em;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: .12em .42em; border-radius: 6px; color: var(--brand-light);
}
:root[data-theme="light"] code.inline { color: var(--brand-dark); }

/* ----------------------------------------------------------------- lists -- */
.check-list { list-style: none; padding: 0; display: grid; gap: .85rem; }
.check-list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--ink-2); font-size: .97rem; }
.check-list li i { color: var(--mint); font-size: 1.1rem; margin-top: .14rem; flex-shrink: 0; }
.check-list li strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- footer -- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding-block: 3.6rem 2rem; }
/* One column on phones, brand column plus a track per link list above that.
   NOT repeat(auto-fit, ...): CSS forbids an automatic repetition alongside a
   flexible track, so "1.6fr repeat(auto-fit, minmax(150px, 1fr))" was thrown
   away in full and every footer on the site stacked into a single column.
   Auto-placing the link lists into implicit columns is valid, and adapts to
   however many of them a page has. */
.footer-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 780px) {
    .footer-grid {
        grid-template-columns: 1.6fr;
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
    }
}
.footer h5 { font-family: var(--font); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 700; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer ul a { font-size: .93rem; color: var(--ink-2); transition: color .2s; }
.footer ul a:hover { color: var(--brand-light); }
.footer-bottom {
    margin-top: 2.8rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
    font-size: .86rem; color: var(--ink-3);
}

/* ------------------------------------------------------------- utilities -- */
.center { text-align: center; }
.mt-1 { margin-top: .6rem; }  .mt-2 { margin-top: 1.2rem; }  .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.2rem; }
.muted { color: var(--ink-3); font-size: .88rem; }
.hr { height: 1px; background: var(--border); border: 0; margin-block: 2.5rem; }

/* reveal-on-scroll (JS adds .in) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* Above the fold there is nothing to wait for, so the hero animates itself in
   on load. That keeps the first screen readable even if site.js never runs. */
@keyframes riseIn { to { opacity: 1; transform: none; } }
.hero .reveal { animation: riseIn .75s var(--ease) both; }
.hero .reveal.d1 { animation-delay: .10s; }
.hero .reveal.d2 { animation-delay: .20s; }
.hero .reveal.d3 { animation-delay: .30s; }
.hero .reveal.d4 { animation-delay: .40s; }

/* ambient glow blobs used behind hero / CTA */
.glow-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
:root[data-theme="light"] .glow-blob { opacity: .34; }

/* ----------------------------------------------------------------- print -- */
@media print {
    .nav, .footer, .no-print, .glow-blob { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    section { padding-block: 1rem; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}