/* 官网首页增强样式（仅 index.html 引用，不影响其他页面）
   配色沿用现有色板：darkBg #070C16 / brandBlue #1D3866 / 渐变 #2563eb */

/* ---------- 通用 ---------- */
.gx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- 导航新增按钮 ---------- */
.gx-nav-actions { display: flex; align-items: center; gap: 10px; }
.gx-nav-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 8px 22px -8px rgba(37, 99, 235, .75);
    transition: transform .18s ease, box-shadow .18s ease;
}
.gx-nav-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(37, 99, 235, .9); color: #fff; }
.gx-nav-btn .gx-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: 0 0 7px;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: gxPulse 2.2s infinite;
}
.gx-nav-btn .gx-free {
    position: absolute; top: -7px; right: -4px;
    padding: 1px 7px; border-radius: 999px;
    background: #f97316; color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: .2px; line-height: 1.6;
}
.gx-nav-ghost {
    padding: 9px 18px; border-radius: 999px; font-size: 14px;
    color: #c7d2fe; border: 1px solid rgba(129, 140, 248, .45);
    transition: background .18s ease, color .18s ease;
}
.gx-nav-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }

@keyframes gxPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---------- Hero ---------- */
.gx-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #070C16 0%, #1D3866 100%);
}
.gx-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(70px); opacity: .5;
}
.gx-orb-1 {
    width: 460px; height: 460px; top: -120px; right: -80px;
    background: radial-gradient(circle, #2563eb 0%, rgba(37, 99, 235, 0) 70%);
    animation: gxFloat 16s ease-in-out infinite;
}
.gx-orb-2 {
    width: 380px; height: 380px; bottom: -140px; left: -100px;
    background: radial-gradient(circle, #38bdf8 0%, rgba(56, 189, 248, 0) 70%);
    animation: gxFloat 20s ease-in-out infinite reverse;
}
@keyframes gxFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(28px, -22px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .gx-orb, .gx-nav-btn .gx-dot { animation: none; }
}

.gx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.gx-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 14px; border-radius: 999px; margin-bottom: 20px;
    font-size: 12.5px; font-weight: 600; color: #bae6fd;
    background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .3);
}
.gx-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #38bdf8; }
.gx-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.2;
    font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 18px;
}
.gx-hero .gx-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); color: #cbd5e1; margin: 0 0 16px; }
.gx-hero .gx-desc { font-size: 15.5px; line-height: 1.85; color: #94a3b8; margin: 0 0 32px; max-width: 520px; }
.gx-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.gx-btn-main {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 16px 32px; border-radius: 999px;
    font-size: 15.5px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 14px 34px -14px rgba(37, 99, 235, .95);
    transition: transform .2s ease, box-shadow .2s ease;
}
.gx-btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(37, 99, 235, 1); color: #fff; }
.gx-btn-main i { font-size: 13px; }
.gx-btn-ghost {
    display: inline-flex; align-items: center;
    padding: 15px 28px; border-radius: 999px;
    font-size: 15px; font-weight: 500; color: #bfdbfe;
    border: 1px solid rgba(96, 165, 250, .55);
    transition: background .18s ease, color .18s ease;
}
.gx-btn-ghost:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.gx-note { margin: 18px 0 0; font-size: 12.5px; color: #64748b; }

/* Hero 右侧：检测入口卡 */
.gx-card-float {
    position: relative;
    padding: 26px 26px 22px; border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 184, .22);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.gx-card-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; color: #fff;
    padding-bottom: 16px; border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.gx-card-head .gx-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: gxPulse 2.2s infinite; }
.gx-card-tag {
    margin-left: auto; padding: 2px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; color: #4ade80;
    background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3);
}
.gx-card-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 0; font-size: 13.5px; color: #cbd5e1;
    border-bottom: 1px dashed rgba(148, 163, 184, .13);
}
.gx-card-row b {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #93c5fd;
    background: rgba(37, 99, 235, .22);
}
.gx-card-btn {
    display: block; margin-top: 18px; padding: 13px;
    text-align: center; border-radius: 12px;
    font-size: 14px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    transition: opacity .18s ease, transform .18s ease;
}
.gx-card-btn:hover { opacity: .92; transform: translateY(-1px); color: #fff; }
.gx-card-foot { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: #64748b; }

/* ---------- 自助检测区块 ---------- */
.gx-check {
    position: relative; padding: 88px 0 84px;
    background: linear-gradient(180deg, #ffffff 0%, #eff3fc 100%);
    border-top: 1px solid #e6ecf6;
}
.gx-check-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.gx-eyebrow {
    display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .4px;
    color: #1d4ed8; background: #e3edff; border: 1px solid #cfe0ff;
}
.gx-check-head h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800;
    color: #070C16; letter-spacing: -.02em; margin: 0 0 14px;
}
.gx-check-head p { margin: 0; font-size: 15px; line-height: 1.85; color: #64748b; }

.gx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1060px; margin: 0 auto; }
.gx-step {
    position: relative; padding: 26px 24px 24px;
    background: #fff; border: 1px solid #e3ebf6; border-radius: 18px;
    box-shadow: 0 10px 30px -26px rgba(29, 56, 102, .9);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gx-step:hover { transform: translateY(-4px); border-color: #c9dcf6; box-shadow: 0 22px 44px -28px rgba(29, 56, 102, 1); }
.gx-step .gx-no {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 16px;
    font-size: 12.5px; font-weight: 700; color: #1D3866; background: #eef4ff;
}
.gx-step h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color: #0f172a; }
.gx-step p { margin: 0; font-size: 13.5px; line-height: 1.75; color: #64748b; }
.gx-step .gx-step-tip { display: block; margin-top: 10px; font-size: 12px; color: #94a3b8; }

.gx-check-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; }
.gx-check-cta .gx-btn-main { box-shadow: 0 16px 36px -16px rgba(37, 99, 235, .9); }
.gx-check-sub { font-size: 13px; color: #64748b; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .gx-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .gx-card-float { max-width: 460px; }
    .gx-steps { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 768px) {
    .gx-nav-actions .gx-nav-ghost { display: none; }
    .gx-hero h1 { font-size: 1.9rem; }
    .gx-actions .gx-btn-main, .gx-actions .gx-btn-ghost { width: 100%; justify-content: center; }
    .gx-check { padding: 60px 0; }
    .gx-card-float { padding: 20px; }
}

/* ---------- 移动端菜单与底部导航的检测入口 ---------- */
.gx-m-btn {
    display: block; padding: 12px 20px; border-radius: 999px;
    text-align: center; font-size: 14px; font-weight: 600; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}
.gx-m-btn:hover { color: #fff; opacity: .94; }
.gx-mtab {
    display: block; padding: 12px 0; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}
.gx-mtab:hover { color: #fff; opacity: .94; }