/* 基础重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: #fcfbfa; /* 极浅的底色 */
    color: #1d1d1f; 
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* --- 核心动画：流体背景 --- */
.background-canvas {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    overflow: hidden;
    background: #fdfbf9; 
}

.fluid-blob {
    position: absolute;
    filter: blur(10px); /* 稍微降低一点模糊度，让颜色透出来 */
    opacity: 0.8;
    /* 加入不规则形变动画，这是流体感的关键 */
    animation: fluidShape 20s infinite ease-in-out alternate;
}

/* 蓝色水波 - 稍微加深 */
.shape-1 {
    background: #c3d4fb; 
    width: 60vw; height: 60vw;
    top: -15%; left: -10%;
}

/* 粉色水波 - 稍微加深 */
.shape-2 {
    background: #f1d5e6; 
    width: 50vw; height: 50vw;
    bottom: -15%; right: -10%;
    animation-delay: -5s; 
    animation-duration: 25s;
}

/* 新增：奶绿色水波 - 增加交融层次 */
.shape-3 {
    background: #e2f0d9;
    width: 45vw; height: 45vw;
    top: 30%; left: 30%;
    animation-delay: -10s;
    animation-duration: 22s;
}

/* 液态形变与位移动画综合 */
@keyframes fluidShape {
    0% { 
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) scale(1) rotate(0deg); 
    }
    33% { 
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
        transform: translate(10%, 15%) scale(1.1) rotate(15deg); 
    }
    66% { 
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate(-10%, 10%) scale(0.9) rotate(-10deg); 
    }
    100% { 
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(5%, -10%) scale(1.05) rotate(10deg); 
    }
}

/* --- 主容器：超级透明 + 重度磨砂 --- */
.container {
    width: 90%;
    max-width: 720px;
    padding: 50px;
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(80px) saturate(150%);
    -webkit-backdrop-filter: blur(80px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.8); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.05); 
    display: flex;
    flex-direction: column;
    gap: 35px; 
}

/* 头部排版 */
header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 30px;
}
h1 { font-size: 3.5rem; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 8px; color: #000; }
p.subtitle { font-size: 1.2rem; font-weight: 400; color: #6e6e73; letter-spacing: -0.01em; }

/* 主交互卡片 */
.action-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.card {
    padding: 30px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.5);
    text-decoration: none; color: #1d1d1f;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 160px; cursor: pointer;
}
.card:hover {
    background: #000; color: #fff; border-color: #000;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card h2 { font-size: 1.4rem; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.02em; }
.card p { font-size: 0.95rem; color: #6e6e73; line-height: 1.4; transition: color 0.5s ease; }
.card:hover p { color: #a1a1a6; }
.icon-arrow { align-self: flex-end; margin-top: 20px; opacity: 0.4; transition: opacity 0.3s; }
.card:hover .icon-arrow { opacity: 1; }

/* 底部社交链接胶囊 */
.social-footer {
    display: flex; gap: 15px; margin-top: 5px;
}
.social-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 100px; 
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #1d1d1f; text-decoration: none;
    font-size: 0.95rem; font-weight: 500;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.social-btn:hover {
    background: #000; color: #fff; border-color: #000;
    transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.social-btn svg { width: 18px; height: 18px; opacity: 0.8; }

/* 移动端适配 */
@media (max-width: 600px) {
    .container { padding: 30px; border-radius: 24px; }
    h1 { font-size: 2.5rem; }
    .action-grid { grid-template-columns: 1fr; }
    .social-footer { flex-direction: column; } 
    .social-btn { justify-content: center; }
}