/*
 * 官网详情页共享样式
 * 产品页与公司页复用同一套版式、节奏和响应式规则，避免各页面视觉漂移。
 */

.detail-page .site-header { background: rgba(243, 241, 235, 0.92); box-shadow: 0 1px rgba(18, 19, 19, 0.08); backdrop-filter: blur(20px); }
.detail-main { padding-top: 88px; }
.detail-hero { min-height: 680px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 0.65fr; gap: 9vw; align-items: end; padding-top: 150px; padding-bottom: 100px; }
.detail-hero::before { content: ""; position: absolute; z-index: -2; width: 680px; height: 680px; right: -250px; top: 20px; border: 1px solid rgba(214, 31, 50, 0.2); border-radius: 50%; box-shadow: 0 0 0 90px rgba(214, 31, 50, 0.025), 0 0 0 180px rgba(214, 31, 50, 0.016); }
.detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -3; opacity: 0.28; background-image: linear-gradient(rgba(18, 19, 19, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 19, 19, 0.055) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.detail-hero h1 { max-width: 900px; margin: 0; font-size: clamp(56px, 5.8vw, 88px); line-height: 1; letter-spacing: -0.065em; }
.detail-hero h1 span { color: var(--red); }
.detail-hero__side { padding-bottom: 10px; }
.detail-hero__side > p { margin: 0 0 34px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-tags span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 700 9px/1 Arial, sans-serif; letter-spacing: 0.1em; }

.detail-nav { position: sticky; z-index: 20; top: 88px; border-block: 1px solid var(--line); background: rgba(243, 241, 235, 0.9); backdrop-filter: blur(16px); }
.detail-nav__inner { min-height: 66px; display: flex; align-items: center; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.detail-nav__inner::-webkit-scrollbar { display: none; }
.detail-nav a { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.detail-nav a:hover { color: var(--red); }

.product-detail { padding-block: 145px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.product-detail__heading { display: grid; grid-template-columns: 0.2fr 0.8fr 0.55fr; gap: 5vw; align-items: start; margin-bottom: 76px; }
.product-detail__number { color: var(--red); font: 700 11px/1 Arial, sans-serif; }
.product-detail__heading h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.055em; }
.product-detail__heading p { margin: 8px 0 0; color: var(--muted); line-height: 1.9; }
.product-detail__body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.detail-art { min-height: 530px; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 30px; background: #e7e4dc; }
.detail-art--red { color: white; background: var(--red); }
.detail-art--night { color: white; background: var(--night); }
.detail-copy-card { min-height: 530px; padding: clamp(36px, 5vw, 68px); border: 1px solid var(--line); border-radius: 30px; background: rgba(255, 255, 255, 0.34); }
.detail-copy-card > span { color: var(--red); font: 700 10px/1 Arial, sans-serif; letter-spacing: 0.15em; }
.detail-copy-card h3 { margin: 26px 0 20px; font-size: clamp(30px, 3.5vw, 48px); letter-spacing: -0.04em; }
.detail-copy-card > p { margin: 0; color: var(--muted); line-height: 1.9; }
.feature-list { display: grid; gap: 0; margin-top: 42px; border-top: 1px solid var(--line); }
.feature-list li { display: grid; grid-template-columns: 30px 1fr; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); list-style: none; }
.feature-list b { color: var(--red); font: 700 10px/1.6 Arial, sans-serif; }
.feature-list strong { display: block; margin-bottom: 5px; font-size: 15px; }
.feature-list small { color: var(--muted); line-height: 1.7; }

/* 三组产品视觉均由 CSS 构成，保持离线可用并与首页风格一致。 */
.detail-ai-core { width: 190px; height: 190px; position: relative; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: white; font: 800 54px/1 Arial, sans-serif; box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.08), 0 0 0 115px rgba(255, 255, 255, 0.04); }
.detail-ai-core i { position: absolute; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: white; background: rgba(255, 255, 255, 0.08); font: normal 13px/1 sans-serif; }
.detail-ai-core i:nth-child(1) { left: -150px; top: -85px; }
.detail-ai-core i:nth-child(2) { right: -160px; top: 35px; }
.detail-ai-core i:nth-child(3) { left: -95px; bottom: -145px; }
.detail-market-chart { width: min(80%, 520px); height: 310px; display: flex; align-items: end; gap: 14px; padding-bottom: 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.detail-market-chart i { flex: 1; height: 30%; border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, 0.14); }
.detail-market-chart i:nth-child(2) { height: 52%; }.detail-market-chart i:nth-child(3) { height: 44%; }.detail-market-chart i:nth-child(4) { height: 76%; background: var(--red); }.detail-market-chart i:nth-child(5) { height: 61%; }.detail-market-chart i:nth-child(6) { height: 88%; background: #e77d89; }.detail-market-chart i:nth-child(7) { height: 72%; }.detail-market-chart i:nth-child(8) { height: 100%; background: var(--red); }
.detail-live-screen { width: min(78%, 440px); aspect-ratio: 16/10; position: relative; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; background: #0e0f0f; box-shadow: 55px 55px 0 -30px rgba(214, 31, 50, 0.7); }
.detail-live-screen::before { content: "LIVE"; position: absolute; left: 16px; top: 16px; padding: 6px 9px; border-radius: 5px; background: var(--red); font: 700 9px/1 Arial, sans-serif; }
.detail-live-screen i { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; }
.detail-live-screen i::after { content: ""; margin-left: 6px; border: 10px solid transparent; border-left: 16px solid white; }

.delivery { padding-block: 145px; }
.delivery-heading { display: grid; grid-template-columns: 1fr 0.45fr; gap: 9vw; align-items: end; margin-bottom: 70px; }
.delivery-heading h2 { margin: 0; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.055em; }
.delivery-heading p { margin: 0; color: var(--muted); line-height: 1.9; }
.delivery-flow { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.delivery-flow article { min-height: 250px; padding: 28px; border-right: 1px solid var(--line); }
.delivery-flow article:last-child { border-right: 0; }
.delivery-flow span { color: var(--red); font: 700 10px/1 Arial, sans-serif; }
.delivery-flow h3 { margin: 76px 0 12px; font-size: 22px; }
.delivery-flow p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.detail-cta { margin-bottom: 120px; padding: clamp(42px, 7vw, 90px); position: relative; overflow: hidden; color: white; background: var(--red); border-radius: 34px; }
.detail-cta h2 { max-width: 820px; margin: 0 0 34px; font-size: clamp(44px, 6vw, 82px); line-height: 1.05; letter-spacing: -0.06em; }

/* 公司详情页 */
.about-hero h1 { max-width: 1000px; font-size: clamp(58px, 7.4vw, 108px); }
.company-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 120px; }
.company-facts article { min-height: 190px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; }
.company-facts span { color: var(--muted); font: 700 9px/1 Arial, sans-serif; letter-spacing: 0.13em; }
.company-facts strong { display: block; margin-top: 66px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.03em; }
.company-profile { padding-block: 140px; color: white; background: var(--night); }
.company-profile__grid { display: grid; grid-template-columns: 0.75fr 1fr; gap: 10vw; }
.company-profile h2 { margin: 0; font-size: clamp(44px, 5.2vw, 74px); line-height: 1.08; letter-spacing: -0.055em; }
.company-profile h2 span { color: var(--red); }
.company-profile__copy p { margin: 0 0 25px; color: #a0a49e; font-size: 16px; line-height: 2; }
.company-profile__copy blockquote { margin: 42px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.13); color: white; font-size: 25px; line-height: 1.6; }
.business-scope { padding-block: 145px; }
.scope-heading { display: grid; grid-template-columns: 1fr 0.45fr; gap: 8vw; align-items: end; margin-bottom: 70px; }
.scope-heading h2 { margin: 0; font-size: clamp(44px, 5vw, 72px); letter-spacing: -0.055em; }
.scope-heading p { margin: 0; color: var(--muted); line-height: 1.9; }
.scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.scope-card { min-height: 310px; padding: 34px; border: 1px solid var(--line); border-radius: 25px; }
.scope-card > span { color: var(--red); font: 700 10px/1 Arial, sans-serif; }
.scope-card h3 { margin: 26px 0 22px; font-size: 28px; }
.scope-items { display: flex; flex-wrap: wrap; gap: 9px; }
.scope-items span { padding: 8px 11px; border-radius: 999px; color: var(--muted); background: rgba(18, 19, 19, 0.045); font-size: 12px; }
.licensed-scope { margin-top: 14px; padding: 34px; color: white; background: var(--red); border-radius: 25px; }
.licensed-scope h3 { margin: 0 0 18px; font-size: 28px; }
.licensed-scope p { margin: 0; max-width: 920px; line-height: 1.9; opacity: 0.82; }
.licensed-scope small { display: block; margin-top: 18px; opacity: 0.62; }
.company-location { padding-bottom: 140px; }
.location-card { min-height: 440px; display: grid; grid-template-columns: 0.75fr 1.25fr; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; }
.location-copy { padding: clamp(40px, 6vw, 76px); }
.location-copy h2 { margin: 0 0 30px; font-size: clamp(38px, 4.5vw, 60px); letter-spacing: -0.05em; }
.location-copy address { color: var(--muted); font-style: normal; line-height: 1.9; }
.location-visual { position: relative; min-height: 400px; background-color: #e7e4dc; background-image: linear-gradient(rgba(18, 19, 19, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 19, 19, 0.07) 1px, transparent 1px); background-size: 42px 42px; }
.location-pin { position: absolute; left: 54%; top: 47%; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50% 50% 50% 8px; color: white; background: var(--red); transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 0 0 26px rgba(214, 31, 50, 0.1); }
.location-pin span { transform: rotate(45deg); font: 800 15px/1 Arial, sans-serif; }

@media (max-width: 1024px) {
  .detail-hero { grid-template-columns: 1fr 0.55fr; }
  .product-detail__heading { grid-template-columns: 0.15fr 1fr; }
  .product-detail__heading > p { grid-column: 2; }
  .delivery-flow { grid-template-columns: repeat(2, 1fr); }
  .delivery-flow article:nth-child(2) { border-right: 0; }
  .delivery-flow article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .detail-main { padding-top: 72px; }
  .detail-hero { min-height: 620px; display: block; padding-top: 120px; padding-bottom: 75px; }
  .detail-hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .detail-hero__side { margin-top: 48px; }
  .detail-nav { top: 72px; }
  .product-detail { padding-block: 95px; }
  .product-detail__heading, .product-detail__body, .delivery-heading, .company-profile__grid, .scope-heading, .location-card { grid-template-columns: 1fr; }
  .product-detail__heading { gap: 18px; margin-bottom: 45px; }
  .product-detail__heading > p { grid-column: auto; }
  .detail-art, .detail-copy-card { min-height: 480px; }
  .detail-ai-core { transform: scale(0.72); }
  .delivery { padding-block: 95px; }
  .delivery-heading, .scope-heading { gap: 28px; }
  .delivery-flow { grid-template-columns: 1fr; }
  .delivery-flow article, .delivery-flow article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .delivery-flow article:last-child { border-bottom: 0; }
  .company-facts, .scope-grid { grid-template-columns: 1fr; }
  .company-facts { padding-bottom: 90px; }
  .company-profile, .business-scope { padding-block: 95px; }
  .company-profile__grid { gap: 50px; }
  .location-visual { min-height: 330px; }
  .detail-cta { margin-bottom: 80px; }
}