:root {
  color-scheme: light;
  --ink: #102b36;
  --muted: #4c6570;
  --sea: #006f8e;
  --deep: #07344a;
  --line: #c4d5dc;
  --paper: #f6faf9;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.6; }
button { font: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffda83; outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; letter-spacing: 0; }
.container, .header-inner, .footer-inner { width: min(1260px, calc(100% - 88px)); margin-inline: auto; }
main:focus { outline: none; }

.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .3); background: rgb(4 38 55 / .2); backdrop-filter: blur(10px); }
.header-inner { min-height: 74px; display: flex; align-items: center; gap: 35px; }
.brand-link { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand-lockup { width: 155px; height: auto; }
.brand-symbol, .brand-mobile-name { display: none; }
.main-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; white-space: nowrap; }
.main-nav a { padding: 25px 0 22px; border-bottom: 2px solid transparent; color: rgb(255 255 255 / .78); text-decoration: none; font-size: 13px; font-weight: 680; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-color: #d6f8ff; color: #fff; }
.preview-label { margin-left: 4px; color: rgb(255 255 255 / .68); font-size: 11px; font-weight: 680; white-space: nowrap; }

.eyebrow { color: #87dfec; font-size: 12px; line-height: 1.5; font-weight: 780; }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; width: fit-content; text-decoration: none; font-size: 14px; font-weight: 740; }
.text-link > span { font-size: 20px; line-height: 1; transition: transform .25s ease; }
.text-link:hover > span { transform: translateX(4px); }
.primary-link { padding: 11px 21px; border-radius: 4px; background: #e9f9fa; color: #07384d; box-shadow: 0 8px 28px rgb(0 27 39 / .14); }
.primary-link:hover { background: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.home-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(760px, calc(100dvh - 125px)); background: #236f92; color: #fff; }
.hero-image { position: absolute; z-index: -2; inset: 0; overflow: hidden; background: #143d59; }
.hero-image::before { content: ""; position: absolute; inset: 0; background: none; }
.hero-image.is-fallback::before { background-image: none; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-playing { opacity: 1; }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(4 35 54 / .45), rgb(3 37 55 / .12) 35%, rgb(2 37 54 / .31) 72%, rgb(4 39 50 / .52)); pointer-events: none; }
.hero-content { min-height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 35px; padding-block: 112px 44px; text-align: center; }
.hero-message { max-width: 950px; animation: rise-in .5s ease both; text-shadow: 0 2px 22px rgb(0 25 38 / .32); }
.hero-kicker { margin-bottom: 12px; color: #e1f9ff; font-size: 12px; font-weight: 760; }
.home-hero h1 { color: #fff; font-size: 84px; line-height: 1.12; font-weight: 760; }
.home-hero h1 span { font-weight: 480; }
.hero-statement { margin-top: 12px; color: #fff; font-size: 27px; line-height: 1.35; font-weight: 690; }
.hero-support { max-width: 700px; margin: 13px auto 0; color: #e8f6f7; font-size: 16px; line-height: 1.65; font-weight: 510; }
.hero-choices { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 40px; max-width: 100%; animation: rise-in .5s .1s both; }
.hero-choice { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 49px; padding: 7px 1px; border: 0; border-bottom: 1px solid rgb(255 255 255 / .68); background: transparent; color: #fff; text-align: left; text-decoration: none; text-shadow: 0 1px 12px rgb(0 28 39 / .45); font-size: 16px; font-weight: 700; transition: border-color .2s ease, color .2s ease; }
.hero-choice:hover, .hero-choice:focus-visible { border-color: #fff; color: #e5faff; }
.hero-choice span { font-size: 21px; line-height: 1; transition: transform .2s ease; }
.hero-choice:hover span { transform: translate(3px, -3px); }

.section { padding-block: 94px; }
.products-section { background: #f7fbfa; color: var(--ink); }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr); gap: 0 60px; max-width: 1150px; margin-bottom: 55px; }
.section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 18px; color: var(--sea); }
.section-intro h2 { max-width: 800px; font-size: 43px; line-height: 1.24; font-weight: 730; }
.section-intro > p:last-child { align-self: end; color: var(--muted); font-size: 16px; line-height: 1.8; }
.product-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #aec6cb; }
.product-lane { position: relative; display: block; min-width: 0; min-height: 330px; padding: 28px 58px 30px 0; border-bottom: 1px solid #aec6cb; text-decoration: none; transition: background .25s ease; }
.product-lane + .product-lane { padding-left: 42px; border-left: 1px solid #aec6cb; }
.product-lane:hover { background: rgb(27 126 141 / .05); }
.lane-index { display: block; margin-bottom: 37px; color: #668994; font-size: 12px; font-weight: 770; }
.lane-label { color: #007897; font-size: 12px; font-weight: 760; }
.product-lane.prism .lane-label { color: #39788a; }
.product-lane h3 { max-width: 510px; margin-top: 10px; color: #12313b; font-size: 27px; line-height: 1.36; font-weight: 730; }
.product-lane p { max-width: 490px; margin-top: 13px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.lane-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 25px; color: #066c84; font-size: 13px; font-weight: 780; }
.lane-arrow { font-size: 19px; line-height: 1; transition: transform .25s ease; }
.product-lane:hover .lane-arrow { transform: translate(3px, -3px); }

.product-page { position: relative; isolation: isolate; overflow: hidden; background: #176f8d; color: #fff; }
.product-page::before { content: ""; position: absolute; z-index: -3; inset: 0; background: none; }
.product-page.prism::before { background-image: none; }
.product-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.product-media .hero-video { object-position: center; }
.product-page::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(4 42 59 / .57); pointer-events: none; }
.product-page.prism::after { background: linear-gradient(90deg, rgb(2 22 48 / .62), rgb(2 31 57 / .39) 55%, rgb(2 39 64 / .24)); }
.product-hero .container { min-height: 550px; padding-bottom: 76px; }
.page-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 74px; margin-bottom: 75px; padding-top: 86px; color: #d5ebec; font-size: 12px; }
.page-breadcrumb a { text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.product-hero .eyebrow, .scenario-hero .eyebrow { color: #aff1ef; }
.product-hero h1 { max-width: 920px; margin: 15px 0 16px; color: #fff; font-size: 68px; line-height: 1.17; font-weight: 740; }
.product-hero-statement { max-width: 920px; margin-bottom: 30px; color: #effbfa; font-size: 25px; line-height: 1.5; font-weight: 520; }
.scenario-list-section { padding-block: 66px 88px; border-top: 1px solid rgb(255 255 255 / .38); }
.scenario-list-section h2 { margin-bottom: 23px; color: #fff; font-size: 29px; }
.problem-list { border-top: 1px solid rgb(255 255 255 / .45); }
.problem-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid rgb(255 255 255 / .38); }
.problem-row span { color: #c8e8eb; font-size: 13px; font-weight: 700; }
.problem-row p { max-width: 880px; color: #fff; font-size: 18px; line-height: 1.55; font-weight: 640; }
.scenario-examples { margin-top: 55px; }
.scenario-examples h3 { margin-bottom: 15px; color: #d5f1f1; font-size: 14px; font-weight: 740; }
.scenario-list { border-top: 1px solid rgb(255 255 255 / .38); }
.scenario-list a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 24px; align-items: center; gap: 20px; min-height: 74px; border-bottom: 1px solid rgb(255 255 255 / .38); text-decoration: none; }
.scenario-list a:hover { color: #d9fdff; }
.scenario-list a span:first-child { color: #c8e8eb; font-size: 13px; font-weight: 700; }
.scenario-list a strong { font-size: 16px; line-height: 1.5; font-weight: 680; }
.scenario-list a span:last-child { text-align: right; font-size: 23px; }
.boundary-disclosure { margin-top: 55px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .36); color: #e0eef0; font-size: 13px; }
.boundary-disclosure summary { width: fit-content; color: #e4fcfc; font-weight: 750; }
.boundary-disclosure .answer-grid { margin-top: 30px; }
.boundary-disclosure > p { max-width: 930px; margin-top: 28px; line-height: 1.8; }
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.answer-grid > div { min-width: 0; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .32); }
.answer-grid h2 { margin-bottom: 13px; color: #fff; font-size: 21px; line-height: 1.4; }
.answer-grid p { color: #e0eef0; font-size: 14px; line-height: 1.8; }
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { padding: 0 0 12px; color: #e0eef0; font-size: 14px; line-height: 1.7; }

.scenario-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 570px; color: #fff; background: #126b87; }
.scenario-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: none; }
.scenario-hero.prism::before { background-image: none; }
.scenario-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(3 45 64 / .52); }
.scenario-hero .container { padding-bottom: 78px; }
.scenario-hero h1 { max-width: 1050px; margin: 18px 0; color: #fff; font-size: 47px; line-height: 1.32; font-weight: 730; }
.page-lead { max-width: 850px; margin-bottom: 28px; color: #eff8fa; font-size: 18px; line-height: 1.7; }
.answer-section { background: #f7fbfa; color: var(--ink); }
.compact-answer { padding-block: 73px 85px; }
.compact-answer > .container > h2 { color: var(--sea); font-size: 13px; font-weight: 790; }
.scenario-decision { max-width: 900px; margin-top: 15px; color: #183b46; font-size: 27px; line-height: 1.5; font-weight: 680; }
.compact-answer .boundary-disclosure { margin-top: 41px; border-color: #b9cfd1; color: var(--muted); }
.compact-answer .boundary-disclosure summary { color: #0a7188; }
.compact-answer .answer-grid > div { border-color: #b9cfd1; }
.compact-answer .answer-grid h2 { color: var(--ink); }
.compact-answer .answer-grid p, .compact-answer .detail-list li { color: var(--muted); }

.demo-page { position: relative; isolation: isolate; overflow: hidden; min-height: 760px; color: #fff; background: #0d6c84; }
.demo-page::before { content: ""; position: absolute; z-index: -2; inset: -18px; background: none; filter: blur(12px); }
.demo-page.prism::before { background-image: none; }
.demo-page::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgb(2 45 62 / .52); pointer-events: none; }
.demo-page.prism::after { background: rgb(1 51 69 / .53); }
.demo-frame { min-height: inherit; display: grid; grid-template-rows: auto 1fr; padding-top: 74px; }
.demo-rail { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 25px; border-bottom: 1px solid rgb(255 255 255 / .52); color: #e1f3f2; font-size: 12px; }
.demo-rail a { text-decoration: none; }
.demo-rail a:hover { text-decoration: underline; }
.demo-rail span { white-space: nowrap; }
.demo-stage { width: min(900px, 100%); margin: auto; padding-block: 45px 80px; }
.demo-stage h1 { max-width: 900px; color: #fff; font-size: 47px; line-height: 1.3; font-weight: 730; }
.demo-choices { margin-top: 36px; border-top: 1px solid rgb(255 255 255 / .62); }
.demo-choice { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 19px 0; border-bottom: 1px solid rgb(255 255 255 / .45); }
.demo-choice strong { color: #fff; font-size: 16px; font-weight: 740; }
.demo-choice span { color: #e8f6f5; font-size: 15px; line-height: 1.65; }
.demo-status { margin-top: 23px; color: #b9faf2; font-size: 14px; font-weight: 740; }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.control-button { min-width: 115px; min-height: 47px; padding: 8px 16px; border: 1px solid rgb(255 255 255 / .78); border-radius: 4px; background: rgb(4 48 63 / .18); color: #fff; font-weight: 740; }
.control-button:hover:not(:disabled) { background: rgb(255 255 255 / .18); }
.control-button:disabled { opacity: .45; cursor: not-allowed; }
.control-button.primary { border-color: #e9f9fa; background: #e9f9fa; color: #07384d; }
.control-button.primary:hover { background: #fff; }
.control-button.primary span { margin-left: 7px; font-size: 19px; }
.demo-details { margin-top: 28px; padding-top: 17px; border-top: 1px solid rgb(255 255 255 / .37); color: #e0eef0; font-size: 13px; }
.demo-details summary { width: fit-content; color: #e8fcfb; font-weight: 720; }
.demo-details p { max-width: 850px; margin-top: 15px; line-height: 1.75; }
.step-enter { animation: rise-in .38s ease both; }

.site-footer { padding: 55px 0 28px; border-top: 1px solid #cbdcdd; background: #e8f1f0; color: var(--ink); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.footer-logo { width: 148px; height: auto; }
.footer-inner p { margin-top: 13px; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 25px; color: #284e5c; font-size: 13px; font-weight: 690; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--sea); }
.footer-boundary { width: min(1260px, calc(100% - 88px)); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid #c7d8d9; color: #607984; font-size: 11px; line-height: 1.7; }

a, button, summary { cursor: pointer; }

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .container, .header-inner, .footer-inner, .footer-boundary { width: calc(100% - 48px); }
  .hero-content { gap: 32px; }
  .section-intro { grid-template-columns: 1fr; gap: 16px; }
  .section-intro .eyebrow { margin-bottom: 0; }
  .product-lane + .product-lane { padding-left: 28px; }
  .answer-grid { gap: 22px; }
}

@media (max-width: 620px) {
  .container, .header-inner, .footer-inner, .footer-boundary { width: calc(100% - 36px); }
  .header-inner { min-height: 64px; gap: 14px; }
  .brand-lockup { display: none; }
  .brand-symbol { display: block; width: 29px; height: 29px; }
  .brand-mobile-name { display: inline; margin-left: 8px; font-size: 16px; font-weight: 750; }
  .main-nav { gap: 15px; }
  .main-nav a { padding: 19px 0 17px; font-size: 11px; }
  .preview-label { display: none; }
  .home-hero { min-height: calc(100dvh - 116px); }
  .hero-image { background-position: center; }
  .home-hero::before { background: linear-gradient(180deg, rgb(4 36 53 / .44), rgb(4 40 55 / .24) 45%, rgb(4 37 49 / .52)); }
  .hero-content { gap: 24px; padding-block: 104px 29px; }
  .hero-kicker { margin-bottom: 8px; font-size: 11px; }
  .home-hero h1 { font-size: 52px; }
  .hero-statement { margin-top: 12px; font-size: 21px; }
  .hero-support { margin-top: 11px; font-size: 13px; line-height: 1.65; }
  .hero-choices { flex-direction: column; align-items: stretch; width: min(320px, 100%); gap: 4px; }
  .hero-choice { min-height: 45px; gap: 12px; font-size: 14px; }
  .section { padding-block: 65px; }
  .section-intro { margin-bottom: 29px; }
  .section-intro h2 { font-size: 30px; }
  .section-intro > p:last-child { font-size: 14px; }
  .product-lanes { grid-template-columns: 1fr; }
  .product-lane, .product-lane + .product-lane { min-height: 0; padding: 21px 15px 27px 0; border-left: 0; }
  .lane-index { margin-bottom: 16px; }
  .product-lane h3 { font-size: 24px; }
  .product-lane p { font-size: 13px; }
  .page-breadcrumb { min-height: 64px; margin-bottom: 47px; padding-top: 71px; font-size: 11px; }
  .product-hero .container { min-height: 460px; padding-bottom: 60px; }
  .product-hero h1 { font-size: 45px; }
  .product-hero-statement { font-size: 21px; }
  .scenario-list-section { padding-block: 52px 67px; }
  .scenario-list-section h2 { font-size: 25px; }
  .problem-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .problem-row p { font-size: 16px; }
  .scenario-examples { margin-top: 40px; }
  .scenario-list a { grid-template-columns: minmax(0, 1fr) 23px; gap: 2px 12px; min-height: 86px; padding-block: 11px; }
  .scenario-list a span:first-child, .scenario-list a strong { grid-column: 1; }
  .scenario-list a span:last-child { grid-column: 2; grid-row: 1 / 3; }
  .scenario-list a strong { font-size: 16px; }
  .scenario-hero { min-height: 500px; }
  .scenario-hero .container { padding-bottom: 63px; }
  .scenario-hero h1 { font-size: 31px; }
  .page-lead { font-size: 16px; }
  .answer-grid { grid-template-columns: 1fr; gap: 28px; }
  .answer-grid h2 { font-size: 19px; }
  .boundary-disclosure { margin-top: 37px; }
  .compact-answer { padding-block: 55px 67px; }
  .scenario-decision { font-size: 21px; }
  .demo-page { min-height: calc(100dvh - 64px); }
  .demo-frame { padding-top: 64px; }
  .demo-rail { padding-block: 22px; }
  .demo-stage { padding-block: 48px 59px; }
  .demo-stage h1 { font-size: 31px; }
  .demo-choices { margin-top: 27px; }
  .demo-choice { grid-template-columns: 1fr; gap: 3px; padding: 14px 0; }
  .demo-choice strong { font-size: 14px; }
  .demo-choice span { font-size: 14px; }
  .demo-controls { margin-top: 25px; }
  .footer-inner { flex-direction: column; gap: 25px; }
  .footer-links { gap: 17px; }
}

@media (max-width: 380px) {
  .main-nav { gap: 10px; }
  .main-nav a { font-size: 10px; }
  .home-hero h1 { font-size: 47px; }
  .hero-statement { font-size: 19px; }
}

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