@font-face{ font-family: ServicesReferenceIcons; src: url("/static/public_preview/assets/images/services/reference/662fefa8f2f8a95c.woff2") format("woff2"); font-display: block; ;font-display:swap;}
@font-face{ font-family: ServicesReferenceBrand; src: url("/static/public_preview/assets/images/services/reference/87cc1520ed4909a1.woff") format("woff"); font-weight: 400; font-display: swap; ;font-display:swap;}
@font-face{ font-family: ServicesReferenceBrand; src: url("/static/public_preview/assets/images/services/reference/34e82fa4218ac21c.woff") format("woff"); font-weight: 700; font-display: swap; ;font-display:swap;}
html body #main-content.service-reference{ color-scheme: dark; --bg: #030a19; --surface: #071224; --surface-2: #0c192e; --text: #f3f5ff; --muted: #aab4ca; --line: #233048; --cyan: #49d9ee; --purple: #b58aff; --pink: #e36ac5; --radius: 12px; --max: 1180px; --space: 76px; --font: ServicesReferenceBrand,Tahoma,Arial,sans-serif; --glow: linear-gradient(110deg,#145186,#6644a1 56%,#a23588); }
html body #main-content.service-reference *{ box-sizing: border-box; }
html body #main-content.service-reference{ scroll-behavior: smooth; scroll-padding-top: 108px; }
html body #main-content.service-reference{ margin: 0px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; }
html body #main-content.service-reference button,html body #main-content.service-reference input,html body #main-content.service-reference select,html body #main-content.service-reference textarea{ font: inherit; }
html body #main-content.service-reference button,html body #main-content.service-reference a,html body #main-content.service-reference input,html body #main-content.service-reference summary,html body #main-content.service-reference select,html body #main-content.service-reference textarea{ -webkit-tap-highlight-color: transparent; }
html body #main-content.service-reference button,html body #main-content.service-reference a{ touch-action: manipulation; }
html body #main-content.service-reference button{ color: inherit; cursor: pointer; }
html body #main-content.service-reference a{ color: inherit; text-decoration: none; }
html body #main-content.service-reference button{ border: 0px; }
html body #main-content.service-reference img{ display: block; max-width: 100%; height: auto; }
html body #main-content.service-reference h1,html body #main-content.service-reference h2,html body #main-content.service-reference h3,html body #main-content.service-reference p{ margin: 0px; }
html body #main-content.service-reference h1,html body #main-content.service-reference h2,html body #main-content.service-reference h3{ line-height: 1.4; }
html body #main-content.service-reference h2{ font-size: clamp(25px, 2.55vw, 34px); }
html body #main-content.service-reference h3{ font-size: 20px; }
html body #main-content.service-reference p{ color: var(--muted); }
html body #main-content.service-reference a,html body #main-content.service-reference button,html body #main-content.service-reference summary,html body #main-content.service-reference input,html body #main-content.service-reference select,html body #main-content.service-reference textarea{ outline-offset: 5px; }
html body #main-content.service-reference a:focus-visible,html body #main-content.service-reference button:focus-visible,html body #main-content.service-reference summary:focus-visible,html body #main-content.service-reference input:focus-visible,html body #main-content.service-reference select:focus-visible,html body #main-content.service-reference textarea:focus-visible{ outline: 2px solid var(--cyan); }
html body #main-content.service-reference [hidden]{ display: none !important; }
html body #main-content.service-reference .wrap{ width: min(var(--max),calc(100% - 64px)); margin-inline: auto; }
html body #main-content.service-reference .icon{ font-style: normal; font-weight: 400; line-height: 1; font-size: 24px; display: inline-block; flex-shrink: 0; speak: none; font-family: ServicesReferenceIcons !important; }
html body #main-content.service-reference .skip{ position: fixed; top: -80px; right: 20px; z-index: 100; background: var(--cyan); color: rgb(0, 21, 38); padding: 12px; }
html body #main-content.service-reference .skip:focus{ top: 8px; }
html body #main-content.service-reference .btn{ display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 46px; padding: 10px 23px; border: 1px solid rgb(64, 80, 107); border-radius: 7px; font-weight: 700; font-size: 16px; background: transparent; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
html body #main-content.service-reference .btn:hover{ background: rgb(21, 32, 57); border-color: var(--purple); transform: translateY(-2px); }
html body #main-content.service-reference .btn.primary{ background: var(--glow); border-color: rgb(134, 113, 200); box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset, rgba(134, 64, 192, 0.11) 0px 0px 24px; }
html body #main-content.service-reference .btn.primary:hover{ filter: brightness(1.15); }
html body #main-content.service-reference .btn.small{ font-size: 14px; min-height: 40px; padding: 8px 17px; }
html body #main-content.service-reference .btn .icon{ font-size: 20px; }
html body #main-content.service-reference .icon-btn{ display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgb(11, 21, 39); }
html body #main-content.service-reference .icon-btn:hover{ border-color: var(--cyan); background: rgb(18, 33, 57); }
html body #main-content.service-reference .icon-btn:disabled{ opacity: 0.35; cursor: default; }
html body #main-content.service-reference .eyebrow{ font-size: 14px; letter-spacing: 0.02em; color: var(--cyan); font-weight: 700; margin-bottom: 12px; }
html body #main-content.service-reference .gradient-text{ color: rgb(199, 146, 241); background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; }
html body #main-content.service-reference .section{ margin-top: var(--space); }
html body #main-content.service-reference .section-head{ margin-bottom: 24px; text-align: center; }
html body #main-content.service-reference .section-head p{ margin-top: 7px; font-size: 16px; }
html body #main-content.service-reference .section-head.start{ text-align: start; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
html body #main-content.service-reference .surface{ border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(125deg, rgba(11, 23, 44, 0.533), rgb(6, 13, 29)); }
html body #main-content.service-reference .section-number{ font: 700 13px var(--font); color: var(--cyan); border: 1px solid rgb(45, 83, 104); border-radius: 6px; padding: 4px 10px; display: inline-block; margin-bottom: 12px; }
html body #main-content.service-reference .muted{ color: var(--muted); }
html body #main-content.service-reference .header{ position: sticky; top: 0px; z-index: 30; background: rgba(3, 10, 25, 0.95); backdrop-filter: blur(18px); border-bottom: 1px solid rgb(27, 39, 60); }
html body #main-content.service-reference .header-inner{ min-height: 80px; display: flex; gap: 24px; align-items: center; width: min(1380px, 100% - 48px); margin: auto; }
html body #main-content.service-reference .brand{ flex-shrink: 0; }
html body #main-content.service-reference .brand img{ width: 157px; height: auto; }
html body #main-content.service-reference .main-nav{ display: flex; align-items: center; justify-content: center; gap: 17px; flex: 1 1 0%; }
html body #main-content.service-reference .main-nav a{ font-size: 14px; white-space: nowrap; padding: 26px 0px; position: relative; color: rgb(195, 202, 217); }
html body #main-content.service-reference .main-nav a:hover,html body #main-content.service-reference .main-nav a[aria-current="page"]{ color: var(--cyan); }
html body #main-content.service-reference .main-nav a[aria-current="page"]::after{ content: ""; position: absolute; bottom: 13px; inset-inline: 0px; height: 2px; background: linear-gradient(90deg,var(--pink),var(--cyan)); }
html body #main-content.service-reference .header-cta{ white-space: nowrap; }
html body #main-content.service-reference .menu-btn{ display: none; }
html body #main-content.service-reference .crumb{ display: flex; gap: 9px; font-size: 14px; color: rgb(178, 189, 209); padding-top: 25px; align-items: center; }
html body #main-content.service-reference .crumb .icon{ font-size: 15px; }
html body #main-content.service-reference .crumb span:last-child{ color: var(--cyan); }
html body #main-content.service-reference .hero{ display: grid; grid-template-columns: 0.95fr 1.15fr; align-items: center; min-height: 435px; gap: 18px; padding-block: 30px 18px; }
html body #main-content.service-reference .hero-copy{ padding-block: 10px; position: relative; z-index: 1; }
html body #main-content.service-reference .hero h1{ display: inline-block; font-size: clamp(34px, 3.45vw, 49px); font-weight: 700; line-height: 1.43; margin-bottom: 17px; }
html body #main-content.service-reference .hero p{ max-width: 470px; font-size: 18px; line-height: 1.9; }
html body #main-content.service-reference .hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
html body #main-content.service-reference .hero-art{ margin: 0px; position: relative; align-self: center; }
html body #main-content.service-reference .hero-art img{ width: 100%; aspect-ratio: 1.73 / 1; object-fit: contain; mask-image: linear-gradient(rgb(0, 0, 0) 92%, transparent); }
html body #main-content.service-reference .hero-art figcaption{ font-size: 12px; color: rgb(146, 159, 183); text-align: center; margin-top: 2px; }
html body #main-content.service-reference .proof{ display: grid; grid-template-columns: repeat(4, 1fr); padding: 19px 0px; }
html body #main-content.service-reference .proof-item{ display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0px 12px; border-inline-end: 1px solid var(--line); font-size: 15px; }
html body #main-content.service-reference .proof-item:last-child{ border: 0px; }
html body #main-content.service-reference .proof .icon{ color: var(--cyan); font-size: 26px; }
html body #main-content.service-reference .proof-item small{ display: block; color: var(--muted); font-size: 13px; }
html body #main-content.service-reference .situation-tabs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
html body #main-content.service-reference .situation-tab{ display: flex; align-items: center; gap: 15px; text-align: start; padding: 19px 18px; background: rgb(6, 16, 33); border: 1px solid var(--line); border-radius: 9px; min-height: 105px; position: relative; }
html body #main-content.service-reference .situation-tab .icon{ font-size: 34px; color: var(--purple); }
html body #main-content.service-reference .situation-tab strong{ font-size: 18px; display: block; }
html body #main-content.service-reference .situation-tab small{ display: block; color: var(--muted); font-size: 14px; margin-top: 3px; line-height: 1.5; }
html body #main-content.service-reference .situation-tab:hover{ background: rgb(11, 25, 48); }
html body #main-content.service-reference .situation-tab[aria-selected="true"]{ border-color: var(--purple); background: linear-gradient(110deg, rgb(11, 38, 64), rgb(38, 18, 54)); box-shadow: rgba(108, 79, 195, 0.133) 0px 0px 17px, rgba(176, 134, 237, 0.2) 0px 0px 0px 1px inset; }
html body #main-content.service-reference .situation-tab[aria-selected="true"]::after{ content: ""; position: absolute; inset-inline-start: 0px; top: 22%; bottom: 22%; width: 3px; background: var(--cyan); border-radius: 3px; }
html body #main-content.service-reference .scenario{ display: grid; grid-template-columns: 0.8fr 1.25fr; min-height: 280px; overflow: hidden; align-items: center; }
html body #main-content.service-reference .scenario-copy{ padding: 29px 32px; }
html body #main-content.service-reference .scenario-copy p{ margin-top: 8px; }
html body #main-content.service-reference .check-list{ padding: 0px; list-style: none; margin: 17px 0px 21px; display: grid; gap: 7px; }
html body #main-content.service-reference .check-list li{ display: flex; align-items: flex-start; gap: 8px; color: rgb(199, 208, 225); font-size: 15px; }
html body #main-content.service-reference .check-list .icon{ color: var(--cyan); font-size: 18px; margin-top: 3px; }
html body #main-content.service-reference .scenario img{ width: 100%; height: 265px; object-fit: contain; padding: 13px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, transparent); }
html body #main-content.service-reference .carousel-tools{ display: flex; gap: 8px; }
html body #main-content.service-reference .carousel{ display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgb(53, 80, 112) transparent; padding: 3px 1px 15px; overscroll-behavior-inline: contain; }
html body #main-content.service-reference .service-card{ flex: 0 0 calc(16.6667% - 11.6667px); min-width: 165px; scroll-snap-align: start; padding: 24px 17px 20px; display: flex; flex-direction: column; align-items: flex-start; transition: border-color 0.2s, transform 0.2s; }
html body #main-content.service-reference .service-card:hover{ border-color: rgb(102, 83, 149); transform: translateY(-3px); }
html body #main-content.service-reference .card-media{ width: 100%; height: 112px; display: flex; align-items: center; justify-content: center; margin-bottom: 19px; overflow: hidden; border-radius: 9px; }
html body #main-content.service-reference .card-media .card-icon{ margin-bottom: 0px; }
html body #main-content.service-reference .card-media--image{ background: rgb(4, 12, 27); border: 1px solid var(--line); }
html body #main-content.service-reference .card-media img{ width: 100%; height: 100%; display: block; object-fit: contain; }
html body #main-content.service-reference .card-media[data-fit="cover"] img{ object-fit: cover; }
html body #main-content.service-reference .card-icon{ display: grid; place-items: center; width: 57px; height: 57px; border: 1px solid rgb(89, 67, 115); border-radius: 12px; background: rgba(38, 19, 58, 0.4); color: var(--pink); box-shadow: rgba(143, 57, 190, 0.075) 0px 0px 24px; margin-bottom: 19px; }
html body #main-content.service-reference .card-icon .icon{ font-size: 31px; }
html body #main-content.service-reference .service-card:nth-child(2n) .card-icon{ color: var(--cyan); border-color: rgb(39, 85, 117); background: rgba(16, 44, 67, 0.333); }
html body #main-content.service-reference .service-card h3{ font-size: 18px; margin-bottom: 7px; }
html body #main-content.service-reference .service-card p{ font-size: 15px; line-height: 1.6; }
html body #main-content.service-reference .card-link{ margin-top: auto; padding: 18px 0px 0px; background: transparent; color: var(--cyan); display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
html body #main-content.service-reference .card-link .icon{ font-size: 17px; }
html body #main-content.service-reference .carousel-note{ font-size: 13px; color: var(--muted); margin-top: 5px; display: none; }
html body #main-content.service-reference .journey{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 17px; position: relative; }
html body #main-content.service-reference .journey article{ padding: 24px 14px; text-align: center; position: relative; }
html body #main-content.service-reference .journey .icon{ font-size: 32px; color: var(--purple); margin-bottom: 12px; }
html body #main-content.service-reference .journey h3{ font-size: 18px; margin-bottom: 6px; }
html body #main-content.service-reference .journey p{ font-size: 14px; }
html body #main-content.service-reference .step-count{ position: absolute; top: 9px; right: 11px; color: rgb(146, 157, 186); font-size: 12px; }
html body #main-content.service-reference .platforms{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
html body #main-content.service-reference .platform{ display: flex; gap: 15px; align-items: center; padding: 23px; }
html body #main-content.service-reference .platform .icon{ font-size: 35px; color: var(--cyan); }
html body #main-content.service-reference .platform h3{ font-size: 21px; }
html body #main-content.service-reference .platform small{ color: var(--muted); font-size: 14px; }
html body #main-content.service-reference .callout{ margin-top: 20px; padding: 26px 32px; display: flex; gap: 22px; align-items: center; justify-content: space-between; border-color: rgb(97, 67, 120); background: linear-gradient(110deg, rgb(7, 28, 43), rgb(23, 13, 40)); }
html body #main-content.service-reference .callout p{ font-size: 15px; }
html body #main-content.service-reference .callout h3{ margin-bottom: 6px; }
html body #main-content.service-reference .anatomy{ display: grid; grid-template-columns: 1fr 0.9fr 1fr; align-items: center; gap: 24px; }
html body #main-content.service-reference .anatomy-side{ display: grid; gap: 16px; }
html body #main-content.service-reference .anatomy-item{ padding: 21px; display: flex; gap: 14px; }
html body #main-content.service-reference .anatomy-item .icon{ color: var(--pink); font-size: 27px; }
html body #main-content.service-reference .anatomy-item h3{ font-size: 18px; }
html body #main-content.service-reference .anatomy-item p{ font-size: 14px; margin-top: 4px; }
html body #main-content.service-reference .anatomy-center{ padding: 30px; text-align: center; border-color: rgb(110, 76, 136); }
html body #main-content.service-reference .anatomy-center img{ width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; object-position: left center; }
html body #main-content.service-reference .anatomy-center h3{ font-size: 26px; color: var(--purple); margin-top: 17px; }
html body #main-content.service-reference .workflow{ padding: 30px; }
html body #main-content.service-reference .flow-steps{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
html body #main-content.service-reference .flow-node{ border: 1px solid rgb(41, 68, 94); padding: 22px 12px; border-radius: 10px; text-align: center; transition: 0.3s; background: rgb(7, 21, 42); }
html body #main-content.service-reference .flow-node .icon{ font-size: 32px; color: var(--purple); margin-bottom: 13px; }
html body #main-content.service-reference .flow-node strong{ display: block; font-size: 17px; }
html body #main-content.service-reference .flow-node small{ font-size: 14px; color: var(--muted); }
html body #main-content.service-reference .flow-node.done{ border-color: var(--cyan); background: rgb(11, 42, 55); box-shadow: rgba(67, 219, 237, 0.08) 0px 0px 22px; }
html body #main-content.service-reference .flow-controls{ display: flex; align-items: center; gap: 20px; margin-top: 25px; }
html body #main-content.service-reference .flow-controls p{ font-size: 15px; }
html body #main-content.service-reference .metrics{ display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; }
html body #main-content.service-reference .metric-controls{ display: grid; gap: 10px; }
html body #main-content.service-reference .metric-button{ text-align: start; padding: 19px 22px; border: 1px solid var(--line); border-radius: 9px; background: rgb(7, 18, 36); }
html body #main-content.service-reference .metric-button strong{ display: block; font-size: 18px; }
html body #main-content.service-reference .metric-button small{ color: var(--muted); }
html body #main-content.service-reference .metric-button[aria-pressed="true"]{ border-color: var(--cyan); background: rgb(10, 38, 55); }
html body #main-content.service-reference .metric-result{ padding: 32px; }
html body #main-content.service-reference .metric-result .icon{ font-size: 40px; color: var(--cyan); margin-bottom: 18px; }
html body #main-content.service-reference .metric-result h3{ font-size: 26px; }
html body #main-content.service-reference .metric-result p{ margin-top: 12px; }
html body #main-content.service-reference .metric-code{ display: block; padding: 12px 16px; margin-top: 20px; border: 1px solid var(--line); border-radius: 7px; color: var(--purple); font-size: 17px; direction: ltr; text-align: left; }
html body #main-content.service-reference .mini-note{ font-size: 13px; color: rgb(155, 168, 191); margin-top: 13px; }
html body #main-content.service-reference .comparison{ padding: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
html body #main-content.service-reference .comparison figure{ margin: 0px; min-width: 0px; }
html body #main-content.service-reference .comparison img{ width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: rgb(6, 12, 25); border-radius: 9px; }
html body #main-content.service-reference .comparison h3{ margin-bottom: 14px; color: var(--cyan); }
html body #main-content.service-reference .comparison .before h3{ color: rgb(221, 154, 174); }
html body #main-content.service-reference .comparison p{ font-size: 15px; margin-top: 14px; }
html body #main-content.service-reference .comparison.after-only .before{ display: none; }
html body #main-content.service-reference .comparison.after-only{ grid-template-columns: 1fr; }
html body #main-content.service-reference .comparison.after-only img{ max-height: 310px; }
html body #main-content.service-reference .segmented{ display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 8px; gap: 4px; }
html body #main-content.service-reference .segmented button{ background: transparent; color: var(--muted); padding: 7px 15px; border-radius: 5px; font-size: 14px; }
html body #main-content.service-reference .segmented button[aria-pressed="true"]{ background: rgb(39, 49, 73); color: white; }
html body #main-content.service-reference .process{ position: relative; display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 18px; padding: 8px 0px 0px; background: transparent; overflow: visible; }
html body #main-content.service-reference .process::before{ content: ""; position: absolute; z-index: 0; top: 49px; inset-inline: 9%; height: 2px; background: linear-gradient(90deg, rgb(112, 75, 201) 0%, rgb(70, 100, 215) 48%, rgb(47, 129, 199) 100%); box-shadow: rgba(85, 118, 223, 0.333) 0px 0px 18px; }
html body #main-content.service-reference .process article{ position: relative; z-index: 1; padding: 0px 12px 10px; text-align: center; border: 0px; background: transparent; }
html body #main-content.service-reference .process article:last-child{ border: 0px; }
html body #main-content.service-reference .process span{ position: relative; display: grid; place-items: center; width: 82px; height: 82px; margin: 0px auto 19px; border-radius: 50%; border: 1px solid rgb(53, 86, 146); background: radial-gradient(circle at 50% 42%, rgb(31, 57, 113) 0%, rgb(22, 43, 89) 55%, rgb(12, 25, 56) 100%); box-shadow: rgba(20, 38, 77, 0.4) 0px 0px 0px 8px, rgba(49, 81, 138, 0.333) 0px 0px 0px 9px, rgba(0, 0, 0, 0.467) 0px 12px 34px, rgba(65, 104, 188, 0.2) 0px 0px 25px inset; color: rgb(143, 182, 255); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
html body #main-content.service-reference .process span::after{ content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(111, 143, 206, 0.2); border-radius: 50%; }
html body #main-content.service-reference .process h3{ font-size: 18px; margin-bottom: 7px; }
html body #main-content.service-reference .process p{ font-size: 14px; max-width: 220px; margin-inline: auto; }
html body #main-content.service-reference .deliverables{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
html body #main-content.service-reference .deliverable{ display: flex; gap: 17px; padding: 24px; align-items: flex-start; }
html body #main-content.service-reference .deliverable .icon{ color: var(--cyan); font-size: 28px; margin-top: 3px; }
html body #main-content.service-reference .deliverable h3{ font-size: 18px; margin-bottom: 6px; }
html body #main-content.service-reference .deliverable p{ font-size: 15px; }
html body #main-content.service-reference .faq-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
html body #main-content.service-reference .faq-item{ border: 1px solid var(--line); border-radius: 8px; background: rgb(6, 16, 32); }
html body #main-content.service-reference .faq-item summary{ cursor: pointer; list-style: none; padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 700; }
html body #main-content.service-reference .faq-item summary::-webkit-details-marker{ display: none; }
html body #main-content.service-reference .faq-item summary .icon{ color: var(--purple); font-size: 22px; transition: transform 0.2s; }
html body #main-content.service-reference .faq-item[open] summary .icon{ transform: rotate(45deg); }
html body #main-content.service-reference .faq-item[open]{ border-color: rgb(81, 96, 129); }
html body #main-content.service-reference .faq-item p{ padding: 0px 20px 20px; font-size: 16px; }
html body #main-content.service-reference .related-card{ min-width: 235px; flex: 0 0 calc(25% - 10.5px); padding: 19px; scroll-snap-align: start; display: flex; align-items: center; gap: 15px; }
html body #main-content.service-reference .related-card .icon{ font-size: 32px; color: var(--cyan); }
html body #main-content.service-reference .related-card h3{ font-size: 17px; }
html body #main-content.service-reference .related-card p{ font-size: 14px; }
html body #main-content.service-reference .related-card:hover{ border-color: var(--purple); }
html body #main-content.service-reference .final-cta{ position: relative; display: grid; grid-template-columns: 1.7fr 1fr; align-items: center; padding: 34px 42px; overflow: hidden; border-color: rgb(96, 68, 113); background: linear-gradient(110deg, rgb(7, 23, 43), rgba(24, 11, 45, 0.4)); }
html body #main-content.service-reference .final-cta h2{ font-size: clamp(25px, 2.7vw, 35px); margin-bottom: 10px; }
html body #main-content.service-reference .final-cta .hero-actions{ margin-top: 19px; }
html body #main-content.service-reference .final-cta img{ width: 100%; mix-blend-mode: screen; }
html body #main-content.service-reference .footer{ border-top: 1px solid var(--line); margin-top: 50px; padding: 30px 0px; }
html body #main-content.service-reference .footer-main{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
html body #main-content.service-reference .footer img{ width: 135px; }
html body #main-content.service-reference .footer-links{ display: flex; gap: 24px; font-size: 14px; color: var(--muted); }
html body #main-content.service-reference .footer small{ font-size: 13px; color: rgb(154, 168, 189); }
html body #main-content.service-reference .mobile-bar{ display: none; }
html body #main-content.service-reference .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
html body #main-content.service-reference dialog{ background: rgb(9, 19, 37); color: var(--text); border: 1px solid rgb(102, 87, 138); border-radius: 16px; padding: 0px; width: min(580px, 100% - 32px); max-height: 90dvh; box-shadow: rgba(0, 0, 0, 0.667) 0px 35px 100px; }
html body #main-content.service-reference dialog::backdrop{ background: rgba(0, 0, 0, 0.733); backdrop-filter: blur(7px); }
html body #main-content.service-reference .dialog-inner{ padding: 30px; }
html body #main-content.service-reference .dialog-top{ display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
html body #main-content.service-reference .dialog-top h2{ font-size: 26px; }
html body #main-content.service-reference .dialog-top .icon-btn{ flex-shrink: 0; }
html body #main-content.service-reference .dialog-inner label{ display: block; margin: 18px 0px 7px; font-size: 15px; font-weight: 700; }
html body #main-content.service-reference .dialog-inner input,html body #main-content.service-reference .dialog-inner select,html body #main-content.service-reference .dialog-inner textarea{ width: 100%; background: rgb(4, 13, 28); border: 1px solid rgb(53, 66, 90); border-radius: 8px; padding: 11px 14px; color: var(--text); font-size: 16px; }
html body #main-content.service-reference .dialog-inner textarea{ resize: vertical; min-height: 110px; }
html body #main-content.service-reference .dialog-inner .actions{ display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
html body #main-content.service-reference .dialog-note{ font-size: 14px; margin-top: 14px; }
html body #main-content.service-reference .request-preview{ padding: 18px; border: 1px solid rgb(43, 86, 105); border-radius: 9px; white-space: pre-wrap; color: rgb(216, 231, 241); background: rgb(7, 29, 43); margin-top: 20px; font-size: 15px; }
html body #main-content.service-reference .gallery-dialog{ width: min(900px, 100% - 32px); }
html body #main-content.service-reference .gallery-dialog img{ width: 100%; border-radius: 10px; }
html body #main-content.service-reference .toast{ position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; background: rgb(19, 46, 61); border: 1px solid rgb(59, 158, 177); padding: 13px 25px; border-radius: 9px; box-shadow: rgba(0, 0, 0, 0.533) 0px 10px 40px; font-size: 15px; max-width: 90%; text-align: center; }
@media (min-width: 1450px){html body #main-content.service-reference{ --max: 1250px; }
html body #main-content.service-reference .hero{ min-height: 470px; }}
@media (max-width: 1150px){html body #main-content.service-reference .main-nav{ gap: 12px; }
html body #main-content.service-reference .main-nav a{ font-size: 13px; }
html body #main-content.service-reference .header-inner{ gap: 15px; }
html body #main-content.service-reference .brand img{ width: 131px; }
html body #main-content.service-reference .header-cta{ font-size: 13px; padding: 8px 13px; }
html body #main-content.service-reference .hero h1{ display: inline-block; font-size: 38px; }
html body #main-content.service-reference .service-card{ flex-basis: calc(25% - 10.5px); }
html body #main-content.service-reference .situation-tab{ padding: 15px 12px; gap: 10px; }
html body #main-content.service-reference .situation-tab strong{ font-size: 16px; }
html body #main-content.service-reference .situation-tab .icon{ font-size: 29px; }}
@media (max-width: 950px){html body #main-content.service-reference{ --space: 58px; }
html body #main-content.service-reference .main-nav{ display: none; }
html body #main-content.service-reference .header-inner{ min-height: 70px; }
html body #main-content.service-reference .header-cta{ margin-inline-start: auto; }
html body #main-content.service-reference .menu-btn{ display: grid; }
html body #main-content.service-reference .main-nav.open{ display: flex; position: absolute; top: 70px; inset-inline: 0px; padding: 18px 28px; background: rgb(7, 18, 36); border-bottom: 1px solid rgb(68, 81, 109); flex-wrap: wrap; gap: 5px 20px; justify-content: start; box-shadow: rgba(0, 0, 0, 0.533) 0px 25px 35px; }
html body #main-content.service-reference .main-nav a{ padding: 12px 0px; font-size: 16px; }
html body #main-content.service-reference .main-nav a[aria-current="page"]::after{ bottom: 4px; }
html body #main-content.service-reference .hero{ min-height: 370px; grid-template-columns: 1fr 1fr; }
html body #main-content.service-reference .hero h1{ display: inline-block; font-size: 33px; }
html body #main-content.service-reference .hero p{ font-size: 16px; }
html body #main-content.service-reference .hero-actions .btn{ padding: 10px 14px; font-size: 14px; }
html body #main-content.service-reference .proof-item{ font-size: 13px; gap: 7px; }
html body #main-content.service-reference .proof-item small{ font-size: 12px; }
html body #main-content.service-reference .scenario-copy{ padding: 22px; }
html body #main-content.service-reference .platforms{ grid-template-columns: repeat(2, 1fr); }
html body #main-content.service-reference .anatomy{ gap: 14px; grid-template-columns: 1fr 1fr; }
html body #main-content.service-reference .anatomy-center{ grid-area: 1 / 1 / auto / -1; display: flex; align-items: center; gap: 25px; justify-content: center; padding: 15px; }
html body #main-content.service-reference .anatomy-center img{ width: 240px; }
html body #main-content.service-reference .flow-steps{ gap: 8px; }
html body #main-content.service-reference .flow-node{ padding: 17px 8px; }
html body #main-content.service-reference .flow-node strong{ font-size: 15px; }
html body #main-content.service-reference .flow-node small{ font-size: 12px; }
html body #main-content.service-reference .process article{ padding: 22px 13px; }
html body #main-content.service-reference .footer-main{ flex-wrap: wrap; }
html body #main-content.service-reference .deliverables{ grid-template-columns: repeat(2, 1fr); }
html body #main-content.service-reference .related-card{ flex-basis: calc(33.3333% - 9.33333px); }}
@media (max-width: 680px){html body #main-content.service-reference{ --space: 46px; }
html body #main-content.service-reference .wrap{ width: calc(100% - 32px); }
html body #main-content.service-reference{ font-size: 16px; }
html body #main-content.service-reference .header-inner{ width: calc(100% - 32px); gap: 13px; }
html body #main-content.service-reference .brand img{ width: 124px; }
html body #main-content.service-reference .header-cta{ font-size: 12px; min-height: 38px; padding: 7px 10px; }
html body #main-content.service-reference .menu-btn{ width: 38px; height: 38px; }
html body #main-content.service-reference .crumb{ font-size: 12px; padding-top: 19px; gap: 5px; }
html body #main-content.service-reference .hero{ grid-template-columns: 1fr; gap: 8px; padding-top: 23px; padding-bottom: 16px; }
html body #main-content.service-reference .hero-copy{ text-align: center; padding: 0px; }
html body #main-content.service-reference .hero .eyebrow{ margin-bottom: 9px; }
html body #main-content.service-reference .hero h1{ display: inline-block; font-size: clamp(31px, 8.2vw, 39px); line-height: 1.45; margin-bottom: 12px; }
html body #main-content.service-reference .hero p{ font-size: 16px; line-height: 1.8; margin: auto; max-width: 390px; }
html body #main-content.service-reference .hero-actions{ justify-content: center; margin-top: 19px; gap: 10px; }
html body #main-content.service-reference .hero-actions .btn{ font-size: 14px; min-height: 44px; padding: 10px 15px; }
html body #main-content.service-reference .hero-art{ width: min(100%, 480px); margin: 7px auto 0px; }
html body #main-content.service-reference .hero-art figcaption{ font-size: 11px; }
html body #main-content.service-reference .proof{ grid-template-columns: 1fr 1fr; gap: 0px; padding: 4px 12px; }
html body #main-content.service-reference .proof-item{ justify-content: start; padding: 13px 6px; font-size: 14px; border: 0px; }
html body #main-content.service-reference .proof-item:nth-child(-n+2){ border-bottom: 1px solid var(--line); }
html body #main-content.service-reference .proof-item .icon{ font-size: 23px; }
html body #main-content.service-reference .proof-item small{ font-size: 12px; }
html body #main-content.service-reference .section-head{ margin-bottom: 20px; }
html body #main-content.service-reference .section-head p{ font-size: 15px; }
html body #main-content.service-reference .section-head.start{ align-items: center; gap: 12px; }
html body #main-content.service-reference .section-head.start h2{ font-size: 24px; }
html body #main-content.service-reference .section-head.start p{ font-size: 14px; }
html body #main-content.service-reference .section-number{ font-size: 12px; }
html body #main-content.service-reference .situation-tabs{ grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 13px; }
html body #main-content.service-reference .situation-tab{ min-height: 99px; padding: 14px 10px; gap: 9px; }
html body #main-content.service-reference .situation-tab .icon{ font-size: 25px; }
html body #main-content.service-reference .situation-tab strong{ font-size: 16px; }
html body #main-content.service-reference .situation-tab small{ font-size: 13px; }
html body #main-content.service-reference .scenario{ grid-template-columns: 1fr; min-height: 0px; }
html body #main-content.service-reference .scenario-copy{ padding: 23px 23px 7px; }
html body #main-content.service-reference .scenario-copy h3{ font-size: 22px; }
html body #main-content.service-reference .scenario-copy .btn{ width: 100%; }
html body #main-content.service-reference .scenario img{ height: 200px; padding: 7px; }
html body #main-content.service-reference .service-card{ flex-basis: 76%; min-width: 0px; padding: 22px; }
html body #main-content.service-reference .service-card h3{ font-size: 21px; }
html body #main-content.service-reference .service-card p{ font-size: 16px; }
html body #main-content.service-reference .carousel-note{ display: block; }
html body #main-content.service-reference .carousel-tools{ gap: 5px; }
html body #main-content.service-reference .icon-btn{ width: 36px; height: 36px; }
html body #main-content.service-reference .journey{ grid-template-columns: 1fr; gap: 10px; }
html body #main-content.service-reference .journey article{ display: grid; grid-template-columns: 40px 1fr; text-align: start; padding: 17px 22px; column-gap: 14px; }
html body #main-content.service-reference .journey .icon{ grid-row: 1 / 3; align-self: center; margin: 0px; }
html body #main-content.service-reference .journey h3{ margin: 0px; }
html body #main-content.service-reference .journey p{ grid-column: 2; }
html body #main-content.service-reference .journey .step-count{ top: 12px; right: auto; left: 12px; }
html body #main-content.service-reference .platforms{ gap: 10px; }
html body #main-content.service-reference .platform{ padding: 18px 12px; gap: 9px; }
html body #main-content.service-reference .platform .icon{ font-size: 27px; }
html body #main-content.service-reference .platform h3{ font-size: 18px; }
html body #main-content.service-reference .platform small{ font-size: 12px; }
html body #main-content.service-reference .callout{ display: block; padding: 23px; }
html body #main-content.service-reference .callout .btn{ width: 100%; margin-top: 17px; }
html body #main-content.service-reference .anatomy{ grid-template-columns: 1fr; gap: 14px; }
html body #main-content.service-reference .anatomy-center{ display: block; }
html body #main-content.service-reference .anatomy-center img{ width: 100%; }
html body #main-content.service-reference .anatomy-center h3{ font-size: 23px; }
html body #main-content.service-reference .anatomy-side{ gap: 10px; }
html body #main-content.service-reference .anatomy-item{ padding: 17px; }
html body #main-content.service-reference .metrics{ grid-template-columns: 1fr; }
html body #main-content.service-reference .metric-controls{ grid-template-columns: repeat(3, 1fr); gap: 7px; }
html body #main-content.service-reference .metric-button{ padding: 13px 9px; text-align: center; }
html body #main-content.service-reference .metric-button strong{ font-size: 15px; }
html body #main-content.service-reference .metric-button small{ font-size: 12px; }
html body #main-content.service-reference .metric-result{ padding: 25px; }
html body #main-content.service-reference .workflow{ padding: 20px; }
html body #main-content.service-reference .flow-steps{ grid-template-columns: 1fr; gap: 10px; }
html body #main-content.service-reference .flow-node{ display: grid; grid-template-columns: 38px 1fr; text-align: start; padding: 14px 17px; gap: 0px 10px; }
html body #main-content.service-reference .flow-node .icon{ grid-row: 1 / 3; margin: 0px; align-self: center; font-size: 29px; }
html body #main-content.service-reference .flow-node strong{ font-size: 17px; }
html body #main-content.service-reference .flow-node small{ font-size: 14px; }
html body #main-content.service-reference .flow-controls{ display: block; }
html body #main-content.service-reference .flow-controls p{ margin-top: 14px; }
html body #main-content.service-reference .comparison{ padding: 15px; gap: 13px; }
html body #main-content.service-reference .comparison h3{ font-size: 18px; margin-bottom: 9px; }
html body #main-content.service-reference .comparison p{ font-size: 13px; }
html body #main-content.service-reference .comparison img{ aspect-ratio: 1.35 / 1; }
html body #main-content.service-reference .segmented button{ padding: 6px 10px; font-size: 12px; }
html body #main-content.service-reference .process{ grid-template-columns: 1fr; gap: 0px; max-width: 520px; margin-inline: auto; padding: 4px 0px; }
html body #main-content.service-reference .process::before{ inset: 38px 37px 38px auto; width: 2px; height: auto; inset-inline: auto; background: linear-gradient(rgb(47, 129, 199) 0%, rgb(70, 100, 215) 52%, rgb(112, 75, 201) 100%); }
html body #main-content.service-reference .process article{ display: grid; grid-template-columns: 74px minmax(0px, 1fr); grid-template-rows: auto auto; gap: 4px 18px; text-align: start; padding: 0px 0px 34px; background: transparent; }
html body #main-content.service-reference .process article:last-child{ padding-bottom: 0px; }
html body #main-content.service-reference .process span{ grid-area: 1 / 1 / 3; width: 74px; height: 74px; margin: 0px; border-color: rgb(53, 86, 146); box-shadow: rgba(20, 38, 77, 0.4) 0px 0px 0px 7px, rgba(49, 81, 138, 0.333) 0px 0px 0px 8px, rgba(0, 0, 0, 0.467) 0px 10px 28px, rgba(65, 104, 188, 0.2) 0px 0px 22px inset; font-size: 17px; }
html body #main-content.service-reference .process h3{ grid-column: 2; align-self: end; margin: 8px 0px 2px; font-size: 18px; }
html body #main-content.service-reference .process p{ grid-column: 2; align-self: start; max-width: none; margin: 0px; font-size: 14px; line-height: 1.75; }
html body #main-content.service-reference .deliverables{ grid-template-columns: 1fr; gap: 10px; }
html body #main-content.service-reference .deliverable{ padding: 21px; }
html body #main-content.service-reference .faq-grid{ grid-template-columns: 1fr; }
html body #main-content.service-reference .faq-item summary{ padding: 17px; font-size: 16px; }
html body #main-content.service-reference .related-card{ flex-basis: 86%; min-width: 0px; }
html body #main-content.service-reference .final-cta{ grid-template-columns: 1fr; padding: 26px 23px; text-align: center; }
html body #main-content.service-reference .final-cta img{ max-width: 270px; margin: 13px auto -13px; }
html body #main-content.service-reference .final-cta h2{ font-size: 28px; }
html body #main-content.service-reference .final-cta p{ font-size: 16px; }
html body #main-content.service-reference .final-cta .hero-actions{ display: grid; }
html body #main-content.service-reference .footer{ padding: 25px 0px 105px; margin-top: 32px; }
html body #main-content.service-reference .footer-main{ justify-content: center; text-align: center; gap: 20px; }
html body #main-content.service-reference .footer-links{ justify-content: center; flex-wrap: wrap; gap: 15px; }
html body #main-content.service-reference .footer small{ width: 100%; }
html body #main-content.service-reference .mobile-bar{ display: flex; position: fixed; bottom: 0px; inset-inline: 0px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; z-index: 25; background: rgba(6, 16, 32, 0.97); border-top: 1px solid rgb(54, 65, 92); backdrop-filter: blur(15px); }
html body #main-content.service-reference .mobile-bar strong{ font-size: 14px; flex: 1 1 0%; }
html body #main-content.service-reference .mobile-bar .btn{ font-size: 14px; padding: 9px 18px; min-height: 42px; }
html body #main-content.service-reference .dialog-inner{ padding: 23px; }
html body #main-content.service-reference .toast{ bottom: 93px; }
html body #main-content.service-reference .dialog-top h2{ font-size: 23px; }}
@media (prefers-reduced-motion: reduce){html body #main-content.service-reference{ scroll-behavior: auto; }
html body #main-content.service-reference *,html body #main-content.service-reference ::before,html body #main-content.service-reference ::after{ animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }}
@media print{html body #main-content.service-reference .header,html body #main-content.service-reference .mobile-bar,html body #main-content.service-reference .carousel-tools,html body #main-content.service-reference .hero-actions,html body #main-content.service-reference .card-link,html body #main-content.service-reference .footer-links{ display: none !important; }
html body #main-content.service-reference{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
html body #main-content.service-reference p{ color: rgb(68, 68, 68); }
html body #main-content.service-reference .surface{ background: white; border-color: rgb(170, 170, 170); }
html body #main-content.service-reference .section{ break-inside: avoid; margin-top: 25px; }
html body #main-content.service-reference .carousel{ flex-wrap: wrap; overflow: visible; }
html body #main-content.service-reference .hero h1{ -webkit-text-fill-color: rgb(34, 34, 34); }
html body #main-content.service-reference .service-card{ flex-basis: 30%; }}




html body #main-content.service-reference .cinema-top{ position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 19px 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.043); font-size: 14px; color: rgb(183, 197, 217); }
html body #main-content.service-reference .cinema-position{ display: flex; align-items: center; gap: 11px; }
html body #main-content.service-reference .cinema-position b{ font-size: 20px; font-weight: 400; color: var(--scene-accent); font-variant-numeric: tabular-nums; }
html body #main-content.service-reference .cinema-position span{ color: rgb(189, 200, 216); }
html body #main-content.service-reference .cinema-motion{ font-size: 13px; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid rgb(51, 66, 92); border-radius: 30px; background: rgb(16, 27, 42); color: rgb(198, 211, 230); }
html body #main-content.service-reference .cinema-motion .icon{ font-size: 17px; }
html body #main-content.service-reference .cinema-motion:hover{ border-color: var(--scene-accent); }

html body #main-content.service-reference .cinema-aura{ position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(ellipse at 28% 48%,var(--scene-secondary),transparent 43%),radial-gradient(ellipse at 65% 78%,var(--scene-accent),transparent 38%); opacity: 0.15; filter: blur(55px); animation: 7s ease-in-out 0s infinite alternate none running cinema-breathe; transition: background 0.8s; }
html body #main-content.service-reference .cinema-scene{ position: relative; display: grid; grid-template-columns: 1fr 1.22fr; align-items: center; min-height: 480px; padding: 35px 38px; gap: 10px; }
html body #main-content.service-reference .cinema-copy.scenario-copy{ padding: 10px 0px 20px 8px; position: relative; z-index: 3; max-width: 460px; }
html body #main-content.service-reference .cinema-kicker{ display: flex; align-items: center; gap: 10px; color: var(--scene-accent); font-size: 14px; font-weight: 700; margin-bottom: 17px; }
html body #main-content.service-reference .cinema-kicker .icon{ font-size: 22px; }
html body #main-content.service-reference .cinema-copy h3{ font-size: clamp(26px, 2.9vw, 38px); line-height: 1.45; max-width: 430px; text-wrap: balance; margin: 0px 0px 13px; }
html body #main-content.service-reference .cinema-copy > p{ font-size: 17px; line-height: 1.85; color: rgb(194, 204, 224); margin: 0px; max-width: 420px; }
html body #main-content.service-reference .cinema-copy .check-list{ gap: 8px; margin: 20px 0px 24px; }
html body #main-content.service-reference .cinema-copy .check-list li{ font-size: 15px; color: rgb(203, 214, 231); }
html body #main-content.service-reference .cinema-copy .check-list .icon{ color: var(--scene-accent); }
html body #main-content.service-reference .cinema-copy .btn{ border-color: rgb(142, 117, 198); padding-inline: 26px; min-height: 47px; }
html body #main-content.service-reference .cinema-visual{ position: relative; min-width: 0px; perspective: 1000px; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 30px 0px 54px; }
html body #main-content.service-reference .cinema-depth{ width: 112%; flex-shrink: 0; transform: translate3d(0,var(--scroll-lift,0px),0); will-change: auto; }
html body #main-content.service-reference .cinema-float{ animation: 7s ease-in-out 0s infinite normal none running cinema-float; }
html body #main-content.service-reference .cinema-tilt{ transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform 0.24s ease-out; transform-style: preserve-3d; }

html body #main-content.service-reference .cinema-caption{ position: absolute; bottom: 35px; inset-inline: 6% 2%; border: 1px solid rgb(72, 97, 124); background: rgba(9, 23, 45, 0.91); backdrop-filter: blur(12px); border-radius: 11px; display: flex; align-items: center; gap: 13px; padding: 15px 18px; box-shadow: rgba(0, 0, 0, 0.267) 0px 14px 40px; z-index: 2; transform: translateZ(20px); }
html body #main-content.service-reference .cinema-caption > .icon{ font-size: 28px; color: var(--scene-accent); }
html body #main-content.service-reference .cinema-caption small{ display: block; font-size: 12px; color: rgb(171, 185, 208); margin-bottom: 2px; }
html body #main-content.service-reference .cinema-caption strong{ display: block; font-size: 16px; font-weight: 700; color: rgb(238, 245, 255); line-height: 1.5; }











html body #main-content.service-reference .cinema-step-nav{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 23px; background: rgb(7, 15, 31); border-top: 1px solid rgb(38, 48, 72); }
html body #main-content.service-reference .cinema-step-nav > span{ color: rgb(185, 197, 217); font-size: 13px; }
html body #main-content.service-reference .cinema-step-nav .carousel-tools{ gap: 9px; }
html body #main-content.service-reference .cinema-step-nav .icon-btn{ width: 36px; height: 36px; }







@keyframes cinema-reveal{ 
  0% { opacity: 0; transform: translateY(20px); clip-path: inset(0px 0px 8%); }
  100% { opacity: 1; transform: translateY(0px); clip-path: inset(0px); }
}
@keyframes cinema-camera{ 
  0% { opacity: 0.1; transform: translate3d(-24px, 18px, -75px) rotateY(-8deg) scale(0.94); }
  100% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotateY(0deg) scale(1); }
}
@keyframes cinema-float{ 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-9px); }
}
@keyframes cinema-breathe{ 
  0% { opacity: 0.12; transform: scale(0.96); }
  100% { opacity: 0.22; transform: scale(1.05); }
}



@media (max-width: 950px){html body #main-content.service-reference .cinema-scene{ padding: 28px; grid-template-columns: 1fr 1fr; min-height: 460px; }
html body #main-content.service-reference .cinema-caption{ inset-inline: 0px; bottom: 50px; }
html body #main-content.service-reference .cinema-copy h3{ font-size: 29px; }
html body #main-content.service-reference .cinema-caption strong{ font-size: 14px; }}
@media (max-width: 680px){html body #main-content.service-reference .cinema-top{ order: 0; }
html body #main-content.service-reference .cinema-step-nav{ order: 3; }
html body #main-content.service-reference .cinema-top{ padding: 13px 16px; }
html body #main-content.service-reference .cinema-position{ font-size: 12px; gap: 8px; }
html body #main-content.service-reference .cinema-motion{ font-size: 12px; padding: 5px 9px; }
html body #main-content.service-reference .cinema-scene{ display: flex; flex-direction: column; padding: 22px 21px 15px; gap: 8px; min-height: 0px; }
html body #main-content.service-reference .cinema-copy.scenario-copy{ max-width: none; width: 100%; padding: 0px; }
html body #main-content.service-reference .cinema-kicker{ font-size: 13px; margin-bottom: 11px; }
html body #main-content.service-reference .cinema-copy h3{ font-size: 28px; max-width: none; }
html body #main-content.service-reference .cinema-copy > p{ font-size: 16px; line-height: 1.8; }
html body #main-content.service-reference .cinema-copy .check-list{ display: grid; grid-template-columns: 1fr; gap: 6px; margin: 16px 0px 20px; }
html body #main-content.service-reference .cinema-copy .check-list li{ font-size: 14px; }
html body #main-content.service-reference .cinema-copy .btn{ width: 100%; }
html body #main-content.service-reference .cinema-visual{ width: 100%; min-height: 215px; padding: 8px 0px 40px; margin-top: 6px; }
html body #main-content.service-reference .cinema-depth{ width: 105%; }
html body #main-content.service-reference .cinema-caption{ bottom: 2px; inset-inline: 0px; padding: 11px 13px; gap: 10px; }
html body #main-content.service-reference .cinema-caption strong{ font-size: 14px; }
html body #main-content.service-reference .cinema-caption small{ font-size: 12px; }
html body #main-content.service-reference .cinema-caption > .icon{ font-size: 23px; }
html body #main-content.service-reference .cinema-step-nav{ padding: 12px 16px; }
html body #main-content.service-reference .cinema-step-nav > span{ max-width: 65%; font-size: 12px; }
html body #main-content.service-reference .cinema-aura{ filter: blur(35px); }}
@media (prefers-reduced-motion: reduce){html body #main-content.service-reference .cinema-tilt,html body #main-content.service-reference .cinema-float,html body #main-content.service-reference .cinema-depth{ transform: none !important; }}
@media print{html body #main-content.service-reference .cinema-motion,html body #main-content.service-reference .cinema-step-nav{ display: none; }
html body #main-content.service-reference .cinema-scene{ min-height: 0px; }
html body #main-content.service-reference .cinema-aura{ display: none; }}





html body #main-content.service-reference .cinema-scroll-cue{ display: flex; align-items: center; gap: 9px; color: rgb(181, 199, 223); font-size: 13px; white-space: nowrap; }
html body #main-content.service-reference .cinema-scroll-cue > span{ font-size: 20px; color: var(--scene-accent); }












html body #main-content.service-reference .cinema-chapters{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px; list-style: none; margin: 0px; padding: 16px 24px 12px; border-top: 1px solid rgb(38, 53, 75); background: rgb(7, 16, 32); position: relative; z-index: 4; }
html body #main-content.service-reference .cinema-chapters li{ display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; position: relative; padding-top: 12px; color: rgb(151, 169, 196); font-size: 14px; }
html body #main-content.service-reference .chapter-track{ position: absolute; top: 0px; inset-inline: 0px; height: 2px; overflow: hidden; background: rgb(45, 60, 84); }
html body #main-content.service-reference .chapter-track > span{ display: block; width: 100%; height: 100%; background: var(--scene-accent); transform: scaleX(0); transform-origin: right center; }
html body #main-content.service-reference .chapter-number{ color: rgb(166, 185, 215); font-size: 12px; }
html body #main-content.service-reference .cinema-chapters li[aria-current="step"]{ color: rgb(241, 247, 255); }
html body #main-content.service-reference .cinema-chapters li[aria-current="step"] .chapter-number{ color: var(--scene-accent); }
html body #main-content.service-reference .cinema-scroll-footer{ display: flex; justify-content: space-between; gap: 12px; padding: 9px 24px 13px; font-size: 12px; color: rgb(157, 177, 202); background: rgb(7, 16, 32); }

html body #main-content.service-reference .static-story .cinema-top{ display: none; }
html body #main-content.service-reference .static-story .cinema-chapters,html body #main-content.service-reference .static-story .cinema-scroll-footer{ display: none; }
@media (max-width: 950px){html body #main-content.service-reference .cinema-chapters{ gap: 12px; padding-inline: 20px; }
html body #main-content.service-reference .cinema-chapters li{ font-size: 13px; }}
@media (max-width: 680px){html body #main-content.service-reference .cinema-scroll-cue{ font-size: 11px; gap: 6px; }
html body #main-content.service-reference .cinema-chapters{ gap: 9px; padding: 11px 14px 8px; }
html body #main-content.service-reference .cinema-chapters li{ display: block; font-size: 11px; line-height: 1.5; padding-top: 8px; }
html body #main-content.service-reference .chapter-number{ display: block; font-size: 10px; }
html body #main-content.service-reference .cinema-scroll-footer{ padding: 5px 14px 10px; font-size: 11px; }
html body #main-content.service-reference .static-story .cinema-scene{ padding-block: 25px; }
html body #main-content.service-reference .static-story .cinema-copy > p{ font-size: 16px; }
html body #main-content.service-reference .static-story .cinema-copy .check-list li{ font-size: 14px; }
html body #main-content.service-reference .static-story .cinema-art{ max-height: 195px; }}
@media print{html body #main-content.service-reference .cinema-chapters,html body #main-content.service-reference .cinema-scroll-cue,html body #main-content.service-reference .cinema-scroll-footer{ display: none; }}




















































@media (max-width: 900px){}
@media (max-width: 760px){}
@media (prefers-reduced-motion: reduce){}
html body #main-content.service-reference .commerce-health-lab{ position: relative; overflow: hidden; background: linear-gradient(rgb(7, 11, 24), rgb(9, 15, 34)); color: rgb(248, 251, 255); width: 100vw; margin-inline: calc(50% - 50vw); margin-top: var(--space); padding-block: 96px; }
html body #main-content.service-reference .commerce-health-lab::before{ content: ""; position: absolute; width: 560px; height: 560px; right: -260px; top: 40px; border-radius: 50%; background: rgb(34, 211, 238); opacity: 0.055; filter: blur(100px); }
html body #main-content.service-reference .commerce-health-lab::after{ content: ""; position: absolute; width: 520px; height: 520px; left: -260px; bottom: -120px; border-radius: 50%; background: rgb(139, 92, 246); opacity: 0.06; filter: blur(110px); }
html body #main-content.service-reference .commerce-health-lab > .container{ position: relative; z-index: 2; width: min(var(--max),calc(100% - 64px)); margin-inline: auto; }
html body #main-content.service-reference .commerce-health-lab .section-kicker{ display: inline-flex; align-items: center; min-height: 30px; padding: 5px 13px; border: 1px solid rgba(139, 92, 246, 0.23); border-radius: 999px; background: rgba(139, 92, 246, 0.07); box-shadow: rgba(139, 92, 246, 0.035) 0px 0px 18px inset; color: rgb(169, 124, 255); font: 800 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; direction: ltr; }
html body #main-content.service-reference .commerce-expertise-heading{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: end; margin-bottom: 42px; }
html body #main-content.service-reference .commerce-expertise-heading h2{ margin: 12px 0px 0px; font-size: clamp(38px, 5vw, 66px); line-height: 1.1; letter-spacing: -0.045em; color: rgb(248, 251, 255); }
html body #main-content.service-reference .commerce-expertise-heading p{ margin: 0px; color: rgb(159, 171, 197); line-height: 1.95; font-size: 14px; }
html body #main-content.service-reference .commerce-health-layout{ display: grid; grid-template-columns: 290px minmax(0px, 1fr); gap: 18px; }
html body #main-content.service-reference .commerce-health-tabs{ display: grid; align-content: start; gap: 7px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 23px; background: rgba(255, 255, 255, 0.024); backdrop-filter: blur(14px); }
html body #main-content.service-reference .commerce-health-tab{ position: relative; width: 100%; min-height: 58px; padding: 9px 12px; border: 1px solid transparent; border-radius: 15px; background: transparent; color: rgb(137, 150, 177); display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; text-align: right; transition: 0.25s; }
html body #main-content.service-reference .commerce-health-tab:hover{ background: rgba(255, 255, 255, 0.04); color: rgb(220, 229, 248); transform: none; }
html body #main-content.service-reference .commerce-health-tab.is-active{ color: rgb(255, 255, 255); border-color: rgba(141, 238, 255, 0.18); background: linear-gradient(135deg, rgba(34, 211, 238, 0.09), rgba(91, 140, 255, 0.08), rgba(139, 92, 246, 0.07)); }
html body #main-content.service-reference .commerce-health-tab b{ width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.043); font: 900 9px ui-monospace, monospace; color: rgb(141, 238, 255); }
html body #main-content.service-reference .commerce-health-tab span{ font-size: 12px; font-weight: 900; }
html body #main-content.service-reference .commerce-health-tab small{ font: 800 8px ui-monospace, monospace; color: rgb(104, 116, 141); }
html body #main-content.service-reference .commerce-health-stage{ position: relative; min-height: 590px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; overflow: hidden; background: radial-gradient(circle at 80% 10%, rgba(91, 140, 255, 0.12), transparent 28rem), linear-gradient(155deg, rgb(17, 26, 54), rgb(8, 13, 29)); box-shadow: rgba(0, 0, 0, 0.28) 0px 36px 100px; }
html body #main-content.service-reference .commerce-health-stage__bar{ height: 48px; padding: 0px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: space-between; color: rgb(135, 147, 173); font-size: 9px; }
html body #main-content.service-reference .commerce-health-stage__dots{ display: flex; gap: 6px; }
html body #main-content.service-reference .commerce-health-stage__dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 102, 132); }
html body #main-content.service-reference .commerce-health-stage__dots i:nth-child(2){ background: rgb(255, 200, 95); }
html body #main-content.service-reference .commerce-health-stage__dots i:nth-child(3){ background: rgb(66, 214, 164); }
html body #main-content.service-reference .commerce-health-panel{ display: none; grid-template-columns: minmax(0px, 0.9fr) minmax(360px, 1.1fr); gap: 40px; align-items: center; padding: 38px; min-height: 540px; }
html body #main-content.service-reference .commerce-health-panel.is-active{ display: grid; }
html body #main-content.service-reference .commerce-health-copy small{ font: 900 9px ui-monospace, monospace; letter-spacing: 0.13em; color: rgb(141, 238, 255); }
html body #main-content.service-reference .commerce-health-copy h3{ margin: 13px 0px 10px; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.13; color: rgb(248, 251, 255); }
html body #main-content.service-reference .commerce-health-copy p{ margin: 0px; color: rgb(164, 176, 200); font-size: 13px; line-height: 1.9; }
html body #main-content.service-reference .commerce-health-copy ul{ display: grid; gap: 9px; margin: 20px 0px 0px; padding: 0px; list-style: none; }
html body #main-content.service-reference .commerce-health-copy li{ position: relative; padding-right: 18px; color: rgb(197, 205, 224); font-size: 11px; }
html body #main-content.service-reference .commerce-health-copy li::before{ content: ""; position: absolute; right: 0px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: rgb(85, 221, 178); box-shadow: rgba(85, 221, 178, 0.07) 0px 0px 0px 5px; }
html body #main-content.service-reference .commerce-health-copy a{ display: inline-flex; margin-top: 24px; color: rgb(141, 238, 255); font-size: 11px; font-weight: 900; }
html body #main-content.service-reference .commerce-health-copy a::after{ content: "←"; margin-inline-start: 7px; }
html body #main-content.service-reference .commerce-health-visual{ position: relative; min-height: 360px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; background: rgba(255, 255, 255, 0.024); overflow: hidden; }
html body #main-content.service-reference .commerce-health-visual::before{ content: ""; position: absolute; inset: 0px; background-image: linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(rgb(0, 0, 0), transparent); }
html body #main-content.service-reference .health-performance-flow{ position: absolute; inset: 30px; display: grid; grid-template-columns: 1fr 74px 1fr; gap: 16px; align-items: center; }
html body #main-content.service-reference .health-resource-stack,html body #main-content.service-reference .health-optimized-stack{ display: grid; gap: 9px; }
html body #main-content.service-reference .health-resource-stack i,html body #main-content.service-reference .health-optimized-stack i{ display: block; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.055); position: relative; overflow: hidden; }
html body #main-content.service-reference .health-resource-stack i::after{ content: ""; position: absolute; inset: 0px; width: var(--w,80%); background: linear-gradient(90deg, rgba(242, 85, 166, 0.25), transparent); }
html body #main-content.service-reference .health-resource-stack i:nth-child(1){ --w: 96%; }
html body #main-content.service-reference .health-resource-stack i:nth-child(2){ --w: 82%; }
html body #main-content.service-reference .health-resource-stack i:nth-child(3){ --w: 72%; }
html body #main-content.service-reference .health-resource-stack i:nth-child(4){ --w: 88%; }
html body #main-content.service-reference .health-optimized-stack i::after{ content: ""; position: absolute; inset: 0px; width: var(--w,45%); background: linear-gradient(90deg, rgba(34, 211, 238, 0.28), transparent); }
html body #main-content.service-reference .health-optimized-stack i:nth-child(1){ --w: 52%; }
html body #main-content.service-reference .health-optimized-stack i:nth-child(2){ --w: 36%; }
html body #main-content.service-reference .health-optimized-stack i:nth-child(3){ --w: 42%; }
html body #main-content.service-reference .health-optimized-stack i:nth-child(4){ --w: 30%; }
html body #main-content.service-reference .health-flow-arrow{ height: 2px; background: linear-gradient(90deg, rgb(242, 85, 166), rgb(93, 131, 255), rgb(34, 211, 238)); position: relative; }
html body #main-content.service-reference .health-flow-arrow::after{ content: ""; position: absolute; left: -1px; top: -4px; border-width: 5px 0px 5px 8px; border-style: solid none solid solid; border-color: transparent currentcolor transparent rgb(34, 211, 238); border-image: none; }
html body #main-content.service-reference .health-mobile-phone{ position: absolute; width: 190px; height: 330px; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px; border-radius: 34px; background: rgb(5, 9, 20); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: rgba(0, 0, 0, 0.35) 0px 26px 80px; }
html body #main-content.service-reference .health-mobile-screen{ height: 100%; border-radius: 26px; background: rgb(247, 245, 241); padding: 13px; color: rgb(16, 21, 42); display: flex; flex-direction: column; }
html body #main-content.service-reference .health-mobile-screen::before{ content: ""; width: 58px; height: 8px; border-radius: 999px; background: rgb(16, 21, 42); margin: -5px auto 10px; }
html body #main-content.service-reference .health-mobile-hero{ height: 92px; border-radius: 14px; background: linear-gradient(135deg, rgb(232, 217, 202), rgb(245, 236, 223)); margin-bottom: 10px; }
html body #main-content.service-reference .health-mobile-products{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
html body #main-content.service-reference .health-mobile-products i{ height: 67px; border-radius: 10px; background: rgb(255, 255, 255); border: 1px solid rgb(235, 231, 223); }
html body #main-content.service-reference .health-mobile-cta{ margin-top: auto; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgb(34, 211, 238), rgb(93, 131, 255), rgb(139, 92, 246)); }
html body #main-content.service-reference .health-journey-map{ position: absolute; inset: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html body #main-content.service-reference .health-journey-map span{ min-height: 80px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.035); display: grid; place-items: center; text-align: center; color: rgb(201, 210, 229); font-size: 10px; position: relative; }
html body #main-content.service-reference .health-journey-map span:not(:nth-child(3n))::after{ content: "←"; position: absolute; left: -13px; color: rgb(93, 131, 255); }
html body #main-content.service-reference .health-product-page{ position: absolute; inset: 30px; display: grid; grid-template-columns: 1fr 0.9fr; gap: 14px; }
html body #main-content.service-reference .health-product-gallery{ border-radius: 18px; background: linear-gradient(145deg, rgb(216, 221, 234), rgb(240, 231, 223)); position: relative; }
html body #main-content.service-reference .health-product-gallery::before{ content: ""; position: absolute; width: 90px; height: 150px; border-radius: 18px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(150deg, rgb(112, 71, 85), rgb(42, 30, 43)); box-shadow: rgba(0, 0, 0, 0.16) 0px 20px 45px; }
html body #main-content.service-reference .health-product-info{ display: grid; grid-template-rows: 26px 48px 32px repeat(3, 1fr) 46px; gap: 8px; }
html body #main-content.service-reference .health-product-info i{ border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.06); }
html body #main-content.service-reference .health-product-info i:last-child{ background: linear-gradient(135deg, rgb(34, 211, 238), rgb(93, 131, 255), rgb(139, 92, 246)); }
html body #main-content.service-reference .health-trust-ring{ position: absolute; inset: 0px; display: grid; place-items: center; }
html body #main-content.service-reference .health-trust-core{ width: 112px; height: 112px; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(145deg, rgb(22, 33, 66), rgb(11, 17, 38)); border: 1px solid rgba(255, 255, 255, 0.13); font-size: 38px; box-shadow: rgba(91, 140, 255, 0.14) 0px 0px 70px; }
html body #main-content.service-reference .health-trust-ring span{ position: absolute; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04); font-size: 9px; color: rgb(185, 197, 220); }
html body #main-content.service-reference .health-trust-ring span:nth-child(2){ top: 50px; right: 50%; }
html body #main-content.service-reference .health-trust-ring span:nth-child(3){ top: 50%; right: 36px; }
html body #main-content.service-reference .health-trust-ring span:nth-child(4){ bottom: 48px; right: 50%; }
html body #main-content.service-reference .health-trust-ring span:nth-child(5){ top: 50%; left: 36px; }
html body #main-content.service-reference .health-checkout{ position: absolute; inset: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: center; }
html body #main-content.service-reference .health-checkout article{ min-height: 220px; padding: 16px; border-radius: 17px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.035); }
html body #main-content.service-reference .health-checkout article b{ display: grid; width: 34px; height: 34px; border-radius: 11px; place-items: center; background: rgba(91, 140, 255, 0.13); color: rgb(158, 185, 255); font-size: 11px; }
html body #main-content.service-reference .health-checkout article i{ display: block; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, 0.067); margin-top: 12px; }
html body #main-content.service-reference .health-checkout article i:nth-of-type(2){ width: 76%; }
html body #main-content.service-reference .health-checkout article i:nth-of-type(3){ width: 58%; }
html body #main-content.service-reference .health-search-scene{ position: absolute; inset: 40px; }
html body #main-content.service-reference .health-search-bar{ height: 54px; border-radius: 15px; background: rgb(255, 255, 255); color: rgb(17, 24, 45); display: flex; align-items: center; padding: 0px 18px; font-size: 11px; box-shadow: rgba(0, 0, 0, 0.16) 0px 20px 50px; }
html body #main-content.service-reference .health-search-results{ display: grid; gap: 9px; margin-top: 14px; }
html body #main-content.service-reference .health-search-results article{ padding: 14px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.035); }
html body #main-content.service-reference .health-search-results strong{ display: block; color: rgb(200, 230, 255); font-size: 11px; }
html body #main-content.service-reference .health-search-results span{ display: block; margin-top: 4px; width: 74%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
html body #main-content.service-reference .health-measurement{ position: absolute; inset: 34px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 13px; }
html body #main-content.service-reference .health-chart-card,html body #main-content.service-reference .health-events-card{ border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.035); padding: 16px; }
html body #main-content.service-reference .health-bars{ height: 230px; display: flex; align-items: end; gap: 9px; }
html body #main-content.service-reference .health-bars i{ flex: 1 1 0%; height: var(--h); border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, rgb(93, 131, 255), rgb(34, 211, 238)); }
html body #main-content.service-reference .health-bars i:nth-child(1){ --h: 38%; }
html body #main-content.service-reference .health-bars i:nth-child(2){ --h: 63%; }
html body #main-content.service-reference .health-bars i:nth-child(3){ --h: 46%; }
html body #main-content.service-reference .health-bars i:nth-child(4){ --h: 78%; }
html body #main-content.service-reference .health-bars i:nth-child(5){ --h: 59%; }
html body #main-content.service-reference .health-bars i:nth-child(6){ --h: 88%; }
html body #main-content.service-reference .health-events-card{ display: grid; align-content: center; gap: 9px; }
html body #main-content.service-reference .health-events-card span{ padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: rgb(170, 183, 207); font-size: 9px; }
html body #main-content.service-reference .health-events-card b{ color: rgb(95, 225, 177); margin-inline-start: 7px; }
@media (max-width: 1050px){html body #main-content.service-reference .commerce-expertise-heading{ grid-template-columns: 1fr; }
html body #main-content.service-reference .commerce-health-layout{ grid-template-columns: 1fr; }
html body #main-content.service-reference .commerce-health-tabs{ display: flex; overflow-x: auto; scroll-snap-type: x; scrollbar-width: none; }
html body #main-content.service-reference .commerce-health-tabs::-webkit-scrollbar{ display: none; }
html body #main-content.service-reference .commerce-health-tab{ flex: 0 0 210px; scroll-snap-align: start; }
html body #main-content.service-reference .commerce-health-panel{ grid-template-columns: 1fr; min-height: 0px; }
html body #main-content.service-reference .commerce-health-visual{ min-height: 330px; }}
@media (max-width: 720px){html body #main-content.service-reference .commerce-health-lab{ padding-block: 70px; }
html body #main-content.service-reference .commerce-health-lab > .container{ width: min(var(--max),calc(100% - 32px)); }
html body #main-content.service-reference .commerce-expertise-heading{ margin-bottom: 30px; }
html body #main-content.service-reference .commerce-health-panel{ padding: 24px; }
html body #main-content.service-reference .commerce-health-stage{ min-height: 0px; }
html body #main-content.service-reference .commerce-health-visual{ min-height: 300px; }
html body #main-content.service-reference .commerce-health-tab{ flex-basis: 185px; }
html body #main-content.service-reference .health-performance-flow{ inset: 24px; grid-template-columns: 1fr 42px 1fr; }
html body #main-content.service-reference .health-mobile-phone{ width: 168px; height: 295px; }
html body #main-content.service-reference .health-journey-map{ inset: 28px; grid-template-columns: repeat(2, 1fr); }
html body #main-content.service-reference .health-journey-map span:not(:nth-child(3n))::after{ display: none; }
html body #main-content.service-reference .health-product-page{ inset: 24px; grid-template-columns: 1fr; }
html body #main-content.service-reference .health-product-gallery{ min-height: 130px; }
html body #main-content.service-reference .health-trust-ring span:nth-child(2){ top: 34px; }
html body #main-content.service-reference .health-trust-ring span:nth-child(3){ right: 18px; }
html body #main-content.service-reference .health-trust-ring span:nth-child(4){ bottom: 34px; }
html body #main-content.service-reference .health-trust-ring span:nth-child(5){ left: 18px; }
html body #main-content.service-reference .health-checkout{ inset: 24px; grid-template-columns: 1fr; overflow: auto; }
html body #main-content.service-reference .health-checkout article{ min-height: 125px; }
html body #main-content.service-reference .health-measurement{ inset: 24px; grid-template-columns: 1fr; }
html body #main-content.service-reference .health-bars{ height: 115px; }}
@media (max-width: 430px){html body #main-content.service-reference .commerce-health-tab{ flex-basis: 168px; }
html body #main-content.service-reference .commerce-health-tab small{ display: none; }
html body #main-content.service-reference .commerce-health-copy h3{ font-size: 30px; }
html body #main-content.service-reference .commerce-expertise-heading h2{ font-size: clamp(38px, 12vw, 52px); }}
@media (prefers-reduced-motion: reduce){html body #main-content.service-reference .commerce-health-tab{ transition: none !important; }}
html body #main-content.service-reference .commerce-health-lab{ width: auto; margin-inline: 0px; margin-top: var(--space); padding-block: 0px; overflow: visible; background: transparent; color: var(--text); }
html body #main-content.service-reference .commerce-health-lab::before,html body #main-content.service-reference .commerce-health-lab::after{ display: none; }
html body #main-content.service-reference .commerce-health-lab > .container{ position: relative; z-index: auto; width: 100%; margin: 0px; padding: 0px; }
html body #main-content.service-reference .commerce-health-lab .commerce-expertise-heading{ display: block; margin-bottom: 24px; }
html body #main-content.service-reference .commerce-health-lab .commerce-health-kicker{ display: block; min-height: 0px; padding: 0px; margin: 0px 0px 12px; border: 0px; border-radius: 0px; background: none; box-shadow: none; color: var(--cyan); font: 700 14px/1.5 var(--font); letter-spacing: 0.02em; direction: ltr; text-align: right; }
html body #main-content.service-reference .commerce-health-lab .commerce-expertise-heading h2{ margin: 0px; max-width: 760px; color: var(--text); font-size: clamp(25px, 2.55vw, 34px); font-weight: 700; line-height: 1.4; letter-spacing: 0px; }
html body #main-content.service-reference .commerce-health-layout{ display: grid; grid-template-columns: 250px minmax(0px, 1fr); gap: 16px; align-items: stretch; }
html body #main-content.service-reference .commerce-health-tabs{ display: grid; align-content: start; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(125deg, rgba(11, 23, 44, 0.533), rgb(6, 13, 29)); box-shadow: none; backdrop-filter: none; }
html body #main-content.service-reference .commerce-health-tab{ position: relative; width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); display: grid; grid-template-columns: 30px minmax(0px, 1fr) auto; align-items: center; gap: 9px; text-align: right; transition: background 0.2s, border-color 0.2s, color 0.2s; }
html body #main-content.service-reference .commerce-health-tab:hover{ background: rgb(11, 25, 48); border-color: rgb(46, 61, 86); color: var(--text); transform: none; }
html body #main-content.service-reference .commerce-health-tab.is-active{ color: var(--text); border-color: var(--purple); background: linear-gradient(110deg, rgb(11, 38, 64), rgb(38, 18, 54)); box-shadow: rgba(108, 79, 195, 0.133) 0px 0px 17px, rgba(176, 134, 237, 0.133) 0px 0px 0px 1px inset; }
html body #main-content.service-reference .commerce-health-tab.is-active::after{ content: ""; position: absolute; inset-inline-start: 0px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--cyan); }
html body #main-content.service-reference .commerce-health-tab b{ width: 29px; height: 29px; border: 1px solid rgb(45, 83, 104); border-radius: 7px; display: grid; place-items: center; background: rgb(8, 22, 40); color: var(--cyan); font: 700 11px/1 var(--font); }
html body #main-content.service-reference .commerce-health-tab span{ min-width: 0px; font-size: 14px; font-weight: 700; line-height: 1.45; }
html body #main-content.service-reference .commerce-health-tab small{ color: rgb(127, 140, 165); font: 700 9px/1.2 var(--font); letter-spacing: 0.02em; direction: ltr; }
html body #main-content.service-reference .commerce-health-stage{ position: relative; min-height: 490px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 85% 0%, rgba(73, 217, 238, 0.055), transparent 22rem), radial-gradient(circle at 10% 100%, rgba(181, 138, 255, 0.055), transparent 20rem), linear-gradient(125deg, rgba(11, 23, 44, 0.533), rgb(6, 13, 29)); box-shadow: none; }
html body #main-content.service-reference .commerce-health-stage__bar{ height: 43px; padding: 0px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(6, 16, 32, 0.6); color: rgb(143, 156, 179); font-size: 10px; font-weight: 600; }
html body #main-content.service-reference .commerce-health-stage__dots{ display: flex; gap: 6px; }
html body #main-content.service-reference .commerce-health-stage__dots i{ width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
html body #main-content.service-reference .commerce-health-stage__dots i:nth-child(2){ background: var(--purple); }
html body #main-content.service-reference .commerce-health-stage__dots i:nth-child(3){ background: var(--cyan); }
html body #main-content.service-reference .commerce-health-panel{ display: none; grid-template-columns: minmax(0px, 0.95fr) minmax(300px, 1.05fr); gap: 28px; align-items: center; min-height: 445px; padding: 28px; }
html body #main-content.service-reference .commerce-health-panel.is-active{ display: grid; }
html body #main-content.service-reference .commerce-health-copy small{ color: var(--cyan); font: 700 12px/1.4 var(--font); letter-spacing: 0.02em; direction: ltr; }
html body #main-content.service-reference .commerce-health-copy h3{ margin: 10px 0px 9px; color: var(--text); font-size: clamp(23px, 2.25vw, 30px); font-weight: 700; line-height: 1.45; }
html body #main-content.service-reference .commerce-health-copy p{ margin: 0px; color: var(--muted); font-size: 15px; line-height: 1.85; }
html body #main-content.service-reference .commerce-health-copy ul{ display: grid; gap: 8px; margin: 17px 0px 0px; padding: 0px; list-style: none; }
html body #main-content.service-reference .commerce-health-copy li{ position: relative; padding-right: 18px; color: rgb(199, 208, 225); font-size: 14px; line-height: 1.65; }
html body #main-content.service-reference .commerce-health-copy li::before{ content: ""; position: absolute; right: 0px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: rgba(73, 217, 238, 0.07) 0px 0px 0px 4px; }
html body #main-content.service-reference .commerce-health-copy a{ display: inline-flex; align-items: center; gap: 5px; margin-top: 20px; color: var(--cyan); font-size: 14px; font-weight: 700; }
html body #main-content.service-reference .commerce-health-copy a::after{ content: "←"; margin: 0px; }
html body #main-content.service-reference .commerce-health-copy a:hover{ color: rgb(139, 233, 246); }
html body #main-content.service-reference .commerce-health-visual{ position: relative; min-height: 315px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 50% 20%, rgba(181, 138, 255, 0.06), transparent 18rem), rgb(6, 16, 32); box-shadow: rgba(255, 255, 255, 0.03) 0px 1px 0px inset; }
html body #main-content.service-reference .commerce-health-visual::before{ content: ""; position: absolute; inset: 0px; background-image: linear-gradient(rgba(73, 217, 238, 0.027) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 217, 238, 0.027) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(rgb(0, 0, 0), transparent 90%); }
html body #main-content.service-reference .health-flow-arrow{ background: linear-gradient(90deg,var(--pink),var(--purple),var(--cyan)); }
html body #main-content.service-reference .health-flow-arrow::after{ border-left-color: var(--cyan); }
html body #main-content.service-reference .health-mobile-cta,html body #main-content.service-reference .health-product-info i:last-child{ background: var(--glow); }
html body #main-content.service-reference .health-trust-core{ border-color: rgb(70, 83, 108); border-radius: 12px; background: linear-gradient(125deg, rgb(12, 25, 46), rgb(7, 18, 36)); color: var(--cyan); box-shadow: rgba(102, 68, 161, 0.133) 0px 0px 28px; }
html body #main-content.service-reference .health-bars i{ background: linear-gradient(to top,#6644a1,var(--cyan)); }
html body #main-content.service-reference .health-events-card b{ color: var(--cyan); }
html body #main-content.service-reference .health-search-bar{ border-radius: 8px; }
html body #main-content.service-reference .health-search-results article,html body #main-content.service-reference .health-events-card span,html body #main-content.service-reference .health-checkout article,html body #main-content.service-reference .health-journey-map span{ border-radius: 8px; }
html body #main-content.service-reference .health-mobile-phone{ border-radius: 28px; }
html body #main-content.service-reference .health-mobile-screen{ border-radius: 21px; }
html body #main-content.service-reference .health-product-page{ inset: 24px; }
html body #main-content.service-reference .health-product-gallery{ border-radius: 10px; }
html body #main-content.service-reference .health-product-gallery::before{ border-radius: 12px; }
@media (max-width: 1050px){html body #main-content.service-reference .commerce-health-layout{ grid-template-columns: 1fr; gap: 14px; }
html body #main-content.service-reference .commerce-health-tabs{ display: flex; overflow-x: auto; scroll-snap-type: x; scrollbar-width: thin; scrollbar-color: rgb(53, 80, 112) transparent; padding-bottom: 8px; }
html body #main-content.service-reference .commerce-health-tab{ flex: 0 0 205px; scroll-snap-align: start; }
html body #main-content.service-reference .commerce-health-panel{ grid-template-columns: 1fr; min-height: 0px; }
html body #main-content.service-reference .commerce-health-visual{ min-height: 300px; }}
@media (max-width: 720px){html body #main-content.service-reference .commerce-health-lab .commerce-expertise-heading{ margin-bottom: 18px; }
html body #main-content.service-reference .commerce-health-lab .commerce-health-kicker{ font-size: 13px; }
html body #main-content.service-reference .commerce-health-lab .commerce-expertise-heading h2{ font-size: clamp(24px, 8vw, 30px); }
html body #main-content.service-reference .commerce-health-tab{ flex-basis: 180px; min-height: 52px; }
html body #main-content.service-reference .commerce-health-tab span{ font-size: 13px; }
html body #main-content.service-reference .commerce-health-stage__bar{ height: 40px; padding-inline: 12px; }
html body #main-content.service-reference .commerce-health-panel{ padding: 20px; gap: 20px; }
html body #main-content.service-reference .commerce-health-copy h3{ font-size: 24px; }
html body #main-content.service-reference .commerce-health-copy p{ font-size: 14px; }
html body #main-content.service-reference .commerce-health-copy li{ font-size: 13.5px; }
html body #main-content.service-reference .commerce-health-visual{ min-height: 280px; }}
@media (max-width: 430px){html body #main-content.service-reference .commerce-health-tab{ flex-basis: 165px; grid-template-columns: 29px 1fr; }
html body #main-content.service-reference .commerce-health-tab small{ display: none; }
html body #main-content.service-reference .commerce-health-copy h3{ font-size: 23px; }
html body #main-content.service-reference .commerce-health-panel{ padding: 17px; }
html body #main-content.service-reference .commerce-health-visual{ min-height: 265px; }}
@media (prefers-reduced-motion: reduce){html body #main-content.service-reference .commerce-health-tab{ transition: none !important; }}

























@media (max-width: 980px) and (min-width: 761px){}
@media (max-width: 760px){}
@media (prefers-reduced-motion: reduce){}





@media (max-width: 980px) and (min-width: 761px){}
@media (max-width: 760px){}
html body #main-content.service-reference{ --cinema-header: 80px; }
html body #main-content.service-reference .cinema-heading{ padding: 0px 0px 26px; max-width: 760px; }
html body #main-content.service-reference .cinema-heading h2{ font-size: clamp(28px, 4vw, 42px); line-height: 1.5; margin: 0px 0px 12px; text-wrap: balance; }
html body #main-content.service-reference .cinema-heading p{ font-size: 16px; line-height: 1.85; }
html body #main-content.service-reference .cinema-reading-cue{ display: block; margin-top: 14px; color: rgb(168, 205, 221); font-size: 14px; }






@media (min-width: 761px){}
@media (max-width: 950px){html body #main-content.service-reference{ --cinema-header: 70px; }}
@media (max-width: 760px){html body #main-content.service-reference .cinema-heading{ padding: 0px 20px 24px; }
html body #main-content.service-reference .cinema-heading .eyebrow{ font-size: 14px; }
html body #main-content.service-reference .header-cta,html body #main-content.service-reference .menu-btn,html body #main-content.service-reference .icon-btn{ min-height: 44px; min-width: 44px; }
html body #main-content.service-reference .mobile-bar{ padding-bottom: max(10px,env(safe-area-inset-bottom)); }}
@media (max-width: 360px){html body #main-content.service-reference .header-inner{ gap: 8px; }
html body #main-content.service-reference .brand img{ width: 102px; }
html body #main-content.service-reference .header-cta{ font-size: 11px; }}
@media (prefers-reduced-motion: reduce){html body #main-content.service-reference .cinema-reading-cue{ display: none; }}
@media print{html body #main-content.service-reference .cinema-reading-cue{ display: none !important; }}
@media (max-width: 760px){html body #main-content.service-reference .cinema-help-after{ position: relative !important; inset: auto !important; width: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin: 24px 0px 0px !important; padding: 18px 0px !important; background: none !important; border: 0px !important; box-shadow: none !important; }}
@media print{html body #main-content.service-reference .cinema-help-after{ display: block !important; }}
/* Project colors, reference composition. */
html body #main-content.service-reference {--bg:var(--ibt-bg);--surface:var(--ibt-surface);--surface-2:var(--ibt-bg-soft);--text:var(--ibt-text);--muted:var(--ibt-muted);--line:var(--ibt-border);--cyan:var(--ibt-cyan);--purple:var(--ibt-purple);--pink:var(--ibt-pink);--glow:var(--ibt-gradient);--font:ServicesReferenceBrand,var(--ibt-font);width:min(1180px,calc(100% - 64px));margin-inline:auto;padding:110px 0 76px;overflow:visible;}
html body #main-content.service-reference .section {padding:0!important;margin-top:76px!important;}
html body #main-content.service-reference .hero {padding:30px 0 18px!important;min-height:435px!important;display:grid!important;grid-template-columns:.95fr 1.15fr!important;background:none!important;border:0!important;box-shadow:none!important;}
html body #main-content.service-reference .hero h1 {font-size:clamp(34px,3.45vw,49px)!important;line-height:1.43!important;font-weight:700!important;letter-spacing:normal!important;}
html body #main-content.service-reference .hero p {font-size:18px!important;line-height:1.9!important;}
html body #main-content.service-reference .surface {background:linear-gradient(125deg,color-mix(in srgb,var(--ibt-blue) 5%,var(--ibt-surface)),var(--ibt-surface));border-color:var(--ibt-border);}
html body #main-content.service-reference h2 {font-size:clamp(25px,2.55vw,34px)!important;line-height:1.4!important;letter-spacing:normal!important;}
html body #main-content.service-reference h3 {letter-spacing:normal!important;}
html body #main-content.service-reference .service-paths-section {width:100%;margin-inline:0;overflow:visible;}
html body #main-content.service-reference .service-paths-section > .container {width:100%;max-width:none;}
html body #main-content.service-reference .service-paths-section.is-cinematic-ready {padding:0!important;margin-top:76px!important;}
html body #main-content.service-reference .service-paths-section.is-cinematic-ready > .container {top:100px;}
html body #main-content.service-reference .service-paths-section {--service-cinema-top:100px;--service-cinema-height:calc(100svh - 120px);}
html body #main-content.service-reference .service-paths-header {text-align:start;}
html body #main-content.service-reference .service-path-card > p {font-size:16px;}
html body #main-content.service-reference .reference-nav {display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
html body #main-content.service-reference .reference-nav a {min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;}
html body #main-content.service-reference .section-head {display:block!important;text-align:center!important;margin:0 0 24px!important;}
html body #main-content.service-reference .section-head.start {display:flex!important;align-items:end!important;justify-content:space-between!important;text-align:start!important;}
html body #main-content.service-reference .service-cinema__top {display:none;}
html body #main-content.service-reference .commerce-health-lab {width:100%;margin-inline:0;padding:32px!important;border-radius:24px;}
html body #main-content.service-reference .commerce-health-lab > .container {width:100%;}
html body #main-content.service-reference .hero-art img {border:0!important;box-shadow:none!important;background:none!important;border-radius:0!important;}
html body #main-content.service-reference .btn.primary {color:white;}
html body #main-content.service-reference .reference-dialog {max-width:min(1000px,94vw);border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);}
html body #main-content.service-reference .reference-dialog::backdrop {background:#000b;}
html body #main-content.service-reference .reference-dialog img {max-height:75svh;object-fit:contain;}
html body #main-content.service-reference .metric-result[hidden] {display:none!important;}
html body #main-content.service-reference .service-paths-section:not(.is-cinematic-ready) .service-paths-header {display:none;}
html body #main-content.service-reference .service-paths-section:not(.is-cinematic-ready) .service-paths-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
html body #main-content.service-reference .service-paths-section:not(.is-cinematic-ready) .service-path-card {grid-column:auto;padding:24px;min-height:0;}
html body #main-content.service-reference .service-path-card::after {display:none;}
html body #main-content.service-reference .service-paths-section:not(.is-cinematic-ready) .service-path-card h3 {font-size:28px!important;}
html body #main-content.service-reference .service-paths-section.is-cinematic-ready .service-path-card h3 {font-size:clamp(32px,3.6vw,52px)!important;}
@media(max-width:760px){html body #main-content.service-reference {width:calc(100% - 32px);padding-top:92px;}html body #main-content.service-reference .hero {grid-template-columns:1fr!important;min-height:0!important;}html body #main-content.service-reference .hero-copy {order:0;}html body #main-content.service-reference .hero-art {order:1;}html body #main-content.service-reference .section {margin-top:54px!important;}html body #main-content.service-reference .service-paths-section:not(.is-cinematic-ready) .service-paths-grid {grid-template-columns:1fr;}html body #main-content.service-reference .commerce-health-lab {padding:20px 14px!important;}html body #main-content.service-reference .hero h1 {font-size:34px!important;}}