/* assets/css/style.css */
/* 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
    --bg-1: linear-gradient(180deg,#f5fbff,#eef7ff);
    --primary: #0b84ff; /* 主色 */
    --primary-2: #3da5ff;
    --muted: #6b7280;
    --glass-bg: rgba(255,255,255,0.65);
    --card-radius: 14px;
    --container-width: 1100px;
    --shadow-1: 0 6px 24px rgba(11,24,40,0.06);
}

/* 全局 */
body{
    font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,"Helvetica Neue",Arial;
    background: var(--bg-1);
    color: #0f1724;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
}

/* 布局容器 */
.container{
    width: min(94%, var(--container-width));
    margin: 0 auto;
}

/* Header */
.site-header{
    position: sticky;
    top:0;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
    border-bottom: 1px solid rgba(15,23,42,0.04);
    z-index: 40;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 0;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}
.logo{ width:44px; height:44px; }
.brand-name{ font-weight:700; font-size:1.05rem; letter-spacing:0.2px; }

/* Nav */
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px; }
.nav a:hover{ color:var(--primary); background:rgba(11,132,255,0.06); }

/* menu button for mobile */
.menu-btn{ display:none; background:none; border:0; font-size:1.25rem; padding:6px 8px; cursor:pointer; }

/* HERO */
.hero{
    position:relative;
    padding: 56px 0 80px;
    overflow:hidden;
}
.hero-bg{
    position:absolute; inset:0; width:120%; height:120%; object-fit:cover; transform:translateY(-8%); opacity:0.12; filter:blur(6px);
}
.hero-inner{ position:relative; display:flex; align-items:center; height:360px; }
.hero-card{
    width: min(720px, 92%);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7));
    border-radius:18px;
    padding:28px;
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(6px);
}
.hero-card h1{ font-size:1.8rem; margin-bottom:10px; }
.hero-card p{ color:var(--muted); margin-bottom:16px; }
.hero-cta{ display:flex; gap:12px; }

/* Buttons */
.btn{
    display:inline-block;
    padding:10px 16px;
    border-radius:12px;
    font-weight:700;
    text-decoration:none;
    border:1px solid transparent;
}
.btn.primary{
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    color:white;
    box-shadow: 0 8px 20px rgba(11,132,255,0.12);
}
.btn.ghost{
    background:transparent;
    color:var(--primary);
    border:1px solid rgba(11,132,255,0.12);
}

/* Sections */
.section{ padding:40px 0; }
.section-title{ font-size:1.3rem; margin-bottom:18px; }

/* Grid */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; }
.card{ padding:18px; border-radius:var(--card-radius); box-shadow:var(--shadow-1); background: #fff; }
.card.glass{ background: var(--glass-bg); border: 1px solid rgba(255,255,255,0.6); }

/* Services */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px;}
.service-card{ padding:18px; border-radius:12px; background:linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 6px 20px rgba(9,30,66,0.04); }

/* News */
.news-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.news-card{ padding:16px; border-radius:12px; background:#fff; box-shadow:var(--shadow-1); }
.news-card .read-more{ display:inline-block; margin-top:10px; color:var(--primary); text-decoration:none; }

/* Contact form */
.contact-form{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.contact-form input, .contact-form textarea{ padding:10px 12px; border-radius:10px; border:1px solid rgba(15,23,42,0.06); outline:none; font-size:0.95rem; }
.form-actions{ display:flex; gap:10px; margin-top:8px; }

/* Footer */
.site-footer{ padding:20px 0; background:linear-gradient(180deg, rgba(14,22,33,0.03), transparent); margin-top:18px; }
.footer-inner{ display:flex; gap:12px; justify-content:space-between; align-items:center; color:var(--muted); font-size:0.95rem; }

/* Responsive */
@media (max-width: 900px){
    .grid-2{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .news-grid{ grid-template-columns:1fr; }
    .nav{ display:none; }
    .menu-btn{ display:block; }
}
@media (max-width: 520px){
    .services-grid{ grid-template-columns:1fr; }
}

/* 发现页 - 社交平台圆形图标 */
.social-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.social-links a {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.social-links a:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.social-links img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    pointer-events: none;
}

.site-footer {
    padding: 20px 0;
    background-color: #f8f9fa; /* 浅灰色背景，或者根据你页面调整 */
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: center; /* 居中对齐，比分居两头更高级 */
    align-items: center;
    gap: 15px; /* 间距 */
    font-size: 14px;
    color: #666; /* 柔和的深灰色 */
}

.footer-link {
    color: #666;
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #333; /* 悬停时稍微变深 */
    text-decoration: none;
}

.divider {
    color: #ccc; /* 分割线颜色淡一点 */
    user-select: none;
}

/* 移动端适配：如果屏幕太窄，自动换成两行 */
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        gap: 8px;
    }
    .divider {
        display: none; /* 换行后不需要分割线 */
    }
}