:root { --p:#e67e22; --d:#2c1810; --b:#fef8ed; }
html, body { background: var(--b); margin:0; padding:0; }

/* ============================================================
    [1] 行動優先 (Mobile First) - 767px 以下
    ============================================================ */
.landing-unified { min-height: calc(100vh - 70px); display: flex; align-items: center; padding: 20px; position: relative; z-index: 1; }
.bg-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.circle { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; }
.c1 { width: 300px; height: 300px; background: var(--p); top: -50px; right: -50px; }
.c2 { width: 300px; height: 300px; background: var(--d); bottom: -50px; left: -50px; }

.adaptive-grid { display: flex; flex-direction: column; gap: 30px; width: 100%; text-align: center; }
.visual-area { display: flex; justify-content: center; }
.cards-stack { position: relative; width: 260px; height: 320px; }
.p-card { background: white; border-radius: 18px; padding: 8px; box-shadow: 0 15px 30px rgba(44,24,16,0.08); border: 1px solid #e8dfd2; overflow: hidden; position: absolute; }
.p-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; }
.p-main { width: 100%; top: 0; left: 0; z-index: 10; }
.p-sub-top, .p-sub-bottom { display: none; } /* 手機版隱藏 */
.p-info { padding: 10px 5px 2px; display: flex; justify-content: space-between; align-items: flex-end; }
.p-tag { font-weight: 800; font-size: 0.9rem; color: var(--d); }
.p-date { font-size: 0.7rem; color: #999; }

.title { font-size: 2.2rem; font-weight: 900; color: var(--d); line-height: 1.2; margin-bottom: 25px; }
.gradient-text { background: linear-gradient(135deg, var(--p), #f39c12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.features-row { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; }
.feat-col { background: white; padding: 15px; border-radius: 16px; border: 1px solid #e8dfd2; }
.feat-icon { font-size: 1.5rem; margin-bottom: 5px; }
.feat-col strong { display: block; font-size: 1rem; color: var(--d); }
.feat-col p { font-size: 0.85rem; color: #777; margin: 0; }

.btns { display: flex; flex-direction: column; gap: 12px; }
.btn-action { width: 100%; padding: 16px !important; font-size: 1.1rem !important; border-radius: 12px !important; }
.shadow-glow { box-shadow: 0 10px 25px rgba(230,126,34,0.3) !important; }
.hero-note { font-size: 0.85rem; color: #999; margin-top: 15px; }

/* ============================================================
    [2] 統一看板結構 (768px 以上共用)
    ============================================================ */
@media (min-width: 768px) {
.landing-unified { height: calc(100vh - 70px); display: flex; align-items: center; overflow: hidden; padding: 0 40px; }
.adaptive-grid { flex-direction: row-reverse; align-items: center; text-align: left; max-width: 1400px; margin: 0 auto; display: flex; width: 100%; }
.visual-area { flex: 1; display: flex; justify-content: flex-end; transform: translateX(-80px); } /* 整體向左平移 2 公分 */
.text-area { flex: 1.2; }
.features-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; }
.feat-col { background: white; transition: transform 0.3s; }
.feat-col:hover { transform: translateY(-5px); }
.feat-col p { display: block; }
.btns { flex-direction: row; display: flex; }
.btn-action { width: auto; }
.p-sub-top { display: block; z-index: 5; transform: rotate(8deg); }
.p-sub-bottom { display: block; z-index: 15; transform: rotate(-10deg); }
}

/* ============================================================
    [3] 小螢幕配平板 (768px - 1279px) - 大螢幕的 0.7 倍
    ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
.adaptive-grid { gap: 40px; }
.title { font-size: 3.8rem !important; margin-bottom: 25px; } /* 5.5 * 0.7 */
.features-row { gap: 15px; margin-bottom: 30px; }
.feat-col { padding: 15px; border-radius: 16px; }
.feat-icon { font-size: 1.4rem; }
.feat-col strong { font-size: 0.85rem; }
.feat-col p { font-size: 0.75rem; }
.btn-action { padding: 14px 30px !important; font-size: 0.95rem !important; border-radius: 12px !important; }

/* 照片縮放 0.7 倍 */
.cards-stack { width: 310px; height: 400px; } /* 440 * 0.7 */
.p-main { padding: 10px; }
.p-sub-top { width: 210px; top: -60px; right: -70px; }
.p-sub-bottom { width: 170px; bottom: -50px; left: -60px; }
.p-tag { font-size: 0.85rem; }
.p-info-sm { font-size: 0.7rem; padding: 6px; text-align: center; font-weight: 800; color: var(--p); }
}

/* ============================================================
    [4] 大螢幕 (1280px 以上) - 旗艦看板介面
    ============================================================ */
@media (min-width: 1280px) {
.adaptive-grid { gap: 120px; }
.title { font-size: 5.5rem; margin-bottom: 40px; }
.features-row { gap: 30px; margin-bottom: 50px; }
.feat-col { padding: 25px; border-radius: 24px; }
.feat-col strong { font-size: 1.2rem; }
.feat-col p { font-size: 1rem; }
.btn-action { padding: 20px 48px !important; font-size: 1.3rem !important; border-radius: 20px !important; }

.cards-stack { width: 440px; height: 540px; }
.p-main { padding: 15px; }
.p-sub-top { width: 300px; top: -100px; right: -120px; padding: 10px; }
.p-sub-bottom { width: 240px; bottom: -80px; left: -100px; padding: 10px; }
.p-tag { font-size: 1.2rem; }
.p-info-sm { font-size: 1rem; padding: 10px; text-align: center; font-weight: 800; color: var(--p); }
}

@keyframes pulse { 0%, 100% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.5; } }
.animate-f1 { animation: float1 8s ease-in-out infinite; }
.animate-f2 { animation: float2 10s ease-in-out infinite; }
.animate-f3 { animation: float3 9s ease-in-out infinite; }
@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
@keyframes float2 { 0%, 100% { transform: translate(0,0) rotate(8deg); } 50% { transform: translate(20px, -25px) rotate(11deg); } }
@keyframes float3 { 0%, 100% { transform: translate(0,0) rotate(-10deg); } 50% { transform: translate(-20px, 25px) rotate(-13deg); } }
/* Time Capsule Lens - Landing Page Refined Style
   ?�色?��?：懷?��???(Nostalgic Moments)
*/

:root {
    --primary-orange: #e67e22;  /* ?��?�?*/
    --secondary-yellow: #f39c12; /* 底�?�?*/
    --soft-white: #fdf9f0;      /* ?�米??(對�? app.css --bg) */
    --deep-text: #2c1810;       /* 深�???(對�? app.css --text) */
    --glass-bg: rgba(255, 255, 255, 0.12);
}

/* ?��??��??��? */
html {
    scroll-behavior: smooth;
    background-color: var(--soft-white);
}

body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    color: var(--deep-text);
}

/* Hero Section 視覺增強 */
.hero-container {
    background-attachment: fixed;
    background-image: 
        linear-gradient(to bottom, rgba(44, 24, 16, 0.25) 0%, rgba(44, 24, 16, 0.7) 100%),
        url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=2070&auto=format&fit=crop');
}

/* 標�?漸層?��?：�??��?黃色?��?美�???*/
.text-gradient-memory {
    background: linear-gradient(135deg, var(--primary-orange), var(--secondary-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(230, 126, 34, 0.25));
}

/* 毛玻?��??��? */
.glass-nav {
    background: rgba(253, 249, 240, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(230, 126, 34, 0.12);
}

/* 復古質�??��? */
.feature-card {
    background: white;
    border-radius: 2rem;
    border: 1px solid rgba(243, 156, 18, 0.2);
    box-shadow: 0 10px 30px rgba(44, 24, 16, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-orange);
    box-shadow: 0 20px 40px rgba(230, 126, 34, 0.12);
}

/* 溫�?主�???*/
.btn-memory-main {
    background: var(--primary-orange);
    color: white;
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.35);
    transition: all 0.3s ease;
}

.btn-memory-main:hover {
    transform: scale(1.05);
    background: #d35400; /* 深�???hover */
    box-shadow: 0 15px 35px rgba(230, 126, 34, 0.5);
}