.erp-page {
    --navy-950: #06152a;
    --navy-900: #0a1d37;
    --navy-850: #102642;
    --navy-800: #142c49;
    --blue: #2f7fda;
    --blue-light: #8cc9ff;
    --cyan: #79d6ff;
    --ink: #0b1d38;
    --muted: #536174;
    --line: #dce4ee;
    --soft: #f3f7fb;
    --white: #ffffff;
    --success: #2fc888;
    --warning: #f2a93b;
    --shadow: 0 24px 65px rgba(6, 21, 42, .14);
    --radius: 26px;
    --container: min(1240px, calc(100% - 48px));
    color: var(--ink);
    background: var(--white);
    font-family: 'Manrope', sans-serif;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.erp-page,
.erp-page *,
.erp-page *::before,
.erp-page *::after { box-sizing: border-box; }

.erp-page img { max-width: 100%; height: auto; }

.erp-page button,
.erp-page input { font: inherit; }

.erp-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.erp-page .sw-container {
    width: var(--container);
    margin-inline: auto;
}

.erp-hero {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 8% 18%, rgba(40, 127, 255, .22), transparent 26%),
        radial-gradient(circle at 91% 16%, rgba(121, 214, 255, .12), transparent 24%),
        linear-gradient(135deg, #06152a 0%, #0b203b 55%, #07172b 100%);
    padding: 92px 0 38px;
}

.erp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.erp-hero__orb {
    position: absolute;
    border: 1px solid rgba(95, 162, 255, .22);
    border-radius: 50%;
    animation: floatOrb 10s ease-in-out infinite;
}

.erp-hero__orb--one {
    width: 320px;
    height: 320px;
    right: 8%;
    top: -170px;
}

.erp-hero__orb--two {
    width: 220px;
    height: 220px;
    left: -90px;
    bottom: -100px;
    animation-delay: -4s;
}

@keyframes floatOrb {
    50% { transform: translate3d(0, 18px, 0) scale(1.04); }
}

.erp-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(500px, .98fr);
    gap: 74px;
    align-items: center;
}

.erp-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue-light);
}

.erp-page .eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    flex: 0 0 30px;
    background: linear-gradient(90deg, transparent, currentColor);
}

.erp-page .eyebrow--blue { color: var(--blue); }

.erp-page h1,
.erp-page h2,
.erp-page h3,
.erp-page p { margin-top: 0; }

.erp-page h1 {
    max-width: 760px;
    margin-bottom: 24px;
    font-size: clamp(46px, 5.35vw, 82px);
    line-height: .98;
    letter-spacing: -.055em;
}

.erp-page h2 {
    margin-bottom: 22px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.erp-page h1,
.erp-page h2,
.erp-page h3 {
    font-family: 'Sora', sans-serif;
}

.erp-page h3 {
    line-height: 1.18;
    letter-spacing: -.02em;
}

.erp-hero__lead {
    max-width: 720px;
    margin-bottom: 32px;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.65;
    color: rgba(255,255,255,.76);
}

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

.erp-page .button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.erp-page .button:hover,
.erp-page .button:focus {
    transform: translateY(-2px);
}

.erp-page .button--primary {
    color: var(--white);
    background: var(--blue);
    box-shadow: 0 13px 34px rgba(40,127,255,.3);
}

.erp-page .button--ghost {
    color: var(--white);
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.06);
}

.erp-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 700;
}

.erp-hero__proof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.erp-hero__proof li::before {
    content: "✓";
    color: var(--cyan);
    font-weight: 900;
}

.erp-flow {
    position: relative;
    min-height: 520px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 30px;
    background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    box-shadow: 0 45px 90px rgba(0,0,0,.3);
    overflow: hidden;
}

.erp-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(40,127,255,.18), transparent 34%),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: auto, 34px 34px, 34px 34px;
}

.erp-flow__header,
.erp-flow__footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    background: rgba(4,14,28,.72);
}

.erp-flow__header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
}

.erp-flow__header small {
    margin-left: auto;
    color: rgba(255,255,255,.48);
    letter-spacing: 0;
    font-weight: 600;
}

.status-dot,
.online {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 6px rgba(47,200,136,.11);
}

.erp-flow__canvas {
    position: relative;
    z-index: 2;
    min-height: 398px;
}

.flow-node {
    position: absolute;
    z-index: 4;
    width: 154px;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px 14px 52px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(11,32,59,.94);
    box-shadow: 0 18px 35px rgba(0,0,0,.24);
}

.flow-node strong { font-size: 14px; }

.flow-node small {
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255,255,255,.58);
}

.flow-node__icon {
    position: absolute;
    left: 14px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 900;
    color: var(--white);
    background: rgba(40,127,255,.24);
}

.flow-node--customer { left: 26px; top: 42px; }
.flow-node--store { left: 50%; top: 42px; transform: translateX(-50%); }
.flow-node--erp { right: 26px; top: 42px; }

.flow-node--primary {
    border-color: rgba(95,162,255,.55);
    background: linear-gradient(145deg, #153b68, #102642);
}

.flow-node--small {
    width: 126px;
    min-height: 66px;
    padding: 12px;
    text-align: center;
}

.flow-node--inventory { left: 40px; top: 270px; }
.flow-node--pricing { left: 50%; top: 270px; transform: translateX(-50%); }
.flow-node--orders { right: 40px; top: 270px; }

.flow-line,
.flow-branch {
    position: absolute;
    z-index: 2;
    height: 2px;
    overflow: visible;
    background: rgba(95,162,255,.24);
}

.flow-line--one {
    left: 180px;
    right: calc(50% + 77px);
    top: 82px;
}

.flow-line--two {
    left: calc(50% + 77px);
    right: 180px;
    top: 82px;
}

.flow-line i {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 15px var(--cyan);
    animation: dataPulse 2.3s linear infinite;
}

.flow-line--two i { animation-delay: -1.15s; }

@keyframes dataPulse {
    from { left: 0; }
    to { left: calc(100% - 6px); }
}

.flow-branch {
    top: 124px;
    width: 2px;
    height: 146px;
}

.flow-branch::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-light);
    box-shadow: 0 0 14px rgba(95,162,255,.9);
}

.flow-branch--one { left: 103px; }
.flow-branch--two { left: 50%; }
.flow-branch--three { right: 103px; }

.erp-flow__footer {
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 10px;
    color: rgba(255,255,255,.55);
}

.erp-flow__footer b {
    color: var(--white);
    font-size: 16px;
    margin-right: 4px;
}

.erp-hero__systems {
    position: relative;
    z-index: 2;
    margin-top: 62px;
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.erp-hero__systems > span {
    color: rgba(255,255,255,.42);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.erp-hero__systems div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 28px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    letter-spacing: .05em;
}

.erp-page .section { padding: 110px 0; }

.erp-page .section--white { background: var(--white); }
.erp-page .section--soft { background: var(--soft); }
.erp-page .section--navy {
    color: var(--white);
    background:
        radial-gradient(circle at 82% 10%, rgba(40,127,255,.15), transparent 28%),
        linear-gradient(135deg, #06152a, #0b203b);
}

.section-lead {
    font-size: 19px;
    color: var(--muted);
}

.erp-page .section--navy .section-lead { color: rgba(255,255,255,.74); }

.split-intro,
.workflow-grid,
.ai-grid,
.architecture-grid,
.video-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
    gap: 80px;
    align-items: center;
}

.split-intro p:not(.section-lead) {
    color: var(--muted);
    font-size: 16px;
}

.definition-card {
    padding: 34px;
    border-radius: var(--radius);
    color: var(--white);
    background: linear-gradient(145deg, var(--navy-900), var(--navy-800));
    box-shadow: var(--shadow);
}

.definition-card__top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 23px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.definition-card__top span {
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--blue-light);
    font-weight: 900;
}

.definition-card__top b { font-size: 19px; }

.definition-card p { color: rgba(255,255,255,.82); }

.definition-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.definition-card li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
}

.definition-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan);
}

.section-heading {
    margin-bottom: 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr);
    gap: 70px;
    align-items: end;
}

.section-heading h2 { margin-bottom: 0; }

.section-heading > p {
    margin-bottom: 4px;
    color: var(--muted);
}

.section-heading--light > p { color: rgba(255,255,255,.62); }

.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.capability-card {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid rgba(10, 29, 55, .1);
    border-radius: 22px;
    color: var(--ink);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 18px 38px rgba(1, 8, 19, .2);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.capability-card:hover {
    transform: translateY(-6px);
    border-color: rgba(47, 127, 218, .38);
    box-shadow: 0 24px 48px rgba(1, 8, 19, .28);
}

.card-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 34px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 900;
    color: var(--blue);
    background: #e8f2ff;
}

.capability-card h3 {
    color: var(--ink);
    font-size: 21px;
}

.capability-card p {
    color: var(--muted);
    font-size: 14px;
}

.capability-card a {
    margin-top: auto;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.capability-card a::after { content: "  \2192"; }

.feature-list {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.feature-list > div {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 18px;
    align-items: start;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--white);
}

.feature-list span {
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e9f2ff;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.feature-list p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px;
}

.feature-list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 15px;
}

.quickorder-demo {
    position: relative;
    overflow: hidden;
    border: 9px solid var(--navy-900);
    border-radius: 25px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.quickorder-demo__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    color: white;
    background: var(--navy-900);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.quickorder-demo__bar i {
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
}

.quickorder-demo__tools {
    display: flex;
    gap: 8px;
    padding: 16px 16px 0;
}

.quickorder-demo__tools button {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.quickorder-demo__tools .active {
    color: white;
    background: var(--blue);
    border-color: var(--blue);
}

.qo-table { padding: 16px; }

.qo-row {
    display: grid;
    grid-template-columns: 1.3fr .4fr .9fr .8fr .7fr;
    gap: 8px;
    align-items: center;
    padding: 13px 10px;
    border-bottom: 1px solid #edf1f5;
    font-size: 11px;
}

.qo-row--header {
    border-radius: 8px;
    color: var(--muted);
    background: var(--soft);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.qo-row .available { color: var(--success); font-weight: 900; }
.qo-row .limited { color: var(--warning); font-weight: 900; }

.quickorder-demo__summary {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    background: var(--soft);
    font-size: 11px;
}

.quickorder-demo__summary strong { font-size: 18px; }

.quickorder-demo__summary button,
.ai-actions button,
.slide-cart button {
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    color: white;
    background: var(--blue);
    font-size: 10px;
    font-weight: 900;
}

.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 20%;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 15px rgba(121,214,255,.85);
    animation: scanQuickOrder 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scanQuickOrder {
    0%, 100% { top: 22%; opacity: 0; }
    10%, 90% { opacity: 1; }
    50% { top: 84%; }
}

.ai-window {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: white;
    box-shadow: var(--shadow);
}

.ai-window__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 18px;
    color: white;
    background: var(--navy-900);
}

.ai-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: linear-gradient(145deg, var(--blue), #50a9ff);
    font-size: 12px;
    font-weight: 900;
}

.ai-window__header strong,
.ai-window__header small { display: block; }

.ai-window__header small { color: rgba(255,255,255,.55); font-size: 10px; }

.ai-message {
    max-width: 84%;
    margin: 22px;
    padding: 17px 18px;
    border-radius: 17px;
    font-size: 13px;
}

.ai-message--user {
    margin-left: auto;
    color: white;
    background: var(--blue);
    border-bottom-right-radius: 4px;
}

.ai-message--assistant {
    background: var(--soft);
    border-bottom-left-radius: 4px;
}

.ai-message p {
    margin: 7px 0 0;
    color: var(--muted);
}

.ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ai-actions button:last-child {
    color: var(--blue);
    background: white;
    border: 1px solid #cfe0f7;
}

.check-list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding: 12px 0 12px 32px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--blue);
    font-weight: 900;
}

.pdf-stage {
    position: relative;
    min-height: 620px;
    padding: 36px 285px 36px 36px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 30px;
    background: rgba(255,255,255,.04);
}

.pdf-document {
    min-height: 548px;
    overflow: hidden;
    border-radius: 17px;
    background: white;
    box-shadow: 0 30px 65px rgba(0,0,0,.25);
}

.pdf-document__toolbar {
    display: flex;
    justify-content: space-between;
    padding: 13px 18px;
    color: #cbd7e5;
    background: #1a2b41;
    font-size: 10px;
}

.pdf-document__page {
    width: min(78%, 620px);
    min-height: 455px;
    margin: 28px auto;
    padding: 28px;
    color: var(--ink);
    background: #fbfbfb;
    box-shadow: 0 7px 25px rgba(0,0,0,.1);
}

.pdf-title {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .12em;
}

.pdf-drawing {
    position: relative;
    margin-top: 20px;
    border: 1px solid #d8dee6;
    background: white;
}

.pdf-drawing--assembly {
    aspect-ratio: 1103 / 720;
    overflow: hidden;
}

.pdf-drawing--assembly img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.part {
    position: absolute;
    z-index: 4;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: white;
    background: var(--blue);
    box-shadow: 0 0 0 7px rgba(40,127,255,.15), 0 7px 16px rgba(40,127,255,.3);
    cursor: pointer;
    transition: transform .2s ease;
    transform: translate(-50%, -50%);
}

.part:hover,
.part:focus-visible,
.part.active { transform: translate(-50%, -50%) scale(1.14); }

.part:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
}

.part span { font-size: 10px; font-weight: 900; }
.part--one { left: 16.7%; top: 60.8%; }
.part--two { left: 10.8%; top: 63.8%; }
.part--three { left: 33.3%; top: 73.8%; }
.part--four { left: 42%; top: 50.1%; }
.part--five { left: 36.5%; top: 31%; }
.part--six { left: 48.5%; top: 47.9%; }
.part--seven { left: 61.7%; top: 43.1%; }

.pdf-note {
    margin-top: 16px;
    color: var(--muted);
    font-size: 11px;
}

.slide-cart {
    position: absolute;
    z-index: 6;
    top: 70px;
    right: 0;
    width: 320px;
    min-height: 474px;
    display: grid;
    grid-template-columns: 34px 1fr;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
    box-shadow: -24px 30px 60px rgba(0,0,0,.25);
    transform: translateX(255px);
    transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.pdf-stage:hover .slide-cart,
.slide-cart.is-open { transform: translateX(0); }

.slide-cart__handle {
    display: grid;
    place-items: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: white;
    background: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    cursor: pointer;
}

.slide-cart__content {
    padding: 27px 22px;
    color: var(--ink);
    background: white;
}

.mini-label {
    color: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
}

.slide-cart h3 {
    margin: 18px 0 3px;
    font-size: 28px;
}

.slide-cart p { color: var(--muted); }

.availability-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    font-size: 12px;
}

.availability-row strong { color: var(--success); }

.slide-cart label {
    display: grid;
    gap: 6px;
    margin-top: 17px;
    font-size: 11px;
    font-weight: 900;
}

.slide-cart input {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.slide-cart button {
    width: 100%;
    margin-top: 17px;
}

.results-grid,
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.results-grid article,
.process-grid article {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: white;
}

.results-grid strong {
    display: block;
    margin-bottom: 22px;
    color: var(--blue);
    font-size: 26px;
}

.results-grid h3 { font-size: 20px; }

.results-grid p,
.process-grid p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 14px;
}

.architecture-map {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
}

.architecture-center {
    position: relative;
    z-index: 5;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    text-align: center;
    color: white;
    background: linear-gradient(145deg, var(--blue), #1356c9);
    box-shadow: 0 0 0 18px rgba(40,127,255,.09), 0 25px 50px rgba(40,127,255,.25);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.architecture-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed #b9cbe0;
    animation: rotateRing 32s linear infinite;
}

.architecture-ring--one { width: 330px; height: 330px; }
.architecture-ring--two { width: 470px; height: 470px; animation-direction: reverse; }

@keyframes rotateRing { to { transform: rotate(360deg); } }

.architecture-node {
    position: absolute;
    z-index: 6;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 19px;
    color: var(--ink);
    background: white;
    box-shadow: 0 12px 28px rgba(6,21,42,.12);
    font-size: 11px;
    font-weight: 900;
}

.architecture-node--one { top: 55px; left: 50%; transform: translateX(-50%); }
.architecture-node--two { right: 60px; top: 135px; }
.architecture-node--three { right: 82px; bottom: 88px; }
.architecture-node--four { bottom: 38px; left: 50%; transform: translateX(-50%); }
.architecture-node--five { left: 82px; bottom: 88px; }
.architecture-node--six { left: 60px; top: 135px; }

.process-grid {
    grid-template-columns: repeat(3, 1fr);
}

.process-grid span {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
}

.video-section h2 { max-width: 660px; }

.video-placeholder {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 25px;
    text-align: center;
    background:
        linear-gradient(rgba(6,21,42,.48), rgba(6,21,42,.82)),
        radial-gradient(circle at center, rgba(40,127,255,.55), transparent 45%);
    background-repeat: no-repeat;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

.video-play {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.video-play span {
    width: 0;
    height: 0;
    margin-left: 7px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid white;
}

.video-placeholder strong,
.video-placeholder small { display: block; }
.video-placeholder small { color: rgba(255,255,255,.55); }

.video-placeholder iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border: 0;
}

.faq-list {
    max-width: 980px;
    margin-inline: auto;
}

.faq-list details {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: white;
    overflow: hidden;
}

.faq-list summary {
    position: relative;
    padding: 22px 60px 22px 23px;
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue);
    font-size: 24px;
}

.faq-list details[open] summary::after { content: "−"; }

.faq-list details p {
    margin: 0;
    padding: 0 24px 23px;
    color: var(--muted);
}

.final-cta {
    border-top: 1px solid rgba(10, 29, 55, .06);
}

.final-cta .cta-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 38px;
    border: 1px solid rgba(116, 151, 198, .18);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(54, 163, 255, .14), transparent 34%),
        linear-gradient(180deg, #12243b 0%, #0a1a33 100%);
    box-shadow: 0 22px 48px rgba(4, 12, 24, .2);
}

.final-cta .cta-inline h2 {
    max-width: 780px;
    margin-bottom: 12px;
    color: #ecf4ff;
}

.final-cta .cta-inline p {
    max-width: 790px;
    margin-bottom: 0;
    color: #c3d5eb;
    font-size: 18px;
}

.final-cta .cta-inline .btn {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .erp-hero__grid,
    .split-intro,
    .workflow-grid,
    .ai-grid,
    .architecture-grid,
    .video-grid {
        grid-template-columns: 1fr;
    }

    .erp-hero__grid > *,
    .split-intro > *,
    .workflow-grid > *,
    .ai-grid > *,
    .architecture-grid > *,
    .video-grid > * {
        min-width: 0;
    }

    .erp-hero__grid { gap: 52px; }
    .erp-flow { max-width: 720px; width: 100%; }

    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .results-grid { grid-template-columns: repeat(2, 1fr); }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .final-cta .cta-inline { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .erp-page { --container: min(1240px, calc(100% - 28px)); }

    .erp-page .section { padding: 78px 0; }
    .erp-hero { padding-top: 66px; }

    .erp-page h1 {
        max-width: 100%;
        font-size: clamp(40px, 12vw, 56px);
        overflow-wrap: anywhere;
    }
    .erp-page h2 { font-size: clamp(34px, 10vw, 48px); }

    .erp-hero__actions {
        flex-direction: column;
    }

    .erp-hero__actions .button {
        width: 100%;
    }

    .erp-hero__systems {
        align-items: flex-start;
        flex-direction: column;
    }

    .erp-hero__systems div {
        justify-content: flex-start;
        gap: 18px;
    }

    .erp-flow {
        min-height: auto;
        padding-bottom: 0;
    }

    .erp-flow__canvas {
        min-height: 580px;
    }

    .flow-node--customer,
    .flow-node--store,
    .flow-node--erp,
    .flow-node--inventory,
    .flow-node--pricing,
    .flow-node--orders {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(82%, 300px);
    }

    .flow-node--customer { top: 28px; }
    .flow-node--store { top: 125px; }
    .flow-node--erp { top: 222px; }
    .flow-node--inventory { top: 355px; }
    .flow-node--pricing { top: 430px; }
    .flow-node--orders { top: 505px; }

    .flow-line,
    .flow-branch { display: none; }

    .erp-flow__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .capability-grid,
    .results-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }

    .capability-card { min-height: 240px; }

    .quickorder-demo { border-width: 5px; }

    .qo-row {
        grid-template-columns: 1.1fr .35fr .8fr;
    }

    .qo-row span:nth-child(4),
    .qo-row span:nth-child(5) {
        display: none;
    }

    .quickorder-demo__summary {
        grid-template-columns: 1fr;
    }

    .pdf-stage {
        min-height: 750px;
        padding: 20px;
    }

    .pdf-document__page { width: 94%; }

    .slide-cart {
        top: auto;
        bottom: 0;
        width: calc(100% - 22px);
        max-width: 360px;
        transform: translateX(calc(100% - 34px));
    }

    .pdf-stage:hover .slide-cart { transform: translateX(calc(100% - 34px)); }
    .slide-cart.is-open { transform: translateX(0) !important; }

    .architecture-map {
        min-height: 380px;
        transform: scale(.76);
        margin: -25px;
    }

    .final-cta .cta-inline {
        padding: 28px 22px;
    }

    .final-cta .cta-inline .btn {
        width: 100%;
    }
}

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

.reveal-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}