/* Shangmao Cloudchain: responsive, HTML-first website. */
:root {
--blue:#0868de;
--blue-dark:#0752b1;
--ink:#17283f;
--muted:#65758b;
--line:#e4eaf2;
--soft:#f5f8fc;
--navy:#0b1c34;
--width:1240px
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:105px
}
body {
margin:0;
color:var(--ink);
background:#fff;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
font-size:16px;
line-height:1.75;
-webkit-font-smoothing:antialiased
}
button,input {
font:inherit
}
button,a {
-webkit-tap-highlight-color:transparent
}
a {
color:inherit;
text-decoration:none
}
a,button {
touch-action:manipulation
}
button {
cursor:pointer
}
img {
display:block;
max-width:100%;
height:auto
}
h1,h2,h3,p,figure {
margin:0
}
h1,h2,h3 {
line-height:1.4;
font-weight:650
}
h2 {
font-size:34px
}
h3 {
font-size:21px
}
ul,ol {
margin:0;
padding:0
}
p {
color:var(--muted)
}
[hidden] {
display:none!important
}
:focus-visible {
outline:3px solid #e79416;
outline-offset:5px
}
.container {
max-width:var(--width);
width:calc(100% - 80px);
margin-inline:auto
}
.skip-link {
position:fixed;
left:16px;
top:-80px;
z-index:100;
background:white;
padding:12px 20px;
color:var(--blue)
}
.skip-link:focus {
top:10px
}
.site-header {
height:80px;
position:sticky;
top:0;
z-index:40;
background:rgba(255,255,255,.98);
border-bottom:1px solid #e7edf5
}
.header-inner {
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}
.wordmark {
flex:none;
display:flex;
flex-direction:column;
line-height:1.25;
color:var(--blue)
}
.wordmark strong {
font-size:28px;
letter-spacing:2px;
font-weight:750
}
.wordmark>span {
font-size:11px;
color:#697b94;
letter-spacing:2px;
margin-top:5px
}
.site-nav {
display:flex;
align-items:center;
gap:30px;
height:100%;
font-size:15px;
white-space:nowrap
}
.site-nav>a:not(.nav-cta),.nav-group>summary {
height:100%;
display:flex;
align-items:center;
gap:7px;
position:relative
}
.site-nav>a:hover,.site-nav>a[aria-current],.nav-group[open]>summary {
color:var(--blue)
}
.site-nav>a[aria-current]:after {
content:"";
height:3px;
background:var(--blue);
position:absolute;
bottom:0;
left:0;
right:0
}
.nav-cta {
background:var(--blue);
color:white;
padding:10px 25px;
border-radius:3px
}
.nav-cta:hover {
background:var(--blue-dark)
}
.nav-group {
position:relative;
height:100%
}
.nav-group summary {
cursor:pointer;
list-style:none
}
.nav-group summary::-webkit-details-marker {
display:none
}
.nav-group summary>span {
font-size:17px;
line-height:1;
transform:translateY(-6px)
}
.nav-dropdown {
position:absolute;
top:70px;
left:-25px;
min-width:205px;
background:white;
box-shadow:0 8px 30px #142b4a1a;
border:1px solid var(--line);
border-radius:4px;
padding:10px
}
.nav-dropdown a {
display:block;
padding:9px 14px;
font-size:14px
}
.nav-dropdown a:hover,.nav-dropdown a[aria-current] {
color:var(--blue);
background:#edf5ff
}
.solution-menu { width:600px; left:-160px; padding:22px }
.solution-menu-heading,.solution-menu-footer { display:flex; justify-content:space-between; align-items:center; gap:14px }
.solution-menu-heading { padding:0 7px 12px; border-bottom:1px solid var(--line) }
.solution-menu-heading strong { color:var(--ink); font-size:16px }
.solution-menu-heading a { color:var(--blue); font-size:12px }
.solution-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; padding-block:12px }
.solution-menu-grid a { border-bottom:1px solid #edf1f6; color:#304966 }
.solution-menu-footer { justify-content:flex-start; border-top:1px solid var(--line); padding-top:10px }
.solution-menu-footer a { color:var(--blue) }
@media(max-width:900px) {
.solution-menu { width:100%; left:auto; padding:12px }
.solution-menu-grid { grid-template-columns:1fr }
}
.nav-mega {
position:fixed;
top:80px;
left:50%;
width:min(1280px,calc(100vw - 48px));
max-height:calc(100dvh - 100px);
overflow:auto;
transform:translateX(-50%);
background:#fff;
border:1px solid var(--line);
box-shadow:0 20px 45px #102d541f;
white-space:normal
}
.nav-mega-inner {
display:grid;
grid-template-columns:1.24fr .78fr 1.24fr;
gap:32px;
padding:30px 32px 32px
}
.mega-group+ .mega-group {
border-left:1px solid var(--line);
padding-left:32px
}
.mega-group header {
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-bottom:13px;
border-bottom:1px solid var(--line);
margin-bottom:9px
}
.mega-group h2 {
font-size:17px;
color:#1c3854
}
.mega-group header>a {
color:var(--blue);
font-size:12px
}
.mega-items {
display:grid;
gap:2px
}
.mega-platforms .mega-items,.mega-applications .mega-items {
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:10px
}
.mega-item {
display:flex;
align-items:flex-start;
gap:11px;
min-width:0;
padding:11px 9px;
border-radius:3px
}
.mega-item:hover,.mega-item[aria-current] {
background:#f2f7fd
}
.mega-item img {
flex:0 0 auto;
width:34px;
height:34px;
object-fit:contain
}
.mega-item span,.mega-item strong,.mega-item small {
display:block;
min-width:0
}
.mega-item strong {
color:#24425d;
font-size:14px;
line-height:1.45;
margin-bottom:3px
}
.mega-item small {
color:#75869a;
font-size:11px;
line-height:1.55
}
.menu-toggle {
display:none
}
.hero {
position:relative;
isolation:isolate;
background:#0b2e67;
overflow:hidden
}
.hero-slide {
position:relative;
isolation:isolate
}
.home-hero:after {
display:none
}
.hero-slide:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(6,27,68,.88) 0%,rgba(6,31,76,.69) 38%,rgba(8,34,74,.1) 76%);
z-index:-1
}
.hero-art {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:-2
}
.hero:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(6,27,68,.82) 0%,rgba(6,31,76,.66) 35%,rgba(8,34,74,.12) 72%);
z-index:-1
}
.hero-inner {
min-height:560px;
display:flex;
align-items:center
}
.hero-copy {
width:670px;
max-width:59%;
padding:60px 0
}
.eyebrow {
font-size:14px;
color:var(--blue);
letter-spacing:1.5px;
font-weight:600;
margin-bottom:12px
}
.hero .eyebrow {
color:#a6d1ff;
margin-bottom:20px;
font-size:15px
}
.hero h1,.hero-slide h2 {
font-size:48px;
font-weight:700;
line-height:1.35;
color:white;
letter-spacing:1px
}
.hero-indicators {
position:absolute;
z-index:3;
left:50%;
bottom:20px;
display:flex;
gap:15px;
transform:translateX(-50%)
}
.hero-indicators button {
width:46px;
height:18px;
padding:0;
border:0;
background:transparent;
position:relative
}
.hero-indicators button:after {
content:"";
position:absolute;
left:0;
right:0;
top:8px;
height:3px;
border-radius:3px;
background:rgba(255,255,255,.32)
}
.hero-indicators button.active:after {
background:#64d5f5
}
.hero-description {
color:#d6e3f6;
font-size:17px;
line-height:1.95;
margin-top:24px;
max-width:615px
}
.hero-points {
display:grid;
gap:8px;
margin-top:20px;
color:#d8e8f9;
font-size:14px;
line-height:1.7;
list-style:none
}
.hero-points li {
position:relative;
padding-left:20px
}
.hero-points li:before {
position:absolute;
left:0;
top:.72em;
width:6px;
height:6px;
border-radius:50%;
background:#42c7f0;
content:""
}
.hero-actions {
display:flex;
gap:16px;
margin-top:32px
}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:18px;
min-height:48px;
padding:11px 27px;
border:1px solid transparent;
border-radius:3px;
font-weight:600;
font-size:15px;
line-height:1.5;
transition:background .18s,transform .18s
}
.button:hover {
transform:translateY(-2px)
}
.button.primary {
color:#fff;
background:var(--blue);
border-color:var(--blue)
}
.button.primary:hover {
background:var(--blue-dark)
}
.button.light-outline {
color:#fff;
border-color:#8faed1;
background:#ffffff08
}
.button.light-outline:hover {
background:#ffffff1c
}
.button.outline {
border-color:#bbd3f2;
color:var(--blue);
background:white
}
.button.outline:hover {
background:#edf5ff
}
.button.white {
background:white;
color:var(--blue);
flex:none
}
.hero-note {
font-size:13px;
color:#b4c9e4;
margin-top:25px
}
.hero-note span {
margin:0 11px;
color:#638bbd
}
.value-strip {
border-bottom:1px solid var(--line);
background:#fff
}
.value-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
padding-block:26px
}
.value-grid a {
padding-inline:32px;
border-right:1px solid var(--line)
}
.value-grid a:first-child {
padding-left:0
}
.value-grid a:last-child {
border:0
}
.value-grid strong {
display:block;
font-size:18px;
margin-bottom:3px
}
.value-grid span {
font-size:13px;
color:var(--muted)
}
.value-grid a:hover strong {
color:var(--blue)
}
.section {
padding-block:84px
}
.soft-section {
background:var(--soft)
}
.section-heading {
text-align:center;
margin:0 auto 44px
}
.section-heading h2 {
letter-spacing:.3px
}
.section-heading>p:last-child:not(.eyebrow) {
margin-top:15px;
font-size:16px
}
.capability-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line);
border-left:1px solid var(--line)
}
.capability {
padding:32px 28px 27px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
transition:background .18s;
position:relative
}
.capability:hover {
background:#f3f8ff
}
.capability img {
width:48px;
height:48px;
object-fit:contain;
margin-bottom:21px
}
.capability h3 {
font-size:19px;
margin-bottom:11px
}
.capability p {
font-size:14px;
line-height:1.85;
min-height:52px
}
.home-capability-section {
background:#f3f8fb
}
.home-capability-section .capability-grid {
gap:18px;
border:0
}
.home-capability-section .capability {
min-height:276px;
border:1px solid #e0e9f1;
border-radius:12px;
background:#fff;
box-shadow:0 10px 25px rgba(20,63,104,.05)
}
.home-capability-section .capability:hover {
border-color:#a9d5ec;
box-shadow:0 15px 34px rgba(17,74,125,.09)
}
.source-business-section {
background:linear-gradient(135deg,#062a5c 0%,#0b4a8b 100%);
color:#fff
}
.source-business-layout {
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
gap:70px;
align-items:center
}
.source-business-copy .eyebrow {
color:#72cfff
}
.source-business-copy h2 {
max-width:540px;
font-size:38px;
line-height:1.45
}
.source-business-copy>p:not(.eyebrow) {
max-width:565px;
margin-top:20px;
color:#c8d9eb;
line-height:1.95
}
.source-actions {
display:flex;
align-items:center;
gap:24px;
margin-top:30px
}
.source-actions .text-link {
color:#b9dcff
}
.source-business-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.source-business-grid a {
display:grid;
grid-template-columns:50px 1fr;
gap:6px 16px;
align-items:center;
min-height:152px;
padding:23px 22px;
border:1px solid rgba(167,208,242,.25);
border-radius:10px;
background:rgba(255,255,255,.08)
}
.source-business-grid a:hover {
background:rgba(255,255,255,.13)
}
.source-business-grid img {
grid-row:1/3;
width:48px;
height:48px;
object-fit:contain
}
.source-business-grid strong {
font-size:18px
}
.source-business-grid span {
color:#c4d8ec;
font-size:13px;
line-height:1.7
}
.home-industry-section {
background:#071d3a;
color:#fff
}
.home-industry-section .section-heading h2 {
color:#fff
}
.home-industry-section .section-heading p {
color:#b8cade
}
.home-industry-section .eyebrow,.home-industry-section .text-link {
color:#6cc8f2
}
.home-industry-section .industry-card.text-only {
border-color:#27496f;
background:#0d2a4e
}
.home-industry-section .industry-card h3,.home-industry-section .industry-card h3 a {
color:#fff
}
.home-industry-section .industry-card p {
color:#b8cade
}
.home-industry-section .industry-tags {
color:#7fc9ee
}
.engineering-assurance-section {
background:#f2f7fb
}
.assurance-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px
}
.assurance-grid article {
min-height:224px;
padding:28px 25px;
border:1px solid #dce8f2;
border-radius:10px;
background:#fff
}
.assurance-grid article>span {
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:#e3f5fc;
color:#078ac3;
font-size:13px;
font-weight:700
}
.assurance-grid h3 {
margin:19px 0 11px;
font-size:19px
}
.assurance-grid p {
font-size:14px;
line-height:1.85
}
.assurance-summary {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
margin-top:28px;
padding:27px 30px;
border:1px solid #dce8f2;
background:#fff
}
.assurance-summary>div {
padding:0 18px;
border-right:1px solid #e2eaf2;
text-align:center
}
.assurance-summary>div:last-child {
border-right:0
}
.assurance-summary strong,.assurance-summary span {
display:block;
}
.assurance-summary strong {
color:#0784bd;
font-size:21px
}
.assurance-summary span {
color:#6a7d91;
font-size:12px
}
.card-link {
display:block;
font-size:13px;
color:var(--blue);
margin-top:18px
}
.card-link>span {
margin-left:8px
}
.matrix-home-section {
background:#f6f9fd
}
.system-showcase-section {
background:#f4f8fc
}
.system-showcase-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px
}
.system-showcase-card {
min-width:0;
background:#fff;
border:1px solid #dbe5f0;
box-shadow:0 12px 30px #17395f0b;
overflow:hidden
}
.system-showcase-card.featured {
grid-column:1/-1;
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr)
}
.system-showcase-card figure {
display:flex;
align-items:center;
justify-content:center;
min-width:0;
margin:0;
padding:24px;
background:#eaf7fb;
border-bottom:1px solid #dce8f1
}
.system-showcase-card:not(.featured) figure {
aspect-ratio:1.485/1
}
.system-showcase-card.featured figure {
min-height:470px;
border-right:1px solid #dce8f1;
border-bottom:0
}
.system-showcase-card img {
display:block;
width:100%;
height:auto;
max-height:100%;
object-fit:contain
}
.system-showcase-copy {
padding:28px 28px 30px
}
.system-showcase-card.featured .system-showcase-copy {
display:flex;
flex-direction:column;
justify-content:center;
padding:44px 40px
}
.system-showcase-copy h3 {
margin:9px 0 13px;
font-size:23px;
line-height:1.45
}
.system-showcase-copy>p {
color:#65758b;
font-size:14px;
line-height:1.85
}
.system-showcase-copy ul {
display:grid;
gap:9px;
margin:20px 0 0;
list-style:none
}
.system-showcase-copy li {
position:relative;
padding-left:18px;
color:#38516f;
font-size:13px;
line-height:1.65
}
.system-showcase-copy li:before {
position:absolute;
left:0;
top:.68em;
width:5px;
height:5px;
background:#1aa7d8;
border-radius:50%;
content:""
}
.system-showcase-copy .text-link {
margin-top:23px
}
.system-screen-note {
margin-top:20px;
color:#7a899c;
font-size:12px;
text-align:center
}
.product-matrix {
display:grid;
grid-template-columns:1.24fr .78fr 1.24fr;
gap:28px;
align-items:start
}
.matrix-group {
background:#fff;
border:1px solid var(--line);
box-shadow:0 7px 22px #1d477208
}
.matrix-heading {
display:grid;
grid-template-columns:42px 1fr;
gap:13px;
padding:22px 22px 18px;
background:#f4f8fd;
border-bottom:1px solid var(--line)
}
.matrix-heading>span {
color:#78a5d8;
font-size:13px;
font-weight:700;
letter-spacing:2px;
padding-top:4px
}
.matrix-heading h3 {
color:#183a59;
font-size:20px;
margin-bottom:7px
}
.matrix-heading p {
font-size:12px;
line-height:1.7
}
.matrix-items {
display:grid
}
.matrix-platforms .matrix-items,.matrix-applications .matrix-items {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.matrix-item {
min-width:0;
display:grid;
grid-template-columns:42px minmax(0,1fr) 15px;
gap:12px;
align-items:start;
padding:18px 16px;
border-bottom:1px solid var(--line)
}
.matrix-platforms .matrix-item:nth-child(odd),.matrix-applications .matrix-item:nth-child(odd) {
border-right:1px solid var(--line)
}
.matrix-item:hover {
background:#f8fbff
}
.matrix-item img {
width:40px;
height:40px;
object-fit:contain
}
.matrix-item span,.matrix-item strong,.matrix-item small {
display:block;
min-width:0
}
.matrix-item strong {
color:#24425d;
font-size:15px;
line-height:1.45;
margin-bottom:6px
}
.matrix-item small {
color:#718399;
font-size:12px;
line-height:1.7
}
.matrix-item>b {
color:#72a5d8;
font-size:14px;
font-weight:400;
padding-top:3px;
opacity:0;
transform:translateX(-5px);
transition:.18s
}
.matrix-item:hover>b {
opacity:1;
transform:translateX(0)
}
.matrix-section+.soft-section {
border-top:1px solid #e9f0f8
}
.capability-map {
display:grid;
gap:24px
}
.capability-band {
border:1px solid var(--line);
background:#fff;
scroll-margin-top:110px
}
.capability-band-heading {
display:grid;
grid-template-columns:54px 1fr;
gap:18px;
align-items:start;
padding:27px 30px 23px;
background:#f4f8fd;
border-bottom:1px solid var(--line)
}
.capability-band-heading>span {
color:#7fa5d2;
font-weight:700;
letter-spacing:2px;
padding-top:5px
}
.capability-band-heading h2 {
font-size:24px;
margin-bottom:8px
}
.capability-band-heading p {
font-size:14px
}
.capability-map-grid {
display:grid;
grid-template-columns:repeat(3,1fr)
}
.capability-map-item {
display:flex;
gap:16px;
align-items:flex-start;
padding:26px 25px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line)
}
.capability-map-item:hover {
background:#f8fbff
}
.capability-map-item img {
flex:0 0 auto;
width:42px;
height:42px;
object-fit:contain
}
.capability-map-item strong,.capability-map-item small {
display:block
}
.capability-map-item strong {
font-size:16px;
margin-bottom:8px
}
.capability-map-item small {
color:var(--muted);
font-size:13px;
line-height:1.75
}
.catalog-callout {
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
margin-top:34px;
padding:31px 34px;
background:#0c2c54;
color:#fff
}
.catalog-callout h2 {
font-size:24px;
margin:7px 0 9px
}
.catalog-callout p {
color:#c6d6e8;
font-size:14px
}
.extension-home-section {
background:#fff;
color:var(--ink)
}
.extension-home-section .section-heading p {
color:var(--muted)
}
.extension-home-section .eyebrow,.extension-home-section .text-link {
color:var(--blue)
}
.extension-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.extension-preview-grid {
grid-template-columns:repeat(4,1fr)
}
.extension-card {
display:flex;
flex-direction:column;
align-items:flex-start;
min-height:286px;
padding:25px 23px 22px;
border:1px solid #dce6f1;
background:#fff;
color:var(--ink);
transition:transform .18s,border-color .18s,box-shadow .18s
}
.extension-card:hover {
transform:translateY(-3px);
border-color:#9ec6f4;
box-shadow:0 12px 30px #082c5612
}
.extension-card img {
width:43px;
height:43px;
object-fit:contain;
margin-bottom:20px
}
.extension-card h3 {
font-size:18px;
margin-bottom:10px
}
.extension-card p {
font-size:13px;
line-height:1.8
}
.extension-card .card-link {
margin-top:auto;
padding-top:18px
}
.extension-tags,.scenario-tags {
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:14px
}
.extension-tags span,.scenario-tags span {
padding:4px 8px;
font-size:11px;
color:#396289;
background:#edf5ff
}
.extension-catalog {
display:grid;
gap:58px
}
.extension-group-heading {
max-width:740px;
margin-bottom:24px
}
.extension-group-heading h2 {
font-size:27px;
margin-bottom:10px
}
.extension-group-heading p {
font-size:15px
}
.catalog-note {
margin-top:32px;
padding:17px 20px;
font-size:13px;
color:#61738b;
background:#f3f7fb;
border-left:3px solid #83b7ef
}
.section-more {
display:flex;
justify-content:center;
align-items:center;
gap:28px;
margin-top:32px
}
.section-more>span {
color:#79879b;
font-size:13px
}
.text-link {
display:inline-flex;
align-items:center;
gap:15px;
color:var(--blue);
font-size:14px;
min-height:40px
}
.text-link:hover {
text-decoration:underline;
text-underline-offset:5px
}
.model-tabs {
display:grid;
grid-template-columns:repeat(3,1fr);
border-bottom:1px solid #d5e1ee;
margin-bottom:0;
background:#fff
}
.model-tabs button {
padding:20px 12px;
background:transparent;
border:0;
border-bottom:3px solid transparent;
color:#52637a;
font-size:19px;
font-weight:600
}
.model-tabs button>span {
display:block;
font-weight:400;
font-size:13px;
color:#7b899c;
margin-top:6px
}
.model-tabs button[aria-selected="true"] {
color:var(--blue);
border-bottom-color:var(--blue);
background:#edf5ff
}
.model-panel {
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
background:white;
padding:40px 55px 38px;
min-height:490px
}
.model-copy h3 {
font-size:28px;
margin:15px 0 20px
}
.model-copy>p:not(.eyebrow) {
font-size:15px;
max-width:465px
}
.check-list {
list-style:none;
margin:24px 0 28px
}
.check-list li {
position:relative;
padding-left:23px;
margin:9px 0;
color:#52637a;
font-size:14px
}
.check-list li:before {
content:"✓";
position:absolute;
left:0;
color:var(--blue);
font-weight:700
}
.model-panel figure {
justify-self:center;
width:100%;
max-width:425px
}
.model-panel figure img {
width:100%;
height:385px;
object-fit:contain
}
.model-panel figcaption {
font-size:11px;
text-align:center;
color:#7b899b;
margin-top:8px
}
.flow-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:56px
}
.flow-grid article {
text-align:center;
padding-inline:12px
}
.flow-grid img {
width:58px;
height:58px;
margin:0 auto 20px;
object-fit:contain
}
.flow-grid h3 {
margin-bottom:14px
}
.flow-grid p {
font-size:15px;
line-height:1.85
}
.flow-grid .text-link {
margin-top:16px
}
.industry-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px
}
.industry-card {
background:#fff;
overflow:hidden;
border:1px solid var(--line);
display:flex;
flex-direction:column
}
.industry-card>a {
display:block;
overflow:hidden
}
.industry-card img {
width:100%;
aspect-ratio:1.92;
object-fit:cover;
transition:transform .3s
}
.industry-card:hover img {
transform:scale(1.025)
}
.industry-card>div {
padding:25px 26px;
display:flex;
flex:1;
flex-direction:column
}
.industry-card h3 {
font-size:21px;
margin-bottom:12px
}
.industry-card h3 a:hover {
color:var(--blue)
}
.industry-card p {
font-size:14px;
line-height:1.9
}
.industry-tags {
color:var(--blue);
margin-top:15px
}
.industry-card .text-link {
margin-top:auto;
padding-top:12px
}
.industry-label {
color:#7791ae;
font-size:11px;
letter-spacing:1px;
margin-bottom:10px
}
.industry-card.text-only {
min-height:300px;
border-top:3px solid #6faef0
}
.industry-card.text-only>div {
padding-top:32px
}
.pricing-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}
.price-card {
border:1px solid #dce4ef;
border-top:3px solid #bdd0e8;
padding:30px 30px 28px;
background:#fff;
display:flex;
flex-direction:column;
align-items:flex-start
}
.price-card.featured {
border-color:#83b3f2;
border-top-color:var(--blue);
background:linear-gradient(#edf5ff,#fff 48%)
}
.plan {
color:var(--blue);
font-size:13px;
letter-spacing:1px
}
.price-card h3 {
font-size:20px;
margin:10px 0 25px
}
.price {
font-size:36px;
color:#122d53;
line-height:1.2;
letter-spacing:-1px;
font-family:Arial,"Microsoft YaHei",sans-serif
}
.price-note {
font-size:13px;
margin-top:12px;
min-height:25px
}
.price-card .check-list {
border-top:1px solid var(--line);
padding-top:19px;
width:100%;
flex:1
}
.price-card .button {
width:100%
}
.section-note {
font-size:13px;
text-align:center;
margin-top:24px
}
.delivery-section {
background:#f5f8fc
}
.delivery-steps {
display:grid;
grid-template-columns:repeat(4,1fr);
list-style:none;
gap:42px
}
.delivery-steps li {
position:relative;
padding-top:10px
}
.delivery-steps span {
font-size:38px;
color:#97b9e3;
line-height:1.2;
font-weight:300
}
.delivery-steps li:not(:last-child):after {
content:"";
position:absolute;
left:80px;
right:-20px;
height:1px;
top:34px;
background:#ccdae9
}
.delivery-steps h3 {
margin:21px 0 12px;
font-size:19px
}
.delivery-steps p {
font-size:14px;
max-width:220px
}
.heading-split {
text-align:left;
display:flex;
justify-content:space-between;
align-items:flex-end
}
.resource-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px
}
.resource-card {
padding:25px 0;
border-top:2px solid #dce6f2
}
.resource-category {
font-size:12px;
color:var(--blue);
background:#eff6ff;
padding:4px 9px
}
.resource-card h3 {
font-size:19px;
line-height:1.65;
margin:17px 0 13px
}
.resource-card h3 a:hover {
color:var(--blue)
}
.resource-card p {
font-size:14px;
line-height:1.9
}
.resource-card .text-link {
margin-top:16px
}
.consult-banner {
background:#0864cf;
color:#fff;
padding:45px 0
}
.consult-banner>.container {
display:flex;
align-items:center;
justify-content:space-between;
gap:35px
}
.consult-banner h2 {
font-size:30px
}
.consult-banner p {
color:#cde4ff;
font-size:15px;
margin-top:10px
}
.site-footer {
background:var(--navy);
color:#b3bfd0;
font-size:13px
}
.footer-main {
display:grid;
grid-template-columns:1.8fr 1fr 1.15fr .9fr 1.55fr;
gap:35px;
padding-block:55px 45px
}
.footer-brand>a {
display:block;
font-size:27px;
letter-spacing:2px;
color:white;
font-weight:650;
margin-bottom:16px
}
.footer-brand p {
color:#9eacc1;
font-size:12px;
margin-bottom:8px;
max-width:240px
}
.footer-column h3,.footer-contact h3 {
font-size:15px;
color:#eef4ff;
margin-bottom:19px
}
.footer-column>a {
display:block;
margin-bottom:10px
}
.site-footer a:hover {
color:white
}
.footer-contact>a {
display:block;
overflow-wrap:anywhere
}
.footer-contact .phone-number {
font-size:23px;
color:white;
font-weight:600;
line-height:1.6;
white-space:nowrap
}
.footer-contact p {
font-size:12px;
color:#91a2ba;
margin-top:14px
}
.footer-bottom {
padding:22px 0;
border-top:1px solid #22334a;
display:flex;
flex-wrap:wrap;
gap:12px 20px;
justify-content:space-between;
font-size:12px;
color:#8292a9
}
.footer-bottom a {color:inherit;text-decoration:none}
.footer-bottom a:hover,.footer-bottom a:focus-visible {color:#fff;text-decoration:underline}
.floating-service {
position:fixed;
right:20px;
top:54%;
transform:translateY(-50%);
z-index:45;
width:84px;
background:#fff;
box-shadow:0 10px 32px #102f5326;
border:1px solid #dbe7f6;
border-radius:14px;
overflow:visible
}
.floating-service-item-wrap {
position:relative
}
.floating-service-item {
width:100%;
min-height:82px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
padding:10px 6px;
border:0;
border-bottom:1px solid #e7eef8;
background:#fff;
color:var(--blue);
font:inherit;
font-size:12px;
line-height:1.35;
text-align:center;
cursor:pointer;
transition:background .2s ease,color .2s ease
}
.floating-service>.floating-service-consult {
border-radius:13px 13px 0 0
}
.floating-service>button:last-child {
border-bottom:0;
border-radius:0 0 13px 13px
}
.floating-service-item svg {
width:25px;
height:25px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.floating-service-item:hover,.floating-service-item:focus-visible {
background:var(--blue);
color:#fff;
outline:0
}
.floating-service-consult {
position:relative
}
.floating-service-consult:after {
content:"";
position:absolute;
top:12px;
right:21px;
width:7px;
height:7px;
border:2px solid #fff;
border-radius:50%;
background:#ff4d4f;
box-shadow:0 0 0 3px #ff4d4f24
}
.floating-service-detail {
position:absolute;
right:calc(100% + 12px);
top:50%;
transform:translateY(-50%) translateX(8px);
width:228px;
padding:20px;
border:1px solid #dbe7f6;
border-radius:12px;
background:#fff;
box-shadow:0 12px 35px #102f5326;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .2s ease,transform .2s ease
}
.floating-service-detail:after {
content:"";
position:absolute;
top:50%;
right:-7px;
width:12px;
height:12px;
border-top:1px solid #dbe7f6;
border-right:1px solid #dbe7f6;
background:#fff;
transform:translateY(-50%) rotate(45deg)
}
.floating-service-detail strong,.floating-service-detail a,.floating-service-detail small {
display:block
}
.floating-service-detail strong {
color:#17283f;
font-size:14px
}
.floating-service-detail a {
margin-top:7px;
color:var(--blue);
font-size:20px;
font-weight:700;
white-space:nowrap
}
.floating-service-detail small {
margin-top:7px;
color:#657790;
font-size:12px
}
.floating-service-item-wrap:hover .floating-service-detail,
.floating-service-item-wrap:focus-within .floating-service-detail {
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(-50%) translateX(0)
}
.floating-service-top[hidden] {
display:none
}
.consult-modal {
width:min(620px,calc(100% - 32px));
max-height:calc(100dvh - 32px);
padding:0;
border:0;
border-radius:16px;
background:transparent;
box-shadow:0 26px 80px #06162c59;
overflow:auto
}
.consult-modal::backdrop {
background:#06162cbf;
backdrop-filter:blur(2px)
}
.consult-modal-card {
padding:32px 38px 30px;
background:#fff
}
.consult-modal-card header {
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-bottom:24px
}
.consult-modal-card h2 {
margin:0;
color:#17283f;
font-size:30px;
line-height:1.3
}
.consult-modal-close {
width:42px;
height:42px;
flex:0 0 auto;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:#f2f6fb;
color:#728198;
cursor:pointer
}
.consult-modal-close:hover,.consult-modal-close:focus-visible {
background:#e6f1ff;
color:var(--blue);
outline:2px solid #9fc8ff;
outline-offset:2px
}
.consult-modal-close svg {
width:23px;
height:23px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round
}
.consult-qr-visual {
position:relative;
width:min(400px,100%);
margin:0 auto;
overflow:hidden;
border-radius:14px;
background:#eaf8ff
}
.consult-qr-visual img {
display:block;
width:100%;
height:auto
}
.consult-modal-card>p {
max-width:440px;
margin:20px auto 0;
color:#5d6f88;
font-size:14px;
line-height:1.8;
text-align:center
}
.consult-modal-phone {
display:block;
width:max-content;
max-width:100%;
margin:14px auto 0;
color:var(--blue);
font-size:15px;
font-weight:700;
text-align:center
}
.inner-hero {
background:#eef5ff;
padding:65px 0 60px;
border-bottom:1px solid #dfebf9
}
.inner-hero h1 {
font-size:38px;
max-width:1080px;
line-height:1.45
}
.inner-hero .eyebrow {
margin-bottom:16px
}
.inner-hero p:last-child {
margin-top:20px;
max-width:860px;
font-size:16px
}
.breadcrumbs {
display:flex;
align-items:center;
gap:13px;
flex-wrap:wrap;
font-size:12px;
color:#718197;
padding-block:20px
}
.breadcrumbs a:hover {
color:var(--blue)
}
.breadcrumbs>span[aria-current] {
color:#40516a
}
.page-layout {
display:grid;
grid-template-columns:230px minmax(0,1fr);
gap:70px;
padding-top:24px;
padding-bottom:85px
}
.page-aside {
border-right:1px solid var(--line);
font-size:14px;
padding-right:28px
}
.aside-sticky {
position:sticky;
top:115px
}
.aside-sticky>strong {
display:block;
font-size:15px;
padding-bottom:17px;
border-bottom:1px solid var(--line)
}
.aside-sticky nav {
padding-top:10px
}
.aside-sticky nav>a {
display:block;
padding:11px 0;
color:#64758c;
font-size:13px;
line-height:1.7
}
.aside-sticky nav>a:hover {
color:var(--blue)
}
.aside-help {
margin-top:32px;
padding-top:23px;
border-top:1px solid var(--line)
}
.aside-help a {
display:block;
color:var(--blue);
margin-top:8px
}
.aside-faq {
display:block;
color:#64758c;
margin-top:18px;
font-size:13px
}
.aside-sticky>p {
font-size:14px;
margin-top:18px
}
.content-section {
border-bottom:1px solid var(--line);
padding:35px 0 40px;
scroll-margin-top:115px
}
.content-section:first-child {
padding-top:0
}
.content-section:last-child {
border-bottom:0;
padding-bottom:0
}
.section-number {
display:block;
color:#8eadcf;
font-size:13px;
letter-spacing:2px;
margin-bottom:8px
}
.content-section h2 {
font-size:25px;
margin-bottom:18px
}
.content-section p {
font-size:16px;
line-height:1.95
}
.detail-list {
list-style:none;
margin-top:22px;
display:grid;
gap:11px
}
.detail-list li {
padding:12px 18px;
border-left:3px solid #a9caf3;
background:#f5f8fc;
color:#53657c;
font-size:14px;
line-height:1.8
}
.link-list {
display:flex;
gap:12px 25px;
flex-wrap:wrap;
margin-top:22px
}
.link-list>a {
color:var(--blue);
font-size:14px;
display:inline-block;
padding-block:6px
}
.link-list>a:hover {
text-decoration:underline;
text-underline-offset:4px
}
.section-figure {
margin-top:26px;
background:#f5f8fc;
padding:22px
}
.section-figure img {
width:100%;
max-height:650px;
object-fit:contain
}
.section-figure figcaption {
font-size:12px;
color:#7a8ca3;
text-align:center;
margin-top:15px
}
.longform {
font-size:16px;
line-height:2
}
.longform h2 {
font-size:25px;
margin:42px 0 17px
}
.longform h2:first-child {
margin-top:0
}
.longform p {
margin-bottom:23px;
line-height:2
}
.longform a {
color:var(--blue);
text-decoration:underline;
text-underline-offset:4px
}
.longform strong {
color:#344b68;
font-weight:600
}
.calculator {
margin-top:45px;
padding:38px 42px;
background:var(--soft);
display:grid;
grid-template-columns:1.3fr 1fr;
gap:55px;
border:1px solid var(--line)
}
.calculator h2 {
font-size:25px;
margin-bottom:15px
}
.calculator p {
font-size:14px;
line-height:1.95
}
.calc-control label {
display:block;
font-size:14px;
margin-bottom:8px
}
.calc-control input {
height:46px;
width:100%;
max-width:290px;
border:1px solid #b8cce4;
border-radius:3px;
padding:8px 13px;
background:white;
color:var(--ink)
}
.calc-addons {
border:0;
border-top:1px solid var(--line);
margin:22px 0 4px;
padding:18px 0 0
}
.calc-addons legend {
padding:0 8px 0 0;
color:var(--ink);
font-size:14px;
font-weight:600
}
.calc-addons label {
display:flex;
align-items:flex-start;
gap:10px;
margin:10px 0 0;
line-height:1.55;
cursor:pointer
}
.calc-addons input[type="checkbox"] {
width:18px;
height:18px;
min-width:18px;
margin:2px 0 0;
accent-color:var(--blue)
}
.calc-addons strong {
color:var(--blue);
white-space:nowrap;
margin-left:auto
}
.calc-control output {
display:block;
font-size:33px;
line-height:1.4;
color:var(--blue);
font-weight:600;
margin-top:14px
}
.calc-control small {
display:block;
color:#7a899d;
font-size:12px;
margin-top:9px
}
.field-error {
color:#b43131;
min-height:8px
}
.field-error:empty {
display:none
}
.contact-panel {
padding:45px;
background:#f5f8fc;
border:1px solid var(--line);
margin:18px 0 50px;
display:grid;
grid-template-columns:1fr 1.3fr;
gap:60px
}
.contact-panel h2 {
font-size:28px;
margin-bottom:20px
}
.contact-panel p {
font-size:15px
}
.contact-methods {
display:grid;
gap:20px
}
.contact-methods a {
display:block;
background:#fff;
border-left:3px solid var(--blue);
padding:20px 26px
}
.contact-methods small {
display:block;
color:var(--muted);
font-size:13px
}
.contact-methods strong {
display:block;
font-size:27px;
font-family:Arial,sans-serif;
line-height:1.6;
overflow-wrap:anywhere
}
.contact-methods span {
font-size:13px;
color:var(--blue)
}
.faq-list {
border-top:1px solid var(--line)
}
.faq-item {
border-bottom:1px solid var(--line)
}
.faq-item summary {
cursor:pointer;
font-size:18px;
font-weight:600;
padding:22px 35px 22px 0;
list-style:none;
position:relative
}
.faq-item summary::-webkit-details-marker {
display:none
}
.faq-item summary:after {
content:"+";
position:absolute;
right:5px;
color:var(--blue)
}
.faq-item[open] summary:after {
content:"−"
}
.faq-item>div {
padding-bottom:26px
}
.faq-item p {
font-size:15px;
line-height:1.95
}
.industry-intro {
display:grid;
grid-template-columns:1fr 1fr;
gap:55px;
align-items:center;
margin-block:25px 65px
}
.industry-intro>img {
width:100%;
border-radius:4px
}
.industry-intro h2 {
font-size:28px;
margin:12px 0 20px
}
.industry-intro .button {
margin-top:25px
}
.industry-intro.without-image {
grid-template-columns:1fr;
padding:34px 40px;
background:#f2f7fd;
border-left:4px solid var(--blue)
}
.industry-intro.without-image>div {
max-width:820px
}
.industry-intro .scenario-tags {
margin-top:19px
}
.extension-detail-intro {
display:flex;
align-items:flex-start;
gap:24px;
margin-block:25px 58px;
padding:30px 34px;
background:#f2f7fd;
border-left:4px solid var(--blue)
}
.extension-detail-intro>img {
width:64px;
height:64px;
object-fit:contain;
flex:0 0 auto
}
.extension-detail-intro h2 {
font-size:27px;
margin:7px 0 12px
}
.extension-detail-intro p {
font-size:15px
}
@media(min-width:1550px) {
.hero-inner {
min-height:620px
}
.hero h1,.hero-slide h2 {
font-size:52px
}
.hero-copy {
max-width:56%
}
}
@media(max-width:1100px) {
.container {
width:calc(100% - 48px)
}
.site-nav {
gap:20px;
font-size:14px
}
.header-inner {
gap:20px
}
.wordmark strong {
font-size:25px
}
.nav-cta {
padding:9px 17px
}
.nav-mega-inner {
grid-template-columns:1.18fr .72fr 1.18fr;
gap:20px;
padding-inline:24px
}
.mega-group+ .mega-group {
padding-left:20px
}
.mega-item {
padding-inline:6px
}
.mega-item small {
font-size:10px
}
.product-matrix {
grid-template-columns:1fr
}
.matrix-services .matrix-items {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.matrix-services .matrix-item:nth-child(odd) {
border-right:1px solid var(--line)
}
.hero h1,.hero-slide h2 {
font-size:39px
}
.hero-description {
font-size:16px
}
.hero-copy {
max-width:63%
}
.hero-inner {
min-height:510px
}
.value-grid a {
padding-inline:20px
}
.value-grid span {
font-size:12px
}
.capability {
padding:26px 21px
}
.model-panel {
padding:32px;
gap:25px
}
.model-copy h3 {
font-size:26px
}
.flow-grid {
gap:25px
}
.footer-main {
grid-template-columns:1.4fr 1fr 1.1fr 1fr;
gap:25px
}
.footer-contact {
grid-column:1/-1;
display:flex;
align-items:center;
gap:24px;
border-top:1px solid #22334a;
padding-top:22px
}
.footer-contact h3,.footer-contact p {
margin:0
}
.page-layout {
gap:38px;
grid-template-columns:190px minmax(0,1fr)
}
.resource-grid {
grid-template-columns:repeat(2,1fr);
gap:25px 38px
}
.price-card {
padding:26px 22px
}
.price-card h3 {
font-size:18px
}
.price {
font-size:32px
}
.contact-panel {
gap:30px;
padding:30px
}
.contact-methods strong {
font-size:24px
}
}
@media(max-width:900px) {
.site-header {
height:72px
}
.menu-toggle {
display:flex;
align-items:center;
gap:9px;
background:white;
color:var(--ink);
border:1px solid var(--line);
padding:7px 12px;
border-radius:3px;
font-size:13px;
min-height:40px
}
.menu-lines {
width:16px;
height:12px;
border-block:2px solid var(--blue);
position:relative
}
.menu-lines:before {
content:"";
position:absolute;
left:0;
right:0;
top:3px;
border-top:2px solid var(--blue)
}
.site-nav {
display:none;
position:absolute;
top:72px;
left:0;
right:0;
padding:12px 24px 22px;
height:auto;
max-height:calc(100dvh - 72px);
overflow:auto;
background:#fff;
border-bottom:1px solid var(--line);
box-shadow:0 12px 18px #0b254911
}
.site-nav.open {
display:block
}
.site-nav>a:not(.nav-cta),.nav-group>summary {
padding:12px 0;
height:auto;
min-height:45px
}
.site-nav>a[aria-current]:after {
display:none
}
.nav-group {
height:auto
}
.nav-group>summary {
justify-content:space-between
}
.nav-dropdown {
position:static;
box-shadow:none;
border:0;
border-left:2px solid #c8ddf8;
border-radius:0;
padding:0 12px;
margin-bottom:8px
}
.nav-mega {
position:static;
width:auto;
max-height:none;
overflow:visible;
transform:none;
border:0;
border-left:2px solid #c8ddf8;
box-shadow:none;
margin-bottom:8px
}
.nav-mega-inner {
display:block;
padding:5px 12px 10px
}
.mega-group+ .mega-group {
border-left:0;
border-top:1px solid var(--line);
padding:16px 0 0;
margin-top:10px
}
.mega-group header {
margin-bottom:4px
}
.mega-items,.mega-platforms .mega-items,.mega-applications .mega-items {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.mega-item {
padding:9px 6px
}
.mega-item small {
font-size:10px
}
.nav-cta {
display:block;
text-align:center;
margin-top:10px
}
.hero h1,.hero-slide h2 {
font-size:36px
}
.hero-copy {
max-width:67%
}
.hero-description {
font-size:15px
}
.hero-inner {
min-height:500px
}
.hero-art {
object-position:60% center
}
.hero:after {
background:linear-gradient(90deg,#09285de8,#09285da0 55%,#09285d10)
}
.value-grid {
grid-template-columns:1fr 1fr;
row-gap:22px
}
.value-grid a:nth-child(3) {
padding-left:0
}
.value-grid a:nth-child(2) {
border:0
}
.capability-grid {
grid-template-columns:repeat(2,1fr)
}
.capability p {
min-height:0
}
.section {
padding-block:64px
}
.section-heading h2 {
font-size:29px
}
.model-panel {
grid-template-columns:1fr 1fr;
gap:15px;
padding:32px 26px
}
.model-panel figure img {
height:330px
}
.model-copy h3 {
font-size:24px
}
.model-copy>p:not(.eyebrow) {
font-size:14px
}
.model-copy .button {
padding-inline:18px
}
.model-tabs button {
font-size:17px
}
.industry-card>div {
padding:24px
}
.pricing-grid {
gap:14px
}
.price-card {
padding:23px 18px
}
.price-card h3 {
font-size:16px
}
.price {
font-size:29px
}
.price-card .check-list li {
font-size:12px
}
.price-note {
font-size:12px;
min-height:44px
}
.price-card .button {
padding-inline:10px;
font-size:14px
}
.delivery-steps {
gap:25px
}
.consult-banner h2 {
font-size:25px
}
.footer-main {
grid-template-columns:1.4fr 1fr 1fr 1fr
}
.footer-brand p {
max-width:190px
}
.footer-brand>a {
font-size:23px
}
.footer-contact {
flex-wrap:wrap
}
.page-layout {
grid-template-columns:1fr;
gap:25px;
padding-top:10px
}
.page-aside {
border-right:0;
padding:0
}
.aside-sticky {
position:static
}
.aside-sticky>strong,.aside-help,.aside-faq {
display:none
}
.aside-sticky nav {
display:flex;
gap:8px 25px;
flex-wrap:wrap;
padding:0 0 20px;
border-bottom:1px solid var(--line)
}
.aside-sticky nav>a {
font-size:13px
}
.contact-panel {
grid-template-columns:1fr
}
.contact-methods {
grid-template-columns:1fr 1fr
}
.contact-methods strong {
font-size:20px
}
.contact-methods a {
padding:18px
}
.inner-hero h1 {
font-size:32px
}
.calculator {
gap:28px;
padding:28px
}
.calculator h2 {
font-size:22px
}
.industry-intro {
gap:30px
}
.industry-intro h2 {
font-size:25px
}
}
@media(max-width:600px) {
.container {
width:calc(100% - 40px)
}
.wordmark strong {
font-size:24px
}
.wordmark>span {
font-size:10px;
letter-spacing:1.5px
}
.hero-inner {
min-height:615px;
align-items:flex-start
}
.hero-copy {
max-width:100%;
width:100%;
padding:39px 0 250px
}
.hero h1,.hero-slide h2 {
font-size:34px;
letter-spacing:0;
line-height:1.45
}
.hero .eyebrow {
font-size:12px;
letter-spacing:1px;
margin-bottom:16px
}
.hero-description {
font-size:14px;
line-height:1.85;
margin-top:18px;
max-width:440px
}
.desktop-break {
display:none
}
.hero-art {
top:auto;
bottom:0;
height:330px;
object-fit:cover;
object-position:85% bottom
}
.hero:after {
background:linear-gradient(180deg,#0b2e67 0%,#0b2e67 48%,#0b2e6725 73%,#0b2e6700 100%)
}
.hero-actions {
gap:12px;
margin-top:24px
}
.button {
font-size:14px;
padding:11px 20px;
min-height:46px;
gap:12px
}
.hero-note {
font-size:11px;
margin-top:18px
}
.hero-note span {
margin-inline:6px
}
.value-grid {
padding-block:24px;
gap:20px 0
}
.value-grid a {
padding-inline:18px
}
.value-grid strong {
font-size:16px
}
.value-grid span {
font-size:11px;
line-height:1.7;
display:block
}
.section {
padding-block:52px
}
.section-heading {
margin-bottom:29px
}
.section-heading h2 {
font-size:25px;
line-height:1.5
}
.section-heading>p:last-child:not(.eyebrow) {
font-size:14px;
margin-top:12px
}
.heading-split {
text-align:left
}
.product-matrix {
gap:20px
}
.matrix-heading {
grid-template-columns:35px 1fr;
padding:20px 18px 16px
}
.matrix-heading h3 {
font-size:19px
}
.matrix-platforms .matrix-items,.matrix-applications .matrix-items,.matrix-services .matrix-items {
grid-template-columns:1fr
}
.matrix-platforms .matrix-item:nth-child(odd),.matrix-applications .matrix-item:nth-child(odd),.matrix-services .matrix-item:nth-child(odd) {
border-right:0
}
.matrix-item {
grid-template-columns:39px minmax(0,1fr) 12px;
padding:16px 15px
}
.matrix-item img {
width:37px;
height:37px
}
.mega-items,.mega-platforms .mega-items,.mega-applications .mega-items {
grid-template-columns:1fr
}
.mega-group header>a,.mega-item small {
display:none
}
.eyebrow {
font-size:12px;
margin-bottom:8px
}
.capability {
padding:23px 17px
}
.capability img {
width:40px;
height:40px;
margin-bottom:16px
}
.capability h3 {
font-size:16px;
margin-bottom:9px
}
.capability p {
font-size:12px;
line-height:1.85
}
.card-link {
font-size:12px;
margin-top:12px
}
.section-more {
flex-direction:column;
gap:3px;
margin-top:23px
}
.section-more>span {
font-size:11px
}
.model-tabs button {
font-size:15px;
padding:16px 4px
}
.model-tabs button>span {
display:none
}
.model-panel {
grid-template-columns:1fr;
padding:27px 23px;
gap:27px
}
.model-copy h3 {
font-size:23px;
margin-top:10px;
margin-bottom:13px
}
.model-copy p {
font-size:14px
}
.model-copy .check-list {
margin:18px 0 22px
}
.model-panel figure {
max-width:340px
}
.model-panel figure img {
height:auto;
max-height:360px
}
.model-panel figcaption {
font-size:10px
}
.flow-grid {
grid-template-columns:1fr;
gap:0
}
.flow-grid article {
display:grid;
grid-template-columns:48px 1fr;
gap:0 20px;
text-align:left;
padding:25px 0;
border-bottom:1px solid var(--line)
}
.flow-grid article:first-child {
padding-top:0
}
.flow-grid article:last-child {
border:0;
padding-bottom:0
}
.flow-grid img {
grid-row:1/4;
width:44px;
height:44px;
margin:4px 0 0
}
.flow-grid h3 {
font-size:19px;
margin-bottom:9px
}
.flow-grid p {
font-size:14px
}
.flow-grid .text-link {
margin-top:8px
}
.industry-grid {
grid-template-columns:1fr;
gap:24px
}
.industry-card>div {
padding:23px
}
.industry-card h3 {
font-size:21px
}
.industry-card img {
aspect-ratio:1.8
}
.pricing-grid {
grid-template-columns:1fr;
gap:20px
}
.price-card {
padding:27px
}
.price-card h3 {
font-size:20px;
margin-bottom:22px
}
.price {
font-size:36px
}
.price-note {
font-size:13px;
min-height:0
}
.price-card .check-list li {
font-size:14px
}
.price-card .check-list {
margin-bottom:25px
}
.section-note {
font-size:12px;
text-align:left;
line-height:1.9
}
.delivery-steps {
grid-template-columns:1fr 1fr;
gap:30px
}
.delivery-steps li:not(:last-child):after {
display:none
}
.delivery-steps span {
font-size:31px
}
.delivery-steps h3 {
margin:13px 0 8px;
font-size:17px
}
.delivery-steps p {
font-size:13px
}
.heading-split {
display:block
}
.heading-split .text-link {
margin-top:12px
}
.resource-grid {
grid-template-columns:1fr;
gap:8px
}
.resource-card {
padding:24px 0 21px;
border-top:1px solid var(--line)
}
.resource-card h3 {
font-size:20px;
margin:14px 0 9px
}
.resource-card p {
font-size:14px
}
.resource-card .text-link {
margin-top:9px
}
.consult-banner {
padding-block:36px
}
.consult-banner>.container {
display:block
}
.consult-banner h2 {
font-size:24px
}
.consult-banner p {
font-size:13px
}
.consult-banner .button {
margin-top:23px
}
.footer-main {
grid-template-columns:repeat(3,1fr);
gap:28px 16px;
padding-block:36px 26px
}
.footer-brand {
grid-column:1/-1
}
.footer-brand p {
max-width:none;
font-size:12px
}
.footer-brand>a {
font-size:25px;
margin-bottom:10px
}
.footer-column h3 {
font-size:13px;
margin-bottom:16px
}
.footer-column>a {
font-size:12px;
line-height:1.6;
margin-bottom:14px
}
.footer-contact {
display:block;
padding-top:24px
}
.footer-contact h3 {
margin-bottom:12px
}
.footer-contact .phone-number {
font-size:24px
}
.footer-contact p {
margin-top:8px
}
.footer-contact>a {
margin-top:4px
}
.footer-bottom {
font-size:11px;
gap:12px
}
.inner-hero {
padding:39px 0
}
.inner-hero h1 {
font-size:29px;
line-height:1.5
}
.inner-hero p:last-child {
font-size:14px;
margin-top:16px
}
.inner-hero .eyebrow {
font-size:11px;
letter-spacing:1px
}
.breadcrumbs {
padding-block:17px;
font-size:11px;
gap:7px
}
.page-layout {
padding-bottom:50px
}
.content-section {
padding:28px 0
}
.content-section h2 {
font-size:23px;
margin-bottom:14px
}
.content-section p {
font-size:15px
}
.detail-list li {
padding:11px 13px;
font-size:13px
}
.link-list {
gap:6px 16px
}
.section-figure {
padding:10px;
margin-top:22px
}
.section-figure figcaption {
font-size:11px
}
.longform {
font-size:15px
}
.longform h2 {
font-size:23px;
margin-top:32px
}
.longform p {
font-size:15px;
line-height:2
}
.calculator {
grid-template-columns:1fr;
gap:23px;
padding:26px 22px;
margin-top:28px
}
.calculator h2 {
font-size:23px
}
.calc-control input {
max-width:100%
}
.contact-panel {
padding:25px 20px;
gap:26px;
margin-bottom:30px
}
.contact-panel h2 {
font-size:25px
}
.contact-methods {
grid-template-columns:1fr;
gap:15px
}
.contact-methods strong {
font-size:22px
}
.contact-methods a {
padding:17px
}
.industry-intro {
grid-template-columns:1fr;
gap:28px;
margin-block:15px 40px
}
.industry-intro h2 {
font-size:24px
}
.industry-intro p {
font-size:14px
}
.faq-item summary {
font-size:16px
}
.faq-item p {
font-size:14px
}
}
@media(max-width:1100px) {
.extension-preview-grid {
grid-template-columns:repeat(2,1fr)
}
.capability-map-grid {
grid-template-columns:repeat(2,1fr)
}
.industry-grid {
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:600px) {
.extension-grid,.extension-preview-grid,.capability-map-grid,.industry-grid {
grid-template-columns:1fr
}
.extension-card {
min-height:0
}
.capability-band-heading {
grid-template-columns:38px 1fr;
padding:23px 20px
}
.capability-band-heading h2 {
font-size:21px
}
.capability-map-item {
padding:22px 20px;
border-right:0
}
.catalog-callout {
display:block;
padding:26px 22px
}
.catalog-callout .button {
margin-top:20px
}
.extension-group-heading h2 {
font-size:23px
}
.extension-catalog {
gap:43px
}
.industry-card.text-only {
min-height:0
}
.industry-intro.without-image {
padding:26px 22px
}
.extension-detail-intro {
gap:15px;
padding:24px 20px
}
.extension-detail-intro>img {
width:50px;
height:50px
}
.extension-detail-intro h2 {
font-size:23px
}
}
/* Offering detail pages */
.offering-lead-band { background:linear-gradient(115deg,#f7fbff 0%,#edf7fc 100%) }
.offering-lead {
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
gap:58px;
align-items:stretch;
padding-block:54px 62px
}
@media(max-width:900px) {
.offering-lead { grid-template-columns:1fr; gap:30px }
}
.offering-reference-lead {
align-self:center;
overflow:hidden;
background:#fff;
border:1px solid #dce9f3;
box-shadow:0 18px 40px #14375a10
}
.offering-reference-lead img {
display:block;
width:100%;
height:auto;
max-height:430px;
object-fit:contain
}
.reference-story-section {
background:#f3f8fc;
scroll-margin-top:138px
}
.reference-story-section .heading-split {
display:block;
max-width:780px;
margin:0 0 30px;
text-align:left
}
.reference-story-section .heading-split h2 { margin:12px 0 10px }
.reference-story-row {
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
margin-top:28px;
background:white;
border:1px solid #dce7f2;
box-shadow:0 18px 45px #103c6810
}
.reference-story-row:nth-of-type(2n) {
grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr)
}
.reference-story-row:nth-of-type(2n) figure { order:2 }
.reference-story-row figure {
display:grid;
place-items:center;
min-height:320px;
padding:28px;
overflow:hidden;
background:#f4f9fd
}
.reference-story-row img {
display:block;
width:100%;
max-height:430px;
object-fit:contain
}
.reference-story-copy {
align-self:center;
padding:40px 46px
}
.reference-story-copy h3 {
margin-top:12px;
font-size:clamp(25px,2.4vw,36px)
}
.reference-story-copy p {
margin-top:20px;
line-height:1.9
}
.reference-story-copy .text-link { display:inline-block; margin-top:28px }
.depth-story-section { background:#f3f8fc; scroll-margin-top:138px }
.depth-story-section .heading-split { display:block; max-width:820px; margin:0 0 34px; text-align:left }
.depth-story-section .heading-split h2 { margin:12px 0 10px }
.depth-story-row {
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
margin-top:27px;
background:#fff;
border:1px solid #dce7f2;
box-shadow:0 14px 38px #103c680d
}
.depth-story-row:nth-of-type(2n) { grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr) }
.depth-story-row:nth-of-type(2n) figure { order:2 }
.depth-story-row figure { display:grid; align-content:center; margin:0; padding:30px; background:#eaf4fa }
.depth-story-row figure a { display:block; line-height:0 }
.depth-story-row figure img { display:block; width:100%; height:auto; border:1px solid #d8e8f0; box-shadow:0 20px 36px #163b5c14 }
.depth-story-row figcaption { margin-top:15px; color:#5d768c; font-size:13px; line-height:1.5 }
.depth-story-copy { align-self:center; padding:48px 48px 52px }
.depth-story-copy h3 { margin:12px 0 0; font-size:clamp(27px,2.6vw,37px); line-height:1.35 }
.depth-story-copy>p { margin:21px 0 0; color:#526a81; line-height:1.9 }
.depth-story-copy ul { display:grid; gap:0; margin:27px 0 0; padding:0; list-style:none; border-top:1px solid #e2ebf2 }
.depth-story-copy li { display:grid; grid-template-columns:135px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid #e2ebf2; line-height:1.65 }
.depth-story-copy li strong { color:#165d9d; font-size:15px }
.depth-story-copy li span { color:#5b7288; font-size:14px }
.industry-art-section { background:#f3f8fc }
.industry-art-section .reference-story-row { margin-top:0 }
.industry-art-section .reference-story-row figure { margin:0; padding:30px }
.industry-art-section .reference-story-row img { max-height:none }
.reference-industry-hero {
position:relative;
display:grid;
align-items:center;
min-height:430px;
overflow:hidden;
background:#082d5b;
color:white
}
.reference-industry-hero>img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover
}
.reference-industry-hero:after {
position:absolute;
inset:0;
content:"";
background:linear-gradient(90deg,#061b39d9 0%,#082e55ab 43%,#082e5508 100%)
}
.reference-industry-hero .container { position:relative; z-index:1; padding-block:66px }
.reference-industry-hero .eyebrow { color:#9bd4ff }
.reference-industry-hero h1 { max-width:740px; color:white; font-size:clamp(37px,4.1vw,58px); line-height:1.2 }
.reference-industry-hero p:not(.eyebrow) { max-width:620px; margin-top:20px; color:#e7f2ff; line-height:1.85 }
.reference-industry-hero .button { margin-top:27px }
.reference-solution-hero { position:relative; display:grid; align-items:center; min-height:480px; overflow:hidden; background:#082755; color:white }
.reference-solution-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.reference-solution-hero:after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,#061b39e8 0%,#082e55b8 45%,#082e5526 100%) }
.reference-solution-hero .container { position:relative; z-index:1; padding-block:74px }
.reference-solution-hero .eyebrow { color:#92d3ff }
.reference-solution-hero h1 { max-width:800px; color:white; font-size:clamp(39px,4.6vw,64px); line-height:1.16 }
.reference-solution-hero p:not(.eyebrow) { max-width:660px; margin-top:22px; color:#e7f2ff; font-size:17px; line-height:1.9 }
.reference-solution-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px }
.reference-solution-hero .button.outline { color:white; background:transparent; border-color:#ffffff80 }
.reference-solution-intro { max-width:1100px; text-align:center }
.reference-solution-intro h2 { margin-top:12px; font-size:clamp(29px,3vw,42px) }
.reference-solution-intro>p:last-child { max-width:830px; margin:18px auto 0; line-height:1.9 }
.reference-solution-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.reference-solution-features article { min-height:220px; padding:32px; background:white; border:1px solid #dce7f2; box-shadow:0 8px 24px #103c6809 }
.reference-solution-features span { color:var(--blue); font-size:13px; letter-spacing:.12em }
.reference-solution-features h3 { margin-top:16px; font-size:23px }
.reference-solution-features p { margin-top:11px; line-height:1.85 }
.reference-solution-visual { background:white }
.reference-solution-visual .reference-story-row { margin-top:0 }
.reference-solution-flow { scroll-margin-top:138px }
.reference-solution-flow ol { display:grid; grid-template-columns:repeat(4,1fr); padding:0; list-style:none; border:1px solid #dce7f2 }
.reference-solution-flow li { display:flex; flex-direction:column; gap:20px; min-height:150px; padding:27px; border-right:1px solid #dce7f2 }
.reference-solution-flow li:last-child { border-right:0 }
.reference-solution-flow li span { color:var(--blue); font-size:24px; font-weight:700 }
.reference-solution-bottom { display:grid; grid-template-columns:1.4fr .6fr; gap:70px; align-items:start }
.reference-solution-bottom h2 { margin-top:12px }
.reference-solution-bottom ul { margin-top:23px }
.reference-solution-bottom aside { display:grid; gap:15px; padding:30px; background:white; border:1px solid #dce7f2 }
.reference-solution-bottom aside>a:not(.button) { color:var(--blue) }
.reference-solution-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.reference-solution-card { display:block; overflow:hidden; border:1px solid #dce7f2; background:white; transition:box-shadow .2s, transform .2s }
.reference-solution-card:hover { box-shadow:0 18px 38px #103c6816; transform:translateY(-3px) }
.reference-solution-card>img { display:block; width:100%; height:205px; object-fit:cover; object-position:center; background:#eaf2f9 }
.reference-solution-card>div { padding:26px 31px 31px }
.reference-solution-card span { color:var(--blue); font-size:12px }
.reference-solution-card h2 { margin-top:12px; font-size:23px }
.reference-solution-card p { margin-top:12px; line-height:1.8 }
.reference-solution-card b { display:inline-block; margin-top:18px; color:var(--blue); font-size:14px }
@media(max-width:760px) {
.depth-story-row,.depth-story-row:nth-of-type(2n) { grid-template-columns:1fr }
.depth-story-row:nth-of-type(2n) figure { order:0 }
.depth-story-row figure { padding:15px }
.depth-story-copy { padding:29px 23px 33px }
.depth-story-copy li { grid-template-columns:1fr; gap:4px }
.industry-art-section .reference-story-row figure { padding:15px }
.reference-story-row,.reference-story-row:nth-of-type(2n) { grid-template-columns:1fr }
.reference-story-row:nth-of-type(2n) figure { order:0 }
.reference-story-row figure { min-height:240px; padding:15px }
.reference-story-copy { padding:27px 24px 32px }
.reference-industry-hero { min-height:360px }
.reference-industry-hero:after { background:linear-gradient(90deg,#061b39ec 0%,#082e55aa 68%,#082e5540 100%) }
.reference-solution-hero { min-height:430px }
.reference-solution-hero:after { background:linear-gradient(90deg,#061b39ed 0%,#082e55b8 78%,#082e5550 100%) }
.reference-solution-features,.reference-solution-cards,.reference-solution-bottom { grid-template-columns:1fr }
.reference-solution-flow ol { grid-template-columns:1fr 1fr }
.reference-solution-flow li:nth-child(2) { border-right:0 }
.reference-solution-flow li:nth-child(-n+2) { border-bottom:1px solid #dce7f2 }
}
@media(max-width:520px) {
.reference-solution-card>img { height:170px }
.reference-solution-card>div { padding:23px }
.reference-solution-flow ol { grid-template-columns:1fr }
.reference-solution-flow li { min-height:auto; border-right:0; border-bottom:1px solid #dce7f2 }
.reference-solution-flow li:last-child { border-bottom:0 }
}
.offering-lead-main {
align-self:center
}
.offering-title-row {
display:flex;
align-items:center;
gap:21px
}
.offering-title-row>img {
width:64px;
height:64px;
object-fit:contain;
flex:none
}
.offering-title-row .eyebrow {
display:block;
margin-bottom:4px
}
.offering-title-row h1 {
font-size:clamp(30px,2.6vw,39px);
line-height:1.28
}
.offering-lede {
max-width:720px;
margin-top:24px;
font-size:17px;
line-height:1.95
}
.offering-fit {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
list-style:none
}
.offering-fit li {
padding:7px 13px;
color:#38506e;
background:#f2f6fb;
border-left:3px solid #8cb9ed;
font-size:13px
}
.offering-actions {
display:flex;
flex-wrap:wrap;
gap:13px;
margin-top:30px
}
.offering-visual {
position:relative;
min-height:340px;
background:#eef5fd;
border:1px solid #dbe7f4;
overflow:hidden
}
.offering-visual img {
width:100%;
height:100%;
min-height:300px;
object-fit:cover
}
.offering-visual figcaption {
position:absolute;
right:0;
bottom:0;
left:0;
padding:10px 15px;
color:#dceaff;
background:#0b2749e8;
font-size:12px
}
.offering-audience,.offering-overview {
padding:35px 38px;
background:linear-gradient(145deg,#0d315f,#071d39);
color:white
}
.offering-audience .eyebrow,.offering-overview .eyebrow {
color:#77baff
}
.offering-audience h2,.offering-overview h2 {
margin-top:7px;
color:white;
font-size:25px
}
.offering-audience ul,.offering-overview ul {
display:grid;
gap:0;
margin-top:25px;
list-style:none;
counter-reset:audience
}
.offering-audience li {
position:relative;
padding:15px 0 15px 35px;
border-top:1px solid #ffffff22;
color:#d8e6f8;
font-size:14px
}
.offering-audience li:before {
position:absolute;
left:0;
color:#62b4ff;
content:"✓"
}
.offering-overview li {
display:grid;
grid-template-columns:90px 1fr;
align-items:center;
gap:18px;
min-height:68px;
border-top:1px solid #ffffff22
}
.offering-overview li strong {
color:#69b5ff;
font-size:24px;
line-height:1
}
.offering-overview li span {
color:#d8e6f8;
font-size:14px
}
.offering-jump {
position:sticky;
top:80px;
z-index:24;
background:#fff;
border-block:1px solid var(--line);
box-shadow:0 8px 18px #17395f0a
}
.offering-jump .container {
min-height:58px;
display:flex;
align-items:center;
gap:31px;
white-space:nowrap;
overflow-x:auto;
scrollbar-width:none
}
.offering-jump .container::-webkit-scrollbar {display:none}
.offering-jump strong {
color:var(--ink);
font-size:13px
}
.offering-jump a {
padding-block:16px;
color:#60728a;
font-size:13px
}
.offering-jump a:hover {
color:var(--blue)
}
.offering-section {
scroll-margin-top:138px
}
.offering-section .heading-split,.industry-practice .heading-split {
display:block;
text-align:left;
max-width:780px;
margin-right:auto;
margin-left:0
}
.offering-section .heading-split h2,.industry-practice .heading-split h2 {
margin-top:12px
}
.challenge-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
border:1px solid var(--line)
}
.challenge-card {
min-height:260px;
padding:35px 34px;
border-right:1px solid var(--line);
background:white
}
.challenge-card:last-child {
border-right:0
}
.challenge-card>span {
display:block;
color:#9eb1c8;
font-size:13px;
letter-spacing:2px
}
.challenge-card h3 {
margin-top:33px;
font-size:22px
}
.challenge-card p {
margin-top:13px;
font-size:14px;
line-height:1.9
}
.feature-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid #dce5f0;
border-left:1px solid #dce5f0
}
.feature-card {
display:grid;
grid-template-columns:42px 1fr;
gap:16px;
min-height:190px;
padding:31px 28px;
background:white;
border-right:1px solid #dce5f0;
border-bottom:1px solid #dce5f0
}
.feature-card>span {
width:36px;
height:36px;
display:grid;
place-items:center;
color:var(--blue);
background:#edf5ff;
font-size:12px;
font-weight:700
}
.feature-card h3 {
font-size:19px
}
.feature-card p {
margin-top:9px;
font-size:13px;
line-height:1.85
}
.offering-visual-section {
padding-bottom:92px
}
.system-interface-section {
background:#f4f8fc;
scroll-margin-top:138px
}
.system-interface-gallery {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:26px
}
.system-interface-figure {
min-width:0;
margin:0;
background:#fff;
border:1px solid #dbe5f0;
box-shadow:0 10px 26px #17395f0a;
overflow:hidden
}
.system-interface-figure:last-child:nth-child(odd) {
grid-column:1/-1
}
.system-interface-figure>a {
display:flex;
align-items:center;
justify-content:center;
min-height:320px;
padding:20px;
background:#eaf7fb;
border-bottom:1px solid #dbe5f0
}
.system-interface-figure img {
display:block;
width:100%;
height:auto;
max-height:560px;
object-fit:contain
}
.system-interface-figure figcaption {
padding:24px 26px 27px
}
.system-interface-figure figcaption span,
.system-interface-figure figcaption strong {
display:block
}
.system-interface-figure figcaption span {
color:#0874ce;
font-size:12px;
font-weight:700;
letter-spacing:.08em
}
.system-interface-figure figcaption strong {
margin-top:8px;
color:#193b5b;
font-size:20px
}
.system-interface-figure figcaption p {
margin-top:9px;
color:#65758b;
font-size:13px;
line-height:1.8
}
.offering-visual-gallery {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:26px
}
.offering-visual-gallery figure {
padding:22px;
background:#f7faff;
border:1px solid #dce6f1
}
.offering-visual-gallery img {
width:100%;
aspect-ratio:720/600;
object-fit:contain;
background:white
}
.offering-visual-gallery figcaption {
padding:15px 4px 2px;
color:#61758e;
font-size:12px;
line-height:1.8
}
.offering-visual-gallery figcaption a {display:inline-block;margin-top:5px;color:#155dad;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.workflow-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
list-style:none;
background:linear-gradient(90deg,#dce8f6,#dce8f6) 10% 28px/80% 1px no-repeat
}
.workflow-step {
position:relative;
padding-right:34px
}
.workflow-step>span {
width:56px;
height:56px;
display:grid;
place-items:center;
color:white;
background:var(--blue);
border:8px solid white;
box-shadow:0 0 0 1px #bad4f1;
font-size:12px;
font-weight:700
}
.workflow-step h3 {
margin-top:25px;
font-size:19px
}
.workflow-step p {
margin-top:10px;
font-size:13px;
line-height:1.85
}
.collaboration-section {
background:#f2f6fb
}
.collaboration-grid {
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(370px,.9fr);
gap:65px;
align-items:start
}
.role-grid {
border-top:1px solid #d9e3ef
}
.role-card {
display:grid;
grid-template-columns:145px 1fr;
gap:25px;
padding:25px 0;
border-bottom:1px solid #d9e3ef
}
.role-card h3 {
color:#1b4f8e;
font-size:18px
}
.role-card p {
font-size:14px
}
.collaboration-focus {
padding:38px 42px 30px;
border:1px solid #dbe7f5;
border-top:4px solid #0d69d4;
background:#fff;
box-shadow:0 16px 36px rgba(19,64,118,.06)
}
.collaboration-focus h2 {
margin-top:8px;
color:#17304e;
font-size:27px;
line-height:1.35
}
.collaboration-focus>p:not(.eyebrow) {
margin-top:15px;
color:#58708a;
font-size:14px;
line-height:1.75
}
.collaboration-focus ol {
margin-top:23px;
list-style:none
}
.collaboration-focus li {
display:grid;
grid-template-columns:30px 1fr;
gap:13px;
padding:14px 0;
border-top:1px solid #e7edf5;
color:#2e4a69;
font-size:14px;
line-height:1.65
}
.collaboration-focus li span:first-child {
color:#0d69d4;
font-size:12px;
font-weight:700;
letter-spacing:.07em
}
.boundary-panel {
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
gap:65px;
padding:48px 52px;
border:1px solid #dce5f0;
border-top:4px solid var(--blue)
}
.boundary-panel h2 {
margin-top:6px;
font-size:29px
}
.boundary-list {
display:grid;
gap:13px;
margin-top:25px;
list-style:none
}
.boundary-list li {
position:relative;
padding-left:28px;
color:#52677f;
font-size:14px
}
.boundary-list li:before {
position:absolute;
left:0;
color:var(--blue);
content:"◆";
font-size:9px
}
.related-offerings {
display:flex;
flex-direction:column;
align-items:stretch
}
.related-offerings>strong {
margin-bottom:7px;
color:#8291a5;
font-size:12px;
letter-spacing:1px
}
.related-offerings>a:not(.button) {
display:flex;
justify-content:space-between;
gap:16px;
padding:12px 0;
border-bottom:1px solid var(--line);
color:#334c69;
font-size:14px
}
.related-offerings>a:not(.button):hover {
color:var(--blue)
}
.related-offerings .button {
margin-top:24px
}
@media(max-width:900px) {
.offering-lead,.collaboration-grid,.boundary-panel {
grid-template-columns:1fr;
gap:34px
}
.challenge-grid,.feature-grid {
grid-template-columns:repeat(2,1fr)
}
.challenge-card:nth-child(2) {
border-right:0
}
.challenge-card:last-child {
grid-column:1/-1;
min-height:210px;
border-top:1px solid var(--line)
}
.workflow-grid {
grid-template-columns:repeat(2,1fr);
gap:35px 20px;
background:none
}
}
@media(max-width:600px) {
.offering-lead {
padding-block:34px 40px
}
.offering-title-row {
align-items:flex-start;
gap:15px
}
.offering-title-row>img {
width:50px;
height:50px
}
.offering-title-row h2 {
font-size:23px
}
.offering-lede {
font-size:14px;
margin-top:20px
}
.offering-fit {
display:grid
}
.offering-actions .button {
width:100%
}
.offering-visual {
min-height:240px
}
.offering-visual img {
min-height:240px
}
.offering-audience,.offering-overview {
padding:28px 24px
}
.offering-jump {
top:64px;
overflow-x:auto;
scrollbar-width:none
}
.offering-jump .container {
width:max-content;
min-width:100%;
gap:23px;
padding-inline:20px
}
.offering-jump strong {
display:none
}
.offering-section {
scroll-margin-top:122px
}
.challenge-grid,.feature-grid,.workflow-grid {
grid-template-columns:1fr
}
.challenge-card,.challenge-card:nth-child(2),.challenge-card:last-child {
grid-column:auto;
min-height:0;
padding:27px 23px;
border-right:0;
border-top:0;
border-bottom:1px solid var(--line)
}
.challenge-card:last-child {
border-bottom:0
}
.challenge-card h3 {
margin-top:14px;
font-size:19px
}
.feature-card {
min-height:0;
padding:24px 20px
}
.offering-visual-section {
padding-bottom:58px
}
.offering-visual-gallery {
grid-template-columns:1fr;
gap:17px
}
.offering-visual-gallery figure {
padding:12px
}
.workflow-grid {
gap:25px
}
.workflow-step {
display:grid;
grid-template-columns:46px 1fr;
column-gap:16px;
padding:0
}
.workflow-step>span {
width:46px;
height:46px;
border-width:6px;
grid-row:1/3
}
.workflow-step h3 {
margin-top:0
}
.workflow-step p {
grid-column:2
}
.role-card {
grid-template-columns:1fr;
gap:7px
}
.collaboration-focus {
padding:30px 24px
}
.collaboration-focus h2 {
font-size:23px
}
.boundary-panel {
padding:32px 24px
}
.boundary-panel h2 {
font-size:23px
}
}
.offering-journey {
align-self:center;
padding:32px 36px;
background:linear-gradient(140deg,#edf6ff,#fff);
border:1px solid #d6e5f5;
border-radius:10px;
box-shadow:0 12px 38px #193d7110
}
.industry-operations {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.industry-operation {padding:28px;background:#fff;border-top:3px solid var(--blue)}
.industry-operation>span {font-size:28px;color:#4484c6;font-weight:600}
.industry-operation h3 {font-size:21px;margin:16px 0 12px}
.industry-operation p {font-size:15px;color:#50657c;line-height:1.95;margin:0}
.industry-connections {display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}
.industry-connections a {padding:9px 15px;background:#e5effa;color:#155dad;font-size:15px}
.offering-journey h2 {font-size:25px;margin:8px 0 24px}
.offering-journey ol {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.offering-journey li {display:flex;align-items:center;gap:10px;padding:13px 10px;background:#fff;border:1px solid #dfeaf5;border-radius:5px;font-size:15px}
.offering-journey li>span {color:var(--blue);font-size:13px;font-weight:700}
.journey-participants {display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid #dce7f2}
.journey-participants small {flex-basis:100%;font-size:13px;color:#587088;margin-bottom:3px}
.journey-participants>span {font-size:12px;padding:5px 9px;background:#e5effa;color:#365573;border-radius:3px}
.scenario-section {background:#102e54;color:#fff}
.scenario-layout {display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.scenario-intro .eyebrow {color:#87c8ff}
.scenario-intro h2 {font-size:32px;line-height:1.5;margin:14px 0 23px;color:#fff}
.scenario-intro>p:not(.eyebrow) {color:#c3d5e9;line-height:1.95;font-size:16px}
.scenario-note {display:inline-block;margin-top:20px;font-size:12px;color:#b6cde4;border:1px solid #56718f;padding:5px 12px}
.scenario-operation {display:grid;grid-template-columns:40px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid #3b5675}
.scenario-operation:first-child {padding-top:0}
.scenario-operation:last-child {border-bottom:0;padding-bottom:0}
.scenario-operation>span {color:#6dbaff;font-size:23px;font-weight:600;line-height:1.5}
.scenario-operation h3 {color:#fff;font-size:20px;margin:0 0 10px;line-height:1.5}
.scenario-operation p {color:#c3d5e9;line-height:1.95;margin:0;font-size:15px}
.offering-faqs {max-width:960px;margin:0 auto;border-top:1px solid #dce5ef}
.offering-faq {border-bottom:1px solid #dce5ef}
.offering-faq summary {position:relative;padding:24px 38px 24px 0;font-size:19px;font-weight:600;cursor:pointer;list-style:none;line-height:1.6}
.offering-faq summary::-webkit-details-marker {display:none}
.offering-faq summary:after {content:'+';position:absolute;right:8px;top:24px;color:var(--blue);font-size:24px;line-height:1}
.offering-faq[open] summary:after {content:'−'}
.offering-faq p {margin:0;padding:0 38px 24px 0;color:#50657c;line-height:1.95}
@media(max-width:1000px) {
.system-showcase-card.featured {grid-template-columns:1.2fr .8fr}
.system-showcase-card.featured figure {min-height:390px}
.scenario-layout {gap:38px;grid-template-columns:1fr 1.25fr}
.scenario-intro h2 {font-size:27px}
}
@media(max-width:700px) {
.system-showcase-grid,.system-interface-gallery {grid-template-columns:1fr}
.system-showcase-card.featured {grid-column:auto;grid-template-columns:1fr}
.system-showcase-card.featured figure {min-height:0;border-right:0;border-bottom:1px solid #dce8f1}
.system-showcase-card figure,.system-showcase-card.featured figure {padding:14px}
.system-showcase-card.featured .system-showcase-copy,.system-showcase-copy {padding:23px 22px 25px}
.system-showcase-copy h3 {font-size:20px}
.system-showcase-copy ul {margin-top:16px}
.system-interface-figure:last-child:nth-child(odd) {grid-column:auto}
.system-interface-figure>a {min-height:0;padding:12px}
.system-interface-figure figcaption {padding:20px}
.industry-operations {grid-template-columns:1fr;gap:20px}
.industry-operation {padding:24px}
.industry-connections {gap:10px}
.offering-journey {padding:25px 20px}
.offering-journey h2 {font-size:23px}
.offering-journey ol {gap:10px}
.offering-journey li {font-size:14px;gap:8px}
.scenario-layout {display:block}
.scenario-intro {margin-bottom:35px}
.scenario-intro h2 {font-size:26px}
.scenario-operation {grid-template-columns:30px 1fr;gap:12px}
.scenario-operation h3 {font-size:19px}
.offering-faq summary {font-size:17px;padding-block:20px}
.offering-faq p {padding-right:0;font-size:15px}
}
@media(max-width:1000px) {
.source-business-layout {
grid-template-columns:1fr;
gap:42px
}
.source-business-copy h2 {
max-width:720px
}
.assurance-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.assurance-summary {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px 0
}
.assurance-summary>div:nth-child(2) {
border-right:0
}
}
@media(max-width:600px) {
.home-hero .hero-inner {
min-height:650px
}
.home-hero .hero-copy {
padding:34px 0 58px
}
.home-hero .hero-art {
top:0;
bottom:auto;
height:100%;
object-position:center bottom
}
.home-hero .hero-slide:after {
background:linear-gradient(180deg,rgba(3,24,58,.94) 0%,rgba(5,31,70,.88) 60%,rgba(7,34,70,.82) 100%)
}
.home-hero h1,.home-hero .hero-slide h2 {
font-size:28px;
line-height:1.38
}
.hero-indicators {
bottom:10px;
gap:8px
}
.hero-indicators button {
width:32px
}
.home-hero .hero-description {
font-size:14px;
line-height:1.75
}
.hero-points {
gap:6px;
margin-top:16px;
font-size:12px
}
.home-hero .hero-actions {
margin-top:21px
}
.home-hero .button {
flex:1;
padding-inline:12px;
font-size:13px
}
.home-capability-section .capability {
min-height:0
}
.home-capability-section .capability-grid {
grid-template-columns:1fr
}
.source-business-copy h2 {
font-size:27px
}
.source-actions {
align-items:flex-start;
flex-direction:column;
gap:17px
}
.source-business-grid,.assurance-grid,.assurance-summary {
grid-template-columns:1fr
}
.source-business-grid a {
min-height:132px
}
.assurance-grid article {
min-height:0
}
.assurance-summary {
gap:0;
padding:0
}
.assurance-summary>div,.assurance-summary>div:nth-child(2) {
padding:20px;
border-right:0;
border-bottom:1px solid #e2eaf2
}
.assurance-summary>div:last-child {
border-bottom:0
}
}
@media(max-width:760px) {
body {
padding-bottom:72px
}
.floating-service {
top:auto;
right:12px;
bottom:10px;
left:12px;
width:auto;
transform:none;
display:grid;
grid-template-columns:1fr 1fr auto;
border-radius:12px;
overflow:hidden
}
.floating-service-item-wrap {
display:contents
}
.floating-service-item {
min-height:54px;
flex-direction:row;
gap:7px;
padding:9px 13px;
border-right:1px solid #e7eef8;
border-bottom:0;
border-radius:0!important;
font-size:13px
}
.floating-service-item svg {
width:21px;
height:21px
}
.floating-service-top {
width:54px
}
.floating-service-top span {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0)
}
.floating-service-detail {
display:none
}
.floating-service-consult:after {
top:8px;
right:calc(50% - 37px)
}
.consult-modal {
width:calc(100% - 24px);
max-height:calc(100dvh - 24px);
border-radius:13px
}
.consult-modal-card {
padding:22px 18px 24px
}
.consult-modal-card header {
margin-bottom:17px
}
.consult-modal-card h2 {
font-size:23px
}
.consult-modal-close {
width:38px;
height:38px
}
.consult-qr-visual {
width:min(340px,100%)
}
.consult-modal-card>p {
margin-top:15px;
font-size:13px
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
transition:none!important;
animation:none!important
}
}
@media print {
.site-header,.site-footer,.floating-service,.consult-banner,.page-aside,.hero-actions,.menu-toggle {
display:none
}
.container {
width:100%
}
.hero,.inner-hero {
background:#fff;
color:#17283f
}
.hero-art,.hero:after {
display:none
}
.hero h1,.hero p {
color:#17283f
}
.hero-inner {
min-height:0
}
.hero-copy {
max-width:100%;
padding:20px 0
}
.section {
padding-block:25px
}
.page-layout {
display:block
}
.model-panel[hidden] {
display:grid!important
}
.model-tabs {
display:none
}
a {
color:inherit
}
.capability-grid {
grid-template-columns:repeat(2,1fr)
}
.price-card,.industry-card {
break-inside:avoid
}
.pricing-grid {
gap:10px
}
.section-heading h2 {
font-size:25px
}
}
/* Full feature catalog */
.mega-feature-link {
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:20px 28px;
border-top:1px solid var(--line);
background:#f4f8fd
}
.mega-feature-link strong,.mega-feature-link small {display:block}
.mega-feature-link strong {color:var(--ink);font-size:17px}
.mega-feature-link small {color:var(--muted);font-size:13px;margin-top:5px}
.mega-feature-link>a {color:var(--blue);font-weight:600;white-space:nowrap}
.pricing-feature-link {
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
margin:0 0 28px;
padding:28px 34px;
border:1px solid #c9ddf7;
background:linear-gradient(110deg,#f3f8ff,#fff)
}
.pricing-feature-link h2 {font-size:22px;margin:8px 0}
.pricing-feature-link p {font-size:14px;margin:0;color:var(--muted)}
.pricing-feature-link .button {white-space:nowrap}
.feature-catalog-section {padding:58px 0 100px;background:#fff}
.feature-catalog-intro {
display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
padding-bottom:27px;border-bottom:1px solid var(--line)
}
.feature-catalog-intro h2 {font-size:31px;line-height:1.35;margin:10px 0 12px}
.feature-catalog-intro p {font-size:15px;color:var(--muted);margin:0}
.feature-scope-note {
margin:20px 0 28px;padding:15px 20px;border-left:3px solid var(--blue);
background:#f5f9ff;color:#536b87;font-size:14px;line-height:1.85
}
.feature-jump-nav {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:54px}
.feature-jump-nav a {
display:inline-flex;align-items:center;gap:10px;padding:9px 15px;
border:1px solid #d8e4f3;background:#fff;color:#264663;font-size:14px
}
.feature-jump-nav a:hover,.feature-jump-nav a:focus-visible {border-color:var(--blue);color:var(--blue);background:#f3f8ff}
.feature-jump-nav span {font-size:12px;color:#7e94ae}
.feature-group {scroll-margin-top:115px;margin:0 0 62px}
.feature-group>header {display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.feature-group>header h2 {font-size:27px;margin:5px 0 5px}
.feature-group>header p {font-size:14px;color:var(--muted);margin:0}
.feature-group>header>a {font-size:13px;color:var(--blue);white-space:nowrap}
.feature-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.feature-list li {min-width:0;padding:20px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-list li:nth-child(4n+2),.feature-list li:nth-child(4n+3) {background:#f8fbff}
.feature-list h3 {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;color:#1b3654;font-size:16px;line-height:1.45}
.feature-list p {margin:0;font-size:13px;line-height:1.8;color:#647a92}
.feature-catalog-end {display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 38px;background:#eff6ff}
.feature-catalog-end h2 {font-size:24px;margin:0 0 8px}
.feature-catalog-end p {font-size:14px;margin:0;color:var(--muted)}
.feature-catalog-end .button {white-space:nowrap}
@media(max-width:760px) {
.mega-feature-link,.pricing-feature-link,.feature-catalog-intro,.feature-catalog-end {align-items:flex-start;flex-direction:column}
.mega-feature-link>a,.pricing-feature-link .button,.feature-catalog-end .button {white-space:normal}
.feature-catalog-section {padding:35px 0 65px}
.feature-catalog-intro h2 {font-size:25px}
.feature-jump-nav {gap:8px;margin-bottom:40px}
.feature-jump-nav a {font-size:13px;padding:8px 11px}
.feature-list {grid-template-columns:1fr}
.feature-list li:nth-child(4n+2),.feature-list li:nth-child(4n+3) {background:#fff}
.feature-list li:nth-child(even) {background:#f8fbff}
.feature-group>header h2 {font-size:23px}
.feature-catalog-end,.pricing-feature-link {padding:24px}
}