/* =====================================================================
   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);

    /* proc — warm third identity, alongside the cool brand (azure) and
       accent (teal), for the Order Processing module */
    --proc:      #B75B12;
    --proc-2:    #DB8A3F;
    --proc-deep: #8C4308;
    --proc-soft: rgba(183,91,18,.12);

    --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%);
    --g-proc:   linear-gradient(135deg, var(--proc) 0%, var(--proc-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(36px, 4.5vw, 60px);
    --ease:    cubic-bezier(.22,.8,.3,1);
    --cube-half: 92px;

    --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--center { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap, 24px); }
.grid--center > * { flex: 1 1 260px; max-width: 360px; }
.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; }

/* ----------------------------- 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); }
.iconbox--proc   { background: var(--g-proc); color: #fff; box-shadow: 0 10px 22px rgba(183,91,18,.30); }

/* 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); }
.eyebrow--proc   { background: var(--proc-soft); color: var(--proc-deep); }

/* 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); }
.chip--o .icon { color: var(--proc); }
.chip--glass.chip--o .icon { color: var(--proc-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;
}
.tag-free {
    display: inline-block; font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600; letter-spacing: .12em;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: rgba(11,129,89,.12); color: var(--ok);
    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); }
/* nav dropdown (Products) */
.hdr__dd { position: relative; }
.hdr__dd > .hdr__link { display: inline-flex; align-items: center; gap: 4px; }
.hdr__caret { width: 14px; height: 14px; }
.hdr__menu { position: absolute; top: 100%; left: 0; min-width: 300px; padding: 8px; margin-top: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; }
.hdr__dd:hover .hdr__menu, .hdr__dd:focus-within .hdr__menu { opacity: 1; visibility: visible; transform: none; }
.hdr__menu a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--tx-strong); }
.hdr__menu a:hover, .hdr__menu a:focus-visible { background: var(--brand-soft); }
.hdr__menu strong { display: block; font-size: 15px; }
.hdr__menu span { display: block; font-size: 13px; color: var(--tx-muted); margin-top: 2px; }
.drawer__sub { padding-left: 28px; font-size: .92em; opacity: .85; }

.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); }

/* home page hero slider: two (or more) .hero sections used as slides,
   shown one at a time, with a shared dark foot bar (trustbar + controls)
   below the slide track */
.hslider__slide { display: none; }
.hslider__slide.is-active { display: block; animation: fadeUp .5s var(--ease) both; }
.hslider__foot { background: var(--ink-900); position: relative; z-index: 1; padding-bottom: clamp(30px, 4vw, 48px); }
.hslider__controls {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: clamp(26px, 3.4vw, 40px);
}
.hslider__arrow {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); color: #fff;
    transition: background .2s ease;
}
.hslider__arrow:hover { background: rgba(255,255,255,.16); }
.hslider__arrow .icon { width: 17px; height: 17px; }
.hslider__dots { display: flex; gap: 9px; }
.hslider__dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0; border: 0;
    background: rgba(255,255,255,.28);
    transition: background .25s ease, transform .25s ease;
}
.hslider__dot.is-active { background: var(--brand-2); transform: scale(1.3); }

/* 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--o:hover { border-color: rgba(183,91,18,.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); }
.card--top.card--o::before { background: var(--g-proc); }

.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); }
.trial--c { background: var(--proc-soft); color: var(--proc-deep); }

/* ------------------- 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); }
.steps--o .step__n { background: var(--proc);   color: #fff;    box-shadow: 0 10px 24px rgba(183,91,18,.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--b .icon { color: var(--brand); }
.jnode--o .icon { color: var(--proc); }
.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--o.is-open { border-color: var(--proc); }
.acc--o.is-open .acc__q .icon { color: var(--proc); }
.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; }

/* -- module & pricing explorer rows (oneinv.html) --
   An .acc row whose always-visible header carries real identity (icon,
   name, pitch, trial, starting price) instead of just a question, so a
   visitor scanning past a collapsed module or plan still sees what it is
   and what it costs. Only the deep walkthrough / full tier grid collapses. */
.modrows { display: flex; flex-direction: column; gap: 18px; }
.modrow { border-radius: var(--r); margin-bottom: 0; transition: box-shadow .25s ease, border-color .25s ease; }
.modrow.is-open { box-shadow: var(--sh-2); }
.modrow--v.is-open { border-color: var(--accent); }
.modrow--b.is-open { border-color: var(--brand); }
.modrow--o.is-open { border-color: var(--proc); }
.modrow__head { min-height: 0; padding: 22px clamp(18px,3vw,28px); align-items: flex-start; text-align: left; flex-wrap: wrap; row-gap: 14px; }
.modrow__id { display: flex; align-items: flex-start; gap: 16px; flex: 1 1 320px; min-width: 0; }
.modrow__id .iconbox { flex: none; width: 48px; height: 48px; margin-bottom: 0; }
.modrow__copy h3 { font-size: 1.2rem; margin: 3px 0 5px; }
.modrow__copy p { font-size: 14px; line-height: 1.5; color: var(--tx-body); margin: 0; max-width: 56ch; }
.modrow__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; margin-left: auto; }
.modrow__price { font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--tx-strong); max-width: 220px; text-align: right; }
.modrow__chev { width: 20px; height: 20px; margin-left: 8px; flex: none; align-self: center; }
.modrow__bullets {
    list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px;
    padding: 0 clamp(18px,3vw,28px) 20px calc(48px + 16px + clamp(18px,3vw,28px));
}
.modrow__bullets li { font-size: 13.5px; color: var(--tx-body); display: flex; align-items: center; gap: 7px; }
.modrow__bullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.modrow--v .modrow__bullets li { color: var(--accent-deep); }
.modrow--b .modrow__bullets li { color: var(--brand-deep); }
.modrow--o .modrow__bullets li { color: var(--proc-deep); }
.modrow__more {
    font-size: 13px; font-weight: 600; color: var(--tx-muted);
    display: flex; align-items: center; gap: 6px;
    padding: 0 clamp(18px,3vw,28px) 22px calc(48px + 16px + clamp(18px,3vw,28px));
}
.modrow.is-open .modrow__more { color: var(--tx-strong); }
.modrow__detail.acc__a { padding: 0; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
    .modrow__bullets, .modrow__more { padding-left: clamp(18px,3vw,28px); }
    .modrow__meta { align-items: flex-start; margin-left: 0; }
    .modrow__price { text-align: left; }
}

.platbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.platbadge--live { background: rgba(13,131,58,.12); color: #0D833A; }
.platbadge--partial { background: var(--proc-soft); color: var(--proc-deep); }
.platbadge--soon { background: var(--paper-3); color: var(--tx-muted); }

/* ----------------------------- 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 th.th-o { background: var(--proc-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; }
.platrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.platrow img { height: 18px; width: auto; border-radius: 3px; }
.platrow em { font-style: normal; color: var(--tx-muted); font-size: 13px; margin-left: 2px; }
.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--o .plan__qty { color: var(--proc-deep); }
.plan__rate { font-size: 14px; margin-bottom: 16px; }
.plan__code { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: #B4BCCD; }
.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--o .plan__tag { background: var(--proc-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); }
.plan--o.is-featured { border-color: var(--proc); }

/* ----------------------------- 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: .62; filter: brightness(0) invert(1); }
.logos--dark img:hover { opacity: 1; filter: brightness(0) invert(1); }

/* ----------------------------- 17 Footer ----------------------------- */
.ftr { background: var(--ink-900); color: var(--tx-invert-body); padding-block: clamp(56px, 7vw, 88px) 0; }
.ftr__grid { display: grid; gap: clamp(32px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ftr__brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .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 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: 10px; font-size: 14.8px; }
.ftr__contact span { color: rgba(255,255,255,.45); display: block; font-size: 12.5px; }
.ftr__bar {
    margin-top: clamp(40px, 5vw, 60px);
    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;
    --cube-half: 92px;
}
.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);
}
.cube { position: relative; width: 42%; aspect-ratio: 1; transform-style: preserve-3d; animation: spin 24s linear infinite; }
@keyframes spin { from { transform: rotateX(-16deg) rotateY(0); } to { transform: rotateX(-16deg) rotateY(360deg); } }
.cube__f {
    position: absolute; inset: 0;
    border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
    background: linear-gradient(150deg,#D9A469 0%,#C08B50 48%,#A5713B 100%);
    box-shadow: inset 0 0 70px rgba(0,0,0,.22);
    display: grid; place-items: center;
}
.cube__f::after {
    content: ""; position: absolute; inset: 44% 0 auto 0; height: 12%;
    background: rgba(255,255,255,.26);
}
.cube__f--fr { transform: translateZ(var(--cube-half)); }
.cube__f--bk { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.cube__f--ri { transform: rotateY(90deg)  translateZ(var(--cube-half)); }
.cube__f--le { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube__f--tp { transform: rotateX(90deg)  translateZ(var(--cube-half)); background: linear-gradient(150deg,#E6B67E,#C79459); }
.cube__f--bt { transform: rotateX(-90deg) translateZ(var(--cube-half)); }
.label {
    position: relative; z-index: 2; width: 64%;
    background: #fff; border-radius: 3px; padding: 7px 6px; text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.24);
}
.label span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 7px; font-weight: 500; color: #0B0F1A; line-height: 1.6; }
.label__bars { height: 15px; margin-top: 4px; background: repeating-linear-gradient(90deg,#0B0F1A 0 2px,transparent 2px 4px,#0B0F1A 4px 5px,transparent 5px 8px); }

.orbit {
    position: absolute; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; 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: 12.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;
}
.orbit .icon { width: 15px; height: 15px; }
.orbit--1 { top: 4%;   left: -4%;  animation-delay: 0s;   }
.orbit--2 { top: 40%;  right: -6%; animation-delay: 1.5s; }
.orbit--3 { bottom: 6%; left: 0;   animation-delay: 3s;   }
.orbit--1 .icon { color: var(--accent-2); }
.orbit--2 .icon { color: var(--live); }
.orbit--3 .icon { color: #34D6A8; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 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); }

/* ------------------------------ 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; }
    .cube, .orbit, .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; --cube-half: 58px; }
    .cube { width: 38%; }
    .orbit { font-size: 11.5px; padding: 7px 12px; }
    .orbit--1 { left: -6%; }
    .orbit--2 { right: -8%; }
    .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;
}
.trustbar .logos img { height: 26px; opacity: .62; filter: brightness(0) invert(1); }
.trustbar .logos img:hover { opacity: 1; filter: brightness(0) invert(1); }
.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; --cube-half: 74px; }
    .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); }
.searchbar--o { border-color: var(--proc); background: var(--proc-soft); }
.searchbar--o .icon { color: var(--proc); }
.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); }
.synclist li b.soon { color: var(--tx-muted); }

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


/* =====================================================================
   21  Clarity theme (light)
   Overrides the earlier dark hero / transparent header so every page
   shares one light look, then adds the home-page components (c-*).
   Kept as a single block so the theme can be reviewed or reverted whole.
   ===================================================================== */

/* ---- header: always light ---- */
.hdr--over {
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.hdr--over .hdr__link { color: var(--tx-strong); }
.hdr--over .hdr__link:hover { color: var(--brand-deep); background: var(--brand-soft); }
.hdr--over .hdr__burger { background: var(--paper); border-color: var(--line); color: var(--tx-strong); }
.hdr--over:not(.is-stuck) .hdr__logo .hdr__logo-dark  { display: block; }
.hdr--over:not(.is-stuck) .hdr__logo .hdr__logo-light { display: none; }

/* ---- heroes + page heads: light ---- */
.hero, .pagehead {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8F3FA 100%);
    color: var(--tx-body);
}
.hero.aurora::before, .pagehead.aurora::before {
    background: radial-gradient(46rem 24rem at 82% 0%, rgba(0,120,180,.16), transparent 62%),
                radial-gradient(34rem 20rem at 8% 10%, rgba(13,131,125,.09), transparent 62%);
}
.hero.aurora::after, .pagehead.aurora::after { display: none; }
.hero__glow { display: none; }
.hero h1, .pagehead h1 { color: var(--tx-strong); }
.hero .lead, .pagehead p, .pagehead .lead { color: var(--tx-body); }
.hero__note, .crumb { color: var(--tx-muted); }
.crumb a:hover { color: var(--brand-deep); }
.hero .eyebrow--glass, .pagehead .eyebrow--glass { background: var(--brand-soft); color: var(--brand-deep); border: 0; }
.hero .btn--glass, .pagehead .btn--glass { background: var(--paper); border-color: var(--line); color: var(--tx-strong); box-shadow: none; }
.hero .btn--glass:hover, .pagehead .btn--glass:hover { border-color: var(--tx-strong); background: var(--paper); color: var(--tx-strong); }
.hero .chip--glass { background: var(--paper); border-color: var(--line); color: var(--tx-strong); }
.hero .hero__float { background: var(--paper); border-color: var(--line); color: var(--tx-strong); box-shadow: var(--sh-2); }

.hero .orbit { background: var(--paper); border-color: var(--line); color: var(--tx-strong); box-shadow: var(--sh-2); }
.hero .chip--glass .icon { color: var(--brand); } .hero .chip--glass.chip--v .icon { color: var(--accent); } .hero .chip--glass.chip--o .icon { color: var(--proc); }

/* ---- closing band: brand blue ---- */
.ctaband.aurora { background: linear-gradient(120deg, var(--brand), var(--brand-deep)); border-color: transparent; }
.ctaband.aurora::before, .ctaband.aurora::after { display: none; }
.ctaband p, .ctaband a:not(.btn) { color: rgba(255,255,255,.9); }
.ctaband .btn--brand { background: #fff; color: var(--brand-deep); box-shadow: none; }
.ctaband .btn--brand:hover { background: var(--paper-2); color: var(--brand-deep); }

/* ---- home page components ---- */
.c-hero { padding-block: clamp(110px, 12vw, 150px) clamp(30px, 4vw, 48px); background: radial-gradient(900px 420px at 82% -8%, #D3EAF7, transparent), #fff; }
.c-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.c-hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.1rem); letter-spacing: -.03em; line-height: 1.06; margin-bottom: 20px; }
.c-hero h1 em { font-style: normal; color: var(--brand); }
.c-hero .lead { font-size: 1.15rem; max-width: 36rem; margin-bottom: 28px; }
.c-pill { display: inline-block; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 18px; }
.c-vis { position: relative; min-height: 360px; }
.c-vis__card { position: absolute; width: min(300px, 86%); background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sh-2); display: flex; gap: 14px; align-items: center; }
.c-vis__card img { width: 52px; height: 52px; border-radius: 12px; }
.c-vis__card small { color: var(--tx-muted); display: block; }
.c-vis__card b { color: var(--tx-strong); }
.c-vis__card--1 { top: 6px; left: 0; } .c-vis__card--2 { top: 124px; right: 0; } .c-vis__card--3 { bottom: 6px; left: 36px; }
.c-ok { color: var(--ok); font-weight: 600; font-size: 13px; }
.c-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: clamp(36px, 5vw, 64px); }
.c-paths--2 { grid-template-columns: repeat(2, 1fr); }
.c-path { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; transition: .2s var(--ease); }
.c-path:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,120,180,.14); }
.c-path h3 { font-size: 1.3rem; } .c-path p { font-size: 15px; }
.c-path__go { color: var(--brand); font-weight: 600; margin-top: auto; padding-top: 6px; }
.c-eb { color: var(--brand); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }

.c-one { background: linear-gradient(180deg, #fff, #E8F3FA); border: 1px solid #D3E6F1; border-radius: 30px; padding: clamp(20px, 4vw, 44px); margin-bottom: 24px; }
.c-one__head { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-bottom: 36px; }
.c-one__head > img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 26px rgba(0,120,180,.25); }
.c-one__head h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem); margin: 6px 0 8px; }
.c-one__head p { max-width: 44rem; }
.c-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-mod { background: var(--paper); border: 1px solid #D3E6F1; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-mod__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.c-mod__big { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--brand); line-height: 1.05; }
.c-mod h3 { font-size: 1.2rem; } .c-mod p { font-size: 15.5px; }
.c-list { display: grid; gap: 9px; margin-top: 12px; font-size: 14.5px; color: var(--tx-strong); }
.c-list li { position: relative; padding-left: 24px; }
.c-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.c-free { margin-top: 24px; background: var(--ink-850); color: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 34px); }
.c-free__top { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.c-free h3 { color: #fff; font-size: 1.5rem; }
.c-free__top p { color: rgba(255,255,255,.8); margin-top: 4px; font-size: 15px; }
.c-gift { display: inline-block; background: rgba(108,195,238,.16); color: #9ADBF6; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 12px; }
.c-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.c-tool { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 24px; background: rgba(255,255,255,.05); }
.c-tool .c-eb { color: #6CC3EE; }
.c-tool b { display: block; font-size: 1.15rem; margin: 10px 0 6px; color: #fff; }
.c-tool p { color: rgba(255,255,255,.8); font-size: 15px; }
.c-tool .c-list { color: rgba(255,255,255,.92); } .c-tool .c-list li::before { color: #6CC3EE; }
.c-fr { position: absolute; top: 18px; right: 18px; background: #6CC3EE; color: #06324A; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
.c-bene { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.c-bene div { background: var(--brand-deep); color: #fff; border-radius: 16px; padding: 20px 22px; min-width: 0; }
.c-bene b { color: #fff; display: block; font-size: 1.45rem; letter-spacing: -.02em; } .c-bene span { opacity: .88; font-size: 14px; }
.c-one__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.c-one__cta span { color: var(--tx-muted); font-size: 15px; }
.c-asx { background: var(--ink-850); color: #fff; border-radius: 26px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.c-asx img { width: 64px; height: 64px; border-radius: 14px; } .c-asx h3 { color: #fff; font-size: 1.9rem; margin: 16px 0 8px; } .c-asx p { color: rgba(255,255,255,.82); }
.c-asx .c-list { margin: 0; color: #fff; } .c-asx .c-list li::before { color: #6CC3EE; }
.c-asx .btn { background: #fff; color: var(--ink-850); box-shadow: none; margin-top: 22px; }
.c-mk { margin-top: 40px; } .c-mk p { color: var(--tx-muted); margin-bottom: 14px; }
.c-mk div { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; } .c-mk img { height: 26px; width: auto; }
.c-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: s; }
.c-steps div { position: relative; padding-top: 54px; font-weight: 600; color: var(--tx-strong); }
.c-steps div::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.c-steps div::after { content: ""; position: absolute; top: 20px; left: 50px; right: 0; border-top: 2px dashed #B5D6E8; }
.c-steps div:last-child::after { display: none; }

@media (max-width: 900px) {
    .c-hero__grid, .c-asx { grid-template-columns: 1fr; }
    .c-vis { display: none; }
    .c-paths, .c-paths--2, .c-mods, .c-tools { grid-template-columns: 1fr; }
    .c-one__head { grid-template-columns: 1fr; }
    .c-bene { grid-template-columns: 1fr 1fr; }
    .c-steps { grid-template-columns: 1fr; }
    .c-steps div::after { display: none; }
}
@media (max-width: 560px) {
    .c-bene { grid-template-columns: 1fr; }
    .c-one, .c-free { padding: 18px; }
    .c-free__top .btn { width: 100%; }
}

/* small-screen safety: grid/flex children may shrink, long strings may wrap */
.grid > *, .flexgrid > *, .split > * { min-width: 0; }
.card, .card a, .card strong { overflow-wrap: anywhere; }

.ticks li { break-inside: avoid; }
.ticks li em { font-style: normal; font-size: .9em; }

/* =====================================================================
   22  OneINV product page (o-*)
   Scoped to the rebuilt oneinv.html: hero, sticky section menu, module
   groups, label illustration, free tools, comparison, pricing, FAQ.
   Theme blue only; modules are told apart by structure, not colour.
   ===================================================================== */
.o-page {
    --o-soft: #E8F3FA; --o-soft2: #F3F7FA;
    --o-ok: #14915B; --o-warn: #B26A00; --o-ink: #0E1A2B;
    color: var(--tx-body); background: var(--paper);
}
.o-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.o-page h1, .o-page h2, .o-page h3 { letter-spacing: -.025em; line-height: 1.1; color: var(--tx-strong); }
.o-eb { display: block; color: var(--brand); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.o-eb--light { color: #6CC3EE; }
.o-lead { font-size: 1.1rem; margin: 10px 0 18px; }
.o-fine { font-size: 13.5px; color: var(--tx-muted); margin-top: 10px; }
.o-fine--light { color: rgba(255,255,255,.7); }
.o-note { margin-top: 12px; font-size: 14px; color: var(--tx-muted); }

/* hero */
.o-hero { padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 5vw, 60px); background: radial-gradient(900px 420px at 85% -10%, #D3EAF7, transparent), #fff; }
.o-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.o-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.o-brand img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 26px rgba(0,120,180,.25); }
.o-brand .o-eb { margin: 0; }
.o-hero h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.9rem); margin: 14px 0 18px; }
.o-hero h1 em { font-style: normal; color: var(--brand); }
.o-sub { font-size: 1.15rem; max-width: 34rem; margin-bottom: 26px; }

/* sticky section menu */
.o-sub-nav { position: sticky; top: calc(var(--header-h) - 14px); z-index: 20; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.o-sub-nav .o-in { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; }
.o-sub-nav a { white-space: nowrap; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--tx-muted); display: inline-flex; align-items: center; }
.o-sub-nav a:hover { background: var(--brand-soft); color: var(--brand); }
.o-sub-nav i { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-right: 8px; }

/* sections */
.o-s { padding-block: clamp(48px, 6vw, 76px); scroll-margin-top: 130px; }
.o-s--tight { padding-block: clamp(40px, 5vw, 60px) 8px; }
.o-s--alt { background: var(--o-soft2); }
.o-head { max-width: 720px; margin-bottom: 30px; }
.o-head h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); margin: 6px 0 10px; }
.o-head p { font-size: 1.05rem; }
.o-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.o-split.rev > div:last-child { order: -1; }
.o-split h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); margin: 6px 0 8px; }
.o-list { display: grid; gap: 10px; margin: 0 0 20px; }
.o-list li { position: relative; padding-left: 26px; }
.o-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.o-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; counter-reset: os; }
.o-steps > * { flex: 1 1 200px; max-width: 300px; min-width: 0; }
.o-steps > div { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.o-steps > div::before { counter-increment: os; content: counter(os); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; margin-bottom: 10px; }
.o-steps b { display: block; margin-bottom: 4px; color: var(--tx-strong); }
.o-steps p { font-size: 14.5px; }
.o-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.o-feats > * { flex: 1 1 280px; max-width: 370px; }
.o-f { background: var(--o-soft2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.o-f b { display: block; color: var(--tx-strong); margin-bottom: 6px; }
.o-f p { font-size: 14.5px; }
.o-f i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: var(--o-warn); color: #fff; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; }
.o-f--soon { margin-top: 16px; border-style: dashed; background: transparent; }
.o-logos { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; }
.o-logos img { height: 24px; width: auto; }
.o-plats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.o-plats > * { flex: 1 1 170px; max-width: 200px; }
.o-plat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: center; }
.o-plat img { height: 28px; width: auto; margin: 0 auto 10px; }
.o-plat b { display: block; color: var(--tx-strong); } .o-plat span { font-size: 13px; color: var(--tx-muted); }
.o-two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 34px; align-items: center; }
.o-two h3 { font-size: 1.4rem; margin-bottom: 10px; } .o-two p + p { margin-top: 10px; }
.o-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.o-rec > div { background: var(--o-ink); color: #fff; border-radius: 14px; padding: 16px; position: relative; }
.o-rec i { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--live); }
.o-rec span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.7); display: block; }
.o-rec b { display: block; margin-top: 6px; } .o-rec small { color: rgba(255,255,255,.7); }

/* module groups */
.o-groups { background: var(--o-soft2); padding: 56px 0 24px; }
.o-gin { display: grid; gap: 40px; }
.o-mg { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--sh-2); }
.o-mgb { background: var(--o-soft); border-bottom: 1px solid var(--line); }
.o-mgb .o-in { display: flex; align-items: center; gap: 16px; padding-block: 20px; }
.o-mgi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand); color: #fff; flex: none; box-shadow: 0 8px 18px rgba(0,120,180,.28); }
.o-mgi svg { width: 26px; height: 26px; }
.o-mgb b { display: block; font-size: 1.35rem; letter-spacing: -.02em; color: var(--tx-strong); }
.o-mgb span:not(.o-mgi):not(.o-mgc) { color: var(--tx-muted); font-size: 14.5px; }
.o-mgc { margin-left: auto; background: #fff; border: 1px solid var(--line); color: var(--brand-deep); font-weight: 600; font-size: 12.5px; padding: 6px 14px; border-radius: 99px; white-space: nowrap; }
.o-mg .o-s + .o-s, .o-mg .o-mgb + .o-s { border-top: 0; }
.o-mg .o-s ~ .o-s { border-top: 1px solid var(--line); }
.o-mg .o-s { padding-block: 56px; }
.o-mg .o-steps > div, .o-mg .o-f { background: var(--o-soft2); }

/* illustrative mocks (sample data only) */
.o-mock { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--sh-2); font-size: 14px; }
.o-mh { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.o-mh b { color: var(--tx-strong); } .o-mh span { color: var(--tx-muted); font-size: 13px; }
.o-mbig { display: flex; align-items: center; gap: 16px; background: var(--o-soft); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.o-mbig strong { font-size: 42px; line-height: 1; color: var(--brand); letter-spacing: -.03em; } .o-mbig small { color: var(--tx-muted); }
.o-mr { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--o-soft2); margin-top: 8px; }
.o-mr em { font-style: normal; color: var(--o-ok); font-weight: 600; font-size: 12.5px; } .o-mr em.w { color: var(--o-warn); }
.o-mbtn { margin-top: 14px; background: var(--brand); color: #fff; text-align: center; padding: 12px; border-radius: 12px; font-weight: 600; }
.o-mnote { margin-top: 12px; color: var(--tx-muted); font-size: 12px; }
.o-clip { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--o-soft); margin-bottom: 8px; }
.o-clip b { display: block; color: var(--tx-strong); } .o-clip small { color: var(--tx-muted); }
.o-clip em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--o-ok); } .o-clip em.w { color: var(--o-warn); }
.o-play { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }

/* sample label + annotations */
.o-lblsec { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.o-lblsec h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem); margin: 6px 0 10px; }
.o-pl { display: grid; gap: 16px; margin-top: 18px; } .o-pl li { display: flex; gap: 14px; } .o-pl b { display: block; color: var(--tx-strong); } .o-pl p { font-size: 14.5px; }
.o-pn, .o-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; flex: none; box-shadow: 0 0 0 4px rgba(0,120,180,.22); }
.o-lblwrap { position: relative; max-width: 380px; margin: 0 auto; }
.o-pin { position: absolute; z-index: 3; }
.o-lbl { position: relative; z-index: 1; background: #fff; color: #111; border: 2px solid #222; border-radius: 6px; padding: 16px; font-family: "Courier New", monospace; box-shadow: 0 24px 50px rgba(12,22,32,.18); transform: rotate(-1.2deg); }
.o-bill { position: absolute; left: 34px; top: 30px; width: 94%; height: 100%; background: #fff; border: 2px solid #222; border-radius: 6px; transform: rotate(4deg); padding: 14px; font-family: "Courier New", monospace; color: #111; box-shadow: 0 14px 30px rgba(12,22,32,.12); }
.o-bill b { display: block; font-size: 13px; margin-bottom: 10px; color: #111; } .o-bill i { display: block; height: 6px; background: #ddd; margin-bottom: 8px; border-radius: 3px; } .o-bill span { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: #555; }
.o-lt { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #222; padding-bottom: 8px; } .o-lt b { font-size: 18px; color: #111; } .o-lt span { font-size: 11px; }
.o-bars { display: flex; align-items: stretch; gap: 2px; height: 62px; margin: 12px 0 4px; } .o-bars i { display: block; background: #111; }
.o-awb { display: block; text-align: center; font-size: 11px; letter-spacing: .12em; color: #333; }
.o-lto { margin: 12px 0; padding: 10px; border: 1px dashed #666; } .o-lto small { display: block; font-size: 10px; color: #666; } .o-lto b { display: block; font-size: 15px; color: #111; } .o-lto span { font-size: 12px; }
.o-lrow { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; border-top: 2px solid #222; border-bottom: 2px solid #222; padding: 8px 0; }
.o-lrow .sku { font-weight: 700; background: #FFE680; padding: 0 4px; } .o-lrow .sh { background: #CDEBFF; padding: 0 4px; }
.o-lft { display: flex; justify-content: space-between; font-size: 11px; margin-top: 8px; color: #333; } .o-lft .ck { color: #0B7A3E; font-weight: 700; }
.o-dtl { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.o-dl { columns: 2 320px; column-gap: 40px; }
.o-dl li { break-inside: avoid; padding: 12px 0 12px 28px; position: relative; border-bottom: 1px solid var(--line); }
.o-dl li::before { content: "\2713"; position: absolute; left: 0; top: 12px; color: var(--brand); font-weight: 700; }
.o-dl b { display: block; color: var(--tx-strong); } .o-dl span { color: var(--tx-muted); font-size: 14px; } .o-dl em { font-style: normal; font-size: .9em; }

/* free tools */
.o-free { background: var(--o-ink); color: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 44px); }
.o-free h2, .o-free h3 { color: #fff; } .o-free .o-head p { color: rgba(255,255,255,.8); }
.o-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.o-fcard { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 26px; background: rgba(255,255,255,.05); min-width: 0; }
.o-fcard h3 { margin: 6px 0 8px; } .o-fcard p { color: rgba(255,255,255,.82); margin-bottom: 12px; }
.o-fcard .o-list li::before { color: #6CC3EE; }
.o-fr { position: absolute; top: 20px; right: 20px; background: #6CC3EE; color: #06324A; font-weight: 800; font-size: 11px; letter-spacing: .1em; padding: 4px 10px; border-radius: 99px; }

/* comparison */
.o-tw { overflow-x: auto; }
.o-cmp { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 720px; }
.o-cmp th, .o-cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; }
.o-cmp thead th { background: var(--o-soft); font-size: 15px; color: var(--tx-strong); } .o-cmp tbody th { color: var(--tx-muted); font-weight: 600; width: 150px; }
.o-cmp .o-logos { gap: 12px 18px; } .o-cmp small { display: block; margin-top: 6px; color: var(--tx-muted); }

/* pricing */
.o-pg { margin-bottom: 44px; } .o-pg h3 { font-size: 1.4rem; margin-bottom: 4px; } .o-pg h3 small { font-size: .62em; font-weight: 500; color: var(--tx-muted); letter-spacing: 0; margin-left: 8px; }
.o-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 18px 0 14px; }
.o-tier { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-tier.pop { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand) inset; }
.o-tier i { position: absolute; top: -11px; left: 14px; background: var(--brand); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.o-tier b { color: var(--tx-muted); font-size: 13px; } .o-tier strong { font-size: 26px; letter-spacing: -.02em; color: var(--tx-strong); }
.o-tier small { color: var(--tx-muted); font-size: 12px; } .o-tier span { font-weight: 600; margin-top: 6px; color: var(--tx-strong); }
.o-tier em { font-style: normal; color: var(--brand); font-weight: 600; font-size: 13.5px; } .o-tier code { margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tx-muted); }

/* faq */
.o-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 10px; }
.o-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--tx-strong); }
.o-faq summary::-webkit-details-marker { display: none; }
.o-faq summary::after { content: "+"; color: var(--brand); font-size: 20px; line-height: 1; }
.o-faq details[open] summary::after { content: "\2212"; }
.o-faq p { margin-top: 10px; }

@media (max-width: 900px) {
    .o-hero__grid, .o-split, .o-lblsec, .o-two, .o-fgrid { grid-template-columns: 1fr; }
    .o-split.rev > div:last-child { order: 0; }
    .o-feats > * { max-width: none; }
    .o-hero .o-vis { display: none; }
    .o-mgc { display: none; }
}
@media (max-width: 560px) { .o-tiers { grid-template-columns: 1fr 1fr; } .o-mg .o-s { padding-block: 40px; } }

/* products page: comparison table */
.c-tw { overflow-x: auto; }
.c-cmp { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 620px; }
.c-cmp th, .c-cmp td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 15px; }
.c-cmp thead th { background: var(--brand-soft); color: var(--tx-strong); }
.c-cmp tbody th { color: var(--tx-muted); font-weight: 600; width: 160px; }

/* footer: compact single-row layout on desktop (brand + 3 link columns + contact) */
.ftr { padding-block: clamp(34px, 4.5vw, 52px) 0; }
.ftr__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: clamp(22px, 3vw, 40px); }
.ftr__brand { grid-column: auto; }
.ftr__logo img { height: 36px; margin-bottom: 12px; }
.ftr h4 { margin-bottom: 12px; }
.ftr__list li { margin-bottom: 8px; }
.ftr__contact p { margin-bottom: 8px; }
@media (max-width: 1000px) {
    .ftr__grid { grid-template-columns: repeat(3, 1fr); }
    .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ftr__grid { grid-template-columns: 1fr 1fr; }
    .ftr__grid > :last-child { grid-column: 1 / -1; }
}
.ftr__bar { margin-top: clamp(22px, 3vw, 34px); padding-block: 16px; }

/* tighter rhythm between home/products sections */
.c-hero { padding-bottom: clamp(8px, 1.5vw, 16px); }
.c-paths { padding-bottom: 0; }
.c-hero + .section { padding-top: clamp(32px, 4vw, 52px); }
.section--tight { padding-block: clamp(32px, 4vw, 52px); }

/* keep logo proportions: the width/height attributes would otherwise stretch it once CSS sets only the height */
.ftr__logo img { width: auto; height: 36px; }
.drawer img { width: auto; }

/* section rhythm, all pages: adjacent plain-white sections share one gap instead of stacking two */
.section:not(.section--paper2):not(.section--dark) + .section:not(.section--paper2):not(.section--dark) { padding-top: 0; }
.head { margin-bottom: clamp(24px, 3.4vw, 40px); }
.o-s { padding-block: clamp(36px, 4.5vw, 56px); }
.o-mg .o-s { padding-block: clamp(36px, 4vw, 48px); }
.o-head { margin-bottom: 24px; }
.o-groups { padding-top: 40px; }
@media (max-width: 560px) { .o-mg .o-s { padding-block: 32px; } }

/* AutoShopper dark card: secondary button */
.c-asx .btn { margin-right: 10px; }
.c-asx .btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); box-shadow: none; }
.c-asx .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Products dropdown: module links under OneINV */
.hdr__menu { min-width: 330px; }
.hdr__sub { padding: 7px 14px 7px 32px !important; font-size: 14px; color: var(--tx-body) !important; display: flex !important; align-items: center; gap: 8px; }
.hdr__sub::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: none; }
.hdr__sub em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--brand-soft); color: var(--brand-deep); padding: 2px 8px; border-radius: 99px; }
.drawer__sub--2 { padding-left: 52px; font-size: .86em; opacity: .75; }
/* footer: six columns on desktop */
.ftr__grid { grid-template-columns: 1.5fr .9fr 1.1fr 1fr 1.2fr 1.4fr; }
@media (max-width: 1000px) { .ftr__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }

/* OneINV detail pages (order-processing, inventory-sync, vms-video-proof, flipkart-offer-opt-out, label-studio) */
.o-crumb { font-size: 13.5px; color: var(--tx-muted); margin-bottom: 14px; }
.o-crumb a { color: var(--tx-muted); } .o-crumb a:hover { color: var(--brand); }
.o-list--sm { gap: 7px; margin: 8px 0 0; font-size: 14.5px; }
.o-list--sm li { padding-left: 22px; }
.o-f .o-list--sm li::before { top: 0; }
.o-link { color: var(--brand); font-weight: 600; }
.o-rels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.o-rel { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: .2s var(--ease); }
.o-rel:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--sh-2); }
.o-rel b { display: block; color: var(--tx-strong); margin-bottom: 4px; } .o-rel span { font-size: 14px; color: var(--tx-muted); }
.o-mr em.n { color: var(--tx-muted); }
.o-modes { display: flex; gap: 6px; margin-bottom: 10px; }
.o-modes span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 10px; background: var(--o-soft2); font-size: 13px; font-weight: 600; color: var(--tx-muted); }
.o-modes span.on { background: var(--brand); color: #fff; }
.o-slbl { border: 2px solid #222; border-radius: 6px; padding: 14px; background: #fff; color: #111; font-family: "Courier New", monospace; margin-bottom: 12px; display: grid; gap: 4px; }
.o-slbl b { font-size: 17px; color: #111; } .o-slbl span { font-size: 12px; } .o-slbl .mrp { font-size: 16px; font-weight: 700; }
.o-slbl small { font-size: 11px; color: #444; }
.o-sbar { display: flex; gap: 12px; align-items: stretch; margin: 6px 0; } .o-sbar .o-bars { flex: 1; margin: 0; height: 46px; }
.o-qr { width: 46px; height: 46px; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 10px 10px; border: 2px solid #111; }
.o-page .ctaband { margin: 0; }

/* learn-more links on module and tool cards */
.c-link { display: inline-block; margin-top: 14px; color: var(--brand); font-weight: 600; }
.c-link:hover { color: var(--brand-deep); }
.c-tool .c-link { color: #6CC3EE; margin-top: 12px; display: block; }
.o-link--light { color: #6CC3EE; font-weight: 600; }

/* small screens: detail-page hero buttons may wrap; label illustration stays inside the viewport */
.o-hero__grid > * { min-width: 0; }
.o-hero .btn { white-space: normal; text-align: center; }
@media (max-width: 560px) {
    .o-bill { left: 16px; width: 90%; }
    .o-pin { right: auto; }
    .o-lblwrap { padding: 0 12px; }
}

/* hero visual: product cards over drifting marketplace logos */
.c-vis { min-height: 420px; isolation: isolate; }
.c-drift { position: absolute; inset: -10px -30px; z-index: -1; display: grid; align-content: space-around; gap: 22px; transform: rotate(-7deg);
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 35%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 35%, transparent 78%); }
.c-drift__row { overflow: hidden; }
.c-drift__track { display: flex; width: max-content; align-items: center; animation: c-drift 46s linear infinite; }
.c-drift__row:nth-child(even) .c-drift__track { animation-direction: reverse; animation-duration: 58s; }
.c-drift__track img { height: 26px; width: auto; margin-inline: 30px; filter: grayscale(1); opacity: .34; flex: none; }
@keyframes c-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .c-drift__track { animation: none; } }
.c-vis__card { flex-direction: column; align-items: stretch; gap: 12px; text-decoration: none; }
.c-vis__card--1 { top: 34px; left: 0; width: min(350px, 92%); }
.c-vis__card--2 { top: auto; bottom: 36px; right: 0; left: auto; width: min(300px, 86%); flex-direction: row; align-items: center; }
.c-vis__t { display: flex; gap: 14px; align-items: center; color: inherit; }
a.c-vis__card:hover { border-color: var(--brand); box-shadow: var(--sh-3); }
.c-vis__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.c-vis__chips a { font-size: 12.5px; font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); padding: 5px 11px; border-radius: 99px; transition: .2s var(--ease); }
.c-vis__chips a:hover { background: var(--brand); color: #fff; }

/* hero logos: individually drifting in random directions, true colour */
.c-drift { display: block; transform: none; inset: -10px -20px; -webkit-mask-image: none; mask-image: none; }
.c-drift img { position: absolute; height: 28px; width: auto; opacity: .85; filter: none; animation: c-float 18s ease-in-out infinite; }
@keyframes c-float {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(var(--dx), var(--dy)); }
    50%  { transform: translate(var(--dx2), var(--dy)); }
    75%  { transform: translate(var(--dx2), var(--dy2)); }
    100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .c-drift img { animation: none; } }

/* show the hero visual on phones too, as a compact block under the text */
@media (max-width: 900px) {
    .c-vis { display: block !important; min-height: 330px; margin-top: 8px; }
    .c-vis__card--1 { top: 28px; left: 0; width: 92%; }
    .c-vis__card--2 { bottom: 14px; right: 0; width: 88%; }
    .c-drift img { height: 22px; }
    .c-drift { inset: 0; }
}
.c-vis { overflow: hidden; }
@media (min-width: 901px) { .c-vis { overflow: visible; } .c-hero { overflow-x: clip; } }

.c-mk--top { margin-top: clamp(24px, 3vw, 36px); margin-bottom: 4px; }

/* light theme everywhere: former dark navy blocks now soft blue / white */
.c-asx { background: var(--o-soft, #E8F3FA); color: var(--tx-body); border: 1px solid #D3E6F1; }
.c-asx h3 { color: var(--tx-strong); } .c-asx p { color: var(--tx-body); }
.c-asx .c-list { color: var(--tx-strong); } .c-asx .c-list li::before { color: var(--brand); }
.c-asx .btn { background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(0,120,180,.3); }
.c-asx .btn--ghost { background: #fff; color: var(--tx-strong); border: 1.5px solid var(--line); box-shadow: none; }
.c-asx .btn--ghost:hover { background: #fff; border-color: var(--tx-strong); color: var(--tx-strong); }
.c-free, .o-free { background: #E8F3FA; color: var(--tx-body); border: 1px solid #D3E6F1; }
.c-free h3, .o-free h2, .o-free h3 { color: var(--tx-strong); }
.c-free__top p, .o-free .o-head p { color: var(--tx-body); }
.c-gift { background: #fff; color: var(--brand-deep); border: 1px solid #D3E6F1; }
.c-tool, .o-fcard { background: #fff; border: 1px solid #D3E6F1; }
.c-tool b { color: var(--tx-strong); } .c-tool p, .o-fcard p { color: var(--tx-body); }
.c-tool .c-eb, .o-eb--light { color: var(--brand); }
.c-tool .c-list, .c-tool .c-list li { color: var(--tx-strong); } .c-tool .c-list li::before, .o-fcard .o-list li::before { color: var(--brand); }
.c-fr, .o-fr { background: var(--brand); color: #fff; }
.o-fine--light { color: var(--tx-muted); }
.o-rec > div { background: #fff; color: var(--tx-strong); border: 1px solid var(--line); }
.o-rec span, .o-rec small { color: var(--tx-muted); }
.c-tool .c-link { color: var(--brand); }

.logos img { filter: none; opacity: .85; }
.c-bene div { background: var(--o-soft, #E8F3FA); color: var(--tx-body); border: 1px solid #D3E6F1; }
.c-bene b { color: var(--brand-deep); } .c-bene span { opacity: 1; color: var(--tx-body); }

.c-asx__note { display: inline-block; margin-top: 10px; color: var(--tx-muted); font-size: 15px; }
@media (min-width: 560px) { .c-asx__note { margin: 0 0 0 6px; } }

.c-asx__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.c-asx__cta .btn { margin: 0; }
.c-asx__cta .c-asx__note { margin: 0; }

/* marketplaces strip under OneINV page heroes */
.o-mkstrip { padding: 6px 0 28px; background: #fff; }
.o-mkstrip p { color: var(--tx-muted); margin-bottom: 12px; }
.o-mkstrip .o-logos img { height: 26px; }
.o-mkstrip small { display: block; margin-top: 10px; color: var(--tx-muted); font-size: 13.5px; }

.o-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o-chips span { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; font-size: 13.5px; padding: 7px 14px; border-radius: 99px; }