/* ============================================================
 * 新版首页（home.php）样式
 * 视觉参考 https://net.arsn.cn 首页层次：Hero → 工具网格 → 能力亮点 → 行动号召
 * 复用 pages.css 的 --np-* 设计变量，保持全站一致
 * ============================================================ */

/* Hero */
.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--np-radius-lg);
    background:
        radial-gradient(120% 140% at 12% 0%, var(--np-primary-soft), transparent 60%),
        linear-gradient(135deg, #4b5be0 0%, #6a7bf0 45%, #8b6cf0 100%);
    color: #fff;
    margin-bottom: 28px;
}
.home-hero-glow {
    position: absolute;
    right: -120px; top: -120px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(8px);
    pointer-events: none;
}
.home-hero-inner {
    position: relative;
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
    max-width: 760px;
}
.home-hero-badge {
    display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.16);
    color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em;
    backdrop-filter: blur(4px);
}
.home-hero-title {
    margin: 18px 0 0;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.home-hero-sub {
    margin: 16px 0 0;
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    max-width: 600px;
}
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.home-cta {
    height: 44px; padding: 0 26px; font-size: 15px; font-weight: 650;
}
.home-cta-ghost {
    height: 44px; padding: 0 24px; font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--np-radius-sm);
    color: #fff; background: rgba(255, 255, 255, 0.08); transition: background-color .15s, border-color .15s;
}
.home-cta-ghost:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; border-color: #fff; }
.home-hero-stats { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 34px; flex-wrap: wrap; }
.home-hero-stat { display: flex; flex-direction: column; }
.home-hero-stat-num { font-size: 24px; font-weight: 760; line-height: 1.1; }
.home-hero-stat-label { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; }

/* 区块通用 */
.home-section { margin-bottom: 32px; }
.home-section-head { margin-bottom: 18px; }
.home-section-title {
    margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 720; letter-spacing: -0.01em;
}
.home-section-desc { margin: 8px 0 0; color: var(--np-text-secondary); font-size: 14px; }

/* 工具网格 */
.home-tools { row-gap: 16px; }
.np-tool-card { position: relative; overflow: hidden; }
.np-tool-card .np-tool-arrow {
    position: absolute; right: 18px; bottom: 16px;
    font-size: 18px; color: var(--np-primary); opacity: 0;
    transform: translateX(-6px); transition: opacity .15s, transform .15s;
}
.np-tool-card:hover .np-tool-arrow { opacity: 1; transform: translateX(0); }
.np-tool-card.is-primary { border-color: var(--np-primary); background: linear-gradient(180deg, var(--np-primary-soft), var(--np-card)); }
.np-tool-card.is-primary .np-tool-icon { background: var(--np-primary); color: #fff; }
.np-tool-card.is-accent { border-color: #8b6cf0; }
.np-tool-card.is-accent .np-tool-icon { background: rgba(139, 108, 240, .12); color: #8b6cf0; }

/* 能力亮点 */
.home-features { row-gap: 16px; }
.home-feature {
    border: 1px solid var(--np-border); border-radius: var(--np-radius-lg);
    background: var(--np-card); padding: 20px; box-shadow: var(--np-shadow);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-feature:hover { transform: translateY(-2px); box-shadow: var(--np-shadow-md); border-color: var(--np-primary); }
.home-feature-icon { font-size: 24px; margin-bottom: 10px; }
.home-feature-title { font-size: 15.5px; font-weight: 680; margin-bottom: 6px; }
.home-feature-desc { font-size: 13px; color: var(--np-text-secondary); line-height: 1.65; }

/* NAT 专区 */
.home-nat-band {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    border: 1px solid var(--np-border); border-radius: var(--np-radius-lg);
    background: linear-gradient(135deg, rgba(139, 108, 240, .1), var(--np-card));
    padding: 24px 26px; box-shadow: var(--np-shadow);
}
.home-nat-band-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.home-nat-band-desc { margin: 0; font-size: 13.5px; color: var(--np-text-secondary); line-height: 1.6; max-width: 640px; }

/* 行动号召 */
.home-cta-section { margin-bottom: 8px; }
.home-cta-card {
    text-align: center; border: 1px solid var(--np-border); border-radius: var(--np-radius-lg);
    background: var(--np-card); padding: 40px 24px; box-shadow: var(--np-shadow);
}
.home-cta-title { margin: 0 0 8px; font-size: clamp(20px, 3vw, 28px); font-weight: 740; }
.home-cta-sub { margin: 0 0 22px; color: var(--np-text-secondary); font-size: 14px; }

/* 响应式 */
@media (max-width: 640px) {
    .home-hero-stats { gap: 22px; }
    .home-nat-band { flex-direction: column; align-items: flex-start; }
    .home-nat-band .np-btn { width: 100%; }
}

/* 深色模式微调 */
@media (prefers-color-scheme: dark) {
    .home-nat-band { background: linear-gradient(135deg, rgba(139, 108, 240, .18), var(--np-card)); }
}

/* 进场渐显（仅 JS 运行时添加 home-reveal，无 JS 时正常显示） */
.home-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.home-reveal.is-visible { opacity: 1; transform: none; }