@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{

    --bg-color: #000;

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #ff4301;/* button bg color*/

    --primary-text-color: #ff4301;
    --header-link-hover: #ff4301;
    --input-hover-bd-color: #ff4301;

    /* CRM-style product nav tokens (dark SaaSyDark surface) */
    --erp-nav-ember: #ff4301;
    --erp-nav-fg: #faf9f7;
    --erp-nav-muted: #a1a1aa;
    --erp-nav-border: color-mix(in srgb, #faf9f7 10%, transparent);
    --erp-nav-card: #141416;
    --erp-nav-bg: #000000;
    --erp-nav-radius: 0.75rem;
    /* Fixed floating product nav height (matches CRM --crm-header-h) */
    --erp-header-h: 4.75rem;
}


html {
    scroll-behavior: smooth;
    font-family: "Ubuntu", sans-serif;
}

/* Floating product nav (CRM chrome) */
.erp-header {
    position: relative;
    z-index: 30;
}

.erp-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    width: 100%;
    padding: 0.5rem;
    /* Match CRM product nav type (ai-crm.css) */
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.erp-nav-shell {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    transition: max-width 0.3s ease, padding 0.3s ease;
}

.erp-nav.is-scrolled .erp-nav-shell {
    max-width: 70rem;
    padding-inline: 1.25rem;
}

.erp-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-radius: 1rem;
    transition: background 0.3s ease, border 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
}

.erp-nav.is-scrolled .erp-nav-inner {
    background: color-mix(in srgb, var(--erp-nav-bg) 72%, transparent);
    border: 1px solid var(--erp-nav-border);
    backdrop-filter: blur(16px);
    padding: 0.65rem 1rem;
}

.erp-nav-brand-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .erp-nav-brand-row { width: auto; }
}

.erp-brand {
    color: inherit;
    text-decoration: none;
}

.erp-brand-text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    line-height: 1;
    white-space: nowrap;
}

.erp-brand-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--erp-nav-fg);
}

.erp-brand-product {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--erp-nav-ember);
}

.erp-menu-toggle {
    position: relative;
    margin: -0.5rem -0.5rem -0.5rem 0;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--erp-nav-fg);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .erp-menu-toggle { display: none; }
}

.erp-menu-toggle .icon-close {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transform: rotate(-180deg) scale(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.erp-menu-toggle .icon-menu {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.erp-nav[data-state="active"] .erp-menu-toggle .icon-menu {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

.erp-nav[data-state="active"] .erp-menu-toggle .icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.erp-nav-desktop {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
}

.erp-nav-desktop a {
    color: var(--erp-nav-muted);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.15s ease;
}

.erp-nav-desktop a:hover { color: var(--erp-nav-ember); }

@media (min-width: 1024px) {
    .erp-nav-inner {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        align-items: center;
        column-gap: 1rem;
        flex-wrap: unset;
    }

    .erp-nav-brand-row {
        justify-self: start;
    }

    .erp-nav-desktop {
        display: flex;
        position: static;
        left: auto;
        transform: none;
        justify-self: center;
    }

    .erp-nav-cta-desktop {
        justify-self: end;
    }
}

.erp-nav-panel {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
    border-radius: 1.5rem;
    border: 1px solid var(--erp-nav-border);
    background: var(--erp-nav-card);
    box-shadow: 0 24px 80px color-mix(in srgb, var(--erp-nav-bg) 30%, transparent);
}

.erp-nav[data-state="active"] .erp-nav-panel { display: flex; }

@media (min-width: 1024px) {
    .erp-nav-panel { display: none !important; }
}

.erp-nav-mobile {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
}

.erp-nav-mobile a {
    color: var(--erp-nav-muted);
    text-decoration: none;
    font-weight: 400;
}

.erp-nav-mobile a:hover { color: var(--erp-nav-fg); }

.erp-nav-cta {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

@media (min-width: 640px) {
    .erp-nav-cta { flex-direction: row; }
}

.erp-nav-cta-desktop {
    display: none;
    align-items: center;
    gap: 0.65rem;
}

@media (min-width: 1024px) {
    .erp-nav-cta-desktop { display: flex; }
    .erp-nav-panel .erp-nav-cta { display: none; }
}

/* Nav CTAs — scoped so page .btn ember styles stay intact */
.erp-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.5rem;
    min-height: 2.75rem;
    width: auto;
    border-radius: var(--erp-nav-radius);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: normal;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
}

.erp-nav .btn-sm {
    padding: 0.55rem 1.05rem;
    font-size: 0.8125rem;
    min-height: 2.25rem;
    line-height: 1.3;
}

.erp-nav .btn-primary {
    background: var(--erp-nav-ember);
    color: #fff;
    border-color: var(--erp-nav-ember);
}

.erp-nav .btn-primary:hover {
    background: color-mix(in srgb, var(--erp-nav-ember) 88%, #000);
    transform: translateY(-1px);
}

.erp-nav .btn-outline {
    background: transparent;
    border-color: var(--erp-nav-border);
    color: var(--erp-nav-fg);
}

.erp-nav .btn-outline:hover {
    border-color: color-mix(in srgb, var(--erp-nav-ember) 40%, var(--erp-nav-border));
    color: var(--erp-nav-fg);
}

.primary-text-color{
    color: var(--primary-text-color);
}

.gradient-text{
    background: rgb(215,215,215);
    background: linear-gradient(90deg, rgba(215,215,215,1) 18%, rgba(136,136,136,1) 71%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-section{
    /* background-image: url("../assets/images/background/dots.svg"); */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    box-sizing: border-box;
    /* Clear fixed .erp-nav + breathing room under the floating shell */
    padding-top: calc(var(--erp-header-h) + clamp(2.5rem, 6vh, 4rem));
}

/* Fill remaining viewport under nav clearance (avoid double 100vh + pad) */
.hero-section > .hero-inner {
    min-height: calc(100dvh - var(--erp-header-h) - clamp(2.5rem, 6vh, 4rem));
    /* Keep side/bottom from Tailwind; top clearance lives on .hero-section */
    padding-top: clamp(0.5rem, 1.5vh, 1rem);
}

.hero-img-bg-grad{
    background: rgb(255,67,1);
    background: linear-gradient(90deg, #ff430191 8%, #ff6b35ae 31%, #ff9466bc 76%, #ffb089ca 89%);
    filter: blur(50px);
    opacity: 0.5;
}

#dashboard {
    /* transform-origin: bottom center; */
    transform: perspective(1200px) translateX(0px) translateY(12px) scale(0.8)
        rotate(0deg) rotateX(70deg);
    transition: transform 0.5;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0a0a0a;
}

/* Halveron ERP hero product mock */
.erp-hero-mock {
    width: 100%;
    color: #e8e8ea;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    background:
        radial-gradient(120% 80% at 85% 0%, rgba(255, 67, 1, 0.14), transparent 55%),
        linear-gradient(180deg, #121214 0%, #0a0a0b 100%);
    -webkit-font-smoothing: antialiased;
}

.erp-hero-mock-chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.erp-hero-mock-dots {
    width: 2.35rem;
    height: 0.55rem;
    border-radius: 999px;
    background:
        radial-gradient(circle closest-side, #ff5f57 90%, transparent 100%) 0 50% / 0.55rem 0.55rem no-repeat,
        radial-gradient(circle closest-side, #febc2e 90%, transparent 100%) 0.9rem 50% / 0.55rem 0.55rem no-repeat,
        radial-gradient(circle closest-side, #28c840 90%, transparent 100%) 1.8rem 50% / 0.55rem 0.55rem no-repeat;
}

.erp-hero-mock-title {
    justify-self: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(250, 249, 247, 0.78);
}

.erp-hero-mock-title::after {
    content: " ERP";
    color: #ff4301;
}

.erp-hero-mock-search {
    justify-self: end;
    max-width: 12rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.65rem;
    color: rgba(250, 249, 247, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erp-hero-mock-body {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1.35fr) minmax(0, 0.95fr);
    min-height: clamp(17rem, 38vw, 26rem);
}

.erp-hero-mock-rail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.45rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}

.erp-hero-mock-rail-item {
    padding: 0.45rem 0.3rem;
    border-radius: 0.45rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    color: rgba(250, 249, 247, 0.5);
}

.erp-hero-mock-rail-item.is-active {
    color: #ff4301;
    background: rgba(255, 67, 1, 0.12);
}

.erp-hero-mock-main {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem 0.85rem 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.erp-hero-mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.erp-hero-mock-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.erp-hero-mock-kpi span {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.45);
}

.erp-hero-mock-kpi strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #faf9f7;
    letter-spacing: -0.02em;
}

.erp-hero-mock-kpi em {
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 600;
    color: #86efac;
}

.erp-hero-mock-kpi em.is-warn {
    color: #ff4301;
}

.erp-hero-mock-chart-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
    flex: 1;
    min-height: 0;
}

.erp-hero-mock-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
}

.erp-hero-mock-chart-head strong {
    font-weight: 700;
    color: #faf9f7;
}

.erp-hero-mock-chart-head span {
    font-size: 0.58rem;
    color: rgba(250, 249, 247, 0.42);
}

.erp-hero-mock-bars {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 0.35rem;
    height: 5.5rem;
    padding: 0.2rem 0.1rem 0;
}

.erp-hero-mock-bars span {
    display: block;
    height: var(--h, 50%);
    border-radius: 0.28rem 0.28rem 0.12rem 0.12rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
}

.erp-hero-mock-bars span.is-accent {
    background: linear-gradient(180deg, #ff6b35, #ff4301);
    box-shadow: 0 0 16px rgba(255, 67, 1, 0.35);
}

.erp-hero-mock-chart-note {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.35;
    color: rgba(250, 249, 247, 0.55);
}

.erp-hero-mock-ar {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.erp-hero-mock-ar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #faf9f7;
}

.erp-hero-mock-pill {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 67, 1, 0.14);
    color: #ff8f66;
    font-size: 0.55rem;
    font-weight: 600;
}

.erp-hero-mock-ar-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.62rem;
    color: rgba(250, 249, 247, 0.72);
}

.erp-hero-mock-ar-row .is-late {
    color: #ff4301;
    font-weight: 600;
}

.erp-hero-mock-ar-row .is-ok {
    color: #86efac;
    font-weight: 600;
}

.erp-hero-mock-side {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.015);
}

.erp-hero-mock-ai {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
    padding: 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 67, 1, 0.22);
    background:
        linear-gradient(160deg, rgba(255, 67, 1, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.35);
}

.erp-hero-mock-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
}

.erp-hero-mock-ai-head strong {
    font-weight: 700;
    color: #faf9f7;
}

.erp-hero-mock-ai-head span {
    font-size: 0.55rem;
    font-weight: 700;
    color: #ff4301;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erp-hero-mock-bubble {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.62rem;
    line-height: 1.4;
}

.erp-hero-mock-bubble.is-user {
    align-self: flex-end;
    max-width: 92%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(250, 249, 247, 0.78);
}

.erp-hero-mock-bubble.is-ai {
    align-self: stretch;
    background: rgba(255, 67, 1, 0.12);
    border: 1px solid rgba(255, 67, 1, 0.2);
    color: rgba(250, 249, 247, 0.88);
}

.erp-hero-mock-ai-cta {
    margin-top: auto;
    appearance: none;
    border: none;
    border-radius: 0.45rem;
    padding: 0.45rem 0.65rem;
    background: #ff4301;
    color: #fff;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: default;
}

.erp-hero-mock-alert {
    padding: 0.65rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 67, 1, 0.28);
    background: rgba(255, 67, 1, 0.08);
}

.erp-hero-mock-alert strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ff8f66;
}

.erp-hero-mock-alert p {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.35;
    color: rgba(250, 249, 247, 0.7);
}

@media (max-width: 900px) {
    .erp-hero-mock-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }

    .erp-hero-mock-rail {
        display: none;
    }

    .erp-hero-mock-search {
        display: none;
    }
}

@media (max-width: 640px) {
    .erp-hero-mock-body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .erp-hero-mock-main {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .erp-hero-mock-bars {
        height: 4.25rem;
    }

    .erp-hero-mock-ar-row:last-child,
    .erp-hero-mock-kpi:nth-child(3) {
        display: none;
    }

    .erp-hero-mock-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.border-gradient{
    background: rgb(219,215,213);
    background: linear-gradient(180deg, rgba(219,215,213,1) 35%, rgba(255,67,1,0) 71%);
    padding: 2px;
    border-radius: 10px;
}
.border-gradient>div{
    /* background-color: var(--bg-color); */
    background-color: var(--bg-color);
    border-radius: inherit;
}

/* Key benefits — 3×2 desktop grid (full-width balanced cards) */
.erp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 1.5rem;
    width: min(100%, 1100px);
    max-width: 100%;
    margin-top: 1.25rem;
    margin-inline: auto;
}

.erp-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
    min-width: 0;
}

.erp-benefit-media {
    height: 7rem;
    width: 100%;
    overflow: hidden;
}

.erp-benefit-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.15rem 0.85rem 0.35rem;
    flex: 1;
}

.erp-benefit-body h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    color: #e5e7eb;
}

.erp-benefit-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d1d5db;
}

/* Features loved by everyone — split editorial list */
.erp-features-editorial {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem 2.75rem;
    width: 100%;
    margin-top: 1.35rem;
}

.erp-features-nav {
    position: sticky;
    top: 5.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0;
}

.erp-features-nav-link {
    position: relative;
    display: block;
    padding: 0.65rem 0.85rem 0.65rem 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    color: #9a9aa3;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.erp-features-nav-link:hover {
    color: #f3f4f6;
    border-left-color: rgba(255, 255, 255, 0.28);
}

.erp-features-nav-link.is-active {
    color: #ff4301;
    border-left-color: #ff4301;
    background: linear-gradient(
        90deg,
        rgba(255, 67, 1, 0.1),
        transparent 85%
    );
}

.erp-features-panels {
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    min-width: 0;
}

.erp-features-band {
    scroll-margin-top: 6.5rem;
}

.erp-features-band-title {
    margin: 0 0 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b8b94;
}

.erp-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.erp-feature-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0.35rem 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.erp-feature-row:last-child {
    border-bottom: none;
}

.erp-feature-row:hover {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03),
        transparent 70%
    );
}

.erp-feature-row:hover .erp-feature-icon {
    color: #ff4301;
    background: rgba(255, 67, 1, 0.1);
}

.erp-feature-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 0.1rem;
    border-radius: 0.55rem;
    font-size: 1.05rem;
    line-height: 1;
    color: #d4d4d8;
    background: rgba(255, 255, 255, 0.05);
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.erp-feature-body {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.erp-feature-body h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #f3f4f6;
}

.erp-feature-body p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #a1a1aa;
}

@media (max-width: 1024px) {
    .erp-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.35rem 1.25rem;
    }

    .erp-features-editorial {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .erp-features-nav {
        position: sticky;
        top: 4.5rem;
        z-index: 5;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.4rem;
        margin: 0 -0.25rem;
        padding: 0.55rem 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.92) 55%,
            rgba(0, 0, 0, 0.72)
        );
        backdrop-filter: blur(10px);
    }

    .erp-features-nav::-webkit-scrollbar {
        display: none;
    }

    .erp-features-nav-link {
        flex: 0 0 auto;
        padding: 0.45rem 0.85rem;
        border-left: none;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: #141416;
        white-space: nowrap;
        font-size: 0.8125rem;
    }

    .erp-features-nav-link.is-active {
        background: rgba(255, 67, 1, 0.14);
        border-color: rgba(255, 67, 1, 0.5);
        color: #ff4301;
    }

    .erp-features-band {
        scroll-margin-top: 7.5rem;
    }

    .erp-features-panels {
        gap: 2.25rem;
    }
}

@media (max-width: 640px) {
    .erp-benefits-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 22rem;
        gap: 1.25rem;
    }

    .erp-feature-row {
        gap: 0.85rem;
        padding: 0.9rem 0;
    }

    .erp-feature-body h4 {
        font-size: 0.98rem;
    }

    .erp-feature-body p {
        font-size: 0.84rem;
    }

    .erp-benefit-media {
        height: 6.25rem;
    }

    .erp-benefit-body {
        padding-inline: 0.5rem;
    }
}

.opacity-0{
    opacity: 0 !important;
}

.opacity-100{
    opacity: 100 !important;
}

.btn{
    padding: 10px 15px;
    width: max-content;
    border-radius: 5px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.btn:hover{

}

.btn:disabled{
    cursor: default;
}

.input{
    padding: 10px;
    background-color: transparent;
    border-radius: 5px;
    /* outline: none; */
    min-width: 100px;
    border: 1px solid #818080;
    /* transition: border 0.3s; */
}

.input:active, .input:focus, .input:focus-within{
    border: 1px solid var(--input-hover-bd-color) !important;
}

.carousel-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    max-width: 800px;
}
  
.carousel {
    display: inline-block;
    animation: scroll 10s linear infinite;
}
  
.carousel-img {
    display: inline-block;
    margin: 0 20px;
}
  
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.faq-accordion {
    background-color: inherit;
    color: #f2f2f2;
    cursor: pointer;
    padding: 15px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: height 0.4s;
}

.faq .content {
    padding: 0px 18px;
    color: #e4e4e4;
    height: max-content;
    overflow: hidden;
    background-color: transparent;
    text-align: justify;
    max-height: 0px;
    transition: max-height 0.4s, padding 0.4s;
}

.faq-accordion .active,
.faq-accordion:hover {
    /* background-color: #2e2c2c; */
}

/* —— Mid-page product UI mocks —— */
.erp-ui-frame {
    overflow: hidden;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #0a0a0b;
}

.erp-ui-mock {
    width: 100%;
    color: #e8e8ea;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    background:
        radial-gradient(120% 80% at 90% 0%, rgba(255, 67, 1, 0.12), transparent 55%),
        linear-gradient(180deg, #121214 0%, #0a0a0b 100%);
    -webkit-font-smoothing: antialiased;
}

.erp-ui-chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.erp-ui-dots {
    width: 2.35rem;
    height: 0.55rem;
    border-radius: 999px;
    background:
        radial-gradient(circle closest-side, #ff5f57 90%, transparent 100%) 0 50% / 0.55rem 0.55rem no-repeat,
        radial-gradient(circle closest-side, #febc2e 90%, transparent 100%) 0.9rem 50% / 0.55rem 0.55rem no-repeat,
        radial-gradient(circle closest-side, #28c840 90%, transparent 100%) 1.8rem 50% / 0.55rem 0.55rem no-repeat;
}

.erp-ui-chrome-title {
    justify-self: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(250, 249, 247, 0.78);
}

.erp-ui-badge {
    justify-self: end;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 67, 1, 0.14);
    color: #ff8f66;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erp-ui-plugins-shell {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    min-height: 22rem;
}

.erp-ui-plugins-rail {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.45rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.28);
}

.erp-ui-plugins-rail span {
    padding: 0.45rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.48);
    line-height: 1.2;
}

.erp-ui-plugins-rail span.is-active {
    background: rgba(255, 67, 1, 0.14);
    color: #ff8f66;
    box-shadow: inset 2px 0 0 #ff4301;
}

.erp-ui-plugins-main {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.8rem 0.85rem;
    min-width: 0;
}

.erp-ui-plugins-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.erp-ui-plugins-toolbar strong {
    display: block;
    font-size: 0.72rem;
    color: #faf9f7;
}

.erp-ui-plugins-toolbar span {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.56rem;
    color: rgba(250, 249, 247, 0.42);
}

.erp-ui-plugins-toolbar em {
    flex-shrink: 0;
    font-style: normal;
    font-size: 0.56rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.4);
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.erp-ui-plugins-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.erp-ui-plugin-tile {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.55rem 0.5rem 0.6rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.erp-ui-plugin-tile.is-on {
    border-color: rgba(255, 67, 1, 0.22);
    background: rgba(255, 67, 1, 0.05);
}

.erp-ui-plugin-tile.is-selected {
    border-color: rgba(255, 67, 1, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 67, 1, 0.2);
}

.erp-ui-plugin-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.1rem;
}

.erp-ui-plugin-tile-top > i {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.35rem;
    background: rgba(255, 67, 1, 0.12);
    color: #ff8f66;
    font-size: 0.7rem;
}

.erp-ui-plugin-tile strong {
    font-size: 0.62rem;
    font-weight: 700;
    color: #faf9f7;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.erp-ui-plugin-tile > span {
    font-size: 0.52rem;
    line-height: 1.25;
    color: rgba(250, 249, 247, 0.45);
}

.erp-ui-toggle {
    position: relative;
    display: inline-flex;
    width: 1.55rem;
    height: 0.85rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.erp-ui-toggle i {
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(250, 249, 247, 0.75);
    transition: transform 0.15s ease;
}

.erp-ui-toggle.is-on {
    background: #ff4301;
}

.erp-ui-toggle.is-on i {
    left: auto;
    right: 0.1rem;
    background: #fff;
}

.erp-ui-plugins-detail {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.65rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 67, 1, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 67, 1, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.28);
}

.erp-ui-plugins-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.erp-ui-plugins-detail-head strong {
    font-size: 0.68rem;
    color: #faf9f7;
}

.erp-ui-plugins-detail-head .is-live {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #86efac;
}

.erp-ui-plugins-detail p {
    margin: 0;
    font-size: 0.6rem;
    line-height: 1.35;
    color: rgba(250, 249, 247, 0.62);
}

.erp-ui-plugins-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    font-size: 0.55rem;
    color: rgba(250, 249, 247, 0.42);
}

.erp-ui-plugins-detail-meta em {
    font-style: normal;
    font-weight: 700;
    color: #ff8f66;
}

.erp-ui-cta {
    appearance: none;
    border: none;
    margin-top: 0.15rem;
    align-self: flex-start;
    border-radius: 0.45rem;
    padding: 0.45rem 0.7rem;
    background: #ff4301;
    color: #fff;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: default;
}

.erp-ui-mock--insights .erp-ui-insights-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.8rem 0.85rem 0;
}

.erp-ui-mock--insights .erp-ui-insights-kpis > div {
    padding: 0.5rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.erp-ui-mock--insights .erp-ui-insights-kpis > div.is-accent {
    border-color: rgba(255, 67, 1, 0.35);
    background:
        linear-gradient(160deg, rgba(255, 67, 1, 0.16), rgba(255, 67, 1, 0.04) 55%),
        rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 1px rgba(255, 67, 1, 0.08);
}

.erp-ui-mock--insights .erp-ui-insights-kpis span {
    display: block;
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(250, 249, 247, 0.42);
}

.erp-ui-mock--insights .erp-ui-insights-kpis strong {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #faf9f7;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.erp-ui-mock--insights .erp-ui-insights-kpis em {
    display: block;
    margin-top: 0.2rem;
    font-style: normal;
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.4);
}

.erp-ui-mock--insights .erp-ui-insights-kpis em.is-up { color: #86efac; }
.erp-ui-mock--insights .erp-ui-insights-kpis em.is-down { color: #ff8f66; }

.erp-ui-insights-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 0.7rem;
    padding: 0.7rem 0.85rem 0.9rem;
}

.erp-ui-insights-chart,
.erp-ui-insights-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.erp-ui-insights-chart {
    padding: 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(255, 67, 1, 0.1), transparent 55%),
        rgba(0, 0, 0, 0.28);
}

.erp-ui-insights-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.erp-ui-insights-chart-head strong {
    display: block;
    font-size: 0.7rem;
    color: #faf9f7;
}

.erp-ui-insights-chart-sub {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.52rem;
    color: rgba(250, 249, 247, 0.4);
}

.erp-ui-insights-pill {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 67, 1, 0.28);
    background: rgba(255, 67, 1, 0.12);
    color: #ff8f66;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erp-ui-cashflow {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.erp-ui-cashflow-bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 0.35rem;
    min-height: 7.25rem;
    padding-top: 0.35rem;
}

.erp-ui-cashflow-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.erp-ui-cashflow-pair {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    height: 5.75rem;
}

.erp-ui-cashflow-pair i,
.erp-ui-cashflow-pair b {
    display: block;
    width: 42%;
    max-width: 0.7rem;
    height: var(--h, 50%);
    border-radius: 0.2rem 0.2rem 0.08rem 0.08rem;
    font-style: normal;
}

.erp-ui-cashflow-pair i {
    background: linear-gradient(180deg, #ff6b35, #ff4301);
    box-shadow: 0 0 10px rgba(255, 67, 1, 0.22);
}

.erp-ui-cashflow-pair b {
    font-weight: 400;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
}

.erp-ui-cashflow-col.is-focus .erp-ui-cashflow-pair i {
    box-shadow: 0 0 16px rgba(255, 67, 1, 0.45);
}

.erp-ui-cashflow-col.is-focus span {
    color: #ff8f66;
}

.erp-ui-cashflow-col > span {
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.4);
}

.erp-ui-cashflow-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    font-size: 0.52rem;
    color: rgba(250, 249, 247, 0.48);
}

.erp-ui-cashflow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.erp-ui-cashflow-legend i,
.erp-ui-cashflow-legend b {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 0.1rem;
    font-style: normal;
    font-weight: 400;
}

.erp-ui-cashflow-legend i { background: #ff4301; }
.erp-ui-cashflow-legend b { background: rgba(255, 255, 255, 0.28); }

.erp-ui-cashflow-legend em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    color: #ff8f66;
}

.erp-ui-insights-ai {
    padding: 0.6rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 67, 1, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 67, 1, 0.16), rgba(255, 67, 1, 0.04)),
        rgba(0, 0, 0, 0.2);
}

.erp-ui-insights-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.28rem;
}

.erp-ui-insights-ai-head strong {
    font-size: 0.66rem;
    color: #ff8f66;
}

.erp-ui-insights-ai-head span {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #ff4301;
    color: #fff;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.erp-ui-insights-ai p {
    margin: 0;
    font-size: 0.6rem;
    line-height: 1.4;
    color: rgba(250, 249, 247, 0.78);
}

.erp-ui-insights-aging {
    padding: 0.55rem 0.6rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
}

.erp-ui-insights-aging-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.erp-ui-insights-aging-head strong {
    font-size: 0.66rem;
    color: #faf9f7;
}

.erp-ui-insights-aging-head span {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.42);
}

.erp-ui-insights-aging-bars {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.erp-ui-insights-aging-bars > div {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
}

.erp-ui-insights-aging-bars span {
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.45);
}

.erp-ui-insights-aging-bars i {
    display: block;
    height: 0.35rem;
    width: var(--w, 40%);
    max-width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-style: normal;
}

.erp-ui-insights-aging-bars i.is-warn {
    background: linear-gradient(90deg, #ff8f66, #ff4301);
}

.erp-ui-insights-aging-bars i.is-late {
    background: #ff4301;
    box-shadow: 0 0 8px rgba(255, 67, 1, 0.35);
}

.erp-ui-insights-aging-bars em {
    font-style: normal;
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(250, 249, 247, 0.58);
    white-space: nowrap;
}

.erp-ui-insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.erp-ui-insights-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.38rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.6rem;
    color: rgba(250, 249, 247, 0.72);
}

.erp-ui-insights-list em {
    font-style: normal;
    font-weight: 600;
    color: #ff8f66;
}

.erp-ui-insights-list em.is-late { color: #ff4301; }
.erp-ui-insights-list em.is-ok { color: #86efac; }

@media (max-width: 640px) {
    .erp-ui-plugins-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .erp-ui-plugins-rail {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.55rem 0.65rem;
    }

    .erp-ui-plugins-rail span.is-active {
        box-shadow: none;
    }

    .erp-ui-plugins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-ui-mock--insights .erp-ui-insights-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erp-ui-insights-grid {
        grid-template-columns: 1fr;
    }

    .erp-ui-cashflow-bars {
        min-height: 6.25rem;
    }

    .erp-ui-cashflow-pair {
        height: 4.75rem;
    }
}

/* —— Audit login testimonials (same code as audit/audit.css), section layout —— */
.erp-testimonials-section {
    gap: 1.75rem;
    overflow: hidden;
}

.erp-testimonials-section .audit-testimonials {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: min(100%, 1100px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
}

.erp-testimonials-section .audit-testimonials-row {
    overflow: hidden;
    pointer-events: auto;
}

.erp-testimonials-section .audit-testimonials-track {
    display: flex;
    width: max-content;
    animation: audit-marquee 48s linear infinite;
    will-change: transform;
}

.erp-testimonials-section .audit-testimonials-row-b .audit-testimonials-track {
    animation-duration: 58s;
    animation-delay: -18s;
}

.erp-testimonials-section .audit-testimonials-set {
    display: flex;
    gap: 0.85rem;
    flex-shrink: 0;
    padding-right: 0.85rem;
}

.erp-testimonials-section .audit-testimonials:hover .audit-testimonials-track {
    animation-play-state: paused;
}

@keyframes audit-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.erp-testimonials-section .audit-testimonial {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 17rem;
    flex-shrink: 0;
    padding: 1.15rem 1.2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
}

.erp-testimonials-section .audit-testimonial img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    object-fit: cover;
    flex-shrink: 0;
}

.erp-testimonials-section .audit-testimonial p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.erp-testimonials-section .audit-testimonial .handle {
    color: rgba(255, 255, 255, 0.55);
}

.erp-testimonials-section .audit-testimonial .quote {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
    .erp-testimonials-section .audit-testimonials {
        -webkit-mask-image: none;
        mask-image: none;
        align-items: center;
        pointer-events: none;
    }

    .erp-testimonials-section .audit-testimonials-row {
        width: 100%;
    }

    .erp-testimonials-section .audit-testimonials-row-b {
        display: none;
    }

    .erp-testimonials-section .audit-testimonials-track {
        animation: none;
        width: 100%;
        justify-content: center;
        gap: 0.85rem;
    }

    .erp-testimonials-section .audit-testimonials-set:nth-child(2) {
        display: none;
    }

    .erp-testimonials-section .audit-testimonials-set {
        justify-content: center;
        flex-wrap: wrap;
    }

    .erp-testimonials-section .audit-testimonial:nth-child(n + 3) {
        display: none;
    }
}

/* —— CRM-style pricing teaser (ERP dark) —— */
.erp-pricing-section {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

.erp-pricing-panel {
    width: min(100%, 1100px);
    text-align: center;
}

.erp-pricing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}

.erp-pricing-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff4301;
}

.erp-pricing-title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #e5e7eb;
}

.erp-pricing-lede {
    margin: 0;
    max-width: 40rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #a1a1aa;
}

.erp-pricing-section .pricing-teaser-grid {
    display: grid;
    gap: 1rem;
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    text-align: left;
}

@media (min-width: 720px) {
    .erp-pricing-section .pricing-teaser-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }
}

.erp-pricing-section .pricing-teaser-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.35rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: #141416;
}

.erp-pricing-section .pricing-teaser-card--featured {
    border-color: color-mix(in srgb, #ff4301 45%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, #ff4301 8%, #141416);
    box-shadow: 0 0 0 1px color-mix(in srgb, #ff4301 18%, transparent);
}

.erp-pricing-section .pricing-teaser-badge {
    position: absolute;
    top: -0.65rem;
    left: 1.1rem;
    margin: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #ff4301;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.erp-pricing-section .pricing-teaser-name {
    margin: 0.2rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #faf9f7;
}

.erp-pricing-section .pricing-teaser-price {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #a1a1aa;
}

.erp-pricing-section .pricing-teaser-price span {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #faf9f7;
    margin-right: 0.2rem;
}

.erp-pricing-section .pricing-teaser-card--featured .pricing-teaser-price span {
    color: #ff4301;
}

.erp-pricing-section .pricing-teaser-build {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a1a1aa;
}

.erp-pricing-section .pricing-teaser-caps {
    margin: 0.55rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    line-height: 1.45;
    color: #a1a1aa;
}

.erp-pricing-section .pricing-teaser-feats {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.erp-pricing-section .pricing-teaser-feats li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #c4c4c8;
}

.erp-pricing-section .pricing-teaser-feats li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: #ff4301;
}

.erp-pricing-section .pricing-teaser-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: #ff4301;
    transition: filter 0.2s ease;
}

.erp-pricing-section .pricing-teaser-cta:hover {
    filter: brightness(1.05);
}

.erp-pricing-section .pricing-teaser-card--featured .pricing-teaser-cta {
    background: #faf9f7;
    color: #0a0a0b;
}

.erp-pricing-section .pricing-teaser-note {
    margin: 1.35rem 0 0;
    font-size: 0.8125rem;
    color: #a1a1aa;
}

.erp-pricing-section .pricing-teaser-actions {
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.erp-pricing-btn-primary {
    background: #ff4301 !important;
    color: #fff !important;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.erp-pricing-btn-outline {
    background: transparent !important;
    color: #faf9f7 !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.erp-pricing-btn-outline:hover {
    border-color: rgba(255, 67, 1, 0.45);
}

/* —— CRM-style scroll reveals (GSAP owns motion; CSS prevents FOUC) —— */
html.js-erp body.erp-page:not(.is-ready) #hero-section .reveal-up {
    visibility: hidden;
}

html.js-erp body.erp-page.is-ready #hero-section .reveal-up {
    visibility: visible;
}

.erp-feature-row.is-active .erp-feature-icon {
    color: #ff4301;
    background: rgba(255, 67, 1, 0.12);
}

.erp-feature-row.is-active .erp-feature-body h4 {
    color: #fff;
}

.erp-feature-row.is-passed .erp-feature-body h4 {
    color: #d4d4d8;
}

.erp-feature-row.is-passed .erp-feature-icon {
    color: #a1a1aa;
}

@media (prefers-reduced-motion: reduce) {
    html.js-erp body.erp-page:not(.is-ready) #hero-section .reveal-up {
        visibility: visible;
    }

    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    #dashboard {
        transform: none !important;
    }

    [data-parallax-y] {
        transform: none !important;
    }
}