/* --- 1. 变量定义 --- */
:root {
    --off-white: #fef7eb;
    --brand-yellow: #faa812;
    --brand-purple: #7f257b;
    --brand-blue: #33afb5;
    --brand-orange: #f77811;
    --brand-brown: #6a1500;
    --brand-pink: #ef1787;
    --brand-green: #166b25;
    
   --font-title-fredoka: 'Fredoka', sans-serif;
    --font-title-dangrek: 'Dangrek', sans-serif;
    --font-body: 'Cera Pro', 'Kantumruy Pro', sans-serif;
}


header {
    background-color: var(--off-white);
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px;
    padding: 10px 0 12px 0; 
    box-shadow: 0 4px 12px rgba(106, 21, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.header-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.logo img {
    height: 65px; 
    width: auto;
}

/* 搜索栏交互样式 */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar {
    position: absolute;
    right: 40px;
    display: flex;
    background: white;
    border: 2px solid var(--brand-yellow);
    border-radius: 20px;
    padding: 5px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.search-bar.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.search-bar input {
    border: none; outline: none; width: 120px;
}

.search-bar button {
    background: var(--brand-yellow);
    border: none; color: white; border-radius: 10px;
    padding: 2px 8px; cursor: pointer; font-weight: bold;
}

.search-icon img {
    width: 22px; cursor: pointer;
}

/* --- 4. 导航图标 --- */
.nav-scroll {
    display: flex;
    /* 核心：恢复之前的等距分布 */
    justify-content: space-between; 
    width: 85%; /* 或者用你之前的 75%，根据你想要的疏密程度调整 */
    max-width: 1200px; /* 限制最大宽度，防止大屏幕图标分得太开 */
    margin: 0 auto;
}
.nav-scroll a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}
.nav-scroll img {
    height: 24px; /* 恢复你的图标大小 */
    width: auto;
}

.nav-scroll a:hover { transform: scale(1.2); }

/* --- 统一导航指示原点样式 --- */
.nav-scroll a.active::after {
    content: '';
    position: absolute;
    /* 核心修改：统一距离图标底部的距离 */
    bottom: -12px; /* 增加负值可以让点往下移，建议根据视觉效果在 -10px 到 -15px 之间微调 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 保持原点形状 */
    width: 6px; 
    height: 6px;
    background-color: var(--brand-yellow);
    border-radius: 50%;
    
    /* 动画保持不变 */
    animation: dotFade 0.3s ease forwards;
}

/* 确保 a 标签有足够的点击区域，并防止点被切掉 */
.nav-scroll a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px; /* 给下方点留出固定呼吸空间 */
    transition: transform 0.2s ease;
}

@keyframes dotFade {
    from { opacity: 0; transform: translate(-50%, 5px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


/* 给中间内容一个最小高度，把 Footer 顶下去 */
.content-wrapper {
    min-height: 60vh; /* 占据屏幕 60% 的高度 */
    padding: 50px 10%;
    background-color: #fcfcfc; /* 主体背景色 */
}






/* --- 1. 强制页面布局 --- */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 保证页面至少占满屏幕 */
    display: flex;
    flex-direction: column;
   
}

/* --- 2. 给中间留出空位（关键！） --- */
/* 如果你 HTML 里没有 main 标签，请加一个，或者用这个选择器占位 */
header + * {
    flex: 1; /* 自动撑开中间，把 footer 压到最下面 */
}

/* --- 3. Footer 样式：精简高度 --- */
.footer-main {
    background-color:  var(--off-white)!important;
    /* 核心修改：大大减小上下内边距 (40px 是现在的，15px 是底部的) */
    padding: 30px 5% 15px !important; 
    border-top-left-radius: 60px !important;
    border-top-right-radius: 60px !important;
    width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center; /* 改为居中对齐，让内容看起来更整齐 */
}

/* 缩放 Logo 图标，防止撑高 */
.footer-photo-box img {
    width: 100px !important; 
    height: auto;
}


.footer-nav {
            display: flex;
            gap: 60px;
            flex-grow: 1;
            padding-left: 40px;
            font:var(--font-title-fredoka);
        }

        .nav-col {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

/* 修改后的 Footer 导航样式 */
.nav-col a {
    font-family: var(--font-body); /* 加上这一行，调用 Cera Pro */
    text-decoration: none;
    color: #6a1500;
    font-weight: 700;
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* 增加一个悬停效果，让它更专业 */
.nav-col a:hover {
    color: var(--brand-yellow);
}

/* 右侧联系方式 */
.footer-contact {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-contact h2 {
    /* 显式调用变量，并加上 !important 确保加载 */
    font-family: var(--font-title-fredoka) !important; 
    font-size: 1.8rem !important; 
    margin-bottom: 5px !important;
    /* 确保字体权重也是对的 */
    font-weight: 600; 
}

/* Contact Us 小标题 (如果有 h3) */
.footer-contact h3 {
    font-family: var(--font-title-fredoka) !important;
    font-size: 1.2rem !important;
    color: #6a1500;
}

/* Body Text - 强制使用 Cera Pro */
.footer-contact p {
    font-family: var(--font-body) !important; /* 这里会调用 Cera Pro */
    font-size: 0.85rem !important;
    max-width: 280px;
    line-height: 1.5;
    color: #6a1500;
}

/* 社交图标锁定 */
.social-row-icons {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.social-row-icons img {
    width: 28px !important;
    height: 28px !important;
}

/* 4. 版权行：极致紧凑 */
.copyright {
    text-align: center !important;
    margin-top: 20px !important; /* 缩减与上方的距离 */
    padding-top: 10px !important;
    border-top: 1px solid rgba(106, 21, 0, 0.1) !important;
    font-size: 0.75rem !important;
    color: #6a1500 !important;
}

.footer-contact h2, 
.footer-contact h3, 
.footer-contact p,
.footer-brand-contact h2,
.footer-brand-contact h3,
.footer-brand-contact p {
    color: #6a1500; 
}

/* --- 响应式手机端修改 --- */
@media (max-width: 768px) {
    
    /* 1. Header 居中 */
    .header-row-1 {
        flex-direction: column; /* 纵向排列 */
        gap: 15px;
        position: relative;
    }

    .logo {
        margin: 0 auto; /* Logo 居中 */
    }

    .search-container {
        justify-content: center; /* 搜索图标居中 */
        width: 100%;
    }

    /* 搜索栏弹出后在中间 */
    .search-bar {
        position: absolute;
        top: 60px; /* 根据你的 header 高度调整 */
        right: 50%;
        transform: translateX(50%); /* 完美的水平居中 */
        width: 80%; /* 手机端宽度占 80% */
        z-index: 10;
    }
    
    .search-bar.show {
        transform: translateX(50%); /* 保持居中显示 */
    }

    /* 2. 导航栏调整 */
    .nav-scroll {
        max-width: 95%; /* 增加手机端导航宽度 */
    }

    /* 3. Footer 居中 */
    .footer-grid {
        flex-direction: column; /* 竖向排列 */
        gap: 30px;
        text-align: center; /* 全体文字居中 */
    }

    .footer-nav {
        padding-left: 0;
        justify-content: center;
        gap: 40px;
    }

    .footer-contact {
        align-items: center; /* 内部 flex 元素居中 */
        text-align: center;
    }

    .footer-contact p {
        margin: 0 auto 15px; /* 段落居中 */
    }

    .social-row-icons {
        justify-content: center; /* 社交图标居中 */
        margin-top: 15px;
    }

    .footer-photo-box {
        margin-bottom: 10px;
    }
}
/* 让 Row 2 成为定位参考 */
@media (max-width: 768px) {
    /* 确保 Row 2 在手机端依然是定位参考 */
    .header-row-2 {
        position: relative;
        padding: 10px 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* 针对手机端重新定义 Search Bar 的位置 */
    .search-bar {
        position: absolute;
        /* 强制水平居中 */
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 关键：在手机端宽度要够大 */
        width: 92% !important; 
        max-width: none !important; /* 取消电脑端的最大宽度限制 */
        
        padding: 8px 15px !important;
        z-index: 999; /* 确保它盖在图标最上方 */
    }

    /* 确保搜索栏里的输入框和按钮在小屏幕不挤压 */
    .search-bar input {
        font-size: 14px; /* 减小字体防止撑开高度 */
        width: 100%;
    }

    .search-bar button {
        padding: 4px 12px;
        font-size: 12px;
    }

    /* 保持图标行在底下的间距，防止搜索框关掉后布局跳动 */
    .nav-scroll {
        width: 95%; /* 手机端图标可以分布得更满一点 */
        justify-content: space-around; /* 图标均匀分布，防止挤在一起 */
    }
}



/* --- About Us Page 基础容器 --- */
.about-us-page {
    background-color: var(--off-white);
    overflow: hidden; /* 防止背景球溢出 */
}

/* --- 1. 顶部标题与形状对齐 --- */
.about-header {
    text-align: center;
    padding: 60px 0 40px;
}

.main-title {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 3rem;
    margin-bottom: 20px;
}

.shape-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* 视觉平衡核心：容器等大，内容按比例缩放 */
.shape-item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-img.tri { width: 22px; }   /* 三角形宽一点 */
.shape-img.dot { width: 16px; }   /* 圆形视觉实，要小一点 */
.shape-img.star { width: 26px; }  /* 星形尖刺多，要大一点 */

/* --- 2. 关于品牌介绍 (电脑端左右) --- */
.brand-intro {
    padding: 60px 10%;
}

.intro-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.intro-text { flex: 1; }
.intro-text h2 {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 2rem;
    margin-bottom: 15px;
}
.intro-text p {
    font-family: var(--font-body);
    color: var(--brand-brown);
    line-height: 1.6;
    font-weight: 500;
}

.intro-logo-box {
    flex: 1;
    background-color: #fff9f0; /* 浅米色背景块 */
    padding: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
}

.brand-image {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* --- 3. Purpose 部分 & 漂浮照片球 --- */
.purpose-section {
    position: relative;
    padding: 100px 10% 150px;
    /* 波浪背景可以使用一张 SVG 或圆角实现 */
    background: radial-gradient(circle at 50% 100%, #fff 0%, transparent 70%);
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 2; /* 确保卡片在照片球上方 */
}

.info-card {
    flex: 1;
    max-width: 400px;
    min-height: 300px;
    padding: 40px;
    border-radius: 30px;
    color: white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.info-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.info-card:hover {
    transform: translateY(-12px) rotate(-1deg); /* 增加一点微小的旋转，显得更活泼 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}


.card-blue { background-color: var(--brand-blue); }
.card-purple { background-color: var(--brand-purple); }

.info-card h3 {
    font-family: var(--font-title-fredoka);
    font-size: 2.2rem;
    margin-bottom: 25px;
}
.info-card p {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
}


/* --- 容器设置 --- */

.purpose-section {
    position: relative;
    /* 原代码：padding: 100px 10% 150px; */
    padding: 80px 10% 80px; /* 将 150px 缩减为 40px 或更小 */
    background: radial-gradient(circle at 50% 100%, #fff 0%, transparent 70%);
}

/* --- 形状基础样式 --- */
.floating-shape {
    position: absolute;
    z-index: 1; /* 在文字底层 */
    pointer-events: none;
    will-change: transform;
}

/* 视觉大小平衡补偿 */
img[src*="rak.png"] { width: 22px; }
img[src*="circle.png"] { width: 16px; }
img[src*="star.png"] { width: 26px; }

/* --- 巡航动画 --- */
@keyframes longCruise {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(150px, -100px) rotate(15deg); }
    50% { transform: translate(300px, 50px) rotate(-10deg); }
    75% { transform: translate(120px, 200px) rotate(20deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- 15个点的全场分布 --- */
/* 通过调整 top 值从 0% 到 90%，让它们分布在整个页面 */

.s1 { top: 5%; left: 5%; animation: longCruise 25s infinite ease-in-out; }
.s2 { top: 12%; right: 10%; animation: longCruise 35s infinite ease-in-out -5s reverse; }
.s3 { top: 25%; left: 15%; animation: longCruise 30s infinite linear -10s; }
.s4 { top: 35%; right: 20%; animation: longCruise 40s infinite ease-in-out -15s; }
.s5 { top: 45%; left: 45%; animation: longCruise 45s infinite ease-in-out -20s reverse; }

.s6 { top: 55%; left: 10%; animation: longCruise 38s infinite ease-in-out -2s; }
.s7 { top: 65%; right: 5%; animation: longCruise 42s infinite linear -7s reverse; }
.s8 { top: 75%; left: 30%; animation: longCruise 28s infinite ease-in-out -12s; }
.s9 { top: 18%; left: 60%; animation: longCruise 33s infinite ease-in-out -18s; }
.s10 { top: 85%; right: 40%; animation: longCruise 47s infinite ease-in-out -25s reverse; }

.s11 { top: 50%; right: 15%; animation: longCruise 36s infinite linear -4s; }
.s12 { top: 40%; left: 70%; animation: longCruise 50s infinite ease-in-out -9s reverse; }
.s13 { top: 80%; left: 5%; animation: longCruise 22s infinite ease-in-out -14s; }
.s14 { top: 90%; right: 50%; animation: longCruise 31s infinite ease-in-out -21s; }
.s15 { top: 10%; right: 40%; animation: longCruise 39s infinite ease-in-out -28s reverse; }

/* --- 卡片布局 --- */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    position: relative;
    z-index: 2; /* 确保卡片在圆点上方 */
}

.info-card {
    flex: 1;
    max-width: 450px;
    padding: 50px 40px;
    border-radius: 40px;
    color: white;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-blue { background-color: #36B1B8; }
.card-purple { background-color: #7E3079; }




/* --- 5. 响应式微调 (Mobile) --- */
@media (max-width: 768px) {
    .intro-container, .cards-container {
        flex-direction: column;
        align-items: center;
    }
    
    .intro-text { text-align: center; }
    
    .info-card {
        width: 100%;
        max-width: none;
        min-height: auto;
    }

    .main-title { font-size: 2.5rem; }
     .cards-container { flex-direction: column; align-items: center; }
    .brand-intro { padding: 40px 20px; }
}

/* --- Parenting Hero Section --- */
.parenting-hero {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

/* 复用你 About Us 页面的形状样式 */
.parenting-hero .shape-pagination {
    margin-bottom: 30px;
}

.hero-headline {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

.hero-description {
    font-family: var(--font-body);
    color: var(--brand-brown);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 45px;
    font-weight: 500;
}

/* 棕色图片容器 */
.hero-image-box {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--brand-brown); /* 默认深棕色背景 */
    border-radius: 40px; /* 配合你整体的圆润风格 */
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(106, 21, 0, 0.15);
}

.hero-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 按钮样式 - 使用你的品牌黄 */
.hero-action {
    display: flex;
    justify-content: center;
}

.btn-explore {
    display: inline-block;
    background-color: var(--brand-yellow);
    color: var(--brand-brown);
    font-family: var(--font-body);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 18px 60px;
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-explore:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 20px rgba(250, 168, 18, 0.3);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }

    .hero-image-box {
        border-radius: 25px;
        margin-bottom: 35px;
    }

    .btn-explore {
        width: 100%; /* 手机端按钮加宽 */
        padding: 15px 0;
    }
}




/* --- 团队右划滑动效果 --- */

.team-section {
    padding: 60px 0; /* 侧边内边距由内部容器控制 */
    background-color: var(--off-white);
    text-align: center;
}

/* 滑动外壳：隐藏滚动条但保留功能（可选） */
.team-scroll-wrapper {
    width: 100%;
    overflow-x: auto; /* 允许横向滚动 */
    padding: 20px 25px 40px; /* 留出阴影空间和侧边间距 */
    display: flex;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

.team-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari 隐藏滚动条，保持页面整洁 */
}

/* 水平排列的容器 */
.team-horizontal-container {
    display: flex;
    flex-wrap: nowrap; /* 关键：强制不换行 */
    gap: 20px;
}

/* 单个卡片样式 */
.team-card {
    flex: 0 0 280px; /* 关键：固定宽度，不压缩 */
    padding: 40px 20px;
    border-radius: 40px;
    color: white;
    box-shadow: 0 10px 25px rgba(106, 21, 0, 0.1);
    transition: transform 0.3s ease;
}

/* 颜色类名 (复用你现有的变量) */
.card-blue { background-color: var(--brand-blue); }
.card-purple { background-color: var(--brand-purple); }
.card-orange { background-color: var(--brand-orange); }
.card-pink { background-color: var(--brand-pink); }
.card-green { background-color: var(--brand-green); }
.card-brown { background-color: var(--brand-brown); }

/* 照片圆圈 */
.member-photo {
    width: 130px;
    height: 130px;
    background-color: white;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字 */
.member-name {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.member-role {
    font-family: var(--font-body);
    font-size: 0.9rem;
    opacity: 0.9;
}

/* 按钮 */
.team-action {
    margin-top: 20px;
}

/* --- Meet Us 按钮统一效果 --- */
.btn-meet-us {
    display: inline-block;
    background-color: var(--brand-yellow);
    color: var(--brand-brown);
    font-family: var(--font-body);
    padding: 15px 40px;
    border-radius: 18px; /* 稍微调圆一点点，对齐 explore 按钮 */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    /* 使用 cubic-bezier 让回弹更灵动，跟 header 保持一致 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

.btn-meet-us:hover {
    /* 核心：放大 1.05 倍并上浮 3px */
    transform: scale(1.05) translateY(-3px);
    
    /* 增加发光的黄色阴影 */
    box-shadow: 0 10px 20px rgba(250, 168, 18, 0.3);
    
    /* 可选：稍微加深一点文字颜色或背景，增加对比度 */
    background-color: #fbb32d; 
}

/* 增加点击时的反馈：按下感 */
.btn-meet-us:active {
    transform: scale(0.98) translateY(0);
    transition: 0.1s;
}




/* --- 1. 变量定义 --- */
:root {
    --off-white: #fef7eb;
    --brand-yellow: #faa812;
    --brand-purple: #7f257b;
    --brand-blue: #33afb5;
    --brand-orange: #f77811;
    --brand-brown: #6a1500;
    --brand-pink: #ef1787;
    --brand-green: #166b25;
    
   --font-title-fredoka: 'Fredoka', sans-serif;
    --font-title-dangrek: 'Dangrek', sans-serif;
    --font-body: 'Cera Pro', 'Kantumruy Pro', sans-serif;
}


header {
    background-color: var(--off-white);
    border-bottom-left-radius: 25px; 
    border-bottom-right-radius: 25px;
    padding: 10px 0 12px 0; 
    box-shadow: 0 4px 12px rgba(106, 21, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.header-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.logo img {
    height: 65px; 
    width: auto;
}

/* 搜索栏交互样式 */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar {
    position: absolute;
    right: 40px;
    display: flex;
    background: white;
    border: 2px solid var(--brand-yellow);
    border-radius: 20px;
    padding: 5px 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.search-bar.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.search-bar input {
    border: none; outline: none; width: 120px;
}

.search-bar button {
    background: var(--brand-yellow);
    border: none; color: white; border-radius: 10px;
    padding: 2px 8px; cursor: pointer; font-weight: bold;
}

.search-icon img {
    width: 22px; cursor: pointer;
}

/* --- 4. 导航图标 --- */
.nav-scroll {
    display: flex;
    /* 核心：恢复之前的等距分布 */
    justify-content: space-between; 
    width: 85%; /* 或者用你之前的 75%，根据你想要的疏密程度调整 */
    max-width: 1200px; /* 限制最大宽度，防止大屏幕图标分得太开 */
    margin: 0 auto;
}
.nav-scroll a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
}
.nav-scroll img {
    height: 24px; /* 恢复你的图标大小 */
    width: auto;
}

.nav-scroll a:hover { transform: scale(1.2); }

/* --- 统一导航指示原点样式 --- */
.nav-scroll a.active::after {
    content: '';
    position: absolute;
    /* 核心修改：统一距离图标底部的距离 */
    bottom: -12px; /* 增加负值可以让点往下移，建议根据视觉效果在 -10px 到 -15px 之间微调 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 保持原点形状 */
    width: 6px; 
    height: 6px;
    background-color: var(--brand-yellow);
    border-radius: 50%;
    
    /* 动画保持不变 */
    animation: dotFade 0.3s ease forwards;
}

/* 确保 a 标签有足够的点击区域，并防止点被切掉 */
.nav-scroll a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px; /* 给下方点留出固定呼吸空间 */
    transition: transform 0.2s ease;
}

@keyframes dotFade {
    from { opacity: 0; transform: translate(-50%, 5px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


/* 给中间内容一个最小高度，把 Footer 顶下去 */
.content-wrapper {
    min-height: 60vh; /* 占据屏幕 60% 的高度 */
    padding: 50px 10%;
    background-color: #fcfcfc; /* 主体背景色 */
}






/* --- 1. 强制页面布局 --- */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* 保证页面至少占满屏幕 */
    display: flex;
    flex-direction: column;
   
}

/* --- 2. 给中间留出空位（关键！） --- */
/* 如果你 HTML 里没有 main 标签，请加一个，或者用这个选择器占位 */
header + * {
    flex: 1; /* 自动撑开中间，把 footer 压到最下面 */
}

/* --- 3. Footer 样式：精简高度 --- */
.footer-main {
    background-color:  var(--off-white)!important;
    /* 核心修改：大大减小上下内边距 (40px 是现在的，15px 是底部的) */
    padding: 30px 5% 15px !important; 
    border-top-left-radius: 60px !important;
    border-top-right-radius: 60px !important;
    width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center; /* 改为居中对齐，让内容看起来更整齐 */
}

/* 缩放 Logo 图标，防止撑高 */
.footer-photo-box img {
    width: 100px !important; 
    height: auto;
}


.footer-nav {
            display: flex;
            gap: 60px;
            flex-grow: 1;
            padding-left: 40px;
            font:var(--font-title-fredoka);
        }

        .nav-col {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

/* 修改后的 Footer 导航样式 */
.nav-col a {
    font-family: var(--font-body); /* 加上这一行，调用 Cera Pro */
    text-decoration: none;
    color: #6a1500;
    font-weight: 700;
    font-size: 1rem;
    transition: color 0.3s ease;
}

/* 增加一个悬停效果，让它更专业 */
.nav-col a:hover {
    color: var(--brand-yellow);
}

/* 右侧联系方式 */
.footer-contact {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-contact h2 {
    /* 显式调用变量，并加上 !important 确保加载 */
    font-family: var(--font-title-fredoka) !important; 
    font-size: 1.8rem !important; 
    margin-bottom: 5px !important;
    /* 确保字体权重也是对的 */
    font-weight: 600; 
}

/* Contact Us 小标题 (如果有 h3) */
.footer-contact h3 {
    font-family: var(--font-title-fredoka) !important;
    font-size: 1.2rem !important;
    color: #6a1500;
}

/* Body Text - 强制使用 Cera Pro */
.footer-contact p {
    font-family: var(--font-body) !important; /* 这里会调用 Cera Pro */
    font-size: 0.85rem !important;
    max-width: 280px;
    line-height: 1.5;
    color: #6a1500;
}

/* 社交图标锁定 */
.social-row-icons {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.social-row-icons img {
    width: 28px !important;
    height: 28px !important;
}

/* 4. 版权行：极致紧凑 */
.copyright {
    text-align: center !important;
    margin-top: 20px !important; /* 缩减与上方的距离 */
    padding-top: 10px !important;
    border-top: 1px solid rgba(106, 21, 0, 0.1) !important;
    font-size: 0.75rem !important;
    color: #6a1500 !important;
}

.footer-contact h2, 
.footer-contact h3, 
.footer-contact p,
.footer-brand-contact h2,
.footer-brand-contact h3,
.footer-brand-contact p {
    color: #6a1500; 
}

/* --- 响应式手机端修改 --- */
@media (max-width: 768px) {
    
    /* 1. Header 居中 */
    .header-row-1 {
        flex-direction: column; /* 纵向排列 */
        gap: 15px;
        position: relative;
    }

    .logo {
        margin: 0 auto; /* Logo 居中 */
    }

    .search-container {
        justify-content: center; /* 搜索图标居中 */
        width: 100%;
    }

    /* 搜索栏弹出后在中间 */
    .search-bar {
        position: absolute;
        top: 60px; /* 根据你的 header 高度调整 */
        right: 50%;
        transform: translateX(50%); /* 完美的水平居中 */
        width: 80%; /* 手机端宽度占 80% */
        z-index: 10;
    }
    
    .search-bar.show {
        transform: translateX(50%); /* 保持居中显示 */
    }

    /* 2. 导航栏调整 */
    .nav-scroll {
        max-width: 95%; /* 增加手机端导航宽度 */
    }

    /* 3. Footer 居中 */
    .footer-grid {
        flex-direction: column; /* 竖向排列 */
        gap: 30px;
        text-align: center; /* 全体文字居中 */
    }

    .footer-nav {
        padding-left: 0;
        justify-content: center;
        gap: 40px;
    }

    .footer-contact {
        align-items: center; /* 内部 flex 元素居中 */
        text-align: center;
    }

    .footer-contact p {
        margin: 0 auto 15px; /* 段落居中 */
    }

    .social-row-icons {
        justify-content: center; /* 社交图标居中 */
        margin-top: 15px;
    }

    .footer-photo-box {
        margin-bottom: 10px;
    }
}
/* 让 Row 2 成为定位参考 */
@media (max-width: 768px) {
    /* 确保 Row 2 在手机端依然是定位参考 */
    .header-row-2 {
        position: relative;
        padding: 10px 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* 针对手机端重新定义 Search Bar 的位置 */
    .search-bar {
        position: absolute;
        /* 强制水平居中 */
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* 关键：在手机端宽度要够大 */
        width: 92% !important; 
        max-width: none !important; /* 取消电脑端的最大宽度限制 */
        
        padding: 8px 15px !important;
        z-index: 999; /* 确保它盖在图标最上方 */
    }

    /* 确保搜索栏里的输入框和按钮在小屏幕不挤压 */
    .search-bar input {
        font-size: 14px; /* 减小字体防止撑开高度 */
        width: 100%;
    }

    .search-bar button {
        padding: 4px 12px;
        font-size: 12px;
    }

    /* 保持图标行在底下的间距，防止搜索框关掉后布局跳动 */
    .nav-scroll {
        width: 95%; /* 手机端图标可以分布得更满一点 */
        justify-content: space-around; /* 图标均匀分布，防止挤在一起 */
    }
}



/* --- About Us Page 基础容器 --- */
.about-us-page {
    background-color: var(--off-white);
    overflow: hidden; /* 防止背景球溢出 */
}

/* --- 1. 顶部标题与形状对齐 --- */
.about-header {
    text-align: center;
    padding: 60px 0 40px;
}

.main-title {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 3rem;
    margin-bottom: 20px;
}

.shape-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* 视觉平衡核心：容器等大，内容按比例缩放 */
.shape-item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-img.tri { width: 22px; }   /* 三角形宽一点 */
.shape-img.dot { width: 16px; }   /* 圆形视觉实，要小一点 */
.shape-img.star { width: 26px; }  /* 星形尖刺多，要大一点 */

/* --- 2. 关于品牌介绍 (电脑端左右) --- */
.brand-intro {
    padding: 60px 10%;
}

.intro-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.intro-text { flex: 1; }
.intro-text h2 {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 2rem;
    margin-bottom: 15px;
}
.intro-text p {
    font-family: var(--font-body);
    color: var(--brand-brown);
    line-height: 1.6;
    font-weight: 500;
}

.intro-logo-box {
    flex: 1;
    background-color: #fff9f0; /* 浅米色背景块 */
    padding: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
}

.brand-image {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* --- 3. Purpose 部分 & 漂浮照片球 --- */
.purpose-section {
    position: relative;
    padding: 100px 10% 150px;
    /* 波浪背景可以使用一张 SVG 或圆角实现 */
    background: radial-gradient(circle at 50% 100%, #fff 0%, transparent 70%);
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 2; /* 确保卡片在照片球上方 */
}

.info-card {
    flex: 1;
    max-width: 400px;
    min-height: 300px;
    padding: 40px;
    border-radius: 30px;
    color: white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.card-blue { background-color: var(--brand-blue); }
.card-purple { background-color: var(--brand-purple); }

.info-card h3 {
    font-family: var(--font-title-fredoka);
    font-size: 2.2rem;
    margin-bottom: 25px;
}
.info-card p {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
}


/* --- 容器设置 --- */

.purpose-section {
    position: relative;
    /* 原代码：padding: 100px 10% 150px; */
    padding: 80px 10% 80px; /* 将 150px 缩减为 40px 或更小 */
    background: radial-gradient(circle at 50% 100%, #fff 0%, transparent 70%);
}

/* --- 形状基础样式 --- */
.floating-shape {
    position: absolute;
    z-index: 1; /* 在文字底层 */
    pointer-events: none;
    will-change: transform;
}

/* 视觉大小平衡补偿 */
img[src*="rak.png"] { width: 22px; }
img[src*="circle.png"] { width: 16px; }
img[src*="star.png"] { width: 26px; }

/* --- 巡航动画 --- */
@keyframes longCruise {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(150px, -100px) rotate(15deg); }
    50% { transform: translate(300px, 50px) rotate(-10deg); }
    75% { transform: translate(120px, 200px) rotate(20deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- 15个点的全场分布 --- */
/* 通过调整 top 值从 0% 到 90%，让它们分布在整个页面 */

.s1 { top: 5%; left: 5%; animation: longCruise 25s infinite ease-in-out; }
.s2 { top: 12%; right: 10%; animation: longCruise 35s infinite ease-in-out -5s reverse; }
.s3 { top: 25%; left: 15%; animation: longCruise 30s infinite linear -10s; }
.s4 { top: 35%; right: 20%; animation: longCruise 40s infinite ease-in-out -15s; }
.s5 { top: 45%; left: 45%; animation: longCruise 45s infinite ease-in-out -20s reverse; }

.s6 { top: 55%; left: 10%; animation: longCruise 38s infinite ease-in-out -2s; }
.s7 { top: 65%; right: 5%; animation: longCruise 42s infinite linear -7s reverse; }
.s8 { top: 75%; left: 30%; animation: longCruise 28s infinite ease-in-out -12s; }
.s9 { top: 18%; left: 60%; animation: longCruise 33s infinite ease-in-out -18s; }
.s10 { top: 85%; right: 40%; animation: longCruise 47s infinite ease-in-out -25s reverse; }

.s11 { top: 50%; right: 15%; animation: longCruise 36s infinite linear -4s; }
.s12 { top: 40%; left: 70%; animation: longCruise 50s infinite ease-in-out -9s reverse; }
.s13 { top: 80%; left: 5%; animation: longCruise 22s infinite ease-in-out -14s; }
.s14 { top: 90%; right: 50%; animation: longCruise 31s infinite ease-in-out -21s; }
.s15 { top: 10%; right: 40%; animation: longCruise 39s infinite ease-in-out -28s reverse; }

/* --- 卡片布局 --- */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    position: relative;
    z-index: 2; /* 确保卡片在圆点上方 */
}

.info-card {
    flex: 1;
    max-width: 450px;
    padding: 50px 40px;
    border-radius: 40px;
    color: white;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-blue { background-color: #36B1B8; }
.card-purple { background-color: #7E3079; }




/* --- 5. 响应式微调 (Mobile) --- */
@media (max-width: 768px) {
    .intro-container, .cards-container {
        flex-direction: column;
        align-items: center;
    }
    
    .intro-text { text-align: center; }
    
    .info-card {
        width: 100%;
        max-width: none;
        min-height: auto;
    }

    .main-title { font-size: 2.5rem; }
     .cards-container { flex-direction: column; align-items: center; }
    .brand-intro { padding: 40px 20px; }
}

/* --- Parenting Hero Section --- */
.parenting-hero {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

/* 复用你 About Us 页面的形状样式 */
.parenting-hero .shape-pagination {
    margin-bottom: 30px;
}

.hero-headline {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown);
    font-size: 2.5rem;
    margin-bottom: 25px;
    line-height: 1.2;
}

.hero-description {
    font-family: var(--font-body);
    color: var(--brand-brown);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 45px;
    font-weight: 500;
}

/* 棕色图片容器 */
.hero-image-box {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--brand-brown); /* 默认深棕色背景 */
    border-radius: 40px; /* 配合你整体的圆润风格 */
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(106, 21, 0, 0.15);
}

.hero-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 按钮样式 - 使用你的品牌黄 */
.hero-action {
    display: flex;
    justify-content: center;
}

.btn-explore {
    display: inline-block;
    background-color: var(--brand-yellow);
    color: var(--brand-brown);
    font-family: var(--font-body);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 18px 60px;
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-explore:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 10px 20px rgba(250, 168, 18, 0.3);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }

    .hero-image-box {
        border-radius: 25px;
        margin-bottom: 35px;
    }

    .btn-explore {
        width: 100%; /* 手机端按钮加宽 */
        padding: 15px 0;
    }
}





/* --- 团队右划滑动效果 (Komarpheab 棕色定制版) --- */

.team-section {
    padding: 80px 0; 
    background-color: var(--off-white);
    text-align: center;
}

/* 1. 标题改为棕色 */
.team-title {
    font-family: var(--font-title-fredoka);
    color: var(--brand-brown); /* 核心修改：改为棕色 */
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

/* 滑动外壳保持不变 */
.team-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 30px 25px 50px; 
    display: flex;
    scrollbar-width: none;
}

.team-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.team-horizontal-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 25px; /* 稍微增加卡片间距，更显大气 */
}

/* 2. 卡片基础样式修正 */
.team-card {
    flex: 0 0 280px;
    padding: 40px 20px;
    border-radius: 40px !important; /* 确保全圆角 */
    color: white;
    box-shadow: 0 15px 30px rgba(106, 21, 0, 0.15); /* 阴影也带一点棕色调 */
    transition: all 0.3s ease;
}

/* 悬停微动效 */
.team-card:hover {
    transform: translateY(-10px);
}

/* 3. 颜色类名 (确保调用你的变量) */
.card-blue   { background-color: var(--brand-blue); }
.card-purple { background-color: var(--brand-purple); }
.card-orange { background-color: var(--brand-orange); }
.card-pink   { background-color: var(--brand-pink); }
.card-green  { background-color: var(--brand-green); }
.card-brown  { background-color: var(--brand-brown); }

/* 照片圆圈保持不变 */
.member-photo {
    width: 130px;
    height: 130px;
    background-color: white;
    border-radius: 50% !important;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,0.2); /* 增加半透明边框，更有质感 */
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. 文字颜色调整：确保在深色卡片上清晰 */
.member-name {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: white; /* 强制白色，防止被全局样式干扰 */
}

.member-role {
    font-family: var(--font-body);
    font-size: 0.95rem;
    opacity: 0.9;
    color: white;
}

/* 按钮 */
.team-action {
    margin-top: 20px;
}

.btn-meet-us {
    display: inline-block;
    background-color: var(--brand-yellow);
    color: var(--brand-brown);
    font-family: var(--font-body);
    padding: 15px 40px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}





/* 基础动画增强 */
.bg-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    animation: floatingDecor 12s ease-in-out infinite;
    /* 默认透明度，防止太乱 */
    opacity: 0.6; 
}

/* --- 第一组：顶部 --- */
.p-1 { top: 5%;  left: 15%; width: 20px; }
.p-2 { top: 8%;  right: 10%; width: 15px; animation-delay: -1s; }
.p-3 { top: 12%; left: 45%; width: 28px; opacity: 0.4; }
.p-4 { top: 18%; right: 25%; width: 12px; }

/* --- 第二组 --- */
.p-5 { top: 25%; left: 5%;  width: 22px; animation-delay: -3s; }
.p-6 { top: 28%; right: 15%; width: 25px; transform: rotate(30deg); }
.p-7 { top: 32%; left: 60%; width: 18px; filter: blur(1px); } /* 轻微模糊增加深度感 */
.p-8 { top: 38%; left: 20%; width: 15px; }

/* --- 第三组：中间 --- */
.p-9  { top: 45%; right: 5%;  width: 20px; animation-delay: -5s; }
.p-10 { top: 48%; left: 40%; width: 14px; }
.p-11 { top: 52%; right: 30%; width: 30px; opacity: 0.3; }
.p-12 { top: 58%; left: 10%;  width: 24px; }

/* --- 第四组 --- */
.p-13 { top: 65%; left: 55%; width: 16px; animation-delay: -2s; }
.p-14 { top: 68%; right: 12%; width: 22px; }
.p-15 { top: 72%; left: 25%; width: 18px; transform: rotate(-15deg); }
.p-16 { top: 78%; right: 45%; width: 26px; opacity: 0.5; }

/* --- 第五组：底部 --- */
.p-17 { top: 85%; left: 8%;  width: 20px; animation-delay: -4s; }
.p-18 { top: 88%; right: 20%; width: 15px; }
.p-19 { top: 92%; left: 42%; width: 28px; filter: blur(1px); }
.p-20 { top: 96%; right: 5%;  width: 14px; }

/* 响应式：手机端减少数量或缩小 */
@media (max-width: 768px) {
    .bg-deco {
        width: 12px !important;
        opacity: 0.4;
    }
    /* 隐藏部分点缀防止手机端太乱 */
    .p-3, .p-7, .p-11, .p-16, .p-19 { display: none; }
}

/* 漂浮动画 */
@keyframes floatingDecor {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -20px) rotate(15deg); }
}

/* --- 基础点缀样式 --- */
.bg-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    transition: all 0.3s ease; /* 增加平滑过渡 */
}

/* --- 手机端适配 (关键部分) --- */
@media (max-width: 768px) {
    /* 1. 统一缩小所有点缀，防止遮挡文字 */
    .bg-deco {
        width: 15px !important; 
        opacity: 0.4; /* 手机端调淡一点，更像背景 */
    }

    /* 2. 重新分布位置：防止它们跑出屏幕左右边缘 */
    /* 我们把 left/right 的范围控制在 5% 到 85% 之间 */
    
    .p-1 { top: 5%;  left: 5%; }
    .p-2 { top: 10%; right: 5%; }
    .p-3 { top: 15%; left: 40%; }
    .p-4 { top: 20%; right: 10%; }

    .p-5 { top: 25%; left: 10%; }
    .p-6 { top: 30%; right: 8%; }
    .p-7 { top: 35%; left: 50%; }
    .p-8 { top: 40%; left: 15%; }

    .p-9  { top: 45%; right: 5%; }
    .p-10 { top: 50%; left: 30%; }
    .p-11 { top: 55%; right: 20%; }
    .p-12 { top: 60%; left: 10%; }

    .p-13 { top: 65%; left: 60%; }
    .p-14 { top: 70%; right: 15%; }
    .p-15 { top: 75%; left: 5%; }
    .p-16 { top: 80%; right: 30%; }

    .p-17 { top: 85%; left: 15%; }
    .p-18 { top: 90%; right: 10%; }
    .p-19 { top: 93%; left: 45%; }
    .p-20 { top: 97%; right: 5%; }

    /* 3. 手机端如果依然觉得太乱，可以隐藏一部分 */
    .p-4, .p-8, .p-12, .p-16 {
        display: none;
    }
}



/* ==========================================================================
   WISDOM SECTION (导师卡片) - 布局与 Hover 完美修正版
   ========================================================================= */

/* --- 1. 容器与背景设置 --- */
.ws-section {
    background-color: var(--off-white);
    padding: 100px 5%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* 关键：确保容器内元素默认水平居中 */
    overflow-x: hidden; 
    overflow-y: visible; /* 允许 Hover 时的 translateY 浮出 */
}

/* 基础点缀样式 */
.bg-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    transition: all 0.3s ease;
    will-change: transform;
    animation: floatingDecor 12s ease-in-out infinite;
}

@keyframes floatingDecor {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -20px) rotate(15deg); }
}

/* --- 2. 卡片容器布局 --- */
.ws-container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 80px; 
    margin-top: 60px;
    z-index: 2;
}

/* --- 3. 修正后的卡片基础样式 --- */
.ws-card {
    display: flex;
    /* 核心：确保图片和文字永远是垂直对齐，即使 Hover 也不改变布局 */
    align-items: center; 
    padding: 40px 50px;
    border-radius: 40px !important;
    color: white;
    width: 85%;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(106, 21, 0, 0.1);
    cursor: pointer;
    
    /* 初始隐藏状态 */
    opacity: 0;
    pointer-events: none; 
    
    /* 性能优化：明确告知过渡的属性 */
    transition: 
        opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.5s ease;
}

/* 移除 align-self，改用这种方式处理左右对齐，防止 Hover 时布局塌陷 */
.ws-right { margin-left: auto; }
.ws-left { margin-right: auto; }

/* 滑入状态激活 */
.ws-card.show {
    opacity: 1;
    /* 核心：必须在显示状态下显式定义 translateX(0) */
    transform: translateX(0) !important;
    pointer-events: auto;
}

/* --- 4. 极致平滑的 Hover 效果（修复重合问题） --- */
.ws-section .ws-card.show:hover {
    /* 重要：必须包含 translateX(0) 以保持在原位，再叠加浮起和放大 */
    transform: translateX(0) scale(1.03) translateY(-12px) !important;
    
    z-index: 50;
    /* 增强投影，增加立体感 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    /* 确保背景不改变 */
}

/* 头像：在 Hover 时保持布局稳定 */
.ws-avatar {
    width: 160px;
    height: 160px;
    background-color: white;
    border-radius: 50% !important;
    flex-shrink: 0;
    overflow: hidden;
    border: 6px solid rgba(255,255,255,0.2);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* 确保 Hover 时头像不因 Margin 改变而“飘” */
    margin: 0 !important; 
}

/* 头像图片自身缩放 */
.ws-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    backface-visibility: hidden;
}

.ws-card.show:hover .ws-avatar {
    transform: scale(1.05); /* 头像容器放大 */
}

.ws-card.show:hover .ws-avatar img {
    transform: scale(1.1); /* 图片内部深度缩放 */
}

/* --- 5. 文字与头像的布局间距修正 (核心部分) --- */
.ws-text-content {
    flex: 1;
    /* 核心：使用 Transition 让间距改变也变平滑 */
    transition: margin 0.5s ease, color 0.5s ease;
    will-change: margin, color;
}

/* 初始间距：图片在右，文字 Margin-right；图片在左，文字 Margin-left */
.ws-right .ws-text-content { margin-right: 40px; }
.ws-left .ws-text-content { margin-left: 40px; }

/* 核心修复：确保 Hover 时也保持这个间距，防止重合 */
.ws-right:hover .ws-text-content { margin-right: 40px !important; }
.ws-left:hover .ws-text-content { margin-left: 40px !important; }


/* --- 6. 文字颜色与延迟设置 --- */
.ws-name, .ws-role, .ws-quote {
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

/* 统一变为奶黄色 */
.ws-card.show:hover .ws-name,
.ws-card.show:hover .ws-role,
.ws-card.show:hover .ws-quote {
    color: #fef7eb !important; 
}

/* 颜色渐入的阶梯式延迟 */
.ws-card.show:hover .ws-name { transition-delay: 0.05s; }
.ws-card.show:hover .ws-role { 
    transition-delay: 0.1s; 
    opacity: 1;
    letter-spacing: 1px; 
}
.ws-card.show:hover .ws-quote { transition-delay: 0.15s; }

/* 基础文字样式 */
.ws-name { font-family: var(--font-body); font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; }
.ws-role { font-family: var(--font-body); font-size: 1rem; opacity: 0.9; margin-bottom: 15px; }
.ws-quote { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; font-weight: 500; }

/* 颜色分类 */
.ws-orange { background-color: var(--brand-orange); }
.ws-purple { background-color: var(--brand-purple); }
.ws-blue   { background-color: var(--brand-blue); }
.ws-green  { background-color: var(--brand-green); }

/* --- 7. 手机端适配 --- */
@media (max-width: 768px) {
    .ws-card {
        width: 100%;
        flex-direction: column-reverse; /* 手机端统一文字在下 */
        text-align: center;
        padding: 35px 25px;
        transform: translateY(30px) !important;
    }
    
    .ws-card.show {
        transform: translateY(0) !important;
    }

    /* 手机端左右 Margin 重置 */
    .ws-right, .ws-left { margin: 15px 0 !important; }

    /* 手机端头像与文字间距重置 */
    .ws-right .ws-text-content, .ws-left .ws-text-content { 
        margin: 0 !important; 
    }

    .ws-avatar {
        margin: 0 auto 25px auto !important;
        width: 120px;
        height: 120px;
    }
}