/* A restrained, responsive system for the public site. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-optical-sizing: auto;
}

body { font-family: inherit; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: inherit; font-optical-sizing: auto; }
p, li { line-height: 1.72; }

.site-header {
  background: rgba(7, 25, 36, .84);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 32px rgba(3, 18, 30, .12);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.site-nav a { letter-spacing: .01em; }
.site-nav a:hover, .site-nav a.active { background: rgba(76, 170, 220, .17); }
.site-nav a:focus-visible, .button:focus-visible, .report-link:focus-visible,
.report-faq summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #62c5f5;
  outline-offset: 3px;
}

.page-hero, .report-hero {
  background: radial-gradient(circle at 82% 14%, rgba(60, 143, 196, .18), transparent 37%),
              linear-gradient(120deg, #081c2a 0%, #123449 100%);
}
.report-hero { padding: clamp(84px, 9vw, 132px) 0 clamp(72px, 8vw, 108px); }
.report-hero:has(.report-hero-noimage) { padding: clamp(64px, 6vw, 88px) 0; }
.report-hero h1 { letter-spacing: -.035em; line-height: 1.08; }
.report-lead { line-height: 1.72; color: rgba(235,246,251,.81); }
.report-hero img { border-radius: 18px; }

.section.report-section { padding: clamp(76px, 7vw, 112px) 0; }
.section.report-section h2 { letter-spacing: -.025em; line-height: 1.15; }
.report-home .section-header p { color: #425b69; }
.report-home .section-header { margin-bottom: 36px; }
.report-card, .report-link, .report-steps li {
  border-radius: 20px;
  border-color: #dce6ec;
  box-shadow: 0 8px 28px rgba(19, 57, 79, .05);
}
.report-card, .report-link, .button, .nav-toggle { transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, background-color .2s ease, border-color .2s ease; }
.report-card:hover, .report-link:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(19,57,79,.1); }
.button:active, .report-link:active, .nav-toggle:active { transform: scale(.98); transition-duration: .1s; }
.button { border-radius: 13px; }
.report-placeholder { border-radius: 18px; }
.report-table { border-radius: 16px; overflow: hidden; }
.report-faq details { padding: 20px 0; }
.report-faq summary { list-style-position: outside; }
.report-eyebrow { color: #2676a4; font-size: .76rem; letter-spacing: .12em; font-weight: 700; }

/* The reference composition is reproduced with real site assets and accurate conditions. */
.system-visual-section { background: #f5f8fb !important; color: #21384a !important; }
.system-visual { margin: 0; padding: clamp(24px, 4vw, 64px); background: #fff; border: 1px solid #e0e8ee; border-radius: 34px; box-shadow: 0 24px 70px rgba(20,53,75,.09); overflow: hidden; }
.system-visual figcaption { text-align: center; margin: 0 auto clamp(32px, 4vw, 58px); max-width: 940px; }
.system-overline { display: block; color: #7b91a4; font-size: .78rem; font-weight: 700; letter-spacing: .18em; margin-bottom: 12px; }
.system-visual h2 { margin: 0 0 13px !important; font-size: clamp(1.8rem, 3.5vw, 3.1rem) !important; letter-spacing: -.03em; color: #1d3044 !important; }
.system-visual figcaption p { margin: 0; color: #62788a; font-size: clamp(.95rem, 1.15vw, 1.1rem); }
.system-visual-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.73fr) minmax(0,1fr); gap: clamp(18px, 2.7vw, 42px); align-items: center; }
.system-node { min-width: 0; position: relative; }
.system-image-frame { border-radius: 20px; overflow: hidden; background: #122c3d; box-shadow: 0 16px 38px rgba(19,52,72,.16); aspect-ratio: 1.28; display: grid; place-items: center; }
.system-image-frame img { width: 100%; height: 100%; object-fit: contain; }
.system-node-caption { display: grid; gap: 4px; margin-top: 18px; text-align: center; }
.system-node-caption strong { font-size: 1.06rem; color: #203e52; }
.system-node-caption span { color: #667d8c; font-size: .86rem; }
.system-hub { position: relative; display: grid; justify-items: center; gap: 26px; z-index: 1; }
.system-hub::before, .system-hub::after { content: ""; position: absolute; top: 28%; width: 44%; border-top: 2px dashed #84b2e3; z-index: -1; }
.system-hub::before { right: calc(100% - 8px); }
.system-hub::after { left: calc(100% - 8px); }
.system-cloud { width: min(100%, 250px); min-height: 175px; border-radius: 36% 42% 40% 38%; background: linear-gradient(150deg,#fff,#e8f3ff); border: 1px solid #a9cdfb; box-shadow: 0 12px 40px rgba(37,105,183,.13), inset 0 2px 9px #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; }
.cloud-glyph { color: #4194e5; line-height: 1; font-size: 2.3rem; }
.system-cloud strong { color: #1d4e7b; font-size: 1.35rem; }
.system-cloud span:last-child { color: #5d7792; font-size: .76rem; }
.system-event { display: flex; gap: 12px; width: 100%; padding: 16px; background: #fff; border: 1px solid #e2e9ef; border-radius: 17px; box-shadow: 0 10px 27px rgba(30,65,85,.08); }
.event-dot { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%; background: #e57466; margin-top: 4px; box-shadow: 0 0 0 5px #fff2ef; }
.system-event div { display: grid; gap: 3px; }
.system-event strong { color: #263d50; font-size: .9rem; }
.system-event span:last-child { color: #6b7e8e; font-size: .73rem; line-height: 1.55; }
.system-screen { position: relative; margin-right: 12%; border: 9px solid #192936; border-bottom-width: 16px; border-radius: 16px; box-shadow: 0 18px 36px rgba(20,48,69,.18); background: #fff; aspect-ratio: 1.38; display: grid; place-items: center; }
.system-screen > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 5px; }
.system-screen .system-phone { position: absolute; width: 29%; height: 93%; object-fit: cover; object-position: top; right: -19%; bottom: -12%; border: 5px solid #1a2832; border-radius: 14px; background: #fff; box-shadow: 0 14px 26px rgba(14,39,60,.2); }
.system-capabilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: clamp(38px,5vw,70px); border-top: 1px solid #e5ebef; }
.system-capabilities div { display: grid; gap: 5px; padding: 22px 18px 8px; border-right: 1px solid #e5ebef; }
.system-capabilities div:last-child { border-right: 0; }
.system-capabilities span { color: #3d8cdf; font-size: .8rem; font-weight: 800; }
.system-capabilities strong { color: #253e51; font-size: .95rem; }
.system-capabilities small { color: #6d8290; font-size: .77rem; }
.system-fine-print { color: #748592; font-size: .78rem; line-height: 1.7; margin: 24px 0 0; text-align: center; }
.report-media-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; max-width: 1100px; }
.report-media-grid figure { margin: 0; background: #fff; border: 1px solid #dce6ec; border-radius: 20px; overflow: hidden; }
.report-media-grid img { display: block; width: 100%; height: 320px; object-fit: contain; }
.report-media-grid figcaption { padding: 16px 20px; font-size: .9rem; color: #4c6574; }
.slicer-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.slicer-gallery figure { margin: 0; border: 1px solid #dce6ec; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 28px rgba(19,57,79,.05); }
.slicer-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1653 / 1056; object-fit: contain; }
.slicer-gallery figcaption { display: grid; gap: 3px; padding: 18px 22px 21px; color: #587184; font-size: .9rem; }
.slicer-gallery figcaption strong { color: #243f52; font-size: 1rem; }
.demo-caption { color: #668093; font-size: .78rem; text-align: center; padding: 8px 12px 0; }
.qr-sidebar { display: none !important; }

@media (max-width: 900px) {
  .system-visual-grid { grid-template-columns: 1fr; max-width: 540px; margin: auto; gap: 26px; }
  .system-image-frame { max-height: 290px; }
  .system-hub::before, .system-hub::after { display: none; }
  .system-cloud { min-height: 140px; }
  .system-capabilities { grid-template-columns: repeat(2, 1fr); }
  .system-capabilities div:nth-child(2) { border-right: 0; }
  .system-capabilities div:nth-child(-n+2) { border-bottom: 1px solid #e5ebef; }
  .report-media-grid { grid-template-columns: 1fr; }
  .slicer-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .system-visual { padding: 22px 18px; border-radius: 24px; }
  .system-visual figcaption { margin-bottom: 30px; }
  .system-screen { margin-right: 13%; }
  .system-capabilities div { padding: 16px 10px; }
  .report-hero { padding: 70px 0 62px; }
  .section.report-section { padding: 60px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .report-card, .report-link, .button, .nav-toggle { transition: background-color .15s ease, border-color .15s ease; }
  .report-card:hover, .report-link:hover, .button:active, .report-link:active, .nav-toggle:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #071923; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { background: #06131d; }
  .report-card, .report-link, .system-visual { border-color: #6b8391; }
  .report-lead, .system-visual figcaption p { color: #344e5e; }
  .report-hero .report-lead { color: #fff; }
}