/* ============================================================
   晚楓谷 v113ms.com — 共用樣式（v2 研究驅動重生版）
   核心：唯一最亮的下載 CTA（Von Restorff）、精簡導覽（Hick）、
        Fitts 大按鈕＋sticky、首屏塞滿轉換元素、F 型友善排版。
   ============================================================ */

:root{
  --night:#1b0f07;      /* 暮色暖底 */
  --plum:#2a1509;
  --dusk:#3a1c0c;
  --amber:#f5b743;      /* 金（輔色：標題、數字、金線） */
  --ember:#e8763a;      /* 一般橙（降一階，讓位給 CTA） */
  --maple:#e0431a;
  --sapphire:#3f7bd6;
  /* ↓ 全站唯一最亮：只給「下載」主鈕用，製造隔離效應 */
  --cta:#ff7e1a;
  --cta-hi:#ffa23d;
  --cream:#f8efe4;
  --cream-dim:#d8c4ad;
  --muted:#9a8166;
  --card:rgba(255,255,255,.045);
  --line:rgba(245,183,67,.18);
  --maxw:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--cream);background:var(--night);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ── 暮色背景 ── */
.sky{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 80% at 80% 0%, rgba(255,138,61,.22), transparent 55%),
  radial-gradient(120% 90% at 15% 10%, rgba(224,67,26,.18), transparent 50%),
  linear-gradient(180deg, var(--night) 0%, var(--plum) 45%, var(--dusk) 100%)}
.ridge{position:fixed;left:0;right:0;bottom:0;z-index:-1;height:32vh;
  background:linear-gradient(180deg, transparent, rgba(12,7,3,.85) 60%, #0c0703);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 V120 Q60 70 110 110 T200 90 Q260 50 320 95 T430 80 Q500 40 560 92 T690 78 Q760 48 820 100 T940 84 Q1010 52 1080 104 T1200 92 V200 Z' fill='black'/%3E%3C/svg%3E") bottom/cover no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 V120 Q60 70 110 110 T200 90 Q260 50 320 95 T430 80 Q500 40 560 92 T690 78 Q760 48 820 100 T940 84 Q1010 52 1080 104 T1200 92 V200 Z' fill='black'/%3E%3C/svg%3E") bottom/cover no-repeat}

/* ── 飄落楓葉 ── */
.leaves{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.leaf{position:absolute;top:-40px;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}
  8%{opacity:.9}100%{transform:translateY(110vh) translateX(var(--drift)) rotate(var(--spin));opacity:.2}}

/* ============================================================
   導覽列（Hick：精簡到 4 主項；唯一亮鈕＝下載）
   ============================================================ */
header.site{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(27,15,7,.72);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:6px;height:62px}
.logo{display:flex;align-items:center;gap:8px;font-family:"Noto Serif TC",serif;
  font-weight:900;font-size:1.25rem;color:var(--cream);letter-spacing:.04em}
.logo .mk{color:var(--amber)}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links>a,.dropdown>a{color:var(--cream-dim);font-weight:500;font-size:.95rem;
  padding:8px 13px;border-radius:8px;transition:.2s}
.nav-links>a:hover,.dropdown>a:hover{color:var(--cream);background:rgba(245,183,67,.08)}
.nav-links>a.active{color:var(--amber)}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;background:var(--plum);
  border:1px solid var(--line);border-radius:12px;padding:8px;min-width:180px;display:none;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:9px 14px;color:var(--cream-dim);font-size:.9rem;border-radius:8px}
.dropdown-menu a:hover{color:var(--amber);background:rgba(245,183,67,.1)}
/* Discord 降級成小圖示鈕（次要） */
.nav-discord{display:inline-flex;align-items:center;gap:6px;color:var(--cream-dim);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.9rem;transition:.2s}
.nav-discord:hover{color:#fff;border-color:#5865F2;background:rgba(88,101,242,.15)}
/* 下載＝導覽列唯一填色亮鈕 */
.nav-dl{padding:8px 20px;border-radius:999px;color:#241200!important;font-weight:800;font-size:.95rem;
  background:linear-gradient(135deg,var(--cta-hi),var(--cta));
  box-shadow:0 6px 20px rgba(255,126,26,.45)}
.nav-dl:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(255,126,26,.6)}
.menu-toggle{display:none;background:none;border:0;color:var(--cream);font-size:26px;cursor:pointer;margin-left:auto}

@media(max-width:900px){
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--plum);border-bottom:1px solid var(--line);padding:12px;gap:2px;display:none;margin:0}
  .nav-links.open{display:flex}
  .dropdown-menu{position:static;display:block;border:0;box-shadow:none;background:transparent;padding:0 0 0 16px}
  .menu-toggle{display:block}
  .nav-discord,.nav-dl{text-align:center;justify-content:center;margin-top:6px}
}

/* ============================================================
   按鈕系統（Von Restorff：只有 .btn-dl 是填色亮鈕，其餘外框）
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-weight:800;transition:transform .18s,box-shadow .18s;cursor:pointer;text-align:center}
/* 主：下載（全站最亮、最大、唯一填色＋光暈＋呼吸） */
.btn-dl{padding:18px 40px;font-size:1.15rem;color:#241200;
  background:linear-gradient(135deg,var(--cta-hi),var(--cta));
  box-shadow:0 12px 36px rgba(255,126,26,.5), 0 0 0 0 rgba(255,126,26,.5);
  animation:cta-pulse 2.6s ease-out infinite}
.btn-dl:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 46px rgba(255,126,26,.7)}
.btn-dl .sub{font-weight:600;font-size:.78rem;opacity:.8;margin-top:2px}
.btn-dl-col{flex-direction:column;gap:0;line-height:1.15}
@keyframes cta-pulse{0%{box-shadow:0 12px 36px rgba(255,126,26,.5),0 0 0 0 rgba(255,126,26,.45)}
  70%{box-shadow:0 12px 36px rgba(255,126,26,.5),0 0 0 16px rgba(255,126,26,0)}
  100%{box-shadow:0 12px 36px rgba(255,126,26,.5),0 0 0 0 rgba(255,126,26,0)}}
/* 次：Discord、其他＝外框，不跟主鈕搶 */
.btn-ghost{padding:16px 30px;font-size:1rem;border:1.5px solid var(--line);color:var(--cream);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--amber);transform:translateY(-1px)}
.btn-discord{padding:16px 30px;font-size:1rem;border:1.5px solid rgba(88,101,242,.6);color:#c8cdff;background:rgba(88,101,242,.1)}
.btn-discord:hover{background:rgba(88,101,242,.25);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn-dl{animation:none}}

/* ── sticky 浮動下載鈕（Fitts：永遠在手邊；手機在底部拇指區） ── */
.sticky-dl{position:fixed;right:22px;bottom:22px;z-index:55;opacity:0;transform:translateY(20px);
  pointer-events:none;transition:opacity .3s,transform .3s}
.sticky-dl.show{opacity:1;transform:none;pointer-events:auto}
.sticky-dl .btn-dl{padding:15px 28px;font-size:1.02rem}
@media(max-width:680px){
  .sticky-dl{left:14px;right:14px;bottom:14px}
  .sticky-dl .btn-dl{width:100%;padding:16px;font-size:1.05rem}
}

/* ============================================================
   首屏 Hero（壓縮高度，確保轉換元素全在首屏）
   ============================================================ */
.hero{position:relative;z-index:2;text-align:center;padding:3.5vh 0 5vh}
.hero-banner{max-width:520px;margin:0 auto 18px}
.hero-banner img{width:100%;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 44px rgba(255,138,61,.16);border:1px solid rgba(245,183,67,.26)}
.hero .valueline{font-size:.96rem;color:var(--amber);font-weight:600;letter-spacing:.04em;margin-bottom:8px}
.hero h1{font-family:"Noto Serif TC",serif;font-weight:900;
  font-size:clamp(1.7rem,4.4vw,2.9rem);line-height:1.22;letter-spacing:.02em}
.hero h1 .glow{background:linear-gradient(120deg,var(--amber),var(--cta-hi),var(--cta));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:560px;margin:12px auto 0;font-size:1.02rem;color:var(--cream-dim);font-weight:300}
.hero-actions{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
/* 社會認同微行（貼近 CTA） */
.proofline{margin-top:16px;font-size:.9rem;color:var(--cream-dim)}
.proofline b{color:var(--amber)}
.proofline .dot{width:8px;height:8px;border-radius:50%;background:#5fd16a;display:inline-block;margin-right:6px;
  box-shadow:0 0 8px #5fd16a;animation:pulse 1.8s infinite;vertical-align:middle}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* 開服倒數 */
.countdown{display:inline-flex;gap:12px;margin-top:22px;padding:16px 26px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);backdrop-filter:blur(8px);flex-wrap:wrap;justify-content:center}
.countdown .cd-label{width:100%;font-size:.82rem;color:var(--cream-dim);letter-spacing:.05em;margin-bottom:2px}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:58px}
.cd-unit .n{font-family:"Noto Serif TC",serif;font-weight:900;font-size:1.9rem;color:var(--amber);line-height:1}
.cd-unit .u{font-size:.72rem;color:var(--cream-dim);margin-top:5px}
.cd-live{color:#5fd16a;font-weight:700}

/* ============================================================
   通用區塊
   ============================================================ */
section.block{position:relative;z-index:2;padding:54px 0}
.sec-eyebrow{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--amber);
  font-size:1.15rem;text-align:center;letter-spacing:.05em}
.sec-title{font-family:"Noto Serif TC",serif;font-weight:900;font-size:clamp(1.6rem,3.6vw,2.3rem);
  text-align:center;margin:6px 0 10px}
.sec-sub{text-align:center;color:var(--cream-dim);font-weight:300;margin-bottom:38px;max-width:600px;margin-left:auto;margin-right:auto}

/* 影片（第 2 屏，注意力仍高） */
.video-wrap{max-width:840px;margin:0 auto;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 16px 50px rgba(0,0,0,.45)}
.video-frame{position:relative;width:100%;padding-bottom:56.25%;height:0;background:#000}
.video-frame video,.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-cta{text-align:center;margin-top:22px}

/* 特色卡（真截圖＋Gestalt 分組） */
.group-label{font-family:"Noto Serif TC",serif;color:var(--amber);font-size:1.05rem;
  text-align:center;margin:30px 0 14px;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.fcard{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transition:transform .25s,border-color .25s}
.fcard:hover{transform:translateY(-5px);border-color:rgba(245,183,67,.5)}
.fcard .thumb{position:relative;width:100%;padding-bottom:56%;height:0;overflow:hidden;background:#241308}
.fcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcard .thumb.slot{display:grid;place-items:center}
.fcard .thumb.slot::after{content:attr(data-ph);position:absolute;font-size:.78rem;color:var(--ember);
  border:1px dashed rgba(232,118,58,.5);border-radius:6px;padding:3px 9px;bottom:10px;right:10px}
.fcard .thumb .ic{font-size:2.4rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.fcard .body{padding:18px 20px}
.fcard h3{font-family:"Noto Serif TC",serif;font-weight:600;font-size:1.2rem;margin-bottom:6px}
.fcard p{color:var(--cream-dim);font-size:.92rem;font-weight:300}

/* 社會認同帶 */
.proofband{position:relative;z-index:2;padding:40px 24px;margin:6px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proofband .row{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;text-align:center}
.proofband b{display:block;font-family:"Noto Serif TC",serif;font-size:1.9rem;color:var(--amber);font-weight:900}
.proofband span{color:var(--cream-dim);font-size:.86rem}

/* 橫幅金句 */
.banner-quote{position:relative;z-index:2;text-align:center;padding:52px 24px}
.banner-quote p{font-family:"Noto Serif TC",serif;font-weight:900;font-size:clamp(1.4rem,3.6vw,2.2rem);
  background:linear-gradient(120deg,var(--cta-hi),var(--ember),var(--maple));
  -webkit-background-clip:text;background-clip:text;color:transparent;max-width:900px;margin:0 auto}

/* Roadmap */
.roadmap{max-width:760px;margin:0 auto;position:relative;padding-left:30px}
.roadmap::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--amber),transparent)}
.road-item{position:relative;padding:0 0 24px 24px}
.road-item::before{content:"";position:absolute;left:-30px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--night);border:3px solid var(--amber)}
.road-item.soon::before{border-color:var(--sapphire)}
.road-item h3{font-family:"Noto Serif TC",serif;font-size:1.08rem;margin-bottom:4px}
.road-item h3 .pill{font-size:.66rem;color:var(--sapphire);border:1px solid rgba(63,123,214,.5);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.road-item h3 .pill.live{color:#5fd16a;border-color:rgba(95,209,106,.5)}
.road-item p{color:var(--cream-dim);font-size:.9rem;font-weight:300}

/* 結尾 CTA（近因效應：最後一擊） */
.endcta{position:relative;z-index:2;text-align:center;padding:72px 0}
.endcta h2{font-family:"Noto Serif TC",serif;font-weight:900;font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1.25;margin-bottom:26px}

/* ── 內頁標題 ── */
.page-head{position:relative;z-index:2;text-align:center;padding:7vh 0 3vh}
.page-head .breadcrumb{color:var(--muted);font-size:.82rem;margin-bottom:12px}
.page-head .breadcrumb a:hover{color:var(--amber)}
.page-head h1{font-family:"Noto Serif TC",serif;font-weight:900;font-size:clamp(1.9rem,5vw,3rem);color:var(--amber)}
.page-head p{color:var(--cream-dim);margin-top:10px;max-width:600px;margin:10px auto 0;font-weight:300}

/* ── 文章排版（F 型友善：標題化、條列化） ── */
.prose{max-width:800px;margin:0 auto}
.prose h2{font-family:"Noto Serif TC",serif;color:var(--amber);font-size:1.5rem;margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.prose h3{color:var(--ember);font-size:1.12rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--cream);opacity:.92;margin-bottom:8px;font-weight:300}
.prose ul,.prose ol{padding-left:24px;margin-bottom:14px}
.prose strong{color:var(--amber);font-weight:600}
.prose .note{background:rgba(63,123,214,.08);border:1px solid rgba(63,123,214,.3);border-radius:12px;padding:14px 18px;margin:18px 0;font-size:.92rem}
.cmd{background:rgba(245,183,67,.12);color:var(--amber);border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-family:ui-monospace,Menlo,monospace;font-size:.9em}
.placeholder{display:inline-block;background:rgba(232,118,58,.12);color:var(--ember);border:1px dashed rgba(232,118,58,.5);border-radius:6px;padding:1px 8px;font-size:.85rem}
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.tbl th{background:rgba(245,183,67,.1);color:var(--amber);font-weight:600}
.tbl tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* 步驟 */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 22px}
.step .num{position:absolute;top:-16px;left:22px;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cta-hi),var(--cta));color:#241200;font-weight:900;display:grid;place-items:center}
.step h3{font-family:"Noto Serif TC",serif;margin:8px 0;font-size:1.12rem}
.step p{color:var(--cream-dim);font-size:.92rem;font-weight:300}

/* ── 頁尾（信任訊號） ── */
footer.site{position:relative;z-index:2;border-top:1px solid var(--line);padding:38px 0;text-align:center}
footer.site .logo{justify-content:center;margin-bottom:14px;font-size:1.05rem}
footer.site .fnav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:12px 0}
footer.site .fnav a{color:var(--cream-dim);font-size:.88rem}
footer.site .fnav a:hover{color:var(--amber)}
footer.site .copy{color:var(--muted);font-size:.8rem;margin-top:10px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .leaf{display:none!important}
}