/* ==============================================================
   Infotattva ERP product page
================================================================= */
.erp-page {
    --erp-navy: #0b2347;
    --erp-blue: #1268d8;
    --erp-blue-light: #eaf4ff;
    --erp-cyan: #12a8d8;
    --erp-green: #10a96b;
    --erp-ink: #102442;
    --erp-muted: #60708a;
    --erp-border: #dfe9f5;
    --erp-surface: #f5f9fd;
    color: var(--erp-muted);
    overflow-x: hidden;
}

.erp-page main h1,
.erp-page main h2,
.erp-page main h3,
.erp-page main h4 {
    color: var(--erp-ink);
}

.erp-page main p {
    line-height: 1.7;
}

.erp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--erp-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.erp-kicker::before {
    width: 24px;
    height: 2px;
    content: "";
    background: var(--erp-green);
    border-radius: 4px;
}

.erp-section-head h2 {
    margin-bottom: 20px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.12;
}

.erp-section-head h3 {
    margin: -8px 0 18px;
    color: var(--erp-blue);
    font-size: 21px;
}

.erp-section-head p {
    margin-bottom: 28px;
    font-size: 17px;
}

.erp-section-head.centered {
    max-width: 790px;
    margin: 0 auto 52px;
    text-align: center;
}

.erp-section-head.centered .erp-kicker {
    justify-content: center;
}

.erp-section-head.light h2,
.erp-section-head.light h3 {
    color: #fff;
}

.erp-section-head.light p {
    color: rgba(255, 255, 255, .72);
}

/* Hero */
.erp-hero {
    position: relative;
    min-height: 750px;
    padding: 105px 0 115px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff 10%, #f0f7ff 64%, #e6f4ff 100%);
}

.erp-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .45;
    background-image: linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to right, transparent, #000 50%, #000);
}

.erp-hero .container {
    position: relative;
    z-index: 2;
}

.erp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.erp-orb-one {
    top: -160px;
    right: -100px;
    width: 510px;
    height: 510px;
    background: rgba(37, 99, 235, .08);
}

.erp-orb-two {
    bottom: -150px;
    left: -140px;
    width: 390px;
    height: 390px;
    background: rgba(34, 197, 94, .06);
}

.erp-hero-copy h1 {
    margin-bottom: 25px;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.03;
    letter-spacing: -2px;
}

.erp-hero-copy h1::first-line {
    color: var(--erp-navy);
}

.erp-hero-copy > p {
    max-width: 590px;
    margin-bottom: 32px;
    color: #53647c;
    font-size: 18px;
}

.erp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.erp-hero-actions .btn i,
.erp-section-head .btn i {
    margin-left: 7px;
}

.erp-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    color: var(--erp-blue);
    font-weight: 600;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(18, 104, 216, .35);
    border-radius: 7px;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.erp-btn-secondary:hover {
    color: #fff;
    background: var(--erp-blue);
    transform: translateY(-2px);
}

.erp-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 30px;
    color: #5c6d84;
    font-size: 14px;
    font-weight: 500;
}

.erp-hero-trust i {
    margin-right: 6px;
    color: var(--erp-green);
}

/* Primary dashboard mockup */
.erp-dashboard-wrap {
    position: relative;
    margin-left: 22px;
    perspective: 1600px;
}

.erp-dashboard {
    position: relative;
    display: grid;
    grid-template-columns: 116px 1fr;
    min-height: 500px;
    overflow: hidden;
    background: #f8fbff;
    border: 7px solid #fff;
    border-radius: 22px;
    box-shadow: 0 36px 80px rgba(18, 55, 103, .22), 0 5px 20px rgba(18, 55, 103, .12);
    transform: rotateY(-2deg) rotateX(1deg);
    transform-origin: center;
}

.erp-dash-sidebar {
    padding: 23px 12px;
    color: #d9e7f7;
    background: linear-gradient(180deg, #0d2d50, #081f3d);
}

.erp-dash-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px 24px;
    color: #fff;
    font-size: 11px;
}

.erp-dash-brand > span {
    display: grid;
    width: 23px;
    height: 23px;
    color: #fff;
    font-weight: 800;
    background: var(--erp-blue);
    border-radius: 7px;
    place-items: center;
}

.erp-dash-sidebar nav {
    display: grid;
    gap: 6px;
}

.erp-dash-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    color: #adc1d9;
    font-size: 9px;
    border-radius: 6px;
}

.erp-dash-sidebar nav a.active {
    color: #fff;
    background: rgba(40, 126, 226, .32);
}

.erp-dash-main {
    min-width: 0;
    padding: 18px;
}

.erp-dash-top,
.erp-card-head,
.erp-dash-bottom,
.erp-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.erp-dash-top small {
    color: #71819a;
    font-size: 9px;
}

.erp-dash-top h3 {
    margin: 1px 0 0;
    font-size: 16px;
}

.erp-dash-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.erp-dash-user > span {
    display: grid;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    background: var(--erp-blue);
    border-radius: 50%;
    place-items: center;
}

.erp-sample-label,
.erp-demo-badge {
    display: inline-block;
    color: #7a899e;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.erp-sample-label {
    margin: 9px 0 7px;
}

.erp-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.erp-metric {
    position: relative;
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 11px 8px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 8px;
}

.erp-metric > span {
    display: grid;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    border-radius: 7px;
    place-items: center;
}

.erp-metric > span.green { color: #099b65; background: #dff8ed; }
.erp-metric > span.blue { color: #1f73d4; background: #e2f0ff; }
.erp-metric > span.purple { color: #764fc7; background: #eee7ff; }
.erp-metric > span.orange { color: #dd7e28; background: #fff0df; }
.erp-metric small { color: #8190a5; font-size: 7px; }
.erp-metric strong { color: #132c4c; font-size: 13px; white-space: nowrap; }
.erp-metric em { color: #11a36c; font-size: 6px; font-style: normal; }

.erp-dash-panels {
    display: grid;
    grid-template-columns: 1.7fr .8fr;
    gap: 8px;
    margin-top: 8px;
}

.erp-chart-card,
.erp-order-card,
.erp-activity,
.erp-quick-actions {
    padding: 11px;
    background: #fff;
    border: 1px solid #e6edf6;
    border-radius: 8px;
}

.erp-card-head strong,
.erp-quick-actions > strong {
    color: #172d4c;
    font-size: 9px;
}

.erp-card-head > span,
.erp-card-head > a {
    color: #77869c;
    font-size: 6px;
}

.erp-chart-card svg {
    width: 100%;
    height: 116px;
    margin-top: 5px;
}

.erp-chart-card .grid-lines line {
    stroke: #e9eff6;
    stroke-width: 1;
}

.erp-chart-card .area { fill: url(#heroChartFill); }
.erp-chart-card polyline { fill: none; stroke: #1c78e7; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.erp-donut,
.erp-small-donut {
    position: relative;
    display: grid;
    margin: 14px auto 10px;
    background: conic-gradient(#1877df 0 62%, #39c48a 62% 86%, #ffbf5b 86% 100%);
    border-radius: 50%;
    place-items: center;
}

.erp-donut { width: 78px; height: 78px; }
.erp-donut::before,
.erp-small-donut::before { position: absolute; content: ""; background: #fff; border-radius: 50%; }
.erp-donut::before { inset: 11px; }
.erp-donut > span { position: relative; z-index: 1; color: #173251; font-size: 11px; font-weight: 700; text-align: center; }
.erp-donut small { display: block; color: #7a899e; font-size: 5px; font-weight: 500; }
.erp-order-legend { display: flex; justify-content: center; gap: 7px; font-size: 5px; }
.erp-order-legend span { display: flex; align-items: center; gap: 3px; }
.erp-order-legend i { width: 5px; height: 5px; border-radius: 50%; }
.erp-order-legend .delivered { background: #1877df; }
.erp-order-legend .pending { background: #39c48a; }
.erp-order-legend .cancelled { background: #ffbf5b; }

.erp-dash-bottom {
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
}

.erp-activity { flex: 1.4; }
.erp-activity p { display: flex; gap: 7px; margin: 7px 0 0; font-size: 6px; line-height: 1.2; }
.erp-activity p i { color: var(--erp-green); }
.erp-activity p span { color: #42546c; }
.erp-activity p small { display: block; margin-top: 2px; color: #98a4b4; font-size: 5px; }
.erp-quick-actions { flex: 1; }
.erp-quick-actions > div { display: flex; gap: 4px; margin-top: 8px; }
.erp-quick-actions button { padding: 5px; color: #2768b5; font-size: 5px; background: #edf5ff; border: 0; border-radius: 4px; }

.erp-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    color: #193454;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e2ebf5;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(12, 47, 90, .16);
    animation: erpFloat 4.5s ease-in-out infinite;
}

.erp-float-card i { color: var(--erp-blue); }
.erp-float-card-one { top: -28px; right: 45px; }
.erp-float-card-two { right: -24px; bottom: 55px; animation-delay: -2s; }

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

/* Challenge */
.erp-challenge {
    position: relative;
    color: rgba(255, 255, 255, .75);
    background: linear-gradient(135deg, #071d36, #0b3653);
}

.erp-challenge::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .12;
    background-image: radial-gradient(circle at 70% 30%, #31a8f5 0, transparent 35%);
}

.erp-challenge .container { position: relative; z-index: 1; }
.erp-challenge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.erp-challenge-card { padding: 27px 20px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px; transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.erp-challenge-card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(59, 172, 244, .5); transform: translateY(-5px); }
.erp-challenge-card i { display: grid; width: 43px; height: 43px; margin-bottom: 19px; color: #45b4fa; font-size: 18px; background: rgba(57, 168, 237, .12); border-radius: 10px; place-items: center; }
.erp-page .erp-challenge-card h3 { margin-bottom: 9px; color: #fff; font-size: 18px; }
.erp-challenge-card p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 14px; line-height: 1.55; }
.erp-challenge-note { margin: 40px 0 0; color: #fff; font-size: 21px; font-weight: 600; text-align: center; }

/* Ecosystem */
.erp-intro { background: #fff; }
.erp-ecosystem { position: relative; width: min(100%, 650px); height: 530px; margin: auto; }
.erp-ecosystem::before { position: absolute; top: 50%; left: 50%; width: 62%; height: 1px; content: ""; background: rgba(37, 99, 235, .28); transform: translate(-50%, -50%) rotate(28deg); box-shadow: 0 0 8px rgba(37, 99, 235, .08); }
.erp-ecosystem-ring { position: absolute; top: 50%; left: 50%; border: 1.5px dashed rgba(37, 99, 235, .4); border-radius: 50%; box-shadow: 0 0 18px rgba(37, 99, 235, .035); transform: translate(-50%, -50%); }
.erp-ecosystem-ring::before { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; content: ""; background: var(--erp-blue); border-radius: 50%; box-shadow: 0 0 12px rgba(37, 99, 235, .65); }
.erp-ecosystem .ring-one { width: 330px; height: 330px; animation: erpSpin 24s linear infinite; }
.erp-ecosystem .ring-two { width: 470px; height: 470px; animation: erpSpinReverse 32s linear infinite; }
.erp-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 126px; height: 126px; color: #fff; background: linear-gradient(135deg, #1378e4, #0b4fba); border: 9px solid #e4f2ff; border-radius: 50%; box-shadow: 0 16px 35px rgba(20, 100, 206, .28); transform: translate(-50%, -50%); place-content: center; text-align: center; }
.erp-core span { font-size: 31px; font-weight: 700; }
.erp-core small { font-size: 8px; opacity: .8; text-transform: uppercase; }
.erp-eco-node { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; min-width: 135px; padding: 13px 16px; color: #183351; font-size: 14px; font-weight: 600; background: #fff; border: 1px solid #dfeaf6; border-radius: 40px; box-shadow: 0 12px 28px rgba(14, 51, 92, .1); transition: transform .2s ease, box-shadow .2s ease; }
.erp-eco-node:hover { transform: translateY(-4px); box-shadow: 0 17px 34px rgba(14, 51, 92, .16); }
.erp-eco-node i { display: grid; width: 33px; height: 33px; color: var(--erp-blue); background: #e9f4ff; border-radius: 50%; place-items: center; }
.node-sales { top: 18px; left: 50%; transform: translateX(-50%); }
.node-inventory { top: 93px; right: 18px; }
.node-purchase { top: 245px; right: 0; }
.node-crm { right: 45px; bottom: 55px; }
.node-accounting { bottom: 12px; left: 50%; transform: translateX(-50%); }
.node-hr { bottom: 55px; left: 35px; }
.node-projects { top: 245px; left: 0; }
.node-reports { top: 93px; left: 25px; }
.node-sales:hover, .node-accounting:hover { transform: translateX(-50%) translateY(-4px); }
@keyframes erpSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes erpSpinReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* Modules */
.erp-module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.erp-module-card { position: relative; min-height: 255px; padding: 27px 24px; overflow: hidden; background: #fff; border: 1px solid var(--erp-border); border-radius: 14px; box-shadow: 0 6px 20px rgba(14, 51, 92, .045); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.erp-module-card:hover { border-color: rgba(37, 99, 235, .35); box-shadow: 0 18px 38px rgba(14, 51, 92, .12); transform: translateY(-7px); }
.erp-module-card > span { display: grid; width: 48px; height: 48px; margin-bottom: 22px; font-size: 19px; border-radius: 12px; place-items: center; }
.erp-module-card .blue { color: #2675d8; background: #e6f1ff; }.erp-module-card .green { color: #0b9f65; background: #dcf7eb; }.erp-module-card .orange { color: #e27c25; background: #fff0df; }.erp-module-card .purple { color: #7950c8; background: #efe8ff; }.erp-module-card .cyan { color: #058eaf; background: #def6fb; }.erp-module-card .teal { color: #088a86; background: #dcf5f3; }.erp-module-card .red { color: #df5c58; background: #ffe7e5; }.erp-module-card .indigo { color: #575dcc; background: #e8e9ff; }.erp-module-card .amber { color: #c98411; background: #fff3d7; }.erp-module-card .violet { color: #8b45ca; background: #f1e5fc; }
.erp-module-card h3 { margin-bottom: 12px; font-size: 19px; line-height: 1.25; }
.erp-module-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.erp-module-card .action { position: absolute; right: 22px; bottom: 21px; color: var(--erp-blue); font-size: 13px; transition: transform .2s ease; }
.erp-module-card:hover .action { transform: translateX(4px); }

/* Dashboard device showcase */
.erp-check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.erp-check-list li { position: relative; padding-left: 29px; color: #334964; font-size: 16px; }
.erp-check-list li::before { position: absolute; top: 0; left: 0; color: var(--erp-green); content: "\f058"; font-family: var(--fontawesome); font-weight: 900; }
.erp-device-stage { position: relative; min-height: 520px; padding: 42px 50px 0 0; }
.erp-demo-badge { position: absolute; top: 0; left: 30%; padding: 7px 11px; background: #edf5fd; border-radius: 20px; }
.erp-laptop { position: relative; width: 87%; margin-left: 0; }
.erp-laptop-screen { display: grid; grid-template-columns: 58px 1fr; height: 435px; padding: 9px; overflow: hidden; background: #f6faff; border: 11px solid #172433; border-bottom-width: 18px; border-radius: 18px 18px 8px 8px; box-shadow: 0 25px 55px rgba(12, 40, 73, .2); }
.erp-laptop-base { width: 112%; height: 17px; margin-left: -6%; background: linear-gradient(#dce4eb, #9ba8b4); border-radius: 3px 3px 30px 30px; box-shadow: 0 8px 12px rgba(15, 35, 58, .18); }
.erp-mini-side { display: grid; align-content: start; justify-items: center; gap: 16px; padding: 11px 0; background: #0c2a49; border-radius: 6px; }
.erp-mini-side b { display: grid; width: 25px; height: 25px; color: #fff; background: var(--erp-blue); border-radius: 7px; place-items: center; }
.erp-mini-side i { width: 24px; height: 5px; background: rgba(255, 255, 255, .28); border-radius: 5px; }
.erp-mini-main { min-width: 0; padding: 15px; }
.erp-mini-top { display: flex; justify-content: space-between; font-size: 10px; }
.erp-mini-top span { color: #8998aa; font-size: 7px; }
.erp-mini-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 15px 0; }
.erp-mini-metrics > span { display: grid; padding: 11px 8px; background: #fff; border: 1px solid #e4ecf5; border-radius: 7px; }
.erp-mini-metrics small { color: #8997aa; font-size: 6px; }.erp-mini-metrics b { margin-top: 3px; color: #17304f; font-size: 11px; }
.erp-mini-content { display: grid; grid-template-columns: 1.7fr .65fr; gap: 9px; }
.erp-mini-chart, .erp-mini-report, .erp-mini-bars { padding: 12px; background: #fff; border: 1px solid #e4ecf5; border-radius: 7px; }
.erp-mini-chart strong, .erp-mini-report strong, .erp-mini-bars strong { color: #17304f; font-size: 8px; }
.erp-mini-chart svg { width: 100%; height: 130px; }.erp-mini-chart path { fill: none; stroke: #2079df; stroke-width: 4; }.erp-mini-chart line { stroke: #dfe7f1; }
.erp-small-donut { width: 75px; height: 75px; }.erp-small-donut::before { inset: 12px; }
.erp-mini-report p { display: flex; justify-content: space-between; margin: 5px 0; font-size: 6px; line-height: 1; }.erp-mini-report p b { color: #15304e; }
.erp-mini-bars { display: grid; gap: 8px; margin-top: 9px; }.erp-mini-bars span { width: var(--w); height: 7px; background: linear-gradient(90deg, #277cdf, #45b7ee); border-radius: 5px; }
.erp-phone { position: absolute; z-index: 4; right: 0; bottom: 18px; width: 170px; height: 340px; padding: 33px 14px 15px; background: #fff; border: 9px solid #142230; border-radius: 25px; box-shadow: 0 22px 48px rgba(11, 39, 73, .25); }
.erp-phone-notch { position: absolute; top: -1px; left: 50%; width: 72px; height: 16px; background: #142230; border-radius: 0 0 12px 12px; transform: translateX(-50%); }
.erp-phone > small { display: block; color: #8291a3; font-size: 7px; }.erp-phone > strong { display: block; margin-bottom: 14px; color: #142e4b; font-size: 12px; }
.erp-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.erp-phone-grid span { display: grid; gap: 5px; padding: 10px 7px; background: #f4f8fc; border-radius: 7px; }.erp-phone-grid i { color: var(--erp-blue); font-size: 10px; }.erp-phone-grid b { color: #17304d; font-size: 9px; }
.erp-phone-chart { display: flex; align-items: end; gap: 7px; height: 100px; margin-top: 20px; padding: 12px; background: #f5f9fd; border-radius: 8px; }.erp-phone-chart i { flex: 1; height: var(--h); background: linear-gradient(#36a2ee, #1d6dd2); border-radius: 3px 3px 0 0; }

/* Workflow */
.erp-workflow .erp-section-head.centered {
    max-width: 1100px;
}

.erp-workflow .erp-section-head.centered p {
    white-space: nowrap;
}

.erp-flow { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; margin-top: 60px; }
.erp-flow-line { position: absolute; z-index: 0; top: 37px; right: 7%; left: 7%; height: 2px; overflow: hidden; background: #d5e4f4; }
.erp-flow-line span { display: block; width: 22%; height: 100%; background: linear-gradient(90deg, transparent, #2581e8, transparent); animation: erpFlow 3.5s linear infinite; }
@keyframes erpFlow { from { transform: translateX(-100%); } to { transform: translateX(550%); } }
.erp-flow-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 15px; color: #203b59; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; }
.erp-flow-step i { display: grid; width: 74px; height: 74px; color: var(--erp-blue); font-size: 25px; background: #fff; border: 1px solid #dce8f5; border-radius: 50%; box-shadow: 0 9px 22px rgba(20, 65, 112, .09); place-items: center; transition: color .2s ease, background .2s ease, transform .2s ease; }
.erp-flow-step:hover i { color: #fff; background: var(--erp-blue); transform: translateY(-5px); }

/* Benefits */
.erp-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.erp-benefit-card { position: relative; padding: 31px 28px 29px 81px; background: #fff; border: 1px solid var(--erp-border); border-radius: 13px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.erp-benefit-card:hover { border-color: rgba(37, 99, 235, .32); box-shadow: 0 15px 35px rgba(16, 56, 101, .09); transform: translateY(-5px); }
.erp-benefit-card > i { position: absolute; top: 29px; left: 26px; display: grid; width: 40px; height: 40px; color: var(--erp-blue); background: var(--erp-blue-light); border-radius: 10px; place-items: center; }
.erp-benefit-card h3 { margin-bottom: 8px; font-size: 18px; }.erp-benefit-card p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Industries */
.erp-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.erp-industry-card { position: relative; display: flex; align-items: center; gap: 20px; min-height: 150px; padding: 27px; overflow: hidden; background: #fff; border: 1px solid var(--erp-border); border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.erp-industry-card::after { position: absolute; right: -38px; bottom: -52px; width: 120px; height: 120px; content: ""; background: rgba(37, 99, 235, .06); border-radius: 50%; }
.erp-industry-card:hover { box-shadow: 0 16px 36px rgba(16, 56, 101, .1); transform: translateY(-5px); }
.erp-industry-card > i { display: grid; flex: 0 0 60px; width: 60px; height: 60px; color: #fff; font-size: 23px; background: linear-gradient(135deg, #1e75d8, #18a4ce); border-radius: 14px; place-items: center; }
.erp-industry-card h3 { margin-bottom: 6px; font-size: 18px; }.erp-industry-card p { margin: 0; font-size: 13px; line-height: 1.45; }

/* Why */
.erp-why-highlight { display: flex; align-items: center; gap: 16px; margin-top: 34px; padding: 20px; background: var(--erp-surface); border-left: 3px solid var(--erp-blue); border-radius: 0 10px 10px 0; }
.erp-why-highlight > i { display: grid; width: 48px; height: 48px; color: var(--erp-blue); background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(20, 64, 110, .1); place-items: center; }
.erp-why-highlight span { display: grid; }.erp-why-highlight strong { color: var(--erp-ink); }.erp-why-highlight small { margin-top: 2px; }
.erp-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.erp-why-grid article { position: relative; padding: 24px 22px 22px 68px; background: #fff; border: 1px solid var(--erp-border); border-radius: 12px; transition: background .2s ease, transform .2s ease; }
.erp-why-grid article:hover { background: #f7fbff; transform: translateY(-4px); }
.erp-why-grid article > i { position: absolute; top: 23px; left: 20px; display: grid; width: 35px; height: 35px; color: var(--erp-blue); background: var(--erp-blue-light); border-radius: 9px; place-items: center; }
.erp-why-grid h3 { margin-bottom: 7px; font-size: 17px; }.erp-why-grid p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Customizer */
.erp-custom .erp-section-head.centered {
    max-width: 1100px;
}

.erp-custom .erp-section-head.centered p {
    white-space: nowrap;
}

.erp-customizer { display: grid; grid-template-columns: 250px 1fr; max-width: 1060px; margin: auto; overflow: hidden; background: #fff; border: 1px solid #dbe7f4; border-radius: 18px; box-shadow: 0 24px 55px rgba(15, 55, 99, .11); }
.erp-custom-tabs { display: grid; align-content: center; gap: 4px; padding: 25px 16px; background: #0d2948; }
.erp-custom-tabs button { display: flex; align-items: center; gap: 11px; padding: 11px 13px; color: #b8cbe0; font-size: 13px; text-align: left; background: transparent; border: 0; border-radius: 7px; transition: color .18s ease, background .18s ease; }
.erp-custom-tabs button:hover, .erp-custom-tabs button.active { color: #fff; background: rgba(40, 127, 227, .35); }
.erp-custom-tabs button i { width: 18px; text-align: center; }
.erp-custom-preview { min-width: 0; padding: 20px 28px 35px; }
.erp-preview-top { padding-bottom: 17px; border-bottom: 1px solid #e7edf5; }
.erp-preview-top > span { display: flex; gap: 5px; }.erp-preview-top i { width: 7px; height: 7px; background: #cfdae6; border-radius: 50%; }.erp-preview-top small { color: #8391a3; font-size: 10px; }
.erp-preview-body { display: grid; grid-template-columns: 82px 1fr; gap: 25px; align-items: center; min-height: 200px; padding: 30px 15px 20px; }
.erp-preview-icon { display: grid; width: 82px; height: 82px; color: #fff; font-size: 28px; background: linear-gradient(135deg, #1b75dd, #14a7d3); border-radius: 21px; box-shadow: 0 14px 28px rgba(27, 117, 221, .22); place-items: center; }
.erp-preview-body span { color: var(--erp-blue); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }.erp-preview-body h3 { margin: 7px 0 10px; font-size: 27px; }.erp-preview-body p { max-width: 620px; margin: 0; font-size: 15px; }
.erp-preview-options { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 15px; }.erp-preview-options span { padding: 9px 13px; color: #53677e; font-size: 12px; background: #f2f6fa; border: 1px solid #e2eaf3; border-radius: 7px; }.erp-preview-options span.selected { color: #087d51; background: #e9f9f2; border-color: #c7eedf; }.erp-preview-options i { margin-right: 6px; }

/* Security */
.erp-security-panel { position: relative; padding: 70px; overflow: hidden; background: linear-gradient(135deg, #071d38, #0c4563); border-radius: 22px; box-shadow: 0 25px 55px rgba(8, 42, 77, .2); }
.erp-security-panel::after { position: absolute; top: -160px; right: -100px; width: 450px; height: 450px; content: ""; background: radial-gradient(circle, rgba(30, 150, 214, .25), transparent 65%); border-radius: 50%; }
.erp-security-panel .row { position: relative; z-index: 1; }
.erp-security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.erp-security-grid span { display: flex; align-items: center; gap: 13px; padding: 17px 18px; color: #fff; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 10px; }
.erp-security-grid i { display: grid; width: 35px; height: 35px; color: #49c6f1; background: rgba(47, 176, 224, .12); border-radius: 8px; place-items: center; }

/* Final CTA */
.erp-final-cta { padding: 0 0 120px; }
.erp-cta-panel { position: relative; padding: 67px 70px; overflow: hidden; color: rgba(255, 255, 255, .8); background: linear-gradient(125deg, #0a2c62, #1167bd); border-radius: 22px; box-shadow: 0 25px 55px rgba(16, 76, 143, .24); }
.erp-cta-panel .row { position: relative; z-index: 2; }.erp-cta-panel .erp-kicker { color: #fff; }.erp-page .erp-cta-panel h2 { margin-bottom: 15px; color: #f7fbff; font-size: clamp(34px, 4vw, 50px); text-shadow: 0 2px 12px rgba(4, 27, 62, .18); }.erp-cta-panel p { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 17px; }
.erp-cta-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(to left, #000, transparent 70%); }
.erp-cta-actions { display: grid; justify-content: end; gap: 12px; }
.erp-cta-primary, .erp-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 185px; padding: 14px 20px; font-weight: 600; border-radius: 7px; }
.erp-cta-primary { color: var(--erp-blue); background: #fff; }.erp-cta-primary:hover { color: #fff; background: var(--erp-green); }
.erp-cta-secondary { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }.erp-cta-secondary:hover { color: var(--erp-navy); background: #fff; }

/* Responsive */
@media (max-width: 1199px) {
    .erp-hero { min-height: auto; padding: 90px 0 100px; }
    .erp-hero-copy h1 { font-size: 52px; }
    .erp-dashboard { grid-template-columns: 92px 1fr; min-height: 470px; }
    .erp-dash-sidebar nav a { gap: 6px; padding: 8px 4px; font-size: 8px; }
    .erp-dash-main { padding: 13px; }
    .erp-metric strong { font-size: 11px; }
    .erp-module-grid { grid-template-columns: repeat(3, 1fr); }
    .erp-challenge-grid { grid-template-columns: 1fr 1fr; }
    .erp-device-stage { min-height: 480px; }
    .erp-laptop-screen { height: 400px; }
    .erp-flow { gap: 10px; }
    .erp-flow-step i { width: 66px; height: 66px; }
}

@media (max-width: 991px) {
    .erp-hero { padding-top: 80px; }
    .erp-dashboard-wrap { margin: 25px 15px 0; }
    .erp-dashboard { transform: none; }
    .erp-section-head.centered { margin-bottom: 40px; }
    .erp-ecosystem { margin-top: 10px; }
    .erp-module-grid { grid-template-columns: repeat(2, 1fr); }
    .erp-device-stage { max-width: 760px; margin: auto; }
    .erp-flow { grid-template-columns: repeat(4, 1fr); row-gap: 35px; }
    .erp-flow-line { display: none; }
    .erp-benefit-grid, .erp-industry-grid { grid-template-columns: 1fr 1fr; }
    .erp-customizer { grid-template-columns: 210px 1fr; }
    .erp-security-panel { padding: 55px 45px; }
    .erp-cta-panel { padding: 55px 45px; }
    .erp-cta-actions { display: flex; justify-content: start; flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .erp-page .default-padding { padding-top: 75px; padding-bottom: 75px; }
    .erp-hero { padding: 70px 0 80px; }
    .erp-hero-copy h1 { font-size: 40px; letter-spacing: -1px; }
    .erp-hero-copy > p { font-size: 16px; }
    .erp-hero-actions { display: grid; }
    .erp-hero-actions > * { width: 100%; justify-content: center; text-align: center; }
    .erp-hero-trust { display: grid; }
    .erp-dashboard-wrap { margin-right: 0; margin-left: 0; }
    .erp-dashboard { grid-template-columns: 50px minmax(560px, 1fr); min-height: 410px; overflow-x: auto; border-width: 5px; border-radius: 15px; }
    .erp-dash-sidebar { padding: 17px 7px; }
    .erp-dash-brand strong, .erp-dash-sidebar nav span { display: none; }
    .erp-dash-brand { justify-content: center; padding-bottom: 18px; }
    .erp-dash-sidebar nav a { justify-content: center; font-size: 11px; }
    .erp-float-card { display: none; }
    .erp-section-head h2 { font-size: 33px; }
    .erp-section-head p { font-size: 16px; }
    .erp-challenge-grid { grid-template-columns: 1fr; }
    .erp-challenge-note { font-size: 18px; }
    .erp-ecosystem { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; height: auto; }
    .erp-ecosystem::before, .erp-ecosystem-ring { display: none; }
    .erp-core { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: 105px; height: 105px; margin: 0 auto 12px; transform: none; }
    .erp-eco-node { position: relative; inset: auto; min-width: 0; padding: 11px; font-size: 12px; transform: none; }
    .erp-eco-node:hover, .node-sales:hover, .node-accounting:hover { transform: translateY(-3px); }
    .erp-eco-node i { width: 30px; height: 30px; }
    .erp-module-grid { grid-template-columns: 1fr; }
    .erp-module-card { min-height: 225px; }
    .erp-device-stage { min-height: 390px; padding: 32px 20px 0 0; }
    .erp-demo-badge { left: 8%; }
    .erp-laptop { width: 100%; overflow: hidden; }
    .erp-laptop-screen { grid-template-columns: 38px 430px; height: 325px; overflow-x: auto; border-width: 7px; border-bottom-width: 13px; }
    .erp-mini-main { padding: 10px; }
    .erp-phone { right: -4px; bottom: 5px; width: 118px; height: 245px; padding: 26px 8px 10px; border-width: 6px; border-radius: 18px; }
    .erp-phone-notch { width: 52px; height: 11px; }
    .erp-phone-grid { gap: 4px; }.erp-phone-grid span { padding: 6px 4px; }.erp-phone-chart { gap: 4px; height: 66px; margin-top: 12px; padding: 8px; }
    .erp-flow { grid-template-columns: 1fr 1fr; }
    .erp-workflow .erp-section-head.centered p { white-space: normal; }
    .erp-benefit-grid, .erp-industry-grid, .erp-why-grid { grid-template-columns: 1fr; }
    .erp-customizer { grid-template-columns: 1fr; }
    .erp-custom .erp-section-head.centered p { white-space: normal; }
    .erp-custom-tabs { display: flex; align-items: center; overflow-x: auto; padding: 13px; }
    .erp-custom-tabs button { flex: 0 0 auto; white-space: nowrap; }
    .erp-custom-preview { padding: 17px 18px 28px; }
    .erp-preview-body { grid-template-columns: 1fr; gap: 18px; padding: 25px 4px 20px; }
    .erp-preview-icon { width: 62px; height: 62px; font-size: 22px; border-radius: 16px; }
    .erp-preview-body h3 { font-size: 23px; }
    .erp-security-panel { padding: 42px 23px; border-radius: 17px; }
    .erp-security-grid { grid-template-columns: 1fr; }
    .erp-final-cta { padding-bottom: 80px; }
    .erp-cta-panel { padding: 45px 24px; border-radius: 17px; }
    .erp-cta-panel h2 { font-size: 32px; }
    .erp-cta-actions { display: grid; }
    .erp-cta-primary, .erp-cta-secondary { width: 100%; }
}

@media (max-width: 430px) {
    .erp-hero-copy h1 { font-size: 36px; }
    .erp-ecosystem { grid-template-columns: 1fr; }
    .erp-core { grid-column: 1; }
    .erp-flow { grid-template-columns: 1fr 1fr; gap: 28px 10px; }
    .erp-flow-step i { width: 60px; height: 60px; }
    .erp-benefit-card { padding: 75px 23px 23px; }
    .erp-benefit-card > i { top: 22px; left: 23px; }
    .erp-industry-card { align-items: flex-start; padding: 22px; }
    .erp-industry-card > i { flex-basis: 50px; width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .erp-page *, .erp-page *::before, .erp-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}