/* Zai Technologies detail page (formerly hystou.php): extends
   synology-neo.css's shared .syn-* patterns with Zai-specific blocks,
   built from 4 generated renders (hero, small, powerful, flexible —
   1983x793) matching the reference mockup almost section-for-section. */

.zai-page .hero-art { background-image: url('../images/hero/zai-hero.webp'); background-position: center 42%; background-size: cover; }
.zai-page .zai-closing-art { background-image: url('../images/hero/zai-hero.webp'); background-position: center 60%; background-size: cover; }

/* Square logo tile (no wide wordmark variant exists) — shown as a small
   badge above the headline instead of forced into a wide wordmark slot. */
.zai-wordmark { filter: none; width: 64px; height: 64px; max-width: 64px; border-radius: 12px; object-fit: cover; margin: 0 0 16px; }

/* Brand accent: orange (matches the Zai mark) instead of Synology/Netac/
   Horion's cyan — swaps just the accent color token used throughout the
   shared .syn-* rules for headings/eyebrows/buttons on this page only. */
.zai-page em, .zai-page .eyebrow, .zai-page .step-no,
.zai-page .syn-arrow, .zai-page .text-link { color: #ff8a1e; }
.zai-page .button.primary { color: #1a0900; background: linear-gradient(170deg, #ffa64d, #ff8a1e 60%, #cc5f00); border-color: #ffb066; box-shadow: inset 0 1px 0 #ffe0b070, 0 0 20px #ff8a1e22; }
.zai-page .button.primary:hover { box-shadow: 0 0 28px #ff8a1e70; }
.zai-page .button { border-color: #ff8a1e; }
.zai-page .syn-trust i { color: #ff8a1e; }
.zai-page .net-perf-reasons i { color: #ff8a1e; }
.zai-page .zai-use-icon,
.zai-page .zai-specs strong { color: #ff8a1e; }

/* ---- "Small PC. Big Advantages." photo panel ---- */
.zai-photo-art { position: relative; min-width: 0; max-height: 360px; overflow: hidden; border-radius: 10px; }
.zai-photo-art > img { width: 100%; height: 360px; object-fit: cover; object-position: center 35%; }

/* ---- "Powerful Performance" / "Flexible Connectivity" — shared grid,
   real close-up render + a floating spec/icon panel.
   .net-performance/.net-perf-* base rules (borrowed markup pattern from
   netac.php) aren't defined anywhere zai.php actually loads — it only
   pulls in synology-neo.css + this file, not netac-neo.css — so without
   these, .net-perf-art had no position:relative (the absolutely-positioned
   .zai-specs panel then escaped to the nearest ancestor that DID have one,
   which turned out to be the fixed header) and .net-perf-reasons had no
   display:flex (collapsing the 5-icon connectivity row into plain stacked
   text). Same root cause and fix as horion-neo.css's identical comment. */
.net-performance { padding: 34px 0; }
.net-perf-grid { display: grid; align-items: center; gap: 0; }
.net-perf-art { position: relative; border-radius: 10px; overflow: hidden; }
.net-perf-reasons { display: flex; justify-content: space-around; gap: 10px; padding: 16px 10px; background: #030b13d9; font-size: 11px; text-align: center; color: #cfe0eb; }
.net-perf-reasons span { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 110px; }
.net-perf-reasons i { font-size: 22px; }

.zai-power-grid { grid-template-columns: 40% 60%; }
.zai-power-art img { width: 100%; height: 320px; object-fit: cover; display: block; }
.zai-specs { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; }
.zai-specs span { background: #030b13d9; border: 1px solid #ff8a1e44; border-radius: 8px; padding: 8px 14px; font-size: 11px; color: #cfe0eb; text-align: right; }
.zai-specs strong { display: block; font-size: 15px; font-weight: 700; }
.zai-flex-section .net-perf-reasons { flex-wrap: wrap; }
.zai-flex-section .net-perf-reasons span { max-width: 90px; }

/* ---- "Built for Every Use" — 4 icon cards (no matching real photos for
   these exact use-cases exist yet, so icon tiles instead of images,
   consistent with the "One Display" pattern already used elsewhere). ---- */
.zai-uses-lead { max-width: 620px; margin: -8px 0 24px; font-size: 14px; color: #b7cbd9; }
.zai-use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zai-use-card { position: relative; display: flex; flex-direction: column; padding: 20px 18px 26px; border-radius: 8px; border: 1px solid #155474; background: radial-gradient(ellipse at 50% 10%, #0c3651, #04111b 65%); transition: translate .3s, box-shadow .3s, border-color .3s; text-decoration: none; }
.zai-use-card:hover { translate: 0 -5px; border-color: #ff8a1e; box-shadow: 0 10px 35px #ff8a1e22; }
.zai-use-icon { width: 46px; height: 46px; border-radius: 10px; background: #ff8a1e1a; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; }
.zai-use-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.zai-use-card p { font-size: 12px; line-height: 1.5; color: #abc4d6; margin: 0 0 10px; }
.zai-use-card .syn-arrow { margin-top: auto; }

/* ---- "Reliable Solutions for Business & Industry" — no dedicated photo
   for this section, so copy + a row of industry icons instead of reusing
   one of the 4 hero renders a second time. ---- */
.zai-industry { padding: 40px 0; background: radial-gradient(ellipse at 70% 60%, #09426350, transparent 65%); }
.zai-industry-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
.zai-industry-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zai-industry-icons span { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; border-radius: 8px; border: 1px solid #155474; background: #04111b; font-size: 12px; color: #cfe0eb; text-align: center; }
.zai-industry-icons i { font-size: 24px; color: #ff8a1e; }

/* ---- Partnership band: no dedicated partnership photo either — the
   square Zai mark as a badge + copy, 2 columns instead of the 3-column
   photo/copy/mark layout the other partner pages use. ---- */
.zai-partner-grid { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 28px; }
.zai-partner-mark { width: 120px; height: 120px; border-radius: 16px; overflow: hidden; border: 1px solid #ff8a1e44; flex-shrink: 0; }
.zai-partner-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .zai-power-grid { grid-template-columns: 1fr; gap: 20px; }
  .zai-use-grid { grid-template-columns: repeat(2, 1fr); }
  .zai-specs { position: static; flex-direction: row; flex-wrap: wrap; padding: 12px; background: #030b13d9; }
  .zai-industry-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .zai-photo-art > img { height: auto; }
  .zai-photo-art { max-height: none; }
  .zai-partner-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 480px) {
  .zai-use-grid { grid-template-columns: 1fr; }
  .zai-industry-icons { grid-template-columns: repeat(2, 1fr); }
}