.portal-product-detail { width: 100%; overflow-x: clip; background: #fff; color: #111; }
.portal-product-detail .portal-wrap { width: min(1200px, calc(100vw - 32px)); }
.detail-hero { height: 370px; overflow: hidden; background-position: center; background-size: cover; }
.detail-hero--eagleeye { background-image: url('../images/product/DAO-EagleEye/product-banner-new.png'); }
.detail-hero--partner { background: radial-gradient(circle at 78% 40%, #c8e3ff 0, #e8f3ff 32%, transparent 55%), linear-gradient(110deg, #eaf4ff, #f9fbff 52%, #fff4e7); }
.detail-hero-inner { position: relative; display: flex; align-items: center; height: 100%; }
.detail-hero-copy { position: relative; z-index: 1; width: 590px; max-width: 58%; }
.detail-hero h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.3; }
.detail-product-name { color: #ff8800; }
.detail-product-chinese-name { color: #111; }
.detail-product-description { display: block; }
.detail-hero--eagleeye .detail-hero-copy { width: 570px; max-width: 52%; }
.detail-hero--eagleeye h1 { font-size: 32px; }
.detail-hero--eagleeye .detail-intro { max-width: 530px; color: #555; line-height: 1.55; }
.detail-hero--eagleeye .detail-actions { margin-top: 26px; }
.detail-subtitle { margin: 0; font-size: 19px; color: #ff8800; }
.detail-intro { margin: 14px 0 0; font-size: 14px; line-height: 1.8; color: #34465c; }
.detail-actions { margin-top: 26px; }
.detail-primary-action { display: inline-flex; align-items: center; gap: 12px; padding: 10px 26px; border: 0; border-radius: 3px; background: #ff8800; color: #fff; font: inherit; font-size: 15px; line-height: 1.4; text-decoration: none; cursor: pointer; }
.detail-primary-action:hover, .detail-primary-action:focus-visible { background: #e97800; color: #fff; }
.detail-hero-art { position: absolute; right: 6%; top: 48px; width: 300px; height: 270px; border-radius: 32px; background: linear-gradient(145deg, #fff, #d2e7ff); box-shadow: 24px 28px 50px #7798c54d, inset 0 0 0 1px #ffffffa6; transform: rotate(-8deg); }
.detail-hero-art::before { content: ''; position: absolute; inset: 32px; border: 3px solid #b9d9ff; border-radius: 26px; }
.detail-hero-art::after { content: ''; position: absolute; left: 66px; right: 66px; top: 120px; height: 10px; border-radius: 99px; background: #ff9a32; box-shadow: 0 35px 0 #6aa9e6; }
.detail-hero-art span { position: absolute; z-index: 1; top: 53px; width: 64px; height: 64px; border-radius: 50%; background: #ffad52; box-shadow: 0 8px 14px #d17c2563; }
.detail-hero-art span:nth-child(1) { left: 66px; }
.detail-hero-art span:nth-child(2) { right: 66px; background: #408ad5; box-shadow: 0 8px 14px #3172bd52; }
.detail-hero-art span:nth-child(3) { left: 119px; top: 145px; width: 54px; height: 54px; background: #fff; box-shadow: 0 8px 14px #6b92bd42; }
.detail-nav { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 4px 20px #ececec; }
.detail-nav .portal-wrap { display: flex; align-items: center; gap: 30px; min-height: 64px; }
.detail-nav a { display: flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; min-width: 110px; height: 64px; border-bottom: 2px solid transparent; color: #343434; font-size: 16px; text-decoration: none; }
.detail-nav a svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.detail-nav a.is-active { border-bottom-color: #ff8800; color: #ff8800; }
.detail-section { padding: 50px 0 65px; scroll-margin-top: 64px; }
.detail-section--gray { background: #f9f9f9; }
.detail-heading { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 0 0 50px; font-size: 28px; font-weight: 400; text-align: center; }
.detail-heading::before, .detail-heading::after { content: ''; display: block; width: 120px; height: 1px; background: #e2e2e2; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.detail-value-heading { margin: 42px 0 20px; font-size: 22px; font-weight: 500; text-align: center; }
#value { scroll-margin-top: 80px; }
.detail-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-feature-card.detail-value-card { padding: 0; }
.detail-feature-card.detail-value-card .detail-card-copy { padding: 20px; }
.detail-feature-card.detail-value-card h3 { text-align: left; }
.detail-card { overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 5px 20px #182a4212; transition: background-color .2s ease; }
.detail-card:hover { background: #ffe5c5; }
.detail-card-image, .detail-card-illustration { display: block; width: 100%; height: 205px; object-fit: cover; }
.detail-card-copy { padding: 20px; }
.detail-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 1.5; }
.detail-card p { margin: 0; color: #526172; font-size: 14px; line-height: 1.75; }
.detail-card-illustration { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #d6e9ff, #f4f9ff); }
.detail-card-illustration::before { content: ''; position: absolute; width: 180px; height: 180px; border: 2px solid #ffffffae; border-radius: 50%; box-shadow: 0 0 0 28px #ffffff30, 0 0 0 57px #ffffff22; }
.detail-card-illustration span { position: relative; z-index: 1; color: #225c9b; font-size: 23px; font-weight: 600; letter-spacing: .04em; }
.detail-card-illustration--region, .detail-card-illustration--regions { background: linear-gradient(135deg, #d7e9ff, #c7e4eb); }
.detail-card-illustration--clients, .detail-card-illustration--sales { background: linear-gradient(135deg, #ffebd3, #ffe1c4); }
.detail-card-illustration--clients span, .detail-card-illustration--sales span { color: #dc7a1e; }
.detail-card-illustration--projects, .detail-card-illustration--energy { background: linear-gradient(135deg, #d7ecff, #cfe6f4); }
.detail-card-illustration--growth { background: linear-gradient(135deg, #dcf2ec, #d8eaff); }
.detail-feature-card { padding: 25px 22px; min-height: 235px; box-sizing: border-box; }
.detail-feature-card .detail-card-copy { padding: 0; }
.detail-feature-card h3 { text-align: center; }
.detail-feature-icon, .detail-feature-number { display: block; width: 48px; height: 48px; margin: 0 auto 22px; object-fit: contain; }
.detail-feature-number { border: 2px solid #ff8800; border-radius: 50%; color: #ff8800; font-size: 16px; font-weight: 700; line-height: 44px; text-align: center; }
.detail-scene-card .detail-card-copy { min-height: 78px; }
.detail-qr-section { padding: 56px 0; background: #f6f9fd; scroll-margin-top: 64px; }
.detail-qr-layout { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.detail-qr-kicker { margin: 0 0 8px; color: #ff8800; font-size: 15px; }
.detail-qr-layout h2 { margin: 0 0 12px; font-size: 28px; }
.detail-qr-layout p:last-child { margin: 0; color: #526172; font-size: 15px; }
.detail-qr-layout img { display: block; width: 200px; height: 200px; border: 10px solid #fff; border-radius: 10px; box-shadow: 0 8px 25px #1f47751a; }
.detail-qr-dialog { position: fixed; margin: auto; padding: 28px 32px 32px; border: 0; border-radius: 12px; text-align: center; box-shadow: 0 20px 70px #0004; }
.detail-qr-dialog::backdrop { background: #08162aab; }
.detail-qr-dialog h2 { margin: 0 0 20px; font-size: 20px; }
.detail-qr-dialog img { display: block; max-width: 65vw; height: auto; }
.detail-qr-close { position: absolute; top: 8px; right: 14px; border: 0; background: transparent; color: #607080; font-size: 26px; cursor: pointer; }
@media (max-width: 800px) {
  .detail-hero { height: auto; min-height: 370px; }
  .detail-hero-inner { min-height: 370px; padding: 38px 0; box-sizing: border-box; }
  .detail-hero-copy { max-width: 100%; width: 100%; }
  .detail-hero--eagleeye .detail-hero-copy { max-width: 100%; width: 100%; }
  .detail-hero h1 { font-size: 30px; }
  .detail-hero--eagleeye h1 { font-size: 30px; }
  .detail-hero-art { opacity: .16; right: -120px; }
  .detail-nav .portal-wrap { gap: 18px; overflow-x: auto; }
  .detail-nav a { flex: 0 0 110px; font-size: 14px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-heading { gap: 16px; font-size: 24px; }
  .detail-heading::before, .detail-heading::after { width: 42px; }
  .detail-qr-layout { flex-direction: column; text-align: center; }
}

/* 新版 banner（Figma 1920×370）：文案块左边距对齐设计稿 80px */
@media (min-width: 1200px) {
  .detail-hero--eagleeye .detail-hero-copy,
  .detail-hero--partner .detail-hero-copy { margin-left: 0; }
}