/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #FCF3F3; /* 背景底色 */
    font-family: 'Rosart TRIAL', serif; /* 假设字体已加载 */
    height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* 1. Logo 样式 (顶层) */
.logo-header {
    position: absolute;
    top: 14%; /* 距离顶部 20% (1/5 处) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 最顶层 */
    width: 100%;
    text-align: center;
}

.logo {
    /* 根据 Figma 图1 推断尺寸，可根据实际图片调整 */
    height: 160px;
    width: auto;
    display: block;
    margin: 0 auto;
    /* 4. 添加 PNG 内容阴影 (关键修改) */
    /* blur-radius: 10px, shadow-color: rgba(0,0,0,0.3) */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
}

/* 2. 主内容区域 (中间层) */
.content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


/* 修复蛋糕5的上下重叠布局 */
.bg-cakes {
    /* 设置为相对定位，作为子元素绝对定位的基准 */
    position: absolute; /* 改为绝对定位，相对于 .content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 占满整个屏幕高度 */
    overflow: hidden; /* 防止溢出 */
    z-index: 1; /* 设置层级，确保在白色长方形（z-index: 2）的下方 */
}

.bg-cake {
    /* 统一设置图片大小 */
    height: 70.7vh; /* 保持 792:1117 的比例 (792/1117 ≈ 0.707) */
    width: auto; /* 宽度随高度自适应 */
    position: absolute; /* 使用绝对定位实现精确堆叠 */
    left: 50%; /* 水平居中：先移到父容器50%位置 */
    transform: translateX(-50%); /* 水平居中：再向左移动自身宽度的50% */
    object-fit: contain;
}

/* 上方蛋糕：底部贴合白色长方形的底部 */
.bg-cake.right { /* 假设你用 .right 代表上方的图 */
    /* 我们需要知道白色长方形的高度才能精确计算 */
    /* 假设白色长方形的高度是 47vh (根据你之前的代码) */
    /* 白色长方形的顶部位置是 (100vh - 47vh) / 2 = 26.5vh */
    /* 所以上方蛋糕的底部应该贴合在 26.5vh 处 */
    bottom: calc(50% + 23.5vh); /* 50% 是垂直中心，23.5vh 是白色长方形高度的一半 (47vh/2) */
    transform: translate(-50%, 100%); /* X轴居中，Y轴向下移自身高度100% (底部对齐) */
}

/* 下方蛋糕：顶部贴合白色长方形的顶部 */
.bg-cake.left { /* 假设你用 .left 代表下方的图 */
    /* 同理，下方蛋糕的顶部应该贴合在 26.5vh + 47vh = 73.5vh 处 */
    top: calc(50% + 23.5vh); /* 50% 是垂直中心，23.5vh 是白色长方形高度的一半 (47vh/2) */
    transform: translate(-50%, -100%); /* X轴居中，Y轴向上移自身高度100% (顶部对齐) */
}

/* 4. 白色矩形 (层级高于蛋糕图，低于按钮和文字) */
/* 修复白色长方形：无限横向延伸，高度固定 */
.white-rectangle {
    /* 1. 宽度设置为 100vw (视口宽度)，实现无限延伸 */
    width: 100vw;

    /* 2. 高度设置：根据比例 526:1117 计算 */
    height: 47vh; /* 推荐使用 vh 保持比例自适应 */

    /* 3. 背景颜色：白色 */
    background-color: white;

    /* 4. 定位：使其横向撑满且居中 */
    position: absolute;
    top: 50%; /* 垂直居中 */
    left: 50%;
    transform: translate(-50%, -50%);

    /* 5. 层级：确保在蛋糕背景之上，文字之下 */
    z-index: 2; /* 关键：层级高于 .bg-cakes (z-index: 1) */

    /* 可选：如果需要边框或阴影，可以在这里添加 */
    /* border: 1px solid #f0f0f0; */
}

/* 5. 文字内容 (居中，使用指定字体样式) */
.text-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #6B4945;
    font-size: 48px;
    line-height: 1.6;
    font-weight: 500; /* 中粗 */
    width: 70%; /* 控制段落宽度，与蛋糕5的宽度逻辑一致 */
    z-index: 20; /* 高于白色矩形和按钮4 */
}

.text-content p, .text-content h3 {
    margin: 10px 0;
}

.text-content h3 {
    font-size: 48px;
    margin-top: 30px;
}

/* 6. 按钮行 (按钮4) */
.button-row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-around;
    width: 80%; /* 按钮占满大部分宽度 */
    z-index: 15; /* 高于白色矩形，低于文字 */
}

.button-row img {
    /* 修改开始：按钮4自适应大小 */
    /* 假设原始高度为 190px，页面总高 1117px，比例约为 17% */
    height: 17vh;
    width: auto;
    /* 修改结束 */
}

/* 修复 Group 5 的布局和旋转 */
.group5 {
    position: absolute;
    bottom: 20%; /* 根据设计微调位置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; 
    cursor: pointer;
}

.group5 img {
    /* 修改开始：Group 5 自适应大小 */
    /* 假设原始高度为 100px，页面总高 1117px，比例约为 9% */
    height: 9vh;
    width: auto;
    display: block;
    /* 修改结束 */
}
.home-text {
    margin-top: 15px; /* 增加这个间距，解决重叠问题 */
    font-family: 'Abril Display', cursive;
    font-size: 45px;
    color: #030303;
    transform: rotate(-25deg); /* 逆时针旋转 25 度 */
    white-space: nowrap;
}