/* =====================================================================
   PROKYONZ — design system
   Standalone. Replaces Bootstrap 3 + the old template stylesheets.
   ---------------------------------------------------------------------
    1  Reset
    2  Tokens
    3  Typography
    4  Layout
    5  Buttons
    6  Icons
    7  Header + mobile drawer
    8  Hero
    9  Section furniture
   10  Cards
   11  Lists / steps / journey
   12  Tabs + accordion
   13  Tables
   14  Pricing
   15  Forms
   16  Marquee + logos
   17  Footer
   18  Floating UI
   19  Product visuals (3D + app mock)
   20  Motion
   ===================================================================== */

/* ------------------------------- 1 Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------ 2 Tokens ------------------------------ */
:root {
    /* ------------------------------------------------------------------
       Palette derived from the logo (img/logo/logo.png):
       41% of its opaque pixels are black, 28% are azure #0078B4.
       Everything below is built from that azure plus a blue-tinted
       neutral ramp, so nothing on the page is an arbitrary colour.
       ------------------------------------------------------------------ */

    /* ink — blue-tinted near-blacks, matching the logo's black */
    --ink-900: #08111A;
    --ink-850: #0B1724;
    --ink-800: #0F1E2E;
    --ink-700: #17293C;
    --ink-600: #21374E;

    /* paper */
    --paper:   #FFFFFF;
    --paper-2: #F5F8FA;
    --paper-3: #E8EEF3;

    /* text */
    --tx-strong: #0C1620;
    --tx-body:   #4B5B6B;
    --tx-muted:  #637482;
    --tx-invert:       #FFFFFF;
    --tx-invert-body:  rgba(255,255,255,.70);
    --tx-invert-muted: rgba(255,255,255,.48);

    /* lines */
    --line:      #E1E8EE;
    --line-soft: #EDF2F6;
    --line-dark: rgba(255,255,255,.11);

    /* brand — the logo azure */
    --brand:      #0078B4;
    --brand-2:    #009BD6;
    --brand-deep: #005C8A;
    --brand-soft: rgba(0,120,180,.10);

    /* accent — teal, an analogous partner to the logo azure, used to
       separate the Inventory Sync identity from the VMS identity */
    --accent:      #0D837D;
    --accent-2:    #15A599;
    --accent-deep: #0A6E69;
    --accent-soft: rgba(14,140,134,.10);

    --ok:   #0B8159;
    --live: #E5484D;

    --g-brand:  linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    --g-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

    --r-xs: 6px;
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(12,22,32,.04), 0 6px 16px rgba(12,22,32,.06);
    --sh-2: 0 2px 6px rgba(12,22,32,.05), 0 16px 36px rgba(12,22,32,.09);
    --sh-3: 0 10px 22px rgba(12,22,32,.08), 0 36px 72px rgba(12,22,32,.15);

    --wrap:    1200px;
    --gutter:  clamp(20px, 5vw, 40px);
    --sec-y:   clamp(64px, 8vw, 116px);
    --ease:    cubic-bezier(.22,.8,.3,1);
    --header-h: 84px;
}

/* --------------------------- 3 Typography ---------------------------- */
/* One family — Inter — across the whole site, with hierarchy carried by
   weight, size and tracking rather than by mixing typefaces. JetBrains Mono
   is reserved for genuinely machine-readable strings (Tracking IDs, SKUs).
   Sizes are a restrained 1.22 modular scale: readable at business density,
   not billboard-sized. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--tx-body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: 'cv11' 1, 'ss01' 1, 'calt' 1;
}

h1, h2, h3, h4, .display {
    font-family: inherit;
    color: var(--tx-strong);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.021em;
    text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.0rem,  1.55rem + 2.0vw,  3.05rem); line-height: 1.13; letter-spacing: -.026em; }
h2, .h2 { font-size: clamp(1.6rem,  1.35rem + 1.15vw, 2.25rem); line-height: 1.19; letter-spacing: -.023em; }
h3, .h3 { font-size: clamp(1.24rem, 1.13rem + .55vw,  1.6rem);  font-weight: 650; }
h4, .h4 { font-size: clamp(1.0rem,  .97rem + .16vw,   1.125rem); font-weight: 650; letter-spacing: -.012em; }

/* the reset zeroes all margins — restore a default rhythm here. Components
   that need tighter spacing override these (higher specificity). */
h1, h2, h3 { margin-bottom: .55em; }
h4 { margin-bottom: .5em; }
p { text-wrap: pretty; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
ul + p, p + ul { margin-top: 1rem; }
.lead { font-size: clamp(1.02rem, .98rem + .26vw, 1.15rem); line-height: 1.62; color: var(--tx-body); }
.small { font-size: 14px; }
.tiny  { font-size: 12.5px; }
.muted { color: var(--tx-muted); }
strong, b { font-weight: 600; color: var(--tx-strong); }

.mono {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-variant-ligatures: none;
}

/* gradient headline word */
.grad {
    background: var(--g-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.grad-v { background: var(--g-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- inverted (dark section) text ---- */
.on-dark { color: var(--tx-invert-body); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--tx-invert); }
.on-dark strong, .on-dark b { color: var(--tx-invert); }
.on-dark .muted { color: var(--tx-invert-muted); }

/* ------------------------------ 4 Layout ----------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(44px, 6vw, 80px); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--ink-900); color: var(--tx-invert-body); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--tx-invert); }

/* aurora + grid texture for dark surfaces */
.aurora { position: relative; overflow: hidden; isolation: isolate; }
.aurora::before {
    content: "";
    position: absolute; inset: -20% -10% auto -10%; height: 130%;
    background:
        radial-gradient(48rem 26rem at 78% 6%,  rgba(0,120,180,.34), transparent 62%),
        radial-gradient(42rem 24rem at 12% 22%, rgba(23,179,166,.20), transparent 62%),
        radial-gradient(38rem 22rem at 52% 96%, rgba(0,163,224,.16), transparent 64%);
    pointer-events: none; z-index: -2;
}
.aurora::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 34%, #000 25%, transparent 76%);
    mask-image: radial-gradient(ellipse 74% 68% at 50% 34%, #000 25%, transparent 76%);
    pointer-events: none; z-index: -1;
}

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }
/* centres a short final row (e.g. 5 pricing cards) */
.flexgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.4vw, 28px); }
.flexgrid > * { flex: 1 1 290px; max-width: 380px; }

.split { display: grid; gap: clamp(34px, 5vw, 68px); align-items: center; }
@media (min-width: 940px) {
    .split { grid-template-columns: 1.08fr .92fr; }
    .split--rev > *:first-child { order: 2; }
    .split--even { grid-template-columns: 1fr 1fr; }
}

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.mt-l { margin-top: clamp(28px, 4vw, 46px); }
.mt-s { margin-top: 16px; }

/* Skip link — keyboard users reach content without tabbing the whole header.
   Off-screen until focused. */
.skip {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    background: var(--brand); color: #fff;
    padding: 10px 18px; border-radius: var(--r-sm);
    font-size: 14px; font-weight: 600;
    transition: top .18s var(--ease);
}
.skip:focus { top: 12px; }

/* ----------------------------- 5 Buttons ----------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 14px 26px;
    border-radius: var(--r-pill);
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: -.006em;
    line-height: 1.1;
    border: 1.5px solid transparent;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease),
                background .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; }

.btn--brand  { background: var(--brand); color: #FFFFFF; box-shadow: 0 10px 26px rgba(0,120,180,.34); }
.btn--brand:hover  { background: var(--brand-deep); box-shadow: 0 16px 36px rgba(0,120,180,.44); color: #FFFFFF; }

.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(14,140,134,.36); }
.btn--accent:hover { background: var(--accent-deep); box-shadow: 0 16px 36px rgba(14,140,134,.46); color: #fff; }

.btn--dark   { background: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-700); color: #fff; }

.btn--line   { border-color: var(--line); color: var(--tx-strong); background: var(--paper); }
.btn--line:hover { border-color: var(--tx-strong); background: var(--paper); }

.btn--glass  { border-color: rgba(255,255,255,.20); color: #fff; background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); color: #fff; }

.btn--wa { background: #25D366; color: #04240F; box-shadow: 0 10px 26px rgba(37,211,102,.32); }
.btn--wa:hover { background: #1FBE5B; color: #04240F; }

.btn--sm { min-height: 42px; padding: 10px 20px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* text link with arrow */
.tlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 15px; color: var(--brand);
}
.tlink .icon { width: 17px; height: 17px; transition: transform .22s var(--ease); }
.tlink:hover .icon { transform: translateX(4px); }
.tlink--accent { color: var(--accent); }

/* ------------------------------ 6 Icons ------------------------------ */
.icon { width: 22px; height: 22px; flex: none; stroke-width: 1.7; }
.iconbox {
    width: 52px; height: 52px; border-radius: 15px;
    display: grid; place-items: center;
    margin-bottom: 18px;
}
.iconbox .icon { width: 24px; height: 24px; }
.iconbox--brand  { background: var(--g-brand);  color: #FFFFFF; box-shadow: 0 10px 22px rgba(0,120,180,.28); }
.iconbox--accent { background: var(--g-accent); color: #fff;    box-shadow: 0 10px 22px rgba(14,140,134,.30); }
.iconbox--soft   { background: var(--paper-3);  color: var(--tx-strong); }
.iconbox--dark   { background: rgba(255,255,255,.07); color: #fff; border: 1px solid var(--line-dark); }

/* eyebrow chip */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .085em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--r-pill);
    margin-bottom: 18px;
    background: var(--brand-soft); color: var(--brand-deep);
}
.eyebrow .icon { width: 14px; height: 14px; }
.eyebrow--accent { background: var(--accent-soft); color: var(--accent-deep); }
.eyebrow--ok     { background: rgba(34,197,94,.12); color: #0A7D57; }
.eyebrow--glass  { background: rgba(255,255,255,.09); color: rgba(255,255,255,.85); border: 1px solid var(--line-dark); }

/* small pill chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 500;
    background: var(--paper); border: 1px solid var(--line);
    color: var(--tx-strong); box-shadow: var(--sh-1);
}
.chip .icon { width: 16px; height: 16px; }
.chip--v .icon { color: var(--accent); }
.chip--b .icon { color: var(--brand); }
.chip--glass {
    background: rgba(255,255,255,.07); border-color: var(--line-dark);
    color: rgba(255,255,255,.9); box-shadow: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chip--glass .icon { color: var(--brand-2); }
.chip--glass.chip--v .icon { color: var(--accent-2); }

.tag-soon {
    display: inline-block; font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 500; letter-spacing: .12em;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--paper-3); color: #5D6D7A;
    margin-left: 8px; vertical-align: middle;
}

/* --------------------- 7 Header + mobile drawer ---------------------- */
.hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
}
.hdr__in {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 44px; width: auto; }
.hdr__nav { display: none; align-items: center; gap: 4px; }
.hdr__link {
    padding: 10px 15px; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 500; color: var(--tx-strong);
    transition: color .2s ease, background .2s ease;
}
.hdr__link:hover { color: var(--brand-deep); background: var(--brand-soft); }
.hdr__link.is-current { color: var(--brand-deep); }
.hdr__cta { display: none; }
.hdr__burger {
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--tx-strong);
}

/* over a dark hero the header starts transparent + light-on-dark */
.hdr--over { background: transparent; }
.hdr--over .hdr__link { color: rgba(255,255,255,.82); }
.hdr--over .hdr__link:hover { color: #fff; background: rgba(255,255,255,.10); }
.hdr--over .hdr__burger { background: rgba(255,255,255,.08); border-color: var(--line-dark); color: #fff; }

/* scrolled state — always light + solid */
.hdr.is-stuck {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 26px rgba(11,15,26,.07);
}
.hdr.is-stuck .hdr__link { color: var(--tx-strong); }
.hdr.is-stuck .hdr__link:hover { color: var(--brand-deep); background: var(--brand-soft); }
.hdr.is-stuck .hdr__burger { background: var(--paper); border-color: var(--line); color: var(--tx-strong); }

@media (min-width: 900px) {
    .hdr__nav { display: flex; }
    .hdr__cta { display: inline-flex; }
    .hdr__burger { display: none; }
}

/* drawer */
.drawer {
    position: fixed; inset: 0; z-index: 200;
    background: var(--ink-900);
    display: grid; grid-template-rows: var(--header-h) 1fr;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s;
}
.drawer.is-open { transform: none; visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 36px; }
.drawer__close {
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center;
    border: 1px solid var(--line-dark); background: rgba(255,255,255,.06); color: #fff;
}
.drawer__body { padding-block: 18px 40px; overflow-y: auto; }
.drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 4px;
    font-family: inherit;
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
    color: #fff;
    border-bottom: 1px solid var(--line-dark);
}
.drawer__link .icon { color: var(--tx-invert-muted); width: 20px; height: 20px; }
.drawer__actions { display: grid; gap: 12px; margin-top: 28px; }
.drawer__meta { margin-top: 30px; color: var(--tx-invert-muted); font-size: 14px; }
.drawer__meta a { color: rgba(255,255,255,.8); }
body.no-scroll { overflow: hidden; }

/* ------------------------------- 8 Hero ------------------------------ */
.hero {
    background: var(--ink-900);
    color: var(--tx-invert-body);
    padding-block: calc(var(--header-h) + clamp(48px, 7vw, 92px)) clamp(64px, 8vw, 118px);
}
/* slightly tighter than the global h1 — the hero headline shares its row
   with the product visual, so it has ~560px to work with, not the full page */
.hero h1 { color: #fff; margin-bottom: 20px; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.95rem); }
.hero .lead { color: var(--tx-invert-body); max-width: 44ch; }
.hero .btn-row { margin-top: 30px; }
.hero__note { margin-top: 18px; font-size: 13.5px; color: var(--tx-invert-muted); }
/* The global `strong, b` rule paints bold text --tx-strong (#0C1620), which is
   invisible on the dark hero — and the invisible words still take up space,
   pushing the rest of the line right. Anything bold in here needs an invert colour. */
.hero__note strong, .hero__note b { color: var(--tx-invert-body); }

/* compact hero for inner pages */
.pagehead {
    background: var(--ink-900); color: var(--tx-invert-body);
    padding-block: calc(var(--header-h) + clamp(44px, 6vw, 74px)) clamp(46px, 6vw, 78px);
    text-align: center;
}
.pagehead h1 { color: #fff; margin-bottom: 14px; }
.pagehead p { max-width: 60ch; margin-inline: auto; }
.crumb { display: flex; justify-content: center; gap: 8px; font-size: 13px; color: var(--tx-invert-muted); margin-top: 18px; }
.crumb a:hover { color: #fff; }

/* --------------------- 9 Section furniture --------------------------- */
.head { max-width: 760px; margin-inline: auto; margin-bottom: clamp(34px, 4.6vw, 58px); text-align: center; }
.head--left { margin-inline: 0; text-align: left; }
.head h2 { margin-bottom: 14px; }
.head p { font-size: clamp(1rem, .96rem + .28vw, 1.12rem); }

.rule { height: 1px; background: var(--line); border: 0; }
.rule--dark { background: var(--line-dark); }

/* ------------------------------ 10 Cards ----------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(24px, 2.7vw, 32px);
    box-shadow: var(--sh-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
    height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.card--b:hover { border-color: rgba(0,120,180,.42); }
.card--v:hover { border-color: rgba(124,92,255,.42); }
.card h4 { margin-bottom: 10px; }
.card p { font-size: 14.8px; }
.card--flat:hover { transform: none; box-shadow: var(--sh-1); }

/* card on dark */
.card--glass {
    background: rgba(255,255,255,.04);
    border-color: var(--line-dark);
    box-shadow: none;
    color: var(--tx-invert-body);
}
.card--glass h4, .card--glass h3, .card--glass strong, .card--glass b { color: #fff; }
.card--glass .muted, .card--glass .tiny { color: var(--tx-invert-muted); }
.card--glass:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); box-shadow: none; }
.app--dark strong, .app--dark b { color: #fff; }
.app--dark .muted { color: var(--tx-invert-muted); }
.app--dark { color: var(--tx-invert-body); }

/* highlighted product card with a gradient top edge */
.card--top { position: relative; overflow: hidden; }
.card--top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.card--top.card--b::before { background: var(--g-brand); }
.card--top.card--v::before { background: var(--g-accent); }

.trial {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 600;
    margin: 6px 0 20px;
}
.trial .icon { width: 17px; height: 17px; margin-top: 2px; }
.trial--b { background: var(--brand-soft);  color: var(--brand-deep); }
.trial--a { background: var(--accent-soft); color: var(--accent-deep); }

.card .chips {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; align-items: stretch;
}
/* Explicit 2-col grid, not flex-wrap: pairing must not depend on text length,
   or adding one word to the copy silently drops each chip onto its own row. */
.chip--cap { padding: 7px 12px; gap: 9px; align-items: center; line-height: 1.25; }
.chip--cap .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.chip--cap .chip__tx { display: flex; flex-direction: column; min-width: 0; }
.chip--cap b { font-size: 12px; font-weight: 600; color: var(--tx-strong); }
.chip--cap em {
    font-style: normal; font-size: 10px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase; color: var(--tx-muted);
}
@media (max-width: 560px) { .card .chips { grid-template-columns: minmax(0, 1fr); } }

/* ------------------- 11 Lists / steps / journey ---------------------- */
.ticks li {
    position: relative; padding: 10px 0 10px 30px;
    font-size: 14.8px; border-bottom: 1px solid var(--line-soft);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
    content: ""; position: absolute; left: 0; top: 16px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--brand-soft);
}
.ticks li::after {
    content: ""; position: absolute; left: 5px; top: 21px;
    width: 6px; height: 3px;
    border-left: 1.8px solid var(--brand); border-bottom: 1.8px solid var(--brand);
    transform: rotate(-45deg);
}
.ticks--a li::before { background: var(--accent-soft); }
.ticks--a li::after  { border-color: var(--accent); }
.on-dark .ticks li { border-bottom-color: var(--line-dark); }

.steps { display: grid; gap: clamp(24px, 3vw, 34px); }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.steps--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.step { text-align: center; }
.step__n {
    width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center; margin: 0 auto 16px;
    font-family: inherit; font-size: 20px; font-weight: 700;
    transition: transform .26s var(--ease);
}
.step:hover .step__n { transform: scale(1.09); }
.steps--b .step__n { background: var(--brand);  color: #FFFFFF; box-shadow: 0 10px 24px rgba(0,120,180,.30); }
.steps--a .step__n { background: var(--accent); color: #fff;    box-shadow: 0 10px 24px rgba(14,140,134,.32); }
.step__n--done { background: linear-gradient(135deg,var(--ok),#34D6A8) !important; color: #FFFFFF !important; box-shadow: 0 10px 24px rgba(34,197,94,.30) !important; }
.step h4 { margin-bottom: 8px; }
.step p { font-size: 13.8px; }

.journey { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
.jnode {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 20px 16px; text-align: center;
    position: relative; box-shadow: var(--sh-1);
}
.jnode .icon { width: 22px; height: 22px; margin: 0 auto 12px; }
.jnode strong { display: block; font-size: 14px; margin-bottom: 4px; }
.jnode span { font-size: 12.5px; color: var(--tx-muted); }
.jnode--f .icon { color: var(--accent); }
.jnode--r .icon { color: var(--brand); }
.jnode--ok .icon { color: var(--ok); }
.jnode--rec { border-color: rgba(229,72,77,.38); }
.jnode--rec::after {
    content: "REC"; position: absolute; top: 10px; right: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em;
    color: var(--live);
}

/* stat strip */
.stats { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.stat { text-align: center; }
.stat strong { display: block; font-variant-numeric: tabular-nums; font-size: clamp(1.6rem,1.2rem+1.4vw,2.2rem); font-weight: 700; line-height: 1.2; }
.stat span { font-size: 13.5px; color: var(--tx-muted); }
.on-dark .stat strong { color: #fff; }
.on-dark .stat span { color: var(--tx-invert-muted); }

/* --------------------- 12 Tabs + accordion --------------------------- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(30px, 4vw, 46px); }
.tab {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 50px; padding: 13px 24px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--line); background: var(--paper);
    font-size: 15px; font-weight: 600; color: var(--tx-muted);
    transition: all .26s var(--ease);
}
.tab:hover { color: var(--tx-strong); border-color: #CFD5E4; }
.tab.is-active[data-tab="vms"] { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 10px 26px rgba(14,140,134,.32); }
.tab.is-active[data-tab="inv"] { background: var(--brand);  border-color: transparent; color: #FFFFFF; box-shadow: 0 10px 26px rgba(0,120,180,.32); }
.panel { display: none; }
.panel.is-active { display: block; animation: fadeUp .4s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.acc {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.acc.is-open { border-color: rgba(255,122,26,.4); box-shadow: var(--sh-1); }
.acc--v.is-open { border-color: rgba(124,92,255,.42); }
.acc__q {
    width: 100%; min-height: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    text-align: left; padding: 17px 20px;
    font-size: 15px; font-weight: 600; color: var(--tx-strong);
}
.acc__q .icon { width: 18px; height: 18px; color: var(--tx-muted); transition: transform .3s var(--ease), color .25s ease; }
.acc.is-open .acc__q .icon { transform: rotate(180deg); color: var(--brand); }
.acc--v.is-open .acc__q .icon { color: var(--accent); }
.acc__a { display: none; padding: 0 20px 20px; }
.acc__a p { font-size: 14.5px; margin: 0; }

/* ----------------------------- 13 Tables ----------------------------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.ctable { min-width: 660px; background: var(--paper); }
.ctable th, .ctable td { padding: 17px 22px; font-size: 14.5px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable thead th { font-family: inherit; font-weight: 600; color: #fff; border-bottom: 0; white-space: nowrap; }
.ctable thead th:first-child { background: var(--ink-900); }
.ctable thead th.th-v { background: var(--accent-deep); }
.ctable thead th.th-b { background: var(--brand-deep); }
.ctable thead .icon { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 7px; }
.ctable tbody th { background: var(--paper-2); font-weight: 600; color: var(--tx-strong); width: 27%; }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.scrollhint { text-align: center; font-size: 12.5px; color: var(--tx-muted); margin-top: 12px; }
@media (min-width: 760px) { .scrollhint { display: none; } }

/* ---------------------------- 14 Pricing ----------------------------- */
.plan { text-align: center; position: relative; }
.plan__name { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-muted); margin-bottom: 14px; }
.plan__price { font-variant-numeric: tabular-nums; font-family: inherit; font-size: clamp(1.85rem,1.5rem+1.4vw,2.4rem); font-weight: 700; color: var(--tx-strong); line-height: 1.1; letter-spacing: -.035em; }
.plan__gst { font-size: 12px; color: var(--tx-muted); margin-bottom: 18px; }
.plan__qty { font-size: 15px; font-weight: 650; padding: 12px 0; border-block: 1px dashed var(--line); margin-bottom: 14px; }
.plan--v .plan__qty { color: var(--accent-deep); }
.plan--b .plan__qty { color: var(--brand-deep); }
.plan__rate { font-size: 14px; margin-bottom: 16px; }
.plan__tag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em;
    padding: 6px 15px; border-radius: var(--r-pill); white-space: nowrap; color: #fff;
}
.plan--v .plan__tag { background: var(--accent-deep); }
.plan--b .plan__tag { background: var(--brand-deep); color: #fff; }
.plan.is-featured { border-width: 2px; }
.plan--v.is-featured { border-color: var(--accent); }
.plan--b.is-featured { border-color: var(--brand); }

/* ----------------------------- 15 Forms ------------------------------ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--tx-strong); margin-bottom: 7px; }
.input, .textarea, select.input {
    width: 100%; min-height: 52px;
    padding: 14px 16px;
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    background: var(--paper); color: var(--tx-strong);
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea { min-height: 150px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #A8AFC0; }
.input:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.formgrid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.formnote { font-size: 13.5px; margin-top: 14px; }
.formnote--ok { color: var(--ok); }
.formnote--err { color: var(--live); }

/* ------------------------ 16 Marquee + logos ------------------------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 56px); }
.logos img { height: 30px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.logos img:hover { opacity: 1; filter: none; }
.logos--dark img {
    opacity: 1; filter: none;
    background: #fff; border-radius: var(--r-sm);
    padding: 9px 14px; box-sizing: content-box;
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.logos--dark img:hover { opacity: 1; filter: none; }

/* ----------------------------- 17 Footer ----------------------------- */
.ftr { background: var(--ink-900); color: var(--tx-invert-body); padding-block: clamp(56px, 7vw, 88px) 0; }
/* Explicit tracks, not auto-fit. Five children at minmax(200px) with a 52px gap
   need 1208px but .wrap caps at 1200 — 8px short, so auto-fit dropped to four
   columns and stranded CONTACT on a row of its own. */
.ftr__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.ftr__brand { grid-column: 1 / -1; }
@media (min-width: 620px) {
    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftr__brand { grid-column: 1 / -1; max-width: 460px; }
}
@media (min-width: 1000px) {
    .ftr__grid {
        grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
        gap: clamp(24px, 2.6vw, 40px); align-items: start;
    }
    .ftr__brand { grid-column: auto; max-width: 300px; }
}
.ftr__logo img { height: 40px; margin-bottom: 18px; }
.ftr h4 {
    color: #fff; font-size: 12px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; margin-bottom: 18px;
}
.ftr__list li { margin-bottom: 11px; }
.ftr__list li:last-child { margin-bottom: 0; }
.ftr__list a, .ftr__contact a { color: var(--tx-invert-body); font-size: 14.8px; transition: color .2s ease; }
.ftr__list a:hover, .ftr__contact a:hover { color: var(--brand-2); }
.ftr__contact p { margin-bottom: 14px; font-size: 14.8px; }
.ftr__contact p:last-child { margin-bottom: 0; }
.ftr__contact span { color: rgba(255,255,255,.45); display: block; font-size: 12.5px; margin-bottom: 1px; }
.ftr__bar {
    margin-top: clamp(22px, 2.4vw, 32px);
    border-top: 1px solid var(--line-dark);
    padding-block: 22px;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
    font-size: 13.5px; color: var(--tx-invert-muted);
}
.ftr__social { display: flex; gap: 10px; }
.ftr__social a {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    border: 1px solid var(--line-dark); color: rgba(255,255,255,.7);
    transition: all .22s ease;
}
.ftr__social a:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.24); }

/* CTA band */
.ctaband {
    background: var(--ink-850);
    border-radius: var(--r-lg);
    padding: clamp(32px, 5vw, 60px);
    display: grid; gap: 26px; align-items: center;
}
@media (min-width: 860px) { .ctaband { grid-template-columns: 1.4fr auto; } }
.ctaband h3 { color: #fff; margin-bottom: 10px; }
.ctaband p { color: var(--tx-invert-body); margin: 0; }
.ctaband a:not(.btn) { color: var(--brand-2); }

/* -------------------------- 18 Floating UI --------------------------- */
.wa-float {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 12px 30px rgba(37,211,102,.42);
    transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float .icon { width: 28px; height: 28px; }

/* ------------------- 19 Product visuals (3D + mock) ------------------ */
.scene {
    position: relative; width: 100%; max-width: 440px; margin-inline: auto;
    aspect-ratio: 1; display: grid; place-items: center;
    perspective: 1100px;
}
.scene::before {
    content: ""; position: absolute; width: 76%; height: 76%; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,120,180,.38), rgba(23,179,166,.18) 52%, transparent 70%);
    filter: blur(10px);
}

/* app window mock */
.app {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden;
    transition: transform .55s var(--ease);
}
.app--tilt { transform: perspective(1500px) rotateY(-10deg) rotateX(3deg); }
.app--tilt:hover { transform: perspective(1500px) rotateY(0) rotateX(0); }
.app--dark { background: var(--ink-800); border-color: var(--line-dark); }
.app__bar { display: flex; align-items: center; gap: 7px; padding: 13px 17px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.app--dark .app__bar { background: var(--ink-700); border-bottom-color: var(--line-dark); }
.app__dot { width: 11px; height: 11px; border-radius: 50%; }
.app__dot:nth-child(1) { background: #FF5F57; }
.app__dot:nth-child(2) { background: #FEBC2E; }
.app__dot:nth-child(3) { background: #28C840; }
.app__title { margin-left: 9px; font-size: 12.5px; font-weight: 600; color: var(--tx-muted); }
.app--dark .app__title { color: var(--tx-invert-muted); }
.app__body { padding: 18px; }

.searchbar {
    display: flex; align-items: center; gap: 11px;
    border: 1.5px solid var(--accent); border-radius: var(--r-sm);
    padding: 12px 15px; margin-bottom: 16px; background: var(--accent-soft);
}
.searchbar .icon { width: 17px; height: 17px; color: var(--accent); }
.searchbar span { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 500; color: var(--tx-strong); }
.app--dark .searchbar span { color: #fff; }

.clips { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .clips { grid-template-columns: 1fr; } }
.clip { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.app--dark .clip { border-color: var(--line-dark); }
.clip__thumb {
    position: relative; aspect-ratio: 16/10;
    background: linear-gradient(135deg,#242B45 0%,#12162A 100%);
    display: grid; place-items: center; overflow: hidden;
}
.clip__thumb::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(9rem 6rem at 68% 32%, rgba(0,120,180,.36), transparent 70%),
        radial-gradient(10rem 7rem at 24% 74%, rgba(14,140,134,.40), transparent 70%);
}
.clip__play {
    position: relative; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.95); color: var(--ink-900);
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.32);
}
.clip__play .icon { width: 16px; height: 16px; margin-left: 2px; }
.clip__tag {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em;
    padding: 4px 9px; border-radius: var(--r-pill); color: #fff;
}
.clip__tag--f { background: var(--accent); }
.clip__tag--r { background: var(--brand); color: #FFFFFF; }
.clip__time {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    background: rgba(0,0,0,.66); color: #fff; padding: 3px 7px; border-radius: 5px;
}
.clip__meta { padding: 11px 13px; }
.clip__meta strong { display: block; font-size: 13px; }
.clip__meta span { font-size: 11.5px; color: var(--tx-muted); }
.app--dark .clip__meta strong { color: #fff; }

/* parallel stations */
.stations { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
.station { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 15px; text-align: center; box-shadow: var(--sh-1); }
.station__scr {
    aspect-ratio: 4/3; border-radius: 9px; position: relative; overflow: hidden;
    background: linear-gradient(135deg,#222941 0%,#12162A 100%);
    display: grid; place-items: center; margin-bottom: 11px;
}
.station__scr .icon { width: 26px; height: 26px; color: rgba(255,255,255,.32); }
.rec {
    position: absolute; top: 9px; left: 9px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; color: #fff;
}
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,72,77,.6); } 50% { opacity: .5; box-shadow: 0 0 0 7px rgba(229,72,77,0); } }
.station strong { display: block; font-size: 13px; }
.station span { font-size: 11.5px; color: var(--tx-muted); }

/* browser frame for screenshots */
.frame { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden; background: var(--paper); }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 13px 17px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame__bar span:last-child { margin-left: 9px; font-size: 12.5px; font-weight: 600; color: var(--tx-muted); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* =====================================================================
   OneINV hero scene — VMS group, order panel, marketplace group
   ---------------------------------------------------------------------
     * the same facts appeared up to five times (prose, chips, artwork)
     * five DIFFERENT stock numbers contradicted the page's own H2,
       "One stock number, every marketplace"
     * the scene was lopsided: 1 chip left vs label + 5 chips right
     * wires were fixed 34px stubs that never reached the box

   Symmetric: one labelled group per module, flanking the box,
   both wired to it. Left = VMS (teal), right = Inventory Sync (azure) —
   the page's own coding, same as the compare table's .th-v / .th-b.

   Geometry note: .split is 1.08fr / .92fr, so this column caps at ~520px.
   The centre panel is 38% wide, leaving ~190px per side for a chip and
   its wire. Do not widen it without shortening the chip text.
   ===================================================================== */

/* =====================================================================
   OneINV hero scene — VMS group, order panel, marketplace group
   ---------------------------------------------------------------------
   Rev 1 bolted marketplace chips onto a VMS-only scene. Reviewing the
   whole hero rather than the piece I had just touched surfaced four
   problems that a patch could not fix — see F30 in REVIEW.md:

     * the same facts appeared up to five times (prose, chips, artwork)
     * five DIFFERENT stock numbers contradicted the page's own H2,
       "One stock number, every marketplace"
     * the scene was lopsided: 1 chip left vs label + 5 chips right
     * wires were fixed 34px stubs that never reached the box

   Rev 2 is symmetric: one labelled group per module, flanking the box,
   both wired to it. Left = VMS (teal), right = Inventory Sync (azure) —
   the page's own coding, same as the compare table's .th-v / .th-b.

   Geometry note: .split is 1.08fr / .92fr, so this column caps at ~520px.
   The centre panel is 38% wide, leaving ~190px per side for a chip and
   its wire. Do not widen it without shortening the chip text.
   ===================================================================== */

.scene--wired { max-width: 520px; }
/* centre object is .opanel now — see F31 rev 2 */

/* ---- shared chip shell (matches .orbit's existing glass treatment) ---- */
.mkt {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-dark);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-size: 11.5px; font-weight: 550; color: #fff; white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    animation: float 6s ease-in-out infinite;
}
.mkt .icon { width: 14px; height: 14px; }

/* ---- the two module groups ---- */
.sidegrp {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 8px;
    z-index: 2;
}
.sidegrp__label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; margin-bottom: 2px;
}

/* VMS — left, teal, wires running right toward the box */
.sidegrp--rec { left: -5%; align-items: flex-start; }
.sidegrp--rec .sidegrp__label { color: rgba(21, 165, 153, .9); padding-left: 4px; }
.sidegrp--rec .mkt { border-color: rgba(21, 165, 153, .45); }
.sidegrp--rec .mkt .icon { color: var(--accent-2); }
.sidegrp--rec .mkt::after {
    content: ""; position: absolute; left: 100%; top: 50%;
    height: 1px; width: var(--wire, 46px);
    background: repeating-linear-gradient(90deg, var(--accent-2) 0 3px, transparent 3px 9px);
    opacity: .8;
}

/* Inventory Sync — right, azure, wires running left toward the box */
.sidegrp--sync { right: -5%; align-items: flex-end; }
.sidegrp--sync .sidegrp__label { color: rgba(0, 155, 214, .95); padding-right: 4px; }
.sidegrp--sync .mkt { border-color: rgba(0, 155, 214, .42); min-width: 118px; justify-content: space-between; }
.sidegrp--sync .mkt::before {
    content: ""; position: absolute; right: 100%; top: 50%;
    height: 1px; width: var(--wire, 40px);
    background: repeating-linear-gradient(90deg, var(--brand-2) 0 3px, transparent 3px 9px);
    opacity: .75;
}

/* Wire lengths are per-chip so every wire ENDS at the box, not at a
   fixed offset from its own chip. Outer chips sit further from the box,
   so they get longer wires. This is what makes the group read as
   connected rather than as floating dashes. */
.sidegrp--sync .mkt:nth-of-type(2),
.sidegrp--sync .mkt:nth-of-type(6) { --wire: 62px; }
.sidegrp--sync .mkt:nth-of-type(3),
.sidegrp--sync .mkt:nth-of-type(5) { --wire: 50px; }
.sidegrp--sync .mkt:nth-of-type(4) { --wire: 42px; }
.sidegrp--rec  .mkt:nth-of-type(2) { --wire: 58px; }
.sidegrp--rec  .mkt:nth-of-type(3) { --wire: 58px; }

/* staggered float so the two groups don't pulse in lockstep */
.sidegrp--rec  .mkt:nth-of-type(2) { animation-delay: 0s; }
.sidegrp--rec  .mkt:nth-of-type(3) { animation-delay: .9s; }
.sidegrp--sync .mkt:nth-of-type(2) { animation-delay: .3s; }
.sidegrp--sync .mkt:nth-of-type(3) { animation-delay: .9s; }
.sidegrp--sync .mkt:nth-of-type(4) { animation-delay: 1.5s; }
.sidegrp--sync .mkt:nth-of-type(5) { animation-delay: 2.1s; }
.sidegrp--sync .mkt:nth-of-type(6) { animation-delay: 2.7s; }

.mkt img {
    height: 13px; width: auto; flex: 0 0 auto;
    background: #fff; border-radius: 3px;
    padding: 4px 5px; box-sizing: content-box;
}
.mkt__n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; color: var(--brand-2);
    font-variant-numeric: tabular-nums;   /* no width jitter while counting */
}


/* Counters animate once and stop; nothing here loops forever except the
   gentle float, which this block disables. */
@media (prefers-reduced-motion: reduce) {
    .mkt { animation: none; }
}

/* ---- narrow: wires off, groups stack under the box ---- */
@media (max-width: 900px) {
    .scene--wired { max-width: 100%; aspect-ratio: auto; padding-bottom: 8px; }
    .sidegrp {
        position: static; transform: none;
        flex-direction: row; flex-wrap: wrap;
        align-items: center; justify-content: center;
        gap: 7px; margin-bottom: 12px;
    }
    .sidegrp--rec, .sidegrp--sync { left: auto; right: auto; }
    .sidegrp__label { width: 100%; text-align: center; padding: 0; margin-bottom: 0; }
    .sidegrp--rec .mkt::after, .sidegrp--sync .mkt::before { display: none; }
    .sidegrp--sync .mkt { min-width: 0; }
    }

/* =====================================================================
   Hero centre — a panel of the product's own UI
   ---------------------------------------------------------------------
   Rev 1 tried to make the cardboard cube "look like software" by darkening
   its faces. That failed on screen, and the failure is instructive:

     * a 156px cube cannot carry legible UI — the label card ended up dark
       on a dark face with 6px text, i.e. invisible
     * once all six faces shared one dark gradient there was no light
       difference between them, so the 3D read collapsed into a flat
       parallelogram
     * it lost the parcel's identity and gained nothing in its place

   "Software" is not "dark and featureless". Software looks like software
   when you can see its interface. So the centre is now a small panel of
   the product's actual UI, tilted for depth.

   Why this also fixes the hierarchy: the panel shows ONE order, with a
   VMS state (recorded) and an Inventory Sync state (stock) side by side.
   Both modules acting on a single record — which is exactly what
   "one application, two modules" means, shown rather than asserted.

   The spin is gone deliberately. It was decorative, it made any content
   unreadable, and dropping it removes an infinite animation.
   ===================================================================== */

.opanel {
    position: relative; z-index: 2;
    width: 38%; min-width: 186px;
    background: linear-gradient(160deg, var(--ink-700) 0%, var(--ink-850) 100%);
    border: 1px solid rgba(126, 196, 234, .26);
    border-radius: var(--r);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5), 0 0 44px rgba(0, 120, 180, .16);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-13deg) rotateX(4deg);
    transition: transform .55s var(--ease);
}
.opanel:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

.opanel__bar {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.opanel__bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.opanel__bar em {
    margin-left: 6px; font-style: normal;
    font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
    color: rgba(255, 255, 255, .62);
}

.opanel__body { padding: 12px 12px 13px; }
.opanel__id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; color: var(--brand-2);
    letter-spacing: .02em;
}
.opanel__meta {
    font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .38); margin-top: 2px;
}

/* the two module states, side by side on one order */
.opanel__split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 11px; padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.opanel__cell { display: flex; flex-direction: column; gap: 3px; }
.opanel__k { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.opanel__v { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; color: #fff; }
.opanel__v .icon { width: 13px; height: 13px; }
.opanel__cell--vms .opanel__v .icon { color: var(--accent-2); }
.opanel__cell--inv .opanel__v { color: var(--brand-2); font-family: 'JetBrains Mono', monospace; font-weight: 500; }

/* recording dot reuses the site's existing .rec pulse, which the base
   stylesheet already disables under prefers-reduced-motion */
.opanel__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--live); flex: 0 0 auto;
    animation: pulse 1.7s ease-in-out infinite;
}

/* ---- wires now terminate at the panel, not at the old cube ----
   All chips in a group share a min-width so their inner edges align;
   with the arc removed the horizontal gap is identical for every chip
   in a group, so one wire length per side is correct. A few px of
   overlap onto the panel reads as connected — a gap reads as broken. */
.sidegrp--rec .mkt { min-width: 152px; justify-content: flex-start; }
.sidegrp--rec .mkt:nth-of-type(2),
.sidegrp--rec .mkt:nth-of-type(3) { --wire: 48px; }
.sidegrp--sync .mkt:nth-of-type(2),
.sidegrp--sync .mkt:nth-of-type(3),
.sidegrp--sync .mkt:nth-of-type(4),
.sidegrp--sync .mkt:nth-of-type(5),
.sidegrp--sync .mkt:nth-of-type(6) { --wire: 74px; }

@media (prefers-reduced-motion: reduce) {
    .opanel__dot { animation: none; }
    .opanel { transition: none; }
}

@media (max-width: 900px) {
    .opanel { width: 78%; max-width: 300px; transform: none; margin: 4px auto 18px; }
    .sidegrp--rec .mkt { min-width: 0; }
}

/* ------------------------------ 20 Motion ---------------------------- */
/* Hiding is gated on .reveal-on, which JS adds only when it can also
   un-hide. Without JS nothing is ever hidden. */
.reveal-on [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rec::before { animation: none; }
    [data-reveal] { opacity: 1; transform: none; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------- small screens -------------------------- */
@media (max-width: 700px) {
    :root { --header-h: 70px; }
    .btn { width: 100%; }
    .btn-row > .btn { flex: 1 1 100%; }
    .hdr__logo img { height: 32px; }
    .app--tilt { transform: none; }
    .scene { max-width: 300px; }
    .scene--wired { max-width: 100%; }
                    .ctable th, .ctable td { padding: 14px 16px; font-size: 13.5px; }
    .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
}

/* =====================================================================
   Logo swap — the mark is black text + azure, so it vanishes on the dark
   hero. A light variant (generated from the same artwork) is shown while
   the header is transparent over dark, and the original returns once the
   header turns solid white on scroll.
   ===================================================================== */
/* NB: these need .hdr__logo in front — a bare `.hdr__logo-light` loses to
   `.hdr__logo img` and both marks end up rendering side by side. */
.hdr__logo img { height: 44px; width: auto; }
.hdr__logo .hdr__logo-dark  { display: block; }
.hdr__logo .hdr__logo-light { display: none; }
.hdr--over:not(.is-stuck) .hdr__logo .hdr__logo-dark  { display: none; }
.hdr--over:not(.is-stuck) .hdr__logo .hdr__logo-light { display: block; }
@media (max-width: 700px) { .hdr__logo img { height: 36px; } }

/* =====================================================================
   Hero enrichment
   ===================================================================== */

/* soft spotlight sitting behind the headline */
.hero__glow {
    position: absolute; z-index: -1;
    top: -12%; left: -6%;
    width: 62rem; height: 42rem;
    background: radial-gradient(closest-side, rgba(0,155,214,.22), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}

/* very fine grain so the large dark areas do not read as flat fill */
.aurora::after {
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    background-size: 64px 64px, 64px 64px, 140px 140px;
}

/* gradient hairline around the hero product panel */
.hero .app, .pagehead .app { position: relative; }
.hero .app::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    padding: 1px; pointer-events: none;
    background: linear-gradient(145deg, rgba(0,155,214,.75), rgba(21,165,153,.35) 42%, rgba(255,255,255,.06) 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
}
.hero .app { box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 60px rgba(0,120,180,.16); }

/* floating status pill over the panel */
.hero__panel { position: relative; }
.hero__float {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--r-pill);
    background: rgba(12,26,40,.82);
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-size: 12.5px; font-weight: 500; color: #fff; white-space: nowrap;
    box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.hero__float .icon { width: 15px; height: 15px; color: var(--brand-2); }
.hero__float--tl { top: -30px; left: -18px; }
.hero__float--br { bottom: -28px; right: -14px; }
.hero__float--br .icon { color: #34D6A8; }

/* trust strip closing the hero */
.trustbar {
    margin-top: clamp(38px, 5vw, 62px);
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid var(--line-dark);
}
.trustbar__label {
    font-size: 13.5px; font-weight: 500;
    color: var(--tx-invert-muted); margin-bottom: 18px;
}
/* Real marketplace logos, not silhouettes. They are dark-ink artwork drawn for
   white backgrounds, so on the dark hero each one sits on its own light tile —
   the same reason the Supported-platforms cards on oneinv.html can show them
   in colour. Without the tile, Amazon / Ajio / Nykaa / Myntra read as black on
   black. */
.trustbar .logos { gap: clamp(14px, 2.4vw, 26px); }
.trustbar .logos img {
    height: 24px; width: auto; opacity: 1; filter: none;
    background: #fff; border-radius: var(--r-sm);
    padding: 9px 14px; box-sizing: content-box;
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.trustbar .logos img:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.36); }
.trustbar .logos { justify-content: flex-start; gap: clamp(20px, 3.4vw, 44px); }

/* metric row */
.metrics { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 54px); margin-top: 30px; }
.metric strong {
    display: block; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.metric span { font-size: 13px; color: var(--tx-invert-muted); }

@media (max-width: 700px) {
    /* decorative only, and there is no room for them beside a full-width
       panel: they overlap the title bar and clip at the right edge */
    .hero__float { display: none; }
    .trustbar .logos img { height: 22px; }
}

/* =====================================================================
   Module rows: OneINV is a single application containing two modules,
   each carrying its own prepaid credit balance. This visual has to make
   that relationship obvious at a glance.
   ===================================================================== */
.modlist { display: grid; gap: 10px; }
.module {
    display: flex; align-items: center; gap: 14px;
    padding: 14px;
    border: 1px solid var(--line-dark);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
}
.module__ico {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center; color: #fff;
}
.module__ico .icon { width: 21px; height: 21px; }
.module__ico--vms { background: var(--g-accent); }
.module__ico--inv { background: var(--g-brand); }
.module__txt { min-width: 0; }
.module__txt strong { display: block; font-size: 14px; color: #fff; line-height: 1.35; }
.module__txt span { font-size: 12.5px; color: var(--tx-invert-muted); }
.module__meta { margin-left: auto; flex: none; text-align: right; }
.module__state {
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    color: var(--tx-invert-muted); white-space: nowrap;
}
.module__state--live { color: #FF8A8A; }
.module__state--ok   { color: #34D6A8; }
.module__bar {
    width: 84px; height: 4px; border-radius: 2px; margin-top: 7px;
    background: rgba(255,255,255,.14); overflow: hidden;
}
.module__bar i { display: block; height: 100%; border-radius: 2px; }
.module__bar i.v { background: var(--accent-2); }
.module__bar i.b { background: var(--brand-2); }
.app__eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tx-invert-muted); margin-bottom: 12px;
}
.app__note {
    margin: 14px 0 0; font-size: 12px; color: var(--tx-invert-muted);
    padding-top: 12px; border-top: 1px solid var(--line-dark);
}
.sidecard {
    display: flex; align-items: center; gap: 13px;
    margin-top: 14px; padding: 14px 16px;
    border: 1px solid var(--line-dark); border-radius: var(--r);
    background: rgba(255,255,255,.03);
}
.sidecard strong { display: block; font-size: 13.5px; color: #fff; }
.sidecard span { font-size: 12.5px; color: var(--tx-invert-muted); }

@media (max-width: 700px) {
    .module { padding: 12px; gap: 11px; }
    .module__bar { width: 62px; }
    .module__state { font-size: 10.5px; }
}

/* =====================================================================
   Isometric hero illustration
   ===================================================================== */
.isoart { width: 100%; max-width: 560px; margin-inline: auto; display: block; overflow: visible; }
.isoart__f1 { animation: isoFloatA 7s ease-in-out infinite; transform-origin: center; }
.isoart__f2 { animation: isoFloatB 8s ease-in-out infinite .6s; transform-origin: center; }
.isoart__link { animation: isoFade 5s ease-in-out infinite; }
@keyframes isoFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes isoFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes isoFade  { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .isoart__f1, .isoart__f2, .isoart__link { animation: none; }
}

/* ---------------------------------------------------------------------
   Hero density. The previous top padding left a large dead band between
   the header and the first line of copy, which pushed the hero past the
   fold on a 768px-tall laptop.
   --------------------------------------------------------------------- */
.hero { padding-block: calc(var(--header-h) + clamp(18px, 2.4vw, 38px)) clamp(40px, 5vw, 72px); }
.hero .btn-row { margin-top: 26px; }
.trustbar { margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(20px, 2.4vw, 28px); }

/* short laptop screens: tighten further so the whole hero is visible */
@media (min-width: 900px) and (max-height: 820px) {
    .hero { padding-block: calc(var(--header-h) + 20px) 40px; }
    .hero h1 { font-size: clamp(1.95rem, 1.2rem + 2.5vw, 2.95rem); margin-bottom: 14px; }
    .hero .lead { font-size: 1rem; }
    .hero .btn-row { margin-top: 20px; }
    .hero .chips { margin-top: 20px !important; }
    .isoart { max-width: 460px; }
    .scene { max-width: 360px; }
    .scene--wired { max-width: 520px; }
    .trustbar { margin-top: 26px; padding-top: 18px; }
    .trustbar .logos img { height: 22px; }
}

/* extra motion for the diorama */
.isoart__f3 { animation: isoFloatA 7.5s ease-in-out infinite 1.2s; transform-origin: center; }
.isoart__f4 { animation: isoFloatB 8.5s ease-in-out infinite 1.8s; transform-origin: center; }
.isoart__cloud { animation: isoFloatB 9s ease-in-out infinite; transform-origin: center; }
.isoart__rec { animation: isoRec 1.8s ease-in-out infinite; }
.isoart__beam { animation: isoBeam 3.6s ease-in-out infinite; }
@keyframes isoRec  { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes isoBeam { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .isoart__f3, .isoart__f4, .isoart__cloud, .isoart__rec, .isoart__beam { animation: none; }
}

/* =====================================================================
   Product marks. OneINV and AutoShopper have their own app-icon logos
   (artwork on a rounded dark tile), so they replace the generic .iconbox
   wherever an actual product is being represented. Modules and features
   keep the stroke icons.
   ===================================================================== */
.prodmark { width: 64px; height: 64px; display: block; margin-bottom: 18px; }
.prodmark--sm { width: 42px; height: 42px; margin-bottom: 0; flex: none; }
.prodmark--lg { width: 68px; height: 68px; }
.prodmark--hero { width: 60px; height: 60px; margin-bottom: 20px; }
@media (max-width: 700px) { .prodmark { width: 54px; height: 54px; } .prodmark--hero { width: 52px; height: 52px; } }

/* =====================================================================
   Inventory Sync mock: a stock figure pushed out to every channel.
   Counterpart to the VMS recordings mock so both modules get equal
   visual weight on the OneINV page.
   ===================================================================== */
.searchbar--b { border-color: var(--brand); background: var(--brand-soft); }
.searchbar--b .icon { color: var(--brand); }
.stockhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.stockhead strong { display: block; font-size: 1.75rem; font-weight: 700; color: var(--tx-strong); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stockhead span { font-size: 12.5px; color: var(--tx-muted); }
.stockpill { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(180,120,0,.12); color: #8A5A00; white-space: nowrap; }
.synclist { display: grid; gap: 8px; }
.synclist li { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.synclist li span { font-weight: 600; color: var(--tx-strong); }
.synclist li em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: var(--tx-body); }
.synclist li b { font-size: 11.5px; font-weight: 600; min-width: 58px; text-align: right; }
.synclist li b.ok  { color: var(--ok); }
.synclist li b.run { color: var(--brand-deep); }

/* divider between the two module bands */
.modrule { height: 1px; border: 0; background: var(--line); margin: clamp(46px, 6vw, 78px) 0; }