:root {
  color-scheme: light;
  --navy: #081522;
  --navy-2: #102438;
  --ink: #142536;
  --muted: #657787;
  --paper: #f4f7f6;
  --white: #fff;
  --cyan: #6fe2df;
  --cyan-strong: #087f88;
  --line: #dce5e5;
  --shell: 1200px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; cursor: pointer; }
.shell { width: min(var(--shell), calc(100% - 64px)); margin-inline: auto; }
section { position: relative; }
.skip-link { position: fixed; z-index: 200; top: -80px; left: 16px; padding: 12px 16px; color: var(--navy); background: var(--cyan); border-radius: 6px; font-weight: 700; }
.skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }
:focus-visible { outline: 3px solid #23bfc0; outline-offset: 3px; }
.page-progress { position: fixed; z-index: 120; inset: 0 0 auto; height: 3px; pointer-events: none; }
.page-progress::after { content: ""; display: block; width: var(--scroll-progress, 0%); height: 100%; background: var(--cyan); }

/* Header */
.site-header { position: absolute; z-index: 80; top: 0; left: 0; width: 100%; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); transition: background .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled { position: fixed; background: rgba(8,21,34,.96); backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.header-inner { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 36px; height: 36px; color: var(--cyan); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { display: grid; gap: 3px; }
.brand-name strong { color: inherit; font-size: 15px; letter-spacing: .12em; }
.brand-name small { color: #8ca5b5; font: 8px/1 Inter, sans-serif; letter-spacing: .24em; }
.primary-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 28px); color: #d2dde4; font-size: 12px; }
.primary-nav a { transition: color .18s ease; }
.primary-nav a:hover { color: var(--cyan); }
.primary-nav .nav-contact { padding: 11px 15px; color: var(--navy); background: var(--cyan); border-radius: 4px; font-weight: 750; }
.nav-contact span { margin-left: 7px; }
.menu-toggle { display: none; }

/* Shared */
.section-pad { padding: 104px 0; }
.kicker { margin: 0 0 18px; color: var(--cyan-strong); font-size: 11px; line-height: 1.4; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: break-word; }
.section-heading { max-width: 760px; margin-bottom: 48px; }
.section-heading h2, .section-heading h2 em { margin: 0; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.12; letter-spacing: -.055em; font-weight: 740; }
.section-heading h2 em { color: var(--cyan-strong); font-style: normal; }
.heading-split { max-width: none; display: grid; grid-template-columns: 1.1fr .72fr; align-items: end; gap: 9%; }
.heading-copy { margin: 0; max-width: 510px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 750; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy); background: var(--cyan); border-color: var(--cyan); }
.button-primary:hover { background: #a0f4ed; border-color: #a0f4ed; }
.button-quiet { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(6,20,32,.2); }
.button-quiet:hover { color: var(--cyan); border-color: var(--cyan); }
.button-dark { color: white; background: var(--navy); border-color: var(--navy); white-space: nowrap; }
.button-dark:hover { background: #18364b; }

/* Hero */
.hero { min-height: 760px; height: min(900px, 100svh); display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: white; background: #071421; }
.hero-photo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,18,30,.99) 0%, rgba(6,18,30,.94) 43%, rgba(6,18,30,.52) 73%, rgba(6,18,30,.45) 100%), linear-gradient(0deg, rgba(6,18,30,.9), transparent 58%), url("./assets/hero-field-editorial.jpg") center 48% / cover; opacity: .88; }
.hero-grain { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(rgba(195,225,232,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(195,225,232,.22) 1px, transparent 1px); background-size: 86px 86px; mask-image: linear-gradient(90deg, transparent, #000 72%); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 5%; padding-top: 88px; padding-bottom: 85px; }
.hero-copy { max-width: 610px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--cyan); font-size: 11px; font-weight: 750; letter-spacing: .14em; }
.eyebrow > span:first-child, .live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px rgba(111,226,223,.8); }
.hero h1 { margin: 0; font-size: clamp(52px, 6vw, 78px); line-height: 1.07; letter-spacing: -.065em; font-weight: 760; }
.hero h1 em { color: var(--cyan); font-style: normal; }
.hero-lede { max-width: 570px; margin: 23px 0 28px; color: #d0dce3; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-proof { display: flex; max-width: 520px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.hero-proof > div { display: grid; gap: 3px; min-width: 128px; padding-right: 26px; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.16); }
.hero-proof > div:last-child { border: 0; margin: 0; padding: 0; }
.hero-proof strong { font-size: 23px; line-height: 1; color: var(--cyan); }
.hero-proof span { color: #a8bac6; font-size: 11px; }
.hero-visual { position: relative; padding: 25px 0 34px 18px; }
.visual-label { display: flex; align-items: center; gap: 9px; margin: 0 0 11px 10px; color: #d7e3e9; font-size: 10px; letter-spacing: .08em; }
.visual-label i { margin-left: auto; color: #8ca5b5; font-size: 9px; font-style: normal; letter-spacing: .18em; }
.visual-window { overflow: hidden; padding: 8px; border: 1px solid rgba(164,224,229,.35); border-radius: 8px; background: rgba(243,248,248,.95); box-shadow: 0 30px 80px rgba(0,0,0,.4); transform: perspective(1200px) rotateY(-5deg) rotateX(1deg); }
.window-bar, .screen-toolbar { display: flex; align-items: center; gap: 5px; min-height: 27px; padding: 0 8px 7px; color: #516676; font-size: 9px; }
.window-bar > span, .screen-toolbar > span { width: 6px; height: 6px; border-radius: 50%; background: #a9b8be; }
.window-bar > span:first-child, .screen-toolbar > span:first-child { background: #eb8d81; }
.window-bar > span:nth-child(2), .screen-toolbar > span:nth-child(2) { background: #e6c36c; }
.window-bar > span:nth-child(3), .screen-toolbar > span:nth-child(3) { background: #78ba8e; }
.window-bar b { margin-left: auto; font-weight: 600; }
.visual-window img { width: 100%; border-radius: 3px; }
.visual-note { position: absolute; right: -3px; bottom: 5px; display: flex; gap: 22px; padding: 11px 14px; color: #d8e8ec; background: rgba(8,30,43,.88); border: 1px solid rgba(111,226,223,.25); border-radius: 4px; font-size: 9px; letter-spacing: .06em; }
.visual-note span:first-child { color: var(--cyan); }
.hero-bottom { position: absolute; z-index: 2; inset: auto 0 0; min-height: 54px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.16); color: #92a9b7; font-size: 9px; letter-spacing: .12em; }
.hero-bottom > span:nth-child(2) { text-align: center; letter-spacing: .04em; }
.hero-bottom a { justify-self: end; color: #d6e3e8; }
.hero-bottom b { margin-left: 8px; color: var(--cyan); font-size: 13px; }

/* Value workflow */
.value-section { background: #f5f8f7; }
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.workflow-step { position: relative; min-height: 235px; padding: 25px 22px 23px; border: 1px solid var(--line); border-radius: 7px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.workflow-step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(17,48,63,.08); }
.step-no { position: absolute; top: 21px; right: 20px; color: #a4b3b9; font: 11px/1 Inter, sans-serif; }
.step-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 26px; color: var(--cyan-strong); background: #e4f6f4; border-radius: 12px; font-size: 23px; }
.workflow-step h3 { margin: 0 0 8px; font-size: 17px; }
.workflow-step p { min-height: 68px; margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.step-tag { display: inline-flex; padding: 5px 8px; color: #557078; background: #f1f6f5; border-radius: 3px; font-size: 9px; }

/* Scenarios */
.scenarios-section { background: #eaf0ef; }
.scenarios-section .section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12%; max-width: none; }
.scenarios-section .section-heading h2 { grid-column: 1; grid-row: 2; }
.scenarios-section .section-heading .kicker { grid-column: 1; grid-row: 1; }
.scenarios-section .section-heading .heading-copy { grid-column: 2; grid-row: 2; }
.scenario-feature { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 438px; overflow: hidden; border-radius: 8px; background: var(--navy); color: white; box-shadow: 0 24px 55px rgba(17,42,55,.12); }
.scenario-image { position: relative; min-height: 350px; overflow: hidden; }
.scenario-image::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(5,19,31,.78), transparent); }
.scenario-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.scenario-image > span { position: absolute; z-index: 1; bottom: 22px; left: 24px; color: white; font-size: 11px; letter-spacing: .04em; }
.scenario-copy { padding: 44px clamp(25px, 4vw, 54px); align-self: center; }
.scenario-copy .kicker { color: var(--cyan); }
.scenario-copy h3 { margin: 0 0 14px; font-size: clamp(27px, 3.1vw, 38px); line-height: 1.2; letter-spacing: -.04em; }
.scenario-copy > p:not(.kicker) { color: #b8c7cf; font-size: 13px; line-height: 1.8; }
.scenario-flow { display: grid; gap: 11px; padding: 17px 0 0; margin: 20px 0; border-top: 1px solid rgba(255,255,255,.15); list-style: none; }
.scenario-flow li { display: flex; gap: 12px; color: #e0e9ed; font-size: 11px; }
.scenario-flow b { color: var(--cyan); font: 10px/1.5 Inter, sans-serif; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; color: var(--cyan); border-bottom: 1px solid rgba(111,226,223,.5); font-size: 11px; font-weight: 700; }
.scenario-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.scenario-card { min-height: 185px; padding: 23px 26px; background: #fff; border: 1px solid #dce5e5; border-radius: 6px; }
.card-index { color: var(--cyan-strong); font: 9px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.scenario-card h3 { margin: 15px 0 7px; font-size: 17px; }
.scenario-card p { max-width: 480px; margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.scenario-card a { color: var(--cyan-strong); font-size: 10px; font-weight: 750; }

/* Product layers */
.products-section { background: #fff; }
.product-stack { border-top: 1px solid var(--line); }
.product-row { display: grid; grid-template-columns: 50px 160px minmax(260px,1fr) minmax(200px,.65fr); align-items: center; gap: 22px; padding: 27px 6px; border-bottom: 1px solid var(--line); }
.product-number { align-self: start; color: #9eafb5; font: 14px/1.5 Inter, sans-serif; }
.product-type { color: var(--cyan-strong); font: 9px/1.5 Inter, sans-serif; letter-spacing: .14em; }
.product-main h3 { margin: 0 0 7px; font-size: 18px; }
.product-main p { margin: 0; max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.product-tags { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.product-tags span { padding: 6px 8px; color: #526a73; background: #f1f6f5; border-radius: 3px; font-size: 9px; }
.product-note { margin: 16px 0 0; color: #7a8a91; font-size: 10px; line-height: 1.6; }

/* Interface gallery */
.showcase-section { background: var(--navy); color: white; }
.showcase-section .kicker { color: var(--cyan); }
.showcase-section .section-heading h2 em { color: var(--cyan); }
.showcase-section .heading-copy { color: #a9bbc5; }
.showcase-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.showcase-tabs { display: grid; gap: 6px; align-content: start; }
.showcase-tab { display: grid; grid-template-columns: 28px 1fr; gap: 3px 10px; width: 100%; padding: 13px 14px; text-align: left; color: #bfccd3; background: transparent; border: 1px solid transparent; border-radius: 5px; }
.showcase-tab > span { grid-row: span 2; align-self: center; color: #748d9b; font: 10px/1.4 Inter, sans-serif; }
.showcase-tab b { font-size: 12px; }
.showcase-tab small { color: #8397a3; font-size: 9px; }
.showcase-tab:hover, .showcase-tab.is-active { color: white; background: #112b3c; border-color: rgba(111,226,223,.28); }
.showcase-tab.is-active > span { color: var(--cyan); }
.showcase-screen { align-self: center; margin: 0; padding: 12px; overflow: hidden; border: 1px solid rgba(164,224,229,.2); border-radius: 7px; background: #eef3f2; box-shadow: 0 25px 65px rgba(0,0,0,.24); }
.screen-toolbar { color: #566b76; padding-bottom: 10px; }
.screen-toolbar b { margin-left: auto; font-weight: 600; }
.showcase-screen img { width: 100%; max-height: 460px; object-fit: contain; object-position: top; border-radius: 3px; }
.showcase-screen figcaption { padding: 8px 3px 0; color: #697d85; font-size: 9px; }

/* Capabilities */
.capabilities-section { background: #f5f8f7; }
.cap-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 21px; }
.filter-button { min-height: 36px; padding: 0 13px; color: #657780; background: #fff; border: 1px solid #dce5e5; border-radius: 4px; font-size: 10px; }
.filter-button:hover, .filter-button.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }
.filter-button span { margin-left: 4px; opacity: .7; }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cap-card { min-height: 190px; padding: 19px 18px; border: 1px solid var(--line); border-radius: 6px; background: white; transition: transform .18s ease, box-shadow .18s ease; }
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,48,63,.07); }
.cap-card[hidden] { display: none; }
.cap-card > span { color: #84979f; font: 8px/1.5 Inter, sans-serif; letter-spacing: .08em; }
.cap-card h3 { margin: 21px 0 8px; font-size: 16px; }
.cap-card p { min-height: 55px; margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.cap-card small { display: inline-block; padding: 5px 7px; color: var(--cyan-strong); background: #e9f7f5; border-radius: 3px; font-size: 9px; }
.cap-footnote { margin: 17px 0 0; color: #7a8a91; font-size: 10px; line-height: 1.6; }

/* Integration and deployment */
.integration-section { background: #fff; }
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 50px; }
.integration-card { display: grid; grid-template-columns: 44px 1fr; gap: 15px; min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 6px; }
.integration-letter { display: grid; place-items: center; width: 38px; height: 38px; color: var(--cyan-strong); background: #e5f5f3; border-radius: 50%; font: 15px/1 Inter, sans-serif; }
.integration-card h3 { margin: 2px 0 8px; font-size: 16px; }
.integration-card p { margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.integration-card small { color: #819098; font-size: 9px; }
.deployment-note { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 28px 30px; color: white; background: var(--navy); border-radius: 7px; }
.deployment-mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--cyan); background: rgba(111,226,223,.1); border: 1px solid rgba(111,226,223,.32); border-radius: 50%; font-size: 21px; }
.deployment-note .kicker { margin-bottom: 9px; color: var(--cyan); }
.deployment-note h3 { margin: 0 0 7px; font-size: 19px; }
.deployment-note p:not(.kicker) { max-width: 750px; margin: 0; color: #adbec7; font-size: 11px; line-height: 1.8; }

/* FAQ */
.faq-section { background: #eaf0ef; }
.faq-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 10%; align-items: start; }
.faq-layout .section-heading { margin: 0; }
.faq-layout .section-heading h2 { margin: 0; font-size: clamp(38px, 4vw, 56px); line-height: 1.1; letter-spacing: -.05em; }
.faq-layout .heading-copy { margin-top: 18px; font-size: 13px; }
.faq-list { border-top: 1px solid #cedbdc; }
.faq-item { border-bottom: 1px solid #cedbdc; }
.faq-question { display: grid; grid-template-columns: 38px 1fr 24px; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 0; text-align: left; background: transparent; border: 0; appearance: none; }
.faq-question > span { color: var(--cyan-strong); font: 10px/1 Inter, sans-serif; }
.faq-question b { font-size: 13px; }
.faq-question i { color: var(--cyan-strong); font-size: 20px; font-style: normal; text-align: right; }
.faq-answer { display: none; padding: 0 35px 19px 50px; }
.faq-item.is-open .faq-answer { display: block; }
.faq-answer p { margin: 0; color: #637680; font-size: 11px; line-height: 1.85; }

/* Contact and footer */
.contact-section { overflow: hidden; padding: 87px 0; color: white; background: #071522; }
.contact-orb { position: absolute; top: -280px; right: -80px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(23,129,139,.22), transparent 67%); pointer-events: none; }
.contact-layout { position: relative; display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 12%; }
.contact-copy .kicker { color: var(--cyan); }
.contact-copy h2 { margin: 0; font-size: clamp(35px, 5.1vw, 62px); line-height: 1.14; letter-spacing: -.05em; }
.contact-copy h2 em { color: var(--cyan); font-style: normal; }
.contact-copy > p:not(.kicker) { max-width: 600px; margin: 19px 0 23px; color: #b3c1c9; font-size: 13px; line-height: 1.85; }
.contact-card { display: flex; align-items: center; gap: 17px; padding: 16px; color: var(--ink); background: white; border-radius: 7px; }
.qr-frame { flex: none; width: 106px; padding: 5px; background: #fff; border: 1px solid #e0e7e7; border-radius: 4px; }
.qr-frame img { width: 100%; height: auto; }
.contact-card b { font-size: 13px; }
.contact-card p { margin: 7px 0 0; color: #73828a; font-size: 9px; line-height: 1.6; }
.site-footer { color: #a6b6bf; background: #06111c; border-top: 1px solid rgba(255,255,255,.1); }
.footer-inner { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.footer-brand { color: white; }
.footer-inner > p { margin: 0 auto; font-size: 9px; line-height: 1.6; }
.back-top { color: var(--cyan); font-size: 10px; white-space: nowrap; }

@media (max-width: 1050px) {
  .primary-nav { gap: 15px; font-size: 11px; }
  .hero-layout { grid-template-columns: 1.08fr .92fr; gap: 2%; }
  .product-row { grid-template-columns: 35px 115px minmax(230px,1fr) minmax(150px,.6fr); gap: 14px; }
  .cap-grid { grid-template-columns: repeat(3, 1fr); }
  .showcase-layout { grid-template-columns: 220px minmax(0,1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 70px; }
  .shell { width: min(var(--shell), calc(100% - 36px)); }
  .header-inner { min-height: 68px; }
  .brand-mark { width: 32px; height: 32px; }
  .menu-toggle { display: grid; gap: 5px; width: 42px; height: 42px; place-content: center; color: white; border: 1px solid rgba(255,255,255,.26); border-radius: 5px; }
  .menu-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 68px; right: 18px; left: 18px; display: none; align-items: stretch; gap: 0; padding: 9px; background: rgba(8,21,34,.98); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.3); }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { padding: 13px 12px; border-radius: 4px; }
  .primary-nav a:hover { background: rgba(255,255,255,.06); }
  .primary-nav .nav-contact { margin-top: 5px; color: var(--navy); background: var(--cyan); }
  .section-pad { padding: 72px 0; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .section-heading h2 em { font-size: clamp(35px, 9vw, 52px); }
  .heading-split { grid-template-columns: 1fr; gap: 17px; }
  .heading-copy { font-size: 13px; }
  .hero { height: auto; min-height: 0; padding: 94px 0 65px; }
  .hero-photo { background-position: 61% center; opacity: .72; }
  .hero-grain { opacity: .06; }
  .hero-layout { grid-template-columns: 1fr; gap: 8px; padding-top: 23px; padding-bottom: 18px; }
  .hero-copy { max-width: 620px; }
  .eyebrow { margin-bottom: 18px; font-size: 9px; }
  .hero h1 { font-size: clamp(48px, 13vw, 74px); }
  .hero-lede { margin: 18px 0 22px; font-size: 13px; line-height: 1.8; }
  .hero-actions { gap: 9px; }
  .button { min-height: 45px; padding: 0 15px; font-size: 11px; }
  .hero-proof { margin-top: 27px; padding-top: 16px; }
  .hero-proof > div { min-width: 0; flex: 1; padding-right: 10px; margin-right: 10px; }
  .hero-proof strong { font-size: 19px; }
  .hero-proof span { font-size: 9px; }
  .hero-visual { padding: 20px 4px 23px; }
  .visual-window { transform: none; }
  .visual-note { right: 0; bottom: 0; padding: 9px 11px; }
  .hero-bottom { min-height: 44px; grid-template-columns: 1fr auto; font-size: 8px; }
  .hero-bottom > span:nth-child(2) { display: none; }
  .workflow { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .workflow-step { min-height: 215px; padding: 18px 15px; }
  .workflow-step p { min-height: 86px; font-size: 10px; }
  .step-icon { margin-bottom: 20px; }
  .scenarios-section .section-heading { grid-template-columns: 1fr; gap: 14px; }
  .scenarios-section .section-heading h2, .scenarios-section .section-heading .kicker, .scenarios-section .section-heading .heading-copy { grid-column: 1; grid-row: auto; }
  .scenarios-section .section-heading h2 { order: 2; }
  .scenarios-section .section-heading .kicker { order: 1; }
  .scenarios-section .section-heading .heading-copy { order: 3; }
  .scenario-feature { grid-template-columns: 1fr; }
  .scenario-image { min-height: 250px; }
  .scenario-copy { padding: 28px 22px 30px; }
  .scenario-copy h3 { font-size: 29px; }
  .scenario-cards { grid-template-columns: 1fr; }
  .scenario-card { min-height: auto; padding: 20px; }
  .product-row { grid-template-columns: 28px 1fr; gap: 7px 12px; padding: 21px 0; }
  .product-number { grid-column: 1; grid-row: 1 / span 2; }
  .product-type { grid-column: 2; }
  .product-main { grid-column: 2; }
  .product-tags { grid-column: 2; justify-content: flex-start; margin-top: 5px; }
  .product-main h3 { font-size: 16px; }
  .product-main p { font-size: 11px; }
  .showcase-layout { grid-template-columns: 1fr; gap: 14px; }
  .showcase-tabs { grid-template-columns: repeat(2,1fr); gap: 5px; }
  .showcase-tab { grid-template-columns: 22px 1fr; gap: 3px 7px; padding: 10px 8px; }
  .showcase-tab b { font-size: 10px; }
  .showcase-tab small { font-size: 8px; }
  .showcase-screen { padding: 8px; }
  .showcase-screen img { max-height: 340px; }
  .cap-grid { grid-template-columns: repeat(2,1fr); gap: 7px; }
  .cap-card { min-height: 190px; padding: 14px 12px; }
  .cap-card h3 { margin-top: 17px; font-size: 14px; }
  .cap-card p { min-height: 78px; font-size: 9px; }
  .filter-button { min-height: 33px; padding: 0 9px; font-size: 9px; }
  .integration-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 28px; }
  .integration-card { min-height: auto; padding: 18px; }
  .deployment-note { grid-template-columns: 44px 1fr; gap: 13px; padding: 21px 17px; }
  .deployment-mark { width: 38px; height: 38px; }
  .deployment-note h3 { font-size: 16px; }
  .deployment-note p:not(.kicker) { font-size: 10px; }
  .deployment-note .button { grid-column: 2; justify-self: start; }
  .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .faq-layout .section-heading h2 { font-size: 41px; }
  .faq-question { grid-template-columns: 28px 1fr 20px; gap: 8px; min-height: 59px; }
  .faq-question b { font-size: 11px; }
  .faq-answer { padding: 0 20px 17px 36px; }
  .faq-answer p { font-size: 10px; }
  .contact-section { padding: 67px 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .contact-copy h2 { font-size: clamp(35px, 9vw, 52px); }
  .contact-copy > p:not(.kicker) { font-size: 11px; }
  .contact-card { max-width: 330px; }
  .footer-inner { flex-wrap: wrap; gap: 12px 20px; padding-block: 18px; }
  .footer-inner > p { order: 3; flex-basis: 100%; }
}

@media (max-width: 390px) {
  .hero-proof > div { padding-right: 6px; margin-right: 6px; }
  .hero-proof span { font-size: 8px; }
  .workflow { grid-template-columns: 1fr; }
  .workflow-step { min-height: 0; }
  .workflow-step p { min-height: 0; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-card { min-height: 0; }
  .cap-card p { min-height: 0; }
}

/* Motion, depth, and interaction polish */
.page-progress::after { transition: width .12s linear; }
.site-header { transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-header.is-scrolled { border-color: rgba(111,226,223,.12); }
.brand-mark { transition: transform .5s cubic-bezier(.2,.8,.2,1), color .3s ease; }
.brand:hover .brand-mark { transform: translateY(-1px) scale(1.05); }
.brand-name strong { transition: color .25s ease, letter-spacing .3s ease; }
.brand:hover .brand-name strong { color: var(--cyan); letter-spacing: .16em; }
.primary-nav a:not(.nav-contact) { position: relative; padding-block: 7px; }
.primary-nav a:not(.nav-contact)::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.primary-nav a:not(.nav-contact):hover::after, .primary-nav a:not(.nav-contact)[aria-current="location"]::after { transform: scaleX(1); }
.primary-nav a:not(.nav-contact)[aria-current="location"] { color: var(--cyan); }
.nav-contact { transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
.nav-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(111,226,223,.2); }

.hero-photo { will-change: transform; animation: hero-drift 26s ease-in-out infinite alternate; }
.hero-grain { animation: grid-drift 70s ease-in-out infinite alternate; }
.hero-aura { position: absolute; z-index: 0; top: var(--pointer-y, 44%); left: var(--pointer-x, 73%); width: min(48vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(50,179,186,.17), rgba(33,113,137,.075) 32%, transparent 69%); filter: blur(8px); transform: translate(-50%,-50%); pointer-events: none; transition: top .7s cubic-bezier(.2,.8,.2,1), left .7s cubic-bezier(.2,.8,.2,1); }
.hero-product-lockup { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #f0f6f7; }
.hero-product-cn { font-size: 14px; font-weight: 760; letter-spacing: .2em; }
.hero-product-divider { width: 24px; height: 1px; background: rgba(111,226,223,.72); }
.hero-product-en { color: #90a7b4; font: 9px/1.2 Inter, sans-serif; letter-spacing: .24em; }
.hero-copy .eyebrow { margin-bottom: 21px; }
.visual-window { transform: perspective(1200px) rotateX(calc(1deg + var(--tilt-x, 0deg))) rotateY(calc(-5deg + var(--tilt-y, 0deg))); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; translate: 0 0; animation: window-float 7s ease-in-out infinite; will-change: transform, translate; }
.visual-window:hover { box-shadow: 0 38px 90px rgba(0,0,0,.5); }
.visual-note { animation: note-float 5.5s ease-in-out infinite; }
.live-dot, .eyebrow > span:first-child { animation: signal-pulse 2.2s ease-out infinite; }
.hero-bottom a b { display: inline-block; animation: arrow-nudge 1.8s ease-in-out infinite; }

.button { position: relative; overflow: hidden; isolation: isolate; transition: transform .32s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.button::before { content: ""; position: absolute; z-index: -1; top: -100%; bottom: -100%; left: -45%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.8,.2,1); }
.button:hover::before { left: 125%; }
.button-primary:hover { box-shadow: 0 12px 30px rgba(111,226,223,.2); }
.button span, .text-link span, .scenario-card a span { display: inline-block; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.button:hover span, .text-link:hover span, .scenario-card a:hover span { transform: translate(3px,-2px); }
.text-link, .scenario-card a { transition: color .25s ease, gap .25s ease; }
.text-link:hover, .scenario-card a:hover { color: #27bbc0; }

.workflow-step, .scenario-card, .integration-card, .product-row, .cap-card, .showcase-tab, .faq-item { transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.workflow-step { transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease, border-color .3s ease; }
.workflow-step:hover { border-color: rgba(8,127,136,.32); }
.step-icon { transition: transform .4s cubic-bezier(.2,.8,.2,1), border-radius .4s ease, background .3s ease; }
.workflow-step:hover .step-icon { transform: translateY(-3px) rotate(-7deg); border-radius: 16px 9px 16px 9px; background: #d4f2ef; }
.scenario-feature { transition: box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.scenario-feature:hover { transform: translateY(-4px); box-shadow: 0 32px 75px rgba(17,42,55,.19); }
.scenario-image img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.scenario-feature:hover .scenario-image img { transform: scale(1.045); filter: saturate(1.08); }
.scenario-card { transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .3s ease; }
.scenario-card:hover { transform: translateY(-5px); border-color: rgba(8,127,136,.32); box-shadow: 0 20px 42px rgba(17,48,63,.09); }
.product-row { position: relative; transition: background .3s ease, padding .35s cubic-bezier(.2,.8,.2,1); }
.product-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--cyan-strong); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.product-row:hover { padding-inline: 13px; background: linear-gradient(90deg, rgba(226,246,243,.62), transparent 72%); }
.product-row:hover::before { transform: scaleY(1); transform-origin: top; }
.product-main h3 { transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.product-row:hover .product-main h3 { color: var(--cyan-strong); transform: translateX(3px); }
.product-tags span { transition: color .25s ease, background .25s ease, transform .25s ease; }
.product-row:hover .product-tags span { color: #126b72; background: #e0f5f1; transform: translateY(-2px); }

.showcase-tab { transition: color .28s ease, background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.showcase-tab:hover { transform: translateX(4px); }
.showcase-screen { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; }
.showcase-screen:hover { transform: translateY(-4px); box-shadow: 0 34px 76px rgba(0,0,0,.31); border-color: rgba(111,226,223,.42); }
.showcase-screen img { transition: opacity .32s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.showcase-screen img.is-changing { opacity: 0; transform: scale(.985); }
.cap-card { position: relative; overflow: hidden; transition: opacity .22s ease, transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .3s ease; }
.cap-card::before { content: ""; position: absolute; top: -55px; right: -55px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(111,226,223,.17), transparent 68%); opacity: 0; transform: scale(.7); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.cap-card:hover { transform: translateY(-6px); border-color: rgba(8,127,136,.3); box-shadow: 0 18px 38px rgba(17,48,63,.1); }
.cap-card:hover::before { opacity: 1; transform: scale(1.25); }
.cap-card.is-filtering-out { opacity: 0; transform: translateY(9px) scale(.97); pointer-events: none; }
.filter-button { transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.filter-button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(17,48,63,.09); }
.integration-card { transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .3s ease; }
.integration-card:hover { transform: translateY(-5px); border-color: rgba(8,127,136,.32); box-shadow: 0 18px 40px rgba(17,48,63,.08); }
.integration-letter { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease; }
.integration-card:hover .integration-letter { transform: rotate(9deg) scale(1.07); color: #fff; background: var(--cyan-strong); }
.deployment-note { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.deployment-note:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(8,21,34,.17); }
.deployment-mark { transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.deployment-note:hover .deployment-mark { transform: rotate(45deg); background: rgba(111,226,223,.18); }
.faq-question i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #cedbdc; border-radius: 50%; transition: transform .3s ease, color .3s ease, background .3s ease, border-color .3s ease; }
.faq-item.is-open .faq-question i { color: white; background: var(--cyan-strong); border-color: var(--cyan-strong); transform: rotate(180deg); }
.faq-question { transition: color .25s ease; }
.faq-question:hover b { color: var(--cyan-strong); }
.faq-answer { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease; opacity: .45; }
.faq-item.is-open .faq-answer { display: grid; grid-template-rows: 1fr; opacity: 1; }
.faq-answer-inner { min-height: 0; overflow: hidden; }
.faq-answer-inner p { padding: 0 35px 19px 50px; margin: 0; color: #637680; font-size: 11px; line-height: 1.85; transform: translateY(-6px); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq-item.is-open .faq-answer-inner p { transform: translateY(0); }
.contact-orb { animation: orb-breathe 9s ease-in-out infinite alternate; }
.contact-card { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.contact-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 24px 55px rgba(0,0,0,.24); }

body.motion-ready [data-reveal] { opacity: 0; transform: translate3d(0,26px,0) scale(.992); filter: blur(2px); transition: opacity .78s cubic-bezier(.2,.8,.2,1), transform .78s cubic-bezier(.2,.8,.2,1), filter .78s ease; transition-delay: var(--reveal-delay, 0ms); }
body.motion-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.motion-ready .hero-product-lockup { animation: hero-rise .7s .04s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-copy .eyebrow { animation: hero-rise .7s .08s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero h1 { animation: title-reveal .82s .12s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-lede { animation: hero-rise .75s .24s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-actions { animation: hero-rise .75s .32s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-proof { animation: hero-rise .75s .4s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-visual { animation: hero-rise .86s .14s cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-bottom { animation: hero-rise .65s .42s cubic-bezier(.2,.8,.2,1) both; }
.hero-product-cn { display: inline-block; animation: wordmark-track .7s .04s cubic-bezier(.2,.8,.2,1) both; }
.hero-product-en { animation: wordmark-track .7s .1s cubic-bezier(.2,.8,.2,1) both; }

@keyframes hero-rise { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes title-reveal { from { opacity: 0; transform: translate3d(0,26px,0); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); } }
@keyframes wordmark-track { from { opacity: 0; letter-spacing: .36em; filter: blur(7px); transform: translateY(5px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes hero-drift { from { transform: scale(1.025) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(1.1%,-.5%,0); } }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 43px 31px, 43px 31px; } }
@keyframes window-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes note-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes signal-pulse { 0% { box-shadow: 0 0 0 0 rgba(111,226,223,.48); } 75%, 100% { box-shadow: 0 0 0 8px rgba(111,226,223,0); } }
@keyframes arrow-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes orb-breathe { from { transform: scale(.94) translate3d(0,0,0); opacity: .75; } to { transform: scale(1.06) translate3d(-2%,2%,0); opacity: 1; } }

/* Softer, more editorial visual language */
:root { --paper: #f6f8f5; --line: #dce6e2; --cyan-strong: #087f82; }
.section-pad { padding-block: clamp(82px, 9vw, 124px); }
.section-heading { margin-bottom: 56px; }
.kicker { letter-spacing: .19em; }
.button, .filter-button, .nav-contact { border-radius: 999px; }
.button { min-height: 52px; padding-inline: 23px; }
.menu-toggle { border-radius: 999px; }
.hero-product-lockup { gap: 14px; }
.hero-product-cn { letter-spacing: .24em; }
.hero-product-divider { width: 34px; border-radius: 999px; }
.hero-product-en { letter-spacing: .28em; }
.hero-visual { isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; z-index: -1; inset: 5% -2% 2% 0; border: 1px solid rgba(111,226,223,.18); border-radius: 50%; transform: rotate(-13deg); pointer-events: none; }
.hero-visual::after { content: ""; position: absolute; z-index: 2; top: 10%; right: 8%; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px rgba(111,226,223,.8); pointer-events: none; }
.visual-window { padding: 10px; border-radius: 22px; box-shadow: 0 36px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08); }
.visual-window img { border-radius: 13px; }
.window-bar { padding-inline: 11px; }
.visual-note { right: -8px; bottom: 0; padding: 12px 17px; border-radius: 999px; backdrop-filter: blur(14px); }
.hero-aura { width: min(55vw, 700px); }
.hero-bottom { letter-spacing: .16em; }

.value-section { overflow: hidden; }
.value-section::after { content: ""; position: absolute; z-index: 0; top: 7%; right: -9%; width: min(38vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(110,218,208,.12), transparent 68%); pointer-events: none; }
.value-section .shell { position: relative; z-index: 1; }
.workflow { position: relative; gap: 22px; padding-top: 1px; }
.workflow::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(8,127,130,.48), var(--line) 75%, transparent); }
.workflow-step { min-height: 250px; padding: 32px 18px 22px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workflow-step::before { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border: 2px solid #f6f8f5; border-radius: 50%; background: var(--cyan-strong); box-shadow: 0 0 0 1px rgba(8,127,130,.4); }
.workflow-step:hover { transform: translateY(-3px); box-shadow: none; }
.step-no { top: 25px; right: 3px; font-size: 10px; }
.step-icon { width: 54px; height: 54px; margin-bottom: 26px; border-radius: 50%; background: linear-gradient(145deg, #ecfbf8, #d8f1ed); box-shadow: inset 0 0 0 1px rgba(8,127,130,.07); }
.workflow-step:hover .step-icon { border-radius: 50%; }
.step-tag, .product-tags span, .cap-card small { border-radius: 999px; }

.scenarios-section { background: #eef3f0; }
.scenario-feature { border-radius: 32px; box-shadow: 0 34px 80px rgba(17,42,55,.12); }
.scenario-image { min-height: 470px; }
.scenario-image img { transform: scale(1.015); }
.scenario-cards { gap: clamp(24px, 5vw, 68px); margin-top: 43px; }
.scenario-card { min-height: 0; padding: 25px 0 0; border: 0; border-top: 1px solid #cbd9d6; border-radius: 0; background: transparent; }
.scenario-card:hover { transform: translateY(-3px); border-color: #a9c6c1; box-shadow: none; }
.scenario-card h3 { margin-top: 16px; font-size: 20px; }
.scenario-card p { max-width: 520px; font-size: 12px; }
.scenario-card a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(8,127,130,.25); }
.scenario-feature:hover { transform: translateY(-3px); }
.scenario-feature:hover .scenario-image img { transform: scale(1.07); }
.text-link { gap: 13px; }

.products-section { overflow: hidden; }
.product-row { padding-block: 32px; }
.product-row:hover { padding-inline: 12px; }
.product-number { color: #93aaa7; }
.product-type { letter-spacing: .19em; }
.product-tags { gap: 8px; }
.product-tags span { padding: 7px 11px; background: #eff6f3; }
.product-note { max-width: 760px; }

.showcase-section { overflow: hidden; }
.showcase-section::before { content: ""; position: absolute; top: -340px; right: -210px; width: 690px; aspect-ratio: 1; border: 1px solid rgba(111,226,223,.1); border-radius: 50%; box-shadow: 0 0 0 56px rgba(111,226,223,.025), 0 0 0 112px rgba(111,226,223,.018); pointer-events: none; }
.showcase-layout { position: relative; }
.showcase-tab { border-radius: 16px; }
.showcase-tab.is-active { background: linear-gradient(110deg, rgba(111,226,223,.14), rgba(17,43,60,.55)); border-color: rgba(111,226,223,.2); }
.showcase-screen { padding: 15px; border-radius: 24px; box-shadow: 0 35px 85px rgba(0,0,0,.29); }
.showcase-screen img { border-radius: 12px; }
.screen-toolbar { padding-inline: 5px; }

.capabilities-section { position: relative; overflow: hidden; background: #f7f9f6; }
.capabilities-section::after { content: ""; position: absolute; top: 22%; left: -22%; width: min(46vw, 600px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(129,218,205,.09), transparent 70%); pointer-events: none; }
.capabilities-section .shell { position: relative; z-index: 1; }
.cap-filter { gap: 9px; margin-bottom: 32px; }
.filter-button { min-height: 40px; padding-inline: 16px; }
.filter-button.is-active { box-shadow: 0 8px 22px rgba(8,21,34,.14); }
.cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.cap-card { min-height: 190px; padding: 27px 25px 26px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.cap-card:nth-child(3n) { border-right: 0; }
.cap-card:nth-child(3n + 1) { padding-left: 0; }
.cap-card:not(:nth-child(3n + 1)) { padding-left: 25px; }
.cap-card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: none; }
.cap-card::before { top: -38px; right: 3px; width: 125px; height: 125px; background: radial-gradient(circle, rgba(111,226,223,.21), transparent 70%); }
.cap-card h3 { position: relative; margin: 17px 0 9px; font-size: 18px; transition: color .28s ease, transform .32s cubic-bezier(.2,.8,.2,1); }
.cap-card h3::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 3px 0; border-radius: 50%; background: #8dcac2; transition: transform .3s ease, background .3s ease; }
.cap-card:hover h3 { color: var(--cyan-strong); transform: translateX(3px); }
.cap-card:hover h3::before { transform: scale(1.35); background: var(--cyan-strong); }
.cap-card p { min-height: 48px; font-size: 11px; }
.cap-card small { padding: 6px 10px; }
.cap-footnote { max-width: 840px; }

.integration-grid { gap: clamp(20px, 4vw, 52px); }
.integration-card { min-height: 0; grid-template-columns: 46px 1fr; gap: 18px; padding: 27px 10px 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.integration-card:hover { transform: translateY(-4px); box-shadow: none; border-color: #afc9c5; }
.integration-letter { width: 42px; height: 42px; border-radius: 50%; background: #edf8f5; }
.deployment-note { padding: 36px 40px; border-radius: 30px 8px 30px 8px; }
.deployment-note:hover { transform: translateY(-3px); }
.faq-section { background: #eef3f0; }
.faq-list { border-top-color: #d3dfdb; }
.faq-item { border-bottom-color: #d3dfdb; }
.faq-question { min-height: 72px; }
.faq-question i { border: 0; background: rgba(8,127,130,.07); }
.faq-item.is-open .faq-question i { background: var(--cyan-strong); }
.contact-section { background: radial-gradient(ellipse at 72% 10%, rgba(16,92,103,.32), transparent 38%), #071522; }
.contact-orb { width: 800px; }
.contact-card { padding: 19px; border-radius: 24px; box-shadow: 0 18px 45px rgba(0,0,0,.16); }
.qr-frame { width: 112px; padding: 7px; border-radius: 15px; }
.footer-brand .brand-mark { border-radius: 50%; }

@media (max-width: 760px) {
  .section-pad { padding-block: 76px; }
  .section-heading { margin-bottom: 37px; }
  .hero-visual::before { inset: 4% -2% 2% 0; }
  .visual-window { padding: 7px; border-radius: 17px; }
  .visual-window img { border-radius: 11px; }
  .visual-note { right: 0; padding: 9px 12px; }
  .workflow { padding-top: 0; }
  .workflow::before { display: none; }
  .workflow-step { min-height: 220px; padding: 18px 12px 20px 0; border-top: 1px solid var(--line); }
  .workflow-step::before { top: -5px; }
  .step-no { top: 16px; }
  .step-icon { width: 46px; height: 46px; margin-bottom: 18px; }
  .scenario-feature { border-radius: 25px; }
  .scenario-image { min-height: 270px; }
  .scenario-cards { gap: 24px; margin-top: 28px; }
  .scenario-card { padding-top: 20px; }
  .showcase-screen { padding: 9px; border-radius: 19px; }
  .showcase-screen img { border-radius: 10px; }
  .cap-filter { gap: 7px; margin-bottom: 24px; }
  .filter-button { min-height: 36px; padding-inline: 12px; }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-card { min-height: 184px; padding: 22px 15px 20px 0; }
  .cap-card:nth-child(3n) { border-right: 0; }
  .cap-card:nth-child(2n) { border-right: 0; }
  .cap-card:not(:nth-child(3n + 1)) { padding-left: 15px; }
  .cap-card:nth-child(2n + 1) { padding-left: 0; }
  .cap-card h3 { margin-top: 15px; font-size: 15px; }
  .cap-card p { min-height: 74px; font-size: 10px; }
  .integration-grid { gap: 12px; }
  .integration-card { padding: 20px 0 15px; }
  .deployment-note { border-radius: 24px 7px 24px 7px; padding: 21px 17px; }
  .contact-card { border-radius: 20px; }
}

/* Language selector and compact tablet navigation */
.language-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 3px;
  color: #536985;
  border: 1px solid rgba(70,110,165,.2);
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}
.language-switch > span { color: #9aacc1; }
.language-option {
  min-width: 31px;
  padding: 5px 7px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: inherit;
  line-height: 1;
  transition: color .18s ease, background .18s ease;
}
.language-option:hover { color: #215fb8; }
.language-option.is-active { color: #fff; background: #2f73d3; }
.product-row-core { padding-block: 32px; border-bottom-color: #b9cde8; background: linear-gradient(90deg, rgba(231,241,255,.72), transparent 82%); }
.product-row-core::before { transform: scaleY(1); }
.product-row-core .product-number { color: #2f73d3; }
.product-row-core .product-type { color: #2f73d3; }
.product-row-core .product-main h3 { color: #1d4f8e; }
.product-row-core .product-tags span { color: #245da1; background: #e4efff; }

@media (min-width: 761px) and (max-width: 1020px) {
  .header-inner { position: relative; gap: 16px; }
  .menu-toggle { order: 3; display: grid; gap: 5px; width: 42px; height: 42px; flex: none; place-content: center; color: #305b8d; border: 1px solid rgba(48,91,141,.25); border-radius: 999px; }
  .menu-toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .language-switch { order: 2; margin-left: auto; }
  .primary-nav { position: absolute; top: 70px; right: 0; display: none; align-items: stretch; gap: 0; min-width: 240px; padding: 9px; background: rgba(255,255,255,.98); border: 1px solid #dce7f5; border-radius: 8px; box-shadow: 0 18px 40px rgba(35,67,109,.14); }
  .primary-nav.is-open { display: grid; }
  .primary-nav a { padding: 12px; border-radius: 4px; }
  .primary-nav .nav-contact { margin-top: 5px; color: #fff; background: #2f73d3; }
}
@media (min-width: 761px) {
  html[lang="en"] .hero h1 { font-size: clamp(38px, 4.2vw, 56px); letter-spacing: -.045em; }
}
@media (max-width: 760px) {
  .language-switch { order: 2; margin-left: auto; }
  .menu-toggle { order: 3; }
  .primary-nav { order: 4; }
}
@media (max-width: 390px) {
  .header-inner { gap: 8px; }
  .brand { gap: 7px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name strong { font-size: 12px; letter-spacing: .07em; }
  .brand-name small { display: none; }
  .language-switch { gap: 2px; padding: 2px; }
  .language-option { min-width: 28px; padding-inline: 5px; }
  .menu-toggle { width: 38px; height: 38px; }
}
@media (max-width: 390px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-card, .cap-card:nth-child(3n), .cap-card:nth-child(2n) { min-height: 0; padding: 19px 0; border-right: 0; }
  .cap-card:not(:nth-child(3n + 1)) { padding-left: 0; }
  .cap-card h3 { margin-top: 13px; }
  .cap-card p { min-height: 0; }
}

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

/* Bright blue product palette */
:root {
  --navy: #16345d;
  --navy-2: #244b7d;
  --ink: #172b49;
  --muted: #667a96;
  --paper: #f7faff;
  --white: #fff;
  --cyan: #79afff;
  --cyan-strong: #2c6ed0;
  --line: #dce7f5;
}

:focus-visible { outline-color: #397fe0; }
.skip-link { color: #fff; background: #286dce; border-radius: 999px; }
.page-progress::after { background: linear-gradient(90deg, #66a5ff, #2e70d1); }

.site-header {
  color: var(--ink);
  background: rgba(255,255,255,.78);
  border-bottom-color: rgba(51,102,170,.12);
  backdrop-filter: blur(18px);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  border-color: rgba(51,102,170,.1);
  box-shadow: 0 10px 30px rgba(31,67,115,.09);
}
.brand-mark { color: var(--cyan-strong); }
.brand-name small { color: #8192aa; }
.primary-nav { color: #536985; }
.primary-nav a:not(.nav-contact):hover, .primary-nav a:not(.nav-contact)[aria-current="location"] { color: var(--cyan-strong); }
.primary-nav a:not(.nav-contact)::after { background: var(--cyan-strong); }
.primary-nav .nav-contact, .primary-nav .nav-contact:hover {
  color: #fff;
  background: #2f73d3;
}
.primary-nav .nav-contact[aria-current="location"] { color: #fff; }
.nav-contact:hover { box-shadow: 0 9px 24px rgba(47,115,211,.22); }

.button-primary { color: #fff; background: #2f73d3; border-color: #2f73d3; }
.button-primary:hover { color: #fff; background: #215fb8; border-color: #215fb8; box-shadow: 0 12px 30px rgba(47,115,211,.22); }
.button-quiet { color: #31577f; border-color: rgba(47,99,160,.28); background: rgba(255,255,255,.6); }
.button-quiet:hover { color: #205fae; border-color: #76a7e6; background: #fff; }
.button-dark { color: #fff; background: #2f73d3; border-color: #2f73d3; }
.button-dark:hover { background: #215fb8; }

.hero { color: var(--ink); background: #f4f8ff; }
.hero-photo {
  background:
    linear-gradient(90deg, rgba(248,251,255,.99) 0%, rgba(248,251,255,.96) 41%, rgba(248,251,255,.72) 66%, rgba(248,251,255,.45) 100%),
    linear-gradient(0deg, rgba(235,243,255,.88), transparent 58%),
    url("./assets/hero-field-editorial.jpg") center 48% / cover;
  opacity: .9;
}
.hero-grain {
  opacity: .08;
  background-image: linear-gradient(rgba(79,130,195,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(79,130,195,.18) 1px, transparent 1px);
}
.hero-aura { background: radial-gradient(circle, rgba(82,145,229,.16), rgba(72,126,202,.065) 32%, transparent 69%); }
.hero-product-lockup { color: #1d3c65; }
.hero-product-divider { background: rgba(47,110,197,.58); }
.hero-product-en { color: #7085a2; }
.eyebrow { color: #3977c3; }
.eyebrow > span:first-child, .live-dot { background: #4c91e8; box-shadow: 0 0 15px rgba(76,145,232,.35); }
.hero h1 em { color: #3478d2; }
.hero-lede { color: #586d89; }
.hero-proof { border-color: rgba(48,88,140,.18); }
.hero-proof > div { border-color: rgba(48,88,140,.16); }
.hero-proof strong { color: #3478d2; }
.hero-proof span { color: #73849c; }
.visual-label { color: #536b89; }
.visual-label i { color: #8495ac; }
.visual-window { border-color: rgba(79,133,202,.26); box-shadow: 0 30px 80px rgba(37,67,107,.18); }
.visual-note { color: #36577d; background: rgba(255,255,255,.9); border-color: rgba(72,126,194,.2); box-shadow: 0 10px 32px rgba(37,67,107,.1); }
.visual-note span:first-child { color: #2f73d3; }
.hero-visual::before { border-color: rgba(60,121,198,.22); }
.hero-visual::after { background: #5b9beb; box-shadow: 0 0 22px rgba(91,155,235,.45); }
.hero-bottom { color: #778ba6; border-color: rgba(48,88,140,.17); }
.hero-bottom a { color: #486b97; }
.hero-bottom b { color: #2f73d3; }

.value-section, .capabilities-section { background: #f7faff; }
.value-section::after { background: radial-gradient(circle, rgba(90,151,225,.1), transparent 68%); }
.workflow::before { background: linear-gradient(90deg, rgba(52,120,210,.42), var(--line) 75%, transparent); }
.workflow-step::before { border-color: #f7faff; background: #397ddd; box-shadow: 0 0 0 1px rgba(52,120,210,.4); }
.step-icon { color: #3478d2; background: linear-gradient(145deg, #eef5ff, #dceaff); box-shadow: inset 0 0 0 1px rgba(52,120,210,.08); }
.step-tag, .product-tags span { color: #547094; background: #edf4ff; }
.workflow-step:hover { border-color: rgba(52,120,210,.32); }
.workflow-step:hover .step-icon { background: #dceaff; }

.scenarios-section, .faq-section { background: #edf4fd; }
.scenario-feature { color: var(--ink); background: #fff; box-shadow: 0 30px 75px rgba(34,72,121,.1); }
.scenario-copy .kicker { color: #3478d2; }
.scenario-copy > p:not(.kicker) { color: #667a96; }
.scenario-flow { border-color: #dce7f5; }
.scenario-flow li { color: #465f80; }
.scenario-flow b { color: #3478d2; }
.text-link, .scenario-card a { color: #2c6ed0; }
.text-link { border-color: rgba(44,110,208,.35); }
.scenario-card { border-top-color: #cbdaf0; }
.scenario-card-photo { height: clamp(150px, 16vw, 205px); margin: 0 0 21px; overflow: hidden; border-radius: 24px 24px 48px 24px; background: #e6edf6; }
.scenario-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.scenario-card:hover .scenario-card-photo img { transform: scale(1.035); }
.scenario-card a { border-color: rgba(44,110,208,.25); }
.scenario-card:hover { border-color: #a9c5e8; }
.product-number { color: #94a8c2; }
.product-tags span { color: #547094; }

.showcase-section { color: var(--ink); background: #f5f8fd; }
.showcase-section .kicker, .showcase-section .section-heading h2 em { color: #3478d2; }
.showcase-section .heading-copy { color: #667a96; }
.showcase-section::before { border-color: rgba(65,125,200,.12); box-shadow: 0 0 0 56px rgba(65,125,200,.025), 0 0 0 112px rgba(65,125,200,.018); }
.showcase-tab { color: #536985; }
.showcase-tab > span { color: #91a2ba; }
.showcase-tab small { color: #8394ac; }
.showcase-tab:hover, .showcase-tab.is-active {
  color: #244a79;
  background: #eaf2fe;
  border-color: rgba(63,123,200,.17);
}
.showcase-tab.is-active > span { color: #3478d2; }
.showcase-screen { border-color: rgba(97,139,192,.2); box-shadow: 0 28px 70px rgba(37,67,107,.13); }
.capabilities-section::after { background: radial-gradient(circle, rgba(99,159,229,.09), transparent 70%); }
.filter-button { color: #60748e; border-color: #dce7f5; }
.filter-button:hover, .filter-button.is-active { color: #fff; background: #2f73d3; border-color: #2f73d3; }
.cap-card::before { background: radial-gradient(circle, rgba(84,149,228,.16), transparent 70%); }
.cap-card small { color: #2c6ed0; background: #edf4ff; }
.cap-card h3::before { background: #86afe0; }
.cap-card:hover h3 { color: #2c6ed0; }
.cap-card:hover h3::before { background: #2c6ed0; }
.integration-letter { color: #2c6ed0; background: #edf4ff; }
.integration-card:hover { border-color: #b5cbea; }
.deployment-note { background: linear-gradient(115deg, #254f84, #1d3d68); }
.deployment-mark { color: #c3dcff; background: rgba(139,184,241,.12); border-color: rgba(164,201,245,.34); }
.deployment-note .kicker { color: #bfd9ff; }
.deployment-note p:not(.kicker) { color: #d2e0f2; }
.faq-list, .faq-item { border-color: #d2dfef; }
.faq-question i { background: rgba(47,115,211,.08); }
.faq-item.is-open .faq-question i { color: #fff; background: #2f73d3; }
.faq-answer p { color: #637894; }
.contact-section {
  color: var(--ink);
  background: radial-gradient(ellipse at 72% 10%, rgba(120,174,242,.16), transparent 42%), linear-gradient(125deg, #f0f6ff, #eaf3ff);
}
.contact-orb { background: radial-gradient(circle, rgba(90,149,223,.16), transparent 67%); }
.contact-copy .kicker, .contact-copy h2 em { color: #3478d2; }
.contact-copy > p:not(.kicker) { color: #60748f; }
.contact-card { border: 1px solid rgba(78,125,184,.12); box-shadow: 0 18px 45px rgba(43,82,135,.1); }
.qr-frame { border-color: #dce7f5; }
.contact-card p { color: #73839a; }
.button:hover span, .text-link:hover span, .scenario-card a:hover span { color: inherit; }
.text-link:hover, .scenario-card a:hover { color: #1f5eb5; }
.brand:hover .brand-name strong { color: #2c6ed0; }
.primary-nav .nav-contact:hover { color: #fff; }
.menu-toggle { color: #305b8d; border-color: rgba(48,91,141,.25); }
.menu-toggle span { background: currentColor; }
.primary-nav.is-open { background: rgba(255,255,255,.98); border-color: #dce7f5; box-shadow: 0 18px 40px rgba(35,67,109,.14); }
.primary-nav a:hover { background: rgba(47,115,211,.06); }
.primary-nav .nav-contact { color: #fff; }
.primary-nav .nav-contact:hover { background: #215fb8; }

.floating-back-top {
  position: fixed;
  z-index: 90;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(20px, 4vh, 38px);
  display: grid;
  width: 60px;
  height: 60px;
  place-content: center;
  justify-items: center;
  gap: 1px;
  color: #fff;
  background: linear-gradient(145deg, #4388e2, #2868c6);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(39,94,164,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.92);
  transition: opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.floating-back-top svg { width: 21px; height: 21px; }
.floating-back-top span { font: 700 7px/1 Inter, sans-serif; letter-spacing: .12em; }
.floating-back-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.floating-back-top:hover { box-shadow: 0 16px 36px rgba(39,94,164,.34); transform: translateY(-3px) scale(1.03); }
.floating-back-top:focus-visible { outline: 3px solid #1e5eb2; outline-offset: 4px; }

@media (max-width: 760px) {
  .site-header { background: rgba(255,255,255,.88); }
  .hero-photo {
    background-image:
      linear-gradient(90deg, rgba(248,251,255,.97), rgba(248,251,255,.83)),
      linear-gradient(0deg, rgba(235,243,255,.85), transparent 58%),
      url("./assets/hero-field-editorial.jpg");
    background-position: 61% center;
  }
  .floating-back-top { right: 18px; bottom: 20px; width: 54px; height: 54px; }
  .scenario-card-photo { height: 205px; margin-bottom: 18px; border-radius: 20px 20px 38px 20px; }
}

/* Art direction refresh: a live meeting, open layouts and a sharper blue identity */
:root {
  --ink: #102b50;
  --muted: #5c708f;
  --paper: #f6f9ff;
  --line: #d9e5f5;
  --cyan-strong: #246bd1;
}

body { background: #fff; }
.site-header { background: rgba(255,255,255,.9); border-bottom-color: rgba(31,76,139,.1); }
.site-header.is-scrolled { background: rgba(255,255,255,.96); }
.brand-mark { color: #246bd1; }
.brand-name strong { color: #102b50; }
.primary-nav { color: #536984; }
.primary-nav .nav-contact { background: #246bd1; }
.primary-nav .nav-contact:hover { background: #1558b7; }

.hero {
  height: min(920px, 100svh);
  min-height: 760px;
  color: #102b50;
  background: #f7faff;
}
.hero-photo {
  background-image:
    linear-gradient(90deg, rgba(247,250,255,1) 0%, rgba(247,250,255,.98) 30%, rgba(247,250,255,.78) 43%, rgba(247,250,255,.26) 51%, rgba(247,250,255,0) 59%),
    linear-gradient(0deg, rgba(238,245,255,.92) 0%, rgba(238,245,255,.08) 24%, transparent 45%),
    url("./assets/remote-meeting-hero.jpg");
  background-position: center, center, center;
  background-size: cover;
  opacity: 1;
}
.hero-grain, .hero-aura { display: none; }
.hero-layout { grid-template-columns: minmax(0, 1fr); padding-top: 94px; padding-bottom: 84px; }
.hero-copy { max-width: 735px; }
.hero-product-lockup { color: #183a69; }
.hero-product-divider { background: #76a4e5; }
.hero-product-en { color: #7388a5; }
.eyebrow { color: #286dce; }
.eyebrow > span:first-child { background: #347de0; box-shadow: 0 0 0 5px rgba(52,125,224,.12); }
.hero h1 { max-width: 780px; color: #102b50; font-size: clamp(62px, 6.55vw, 86px); line-height: 1.02; letter-spacing: -.075em; }
.hero h1 em { color: #246bd1; }
.hero-lede { max-width: 600px; color: #536a88; font-size: 15px; }
.hero-proof { max-width: 665px; margin-top: 35px; border-top-color: rgba(30,76,139,.2); }
.hero-proof > div { border-color: rgba(30,76,139,.16); }
.hero-proof strong { color: #246bd1; font-size: 25px; }
.hero-proof span { color: #677d9b; }
.hero-visual { display: none; }
.hero-bottom { color: #778ba6; border-top-color: rgba(30,76,139,.18); }
.hero-bottom a { color: #415f87; }
.hero-bottom b { color: #246bd1; }

.value-section { background: #fff; }
.value-section::after { opacity: .45; background: radial-gradient(circle, rgba(91,151,235,.09), transparent 70%); }
.section-heading h2, .section-heading h2 em { color: #102b50; font-weight: 760; letter-spacing: -.065em; }
.section-heading h2 em { color: #246bd1; }
.kicker { color: #246bd1; }
.workflow { gap: clamp(18px, 3vw, 38px); }
.workflow::before { background: linear-gradient(90deg, #7eaae7, #d9e5f5 72%, transparent); }
.workflow-step { padding-inline: 0; }
.workflow-step::before { border-color: #fff; background: #246bd1; box-shadow: 0 0 0 1px rgba(36,107,209,.4); }
.step-icon { color: #246bd1; background: transparent; box-shadow: none; font-size: 34px; }
.workflow-step h3 { color: #15345f; font-size: 18px; letter-spacing: -.025em; }
.workflow-step p { color: #647994; }
.step-no { color: #92a9c9; }
.step-tag { color: #315b91; background: #edf4ff; }

.products-section { background: #f4f8ff; }
.product-stack { border-color: #d3e1f3; }
.product-row { position: relative; border-color: #d3e1f3; transition: background .28s ease, padding .28s ease; }
.product-row:hover { background: rgba(255,255,255,.7); }
.product-row-core { background: transparent; border-bottom-color: #b9cde8; }
.product-row-core:hover { background: rgba(255,255,255,.72); }
.product-row-core .product-main h3 { color: #164889; }
.product-tags span { color: #3e5f89; background: #e8f1ff; }
.product-note { color: #7789a3; }

.showcase-section {
  color: #fff;
  background: linear-gradient(128deg, #164a9b 0%, #2169c7 54%, #2b7de0 100%);
}
.showcase-section .kicker { color: #c6ddff; }
.showcase-section .section-heading h2, .showcase-section .section-heading h2 em { color: #fff; }
.showcase-section .section-heading h2 em { color: #c8e0ff; }
.showcase-section .heading-copy { color: rgba(238,246,255,.78); }
.showcase-section::before { border-color: rgba(255,255,255,.19); box-shadow: 0 0 0 56px rgba(255,255,255,.045), 0 0 0 112px rgba(255,255,255,.025); }
.showcase-tab { color: rgba(255,255,255,.78); border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.showcase-tab > span, .showcase-tab small { color: rgba(224,238,255,.68); }
.showcase-tab:hover, .showcase-tab.is-active { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.42); }
.showcase-tab.is-active > span { color: #fff; }
.showcase-screen { padding: 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 32px 90px rgba(8,37,86,.3); }
.showcase-screen img { border-radius: 8px; }
.showcase-screen figcaption { color: #6b7f9c; }
.showcase-screen .screen-toolbar { color: #526984; }

.scenarios-section { background: #fff; }
.scenarios-section .section-heading h2 em { color: #246bd1; }
.scenarios-section .section-heading h2,
.scenarios-section .section-heading h2 em { max-width: 620px; font-size: clamp(36px, 4vw, 52px); }
html[lang="en"] .scenarios-section .section-heading h2,
html[lang="en"] .scenarios-section .section-heading h2 em { font-size: clamp(34px, 3.25vw, 42px); }
.scenario-feature { grid-template-columns: 1.08fr .92fr; gap: clamp(34px, 6vw, 86px); min-height: 0; overflow: visible; color: #102b50; background: transparent; border-radius: 0; box-shadow: none; }
.scenario-image { min-height: 500px; overflow: hidden; border-radius: 160px 8px 8px 8px; }
.scenario-image::after { background: linear-gradient(0deg, rgba(10,35,67,.62), transparent 40%); }
.scenario-image img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.scenario-copy { padding: 8px 0; }
.scenario-copy .kicker { color: #246bd1; }
.scenario-copy h3 { color: #102b50; font-size: clamp(32px, 3.3vw, 43px); }
.scenario-copy > p:not(.kicker) { color: #5c708f; }
.scenario-flow { border-color: #dce7f5; }
.scenario-flow li { color: #405b7d; }
.scenario-flow b { color: #246bd1; }
.text-link, .scenario-card a { color: #246bd1; border-color: rgba(36,107,209,.36); }
.scenario-cards { gap: clamp(28px, 5vw, 72px); margin-top: 70px; }
.scenario-card { padding: 28px 0 0; border: 0; border-top: 1px solid #cddcf0; background: transparent; }
.scenario-card-photo { height: clamp(175px, 21vw, 270px); margin-bottom: 26px; overflow: hidden; border-radius: 0 110px 0 0; background: #e9f1fb; }
.scenario-card-photo img { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.scenario-card h3 { color: #15345f; font-size: 21px; }
.scenario-card p { color: #647994; font-size: 12px; }
.scenario-card:hover { border-color: #8aafe0; box-shadow: none; }
.scenario-card:hover img { transform: scale(1.045); }

.capabilities-section { background: #f4f8ff; }
.capabilities-section::after { background: radial-gradient(circle, rgba(68,133,222,.08), transparent 70%); }
.cap-grid { border-color: #d5e2f2; }
.cap-card { border-color: #d5e2f2; }
.cap-card > span { color: #7a91b1; }
.cap-card h3 { color: #143761; }
.cap-card p { color: #647994; }
.cap-card small { color: #286dce; background: #e8f1ff; }
.cap-card h3::before { background: #82a9dc; }
.cap-card:hover h3 { color: #246bd1; }
.cap-footnote { color: #788ba5; }

.integration-section { background: #fff; }
.integration-grid { gap: clamp(20px, 4vw, 56px); }
.integration-card { border-color: #d7e3f2; }
.integration-letter { color: #246bd1; background: #edf4ff; }
.integration-card h3 { color: #15345f; }
.integration-card p { color: #647994; }
.integration-card small { color: #7a8da7; }
.deployment-note { color: #17345d; background: #e9f2ff; border-left: 3px solid #246bd1; border-radius: 0; }
.deployment-mark { color: #246bd1; background: #fff; border-color: #c8dcf6; }
.deployment-note .kicker { color: #246bd1; }
.deployment-note p:not(.kicker) { color: #5f7491; }
.faq-section { background: #f4f8ff; }
.faq-list, .faq-item { border-color: #d2dfef; }
.faq-question > span { color: #246bd1; }
.faq-question b { color: #15345f; }
.faq-question i { color: #246bd1; background: transparent; }
.faq-item.is-open .faq-question i { color: #fff; background: #246bd1; }
.faq-answer p { color: #647994; }

.contact-section { background: linear-gradient(118deg, #153f83, #216bc9 62%, #2d80df); }
.contact-orb { background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); }
.contact-copy .kicker { color: #c9e1ff; }
.contact-copy h2 em { color: #c9e1ff; }
.contact-copy > p:not(.kicker) { color: rgba(238,246,255,.8); }
.contact-card { border: 0; border-radius: 20px 4px 20px 4px; box-shadow: 0 22px 58px rgba(8,37,86,.22); }
.qr-frame { border-color: #d9e5f4; }
.site-footer { background: #0e2850; }
.back-top, .floating-back-top { color: #fff; background: #246bd1; }
.floating-back-top { border-color: rgba(255,255,255,.7); box-shadow: 0 12px 30px rgba(28,87,164,.3); }

@media (min-width: 761px) and (max-width: 1050px) {
  .hero-layout { grid-template-columns: minmax(0,1fr); }
  .hero-copy { max-width: 660px; }
  .hero h1 { font-size: clamp(58px, 7.5vw, 76px); }
  .scenario-feature { gap: 36px; }
  .scenario-image { min-height: 420px; }
}

@media (max-width: 760px) {
  .site-header { background: rgba(255,255,255,.95); }
  .menu-toggle { color: #315b8d; border-color: rgba(48,91,141,.22); }
  .hero { height: auto; min-height: 0; padding: 70px 0 0; }
  .hero-photo {
    inset: auto 0 54px;
    height: 360px;
    background-image: linear-gradient(180deg, rgba(247,250,255,1) 0%, rgba(247,250,255,.55) 19%, rgba(247,250,255,.04) 47%, transparent 100%), url("./assets/remote-meeting-hero.jpg");
    background-position: center, 70% center;
    background-size: cover;
  }
  .hero-layout { padding: 54px 0 310px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(42px, 11vw, 54px); line-height: 1.04; letter-spacing: -.075em; }
  html[lang="en"] .hero h1 { font-size: clamp(42px, 10vw, 54px); line-height: 1.06; letter-spacing: -.06em; }
  .hero-lede { font-size: 14px; line-height: 1.8; }
  .hero-proof { margin-top: 28px; }
  .hero-proof > div { flex: 1; min-width: 0; padding-right: 9px; margin-right: 9px; }
  .hero-proof strong { font-size: 21px; }
  .hero-proof span { font-size: 9px; line-height: 1.4; }
  .hero-bottom { grid-template-columns: 1fr auto; min-height: 54px; letter-spacing: .1em; }
  .hero-bottom > span:nth-child(2) { display: none; }
  .workflow { gap: 0 20px; }
  .workflow-step { min-height: 220px; }
  .scenario-feature { grid-template-columns: 1fr; gap: 27px; }
  .scenario-image { min-height: 300px; border-radius: 100px 6px 6px 6px; }
  .scenario-copy { padding: 0; }
  .scenario-cards { margin-top: 45px; }
  .scenario-card-photo { height: 190px; border-radius: 0 76px 0 0; }
  .showcase-layout { grid-template-columns: 1fr; }
  .showcase-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  .showcase-tab { padding-inline: 2px; }
  .showcase-screen { margin-top: 18px; }
  .deployment-note { grid-template-columns: 44px minmax(0,1fr); gap: 14px; }
  .deployment-note .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 390px) {
  .hero { padding-top: 70px; }
  .hero-layout { padding-top: 42px; padding-bottom: 300px; }
  .hero h1 { font-size: 42px; }
  html[lang="en"] .hero h1 { font-size: 40px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { min-height: 46px; padding-inline: 15px; font-size: 12px; }
  .hero-proof > div { padding-right: 6px; margin-right: 6px; }
  .hero-proof span { font-size: 8px; }
  .scenario-cards { grid-template-columns: 1fr; }
}

/* Typography refresh: calm system typography with larger, clearer reading sizes. */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
  font-family: var(--font-system);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}

.site-header { min-height: 78px; }
.brand-name strong { font-size: 16px; letter-spacing: .08em; }
.brand-name small { font: 9px/1.2 var(--font-system); letter-spacing: .2em; }
.primary-nav { gap: clamp(15px, 1.8vw, 24px); font-size: 14px; letter-spacing: 0; }
.primary-nav .nav-contact { font-size: 14px; }
.language-option { font-family: var(--font-system); font-size: 13px; }

.eyebrow { font-size: 12px; letter-spacing: .1em; }
.hero h1 { line-height: 1.06; letter-spacing: -.065em; font-weight: 720; }
.hero-lede { max-width: 640px; font-size: 17px; line-height: 1.75; }
.hero-proof strong { font-size: 27px; }
.hero-proof span { font-size: 13px; line-height: 1.5; }
.hero-bottom { font-size: 11px; letter-spacing: .08em; }

.section-heading h2,
.section-heading h2 em { font-size: clamp(44px, 5vw, 68px); line-height: 1.1; letter-spacing: -.06em; font-weight: 700; }
.heading-copy { max-width: 580px; font-size: 17px; line-height: 1.8; letter-spacing: -.01em; }
.kicker { margin-bottom: 20px; font-size: 12px; letter-spacing: .12em; }
.button { font-size: 14px; letter-spacing: -.01em; }

.workflow-step h3 { font-size: 20px; }
.workflow-step p { min-height: 0; font-size: 15px; line-height: 1.8; }
.step-no { font: 12px/1.3 var(--font-system); }
.step-tag { font-size: 12px; line-height: 1.45; }

.product-number { font: 14px/1.5 var(--font-system); }
.product-type { font: 11px/1.5 var(--font-system); letter-spacing: .12em; }
.product-main h3 { font-size: 20px; }
.product-main p { font-size: 15px; line-height: 1.8; }
.product-tags span { font-size: 12px; line-height: 1.4; }
.product-note { font-size: 13px; line-height: 1.7; }

.showcase-tab > span { font: 12px/1.4 var(--font-system); }
.showcase-tab b { font-size: 15px; }
.showcase-tab small { font-size: 13px; line-height: 1.5; }
.showcase-screen figcaption { font-size: 12px; }
.showcase-screen .screen-toolbar { font-size: 12px; }

.scenarios-section .section-heading h2,
.scenarios-section .section-heading h2 em { font-size: clamp(40px, 4.3vw, 58px); line-height: 1.12; }
html[lang="en"] .scenarios-section .section-heading h2,
html[lang="en"] .scenarios-section .section-heading h2 em { font-size: clamp(38px, 3.5vw, 48px); }
.scenario-image > span { font-size: 13px; }
.scenario-copy h3 { font-size: clamp(34px, 3.3vw, 46px); line-height: 1.15; }
.scenario-copy > p:not(.kicker) { font-size: 16px; line-height: 1.8; }
.scenario-flow li { font-size: 14px; line-height: 1.65; }
.scenario-flow b { font: 12px/1.5 var(--font-system); }
.text-link, .scenario-card a { font-size: 14px; }
.card-index { font: 11px/1.4 var(--font-system); letter-spacing: .1em; }
.scenario-card h3 { font-size: 23px; line-height: 1.3; }
.scenario-card p { font-size: 15px; line-height: 1.8; }

.filter-button { min-height: 40px; font-size: 13px; }
.cap-card > span { font: 10px/1.5 var(--font-system); letter-spacing: .06em; }
.cap-card h3 { font-size: 20px; }
.cap-card p { min-height: 0; font-size: 15px; line-height: 1.75; }
.cap-card small { font-size: 12px; }
.cap-footnote { font-size: 13px; line-height: 1.7; }

.integration-card h3 { font-size: 19px; }
.integration-card p { font-size: 15px; line-height: 1.8; }
.integration-card small { font-size: 12px; line-height: 1.5; }
.deployment-note h3 { font-size: 22px; line-height: 1.35; }
.deployment-note p:not(.kicker) { font-size: 15px; line-height: 1.8; }

.faq-layout .section-heading h2 { font-size: clamp(42px, 4.2vw, 58px); }
.faq-layout .heading-copy { margin-top: 20px; font-size: 16px; }
.faq-question > span { font: 12px/1 var(--font-system); }
.faq-question b { font-size: 16px; line-height: 1.5; }
.faq-answer p, .faq-answer-inner p { font-size: 15px; line-height: 1.8; }

.contact-copy h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.12; }
.contact-copy > p:not(.kicker) { font-size: 16px; line-height: 1.8; }
.contact-card b { font-size: 15px; }
.contact-card p { font-size: 12px; }
.footer-inner > p { font-size: 12px; line-height: 1.7; }
.back-top { font-size: 13px; }

@media (min-width: 761px) and (max-width: 1050px) {
  .primary-nav { gap: 12px; font-size: 13px; }
  .section-heading h2, .section-heading h2 em { font-size: clamp(42px, 5vw, 58px); }
  .hero-lede { font-size: 16px; }
}

@media (max-width: 760px) {
  .site-header { min-height: 70px; }
  .brand-name strong { font-size: 15px; }
  .brand-name small { font-size: 8px; }
  .primary-nav { font-size: 16px; }
  .primary-nav .nav-contact { font-size: 15px; }
  .language-option { font-size: 13px; }
  .eyebrow { font-size: 11px; line-height: 1.5; }
  .hero h1 { font-size: clamp(46px, 11vw, 56px); line-height: 1.08; letter-spacing: -.07em; }
  html[lang="en"] .hero h1 { font-size: clamp(40px, 9.5vw, 52px); line-height: 1.08; }
  .hero-lede { font-size: 16px; line-height: 1.75; }
  .hero-proof { gap: 0; }
  .hero-proof strong { font-size: 22px; }
  .hero-proof span { font-size: 11px; line-height: 1.5; }
  .hero-bottom { font-size: 10px; }
  .section-heading h2, .section-heading h2 em { font-size: clamp(38px, 9vw, 48px); line-height: 1.12; }
  .heading-copy { font-size: 16px; line-height: 1.8; }
  .kicker { font-size: 11px; }
  .button { min-height: 48px; padding-inline: 16px; font-size: 14px; }
  .workflow-step { min-height: 0; }
  .workflow-step h3 { font-size: 18px; }
  .workflow-step p { min-height: 0; font-size: 14px; line-height: 1.75; }
  .step-tag { font-size: 11px; }
  .product-main h3 { font-size: 18px; }
  .product-main p { font-size: 14px; }
  .product-tags span { font-size: 11px; }
  .product-note { font-size: 12px; }
  .showcase-tab b { font-size: 14px; }
  .showcase-tab small { font-size: 12px; }
  .scenarios-section .section-heading h2,
  .scenarios-section .section-heading h2 em { font-size: clamp(36px, 8vw, 44px); }
  html[lang="en"] .scenarios-section .section-heading h2,
  html[lang="en"] .scenarios-section .section-heading h2 em { font-size: clamp(32px, 7vw, 40px); }
  .scenario-copy h3 { font-size: clamp(31px, 8vw, 38px); }
  .scenario-copy > p:not(.kicker) { font-size: 15px; }
  .scenario-flow li { font-size: 14px; }
  .scenario-card h3 { font-size: 21px; }
  .scenario-card p { font-size: 14px; }
  .scenario-card a { font-size: 13px; }
  .filter-button { min-height: 40px; padding-inline: 11px; font-size: 12px; }
  .cap-card h3 { font-size: 18px; }
  .cap-card p { min-height: 0; font-size: 14px; }
  .cap-card > span { font-size: 9px; }
  .cap-card small { font-size: 11px; }
  .cap-footnote { font-size: 12px; }
  .integration-card h3 { font-size: 18px; }
  .integration-card p { font-size: 14px; }
  .integration-card small { font-size: 12px; }
  .deployment-note h3 { font-size: 19px; }
  .deployment-note p:not(.kicker) { font-size: 14px; }
  .faq-layout .section-heading h2 { font-size: 42px; }
  .faq-layout .heading-copy { font-size: 15px; }
  .faq-question b { font-size: 15px; }
  .faq-answer p, .faq-answer-inner p { font-size: 14px; }
  .contact-copy h2 { font-size: clamp(38px, 9vw, 50px); }
  .contact-copy > p:not(.kicker) { font-size: 15px; }
  .footer-inner > p { font-size: 11px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 42px; }
  html[lang="en"] .hero h1 { font-size: 38px; }
  .hero-actions .button { font-size: 13px; }
  .hero-proof span { font-size: 10px; }
  .section-heading h2, .section-heading h2 em { font-size: 36px; }
}

/* Weight balance: keep headings confident while letting body copy breathe. */
.brand-name strong { font-weight: 600; }
.primary-nav { font-weight: 500; }
.primary-nav .nav-contact,
.button { font-weight: 600; }
.eyebrow,
.kicker { font-weight: 600; }
.hero h1,
.section-heading h2,
.section-heading h2 em,
.faq-layout .section-heading h2,
.contact-copy h2 { font-weight: 620; }
.hero-product-cn { font-weight: 650; }
.hero-proof strong { font-weight: 600; }
.workflow-step h3,
.product-main h3,
.scenario-copy h3,
.scenario-card h3,
.cap-card h3,
.integration-card h3,
.deployment-note h3 { font-weight: 600; }
.showcase-tab b,
.faq-question b,
.contact-card b { font-weight: 600; }
.text-link,
.scenario-card a { font-weight: 600; }
.filter-button { font-weight: 500; }

/* Capability catalog links and secondary product pages. */
.cap-card-link { display: flex; min-height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.cap-card-link:focus-visible { border-radius: 8px; outline: 3px solid #397fe0; outline-offset: 5px; }
.cap-card-link > span:first-child { color: #7a91b1; font: 10px/1.5 var(--font-system); letter-spacing: .06em; }
.cap-card-link h3 { margin-bottom: 10px; }
.cap-card-link p { margin-bottom: 17px; }
.cap-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.cap-card-bottom small { flex: none; }
.cap-card-action { display: inline-flex; align-items: center; gap: 5px; color: #2c6ed0; font-size: 13px; font-weight: 600; white-space: nowrap; transition: gap .25s ease; }
.cap-card-action b { font-size: 15px; font-weight: 500; }
.cap-card:hover .cap-card-action { gap: 9px; }

.detail-page { color: var(--ink); background: #fff; }
.capability-page { overflow: clip; }
.cap-detail-hero { position: relative; overflow: hidden; padding: 116px 0 0; background: radial-gradient(ellipse at 78% 30%, rgba(93,153,231,.15), transparent 38%), linear-gradient(145deg, #f7faff 0%, #edf4ff 100%); }
.cap-detail-hero::before { position: absolute; top: -225px; right: -120px; width: 680px; height: 680px; border: 1px solid rgba(73,130,205,.08); border-radius: 50%; box-shadow: 0 0 0 42px rgba(73,130,205,.025), 0 0 0 100px rgba(73,130,205,.02); content: ""; pointer-events: none; }
.cap-breadcrumb { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #8194ad; font-size: 13px; }
.cap-breadcrumb a { color: #647b99; text-decoration: none; transition: color .2s ease; }
.cap-breadcrumb a:hover { color: #246bd1; }
.cap-detail-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(42px, 7vw, 100px); min-height: 500px; padding: 34px 0 28px; }
.cap-detail-copy { position: relative; z-index: 2; max-width: 690px; }
.cap-detail-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #427cc7; font-size: 12px; font-weight: 650; letter-spacing: .13em; }
.cap-detail-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #3980df; box-shadow: 0 0 0 5px rgba(57,128,223,.12); }
.cap-detail-copy h1 { margin: 0 0 17px; color: #12325c; font-size: clamp(40px, 5vw, 62px); line-height: 1.05; font-weight: 700; letter-spacing: -.055em; }
.cap-detail-headline { max-width: 700px; margin: 0 0 18px; color: #2c6ed0; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; font-weight: 620; letter-spacing: -.045em; }
.cap-detail-lead { max-width: 650px; margin: 0; color: #5e7390; font-size: 17px; line-height: 1.85; }
.cap-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cap-detail-hero-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; border-top: 1px solid rgba(75,121,182,.18); color: #8194ad; font-size: 11px; letter-spacing: .08em; }
.cap-detail-hero-foot > span:first-child { color: #6682a7; font-weight: 600; }
.cap-detail-hero-foot a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(63,119,186,.22); border-radius: 50%; color: #2b70d0; font-size: 18px; text-decoration: none; }
.cap-detail-art { position: relative; width: min(100%, 500px); aspect-ratio: 1.06; justify-self: center; isolation: isolate; }
.cap-detail-art::before { position: absolute; inset: 12%; border-radius: 48% 52% 58% 42% / 50% 42% 58% 50%; background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,.94), rgba(228,239,255,.62) 50%, rgba(194,218,249,.2) 76%, transparent); filter: blur(1px); content: ""; animation: cap-art-breathe 8s ease-in-out infinite alternate; }
.cap-art-orbit { position: absolute; top: 50%; left: 50%; z-index: -1; border: 1px solid rgba(58,117,190,.16); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.cap-art-orbit-one { width: 88%; height: 55%; }
.cap-art-orbit-two { width: 68%; height: 90%; transform: translate(-50%, -50%) rotate(31deg); }
.cap-art-core { position: absolute; top: 50%; left: 50%; display: flex; width: 184px; height: 184px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(61,123,199,.2); border-radius: 50%; background: rgba(255,255,255,.77); box-shadow: 0 24px 70px rgba(54,103,165,.14), inset 0 0 0 10px rgba(244,248,255,.8); transform: translate(-50%, -50%); backdrop-filter: blur(12px); }
.cap-art-core > span { color: #7690b1; font-size: 8px; font-weight: 650; letter-spacing: .17em; }
.cap-art-core strong { margin: 2px 0 0; color: #2c6ed0; font-size: 78px; line-height: 1; font-weight: 650; letter-spacing: -.08em; }
.cap-art-core small { color: #91a2b9; font-size: 9px; letter-spacing: .2em; }
.cap-art-node { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(88,130,183,.13); border-radius: 999px; color: #516e92; background: rgba(255,255,255,.84); box-shadow: 0 12px 32px rgba(45,82,129,.09); font-size: 10px; font-weight: 600; letter-spacing: .08em; backdrop-filter: blur(8px); animation: cap-node-float 5s ease-in-out infinite alternate; }
.cap-art-node i { width: 7px; height: 7px; border-radius: 50%; background: #3d82da; box-shadow: 0 0 0 4px rgba(61,130,218,.1); }
.cap-art-node-one { top: 16%; right: 7%; }
.cap-art-node-two { right: 1%; bottom: 26%; animation-delay: -2s; }
.cap-art-node-three { bottom: 12%; left: 10%; animation-delay: -3.5s; }
.cap-art-spark { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(50,119,207,.55); border-radius: 50%; box-shadow: 0 0 0 6px rgba(50,119,207,.08); }
.cap-art-spark-one { top: 23%; left: 18%; }
.cap-art-spark-two { right: 20%; bottom: 13%; width: 5px; height: 5px; }
@keyframes cap-art-breathe { from { transform: rotate(-8deg) scale(.94); } to { transform: rotate(7deg) scale(1.05); } }
@keyframes cap-node-float { from { translate: 0 0; } to { translate: 0 -7px; } }

.cap-detail-overview { background: #fff; }
.cap-detail-section-head { max-width: 860px; margin-bottom: 38px; }
.cap-detail-section-head .kicker { margin-bottom: 14px; color: #4380cd; }
.cap-detail-section-head h2,
.cap-detail-related-head h2 { margin: 0; color: #17365f; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.12; font-weight: 650; letter-spacing: -.055em; }
.cap-detail-overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); align-items: start; gap: clamp(34px, 7vw, 96px); }
.cap-detail-overview-copy { margin: 0 0 18px; color: #536b89; font-size: 18px; line-height: 1.85; }
.cap-detail-overview-copy.secondary { color: #7387a1; font-size: 15px; }
.cap-detail-purpose { padding: 26px 28px 27px; border-radius: 28px 8px 28px 8px; background: #f0f6ff; }
.cap-detail-purpose > span { color: #6282ac; font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.cap-detail-purpose h3 { margin: 15px 0 8px; color: #244b7d; font-size: 22px; line-height: 1.4; font-weight: 620; }
.cap-detail-purpose p { margin: 0; color: #647b99; font-size: 14px; line-height: 1.75; }
.cap-detail-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 58px; border-top: 1px solid #dce7f5; }
.cap-detail-point { padding: 23px 0 0; }
.cap-detail-point-number { color: #4380cd; font-size: 12px; font-weight: 650; letter-spacing: .1em; }
.cap-detail-point h3 { margin: 17px 0 8px; color: #1b3a63; font-size: 20px; font-weight: 620; }
.cap-detail-point p { max-width: 360px; margin: 0; color: #6b809c; font-size: 15px; line-height: 1.75; }

.cap-detail-use { position: relative; overflow: hidden; background: linear-gradient(125deg, #f3f7fd, #eaf2fd); }
.cap-detail-use::after { position: absolute; right: -160px; bottom: -370px; width: 640px; height: 640px; border: 1px solid rgba(75,130,203,.12); border-radius: 50%; box-shadow: 0 0 0 48px rgba(75,130,203,.025), 0 0 0 106px rgba(75,130,203,.018); content: ""; pointer-events: none; }
.cap-detail-use-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: center; gap: clamp(48px, 9vw, 130px); }
.cap-detail-use-main .kicker { margin-bottom: 16px; color: #4380cd; }
.cap-detail-use-main h2 { max-width: 700px; margin: 0 0 18px; color: #17365f; font-size: clamp(34px, 4.1vw, 54px); line-height: 1.13; font-weight: 650; letter-spacing: -.055em; }
.cap-detail-use-intro { max-width: 670px; margin: 0; color: #657c9a; font-size: 16px; line-height: 1.8; }
.cap-detail-steps { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.cap-detail-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 15px 0; border-top: 1px solid rgba(90,129,177,.2); }
.cap-detail-step-number { color: #3e7dcc; font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.cap-detail-steps p { margin: 0; color: #385879; font-size: 15px; line-height: 1.65; }
.cap-detail-use-note { position: relative; padding: 34px 33px 32px; border-radius: 46px 12px 46px 12px; color: #fff; background: linear-gradient(145deg, #2e70c8, #174b91); box-shadow: 0 25px 65px rgba(37,87,150,.2); }
.cap-detail-note-index { color: #bdd8fc; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.cap-detail-note-mark { display: grid; width: 48px; height: 48px; place-items: center; margin: 25px 0 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; font-size: 22px; }
.cap-detail-use-note h3 { margin: 0 0 12px; font-size: 25px; line-height: 1.3; font-weight: 620; letter-spacing: -.03em; }
.cap-detail-use-note p { margin: 0; color: #d8e8fc; font-size: 15px; line-height: 1.8; }

.cap-detail-integration { background: #fff; }
.cap-detail-section-copy { max-width: 740px; margin: 18px 0 0; color: #667c98; font-size: 16px; line-height: 1.8; }
.cap-detail-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; border-top: 1px solid #dce7f5; }
.cap-detail-method { padding: 22px 12px 12px 0; }
.cap-detail-method h3 { margin: 0 0 9px; color: #244b7d; font-size: 19px; font-weight: 620; }
.cap-detail-method p { margin: 0; color: #6a809b; font-size: 14px; line-height: 1.75; }
.cap-detail-scope { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; margin-top: 34px; padding: 23px 25px; border: 1px solid #dce7f5; border-radius: 24px 8px 24px 8px; background: #f7faff; }
.cap-detail-scope-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #2b70d0; background: #e7f0ff; font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.cap-detail-scope strong { color: #315981; font-size: 12px; letter-spacing: .08em; }
.cap-detail-scope p { margin: 6px 0 0; color: #687f9b; font-size: 14px; line-height: 1.75; }

.cap-detail-related { background: #f6f9fe; }
.cap-detail-related-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.cap-detail-related-head .kicker { margin-bottom: 13px; color: #4380cd; }
.cap-detail-related-head h2 { font-size: clamp(34px, 4vw, 52px); }
.cap-detail-related-head .text-link { flex: none; margin-bottom: 7px; }
.cap-detail-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cap-detail-related-card { display: flex; min-height: 210px; flex-direction: column; padding: 23px 22px; border: 1px solid #dce7f5; border-radius: 24px 8px 24px 8px; color: inherit; background: rgba(255,255,255,.7); text-decoration: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.cap-detail-related-card:hover { transform: translateY(-5px); border-color: #a9c8ef; box-shadow: 0 16px 40px rgba(45,83,135,.1); }
.cap-detail-related-card:focus-visible { outline: 3px solid #397fe0; outline-offset: 3px; }
.cap-detail-related-index { color: #8499b5; font-size: 9px; font-weight: 600; letter-spacing: .08em; }
.cap-detail-related-card h3 { margin: 20px 0 8px; color: #214775; font-size: 20px; font-weight: 620; }
.cap-detail-related-card p { margin: 0 0 18px; color: #6a809b; font-size: 13px; line-height: 1.7; }
.cap-detail-related-action { display: inline-flex; gap: 5px; align-items: center; margin-top: auto; color: #2c6ed0; font-size: 12px; font-weight: 600; }
.cap-detail-contact { color: #fff; background: radial-gradient(ellipse at 72% 20%, rgba(142,191,250,.26), transparent 43%), linear-gradient(120deg, #1d4d87, #17365f); }
.cap-detail-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.cap-detail-contact .kicker { color: #b9d5fa; }
.cap-detail-contact h2 { margin: 0; color: #fff; font-size: clamp(36px, 4.3vw, 58px); line-height: 1.15; font-weight: 650; letter-spacing: -.05em; }
.cap-detail-contact h2 em { color: #a9ceff; font-style: normal; }
.cap-detail-contact p:not(.kicker) { max-width: 670px; margin: 18px 0 0; color: #d0e0f5; font-size: 15px; line-height: 1.8; }
.cap-detail-contact .button { flex: none; }
.cap-detail-footer { padding: 24px 0; background: #102c50; }
.cap-detail-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.cap-detail-footer .brand { color: #fff; }
.cap-detail-footer .brand-name small { color: #adc2df; }
.cap-detail-footer-inner > p { max-width: 620px; margin: 0 auto 0 0; color: #b4c6df; font-size: 11px; line-height: 1.6; }
.cap-detail-footer .back-top { color: #c5dcfc; }

@media (max-width: 900px) {
  .cap-detail-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr); gap: 28px; min-height: 450px; }
  .cap-detail-art { width: min(100%, 400px); }
  .cap-art-core { width: 150px; height: 150px; }
  .cap-art-core strong { font-size: 65px; }
  .cap-detail-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 34px; }
  .cap-detail-use-grid { gap: 42px; }
}

@media (max-width: 760px) {
  .cap-detail-hero { padding-top: 100px; }
  .cap-detail-hero-grid { grid-template-columns: 1fr; gap: 12px; padding-top: 35px; }
  .cap-detail-copy h1 { font-size: clamp(38px, 10vw, 54px); }
  .cap-detail-headline { font-size: clamp(25px, 6vw, 34px); }
  .cap-detail-art { width: min(82vw, 390px); margin: -8px auto -12px; }
  .cap-detail-overview-grid,
  .cap-detail-use-grid { grid-template-columns: 1fr; }
  .cap-detail-points { gap: 21px; }
  .cap-detail-use-note { max-width: 560px; }
  .cap-detail-methods { grid-template-columns: 1fr; gap: 0; }
  .cap-detail-method { padding: 19px 0; border-top: 1px solid #dce7f5; }
  .cap-detail-related-grid { grid-template-columns: 1fr; }
  .cap-detail-related-card { min-height: 180px; }
  .cap-detail-contact-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .cap-breadcrumb { gap: 8px; font-size: 11px; }
  .cap-detail-hero-grid { min-height: 0; padding-bottom: 10px; }
  .cap-detail-lead { font-size: 15px; }
  .cap-detail-hero-foot { font-size: 9px; }
  .cap-detail-points { grid-template-columns: 1fr; gap: 0; margin-top: 38px; }
  .cap-detail-point { padding: 18px 0; border-top: 1px solid #dce7f5; }
  .cap-detail-point h3 { margin: 10px 0 5px; }
  .cap-detail-overview-copy { font-size: 16px; }
  .cap-detail-purpose { padding: 22px; }
  .cap-detail-related-head { align-items: flex-start; flex-direction: column; }
  .cap-detail-related-head .text-link { margin: 0; }
  .cap-detail-footer-inner { align-items: flex-start; flex-direction: column; }
  .cap-detail-footer-inner > p { margin: 0; }
  .cap-card-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-detail-art::before, .cap-art-node { animation: none; }
}

/* Header brand: give the company name enough presence at a glance. */
.site-header .brand { gap: 12px; }
.site-header .brand-mark { width: 82px; height: 46px; }
.site-header .brand-name { gap: 4px; }
.site-header .brand-name strong {
  color: #102b50;
  font-size: 21px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: .07em;
}
.site-header .brand-name small {
  color: #60799b;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .18em;
}

@media (max-width: 760px) {
  .site-header .brand-mark { width: 66px; height: 36px; }
  .site-header .brand-name strong { font-size: 18px; }
  .site-header .brand-name small { font-size: 9px; }
}

@media (max-width: 390px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { width: 48px; height: 27px; }
  .site-header .brand-name strong { font-size: 16px; }
  .site-header .brand-name small { display: none; }
}

/* Selected conference mark, sized to align with the adjacent wordmark. */
.brand-mark { display: grid; flex: none; place-items: center; overflow: visible; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-footer .footer-brand .brand-mark,
.cap-detail-footer .footer-brand .brand-mark { width: 70px; height: 38px; border-radius: 0; }
.site-footer .brand-mark img,
.cap-detail-footer .brand-mark img { filter: brightness(0) invert(1); }

/* Desktop navigation: retain the active underline without a hover tile. */
@media (min-width: 761px) {
  .primary-nav a:not(.nav-contact) {
    border-radius: 0;
    background: transparent;
    transition: color .22s ease;
  }
  .primary-nav a:not(.nav-contact)::after {
    height: 2px;
    border-radius: 2px;
    background: #2f73d3;
    transform-origin: center;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  }
  .primary-nav a:not(.nav-contact):hover,
  .primary-nav a:not(.nav-contact):focus-visible,
  .primary-nav a:not(.nav-contact)[aria-current="location"] { color: #246bd1; }
  .primary-nav a:not(.nav-contact):hover { background: transparent; }
  .primary-nav a:not(.nav-contact):hover::after { opacity: .75; transform: scaleX(.56); }
  .primary-nav a:not(.nav-contact)[aria-current="location"]::after,
  .primary-nav a:not(.nav-contact)[aria-current="location"]:hover::after { opacity: 1; transform: scaleX(1); }
  .primary-nav .nav-contact:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(36,107,209,.18); }
}


/* Meeting flow: clean, aligned numbered steps without a timeline axis. */
.workflow {
  gap: clamp(24px, 4vw, 56px);
  padding-top: 0;
}
.workflow::before { display: none; }
.workflow-step {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.workflow-step::before { display: none; }
.workflow-step:hover { transform: none; box-shadow: none; }
.step-no {
  position: static;
  display: block;
  margin: 0 0 28px;
  color: #246bd1;
  font: 700 30px/1 Inter, var(--font-system);
  letter-spacing: -.055em;
}
.step-icon { display: none; }
.workflow-step h3 {
  margin: 0 0 12px;
  color: #15345f;
  font-size: 20px;
  letter-spacing: -.025em;
}
.workflow-step p {
  min-height: 0;
  margin: 0 0 20px;
  color: #647994;
  font-size: 15px;
  line-height: 1.8;
}
.step-tag { justify-self: start; }

@media (max-width: 760px) {
  .workflow { gap: 30px 24px; }
  .workflow-step { min-height: 0; padding: 0; border: 0; }
  .step-no { margin-bottom: 20px; font-size: 26px; }
  .workflow-step p { margin-bottom: 16px; }
}

/* Footer contrast and clear navigation actions. */
.site-footer .footer-brand .brand-mark,
.cap-detail-footer .footer-brand .brand-mark { color: #cfe2ff; }
.site-footer .footer-brand .brand-name strong,
.site-footer .footer-brand:hover .brand-name strong,
.cap-detail-footer .footer-brand .brand-name strong,
.cap-detail-footer .footer-brand:hover .brand-name strong { color: #fff; }
.site-footer .footer-brand .brand-name small,
.cap-detail-footer .footer-brand .brand-name small { color: #b9cdec; }
.site-footer .back-top,
.cap-detail-footer .back-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  color: #c8dcf7;
  background: transparent;
  text-decoration: none;
  user-select: none;
  transition: color .2s ease;
}
.site-footer .back-top:hover,
.cap-detail-footer .back-top:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .back-top:focus-visible,
.cap-detail-footer .back-top:focus-visible { outline: 2px solid #c8dcf7; outline-offset: 5px; }
.primary-nav .nav-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
  user-select: none;
}
.primary-nav .nav-contact span { margin-left: 0; color: inherit; }
.primary-nav .nav-contact span[aria-hidden="true"] { font-size: 18px; line-height: 1; }
.primary-nav .nav-contact:hover,
.primary-nav .nav-contact:focus-visible { color: #fff; }

/* Contact Lead Form & Captcha Enhancements */
.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(380px, 1fr);
  align-items: start;
  gap: 52px;
}
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.contact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.contact-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1765c1;
  background: #e7f2ff;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.contact-form-panel {
  position: relative;
}
.lead-form {
  background: rgba(255, 255, 255, 0.97);
  color: #132742;
  border-radius: 20px 4px 20px 4px;
  padding: 32px 30px;
  box-shadow: 0 24px 60px rgba(7, 34, 78, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.65);
}
.lead-form-header {
  margin-bottom: 22px;
}
.lead-form-header h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: #12335f;
  letter-spacing: -.03em;
}
.lead-form-header p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #617894;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-grid .form-field {
  margin-bottom: 0;
}
.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: #213c5f;
  display: flex;
  align-items: center;
  gap: 4px;
}
.req-star {
  color: #e03838;
  font-weight: 700;
  text-decoration: none;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  color: #122c4a;
  background: #f8fbff;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-sizing: border-box;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9cb1c9;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  background: #fff;
  border-color: #216bc9;
  box-shadow: 0 0 0 3px rgba(33, 107, 201, 0.16);
}
.custom-select-wrap {
  position: relative;
}
.custom-select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #486588;
  pointer-events: none;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 32px;
}
.form-field textarea {
  resize: vertical;
  min-height: 80px;
}
.captcha-field .captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.captcha-row input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.captcha-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  background: #0d2138;
  border: 1px solid #32557e;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, box-shadow .2s;
}
.captcha-badge:hover {
  border-color: #6fe2df;
  box-shadow: 0 0 0 2px rgba(111, 226, 223, 0.25);
}
.captcha-badge canvas {
  display: block;
  width: 112px;
  height: 40px;
}
.captcha-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  color: #9cb8d9;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.captcha-refresh-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.captcha-refresh-btn svg {
  display: block;
}
.form-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.submit-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}
.submit-btn .spinner {
  width: 16px;
  height: 16px;
  animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin {
  to { transform: rotate(360deg); }
}
.form-status {
  font-size: 13px;
  line-height: 1.5;
  padding: 0;
  border-radius: 6px;
  transition: all .2s ease;
}
.form-status:not(:empty) {
  padding: 11px 14px;
}
.form-status.is-success {
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
  color: #027a48;
}
.form-status.is-error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
}
.form-status.is-info {
  background: #eff8ff;
  border: 1px solid #b2ddff;
  color: #175cd3;
}
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: #f04438;
  background: #fffbfa;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ----------------------------------------------------
 * 丝滑性能优化：骨架屏微光 (Skeleton Shimmer) 与渐进淡入
 * ---------------------------------------------------- */
.skeleton-shimmer {
  position: relative;
  background: #0c2035 !important;
  overflow: hidden;
}
.skeleton-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(111, 226, 223, 0.16) 50%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeleton-wave 1.6s infinite ease-in-out;
  pointer-events: none;
}
.skeleton-shimmer.is-light {
  background: #eaf1f8 !important;
}
.skeleton-shimmer.is-light::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 35%,
    rgba(33, 107, 201, 0.1) 50%,
    rgba(255, 255, 255, 0.45) 65%,
    transparent 100%
  );
}
.skeleton-shimmer.is-loaded::before {
  display: none !important;
}
@keyframes skeleton-wave {
  100% { transform: translateX(100%); }
}

/* 图片平滑渐入，防止图片加载瞬间闪烁跳动 */
.skeleton-shimmer img {
  opacity: 0;
  transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.skeleton-shimmer img.is-loaded {
  opacity: 1 !important;
}

/* 视口外长内容区开启内容可见性优化，跳过首屏不可见渲染，大幅提升首屏加载帧率 */
.scenarios-section,
.products-section,
.capabilities-section,
.integration-section,
.faq-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 680px;
}

/* ----------------------------------------------------
 * 手机与移动端终端深度适配 (iOS/Android/平板触控优化)
 * ---------------------------------------------------- */
@media (max-width: 760px) {
  /* 防止 iOS Safari 在用户聚焦输入框时发生页面缩放抖动 */
  .lead-form input,
  .lead-form textarea,
  .lead-form select {
    font-size: 16px !important;
  }
  .shell {
    width: min(var(--shell), calc(100% - 36px));
  }
}

@media (max-width: 480px) {
  .shell {
    width: min(var(--shell), calc(100% - 28px));
  }
  .lead-form {
    padding: 22px 16px;
    border-radius: 16px;
  }
  .lead-form-header h3 {
    font-size: 19px;
  }
  .captcha-field .captcha-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .captcha-field .captcha-row input {
    width: 100%;
    flex: none;
  }
  .captcha-badge {
    width: 100%;
    justify-content: space-between;
  }
  .captcha-badge canvas {
    flex: 1;
    width: auto;
    max-width: calc(100% - 42px);
  }
  .contact-card {
    padding: 14px;
    border-radius: 16px;
  }
  .qr-frame {
    width: 90px;
  }
}

/* A meeting connection, made visible without turning the hero into a dashboard. */
.hero-photo { filter: saturate(1.06) contrast(1.025); }
.hero-connection {
  position: absolute;
  z-index: 3;
  top: 53%;
  right: clamp(28px, 5.4vw, 92px);
  width: min(350px, 29vw);
  padding: 20px 22px 17px;
  color: #173760;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px 5px 24px 5px;
  box-shadow: 0 22px 58px rgba(27, 67, 121, .17), 0 2px 12px rgba(27, 67, 121, .06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: connection-breathe 6s ease-in-out infinite;
}
.connection-heading { display: flex; align-items: center; gap: 10px; color: #1c477b; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.connection-wave { display: inline-flex; align-items: center; gap: 2px; height: 15px; color: #2e78da; }
.connection-wave i { display: block; width: 2px; height: 5px; border-radius: 2px; background: currentColor; animation: connection-wave 1.1s ease-in-out infinite; }
.connection-wave i:nth-child(2) { height: 12px; animation-delay: .12s; }
.connection-wave i:nth-child(3) { height: 8px; animation-delay: .24s; }
.connection-participants { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 7px; margin-top: 18px; color: #536d8d; font-size: 11px; font-weight: 600; }
.connection-participants > span:last-child { text-align: right; }
.connection-link { position: relative; height: 2px; overflow: hidden; background: #dbe8f9; }
.connection-link i { position: absolute; top: -1px; left: -18px; width: 18px; height: 4px; border-radius: 4px; background: #3478d2; animation: connection-travel 2.4s ease-in-out infinite; }
.connection-shared { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #e3ebf6; color: #286dce; font-size: 11px; font-weight: 650; }
.connection-shared > span:last-child { margin-left: auto; font-size: 15px; font-weight: 400; }
.connection-viewfinder { position: relative; width: 17px; height: 12px; border: 1.5px solid #6fa0df; border-radius: 3px; }
.connection-viewfinder::before, .connection-viewfinder::after { position: absolute; content: ""; width: 4px; height: 4px; border-color: #2e78da; border-style: solid; }
.connection-viewfinder::before { top: -3px; left: -3px; border-width: 1.5px 0 0 1.5px; }
.connection-viewfinder::after { right: -3px; bottom: -3px; border-width: 0 1.5px 1.5px 0; }
@keyframes connection-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes connection-wave { 0%, 100% { transform: scaleY(.55); opacity: .72; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes connection-travel { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(62px); opacity: 0; } }

/* The core workflow reads like four editorial beats, not a timeline or a row of cards. */
.workflow { gap: clamp(24px, 4vw, 56px); }
.step-no { margin-bottom: 20px; color: #3b7cda; font-size: clamp(36px, 4.2vw, 48px); font-weight: 580; letter-spacing: -.075em; }
.workflow-step h3 { margin-bottom: 0; }
.workflow-step h3::after { display: block; width: 24px; height: 2px; margin-top: 15px; content: ""; background: #b8d0ef; transition: width .38s cubic-bezier(.2,.8,.2,1), background .3s ease; }
.workflow-step:hover h3::after, .workflow-step:focus-within h3::after { width: 58px; background: #2f73d3; }
.workflow-step p { margin-top: 12px; }
.step-tag { padding: 0; color: #376da9; background: transparent; border-radius: 0; font-size: 12px; letter-spacing: .01em; }

/* Capabilities are grouped by the work they support, with open editorial rows. */
.cap-filter { gap: 8px; margin-bottom: 30px; }
.filter-button { min-height: 38px; padding-inline: 15px; border-radius: 999px; font-size: 12px; transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease; }
.filter-button:hover { transform: translateY(-1px); }
.filter-button.is-active { color: #fff; background: #246bd1; border-color: #246bd1; box-shadow: 0 8px 20px rgba(36,107,209,.16); }
.cap-groups { border-top: 1px solid #d5e2f2; }
.cap-group { display: grid; grid-template-columns: minmax(235px, .65fr) minmax(0, 1.7fr); gap: clamp(30px, 5.6vw, 82px); padding: 33px 0 36px; border-bottom: 1px solid #d5e2f2; }
.cap-group[hidden] { display: none; }
.cap-group-heading { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: start; gap: 14px; padding-top: 5px; }
.cap-group-number { padding-top: 2px; color: #88aee0; font: 500 31px/1 Inter, var(--font-system); letter-spacing: -.08em; }
.cap-group-kicker { margin: 0 0 9px; color: #8ba0bc; font: 700 9px/1.4 Inter, var(--font-system); letter-spacing: .13em; text-transform: uppercase; }
.cap-group-heading h3 { margin: 0 0 10px; color: #163b69; font-size: 20px; font-weight: 680; letter-spacing: -.035em; }
.cap-group-copy { max-width: 260px; margin: 0; color: #6b7f9a; font-size: 13px; line-height: 1.75; }
.cap-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.8vw, 40px); }
.cap-group .cap-card { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cap-group .cap-card::before { display: none; }
.cap-group .cap-card + .cap-card { padding-left: clamp(16px, 2.2vw, 30px); border-left: 1px solid #dce7f5; }
.cap-group .cap-card:hover { transform: none; box-shadow: none; }
.cap-group .cap-card-link { padding: 0 0 5px; }
.cap-group .cap-card-link > span:first-child { color: #8ba0bc; font-size: 9px; }
.cap-group .cap-card h3 { margin: 15px 0 9px; color: #173d6b; font-size: 18px; transition: color .25s ease, transform .25s ease; }
.cap-group .cap-card h3::before { display: none; }
.cap-group .cap-card p { min-height: 76px; margin: 0 0 16px; color: #657b98; font-size: 13px; line-height: 1.72; }
.cap-group .cap-card small { padding: 5px 0; color: #3777cb; background: transparent; font-size: 11px; }
.cap-group .cap-card-action { gap: 5px; color: #7087a4; font-size: 11px; transition: color .24s ease, gap .24s ease; }
.cap-group .cap-card:focus-within h3, .cap-group .cap-card:hover h3 { color: #246bd1; transform: translateX(2px); }
.cap-group .cap-card:hover .cap-card-action, .cap-group .cap-card:focus-within .cap-card-action { gap: 9px; color: #246bd1; }
.cap-group .cap-card-link:focus-visible { border-radius: 3px; outline-offset: 7px; }
.cap-footnote { margin-top: 20px; }

@media (max-width: 1000px) {
  .cap-group { grid-template-columns: minmax(190px, .48fr) minmax(0, 1.52fr); gap: 26px; }
  .cap-group-grid { gap: 0 18px; }
  .cap-group .cap-card + .cap-card { padding-left: 15px; }
  .cap-group .cap-card p { font-size: 12px; }
}
@media (max-width: 760px) {
  .hero-connection { top: auto; right: 18px; bottom: 72px; width: min(340px, calc(100% - 36px)); padding: 15px 17px 13px; border-radius: 19px 5px 19px 5px; }
  .connection-heading { font-size: 12px; }
  .connection-participants { margin-top: 12px; }
  .connection-shared { margin-top: 12px; padding-top: 10px; }
  .step-no { margin-bottom: 16px; font-size: 34px; }
  .workflow-step h3::after { margin-top: 11px; }
  .step-tag { font-size: 11px; }
  .cap-group { grid-template-columns: 1fr; gap: 22px; padding: 27px 0 29px; }
  .cap-group-heading { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .cap-group-number { font-size: 28px; }
  .cap-group-copy { max-width: 520px; }
  .cap-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .cap-group .cap-card + .cap-card { padding-left: 13px; }
  .cap-group .cap-card p { min-height: 86px; font-size: 11px; }
  .cap-group .cap-card h3 { font-size: 15px; }
  .cap-group .cap-card-action { white-space: normal; }
}
@media (max-width: 520px) {
  .hero-connection { right: 18px; bottom: 66px; width: calc(100% - 36px); }
  .cap-filter { margin-bottom: 20px; }
  .filter-button { min-height: 35px; padding-inline: 12px; font-size: 11px; }
  .cap-group-grid { grid-template-columns: 1fr; gap: 0; }
  .cap-group .cap-card { padding: 17px 0 15px; border-top: 1px solid #e2ebf7; }
  .cap-group .cap-card + .cap-card { padding-left: 0; border-left: 0; }
  .cap-group .cap-card-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: start; }
  .cap-group .cap-card-link > span:first-child { grid-column: 1 / -1; }
  .cap-group .cap-card h3 { margin: 8px 0 5px; }
  .cap-group .cap-card p { min-height: 0; grid-column: 1 / -1; margin-bottom: 9px; font-size: 14px; line-height: 1.7; }
  .cap-group .cap-card-bottom { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 3px; }
  .cap-group .cap-card h3 { font-size: 18px; }
  .cap-group .cap-card-link > span:first-child { font-size: 10px; }
  .cap-group .cap-card small, .cap-group .cap-card-action { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-connection, .connection-wave i, .connection-link i { animation: none; }
  .workflow-step h3::after, .filter-button, .cap-group .cap-card h3, .cap-group .cap-card-action { transition: none; }
}
@media (max-width: 390px) {
  .site-header .header-inner { width: calc(100% - 28px); gap: 6px; }
  .site-header .brand { gap: 7px; }
  .site-header .brand-mark { width: 42px; height: 24px; }
  .site-header .brand-name strong { font-size: 14px; letter-spacing: .035em; }
  .site-header .language-switch { gap: 1px; padding: 2px; }
  .site-header .language-option { min-width: 0; padding: 4px 3px; font-size: 10px; }
  .site-header .menu-toggle { width: 34px; height: 34px; }
}

/* A clear, celebratory confirmation for successfully submitted inquiries. */
.success-dialog {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 32px));
  padding: 0;
  overflow: visible;
  color: #15365f;
  background: transparent;
  border: 0;
}
.success-dialog::backdrop {
  background: rgba(7, 24, 52, .65);
  backdrop-filter: blur(12px) saturate(1.15);
  animation: success-backdrop-in .35s ease-out both;
}
.success-dialog[open] { animation: success-dialog-pop .58s cubic-bezier(.16, 1, .3, 1) both; }
.success-dialog-panel {
  position: relative;
  max-height: min(780px, calc(100dvh - 32px));
  overflow: auto;
  padding: 34px clamp(28px, 6vw, 54px) 40px;
  text-align: center;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(112, 170, 250, .24), transparent 44%),
    linear-gradient(145deg, #fff 4%, #f5f9ff 63%, #e9f2ff 100%);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 32px 6px 32px 6px;
  box-shadow: 0 36px 120px rgba(0, 25, 70, .44), 0 0 0 1px rgba(108, 163, 238, .26) inset;
  scrollbar-width: thin;
  scrollbar-color: #b9d2f3 transparent;
}
.success-dialog-panel::before {
  position: absolute;
  z-index: -1;
  right: -100px;
  bottom: -188px;
  width: 380px;
  height: 280px;
  content: "";
  background: radial-gradient(ellipse, rgba(76, 143, 233, .14), transparent 70%);
  pointer-events: none;
}
.success-dialog-close {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 17px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #607b9e;
  background: rgba(255, 255, 255, .8);
  border: 1px solid #d9e6f6;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .25s ease;
}
.success-dialog-close svg { width: 17px; height: 17px; }
.success-dialog-close:hover { color: #fff; background: #286ed0; transform: rotate(90deg); }
.success-dialog-close:focus-visible, .success-dialog-continue:focus-visible { outline: 3px solid #75aaf0; outline-offset: 4px; }
.success-dialog-mark {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  margin: 10px auto 23px;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 32% 25%, #78b8ff, #2e75d6 56%, #174eaa 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(39, 107, 199, .3), 0 0 0 8px rgba(70, 137, 221, .08);
  animation: success-mark-arrive .7s .12s cubic-bezier(.2, .85, .25, 1.3) both;
}
.success-dialog-mark::before, .success-dialog-mark::after {
  position: absolute;
  inset: -9px;
  content: "";
  border: 1px solid rgba(66, 133, 218, .32);
  border-radius: inherit;
  animation: success-ring 2.8s .45s ease-out infinite;
}
.success-dialog-mark::after { animation-delay: 1.55s; }
.success-dialog-mark > svg { position: relative; z-index: 1; width: 49px; height: 49px; }
.success-dialog-mark > svg path { stroke-dasharray: 46; stroke-dashoffset: 46; animation: success-check .62s .48s cubic-bezier(.3, .7, .25, 1) forwards; }
.success-dialog-spark { position: absolute; z-index: 2; width: 6px; height: 6px; background: #d8ebff; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 255, 255, .95); animation: success-sparkle 2.8s ease-in-out infinite; }
.success-dialog-spark-a { top: 1px; right: 12px; }
.success-dialog-spark-b { bottom: 8px; left: 1px; width: 4px; height: 4px; animation-delay: .75s; }
.success-dialog-spark-c { top: 29px; left: -11px; width: 3px; height: 3px; animation-delay: 1.3s; }
.success-dialog-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #3575c9; font: 750 10px/1.4 Inter, -apple-system, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.success-dialog-eyebrow > span:first-child { width: 7px; height: 7px; background: #48a7ff; border: 2px solid #d8eaff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(67, 145, 229, .1); }
.success-dialog h2 { margin: 0; color: #122f55; font-size: clamp(30px, 5vw, 43px); font-weight: 680; line-height: 1.16; letter-spacing: -.055em; }
.success-dialog h2 em { color: #2c6ed0; font-style: normal; }
.success-dialog-copy { max-width: 420px; margin: 16px auto 24px; color: #5f7694; font-size: 15px; line-height: 1.8; }
.success-dialog-next { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; align-items: start; max-width: 420px; margin: 0 auto 23px; padding: 17px 0 18px; text-align: left; border-top: 1px solid #d8e5f5; border-bottom: 1px solid #d8e5f5; }
.success-dialog-next-number { display: grid; width: 32px; height: 32px; place-items: center; color: #2c6ed0; background: #e5f0ff; border-radius: 50%; font: 700 10px/1 Inter, sans-serif; }
.success-dialog-next-label { color: #3575c9; font: 750 9px/1.4 Inter, -apple-system, sans-serif; letter-spacing: .12em; }
.success-dialog-next p { margin: 5px 0 0; color: #657c99; font-size: 13px; line-height: 1.65; }
.success-dialog-continue { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 24px; width: min(100%, 420px); padding: 0 22px; color: #fff; background: linear-gradient(100deg, #1c5eb6, #3985e8 52%, #1c5eb6); background-size: 200% 100%; border: 0; border-radius: 999px; box-shadow: 0 12px 28px rgba(39, 107, 199, .22); cursor: pointer; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.2; transition: background-position .4s ease, box-shadow .25s ease, transform .25s ease; }
.success-dialog-continue:hover { background-position: 100% 0; box-shadow: 0 17px 34px rgba(39, 107, 199, .3); transform: translateY(-2px); }
.success-dialog-continue span { font-size: 18px; transition: transform .25s ease; }
.success-dialog-continue:hover span { transform: translate(2px, -2px); }
@keyframes success-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes success-dialog-pop { 0% { opacity: 0; transform: translateY(26px) scale(.88); } 70% { opacity: 1; transform: translateY(-2px) scale(1.012); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes success-mark-arrive { 0% { opacity: 0; transform: scale(.55) rotate(-22deg); } 72% { opacity: 1; transform: scale(1.08) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes success-ring { 0% { opacity: .65; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.38); } }
@keyframes success-check { to { stroke-dashoffset: 0; } }
@keyframes success-sparkle { 0%, 100% { opacity: .3; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.3); } }
@media (max-width: 520px) {
  .success-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .success-dialog-panel { max-height: calc(100dvh - 24px); padding: 32px 23px 25px; border-radius: 27px 5px 27px 5px; }
  .success-dialog-close { top: 12px; right: 12px; width: 34px; height: 34px; }
  .success-dialog-mark { width: 86px; height: 86px; margin: 5px auto 20px; }
  .success-dialog-mark > svg { width: 43px; height: 43px; }
  .success-dialog-copy { margin: 13px auto 20px; font-size: 14px; }
  .success-dialog-next { margin-bottom: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .success-dialog::backdrop, .success-dialog[open], .success-dialog-mark,
  .success-dialog-mark::before, .success-dialog-mark::after, .success-dialog-mark > svg path,
  .success-dialog-spark { animation: none; }
  .success-dialog-continue, .success-dialog-continue span, .success-dialog-close { transition: none; }
}