@charset "UTF-8";

        /* 關鍵樣式：讓 footer 繼承 hero 的漸層風格，並保留原有結構 */
        .s-footer {
            background: linear-gradient(120deg, var(--s-leaf) 0%, #d7e9c6 45%, var(--s-cream) 100%);
            /* 與 hero 相同的漸層 */
            color: var(--s-ink);
            /* 將文字改為深色，以配合淺色背景 */
            margin-top: 40px;
            position: relative;
            overflow: hidden;
        }

        /* 裝飾性光暈，複製 hero 的 ::after 效果 */
        .s-footer::after {
            content: "";
            position: absolute;
            right: -60px;
            bottom: -80px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(234, 147, 137, 0.35), transparent 70%);
            pointer-events: none;
            /* 避免干擾點擊 */
        }

        /* 覆蓋原本深色背景下的連結與標題顏色 */
        .s-footer h5 {
            color: var(--s-coral-deep);
            /* 維持品牌色 */
        }

        .s-footer-brand {
            color: var(--s-coral-deep);
        }

        .s-footer p,
        .s-footer a {
            color: var(--s-ink-soft);
        }

        .s-footer a:hover {
            color: var(--s-coral-deep);
        }

        .s-footer-bottom {
            border-top: 1px solid rgba(60, 74, 51, 0.15);
            color: var(--s-ink-soft);
        }

        /* 保持原本 footer 內部的區塊樣式，但調整為透明背景以融入漸層 */
        .s-footer-inner>div {
            background: rgba(255, 255, 255, 0.5) !important;
            /* 半透明白色，柔化背景 */
            backdrop-filter: blur(2px);
            /* 輕微模糊增加質感 */
            border-radius: 16px;
            padding: 20px 24px;
            transition: all 0.3s ease;
        }

        .s-footer-inner>div:hover {
            background: rgba(255, 255, 255, 0.8) !important;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(60, 74, 51, 0.08);
        }

        /* 移除舊有的深色背景與分隔線樣式，改為更清新的分隔 */
        .s-footer-inner>div:nth-child(2) {
            background: rgba(255, 255, 255, 0.5) !important;
        }

        .s-footer-inner>div:not(:last-child)::after {
            background: linear-gradient(to bottom, transparent, rgba(60, 74, 51, 0.12) 20%, rgba(60, 74, 51, 0.12) 80%, transparent);
        }

        /* 手機版調整 */
        @media (max-width: 560px) {
            .s-footer-inner>div {
                background: rgba(255, 255, 255, 0.6) !important;
                border-bottom: 1px solid rgba(60, 74, 51, 0.08);
            }
            .s-footer-inner>div:hover {
                background: rgba(255, 255, 255, 0.85) !important;
            }
        }

        /* 確保 footer 內的文字在淺色背景上可讀 */
        .s-footer-brand-sub {
            color: var(--s-ink-soft);
        }
        .s-footer p, .s-footer a {
            color: var(--s-ink);
        }
        .s-footer a:hover {
            color: var(--s-coral-deep);
        }