/* ==========================================================================
   Deptrum · Unified page banner system
   --------------------------------------------------------------------------
   One banner height, one title size, one lead size, one content column and one
   typeface for every section banner (核心技术 / 产品中心 / 解决方案 / 客户案例 /
   新闻中心 / 开发者与支持 / 算法平台 / 关于我们 / 联系我们).

   This file is loaded as the LAST stylesheet on every inner page, so it wins
   over the scattered per-section hero rules in base.css / pages.css /
   detail-pages.css / fidelity-*.css / english.css on source order.
   Mobile behaviour is kept in its own block so the existing <=900px rules are
   not disturbed.

   Author: brand web ops · 2026-10-14
   ========================================================================== */

:root{
  --banner-h: clamp(340px, 42vw, 560px);
  --banner-h-sm: clamp(320px, 58vw, 460px);
  --banner-title: clamp(32px, 4vw, 56px);
  --banner-lead: clamp(15px, 1.25vw, 18px);
  --banner-shell: min(var(--content, 1248px), calc(100% - 48px));
}

/* ---------------------------------------------------------------- contact --
   联系我们 has no banner image, but its title uses the same type scale.      */
.contact-intro{
  width: var(--banner-shell);
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 0;
}
.contact-intro h1{
  margin: 0 0 22px;
  font-family: inherit;
  font-size: var(--banner-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
}
.contact-intro p{
  margin: 0;
  font-family: inherit;
  font-size: var(--banner-lead);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------- english --
   english.css centres two blocks on /en/solutions.html (margin-inline:auto),
   which breaks the left alignment shared with the Chinese site. Both rules
   are re-declared at the same specificity, but later in the cascade.        */
html:lang(en) .page-solutions .solutions-hero p{
  max-width: none;
  margin-inline: 0;
}
html:lang(en) .page-solutions .solutions-overview .section-header h2{
  max-width: none;
  margin: 0 0 22px;
}

/* ------------------------------------------------------------------ cta ----
   The solutions/cases banner buttons were white plates or plain outlines; the
   site's primary action is the solid Deptrum blue pill used everywhere else
   (pill-btn, product-consultation). Make both banner CTAs match, in both
   languages. */
.page-solutions .solutions-hero .outline-btn,
.cases-hero .outline-btn{
  background: #1760bd;
  border-color: #1760bd;
  color: #fff;
}
.page-solutions .solutions-hero .outline-btn:hover,
.page-solutions .solutions-hero .outline-btn:focus-visible,
.cases-hero .outline-btn:hover,
.cases-hero .outline-btn:focus-visible{
  background: #0b438b;
  border-color: #0b438b;
  color: #fff;
}
.page-solutions .solutions-hero .outline-btn:focus-visible,
.cases-hero .outline-btn:focus-visible{
  outline-color: #1760bd;
}

/* ============================================================== desktop ==== */
@media (min-width: 901px){

  /* 1 · same height, same crop, vertically centred content on every banner */
  .hero.hero{
    height: var(--banner-h);
    min-height: 0;
    max-height: none;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* 2 · same content column, same left edge, no bespoke offsets */
  .hero.hero .hero-content{
    position: relative;
    z-index: 2;
    width: var(--banner-shell);
    max-width: calc(100% - 48px);
    margin: 0 auto;
    padding: 0;
    align-self: auto;
    transform: none;
    text-align: left;
  }

  /* 3 · flatten absolutely-positioned banner children (about page overlay) */
  .hero.hero .hero-content > *{
    position: static;
    inset: auto;
    margin-inline: 0;
    white-space: normal;
    transform: none;
    text-shadow: none;
  }

  /* 4 · one title style: 56px / 700 / inherit font / 1.25 */
  .hero.hero .hero-content h1{
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 22px;
    font-family: inherit;
    font-size: var(--banner-title);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .04em;
    text-wrap: balance;
  }

  /* 5 · one lead style: 18px / 400 / 1.8 */
  .hero.hero .hero-content p{
    width: auto;
    max-width: none;
    margin: 0;
    font-family: inherit;
    font-size: var(--banner-lead);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .04em;
  }

  /* 6 · the 关于我们 wordmark is an <img>; keep it at its designed 534px,
         never stretched to the (now wider) content column. */
  .hero.hero .hero-content .about-wordmark{
    display: block;
    width: min(534px, 100%);
    max-width: 100%;
    height: auto;
  }

  /* 7 · 产品中心 banner is a composite: copy above, product line-up below.
         The line-up art is 2:1 and stays FULL-BLEED at its natural proportions:
         it scales up with the viewport instead of being shrunk or letterboxed,
         and the banner grows with it. The top of the art is plain sky, so the
         crop is always taken from there. Sizing the banner as
         min(50vw, max(560px, 220px + 24vw)) keeps the product band ~220px from
         the top at every width — always clear of the copy:
             1440px → 566px banner   1920px → 681px   2560px → 834px. */
  .hero.hero.products-hero{
    display: block;
    align-items: flex-start;
    isolation: isolate;
    overflow: hidden;
    height: min(50vw, max(560px, calc(220px + 24vw)));
  }
  .hero.hero.products-hero .hero-content{
    position: relative;
    z-index: 2;
    padding-top: 30px;
    text-align: center;
  }
  .hero.hero.products-hero .hero-content h1{margin: 0 0 16px}
}

/* =============================================================== mobile ==== */
@media (max-width: 900px){

  .hero.hero{
    height: var(--banner-h-sm);
    min-height: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
  }

  .hero.hero .hero-content{
    position: relative;
    z-index: 2;
    width: calc(100% - 40px);
    max-width: none;
    margin: 0 auto;
    padding: 0;
    align-self: auto;
    transform: none;
    text-align: left;
  }

  .hero.hero .hero-content > *{
    position: static;
    inset: auto;
    margin-inline: 0;
    white-space: normal;
    transform: none;
    text-shadow: none;
  }

  .hero.hero .hero-content h1{
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    font-family: inherit;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .03em;
    text-wrap: balance;
  }

  .hero.hero .hero-content p{
    width: auto;
    max-width: none;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .03em;
  }

  .hero.hero .hero-content .about-wordmark{
    display: block;
    width: min(380px, 100%);
    max-width: 100%;
    height: auto;
  }

  .hero.hero.products-hero{display: block;align-items: flex-start}
  .hero.hero.products-hero .hero-content{padding-top: 20px;text-align: center}
  .hero.hero.products-hero .hero-content h1{margin: 0 0 12px}
}

/* ------------------------------------------------------- privacy consent --
   联系我们表单的隐私政策勾选行 + 隐私政策正文页（2026-10-16）              */
.form-panel .consent-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
}
.form-panel .consent-row input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex: none;
  accent-color: #1760bd;
  cursor: pointer;
}
.form-panel .consent-row label{
  font-size: 14px;
  color: #4a5563;
  line-height: 1.7;
  cursor: pointer;
}
.form-panel .consent-row a{
  color: #1760bd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-panel .consent-row a:hover,
.form-panel .consent-row a:focus-visible{color: #0b438b}

/* ---- 隐私政策正文页 ---- */
.privacy-policy{
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 0 72px;
}
.privacy-policy .policy-meta{
  margin: 0 0 26px;
  font-size: 14px;
  color: #6b7686;
  line-height: 1.8;
}
.privacy-policy h2{
  margin: 34px 0 12px;
  font-family: inherit;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}
.privacy-policy h3{
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.privacy-policy p,
.privacy-policy li{
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  margin: 0 0 10px;
}
.privacy-policy ul{
  padding-left: 22px;
  margin: 0 0 14px;
}
.privacy-policy table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px;
  font-size: 14px;
}
.privacy-policy th,
.privacy-policy td{
  border: 1px solid #d8dee6;
  padding: 9px 12px;
  text-align: left;
  line-height: 1.7;
  vertical-align: top;
}
.privacy-policy th{background: #f2f6fb; font-weight: 600}
.privacy-policy .policy-note{
  background: #f5f8fc;
  border-left: 3px solid #1760bd;
  padding: 12px 16px;
  margin: 14px 0 16px;
  font-size: 14px;
  line-height: 1.85;
  color: #333;
}

/* ------------------------------------------------ 资源下载页签（2026-10-16） --
   .support-tabs 按钮高 105px，默认内联布局使标题+副题贴向下缘；改为 flex
   纵向居中，标题/副题间距均衡，观感更协调。仅影响开发者与支持页页签。  */
.support-tabs button{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 28px;
}
.support-tabs button br{display: none}
.support-tabs button small{
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .12em;
  opacity: .85;
}