:root { color-scheme: dark; --ink: #f5efe5; --muted: #b9afa4; --red: #9f201e; --red-bright: #d44832; --gold: #d5a45d; --line: rgba(213,164,93,.3); }
* { box-sizing: border-box; }
html { background: #090909; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 80% 15%, rgba(122,22,22,.2), transparent 32rem), #090909; color: var(--ink); font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; }
.page-shell { width: min(1220px, 100%); margin: auto; padding: 0 5vw; }
.site-header { min-height: 92px; border-bottom: 1px solid rgba(255,255,255,.13); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: .9rem; font-weight: 900; letter-spacing: .16em; text-decoration: none; }
.brand b { color: var(--gold); }
.brand-mark { color: var(--gold); font-size: 1.4rem; transform: rotate(45deg); }
.header-note { color: var(--muted); font-size: .75rem; letter-spacing: .12em; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem); }
.hero-copy { max-width: 570px; }
.eyebrow { color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.eyebrow span { display: inline-block; width: 26px; height: 1px; margin: 0 .65rem .25rem 0; background: var(--gold); }
h1 { margin: 1.7rem 0 1.5rem; font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 900; letter-spacing: -.07em; line-height: 1.08; }
h1 em { display: block; color: var(--red-bright); font-style: normal; }
.intro { max-width: 500px; color: var(--muted); line-height: 2; font-size: .98rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 2.2rem 0; color: #d8d0c7; font-size: .78rem; }
.trust-row strong { margin-right: .45rem; color: var(--gold); font-size: .7rem; letter-spacing: .1em; }
.cta { display: flex; width: min(100%, 360px); align-items: center; justify-content: space-between; padding: 1.15rem 1.3rem 1.15rem 1.5rem; border: 1px solid var(--red-bright); background: var(--red); color: #fff8f0; font-weight: 700; letter-spacing: .08em; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.cta:hover { background: #c53b2c; transform: translateY(-2px); }
.cta:focus-visible, .brand:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.cta-arrow { font-size: 1.35rem; }
.cta-caption { margin-top: .8rem; color: #827b73; font-size: .68rem; letter-spacing: .04em; }
.poster-frame { position: relative; justify-self: end; width: min(100%, 430px); padding: 13px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(213,164,93,.22), transparent 25%), #151210; box-shadow: 16px 18px 0 rgba(130,27,23,.45); }
.poster-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.poster-label { position: absolute; z-index: 2; top: -23px; right: -22px; padding: .65rem .75rem; background: var(--gold); color: #17100b; font-size: .58rem; font-weight: 900; line-height: 1.25; letter-spacing: .1em; }
.poster-label span { color: var(--red); }
.poster-shine { position: absolute; inset: 13px; z-index: 2; pointer-events: none; border: 1px solid rgba(255,255,255,.17); }
.secure-note { display: flex; align-items: center; gap: 1.3rem; max-width: 760px; margin: 0 auto clamp(4rem, 9vw, 7rem); padding: 1.4rem 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.secure-icon { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
.secure-note h2 { margin: 0 0 .25rem; font-size: 1rem; }
.secure-note p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid rgba(255,255,255,.13); color: #a99f95; font-size: .68rem; line-height: 1.7; }
.site-footer p { margin: 0; }
.site-footer span { color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.copyright { white-space: nowrap; }
@media (max-width: 760px) { .page-shell { padding: 0 6vw; } .site-header { min-height: 76px; } .header-note { display: none; } .hero { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 3.5rem; padding-top: 4.5rem; } .poster-frame { align-self: center; width: min(88vw, 390px); } h1 { font-size: clamp(2.7rem, 12vw, 4.2rem); } .cta { width: 100%; } .site-footer { flex-direction: column; } .copyright { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }