@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #101827;
  --ink-soft: #43516a;
  --muted: #71809a;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --line: #dce3ee;
  --navy: #0b1d3a;
  --blue: #1566e5;
  --cyan: #19b7d8;
  --teal: #0c9b87;
  --lime: #c7f36a;
  --violet: #7757e8;
  --orange: #ff9b4a;
  --danger: #d94e42;
  --shadow-sm: 0 10px 28px rgba(17, 35, 67, .07);
  --shadow-lg: 0 32px 72px rgba(13, 31, 61, .15);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: min(1184px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Manrope, 'Noto Sans SC', 'Microsoft YaHei', sans-serif; line-height: 1.6; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.skip-link { position: fixed; z-index: 200; left: 16px; top: -52px; border-radius: 8px; padding: 10px 14px; color: #fff; background: var(--blue); transition: top .2s ease; }
.skip-link:focus { top: 16px; }
.container { width: var(--container); margin: 0 auto; }
.section { padding: 118px 0; position: relative; }
.section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-kicker::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.section-heading { max-width: 760px; margin: 14px 0 0; font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
.section-description { max-width: 660px; margin: 20px 0 0; color: var(--ink-soft); font-size: 17px; }
.eyebrow { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.25); color: #e6efff; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.eyebrow.light { border-color: #c9d9f1; color: #245ea4; background: #f6faff; }
.mono { font-family: 'DM Mono', ui-monospace, monospace; }
.visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 50; height: 76px; border-bottom: 1px solid rgba(210,221,235,.74); background: rgba(247,249,252,.88); backdrop-filter: blur(16px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #1471f5, #0a356f); box-shadow: 0 8px 16px rgba(21,102,229,.23); }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 3px; }
.brand-mark::before { transform: translate(-4px,-4px); opacity: .82; }
.brand-mark::after { transform: translate(4px,4px); opacity: .45; }
.brand-copy small { display: block; color: var(--muted); margin-top: -3px; font-size: 8px; letter-spacing: .14em; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; color: #33425b; font-size: 14px; font-weight: 700; }
.nav-links a { padding: 8px 0; transition: color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--blue); }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; gap: 9px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; font-size: 14px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease; }
.nav-cta, .button.primary { color: #fff; background: var(--blue); box-shadow: 0 9px 16px rgba(21,102,229,.2); }
.nav-cta:hover, .button.primary:hover { transform: translateY(-2px); background: #0858cf; box-shadow: 0 13px 20px rgba(21,102,229,.27); }
.button.secondary { color: #20304b; background: #fff; border-color: #cbd7e7; }
.button.secondary:hover { border-color: #9db9e3; color: var(--blue); transform: translateY(-2px); }
.button.dark { color: var(--navy); background: var(--lime); }
.button.dark:hover { background: #d9fc93; transform: translateY(-2px); }
.button.link { min-height: auto; padding: 0; color: var(--blue); background: transparent; border: 0; }
.button.link:hover { color: #084ba9; }
.arrow { font-size: 18px; line-height: 1; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); }
.menu-toggle svg { margin: auto; }

.hero { isolation: isolate; position: relative; overflow: hidden; min-height: 700px; padding: 94px 0 66px; color: #fff; background: #0b1d3a; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 680px; height: 680px; top: -360px; right: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(37,151,254,.48) 0, rgba(38,98,206,.09) 42%, transparent 68%); }
.hero::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 270px; opacity: .47; background-image: linear-gradient(rgba(179,219,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(179,219,255,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, black); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(470px, 1.06fr); align-items: center; gap: 70px; }
.hero-copy h1 { max-width: 650px; margin: 17px 0 0; font-size: clamp(46px, 5vw, 76px); font-weight: 800; letter-spacing: -.065em; line-height: 1.04; }
.hero-copy h1 em { color: var(--lime); font-style: normal; }
.hero-copy p { max-width: 570px; margin: 24px 0 0; color: #c0cee4; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 48px; color: #b6c6df; font-size: 13px; font-weight: 600; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 17px; color: var(--lime); }

.hero-console { position: relative; min-width: 0; padding: 10px; border: 1px solid rgba(201,225,255,.22); border-radius: 22px; background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.035)); box-shadow: 0 35px 70px rgba(1,8,22,.42); transform: perspective(1300px) rotateY(-5deg) rotateX(2deg); }
.hero-console::before { content: ''; position: absolute; z-index: -1; width: 80%; height: 40px; left: 10%; bottom: -28px; border-radius: 50%; background: rgba(32,147,255,.28); filter: blur(25px); }
.console-window { overflow: hidden; border: 1px solid #304768; border-radius: 14px; color: #dae6fa; background: #0d1d35; }
.console-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 15px; border-bottom: 1px solid #243853; background: #102440; }
.console-dots { display: flex; gap: 5px; }
.console-dots i { width: 7px; height: 7px; border-radius: 50%; background: #69809f; }
.console-title { color: #afc2dd; font-size: 11px; font-weight: 700; }
.console-body { display: grid; grid-template-columns: 122px minmax(0,1fr); min-height: 374px; }
.console-sidebar { padding: 13px 8px; border-right: 1px solid #243853; color: #8299b9; font-size: 10px; }
.console-sidebar b { display: block; padding: 6px 9px 12px; color: #dceaff; font-size: 11px; }
.console-sidebar span { display: block; padding: 7px 9px; margin: 2px 0; border-radius: 5px; }
.console-sidebar span.active { color: #dfffb2; background: #25435a; }
.console-main { padding: 20px; }
.console-main header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.console-main h3 { margin: 0; color: #f3f8ff; font-size: 18px; letter-spacing: -.03em; }
.live { display: inline-flex; align-items: center; gap: 6px; color: #a9d8e1; font-size: 9px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #5fe1c8; box-shadow: 0 0 0 3px rgba(95,225,200,.15); }
.work-query { padding: 13px; margin-top: 17px; border: 1px solid #2c4668; border-radius: 9px; color: #d6e6ff; background: #142842; font-size: 11px; }
.agent-stream { display: grid; gap: 9px; margin-top: 15px; }
.agent-row { display: grid; grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(54,82,117,.5); font-size: 10px; }
.agent-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: #d4ff9a; background: #31546d; }
.agent-row strong { display: block; color: #dce9fb; font-size: 10px; }
.agent-row small { color: #8299b9; }
.status { padding: 3px 6px; border-radius: 99px; color: #99e5c4; background: rgba(25,176,132,.15); font-size: 8px; }
.progress { width: 78px; height: 4px; overflow: hidden; border-radius: 4px; background: #29415f; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #80e9dd, #c8f378); }

.logo-strip { border-bottom: 1px solid var(--line); background: #fff; }
.logo-strip-inner { display: flex; align-items: center; min-height: 98px; gap: 42px; }
.logo-label { max-width: 160px; color: #6c7c95; font-size: 12px; font-weight: 700; line-height: 1.4; }
.logo-items { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 24px; color: #8491a5; font-family: Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.logo-items b:nth-child(2) { font-family: Manrope, sans-serif; font-size: 15px; letter-spacing: .02em; }
.logo-items b:nth-child(3) { font-family: 'DM Mono', monospace; font-size: 15px; }
.logo-items b:nth-child(4) { font-family: Arial, sans-serif; font-size: 17px; }

.products-header { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.products-header .section-description { margin-bottom: 3px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.product-card { position: relative; display: flex; min-height: 490px; flex-direction: column; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card.orb { background: linear-gradient(155deg, #fff 35%, #eef8ff); }
.product-card.llm { color: #edf5ff; border-color: #1d3a63; background: #0f2850; }
.product-card.wy { background: linear-gradient(155deg, #fff 35%, #f3f0ff); }
.product-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-symbol { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--blue); background: #e7f2ff; }
.llm .product-symbol { color: #c8f378; background: rgba(200,243,120,.13); }
.wy .product-symbol { color: var(--violet); background: #eeeaff; }
.product-index { color: #8b9ab1; font: 500 11px 'DM Mono', monospace; letter-spacing: .08em; }
.product-card h3 { margin: 26px 0 0; font-size: 28px; letter-spacing: -.05em; line-height: 1.1; }
.product-card h3 small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.llm h3 small { color: #9eb4d1; }
.product-card p { margin: 17px 0 0; color: var(--ink-soft); font-size: 14px; }
.llm p { color: #b9c9df; }
.product-mini { flex: 1; margin: 27px -7px 22px; }
.orb-mini { position: relative; padding: 16px; border: 1px solid #cfe4f6; border-radius: 16px; background: linear-gradient(150deg, #edf9ff, #ffffff); }
.orb-mini .mini-input { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; color: #415b73; background: #fff; font-size: 10px; box-shadow: 0 4px 11px rgba(25,83,125,.08); }
.orb-mini .mini-input::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mini-tags span { padding: 5px 7px; border-radius: 5px; color: #1e609b; background: #dff1ff; font-size: 8px; font-weight: 800; }
.mini-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.mini-list span { padding: 10px 8px; border: 1px solid #dcebf7; border-radius: 8px; color: #33546f; background: #fff; font-size: 9px; font-weight: 700; }
.mini-list span::before { content: '↳'; padding-right: 5px; color: var(--cyan); }
.llm-mini { position: relative; overflow: hidden; padding: 17px; border: 1px solid #31567f; border-radius: 16px; background: #102e55; }
.llm-mini::after { content: ''; position: absolute; right: -31px; bottom: -45px; width: 150px; height: 150px; border: 1px solid #5a84ae; border-radius: 50%; box-shadow: 0 0 0 24px rgba(90,132,174,.12), 0 0 0 48px rgba(90,132,174,.07); }
.code-line { position: relative; z-index: 1; color: #a8c6e7; font: 10px/1.8 'DM Mono', monospace; }
.code-line b { color: #d2fc89; font-weight: 500; }
.endpoint { position: relative; z-index: 1; margin-top: 15px; padding: 10px; border-left: 2px solid var(--lime); color: #eaf3ff; background: rgba(255,255,255,.06); font: 10px 'DM Mono', monospace; }
.endpoint small { float: right; color: #8fa7c6; }
.wy-mini { padding: 16px; border: 1px solid #ded7ff; border-radius: 16px; background: linear-gradient(155deg, #faf9ff, #f2eeff); }
.knowledge-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.knowledge-flow span { display: grid; width: 47px; height: 47px; place-items: center; border: 1px solid #d6cdfa; border-radius: 11px; color: #6e4fd6; background: #fff; font-size: 9px; font-weight: 800; text-align: center; }
.knowledge-flow i { color: #a99cd8; font-style: normal; }
.knowledge-result { display: flex; gap: 8px; margin-top: 16px; }
.knowledge-result b { flex: 1; height: 7px; border-radius: 4px; background: #d6ccff; }
.knowledge-result b:nth-child(2) { flex: .7; background: #ae9dea; }
.knowledge-result b:nth-child(3) { flex: .38; background: #7660cf; }
.product-card .button { align-self: flex-start; }

.ecosystem { overflow: hidden; color: #eaf3ff; background: #0d2345; }
.ecosystem .section-heading { color: #fff; }
.ecosystem .section-description { color: #bbcbdf; }
.ecosystem-diagram { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 20px; min-height: 410px; margin-top: 48px; }
.ecosystem-diagram::before { content: ''; position: absolute; top: 50%; left: 13%; right: 13%; height: 1px; background: linear-gradient(90deg, rgba(174,219,255,.12), rgba(174,219,255,.65), rgba(174,219,255,.12)); }
.eco-node { position: relative; min-height: 216px; padding: 26px; border: 1px solid rgba(179,210,250,.2); border-radius: 20px; background: #102c54; }
.eco-node > span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #092249; background: #d7f895; font-size: 13px; font-weight: 800; }
.eco-node h3 { margin: 18px 0 0; color: #fff; font-size: 21px; letter-spacing: -.04em; }
.eco-node p { max-width: 270px; margin: 8px 0 0; color: #a9bfd8; font-size: 13px; }
.eco-node.core { min-height: 270px; border-color: rgba(177,224,255,.46); background: radial-gradient(circle at 65% 0, #275da1 0, #12315a 49%, #102b51 100%); box-shadow: 0 0 0 9px rgba(134,191,255,.045); }
.eco-node.core > span { color: #fff; background: #2d83f0; }
.eco-node .node-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.node-pills small { padding: 4px 7px; border-radius: 5px; color: #d1e2fb; background: rgba(255,255,255,.09); font-size: 9px; }
.ecosystem-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 50px; border: 1px solid rgba(177,210,249,.2); border-radius: 15px; overflow: hidden; background: rgba(177,210,249,.2); }
.ecosystem-rail div { padding: 18px; background: #102a50; }
.ecosystem-rail b { display: block; color: #d7f895; font-size: 14px; }
.ecosystem-rail span { color: #9cb3cd; font-size: 11px; }

.feature-split { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; }
.feature-split.reverse { grid-template-columns: 1.1fr .9fr; }
.feature-split.reverse .feature-copy { order: 2; }
.feature-split.reverse .feature-visual { order: 1; }
.feature-copy h2 { max-width: 500px; margin: 14px 0 0; font-size: clamp(31px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; }
.feature-copy > p { max-width: 510px; margin: 20px 0 0; color: var(--ink-soft); font-size: 16px; }
.feature-list { display: grid; gap: 16px; padding: 0; margin: 31px 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 12px; }
.feature-list i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #0c8b7a; background: #dcf8ef; font: 700 11px 'DM Mono', monospace; }
.feature-list strong { display: block; font-size: 14px; }
.feature-list span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.feature-visual { position: relative; }
.workbench-preview { overflow: hidden; padding: 15px; border: 1px solid #cbddeb; border-radius: 24px; background: #eff8ff; box-shadow: 0 24px 45px rgba(23,79,126,.11); }
.preview-browser { overflow: hidden; border: 1px solid #d8e7f3; border-radius: 15px; background: #fff; }
.browser-bar { display: flex; align-items: center; height: 42px; padding: 0 14px; border-bottom: 1px solid #e4edf5; }
.browser-bar .console-dots i { background: #c3d3e4; }
.browser-bar span { margin-left: 12px; color: #8a9db2; font-size: 9px; }
.workflow-screen { display: grid; grid-template-columns: 140px minmax(0,1fr); min-height: 340px; }
.work-nav { padding: 15px 9px; border-right: 1px solid #e5eef5; background: #fafcff; }
.work-nav b { display: block; padding: 6px 8px 12px; color: #35506e; font-size: 11px; }
.work-nav span { display: block; padding: 7px 8px; border-radius: 5px; color: #7e92a9; font-size: 9px; }
.work-nav span.active { color: #126bd5; background: #e6f2ff; font-weight: 700; }
.workflow-main { padding: 20px; }
.workflow-main h4 { margin: 0; font-size: 16px; }
.workflow-main > p { margin: 3px 0 17px; color: #8a9bb1; font-size: 10px; }
.workflow-canvas { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 18px 10px; border-radius: 10px; background-color: #f6fafe; background-image: radial-gradient(#c6dff2 1px, transparent 1px); background-size: 11px 11px; }
.flow-box { position: relative; z-index: 1; padding: 11px 9px; border: 1px solid #c9ddea; border-radius: 8px; background: #fff; box-shadow: 0 5px 8px rgba(26,86,133,.06); text-align: center; }
.flow-box i { display: grid; width: 24px; height: 24px; place-items: center; margin: 0 auto 6px; border-radius: 7px; color: #126bd5; background: #e2f1ff; font-size: 10px; font-style: normal; }
.flow-box b { display: block; color: #2b4764; font-size: 9px; }
.flow-box small { display: block; color: #8397ac; font-size: 8px; }
.flow-connect { position: absolute; z-index: 0; left: 23%; right: 23%; top: 50%; border-top: 1px dashed #72aee2; }
.preview-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.preview-tabs button { padding: 6px 8px; border: 1px solid #d4e4f1; border-radius: 5px; color: #5d7893; background: #fff; font-size: 9px; }
.preview-tabs button.active { border-color: #80b8ee; color: #0b63cc; background: #eaf5ff; }

.gateway-board { overflow: hidden; border: 1px solid #1e426e; border-radius: 24px; color: #d9e9ff; background: #0b2448; box-shadow: 0 26px 50px rgba(7,32,67,.2); }
.gateway-head { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; border-bottom: 1px solid #26476f; }
.gateway-head strong { color: #fff; font-size: 14px; }
.gateway-head small { padding: 4px 7px; border-radius: 5px; color: #bff6db; background: rgba(69,205,151,.13); font: 10px 'DM Mono', monospace; }
.gateway-body { padding: 20px; }
.gateway-route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid #30567e; border-radius: 11px; background: #102e55; }
.gateway-route span { padding: 5px 7px; border-radius: 5px; color: #b5cce8; background: rgba(255,255,255,.06); font: 10px 'DM Mono', monospace; }
.gateway-route i { color: #8db5e2; font-style: normal; }
.gateway-route b { color: #d7f895; font-size: 11px; }
.gateway-metrics { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 12px; }
.line-chart, .call-chart { min-height: 184px; padding: 15px; border: 1px solid #294d77; border-radius: 11px; background: #102b50; }
.chart-label { display: flex; justify-content: space-between; color: #a8c0dc; font-size: 10px; }
.chart-label b { color: #eef6ff; font-size: 11px; }
.chart-grid { position: relative; height: 125px; margin-top: 16px; background-image: linear-gradient(rgba(123,164,205,.14) 1px, transparent 1px); background-size: 100% 27px; }
.chart-line { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.chart-line svg { width: 100%; height: 100%; }
.chart-legend { display: flex; gap: 12px; margin-top: 8px; color: #91acc9; font-size: 9px; }
.chart-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #b9ec77; }
.chart-legend i.blue { background: #5eb1ff; }
.call-chart .big-number { margin: 24px 0 4px; color: #d7f895; font: 700 34px/1 'DM Mono', monospace; letter-spacing: -.08em; }
.call-chart p { margin: 0; color: #94afcd; font-size: 10px; }
.provider-stack { display: flex; gap: 5px; margin-top: 20px; }
.provider-stack span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #41688e; border-radius: 7px; color: #c0d6ef; background: #143760; font: 700 9px 'DM Mono', monospace; }

.knowledge-board { overflow: hidden; padding: 19px; border: 1px solid #dfd8f9; border-radius: 24px; background: #f7f5ff; box-shadow: 0 24px 46px rgba(82,55,168,.1); }
.knowledge-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 13px; border: 1px solid #e2dcf7; border-radius: 10px; color: #70668e; background: #fff; font-size: 10px; }
.knowledge-toolbar b { color: #5d4bb7; }
.knowledge-layout { display: grid; grid-template-columns: 42% 1fr; gap: 12px; margin-top: 12px; }
.source-files, .knowledge-answer { min-height: 270px; padding: 14px; border: 1px solid #e0daf5; border-radius: 11px; background: #fff; }
.source-files h5, .knowledge-answer h5 { margin: 0 0 12px; color: #514b68; font-size: 11px; }
.file-row { display: flex; align-items: center; gap: 8px; padding: 9px 5px; border-bottom: 1px solid #f0ecfb; }
.file-row i { display: grid; width: 24px; height: 27px; place-items: center; border-radius: 5px; color: #fff; background: #8170d4; font-size: 8px; font-style: normal; font-weight: 800; }
.file-row:nth-child(3) i { background: #ef9772; }
.file-row:nth-child(4) i { background: #4aa795; }
.file-row b { display: block; color: #5b5871; font-size: 9px; }
.file-row small { display: block; color: #9690a9; font-size: 8px; }
.query-box { padding: 9px; border: 1px solid #d9d1f5; border-radius: 7px; color: #6556ae; background: #faf9ff; font-size: 9px; }
.answer-citation { margin-top: 12px; padding: 10px; border-left: 2px solid #806be1; color: #5d5873; background: #f8f7ff; font-size: 9px; line-height: 1.7; }
.answer-citation b { color: #5f50b6; }
.answer-lines { display: grid; gap: 6px; margin-top: 12px; }
.answer-lines i { display: block; height: 6px; border-radius: 3px; background: #e8e3fa; }
.answer-lines i:nth-child(2) { width: 86%; }
.answer-lines i:nth-child(3) { width: 61%; }

.cases { background: #fff; }
.cases-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 17px; margin-top: 47px; }
.case-card { position: relative; overflow: hidden; min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.case-card.large { grid-column: span 5; color: #e8f4ff; background: #11335f; }
.case-card.medium { grid-column: span 4; background: #f6faff; }
.case-card.small { grid-column: span 3; background: #fbfbfd; }
.case-card::after { content: ''; position: absolute; right: -40px; bottom: -54px; width: 160px; height: 160px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; box-shadow: 0 0 0 24px currentColor, 0 0 0 48px currentColor; }
.case-card .case-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--blue); background: #e4f1ff; }
.large .case-icon { color: #d4f98e; background: rgba(199,243,106,.15); }
.case-card h3 { position: relative; z-index: 1; margin: 20px 0 0; font-size: 19px; letter-spacing: -.035em; }
.case-card p { position: relative; z-index: 1; margin: 7px 0 0; max-width: 300px; color: var(--ink-soft); font-size: 12px; }
.large p { color: #b7cae1; }
.case-card a { position: absolute; z-index: 2; bottom: 23px; color: var(--blue); font-size: 12px; font-weight: 800; }
.large a { color: var(--lime); }

.pricing { color: #f1f6ff; background: #0b1d3a; }
.pricing::before { content: ''; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(circle at 10% 30%, #226ad0 0, transparent 23%), radial-gradient(circle at 91% 100%, #7c54dd 0, transparent 22%); }
.pricing .container { position: relative; }
.pricing .section-heading { color: #fff; }
.pricing .section-description { color: #b9c9df; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; margin-top: 46px; }
.price-card { display: flex; min-height: 400px; flex-direction: column; padding: 27px; border: 1px solid rgba(193,220,252,.25); border-radius: 20px; background: rgba(255,255,255,.045); }
.price-card.featured { transform: translateY(-12px); border-color: #d7f895; color: var(--navy); background: #e7f9b9; box-shadow: 0 25px 60px rgba(0,0,0,.2); }
.price-card .price-tag { color: #a9bdd8; font-size: 12px; font-weight: 800; }
.featured .price-tag { color: #547534; }
.price-card h3 { margin: 10px 0 0; color: #fff; font-size: 25px; letter-spacing: -.045em; }
.featured h3 { color: var(--navy); }
.price-card > p { min-height: 45px; margin: 12px 0 0; color: #b8c8df; font-size: 13px; }
.featured > p { color: #52673d; }
.price-model { margin: 21px 0; color: #d7f895; font: 700 28px/1.1 'DM Mono', monospace; letter-spacing: -.07em; }
.featured .price-model { color: #1c5a4c; }
.price-features { display: grid; gap: 10px; padding: 0; margin: 0 0 23px; list-style: none; color: #c6d4e7; font-size: 12px; }
.featured .price-features { color: #425839; }
.price-features li { display: flex; gap: 8px; }
.price-features li::before { content: '✓'; color: #d7f895; font-weight: 800; }
.featured .price-features li::before { color: #257c57; }
.price-card .button { width: 100%; margin-top: auto; }

.about { overflow: hidden; background: #edf5fb; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.about h2 { margin: 14px 0 0; font-size: clamp(31px, 3.4vw, 47px); letter-spacing: -.055em; line-height: 1.12; }
.about p { max-width: 490px; margin: 18px 0 0; color: var(--ink-soft); font-size: 16px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid #d6e2ec; border-radius: 19px; background: #d6e2ec; }
.about-stats div { min-height: 152px; padding: 23px; background: #f8fcff; }
.about-stats b { display: block; color: #1168dc; font: 700 clamp(25px,3vw,38px)/1 'DM Mono', monospace; letter-spacing: -.07em; }
.about-stats span { display: block; margin-top: 10px; color: #5e7590; font-size: 12px; font-weight: 700; }
.about-stats small { display: block; margin-top: 3px; color: #879bb2; font-size: 10px; }

.cta-band { padding: 75px 0; color: #fff; background: #1566e5; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-band h2 { max-width: 730px; margin: 0; font-size: clamp(31px,4vw,51px); letter-spacing: -.055em; line-height: 1.12; }
.cta-band p { margin: 12px 0 0; color: #dceaff; }
.cta-band .button { flex-shrink: 0; }

.site-footer { color: #bdccdd; background: #08172d; }
.footer-main { display: grid; grid-template-columns: 1.4fr repeat(3, .7fr); gap: 48px; padding: 65px 0 47px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { max-width: 270px; margin: 18px 0 0; color: #8da0b8; font-size: 12px; }
.footer-column h3 { margin: 4px 0 15px; color: #e9f3ff; font-size: 13px; }
.footer-column a { display: block; margin: 8px 0; color: #9db0c6; font-size: 12px; }
.footer-column a:hover { color: #d7f895; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(170,203,238,.16); color: #72869f; font-size: 11px; }

.page-hero { position: relative; overflow: hidden; padding: 100px 0 80px; color: #fff; background: #0b1d3a; }
.page-hero.orb-page { background: radial-gradient(circle at 77% 2%, #176a9c 0, transparent 33%), #0b2440; }
.page-hero.llm-page { background: radial-gradient(circle at 77% 7%, #284d9e 0, transparent 32%), #101d3f; }
.page-hero.wy-page { background: radial-gradient(circle at 77% 7%, #5847a5 0, transparent 31%), #16183f; }
.breadcrumb { display: flex; gap: 8px; align-items: center; color: #abc0dc; font-size: 12px; }
.breadcrumb a:hover { color: #d7f895; }
.breadcrumb span { color: #6685ab; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(400px,1.08fr); align-items: center; gap: 72px; }
.page-hero h1 { margin: 18px 0 0; font-size: clamp(46px,5vw,71px); letter-spacing: -.07em; line-height: 1.03; }
.page-hero h1 small { display: block; margin: 8px 0 0; color: #a8c9f3; font-size: 14px; font-weight: 700; letter-spacing: .1em; }
.page-hero p { max-width: 570px; margin: 22px 0 0; color: #c0d0e7; font-size: 17px; }
.page-hero .hero-actions { margin-top: 29px; }
.product-hero-art { position: relative; min-height: 390px; }
.orb-orbit { position: absolute; inset: 20px; border: 1px solid rgba(203,243,255,.28); border-radius: 50%; transform: rotate(-18deg); }
.orb-orbit::before, .orb-orbit::after { content: ''; position: absolute; border: 1px solid rgba(203,243,255,.19); border-radius: 50%; }
.orb-orbit::before { inset: 50px -25px; }
.orb-orbit::after { inset: 100px -50px; }
.art-center { position: absolute; top: 50%; left: 50%; display: grid; width: 132px; height: 132px; place-items: center; border: 1px solid rgba(204,244,255,.47); border-radius: 30px; color: #e9fbff; background: linear-gradient(145deg, rgba(55,178,216,.82), rgba(28,63,130,.85)); box-shadow: 0 0 0 17px rgba(78,184,237,.08), 0 0 45px rgba(80,202,245,.5); font-size: 16px; font-weight: 800; letter-spacing: -.06em; transform: translate(-50%,-50%) rotate(12deg); }
.art-center::before { content: ''; position: absolute; width: 54px; height: 54px; border: 1px dashed rgba(237,255,255,.6); border-radius: 14px; transform: rotate(30deg); }
.art-center span { position: relative; }
.art-pill { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(192,231,255,.32); border-radius: 7px; color: #d8edff; background: rgba(8,36,73,.72); box-shadow: 0 8px 19px rgba(2,17,38,.24); font: 500 10px 'DM Mono', monospace; }
.art-pill i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.art-pill.one { top: 15%; left: 7%; }
.art-pill.two { right: 0; top: 30%; }
.art-pill.three { right: 12%; bottom: 10%; }
.art-pill.four { left: 0; bottom: 21%; }
.api-art { position: relative; min-height: 360px; border: 1px solid rgba(171,207,255,.25); border-radius: 24px; background: rgba(8,31,70,.34); }
.api-art .api-layers { position: absolute; inset: 45px 45px; display: grid; gap: 13px; align-content: center; }
.api-layer { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid rgba(172,207,255,.28); border-radius: 9px; color: #d8e7ff; background: rgba(28,65,119,.63); font-size: 11px; font-weight: 700; }
.api-layer i { padding: 3px 6px; border-radius: 4px; color: #d7f895; background: rgba(200,243,120,.11); font: 10px 'DM Mono', monospace; font-style: normal; }
.api-layer.core { color: #fff; background: linear-gradient(90deg, #2666cb, #6d4ce5); box-shadow: 0 0 25px rgba(93,103,237,.45); }
.api-layer.core i { color: #fff; background: rgba(255,255,255,.17); }
.api-rail { position: absolute; top: 29px; bottom: 29px; left: 50%; border-left: 1px dashed rgba(174,211,254,.47); }
.wy-art { position: relative; min-height: 360px; }
.wy-art .book { position: absolute; top: 29px; left: 50%; width: 215px; height: 282px; border: 1px solid #aa9de0; border-radius: 10px 18px 18px 10px; background: linear-gradient(115deg, #d4c8ff, #6652b7); box-shadow: 22px 20px 44px rgba(17,14,67,.42); transform: translateX(-50%) rotateY(-15deg) rotateZ(8deg); }
.wy-art .book::before { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.43); border-radius: 6px; }
.wy-art .book::after { content: '知识资产'; position: absolute; top: 46%; width: 100%; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.06em; text-align: center; }
.wy-art .data-slip { position: absolute; padding: 11px 14px; border: 1px solid rgba(226,220,255,.45); border-radius: 8px; color: #e6e3ff; background: rgba(42,36,91,.7); box-shadow: 0 13px 25px rgba(8,7,34,.25); font: 10px 'DM Mono', monospace; }
.wy-art .data-slip.one { top: 15px; left: 3%; }
.wy-art .data-slip.two { top: 48%; right: 0; }
.wy-art .data-slip.three { bottom: 10px; left: 8%; }

.subnav { position: sticky; z-index: 30; top: 76px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.91); backdrop-filter: blur(14px); }
.subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 59px; }
.subnav b { color: #253956; font-size: 12px; }
.subnav-links { display: flex; gap: 20px; color: #63758d; font-size: 12px; font-weight: 700; }
.subnav-links a:hover { color: var(--blue); }
.detail-metrics { display: grid; grid-template-columns: repeat(4,1fr); margin-top: -1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.detail-metrics div { min-height: 137px; padding: 26px max(22px, calc((100vw - 1184px)/2)); border-right: 1px solid var(--line); }
.detail-metrics div:not(:first-child) { padding-left: 27px; }
.detail-metrics div:last-child { border-right: 0; }
.detail-metrics b { display: block; color: var(--blue); font: 700 clamp(26px,3.2vw,42px)/1 'DM Mono', monospace; letter-spacing: -.09em; }
.detail-metrics span { display: block; margin-top: 9px; color: #51647d; font-size: 12px; font-weight: 700; }

.architecture { color: #eaf3ff; background: #0d2345; }
.architecture .section-heading { color: #fff; }
.architecture .section-description { color: #b8cae2; }
.arch-flow { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: stretch; margin-top: 47px; }
.arch-card { min-height: 250px; padding: 25px; border: 1px solid rgba(178,211,252,.23); border-radius: 17px; background: #102c54; }
.arch-card > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #0a234b; background: #d7f895; font-size: 12px; font-style: normal; font-weight: 800; }
.arch-card h3 { margin: 17px 0 0; color: #fff; font-size: 18px; }
.arch-card p { margin: 8px 0 0; color: #a8bed9; font-size: 12px; }
.arch-card ul { display: grid; gap: 7px; padding: 0; margin: 17px 0 0; list-style: none; color: #d3e2f4; font-size: 11px; }
.arch-card li::before { content: '—'; padding-right: 6px; color: #d7f895; }
.arch-arrow { display: grid; place-items: center; color: #91add0; font-size: 25px; }

.capability-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; margin-top: 45px; }
.capability-card { min-height: 228px; padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.capability-card .cap-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: var(--blue); background: #e8f3ff; }
.capability-card h3 { margin: 20px 0 0; font-size: 19px; letter-spacing: -.035em; }
.capability-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; }
.capability-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 17px 0 0; list-style: none; }
.capability-card li { padding: 4px 7px; border-radius: 5px; color: #486383; background: #f0f6fb; font-size: 10px; font-weight: 700; }

.api-section { background: #f0f6fb; }
.api-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 58px; align-items: center; }
.api-copy h2 { margin: 14px 0 0; font-size: clamp(31px,3.3vw,45px); letter-spacing: -.055em; line-height: 1.12; }
.api-copy p { margin: 18px 0 0; color: var(--ink-soft); }
.api-card { overflow: hidden; border: 1px solid #273f61; border-radius: 18px; background: #112544; box-shadow: 0 20px 46px rgba(10,31,61,.18); }
.api-tabs { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #2d4a70; }
.api-tabs button { padding: 7px 9px; border: 0; border-radius: 6px; color: #9bb0cc; background: transparent; font: 500 10px 'DM Mono', monospace; }
.api-tabs button.active { color: #d9f7a8; background: #254160; }
.api-code { min-height: 285px; padding: 22px; overflow: auto; color: #c3d4ed; font: 11px/1.85 'DM Mono', monospace; white-space: pre; }
.api-code .purple { color: #c6a6ff; }
.api-code .green { color: #d7f895; }
.api-code .blue { color: #76c3ff; }
.api-code .orange { color: #ffbc84; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 50px; }
.timeline::before { content: ''; position: absolute; top: 25px; left: 12.5%; right: 12.5%; border-top: 1px solid #c7d7e8; }
.timeline-step { position: relative; padding: 0 18px 0 0; }
.timeline-step i { display: grid; position: relative; width: 51px; height: 51px; place-items: center; border: 1px solid #aac9eb; border-radius: 50%; color: #1268da; background: #fff; font: 700 12px 'DM Mono', monospace; font-style: normal; }
.timeline-step h3 { margin: 18px 0 0; font-size: 16px; }
.timeline-step p { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6,19,39,.66); backdrop-filter: blur(6px); }
.modal-panel { position: relative; width: min(680px, 100%); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: 30px; border-radius: 22px; background: #fff; box-shadow: 0 40px 90px rgba(1,10,24,.36); }
.modal-close { display: grid; position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; place-items: center; border: 1px solid #d6e1ec; border-radius: 9px; color: #4d5c75; background: #fff; font-size: 22px; line-height: 1; }
.modal-close:hover { color: #fff; background: var(--navy); }
.modal h2 { margin: 0; padding-right: 42px; font-size: 28px; letter-spacing: -.05em; }
.modal > .modal-panel > p { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; }
.demo-player { overflow: hidden; margin-top: 22px; border: 1px solid #cbddea; border-radius: 15px; background: #0f294c; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; color: #c9dbf2; background: #12335d; font-size: 11px; }
.demo-body { padding: 22px; }
.demo-prompt { padding: 13px; border: 1px solid #41658f; border-radius: 8px; color: #eff6ff; background: #143660; font-size: 12px; }
.demo-steps { display: grid; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.demo-steps li { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #264a74; border-radius: 8px; color: #aac2df; font-size: 11px; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.demo-steps li i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #b3c7e0; background: #244a75; font-size: 9px; font-style: normal; }
.demo-steps li.active { border-color: #86caea; color: #edfbff; background: #1d4972; }
.demo-steps li.done i { color: #163b37; background: #bff29a; }
.demo-actions { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 18px; }
.demo-caption { color: #94b4d5; font-size: 11px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label { color: #34455e; font-size: 12px; font-weight: 800; }
.field input, .field select { width: 100%; min-height: 45px; padding: 0 11px; border: 1px solid #cbd8e7; border-radius: 8px; color: #263b57; background: #fff; font-size: 13px; outline: none; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,102,229,.14); }
.form-status { min-height: 20px; margin-top: 13px; color: #197a53; font-size: 12px; font-weight: 700; }

@media (max-width: 1040px) {
  .nav-links { gap: 16px; }
  .hero-grid, .page-hero-grid { gap: 38px; grid-template-columns: minmax(0,1fr) minmax(390px,.95fr); }
  .feature-split, .feature-split.reverse, .about-grid, .api-layout { gap: 45px; }
  .product-card { min-height: 510px; }
  .case-card.large { grid-column: span 6; } .case-card.medium { grid-column: span 6; } .case-card.small { grid-column: span 6; }
}

@media (max-width: 820px) {
  :root { --container: min(100vw - 32px, 680px); }
  .section { padding: 78px 0; }
  .site-header { height: 68px; } .nav-wrap { gap: 12px; }
  .nav-links, .nav-wrap > .nav-cta { display: none; }
  .menu-toggle { display: grid; place-items: center; margin-left: auto; }
  .mobile-menu { display: grid; position: fixed; z-index: 49; inset: 68px 0 auto; gap: 3px; padding: 12px 16px 18px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 16px 30px rgba(20,38,68,.12); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 12px 8px; border-radius: 8px; color: #31435f; font-size: 14px; font-weight: 700; }
  .mobile-menu a:hover { color: var(--blue); background: #f2f7fc; }
  .mobile-menu .nav-cta { width: 100%; margin-top: 5px; }
  .hero { min-height: 0; padding: 66px 0 62px; }
  .hero-grid, .page-hero-grid, .feature-split, .feature-split.reverse, .about-grid, .api-layout { grid-template-columns: 1fr; gap: 42px; }
  .hero-console { max-width: 610px; margin: 0 auto; transform: none; }
  .feature-split.reverse .feature-copy, .feature-split.reverse .feature-visual { order: initial; }
  .products-header, .cta-row { align-items: flex-start; flex-direction: column; gap: 20px; }
  .products-grid, .pricing-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .product-mini { flex: none; min-height: 150px; }
  .ecosystem-diagram { grid-template-columns: 1fr; gap: 14px; } .ecosystem-diagram::before { top: 10%; bottom: 10%; left: 50%; right: auto; width: 1px; height: auto; }
  .ecosystem-rail { grid-template-columns: 1fr 1fr; }
  .feature-visual { max-width: 620px; width: 100%; }
  .pricing-grid { max-width: 520px; } .price-card.featured { transform: none; }
  .detail-metrics { grid-template-columns: 1fr 1fr; } .detail-metrics div { min-height: 125px; padding: 22px 16px !important; border-bottom: 1px solid var(--line); } .detail-metrics div:nth-child(2) { border-right: 0; }
  .subnav { top: 68px; } .subnav-links { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .product-hero-art { min-height: 330px; max-width: 550px; width: 100%; margin: 0 auto; }
  .arch-flow { grid-template-columns: 1fr; gap: 0; } .arch-arrow { height: 46px; transform: rotate(90deg); }
  .timeline { grid-template-columns: 1fr 1fr; gap: 30px 14px; } .timeline::before { display: none; }
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; } .footer-column:last-child { grid-column: 2; }
}

@media (max-width: 560px) {
  .section-heading { font-size: 34px; } .section-description { font-size: 15px; }
  .hero-copy h1, .page-hero h1 { font-size: 46px; }
  .hero-copy p, .page-hero p { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; } .hero-actions .button { width: 100%; }
  .hero-proof { gap: 10px 15px; margin-top: 34px; }
  .console-body { grid-template-columns: 91px minmax(0,1fr); min-height: 340px; } .console-sidebar { font-size: 8px; } .console-sidebar span { padding: 7px 4px; } .console-main { padding: 15px; }
  .logo-strip-inner { min-height: 118px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 13px; } .logo-items { width: 100%; gap: 11px; font-size: 15px; } .logo-items b:nth-child(4) { display: none; }
  .products-grid { margin-top: 31px; }
  .product-card { padding: 23px; } .product-card h3 { font-size: 25px; }
  .ecosystem-rail { grid-template-columns: 1fr; } .ecosystem-rail div { padding: 13px 17px; }
  .workflow-screen { grid-template-columns: 84px minmax(0,1fr); } .work-nav { padding-left: 5px; padding-right: 5px; } .work-nav span { padding-left: 4px; padding-right: 4px; } .workflow-main { padding: 14px; } .workflow-canvas { grid-template-columns: 1fr; } .flow-connect { display: none; }
  .gateway-metrics, .knowledge-layout { grid-template-columns: 1fr; } .call-chart { min-height: 130px; } .source-files { min-height: 210px; }
  .cases-grid { grid-template-columns: 1fr; } .case-card.large, .case-card.medium, .case-card.small { grid-column: span 1; }
  .about-stats { grid-template-columns: 1fr; } .about-stats div { min-height: 120px; }
  .cta-band { padding: 58px 0; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 27px 20px; } .footer-brand { grid-column: 1/-1; } .footer-column:last-child { grid-column: auto; } .footer-bottom { align-items: flex-start; flex-direction: column; }
  .detail-metrics { grid-template-columns: 1fr; } .detail-metrics div { border-right: 0; }
  .subnav b { display: none; } .subnav-inner { min-height: 50px; justify-content: center; }
  .api-art .api-layers { inset: 34px 20px; } .api-layer { padding: 10px; }
  .timeline { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .contact-form { grid-template-columns: 1fr; } .field.full { grid-column: auto; }
  .modal { padding: 10px; } .modal-panel { padding: 24px 18px; border-radius: 17px; }
}

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

/* --------------------------------------------------------------------------
   Light collaboration-platform refresh
   Inspired by the supplied reference's airy gradient, gentle blue-violet
   surfaces and editorial long-page rhythm. Product UI and copy remain unique.
   -------------------------------------------------------------------------- */
:root {
  --ink: #20263a;
  --ink-soft: #646d86;
  --muted: #929aae;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #e6e8f2;
  --navy: #29314c;
  --blue: #4b6ff5;
  --cyan: #4faee7;
  --teal: #4d9e93;
  --lime: #e4edff;
  --violet: #8065f3;
  --orange: #ef9e72;
  --container: min(1080px, calc(100vw - 48px));
  --shadow-sm: 0 12px 30px rgba(69, 88, 151, .07);
  --shadow-lg: 0 24px 60px rgba(78, 87, 157, .14);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

body { background: #fff; letter-spacing: -.01em; }
.section { padding: 128px 0; }
.section-kicker { color: var(--blue); font-size: 12px; letter-spacing: .04em; text-transform: none; }
.section-kicker::before { display: none; }
.section-heading { max-width: 780px; font-size: clamp(34px, 3.55vw, 48px); letter-spacing: -.055em; line-height: 1.18; }
.section-description { color: #737c94; font-size: 15px; line-height: 1.75; }
.button, .nav-cta { min-height: 40px; border-radius: 6px; font-size: 13px; }
.button.primary, .nav-cta { background: #4d70f5; box-shadow: 0 5px 12px rgba(67, 104, 238, .18); }
.button.primary:hover, .nav-cta:hover { background: #3e61e7; box-shadow: 0 8px 17px rgba(67, 104, 238, .22); }
.button.secondary { border-color: #9bb0fd; color: #4369ec; background: rgba(255,255,255,.82); }
.button.secondary:hover { color: #3559d8; border-color: #607ff3; }
.button.dark { color: #fff; background: #4d70f5; }
.button.dark:hover { color: #fff; background: #3e61e7; }
.button.link { color: #4a6ff1; }

.site-header { height: 64px; border-bottom: 1px solid rgba(233,235,244,.85); background: rgba(255,255,255,.92); }
.nav-wrap { max-width: 1120px; }
.brand { gap: 8px; font-size: 14px; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #5984f7, #5b47d9); box-shadow: none; }
.brand-mark::before, .brand-mark::after { width: 7px; height: 7px; border-width: 1.5px; }
.brand-copy small { font-size: 7px; letter-spacing: .1em; }
.nav-links { gap: 23px; color: #3e465e; font-size: 12px; }
.nav-cta { min-height: 32px; padding: 0 13px; font-size: 11px; }

.hero { min-height: 560px; padding: 78px 0 92px; color: var(--ink); background: linear-gradient(118deg, #f5f6ff 0%, #efedff 45%, #eff7ff 100%); }
.hero::before { width: 650px; height: 510px; top: -200px; right: 0; background: radial-gradient(circle, rgba(177,164,255,.32) 0, rgba(151,185,255,.15) 39%, transparent 68%); }
.hero::after { right: -7%; bottom: -48px; left: -7%; height: 150px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #fff; mask-image: none; }
.hero-grid { grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr); gap: 60px; }
.eyebrow { min-height: 25px; padding: 3px 8px; border-color: #d3d8fb; color: #5b62b8; background: rgba(255,255,255,.58); font-size: 10px; letter-spacing: .04em; }
.hero-copy h1 { max-width: 540px; margin-top: 14px; color: #242c43; font-size: clamp(39px,4.45vw,59px); line-height: 1.14; letter-spacing: -.075em; }
.hero-copy h1 em { color: #775cf0; text-shadow: 0 5px 16px rgba(122,92,240,.14); }
.hero-copy p { max-width: 445px; color: #626b84; font-size: 14px; line-height: 1.75; }
.hero-actions { margin-top: 27px; }
.hero-proof { margin-top: 30px; color: #62708d; font-size: 11px; }
.hero-proof svg { color: #5f73ed; }

.hero-console { padding: 8px; border-color: rgba(154,161,232,.24); border-radius: 11px; background: rgba(255,255,255,.7); box-shadow: 0 22px 50px rgba(109,102,187,.15); transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.hero-console::before { bottom: -22px; background: rgba(129,110,244,.2); }
.console-window { border-color: #ebecf5; border-radius: 8px; color: #5c6780; background: #fff; }
.console-top { height: 35px; border-color: #edf0f6; background: #fff; }
.console-dots i { background: #cdd3e8; }
.console-title { color: #7e879d; font-size: 9px; }
.live { color: #6c9b98; font-size: 8px; }
.live i { background: #6fcab5; }
.console-body { grid-template-columns: 105px minmax(0,1fr); min-height: 295px; }
.console-sidebar { border-color: #edf0f6; color: #98a1b3; background: #fbfcff; }
.console-sidebar b { color: #5c6680; }
.console-sidebar span.active { color: #5d63d3; background: #eeeefe; }
.console-main { padding: 16px; }
.console-main h3 { color: #3d465d; font-size: 15px; }
.status { color: #6b9e91; background: #e9f8f3; }
.work-query { border-color: #e4e6f4; color: #606a83; background: #f7f8ff; font-size: 9px; }
.agent-row { border-color: #edf0f6; }
.agent-icon { color: #5e65d5; background: #e8e9ff; }
.agent-row strong { color: #5c6780; }
.agent-row small { color: #9aa3b6; }
.progress { background: #e7eaf7; }.progress i { background: linear-gradient(90deg, #7c8aff, #99d9ec); }

.logo-strip { border-color: #f0f1f6; background: #fff; }.logo-strip-inner { min-height: 75px; }.logo-label { color: #9aa2b2; font-size: 10px; }.logo-items { color: #a8afbf; font-size: 16px; }

.products-header { display: block; text-align: center; }.products-header .section-heading, .products-header .section-description { margin-right: auto; margin-left: auto; }.products-header .section-description { margin-top: 16px; }
.products-grid { max-width: 920px; gap: 14px; margin: 44px auto 0; }.product-card { min-height: 435px; padding: 23px; border-color: #edf0f5; border-radius: 10px; box-shadow: 0 10px 25px rgba(77,91,146,.055); }.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(76,83,151,.12); }
.product-card.orb { background: linear-gradient(140deg,#f4f7ff 0%,#f7fbff 100%); }.product-card.llm { color: var(--ink); border-color: #ebe9fb; background: linear-gradient(140deg,#f6f3ff 0%,#faf8ff 100%); }.product-card.wy { background: linear-gradient(140deg,#f5fbff 0%,#f5f8ff 100%); }
.product-symbol { width: 40px; height: 40px; border-radius: 9px; color: #5c70e7; background: #e6edff; }.llm .product-symbol { color: #7259d6; background: #e9e2ff; }.wy .product-symbol { color: #3e9ac2; background: #e0f6fb; }
.product-index { color: #a4aabe; font-size: 9px; }.product-card h3 { margin-top: 19px; color: #32394f; font-size: 23px; }.product-card h3 small, .llm h3 small { color: #9098a8; }.product-card p, .llm p { color: #687189; font-size: 12px; }.product-mini { margin: 21px -2px 17px; }.orb-mini { border-color: #e3e8f8; border-radius: 9px; background: linear-gradient(150deg,#edf4ff,#fff); }.llm-mini { border-color: #e1dcf6; background: #f7f4ff; }.llm-mini::after { border-color: #bfb1ef; box-shadow: 0 0 0 24px rgba(162,145,232,.08),0 0 0 48px rgba(162,145,232,.04); }.code-line { color: #71748e; }.code-line b { color: #6e59d5; }.endpoint { border-color: #8e76e7; color: #5c5680; background: #fff; }.wy-mini { border-color: #d9e9f5; background: linear-gradient(155deg,#f5fbff,#f8f9ff); }.knowledge-flow span { border-color: #bfe0ef; color: #3c90bb; }.knowledge-flow i { color: #9cc9df; }.knowledge-result b { background: #cceafa; }.knowledge-result b:nth-child(2) { background: #a9d4eb; }.knowledge-result b:nth-child(3) { background: #6da5d0; }.product-card .button.link, .llm .button.link { color: #5272e9 !important; font-size: 12px; }

.ecosystem { color: var(--ink); background: linear-gradient(180deg,#f7f8ff 0%,#f4f8ff 100%); }.ecosystem .section-heading { color: #2e364c; }.ecosystem .section-description { color: #737c94; }.ecosystem-diagram { max-width: 900px; min-height: 340px; margin-right: auto; margin-left: auto; }.ecosystem-diagram::before { background: linear-gradient(90deg,rgba(116,124,230,.08),rgba(116,124,230,.42),rgba(116,124,230,.08)); }.eco-node { min-height: 190px; border-color: #e4e8f7; border-radius: 12px; background: rgba(255,255,255,.8); }.eco-node > span { color: #fff; background: #7184ef; }.eco-node h3 { color: #41485e; font-size: 18px; }.eco-node p { color: #788198; font-size: 11px; }.eco-node.core { min-height: 230px; border-color: #d9defb; background: linear-gradient(145deg,#f0edff,#eff7ff); box-shadow: 0 0 0 8px rgba(135,132,237,.06); }.eco-node.core > span { background: #765be4; }.node-pills small { color: #66718c; background: #fff; border: 1px solid #e6e9f4; }.ecosystem-rail { border-color: #e6eaf5; background: #e6eaf5; }.ecosystem-rail div { background: rgba(255,255,255,.8); }.ecosystem-rail b { color: #586edb; }.ecosystem-rail span { color: #8b93a5; }

.feature-copy h2, .about h2, .api-copy h2 { color: #2f374c; font-size: clamp(31px,3.25vw,43px); }.feature-copy > p, .about p, .api-copy p { color: #737c93; font-size: 15px; }.feature-list i { color: #5f6de2; background: #e9edff; }.feature-list strong { color: #465067; }.feature-list span { color: #8b94a6; }
.workbench-preview { border-color: #dfe7f6; border-radius: 14px; background: #f6f8ff; box-shadow: 0 18px 40px rgba(100,119,182,.1); }.preview-browser { border-color: #e6eaf4; border-radius: 9px; }.browser-bar { border-color: #ecedf5; }.workflow-screen { min-height: 310px; }.work-nav { border-color: #edf0f7; }.work-nav span.active { color: #5d66dc; background: #ebefff; }.workflow-canvas { background-color: #f8f9ff; }.flow-box { border-color: #dce4f7; }.flow-box i { color: #5e6fe3; background: #e7edff; }.flow-box b { color: #66728c; }.flow-connect { border-color: #9ba9f4; }
.gateway-board { border-color: #e1e3f7; border-radius: 14px; color: #606c86; background: #f7f5ff; box-shadow: 0 18px 42px rgba(116,92,186,.1); }.gateway-head { border-color: #e5e4f4; background: #fff; }.gateway-head strong { color: #4e5370; }.gateway-head small { color: #569684; background: #eaf9f1; }.gateway-route { border-color: #e2e0f5; background: #fff; }.gateway-route span { color: #68718d; background: #f4f4fe; }.gateway-route i { color: #9aa4c1; }.gateway-route b { color: #725bd0; }.line-chart,.call-chart { border-color: #e5e3f3; background: #fff; }.chart-label { color: #959bae; }.chart-label b { color: #5a6178; }.chart-grid { background-image: linear-gradient(rgba(131,127,194,.12) 1px, transparent 1px); }.call-chart .big-number { color: #715bd0; }.call-chart p { color: #858fa4; }.provider-stack span { border-color: #e1ddf5; color: #70638f; background: #f6f4ff; }
.knowledge-board { border-color: #e6e4f5; border-radius: 14px; background: #f7f6ff; box-shadow: 0 18px 42px rgba(108,91,177,.1); }.knowledge-toolbar { border-color: #e3e0f4; }.knowledge-layout { gap: 10px; }.source-files,.knowledge-answer { border-color: #e4e1f3; }.file-row { border-color: #f0edfa; }

.cases { background: #fff; }.cases > .container > .section-kicker, .cases > .container > .section-heading, .cases > .container > .section-description { display: block; margin-right: auto; margin-left: auto; text-align: center; }.cases-grid { max-width: 930px; margin-right: auto; margin-left: auto; }.case-card { min-height: 220px; border-color: #e9ebf3; border-radius: 10px; background: #f8faff; }.case-card.large { color: var(--ink); background: linear-gradient(145deg,#f0efff,#eff7ff); }.case-card.medium { background: #f7fbff; }.case-card.small { background: #fbfaff; }.case-card::after { color: #8991ea; }.case-card .case-icon, .large .case-icon { color: #5a6fe2; background: #e9edff; }.case-card h3 { color: #454d63; }.case-card p,.large p { color: #747d94; }.case-card a,.large a { color: #526ee4; }

.pricing { color: var(--ink); background: linear-gradient(180deg,#f3f4ff 0%,#f5f8ff 100%); }.pricing::before { opacity: .45; background-image: radial-gradient(circle at 10% 30%,#e2dcff 0,transparent 24%),radial-gradient(circle at 91% 100%,#d7ecff 0,transparent 24%); }.pricing .section-heading { color: #30374c; }.pricing .section-description { color: #737d94; }.price-card { min-height: 365px; border-color: #e1e4f3; border-radius: 12px; background: rgba(255,255,255,.76); }.price-card.featured { transform: translateY(-8px); border-color: #bcc8ff; color: var(--ink); background: linear-gradient(145deg,#eff0ff,#f7f6ff); box-shadow: 0 20px 48px rgba(83,89,176,.14); }.price-card .price-tag,.featured .price-tag { color: #6d75ad; }.price-card h3,.featured h3 { color: #454d65; }.price-card > p,.featured > p { color: #7e879c; }.price-model,.featured .price-model { color: #536be1; }.price-features,.featured .price-features { color: #747d92; }.price-features li::before,.featured .price-features li::before { color: #6476e7; }

.about { background: linear-gradient(180deg,#fff 0%,#f5f8ff 100%); }.about-stats { border-color: #e4e8f3; background: #e4e8f3; border-radius: 12px; }.about-stats div { min-height: 135px; background: rgba(255,255,255,.84); }.about-stats b { color: #5871e7; }.about-stats span { color: #68748d; }.about-stats small { color: #9aa3b6; }
.cta-band { padding: 70px 0; background: linear-gradient(105deg,#eff1ff 0%,#e8f4ff 100%); color: #323b57; }.cta-band h2 { font-size: clamp(30px,3.6vw,45px); }.cta-band p { color: #717c96; }.cta-band .button.dark { background: #4f70f4; color: #fff; }
.site-footer { color: #7f899d; background: #fff; border-top: 1px solid #eceef5; }.footer-brand .brand { color: #424a60; }.footer-brand p { color: #929bad; }.footer-column h3 { color: #505970; }.footer-column a { color: #8490a4; }.footer-column a:hover { color: #4c6eea; }.footer-bottom { border-color: #edf0f5; color: #a0a7b5; }

/* Detail pages use the same soft editorial system rather than a dark product shell. */
.page-hero, .page-hero.orb-page, .page-hero.llm-page, .page-hero.wy-page { padding: 78px 0 70px; color: var(--ink); background: linear-gradient(118deg,#f4f5ff 0%,#f0edff 51%,#edf7ff 100%); }.breadcrumb { color: #7b849a; }.breadcrumb a:hover { color: #5b6ee5; }.breadcrumb span { color: #a5adbe; }.page-hero h1 { color: #2d354c; font-size: clamp(43px,4.5vw,62px); }.page-hero h1 small { color: #7772b8; font-size: 12px; }.page-hero p { color: #68728a; font-size: 15px; }.page-hero .button.dark { background: #4e70f5; }.subnav { top: 64px; border-color: #eceef5; background: rgba(255,255,255,.94); }.subnav b { color: #596177; }.subnav-links { color: #7b8497; }.subnav-links a:hover { color: #506fe6; }.detail-metrics { border-color: #e9ebf2; }.detail-metrics div { min-height: 118px; border-color: #e9ebf2; }.detail-metrics b { color: #5872e6; }.detail-metrics span { color: #707a90; }.art-center { border-color: #c9c6fb; color: #fff; background: linear-gradient(145deg,#9182f4,#6b71df); box-shadow: 0 0 0 14px rgba(119,113,231,.08),0 0 38px rgba(116,105,226,.22); }.orb-orbit,.orb-orbit::before,.orb-orbit::after { border-color: rgba(118,110,221,.27); }.art-pill { border-color: #d6d9f5; color: #636d83; background: rgba(255,255,255,.86); box-shadow: 0 7px 16px rgba(85,96,154,.1); }.art-pill i { background: #7c87ed; }.api-art { border-color: #d9dff7; background: rgba(255,255,255,.55); }.api-rail { border-color: #b5b9ee; }.api-layer { border-color: #d9def4; color: #66728e; background: rgba(255,255,255,.76); }.api-layer i { color: #6c73b0; background: #edeeff; }.api-layer.core { color: #fff; background: linear-gradient(90deg,#6e7bf0,#8d69e8); box-shadow: 0 0 25px rgba(112,108,228,.21); }.wy-art .book { border-color: #b3aaed; background: linear-gradient(115deg,#d4ceff,#7669cf); box-shadow: 22px 20px 44px rgba(84,71,154,.22); }.wy-art .data-slip { border-color: #d9d7f5; color: #6d668a; background: rgba(255,255,255,.85); box-shadow: 0 13px 25px rgba(87,75,149,.1); }
.architecture { color: var(--ink); background: linear-gradient(180deg,#f7f8ff 0%,#f3f8ff 100%); }.architecture .section-heading { color: #30384e; }.architecture .section-description { color: #737e95; }.arch-card { min-height: 220px; border-color: #e0e5f4; border-radius: 11px; background: rgba(255,255,255,.84); }.arch-card > i { color: #fff; background: #6b7ced; }.arch-card h3 { color: #465067; }.arch-card p { color: #7b8599; }.arch-card ul { color: #68738c; }.arch-card li::before { color: #6576e8; }.arch-arrow { color: #9ea9d4; }.capability-card { min-height: 210px; border-color: #e8eaf2; border-radius: 10px; }.capability-card .cap-icon { color: #5971e4; background: #e9eeff; }.capability-card h3 { color: #495267; }.capability-card p { color: #737d93; }.capability-card li { color: #70809a; background: #f2f5ff; }.api-section { background: #f7f8ff; }.api-card { border-color: #e0e2f5; background: #fafaff; box-shadow: 0 17px 38px rgba(105,101,180,.1); }.api-tabs { border-color: #e6e7f4; background: #fff; }.api-tabs button { color: #8890a5; }.api-tabs button.active { color: #5d68d5; background: #ecedff; }.api-code { color: #667088; }.api-code .purple { color: #8366d7; }.api-code .green { color: #5f8f84; }.api-code .blue { color: #568cd5; }.api-code .orange { color: #c6786b; }.timeline::before { border-color: #d9def3; }.timeline-step i { border-color: #bfc8f1; color: #596fe1; background: #fff; }.timeline-step h3 { color: #4d566c; }.timeline-step p { color: #7b8598; }

@media (max-width: 820px) {
  .site-header { height: 60px; }.mobile-menu { inset: 60px 0 auto; }.subnav { top: 60px; }
  .hero, .page-hero { padding-top: 56px; }.hero { padding-bottom: 74px; }.hero::after { height: 78px; bottom: -25px; }
  .hero-grid,.page-hero-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy h1,.hero-copy p { margin-right: auto; margin-left: auto; }.hero-actions { justify-content: center; }.hero-proof { justify-content: center; }
  .products-grid { max-width: 520px; }.ecosystem-diagram::before { background: linear-gradient(180deg,rgba(116,124,230,.1),rgba(116,124,230,.38),rgba(116,124,230,.1)); }
  .detail-metrics div { min-height: 108px; }.section { padding: 82px 0; }
}

@media (max-width: 560px) {
  :root { --container: min(100vw - 32px, 520px); }.site-header { height: 58px; }.subnav { top: 58px; }.mobile-menu { inset: 58px 0 auto; }
  .hero-copy h1 { font-size: 39px; }.page-hero h1 { font-size: 42px; }.hero-copy p,.page-hero p { font-size: 14px; }.hero-actions { align-items: stretch; }.hero-actions .button { width: 100%; }.hero-proof { gap: 8px 12px; font-size: 10px; }
  .hero-console { transform: none; }.console-body { grid-template-columns: 82px minmax(0,1fr); }.logo-strip-inner { min-height: 100px; }.product-card { min-height: 0; }.product-mini { min-height: 138px; }.ecosystem-rail { grid-template-columns: 1fr 1fr; }.ecosystem-rail div { padding: 13px; }.page-hero { padding-bottom: 46px; }.product-hero-art { min-height: 290px; }
}

/* Product screenshots sourced from the supplied product decks. */
.hero-real-shot,
.real-shot,
.product-page-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(202, 207, 241, .8);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 22px 50px rgba(95, 93, 171, .16);
}

.hero-real-shot { padding: 8px 8px 0; transform: perspective(1300px) rotateY(-2deg) rotateX(1deg); }
.hero-real-shot::before,
.real-shot::before,
.product-page-shot::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c7cde5;
  box-shadow: 11px 0 #d8dced, 22px 0 #e5e8f4;
}

.hero-real-shot img,
.real-shot img,
.product-page-shot img {
  width: 100%;
  border-radius: 7px 7px 0 0;
  object-fit: cover;
  object-position: top center;
}

.hero-real-shot img { aspect-ratio: 1.73; }
.hero-real-shot figcaption,
.real-shot figcaption,
.product-page-shot figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  color: #788197;
  background: rgba(255, 255, 255, .93);
  font-size: 10px;
  font-weight: 700;
}

.hero-real-shot figcaption span,
.real-shot figcaption span,
.product-page-shot figcaption span {
  padding: 3px 6px;
  border-radius: 4px;
  color: #5e6ddd;
  background: #eef0ff;
  font-size: 8px;
  letter-spacing: .02em;
}

.product-mini.product-shot {
  position: relative;
  display: flex;
  min-height: 0;
  padding: 5px 5px 0;
  overflow: hidden;
  border: 1px solid #e2e6f3;
  border-radius: 8px;
  background: #fff;
}

.product-mini.product-shot img {
  width: 100%;
  min-height: 129px;
  max-height: 129px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  object-position: top center;
}

.product-mini.product-shot figcaption {
  position: absolute;
  right: 9px;
  bottom: 8px;
  padding: 3px 6px;
  border: 1px solid rgba(218, 224, 244, .8);
  border-radius: 4px;
  color: #68728a;
  background: rgba(255, 255, 255, .9);
  font-size: 8px;
  font-weight: 700;
}

.product-mini.llm-mini { background: #f9f8ff; }
.product-mini.llm-mini img { object-fit: contain; background: #1a1a22; }
.product-mini.wy-mini img { object-position: center top; }

.real-shot { padding: 8px 8px 0; }
.real-shot img { display: block; aspect-ratio: 1.62; }
.real-shot-orb img { object-position: top center; }
.real-shot-knowledge img { object-position: top center; }
.real-shot-llm { background: #f3f6fa; }
.real-shot-llm img { aspect-ratio: 1.93; object-fit: contain; background: #f3f6fa; }
.real-shot-llm figcaption { background: #fff; }

.product-page-shot { width: 100%; max-width: 600px; padding: 8px 8px 0; }
.product-page-shot img { aspect-ratio: 1.62; }
.product-page-shot.llm-shot img { aspect-ratio: 1.93; object-fit: contain; background: #f3f6fa; }

@media (max-width: 820px) {
  .hero-real-shot { max-width: 600px; margin: 0 auto; transform: none; }
  .real-shot { max-width: 620px; }
}

@media (max-width: 560px) {
  .hero-real-shot { padding: 6px 6px 0; }
  .hero-real-shot figcaption { min-height: 31px; font-size: 9px; }
  .product-mini.product-shot img { min-height: 134px; max-height: 134px; }
  .real-shot figcaption { min-height: 31px; font-size: 9px; }
}

/* Detail-page hero visuals: original screenshots from the supplied decks. */
.page-hero.orb-page .product-hero-art,
.page-hero.wy-page .product-hero-art {
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, .82);
  border-radius: 13px;
  box-shadow: 0 22px 50px rgba(95, 93, 171, .16);
}

.page-hero.orb-page .product-hero-art {
  min-height: 350px;
  background: #fff url('assets/real-pages/orbwork-task-board.png') center top / cover no-repeat;
}

.page-hero.wy-page .product-hero-art {
  min-height: 350px;
  background: #fff url('assets/real-pages/wenyuange-knowledge-view.png') center top / cover no-repeat;
}

.page-hero.llm-page .api-art {
  min-height: 0;
  aspect-ratio: 1.93;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, .82);
  border-radius: 13px;
  background: #f3f6fa url('assets/real-pages/llm-gateway-dashboard.png') center / cover no-repeat;
  box-shadow: 0 22px 50px rgba(95, 93, 171, .16);
}

.page-hero.llm-page .api-art > * { display: none; }

.page-hero.orb-page .product-hero-art > *,
.page-hero.wy-page .product-hero-art > * { display: none; }

@media (max-width: 820px) {
  .page-hero.orb-page .product-hero-art,
  .page-hero.wy-page .product-hero-art { min-height: 310px; max-width: 600px; margin: 0 auto; }
  .page-hero.llm-page .api-art { width: 100%; max-width: 600px; margin: 0 auto; }
}

/* Unified product brand in the persistent header and footer. */
.brand-copy { font-size: 0; }
.brand-copy::after { content: 'EnterpriseAI'; color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.brand-copy small { display: none; }

/* Keep the value proposition deliberate: the highlighted phrase is never split across lines. */
.hero-title-line { display: block; white-space: nowrap; }
.hero-copy h1 em {
  position: relative;
  display: inline-block;
  padding: 0 .07em .05em;
  color: #775cf0;
  background: linear-gradient(102deg, rgba(126, 101, 242, .1), rgba(175, 142, 255, .22));
  border-radius: .12em;
  text-shadow: none;
}
.hero-copy h1 em::after {
  content: '';
  position: absolute;
  right: .08em;
  bottom: .02em;
  left: .08em;
  height: .07em;
  border-radius: 999px;
  background: linear-gradient(90deg, #7159ed, #aa8aff);
}

@media (max-width: 400px) {
  .hero-copy h1 { font-size: 34px; }
}

/* CTA heading follows the same intentional two-line rhythm as the hero. */
.cta-title-line { display: block; white-space: nowrap; }
.cta-band h2 em {
  position: relative;
  display: inline-block;
  padding: 0 .05em .07em;
  color: #7059e9;
  font-style: normal;
}
.cta-band h2 em::after {
  content: '';
  position: absolute;
  right: .04em;
  bottom: .02em;
  left: .04em;
  height: .07em;
  border-radius: 999px;
  background: linear-gradient(90deg, #7159ed, #a98bff);
}

@media (max-width: 560px) {
  .cta-band h2 { font-size: 30px; }
}