/* =========================================================
   4/5 · 页面层 pages/home.css —— 首页
   ---------------------------------------------------------
   本文件**只被首页加载**（theme.json 的 styles.pages.home）。
   想给首页换一套完全不同的长相，替换这一个文件即可，
   列表页 / 详情页不受影响。

   类名前缀：.home-*
     .home-hero*     首屏大图区
     .home-stats*    数据实力带
     .home-why*      为什么选择我们
     .home-feature*  核心产品（深色交替图文）
     .home-tab(s)    产品目录 Tab
     .home-industry* 应用行业
     .home-quote(s)  客户评价
     .home-news*     新闻与案例
   ⚠️ 这个文件里出现的每一个选择器都必须带 .home- 前缀 ——
      否则「只换首页样式」时会顺手改掉别的页面（前缀强制就为了这个）。
   ========================================================= */

/* ---------------- 首屏 ---------------- */

.home-hero {
    position: relative; overflow: hidden;
    background: var(--navy); color: #fff; padding: 168px 0 96px;
}
.home-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: .30;
    background-image:
        linear-gradient(rgba(91, 168, 245, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 168, 245, .13) 1px, transparent 1px);
    background-size: 56px 56px;
}
.home-hero::after {
    content: ""; position: absolute; width: 900px; height: 900px; inset-inline-end: -220px; top: -320px;
    background: radial-gradient(circle, rgba(0, 102, 204, .40), transparent 62%);
    pointer-events: none;
}
.home-hero .wrap { position: relative; z-index: 2; }
.home-hero-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.home-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blue-l); margin-bottom: 20px;
}
.home-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--blue-l); }
.home-hero h1 { font-size: 52px; line-height: 1.16; margin-bottom: 22px; }
.home-hero h1 em { font-style: normal; color: var(--blue-l); }
.home-lead { font-size: 18px; color: var(--on-dark); max-width: 540px; margin-bottom: 34px; }
.home-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.home-visual {
    position: relative; border-radius: 20px; overflow: hidden;
    background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .40);
    aspect-ratio: 1 / 1;
}
.home-visual img { width: 100%; height: 100%; object-fit: cover; }
.home-visual .ph {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: rgba(255, 255, 255, .30); font-size: 14px; letter-spacing: .1em;
}
.home-tag {
    position: absolute; z-index: 3; padding: 10px 16px; border-radius: 12px;
    background: rgba(10, 26, 47, .82); border: 1px solid rgba(91, 168, 245, .34);
    font-size: 13px; color: #fff;
}
.home-tag b { display: block; font-size: 20px; color: var(--blue-l); line-height: 1.2; }
/* 两个浮标分居首屏两侧 —— 用逻辑属性，RTL 时自动左右互换，
   否则阿拉伯语站的两个标签会与文案重叠（文案已经换到右边了）。 */
.home-tag.t1 { inset-inline-start: 4%; bottom: 8%; }
.home-tag.t2 { inset-inline-end: 4%; top: 8%; }

/* ---------------- 数据实力带 ---------------- */

.home-stats { background: var(--blue); color: #fff; }
.home-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
/* 分隔线在「行首」侧 —— RTL 时自动换到右侧，否则阿拉伯语站的竖线会落在最右边那格的外侧 */
.home-stat { padding: 40px 24px; text-align: center; border-inline-start: 1px solid rgba(255, 255, 255, .20); }
.home-stat:first-child { border-inline-start: 0; }
.home-stat b { display: block; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.home-stat span { font-size: 14px; color: rgba(255, 255, 255, .82); }

/* ---------------- 为什么选择 ---------------- */

.home-why-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.home-why-side h2 { font-size: 34px; margin-bottom: 16px; }
.home-why-side p  { color: var(--muted); font-size: 17px; }
.home-why-side .btn { margin-top: 26px; }

.home-why-cards { display: grid; gap: 18px; }
.home-why-card {
    display: flex; gap: 18px; padding: 26px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); transition: .24s;
}
.home-why-card:hover {
    border-color: rgba(0, 102, 204, .38); box-shadow: var(--shadow); transform: translateY(-2px);
}
.home-why-ico {
    flex: 0 0 50px; height: 50px; border-radius: 12px;
    background: rgba(0, 102, 204, .09); color: var(--blue);
    display: flex; align-items: center; justify-content: center;
}
.home-why-ico svg { width: 26px; height: 26px; }
.home-why-card h4 { font-size: 18px; margin-bottom: 6px; }
.home-why-card p  { color: var(--muted); font-size: 15px; }

/* ---------------- 核心产品（深色交替图文） ---------------- */

.home-feature-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
    padding: 44px 0; border-top: 1px solid rgba(255, 255, 255, .10);
}
.home-feature-row:first-of-type { border-top: 0; padding-top: 0; }
/* 偶数行把图文左右对调（.htm 模板不写奇偶判断，交给 CSS） */
.home-feature-row:nth-child(even) > div:first-child { order: 2; }
.home-feature-row:nth-child(even) > .home-feature-media { order: 1; }
.home-feature-num {
    font-size: 13px; letter-spacing: .18em; color: var(--blue-l);
    margin-bottom: 14px; font-weight: 600;
}
.home-feature-row h3 { font-size: 30px; margin-bottom: 12px; }
.home-slogan { color: var(--blue-l); font-size: 16px; margin-bottom: 12px; }
.home-txt { color: var(--on-dark); font-size: 16px; margin-bottom: 24px; }
.home-feature-media {
    border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10);
}
.home-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.home-feature-media .ph {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: rgba(255, 255, 255, .26); font-size: 13px;
}

/* ---------------- 产品目录 Tab ---------------- */

.home-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; margin-bottom: 36px; }
.home-tab {
    height: 54px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 17px;
    font-weight: 600; border: 1px solid var(--line); background: #EEF2F7; color: var(--ink);
    transition: .2s;
}
.home-tab:hover { border-color: rgba(0, 102, 204, .40); }
.home-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------------- 应用行业 ---------------- */

.home-industry {
    display: flex; align-items: center; gap: 32px; padding: 40px; background: #fff;
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 6px 24px rgba(16, 34, 60, .05);
}
.home-industry-ico {
    flex: 0 0 92px; height: 92px; border-radius: 20px;
    background: linear-gradient(145deg, var(--blue), var(--blue-d)); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.home-industry-ico svg { width: 44px; height: 44px; }
.home-industry-body h3 { font-size: 24px; margin-bottom: 8px; }
.home-industry-body p  { color: var(--muted); }
.home-industry-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.home-industry-tags span {
    padding: 6px 14px; border-radius: 999px; font-size: 14px;
    background: rgba(0, 102, 204, .08); color: var(--blue-d);
}

/* ---------------- 客户评价 ---------------- */

.home-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-quote {
    padding: 30px 28px; border-radius: 16px; background: #0E2C4D;
    border: 1px solid rgba(255, 255, 255, .07);
    display: flex; flex-direction: column; gap: 18px;
}
.home-quote-mark { font-size: 40px; line-height: 1; color: var(--blue-l); opacity: .55; }
.home-quote-text { color: #D6E0EC; font-size: 16px; }
.home-quote-by   { color: var(--blue-l); font-size: 15px; margin-top: auto; }

/* ---------------- 新闻与案例 ---------------- */

.home-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-news-item {
    display: block; padding: 26px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); transition: .24s;
}
.home-news-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.home-news-date  { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: 10px; }
.home-news-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.home-news-desc  { font-size: 14px; color: var(--muted); }

/* ---------------- 响应式（仅首页） ---------------- */

@media (max-width: 1024px) {
    .home-hero-grid, .home-why-grid, .home-feature-row { grid-template-columns: 1fr; }
    .home-why-grid { gap: 34px; }
    .home-quotes, .home-news { grid-template-columns: repeat(2, 1fr); }
    .home-hero h1 { font-size: 40px; }
}

@media (max-width: 720px) {
    .home-hero { padding: 128px 0 64px; }
    .home-hero h1 { font-size: 32px; }
    .home-tag { display: none; }
    .home-stats-inner { grid-template-columns: 1fr 1fr; }
    .home-stat { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
    .home-stat:first-child, .home-stat:nth-child(2) { border-top: 0; }
    .home-quotes, .home-news { grid-template-columns: 1fr; }
    .home-tabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .home-industry { flex-direction: column; align-items: flex-start; padding: 28px; }
}