.product-page { background: var(--cream); }
.product-hero { align-items: end; background-color: var(--dark); background-position: center; background-size: cover; display: flex; min-height: min(720px, 82vh); padding: 128px var(--pad) 80px; position: relative; }
.product-hero--erp { background-image: url('/img/unsplash-1509440159596-0249088772ff-1920.jpg'); }
.product-hero--mis { background-image: url('/img/unsplash-1556742049-0cfed4f6a45d-1800.jpg'); }
.product-hero--references { background-image: url('/img/unsplash-1509440159596-0249088772ff-1920.jpg'); }
.product-hero--external-orders { background-image: url('/img/unsplash-1556742049-0cfed4f6a45d-1800.jpg'); }
.product-hero--external-orders h1 { line-height: .98; }
.product-hero--external-orders h1 span { display: block; margin-top: .2em; }
.product-hero-overlay { background: linear-gradient(90deg, rgba(21,24,28,.94) 0%, rgba(21,24,28,.68) 55%, rgba(21,24,28,.32)); inset: 0; position: absolute; }
.product-hero-content { max-width: var(--max); position: relative; width: 100%; z-index: 1; }
.product-hero h1, .product-intro h2, .product-section-head h2, .product-image-split h2 { font-family: var(--font-c); font-size: var(--fs-display-md); font-weight: 900; letter-spacing: -.01em; line-height: .92; text-transform: uppercase; }
.product-hero h1 { color: var(--white); max-width: 760px; }
.product-hero h1 span, .product-section-head h2 span { color: var(--amber-l); }
.product-hero p { color: var(--text-inv-md); font-size: var(--fs-body-md); line-height: 1.75; margin: 28px 0; max-width: 510px; }
.product-intro { display: grid; gap: 80px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: var(--max); padding: clamp(80px, 10vw, 140px) var(--pad); }
.product-intro h2 { color: var(--text-hi); font-size: clamp(48px, 5.1vw, 70px); }
.product-image-split h2 { color: var(--text-hi); }
.product-copy p { color: var(--text-mid); font-size: var(--fs-body-md); line-height: 1.8; }
.product-copy p + p { margin-top: 20px; }
.product-modules { background: var(--dark); padding: clamp(80px, 10vw, 140px) var(--pad); }
.product-section-head, .module-grid { margin-left: auto; margin-right: auto; max-width: var(--max); }
.product-section-head h2 { color: var(--white); }
.module-grid { display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
.module-grid article { background: var(--dark-3); padding: 38px 34px; }
.module-grid strong { color: var(--amber-l); font-family: var(--font-c); font-size: var(--fs-body-xl); letter-spacing: .14em; }
.module-grid h3 { color: var(--white); font-family: var(--font-c); font-size: var(--fs-h3); font-weight: 800; line-height: 1; margin: 24px 0 14px; text-transform: uppercase; }
.module-grid p { color: var(--text-inv-md); font-size: var(--fs-body-sm); line-height: 1.75; }
.module-rail-section { overflow: hidden; }
.module-rail-intro { color: var(--text-inv-md); font-size: var(--fs-body-md); line-height: 1.7; margin-top: 20px; max-width: 480px; }
.module-rail { display: flex; gap: 16px; margin: 60px calc(var(--pad) * -1) -18px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 var(--pad) 26px; scroll-padding-inline: var(--pad); scroll-snap-type: inline mandatory; scrollbar-color: var(--amber) var(--dark-3); }
.module-rail::-webkit-scrollbar { block-size: 8px; }
.module-rail::-webkit-scrollbar-track { background: var(--dark-3); border-radius: 999px; }
.module-rail::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 999px; }
.module-rail-card { background: var(--dark-3); border-block-start: 3px solid transparent; display: flex; flex: 0 0 min(370px, calc(100vw - (var(--pad) * 2))); flex-direction: column; min-height: 390px; padding: 34px; scroll-snap-align: start; transition: background .2s, border-color .2s, transform .2s; }
.module-rail-card:hover { background: var(--dark-hover); border-block-start-color: var(--amber); transform: translateY(-4px); }
.module-rail-card:focus-within { border-block-start-color: var(--amber); }
.module-rail-card-head { align-items: center; display: flex; justify-content: space-between; }
.module-rail-card strong { color: var(--amber-l); font-family: var(--font-c); font-size: var(--fs-body-xl); letter-spacing: .14em; }
.module-rail-icon { align-items: center; background: var(--amber-dim); border: 1px solid var(--amber-bdr); border-radius: 12px; color: var(--amber-l); display: inline-flex; font-family: var(--font-c); font-size: 25px; font-weight: 700; height: 46px; justify-content: center; line-height: 1; width: 46px; }
.module-rail-card h3 { color: var(--white); font-family: var(--font-c); font-size: var(--fs-h3); font-weight: 800; line-height: .98; margin: 42px 0 16px; text-transform: uppercase; }
.module-rail-card p { color: var(--text-inv-md); font-size: var(--fs-body-sm); line-height: 1.75; }
.module-rail-card > span:last-child { color: var(--amber-l); font-family: var(--font-c); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .1em; margin-top: auto; padding-top: 28px; text-transform: uppercase; }
.product-image-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 510px; }
.product-image-split img { height: 100%; object-fit: cover; width: 100%; }
.product-image-split > div { align-self: center; padding: clamp(56px, 8vw, 120px); }
.product-image-split p { color: var(--text-mid); font-size: var(--fs-body-md); line-height: 1.8; margin: 20px 0 28px; max-width: 500px; }
.product-image-split--reverse img { order: 2; }
.text-link { color: var(--amber); font-family: var(--font-c); font-size: var(--fs-body); font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.text-link span { font-size: var(--fs-body-lg); margin-left: 6px; }
.reference-cases { background: var(--cream-2); padding: clamp(80px, 10vw, 140px) var(--pad); }
.reference-section-head, .reference-grid, .reference-benefits { margin-inline: auto; max-width: var(--max); }
.reference-section-head h2, .reference-benefits h2 { font-family: var(--font-c); font-size: var(--fs-h2); font-weight: 900; line-height: .95; text-transform: uppercase; }
.reference-section-head h2 { color: var(--text-hi); }
.reference-benefits h2 { color: var(--white); }
.reference-section-head h2 span, .reference-benefits h2 span { color: var(--amber); }
.reference-grid { display: grid; gap: 3px; grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
.reference-card { background: var(--dark-3); border-top: 3px solid transparent; display: flex; flex-direction: column; padding: 44px 36px; transition: border-color .25s, background .25s; }
.reference-card:hover { background: var(--dark-hover); border-top-color: var(--amber); }
.reference-card-num { color: var(--white-60); font-family: var(--font-c); font-size: var(--fs-body-xl); font-weight: 700; letter-spacing: .14em; margin-bottom: 20px; }
.reference-card h3 { color: var(--text-inv-hi); font-family: var(--font-c); font-size: var(--fs-h3); font-weight: 800; line-height: 1; margin: 22px 0 16px; text-transform: uppercase; }
.reference-card p { color: var(--text-inv-md); flex: 1; font-size: var(--fs-body-sm); line-height: 1.72; }
.reference-card ul { border-top: 1px solid var(--white-10); color: var(--text-inv-hi); font-family: var(--font-b); font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0; line-height: 1.45; list-style: none; margin-top: 24px; padding-top: 18px; }
.reference-card li { padding-left: 18px; position: relative; }
.reference-card li + li { margin-top: 8px; }
.reference-card li::before { color: var(--amber); content: '•'; left: 0; position: absolute; }
.reference-benefits { align-items: center; background: var(--dark-2); display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding: clamp(64px, 8vw, 110px); }
.reference-benefits-copy p { color: var(--text-inv-md); font-size: var(--fs-body-md); line-height: 1.8; margin-bottom: 28px; }
@media (max-width: 960px) { .product-intro, .product-image-split, .reference-benefits { gap: 48px; grid-template-columns: 1fr; } .module-grid, .reference-grid { grid-template-columns: 1fr; } .product-image-split img, .product-image-split--reverse img { min-height: 320px; order: 0; } .product-image-split > div { padding: 72px var(--pad); } }