/* ==========================================================================
   组件层：导航 / 按钮 / 卡片 / FAQ / 指令项 / Toast
   材质：蓝色浅色系液态玻璃
   ========================================================================== */

/* ====== 导航栏 ====== */
.glass-nav {
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.82) 0%,
                rgba(236, 246, 255, 0.62) 100%) !important;
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 30px -18px rgba(13, 54, 110, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
}

.nav-link {
    color: #23456F;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    transition: all 0.25s var(--hcy-ease);
    text-decoration: none;
    font-size: 0.95rem;
    position: relative;
}

.nav-link:hover {
    color: var(--hcy-blue-600);
    background-color: rgba(59, 130, 246, 0.1);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.6),
                0 6px 16px -12px rgba(13, 54, 110, 0.6);
}

/* ====== 主按钮（玻璃 + 蓝色高光） ====== */
.hero-btn,
.copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.78rem 1.9rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, #4C93F5 0%, #2364D2 55%, #1B4F9C 100%);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
                inset 0 -1px 1px rgba(9, 42, 90, 0.35),
                0 16px 30px -18px rgba(13, 54, 110, 0.85);
    transition: transform 0.3s var(--hcy-ease), box-shadow 0.3s ease, background 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* 液态高光扫过 */
.hero-btn::after,
.copy-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
                transparent 28%,
                rgba(255, 255, 255, 0.55) 46%,
                rgba(255, 255, 255, 0.15) 54%,
                transparent 68%);
    transform: translateX(-130%);
    transition: transform 0.85s var(--hcy-ease);
    pointer-events: none;
}

.hero-btn:hover,
.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 0 -1px 1px rgba(9, 42, 90, 0.35),
                0 24px 44px -20px rgba(13, 54, 110, 0.9);
}

.hero-btn:hover::after,
.copy-btn:hover::after { transform: translateX(130%); }

.hero-btn:active,
.copy-btn:active { transform: scale(0.97); }

.copy-btn {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
}

/* ====== 玻璃卡片通用 ====== */
.feature-card,
.advantage-card,
.faq-item,
.social-card {
    position: relative;
    background: var(--glass-fill) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-stroke) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    overflow: hidden;
    isolation: isolate;
}

/* 玻璃内壁反光 */
.feature-card::before,
.advantage-card::before,
.faq-item::before,
.social-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 18% -20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
        radial-gradient(90% 60% at 100% 120%, rgba(147, 197, 253, 0.35), rgba(147, 197, 253, 0) 65%);
    opacity: 0.9;
    z-index: 0;
}

.feature-card > *,
.advantage-card > *,
.faq-item > *,
.social-card > * { position: relative; z-index: 1; }

/* 悬停：轻微折射与上浮 */
.feature-card,
.advantage-card,
.social-card {
    transition: transform 0.45s var(--hcy-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}

.feature-card:hover,
.advantage-card:hover,
.social-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--glass-shadow-hover),
                inset 0 1px 0 rgba(255, 255, 255, 1),
                inset 0 -1px 1px rgba(147, 197, 253, 0.45);
}

/* 卡片标题下的小色条（与主题呼应） */
.feature-card h3 { color: var(--hcy-blue-800); }
.feature-card .h-1.bg-primary,
.feature-card div.w-16.h-1 {
    background: linear-gradient(90deg, #60A5FA, #2364D2, rgba(35, 100, 210, 0)) !important;
    border-radius: 999px;
    height: 3px !important;
}

/* ====== 图片悬停放大 ====== */
.hover-zoom { overflow: hidden; }
.hover-zoom img {
    transition: transform 0.7s var(--hcy-ease), filter 0.7s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hover-zoom:hover img { transform: scale(1.07); }

/* ====== 优势卡片 ====== */
.advantage-card {
    text-align: center;
    padding: 1.6rem;
}
.advantage-card h3 { color: var(--hcy-blue-800); }
.advantage-card .rounded-full {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(191, 219, 254, 0.75)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 10px 22px -14px rgba(13, 54, 110, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ====== FAQ 折叠面板 ====== */
.faq-item { border-radius: 18px !important; }
.faq-item:hover { box-shadow: var(--glass-shadow-hover), var(--glass-highlight); }

.faq-question {
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--hcy-blue-800);
    transition: background-color 0.25s ease, color 0.25s ease;
    list-style: none;
    display: flex;
    align-items: center;
}
.faq-question:hover { background-color: rgba(59, 130, 246, 0.08); }
.faq-question::-webkit-details-marker { display: none; }

.faq-question::before {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 0.75rem;
    color: var(--hcy-blue-600);
    transition: transform 0.35s var(--hcy-ease);
    font-size: 0.875rem;
}

details[open] .faq-question::before { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.25rem 1.2rem;
    color: var(--hcy-text-soft);
    line-height: 1.85;
}

/* ====== 指令项 ====== */
.cmd-item {
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    cursor: pointer;
    color: var(--hcy-text-soft);
    border: 1px solid transparent;
    transition: all 0.25s var(--hcy-ease);
    font-size: 0.9rem;
}
.cmd-item:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(147, 197, 253, 0.7);
    color: var(--hcy-blue-700);
    box-shadow: 0 10px 22px -18px rgba(13, 54, 110, 0.8);
}

/* ====== Toast 通知 ====== */
#command-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: linear-gradient(135deg, rgba(76, 147, 245, 0.95), rgba(35, 100, 210, 0.95));
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: #fff;
    padding: 0.6rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 20px 40px -22px rgba(13, 54, 110, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--hcy-ease);
    white-space: nowrap;
}
#command-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ====== 回到顶部 ====== */
#backToTop {
    background: linear-gradient(140deg, #4C93F5, #2364D2) !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 36px -20px rgba(13, 54, 110, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s var(--hcy-ease);
}
#backToTop:hover { transform: translateY(-3px) scale(1.04); }