/* ============================================================================
   ZakERP site - landing page components.
   Loaded only by index.html; everything shared lives in site.css.
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(2.6rem, 1rem + 6vw, 6rem));
    padding-bottom: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    overflow: hidden;
}
.hero::after {
    /* faint grid so the dark surface is not a flat void */
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 78%);
}
:root[data-theme="light"] .hero::after {
    background-image:
        linear-gradient(to right, rgba(20,17,43,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20,17,43,.05) 1px, transparent 1px);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-blob-1 { width: 620px; height: 620px; top: -220px; left: -160px; background: rgba(108, 99, 255, .38); }
.hero-blob-2 { width: 520px; height: 520px; top: -120px; right: -180px; background: rgba(168, 85, 247, .28); }
.hero-blob-3 { width: 420px; height: 420px; bottom: -240px; left: 40%; background: rgba(79, 172, 254, .20); }

.hero-grid {
    display: grid; gap: clamp(2.4rem, 1rem + 4vw, 4rem);
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
}
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .42rem .5rem .42rem .95rem; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: .84rem; color: var(--ink-2); margin-bottom: 1.5rem;
}
.hero-badge b { color: var(--ink); font-weight: 600; }
.hero-badge .tag {
    background: var(--grad-brand); color: #fff; font-size: .7rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: .22rem .6rem; border-radius: var(--r-full);
}

.hero h1 { margin-bottom: 1.35rem; }
.hero .lead { max-width: 34rem; }
.hero .btn-row { margin-top: 2.1rem; }

.hero-trust {
    margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 1.6rem;
}
.hero-trust div { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--ink-2); }
.hero-trust i { color: var(--mint); font-size: 1.05rem; }

/* -------------------------------------------- hero visual: the app window -- */
/* Drawn in CSS rather than screenshotted: it stays sharp on every display,
   follows the theme, and never goes stale when a screen is redesigned. */
.window {
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface-solid); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: perspective(1600px) rotateY(-7deg) rotateX(2.5deg);
    transition: transform .7s var(--ease);
}
.window:hover { transform: perspective(1600px) rotateY(-2deg) rotateX(0deg); }
@media (max-width: 1000px) { .window, .window:hover { transform: none; } }
:root[data-theme="light"] .window { background: #ffffff; }

.win-bar {
    display: flex; align-items: center; gap: .45rem; padding: .7rem .95rem;
    background: var(--bg-3); border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .win-bar { background: var(--bg-2); }
.win-bar .d { width: 10px; height: 10px; border-radius: 50%; }
.win-bar .d:nth-child(1) { background: #ff5f57; }
.win-bar .d:nth-child(2) { background: #febc2e; }
.win-bar .d:nth-child(3) { background: #28c840; }
.win-url {
    margin-left: .8rem; flex: 1; text-align: center;
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3);
}

.win-body { display: grid; grid-template-columns: 128px 1fr; min-height: 330px; }
.win-side { background: var(--bg-2); border-right: 1px solid var(--border); padding: .9rem .7rem; }
.win-side .s-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .5rem; border-radius: 7px; font-size: .72rem; color: var(--ink-3);
}
.win-side .s-item i { font-size: .82rem; }
.win-side .s-item.on { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-light); font-weight: 600; }
:root[data-theme="light"] .win-side .s-item.on { color: var(--brand-dark); }

.win-main { padding: 1.05rem 1.1rem; display: grid; gap: .85rem; align-content: start; }
.win-h { display: flex; align-items: center; justify-content: space-between; }
.win-h b { font-family: var(--font-head); font-size: .95rem; }
.win-h .chip { font-size: .64rem; padding: .2rem .55rem; border-radius: var(--r-full); background: var(--grad-brand); color: #fff; font-weight: 700; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: .6rem .7rem; }
.kpi .k-l { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.kpi .k-v { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin-top: .15rem; }
.kpi .k-d { font-size: .6rem; margin-top: .1rem; color: var(--mint); }

.chartbox { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: .75rem .8rem .6rem; }
.chartbox .c-t { font-size: .66rem; color: var(--ink-3); margin-bottom: .55rem; }
.bars { display: flex; align-items: flex-end; gap: .42rem; height: 74px; }
.bars i {
    flex: 1; border-radius: 4px 4px 2px 2px; background: var(--grad-brand);
    opacity: .85; transform-origin: bottom; animation: growBar .9s var(--ease) both;
}
.bars i:nth-child(1) { height: 42%; animation-delay: .05s; }
.bars i:nth-child(2) { height: 66%; animation-delay: .11s; }
.bars i:nth-child(3) { height: 34%; animation-delay: .17s; }
.bars i:nth-child(4) { height: 82%; animation-delay: .23s; }
.bars i:nth-child(5) { height: 58%; animation-delay: .29s; }
.bars i:nth-child(6) { height: 95%; animation-delay: .35s; }
.bars i:nth-child(7) { height: 71%; animation-delay: .41s; }
@keyframes growBar { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .85; } }

.rows { display: grid; gap: .34rem; }
.row-l { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; font-size: .68rem; color: var(--ink-2); }
.row-l span:first-child { display: flex; align-items: center; gap: .42rem; }
.row-l .av { width: 17px; height: 17px; border-radius: 50%; background: var(--grad-warm); flex-shrink: 0; }
.row-l .av.b { background: var(--grad-mint); }
.row-l .av.c { background: var(--grad-brand); }
.badge-ok { color: var(--mint); font-weight: 600; }
.badge-wait { color: var(--amber); font-weight: 600; }

/* floating proof chips beside the window */
.float-chip {
    position: absolute; display: flex; align-items: center; gap: .55rem;
    padding: .6rem .9rem; border-radius: var(--r); font-size: .78rem; font-weight: 600;
    background: var(--surface-solid); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow); z-index: 3;
    animation: bob 5.5s ease-in-out infinite;
}
:root[data-theme="light"] .float-chip { background: #fff; }
.float-chip i { font-size: 1rem; }
.chip-a { top: -18px; left: -40px; animation-delay: -.4s; }
.chip-a i { color: var(--mint); }
.chip-b { bottom: -22px; right: -16px; animation-delay: -2.6s; }
.chip-b i { color: var(--brand-light); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1000px) { .float-chip { display: none; } }
.hero-visual { position: relative; }

/* --------------------------------------------------------- module marquee -- */
.marquee { overflow: hidden; padding-block: 1.6rem; border-block: 1px solid var(--border); background: var(--bg-2); }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    display: flex; align-items: center; gap: .5rem;
    font-size: .9rem; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.marquee-track i { color: var(--brand-light); font-size: 1.05rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ----------------------------------------------------------------- split -- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.8rem); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: center; }
.split.reverse > *:first-child { order: 2; }
@media (max-width: 800px) { .split.reverse > *:first-child { order: 0; } }

/* ------------------------------------------------------------ pain / gain -- */
.versus { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.versus-col { border-radius: var(--r-lg); padding: 1.8rem; border: 1px solid var(--border); }
.versus-col.bad { background: color-mix(in srgb, var(--rose) 7%, var(--surface)); border-color: color-mix(in srgb, var(--rose) 26%, transparent); }
.versus-col.good { background: color-mix(in srgb, var(--mint) 7%, var(--surface)); border-color: color-mix(in srgb, var(--mint) 26%, transparent); }
.versus-col h4 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.15rem; font-size: 1.02rem; }
.versus-col.bad h4 i { color: var(--rose); }
.versus-col.good h4 i { color: var(--mint); }
.versus-col ul { list-style: none; padding: 0; display: grid; gap: .8rem; }
.versus-col li { display: flex; gap: .7rem; font-size: .94rem; color: var(--ink-2); }
.versus-col li i { margin-top: .2rem; flex-shrink: 0; font-size: .95rem; }
.versus-col.bad li i { color: var(--rose); opacity: .8; }
.versus-col.good li i { color: var(--mint); }

/* ----------------------------------------------------------------- steps -- */
.steps { counter-reset: s; display: grid; gap: 1.3rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: start; }
.step-n {
    counter-increment: s; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: var(--font-head); font-weight: 700; color: var(--brand-light);
}
.step-n::before { content: counter(s); }
:root[data-theme="light"] .step-n { color: var(--brand-dark); }
.step h4 { margin-bottom: .3rem; }
.step p { font-size: .94rem; }

/* --------------------------------------------------------------- compare -- */
.table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--surface); }
table.cmp th, table.cmp td { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .93rem; }
table.cmp thead th { font-family: var(--font-head); font-size: .86rem; color: var(--ink); background: var(--surface-2); white-space: nowrap; }
table.cmp thead th.hi { color: var(--brand-light); }
:root[data-theme="light"] table.cmp thead th.hi { color: var(--brand-dark); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td:first-child { color: var(--ink); font-weight: 500; }
table.cmp td { color: var(--ink-2); }
table.cmp td.yes { color: var(--mint); font-weight: 600; }
table.cmp td.no { color: var(--ink-3); }

/* ------------------------------------------------------------------- faq -- */
.faq { display: grid; gap: .75rem; }
.faq details {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 1.1rem 1.3rem; transition: border-color .25s, background .25s;
}
.faq details[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq summary {
    cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--ink-3); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: .85rem; font-size: .95rem; }

/* -------------------------------------------------------------- cta band -- */
.cta {
    position: relative; overflow: hidden; text-align: center;
    border-radius: var(--r-xl); padding: clamp(2.8rem, 1.6rem + 4vw, 5rem) 1.8rem;
    background: var(--bg-3); border: 1px solid var(--border-strong);
}
:root[data-theme="light"] .cta { background: var(--bg-2); }
.cta .glow-blob { width: 480px; height: 480px; top: -180px; left: 50%; margin-left: -240px; background: rgba(108, 99, 255, .34); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 1rem; }
.cta .lead { max-width: 42rem; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 2rem; }

/* ------------------------------------------------------- small screens -- */
/* The mockup is decoration, not information: below tablet width it drops its
   sidebar and tightens up rather than being clipped by the page. */
@media (max-width: 620px) {
    .hero-badge { font-size: .78rem; padding: .35rem .45rem .35rem .8rem; flex-wrap: wrap; row-gap: .3rem; }
    .hero-badge .tag { white-space: nowrap; }

    .win-body { grid-template-columns: 1fr; min-height: 0; }
    .win-side { display: none; }
    .win-url { display: none; }
    .win-main { padding: .85rem .9rem; }
    .kpi .k-v { font-size: .92rem; }
    .row-l { font-size: .64rem; }
    .bars { height: 58px; }

    .hero .btn-row .btn { width: 100%; }
    .hero-trust { gap: .8rem; flex-direction: column; }
    .versus-col, .cta { padding-inline: 1.25rem; }
}