/* Home page sections 1–3 styles (scoped by class names) */

 /* Container helpers */
 .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
 @media (min-width: 1400px) { .container { max-width: 1400px; min-width: 1400px; } }
 .section { padding: 64px 0; }
 @media (max-width: 991.98px) { .section { padding: 48px 0; } }
@media (max-width: 767.98px) { .section { padding: 40px 0; } }

/* Override: remove vertical padding for Values section */
.values.section { padding: 0; }

 /* Unified section title */
.section-title { position: relative; margin: 0 0 49px; text-align: center; font-size: 48px; color: #111; font-weight: 600;
   /* background strip 296x32 and vertical centering */
   display: flex; align-items: center; justify-content: center; min-height: 32px;
   background: url("../icons/section-bg.png") center no-repeat; background-size: 296px 32px;
   padding: 0 16px;
 }
 .section-title span { vertical-align: middle; }
 @media (max-width: 767.98px) {
   .section-title { font-size: 20px; margin-bottom: 32px; }
 }

/* CSS variable for dynamic site header height (fallback 128px) */
:root { --site-header-h: 128px; }

/* S1. Hero */
/* Add top spacing to avoid overlapping site header (affects document flow) */
.hero { position: relative; color: #fff; margin-top: var(--site-header-h, 128px); }
/*
  Hero height responsive rule:
  - Goal: first screen without scroll on desktop (header 128px + hero == 100vh)
  - Desktop result at 1920x1080: ~952px (100vh - 128px)
*/
/* Desktop: fill viewport minus header (adaptive), but stay within 540–958px */
.hero__bg { position: relative; min-height: clamp(540px, calc(100vh - var(--site-header-h, 128px)), 958px); background: #0b2a5a url("../img/top-bg.png") center/cover no-repeat; }
.hero__bg::after { /* gradient mask for better text readability */
   content: ""; position: absolute; inset: 0;
   background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 100%);
 }
.hero__content { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.hero__content .container { text-align: left; }
.hero__title { margin: 0; font-size: 72px; line-height: 1.2; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
@media (max-width: 991.98px) {
  /* Slightly reduce hero on tablets while keeping viewport awareness */
  .hero__bg { min-height: clamp(420px, 60vh, 700px); }
  .hero__title { font-size: 42px; }
}
/* Desktop wide screens (>=1200px and aspect >= 16:9): lift content to 35% */
@media (min-width: 1200px) and (min-aspect-ratio: 16/9) {
  .hero__content { top: 35%; }
}
@media (max-width: 767.98px) {
   /* Mobile: compact but still adaptive to tall viewports */
   .hero__bg { min-height: clamp(320px, 50vh, 560px); }
   .hero__content { top: 52%; }
   .hero__title { font-size: 28px; font-weight: 700; }
}

/* S2. Info Bar */
.info-bar { background: #0762CB; color: #fff; }
.info-bar__inner { padding: 28px 0 32px; text-align: left; }
.info-bar__body { margin: 0; /* removed max-width for better responsiveness within container */ }
.info-bar__title { margin: 0 0 30px; font-size: 30px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 21px; }
/* adaptive short line to the right of title: ~383px at 1920×1080 (body 960px max width => 39.9%) */
.info-bar__title::after { content: ""; display: block; height: 2px; width: clamp(160px, 40%, 420px); background: rgba(255,255,255,.13); border-radius: 2px; }
.info-bar__desc { margin: 0; font-size: 20px; line-height: 2; color: #fff; }
@media (max-width: 767.98px) { .info-bar__inner { padding: 20px 0 24px; } .info-bar__title { font-size: 18px; } .info-bar__desc { font-size: 13px; line-height: 1.9; } }

/* Overlay variant pinned to hero bottom */
.info-bar--overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }

 /* S3. Video */
 .video .container { }
 .video.section { padding-top: 85px; }
 /* Video player height:
    - Target 900px at 1920x1080 (≈83.33vh) per latest spec
    - Keep sensible lower bound for short viewports
 */
 .video__player { position: relative; width: 100%; height: clamp(260px, 83.33vh, 900px); border-radius: 10px; overflow: hidden; background: #0b1325; border: 1px solid #e9edf3; }
 .video__media { display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(180deg, #0f1a2d, #0b1325); }

/* S4. Values (non-card layout with vertical separators) */
.values .container { }
.values__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; row-gap: 24px; }
@media (max-width: 991.98px) { .values__grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (max-width: 767.98px) { .values__grid { grid-template-columns: 1fr; column-gap: 0; } }
.values__item { position: relative; padding: 0; background: none; border: 0; box-shadow: none; display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; row-gap: 10px; }
.values__item:not(:nth-child(3n))::after { /* vertical separator between columns on desktop rows */
  content: ""; position: absolute; right: -24px; top: 2px; bottom: 2px; width: 1px; background: #eef2f8;
}
@media (max-width: 991.98px) { .values__item:not(:nth-child(3n))::after { display: none; } }
.values__icon-wrap { width: clamp(28px, 2.5vw, 40px); height: clamp(28px, 2.5vw, 40px); border-radius: 10px; overflow: hidden; background: none; display: flex; align-items: center; justify-content: center; margin-bottom: 0; grid-column: 1; grid-row: 1; align-self: center; }
.values__icon { max-width: 100%; max-height: 100%; display: block; }
.values__title { margin: 0; font-size: clamp(20px, 1.7vw, 24px); color: #111; font-weight: 600; grid-column: 2; grid-row: 1; align-self: center; }
.values__desc { margin: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 2; color: rgba(8,24,44,.43); grid-column: 1 / -1; grid-row: 2; text-indent: 0; padding-left: 0; text-align: left; }
@media (max-width: 767.98px) {
  .values__icon-wrap { width: clamp(28px, 7vw, 36px); height: clamp(28px, 7vw, 36px); }
  .values__title { font-size: clamp(18px, 5.2vw, 24px); }
  .values__desc { font-size: clamp(13px, 4vw, 16px); }
}

/* S5. Tech Highlights (left text, right image) */
/* Use a CSS var for the blue bar height so image overlap stays in sync */
.tech { position: relative; overflow: hidden; --tech-bar-h: clamp(120px, 17vh, 185px); /* overlay height */
  /* image target width; 1920px -> 561px */
  --tech-image-w: clamp(240px, 29.22vw, 561px);
  /* mid gap between text and image; 1920px -> 30px */
  --tech-gap: clamp(18px, 1.5625vw, 30px);
}
.tech .container { position: relative; z-index: 1; }
.tech__grid { display: grid; align-items: start; column-gap: 0;
  /* Ensure the visible middle gap equals --tech-gap at desktop sizes */
  grid-template-columns: calc(100% - var(--tech-image-w) - var(--tech-gap)) var(--tech-image-w);
}
@media (max-width: 991.98px) { .tech__grid { grid-template-columns: 1fr; } }
.tech__list { }
.tech-item { margin: 0 0 60px; }
/* responsive type for tech texts */
.tech-item__title { margin: 0 0 20px; font-size: clamp(20px, 2.4vw, 30px); color: #0762CB; font-weight: 400; }
.tech-item__desc { margin: 0; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.9; color: rgba(8,24,44,.5); }
/* placeholder image container: fixed target size at 1920x1080 ≈ 462x1044, responsive elsewhere */
.tech__image {
  /* Overlay the blue bar but don't affect grid row height */
  position: absolute; right: 0; bottom: 0; z-index: 2; overflow: hidden;
  background: #d9e7ff url("../img/jishuliangdian.png") center/cover no-repeat;
  width: var(--tech-image-w);
  height: clamp(360px, 113.3vh, 1044px);
}
/* Mobile/tablet: single column, use full width and moderate height */
@media (max-width: 991.98px) {
  .tech__grid { grid-template-columns: 1fr; column-gap: 0; }
  .tech__list { }
  .tech__image { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; height: clamp(200px, 56vw, 420px); }
}
/* bottom blue bar: cancel absolute positioning; keep in normal flow */
.tech__bar { height: var(--tech-bar-h); background: #0762CB;
  /* full-bleed to the right: extend from container to viewport right */
  margin-right: calc(50% - 50vw);
}

/* S6. Application Scenarios */
/*
  Update per request:
  - Background color: #F5F8F9
  - Preferred row height: 33.15vh (keeps existing 200px–304px clamp bounds)
  - Typography tweaks handled in rules below
*/
.scenarios { --scenario-gap: 20px; --scenario-h: clamp(200px, 33.15vh, 304px); background: #F5F8F9; }
/* lock to exact 304px row height around 1080p viewports */
@media (min-height: 1000px) and (max-height: 1150px) {
  .scenarios { --scenario-h: 304px; }
}
.scenarios .container { }
.scenarios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--scenario-gap); grid-auto-rows: var(--scenario-h); }
@media (max-width: 991.98px) { .scenarios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .scenarios__grid { grid-template-columns: 1fr; } }

/* block layout (no card/hover/image overlay) */
.scenario-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-radius: 0; /* top/right/bottom/left paddings
    - Top: 117px at 1080p => 10.833vh; clamped with a sensible minimum for short viewports
    - Left: 40px at 1920px => 2.083vw; clamped with a minimum for narrow screens
  */
  padding: clamp(60px, 10.833vh, 117px) 24px 24px clamp(16px, 2.083vw, 40px);
  min-height: 0; overflow: hidden; box-sizing: border-box; color: #fff; background-color: transparent; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* readability overlay (no hover effect) */
.scenario-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 100%); }
.scenario-card > * { position: relative; z-index: 1; }

/* sizing helpers to match design */
.scenario-card--tall { grid-row: span 2; }
.scenario-card--xl { grid-column: span 2; }
@media (max-width: 991.98px) { .scenario-card--tall { min-height: 260px; grid-row: span 1; } .scenario-card--xl { grid-column: span 2; } }
@media (max-width: 767.98px) { .scenario-card--xl { grid-column: span 1; } }

.scenario-card__title { margin: 0 0 16px; font-size: clamp(20px, 2.4vw, 30px); color: #fff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.scenario-card__list { margin: 0; padding: 0; list-style: none; }
.scenario-card__list li { position: relative; padding-left: 12px; margin: 0; /* per requirement: remove li margin */ font-size: clamp(13px, 1.8vw, 18px); line-height: 1.9; color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.scenario-card__list li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.8); }

/* background image mappings */
.scenario--park { background-image: url('../img/industrial-park.png'); }
.scenario--public { background-image: url('../img/public-institution.png'); }
.scenario--data { background-image: url('../img/data-centers.png'); }
.scenario--factory { background-image: url('../img/factory.png'); }
.scenario--mall { background-image: url('../img/commercial-complex.png'); }

/* S7. Core Features */
.features { background: #F5F8F9; }
.features.section { padding: 0 0 80px; }
.features__header { display: flex; align-items: center; gap: 8px; margin: 0 0 25px; }
.features__group + .features__group { margin-top: 40px; }
.features__icon { width: 28px; height: 30px; object-fit: contain; }
.features__title { margin: 0; font-size: clamp(20px, 2.2vw, 32px); color: #08182C; font-weight: 600; }

.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991.98px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .features__grid { grid-template-columns: 1fr; } }

/* Feature card: static background, no radius/border/shadow */
.feature-card { position: relative; display: block;
  min-height: clamp(180px, 24vh, 230px); padding: 16px; border-radius: 0; border: 0;
  background: #fff url('../img/card-bg.png') center/cover no-repeat; }
/* Per spec: remove click/focus border effect */
.feature-card:focus { outline: none; }

/* Head row container: icon + title */
.feature-card__head { display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 12px;
  /* spacing to desc: 23px desktop, responsive on narrow screens */
  margin-bottom: clamp(12px, 1.2vw, 23px); }
.feature-card__icon { width: 56px; height: 56px; object-fit: contain; }
.feature-card__title { margin: 0; font-size: clamp(18px, 1.8vw, 28px); color: #08182C; font-weight: 600; }
.feature-card__desc { margin: 0; font-size: clamp(13px, 1.2vw, 18px); line-height: 1.8; color: rgba(8,24,44,.5); }

/* Feature section title overrides */
.features .section-title { text-align: left; display: flex; justify-content: flex-start; background: none; padding: 0; font-size: 36px; margin: 0 0 40px; }

/* S8. Cases */
.cases { background: #fff; --cases-gap-x: clamp(12px, 1.6vw, 20px); --cases-gap-y: clamp(24px, 3vw, 40px); }
.cases__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--cases-gap-x); row-gap: var(--cases-gap-y); }
@media (max-width: 991.98px) { .cases__grid { grid-template-columns: 1fr; } }
.case-card { background: #fff; border: 0; border-radius: 0; overflow: hidden; }
.case-card__media { display: block; width: 100%; aspect-ratio: 687 / 367; object-fit: cover; }
.case-card__body { height: 100%; padding: clamp(18px, 1.8vw, 30px) 24px 30px; background: #F5F9FF; }
.case-card__title { margin: 0 0 clamp(6px, 1vw, 10px); font-size: clamp(18px, 1.6vw, 22px); color: #0762CB; font-weight: 600; }
.case-card__desc { margin: 0; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.9; color: rgba(8,24,44,.65); }