/* CEMAX front page. Loaded only when is_front_page(); the shared system stays in style.css.
   Sections: hero, dark metrics band, valve strip, application flow, industry tiles,
   the proof band, case cards, and the closing quote block. */

/* ---------- hero: photo as the backdrop, headline set over it ---------- */
.cxh-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:var(--cx-blue-900);border-bottom:var(--cx-line)}
.cxh-hero__bg{position:absolute;inset:0;margin:0;z-index:0}
.cxh-hero__frame{position:absolute;inset:0;overflow:hidden;background:var(--cx-paper-50)}
.cxh-hero__frame img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  filter:saturate(.9) contrast(1.03)}
.cxh-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(4,20,43,.96) 0%,rgba(4,20,43,.9) 32%,rgba(4,20,43,.62) 55%,
      rgba(4,20,43,.18) 82%,rgba(4,20,43,.06) 100%),
    linear-gradient(to top,rgba(4,20,43,.5),rgba(4,20,43,0) 46%)}
.cxh-hero__frame--empty{display:grid;place-items:center;
  background:linear-gradient(155deg,var(--cx-blue-900),var(--cx-blue-700))}
.cxh-hero__codes{list-style:none;margin:0;padding:0;display:grid;gap:12px;text-align:center;
  font:700 30px/1 var(--cx-font-display);letter-spacing:.06em;color:rgba(255,255,255,.9)}
.cxh-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(430px,42vw,600px);padding-block:clamp(46px,5.6vw,84px)}
.cxh-hero__copy{max-width:860px}
.cxh-hero .cx-kicker{color:#BCD2EC}
.cxh-hero .cx-kicker::before{background:#BCD2EC}
.cxh-hero h1{font-family:var(--cx-font-display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(31px,4.1vw,58px);line-height:.96;letter-spacing:.005em;margin:var(--cx-s-3) 0 0}
html[lang^="zh"] .cxh-hero h1{font-family:var(--cx-font-cjk);text-transform:none;line-height:1.2;letter-spacing:0}
.cxh-hero h1 em{font-style:normal;color:#9FC0E4}
.cxh-hero .cx-lead{margin:var(--cx-s-3) 0 0;font-size:16.5px;max-width:52ch;color:rgba(255,255,255,.82)}
.cxh-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--cx-s-4)}
.cxh-hero .cx-btn--primary{background:#fff;color:var(--cx-blue-900)}
.cxh-hero .cx-btn--primary:hover{background:var(--cx-blue-100);color:var(--cx-blue-900)}
.cxh-hero .cx-btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.cxh-hero .cx-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.cxh-trust{display:flex;gap:20px;flex-wrap:wrap;margin:var(--cx-s-4) 0 0;padding:0;list-style:none;
  font:500 10.5px/1 var(--cx-font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.cxh-trust li{display:inline-flex;align-items:center;gap:9px}
.cxh-trust li::before{content:"";width:5px;height:5px;background:#9FC0E4}
.cxh-hero__chip{position:absolute;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:14px;
  background:var(--cx-paper-100);border-top:var(--cx-line);border-left:var(--cx-line);padding:14px 18px}
.cxh-hero__chip b{font:700 24px/1 var(--cx-font-display);color:var(--cx-blue-900)}
.cxh-hero__chip span{font:500 10px/1.35 var(--cx-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cx-ink-500)}

/* ---------- dark metrics band ---------- */
.cxh-metrics{background:var(--cx-blue-900);color:#fff}
.cxh-metrics__in{display:grid;grid-template-columns:repeat(4,1fr)}
.cxh-metric{padding:var(--cx-s-4) var(--cx-s-3);border-left:1px solid rgba(255,255,255,.14)}
.cxh-metric:first-child{border-left:0}
.cxh-metric b{display:block;font:700 34px/1 var(--cx-font-display);color:#fff;letter-spacing:.01em}
.cxh-metric span{display:block;margin-top:9px;font:500 10.5px/1.45 var(--cx-font-mono);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---------- valve strip ---------- */
.cxh-strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--cx-line);border-left:var(--cx-line)}
.cxh-strip .cx-card{border-right:var(--cx-line);border-bottom:var(--cx-line)}
.cxh-strip .cx-card__media{position:relative;aspect-ratio:4/3}
.cxh-strip .cx-card__body{padding:18px;gap:8px}
.cxh-strip .cx-card h3{font-size:19px;line-height:1.05}
.cxh-strip .cx-card p{font-size:13px}
.cxh-code{position:absolute;top:0;left:0;z-index:2;padding:7px 10px;background:var(--cx-paper-100);
  border-right:var(--cx-line);border-bottom:var(--cx-line);
  font:500 10px/1 var(--cx-font-mono);letter-spacing:.1em;color:var(--cx-blue-700)}

/* ---------- a heading column beside a list ---------- */
.cxh-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:var(--cx-s-8);align-items:start}
.cxh-split h2{font-family:var(--cx-font-display);text-transform:uppercase;font-size:var(--cx-fs-h1);
  line-height:1;margin:14px 0 var(--cx-s-2)}
html[lang^="zh"] .cxh-split h2{font-family:var(--cx-font-cjk);text-transform:none;line-height:1.2;font-size:32px}
.cxh-split .cx-aside{border-left:3px solid var(--cx-blue-700);padding-left:18px;color:var(--cx-ink-500);font-size:15px;margin:0}

.cxh-flows{list-style:none;margin:0;padding:0;border-top:var(--cx-line)}
.cxh-flow{border-bottom:var(--cx-line)}
.cxh-flow a{display:grid;grid-template-columns:52px 1fr auto;gap:var(--cx-s-3);align-items:center;
  padding:20px 10px 20px 0;color:inherit;transition:background .18s,padding .18s}
.cxh-flow a:hover,.cxh-flow a:focus-visible{background:var(--cx-blue-100);padding-left:14px;color:inherit}
.cxh-flow__no{font:500 11px/1 var(--cx-font-mono);letter-spacing:.1em;color:var(--cx-blue-700)}
.cxh-flow h3{font:700 21px/1.05 var(--cx-font-display);text-transform:uppercase;margin:0}
html[lang^="zh"] .cxh-flow h3{font-family:var(--cx-font-cjk);text-transform:none;font-size:18px}
.cxh-flow p{margin:6px 0 0;font-size:13.5px;color:var(--cx-ink-500);max-width:54ch}
.cxh-flow__go{font:500 11px/1 var(--cx-font-mono);letter-spacing:.1em;color:var(--cx-ink-300)}
.cxh-flow a:hover .cxh-flow__go{color:var(--cx-blue-700)}

/* ---------- industry tiles ---------- */
.cxh-tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--cx-line);border-left:var(--cx-line)}
.cxh-tile{display:flex;flex-direction:column;gap:8px;padding:26px 22px;min-height:150px;
  border-right:var(--cx-line);border-bottom:var(--cx-line);background:var(--cx-paper-100);color:inherit;
  transition:background .2s,color .2s}
.cxh-tile h3{font:700 20px/1.05 var(--cx-font-display);text-transform:uppercase;margin:0}
html[lang^="zh"] .cxh-tile h3{font-family:var(--cx-font-cjk);text-transform:none;font-size:18px}
.cxh-tile p{margin:0;font-size:13px;color:var(--cx-ink-500)}
.cxh-tile span{margin-top:auto;font:500 10px/1 var(--cx-font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cx-blue-700)}
.cxh-tile:hover,.cxh-tile:focus-visible{background:var(--cx-blue-900);color:#fff}
.cxh-tile:hover h3,.cxh-tile:hover p,.cxh-tile:hover span{color:#fff}

/* ---------- proof band ---------- */
.cxh-proof{background:var(--cx-blue-900);color:rgba(255,255,255,.78)}
.cxh-proof h2{color:#fff}
.cxh-proof .cx-aside{border-left:3px solid rgba(255,255,255,.35);color:rgba(255,255,255,.72)}
.cxh-proof .cx-lead{color:rgba(255,255,255,.72)}
.cxh-checks{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.cxh-checks li{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.cxh-checks b{font:500 10.5px/1.4 var(--cx-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#8FB2DC}
.cxh-checks span{color:#fff;font-size:14.5px}

/* ---------- case cards ---------- */
.cxh-cases{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--cx-line);border-left:var(--cx-line)}
.cxh-cases .cx-card__media{aspect-ratio:16/9}

/* ---------- small screens ---------- */
@media (max-width:1100px){
  .cxh-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1000px){
  .cxh-hero__in{min-height:clamp(380px,56vw,520px);padding-block:var(--cx-s-6)}
  .cxh-hero::after{background:
    linear-gradient(180deg,rgba(4,20,43,.58) 0%,rgba(4,20,43,.86) 46%,rgba(4,20,43,.94) 100%)}
  .cxh-hero__frame img{object-position:64% 50%}
  .cxh-split{grid-template-columns:1fr;gap:var(--cx-s-4)}
  .cxh-tiles{grid-template-columns:1fr 1fr}
  .cxh-cases{grid-template-columns:1fr}
  .cxh-metrics__in{grid-template-columns:1fr 1fr}
  .cxh-metric:nth-child(odd){border-left:0}
  .cxh-metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
}
@media (max-width:640px){
  .cxh-strip{grid-template-columns:1fr 1fr}
  .cxh-tiles{grid-template-columns:1fr}
  .cxh-flow a{grid-template-columns:34px 1fr}
  .cxh-flow__go{display:none}
  .cxh-checks li{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .cxh-hero__in{min-height:0;padding-block:var(--cx-s-6) var(--cx-s-8)}
  .cxh-hero__chip{padding:10px 14px}
  .cxh-hero__chip b{font-size:20px}
}

/* section headings on this page take the condensed display face */
.cx-sec-head h2{font-family:var(--cx-font-display);text-transform:uppercase;line-height:1.02}
html[lang^="zh"] .cx-sec-head h2{font-family:var(--cx-font-cjk);text-transform:none;line-height:1.25;font-size:34px}